[PAY-2695] Add hidden and premium collection card variants

packages/harmony/src/foundations/spacing/spacing.ts

@@ -44,6 +44,7 @@ export const spacing = {
 }
 
 export const iconSizes = {
+  '2xs': 12,
   xs: 14,
   s: 16,
   m: 20,

packages/web/src/components/collection/CollectionCard.test.tsx

@@ -1,13 +1,14 @@
 import { SquareSizes } from '@audius/common/models'
 import { Text } from '@audius/harmony'
+import { merge } from 'lodash'
 import { Routes, Route } from 'react-router-dom-v5-compat'
 import { describe, it, expect } from 'vitest'
 
-import { render, screen } from 'test/test-utils'
+import { RenderOptions, render, screen } from 'test/test-utils'
 
 import { CollectionCard } from './CollectionCard'
 
-function renderCollectionCard() {
+function renderCollectionCard(options?: RenderOptions) {
   return render(
     <Routes>
       <Route path='/' element={<CollectionCard id={1} size='s' />} />
@@ -20,42 +21,45 @@ function renderCollectionCard() {
         element={<Text variant='heading'>Test User Page</Text>}
       />
     </Routes>,
-    {
-      reduxState: {
-        collections: {
-          entries: {
-            1: {
-              metadata: {
-                playlist_id: 1,
-                playlist_name: 'Test Collection',
-                playlist_owner_id: 2,
-                permalink: '/test-user/test-collection',
-                repost_count: 10,
-                save_count: 5,
-                _cover_art_sizes: {
-                  [SquareSizes.SIZE_150_BY_150]: 'image-small.jpg',
-                  [SquareSizes.SIZE_480_BY_480]: 'image-medium.jpg'
+    merge(
+      {
+        reduxState: {
+          collections: {
+            entries: {
+              1: {
+                metadata: {
+                  playlist_id: 1,
+                  playlist_name: 'Test Collection',
+                  playlist_owner_id: 2,
+                  permalink: '/test-user/test-collection',
+                  repost_count: 10,
+                  save_count: 5,
+                  _cover_art_sizes: {
+                    [SquareSizes.SIZE_150_BY_150]: 'image-small.jpg',
+                    [SquareSizes.SIZE_480_BY_480]: 'image-medium.jpg'
+                  }
                 }
               }
             }
-          }
-        },
-        users: {
-          entries: {
-            2: { metadata: { handle: 'test-user', name: 'Test User' } }
+          },
+          users: {
+            entries: {
+              2: { metadata: { handle: 'test-user', name: 'Test User' } }
+            }
           }
         }
-      }
-    }
+      },
+      options
+    )
   )
 }
 
 describe('CollectionCard', () => {
-  it('renders a button with the label comprising the collection and artist name', () => {
+  it('renders a button with the label comprising the collection and artist name, and favorites and reposts', () => {
     renderCollectionCard()
     expect(
       screen.getByRole('button', {
-        name: /test collection test user/i
+        name: /test collection test user reposts 10 favorites 5/i
       })
     ).toBeInTheDocument()
   })
@@ -89,12 +93,63 @@ describe('CollectionCard', () => {
     ).toBeInTheDocument()
   })
 
-  it('shows the number of reposts and favorites with the correct screen-reader text', () => {
-    renderCollectionCard()
-    expect(screen.getByTitle('Reposts')).toBeInTheDocument()
-    expect(screen.getByText('10')).toBeInTheDocument()
+  it('hidden collections are rendered correctly', () => {
+    renderCollectionCard({
+      reduxState: {
+        collections: { entries: { 1: { metadata: { is_private: true } } } }
+      }
+    })
+
+    expect(
+      screen.getByRole('button', { name: /test collection test user hidden/i })
+    ).toBeInTheDocument()
+  })
+
+  it('premium locked collections are rendered correctly', () => {
+    renderCollectionCard({
+      reduxState: {
+        collections: {
+          entries: {
+            1: {
+              metadata: {
+                access: { stream: false },
+                stream_conditions: {
+                  usdc_purchase: { price: 10, albumTrackPrice: 1, splits: {} }
+                }
+              }
+            }
+          }
+        }
+      }
+    })
+    expect(
+      screen.getByRole('button', {
+        name: /test collection test user reposts 10 favorites 5 available for purchase/i
+      })
+    )
+  })
 
-    expect(screen.getByTitle('Favorites')).toBeInTheDocument()
-    expect(screen.getByText('5')).toBeInTheDocument()
+  it('premium unlocked collections are rendered correctly', () => {
+    renderCollectionCard({
+      reduxState: {
+        collections: {
+          entries: {
+            1: {
+              metadata: {
+                access: { stream: true },
+                stream_conditions: {
+                  usdc_purchase: { price: 10, albumTrackPrice: 1, splits: {} }
+                }
+              }
+            }
+          }
+        }
+      }
+    })
+    expect(
+      screen.getByRole('button', {
+        name: /test collection test user reposts 10 favorites 5 purchased/i
+      })
+    )
   })
 })

packages/web/src/components/collection/CollectionCard.tsx

@@ -1,19 +1,27 @@
-import { ID, SquareSizes } from '@audius/common/models'
+import {
+  DogEarType,
+  ID,
+  SquareSizes,
+  isContentUSDCPurchaseGated
+} from '@audius/common/models'
 import { cacheCollectionsSelectors } from '@audius/common/store'
 import { Divider, Flex, Paper, Text } from '@audius/harmony'
 import IconHeart from '@audius/harmony/src/assets/icons/Heart.svg'
 import IconRepost from '@audius/harmony/src/assets/icons/Repost.svg'
 import { Link, useLinkClickHandler } from 'react-router-dom-v5-compat'
 
+import { DogEar } from 'components/dog-ear'
 import { UserLink } from 'components/link'
+import { LockedStatusPill } from 'components/locked-status-pill'
 import { useSelector } from 'utils/reducer'
 
 import { CollectionImage } from './CollectionImage'
 const { getCollection } = cacheCollectionsSelectors
 
 const messages = {
   repost: 'Reposts',
-  favorites: 'Favorites'
+  favorites: 'Favorites',
+  hidden: 'Hidden'
 }
 
 type CardSize = 's' | 'm' | 'l'
@@ -51,50 +59,100 @@ export const CollectionCard = (props: CollectionCardProps) => {
     permalink,
     playlist_owner_id,
     repost_count,
-    save_count
+    save_count,
+    is_private,
+    access,
+    stream_conditions
   } = collection
 
+  const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+  const dogEarType = is_private
+    ? DogEarType.HIDDEN
+    : isPurchase && !access.stream
+    ? DogEarType.USDC_PURCHASE
+    : null
+
   return (
     <Paper
       role='button'
       tabIndex={0}
       onClick={handleClick}
-      aria-labelledby={`${id}-title ${id}-artist`}
+      aria-labelledby={`${id}-title ${id}-artist ${id}-repost ${id}-favorite ${id}-condition`}
       direction='column'
+      border='default'
       w={cardSizes[size]}
-      css={{ cursor: 'pointer' }}
+      css={{ cursor: 'pointer', overflow: 'unset' }}
     >
+      {dogEarType ? (
+        <DogEar type={dogEarType} css={{ top: -1, left: -1 }} />
+      ) : null}
       <Flex direction='column' p='s' gap='s'>
         <CollectionImage
           collectionId={id}
           size={cardSizeToCoverArtSizeMap[size]}
           data-testid={`${id}-cover-art`}
         />
-        <Link id={`${id}-title`} to={permalink} css={{ alignSelf: 'center' }}>
-          <Text variant='title' tag='span' color='default' textAlign='center'>
+        <Text
+          id={`${id}-title`}
+          variant='title'
+          color='default'
+          ellipses
+          asChild
+        >
+          <Link to={permalink} css={{ pointerEvents: 'none' }}>
             {playlist_name}
-          </Text>
-        </Link>
+          </Link>
+        </Text>
         <UserLink
           id={`${id}-artist`}
           userId={playlist_owner_id}
-          css={{ alignSelf: 'center' }}
+          textVariant='body'
+          css={{ justifyContent: 'center' }}
         />
       </Flex>
       <Divider orientation='horizontal' />
-      <Flex gap='l' p='s' justifyContent='center'>
-        <Flex gap='xs' alignItems='center'>
-          <IconRepost size='s' color='subdued' title={messages.repost} />
-          <Text color='subdued' variant='body' size='s'>
-            {repost_count}
-          </Text>
-        </Flex>
-        <Flex gap='xs' alignItems='center'>
-          <IconHeart size='s' color='subdued' title={messages.favorites} />{' '}
-          <Text color='subdued' variant='body' size='s'>
-            {save_count}
+      <Flex
+        gap='l'
+        p='s'
+        justifyContent='center'
+        backgroundColor='surface1'
+        borderBottomLeftRadius='m'
+        borderBottomRightRadius='m'
+      >
+        {is_private ? (
+          <Text
+            variant='body'
+            size='s'
+            strength='strong'
+            color='subdued'
+            id={`${id}-condition`}
+          >
+            {messages.hidden}
           </Text>
-        </Flex>
+        ) : (
+          <>
+            <Flex gap='xs' alignItems='center' id={`${id}-repost`}>
+              <IconRepost size='s' color='subdued' title={messages.repost} />
+              <Text variant='label' color='subdued'>
+                {repost_count}
+              </Text>
+            </Flex>
+            <Flex gap='xs' alignItems='center' id={`${id}-favorite`}>
+              <IconHeart size='s' color='subdued' title={messages.favorites} />
+              <Text variant='label' color='subdued'>
+                {save_count}
+              </Text>
+            </Flex>
+            {isPurchase ? (
+              <LockedStatusPill
+                variant='premium'
+                locked={!access.stream}
+                id={`${id}-condition`}
+              />
+            ) : null}
+          </>
+        )}
       </Flex>
     </Paper>
   )