Fix fan club UI

packages/common/src/hooks/content/types.ts

@@ -1 +1 @@
-export type LockedStatusVariant = 'premium' | 'gated'
+export type LockedStatusVariant = 'premium' | 'gated' | 'tokenGated'

packages/common/src/hooks/content/useIsTrackUnlockable.ts

@@ -1,6 +1,7 @@
 import { useTrack } from '~/api'
 import {
   isContentSpecialAccess,
+  isContentTokenGated,
   isContentUSDCPurchaseGated,
   ID
 } from '~/models'
@@ -14,6 +15,7 @@ export const useIsTrackUnlockable = (trackId: ID) => {
 
   const isPurchaseable = isContentUSDCPurchaseGated(streamConditions)
   const isSpecialAccess = isContentSpecialAccess(streamConditions)
+  const isTokenGated = isContentTokenGated(streamConditions)
 
-  return isPurchaseable || isSpecialAccess
+  return isPurchaseable || isSpecialAccess || isTokenGated
 }

packages/common/src/hooks/content/useTrackLockedStatusVariant.ts

@@ -2,6 +2,7 @@ import { useTrack } from '~/api'
 import {
   ID,
   isContentSpecialAccess,
+  isContentTokenGated,
   isContentUSDCPurchaseGated
 } from '~/models'
 import { Nullable } from '~/utils'
@@ -15,12 +16,15 @@ export const useTrackLockedStatusVariant = (trackId: ID) => {
 
   const isPurchaseable = isContentUSDCPurchaseGated(streamConditions)
   const isSpecialAccess = isContentSpecialAccess(streamConditions)
+  const isTokenGated = isContentTokenGated(streamConditions)
 
   let variant: Nullable<LockedStatusVariant> = null
   if (isPurchaseable) {
     variant = 'premium'
   } else if (isSpecialAccess) {
     variant = 'gated'
+  } else if (isTokenGated) {
+    variant = 'tokenGated'
   }
 
   return variant

packages/harmony/src/components/button/Button/Button.tsx

@@ -25,6 +25,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       hoverColor,
       variant = 'primary',
       size = 'default',
+      rounded,
       disabled,
       ...baseProps
     } = props
@@ -176,7 +177,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       color: themeColors.static.white,
       boxSizing: 'border-box',
       border: 'none',
-      borderRadius: cornerRadius.s,
+      borderRadius: rounded ? cornerRadius['2xl'] : cornerRadius.s,
       boxShadow: shadows.near,
 
       ...(isSmallOrXs

packages/harmony/src/components/button/Button/types.ts

@@ -34,4 +34,9 @@ export type ButtonProps = {
    * The button size
    */
   size?: ButtonSize
+
+  /**
+   * When true, uses fully rounded (pill-shaped) corners
+   */
+  rounded?: boolean
 } & Omit<BaseButtonProps, 'styles'>

packages/mobile/src/components/core/AccessTypeLabel.tsx

@@ -13,8 +13,6 @@ import {
   IconArtistCoin
 } from '@audius/harmony-native'
 
-import { CoinGatedLabelSvg } from './CoinGatedLabelSvg'
-
 type AccessTypeLabelProps = {
   type?: AccessType
   scheduledReleaseDate?: string
@@ -59,8 +57,8 @@ const ACCESS_TYPE_CONFIG: Record<AccessType, AccessTypeConfig> = {
   },
   [AccessType.TOKEN_GATED]: {
     icon: IconArtistCoin,
-    label: 'Coin Gated',
-    color: 'artistCoin'
+    label: 'Fan Club',
+    color: 'subdued'
   },
   [AccessType.EXTRAS]: {
     icon: IconReceive,
@@ -79,14 +77,6 @@ export const AccessTypeLabel = (props: AccessTypeLabelProps) => {
       ? config.label(scheduledReleaseDate)
       : config.label
 
-  if (type === AccessType.TOKEN_GATED) {
-    return (
-      <Flex direction='row' gap='xs' alignItems='center'>
-        <CoinGatedLabelSvg />
-      </Flex>
-    )
-  }
-
   return (
     <Flex direction='row' gap='xs' alignItems='center'>
       {config.icon ? (

packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx

@@ -24,6 +24,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import type { FlexProps } from '@audius/harmony-native'
 import {
+  Button,
   Flex,
   IconLock,
   IconLockUnlocked,
@@ -47,7 +48,7 @@ const { setLockedContentId } = gatedContentActions
 const messages = {
   unlocking: 'Unlocking',
   locked: 'Locked',
-  buyArtistCoin: 'Buy Fan Club Token',
+  unlock: 'Unlock',
   price: (price: string) => `$${price}`
 }
 
@@ -148,7 +149,7 @@ export const LineupTileAccessStatus = ({
         USDC(streamConditions.usdc_purchase.price / 100).toLocaleString()
       )
     : isTokenGated
-      ? messages.buyArtistCoin
+      ? messages.unlock
       : isUnlocking
         ? messages.unlocking
         : messages.locked
@@ -180,6 +181,20 @@ export const LineupTileAccessStatus = ({
     style: { backgroundColor }
   }
 
+  if (isTokenGated && !hasStreamAccess && !isUnlocking) {
+    return (
+      <Button
+        variant='secondary'
+        size='small'
+        rounded
+        onPress={handlePressWithBlock}
+        style={{ height: 24 }}
+      >
+        {buttonText}
+      </Button>
+    )
+  }
+
   return (
     <TouchableOpacity onPressIn={blockTilePress} onPress={handlePressWithBlock}>
       <Flex
@@ -208,9 +223,9 @@ export const LineupTileAccessStatus = ({
             style={styles.loadingSpinner}
             fill={color.icon.staticWhite}
           />
-        ) : !isTokenGated ? (
+        ) : (
           <IconLock color='white' size='s' />
-        ) : null}
+        )}
         {showButtonText ? (
           <Text color='white' variant='label' size='m'>
             {buttonText}

packages/mobile/src/components/navigation-container/NavigationContainer.tsx

@@ -186,9 +186,6 @@ const NavigationContainer = (props: NavigationContainerProps) => {
                         },
                         CoinRedeemScreen: {
                           path: 'coins/:ticker/redeem/:code?'
-                        },
-                        ExclusiveTracksScreen: {
-                          path: 'coins/:ticker/exclusive-tracks'
                         }
                       }
                     },

packages/mobile/src/components/track-details-tile/TrackDetailsTile.tsx

@@ -26,14 +26,13 @@ import { makeStyles, flexRowCentered, typography } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
 
-import { CoinGatedLabelSvg } from '../core/CoinGatedLabelSvg'
 import { TrackImage } from '../image/TrackImage'
 import { TrackDogEar } from '../track/TrackDogEar'
 
 const messages = {
   specialAccess: 'SPECIAL ACCESS',
   premiumTrack: 'PREMIUM TRACK',
-  coinGated: 'COIN GATED',
+  coinGated: 'FAN CLUB',
   earn: (amount: string) => `Earn ${amount} $AUDIO for this purchase!`
 }
 
@@ -142,26 +141,20 @@ export const TrackDetailsTile = ({
         <View style={styles.metadataContainer}>
           {showLabel ? (
             <View style={styles.streamContentLabelContainer}>
-              {isTokenGated ? (
-                <CoinGatedLabelSvg style={{ height: 28, width: 108 }} />
-              ) : (
-                <>
-                  <IconComponent
-                    fill={color}
-                    width={spacing(5)}
-                    height={spacing(5)}
-                  />
-                  <Text
-                    fontSize='small'
-                    colorValue={color}
-                    weight='demiBold'
-                    textTransform='uppercase'
-                    style={styles.streamContentLabel}
-                  >
-                    {title}
-                  </Text>
-                </>
-              )}
+              <IconComponent
+                fill={color}
+                width={spacing(5)}
+                height={spacing(5)}
+              />
+              <Text
+                fontSize='small'
+                colorValue={color}
+                weight='demiBold'
+                textTransform='uppercase'
+                style={styles.streamContentLabel}
+              >
+                {title}
+              </Text>
             </View>
           ) : null}
           <Text

packages/mobile/src/components/track/TrackLockedStatusBadge.tsx

@@ -4,8 +4,14 @@ import {
 } from '@audius/common/hooks'
 import type { ID } from '@audius/common/models'
 
+import { Flex, IconLock, Text } from '@audius/harmony-native'
+
 import { LockedStatusBadge } from '../core/LockedStatusBadge'
 
+const messages = {
+  membersOnly: 'Members Only'
+}
+
 type TrackLockedStatusBadgeProps = {
   trackId: ID
 }
@@ -16,5 +22,23 @@ export const TrackLockedStatusBadge = (props: TrackLockedStatusBadgeProps) => {
   const variant = useTrackLockedStatusVariant(trackId)
   if (!variant) return null
 
+  if (variant === 'tokenGated' && !hasStreamAccess) {
+    return (
+      <Flex
+        direction='row'
+        gap='xs'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <IconLock size='s' color='default' />
+        <Flex>
+          <Text variant='body' size='xs' color='default'>
+            {messages.membersOnly}
+          </Text>
+        </Flex>
+      </Flex>
+    )
+  }
+
   return <LockedStatusBadge variant={variant} locked={!hasStreamAccess} />
 }

packages/mobile/src/harmony-native/components/Button/Button/Button.tsx

@@ -23,6 +23,7 @@ export const Button = (props: ButtonProps) => {
     hexColor,
     variant = 'primary',
     size = 'default',
+    rounded,
     disabled,
     style,
     gradient,
@@ -199,7 +200,7 @@ export const Button = (props: ButtonProps) => {
 
   const buttonStyles: ViewStyle = {
     borderWidth: 0,
-    borderRadius: cornerRadius.s,
+    borderRadius: rounded ? cornerRadius['2xl'] : cornerRadius.s,
     alignItems: 'center',
     justifyContent: 'center',
     // TODO bring this back properly

packages/mobile/src/harmony-native/components/Button/Button/types.ts

@@ -30,5 +30,10 @@ export type ButtonProps = {
    */
   size?: ButtonSize
 
+  /**
+   * When true, uses fully rounded (pill-shaped) corners
+   */
+  rounded?: boolean
+
   style?: StyleProp<ViewStyle>
 } & Omit<BaseButtonProps, 'styles'>

packages/mobile/src/screens/app-screen/AppTabScreen.tsx

@@ -32,8 +32,7 @@ import { ChatScreen } from 'app/screens/chat-screen/ChatScreen'
 import { ChatUserListScreen } from 'app/screens/chat-screen/ChatUserListScreen'
 import {
   CoinDetailsScreen,
-  EditCoinDetailsScreen,
-  ExclusiveTracksScreen
+  EditCoinDetailsScreen
 } from 'app/screens/coin-details-screen'
 import { CoinRedeemScreen } from 'app/screens/coin-redeem-screen'
 import { CollectionScreen } from 'app/screens/collection-screen/CollectionScreen'
@@ -123,7 +122,6 @@ export type AppTabScreenParamList = {
   CoinDetailsScreen: { ticker: string }
   CoinRedeemScreen: { ticker: string; code?: string }
   EditCoinDetailsScreen: { ticker: string }
-  ExclusiveTracksScreen: { ticker: string }
   Upload: {
     initialMetadata?: Partial<TrackMetadataForUpload>
   }
@@ -246,10 +244,6 @@ export const AppTabScreen = ({ baseScreen, Stack }: AppTabScreenProps) => {
         name='EditCoinDetailsScreen'
         component={EditCoinDetailsScreen}
       />
-      <Stack.Screen
-        name='ExclusiveTracksScreen'
-        component={ExclusiveTracksScreen}
-      />
       <Stack.Screen
         name='ArtistCoinsExplore'
         component={ArtistCoinsExploreScreen}