[PAY-2698] Add purchase button do album DMs (mobile) (#8134)

AudiusProject · Apr 17, 2024 · eca7b4e · eca7b4e
1 parent 0a85813
commit eca7b4e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 37 deletions.
diff --git a/packages/mobile/src/components/lineup-tile/LineupTile.tsx b/packages/mobile/src/components/lineup-tile/LineupTile.tsx
@@ -148,26 +148,28 @@ export const LineupTile = ({
       </View>
       {children}
 
-      <LineupTileActionButtons
-        hasReposted={has_current_user_reposted}
-        hasSaved={has_current_user_saved}
-        isOwner={isOwner}
-        isShareHidden={hideShare}
-        isUnlisted={isUnlisted}
-        readonly={isReadonly}
-        contentId={contentId}
-        contentType={
-          isTrack
-            ? PurchaseableContentType.TRACK
-            : PurchaseableContentType.ALBUM
-        }
-        streamConditions={streamConditions}
-        hasStreamAccess={hasStreamAccess}
-        onPressOverflow={onPressOverflow}
-        onPressRepost={onPressRepost}
-        onPressSave={onPressSave}
-        onPressShare={onPressShare}
-      />
+      {isReadonly ? null : (
+        <LineupTileActionButtons
+          hasReposted={has_current_user_reposted}
+          hasSaved={has_current_user_saved}
+          isOwner={isOwner}
+          isShareHidden={hideShare}
+          isUnlisted={isUnlisted}
+          readonly={isReadonly}
+          contentId={contentId}
+          contentType={
+            isTrack
+              ? PurchaseableContentType.TRACK
+              : PurchaseableContentType.ALBUM
+          }
+          streamConditions={streamConditions}
+          hasStreamAccess={hasStreamAccess}
+          onPressOverflow={onPressOverflow}
+          onPressRepost={onPressRepost}
+          onPressSave={onPressSave}
+          onPressShare={onPressShare}
+        />
+      )}
     </LineupTileRoot>
   )
 }
diff --git a/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx b/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx
@@ -4,7 +4,8 @@ import { isContentUSDCPurchaseGated } from '@audius/common/models'
 import type { FavoriteType, ID, AccessConditions } from '@audius/common/models'
 import {
   repostsUserListActions,
-  favoritesUserListActions
+  favoritesUserListActions,
+  PurchaseableContentType
 } from '@audius/common/store'
 import type { RepostType } from '@audius/common/store'
 import { dayjs, formatCount } from '@audius/common/utils'
@@ -28,6 +29,7 @@ import { makeStyles, flexRowCentered } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
 
+import { LineupTileAccessStatus } from './LineupTileAccessStatus'
 import { LineupTileGatedContentTypeTag } from './LineupTilePremiumContentTypeTag'
 import { LineupTileRankIcon } from './LineupTileRankIcon'
 import { useStyles as useTrackTileStyles } from './styles'
@@ -139,6 +141,7 @@ export const LineupTileStats = ({
   const navigation = useNavigation()
 
   const hasEngagement = Boolean(repostCount || saveCount)
+  const isPurchase = isContentUSDCPurchaseGated(streamConditions)
 
   const handlePressFavorites = useCallback(() => {
     dispatch(setFavorite(id, favoriteType))
@@ -158,6 +161,41 @@ export const LineupTileStats = ({
 
   const isReadonly = variant === 'readonly'
   const isScheduledRelease = isUnlisted && moment(releaseDate).isAfter(moment())
+
+  const renderLockedContentOrPlayCount = () => {
+    if (streamConditions && !isOwner) {
+      if (isPurchase) {
+        return (
+          <LineupTileAccessStatus
+            contentId={id}
+            contentType={
+              isCollection
+                ? PurchaseableContentType.ALBUM
+                : PurchaseableContentType.TRACK
+            }
+            streamConditions={streamConditions}
+          />
+        )
+      }
+      return (
+        <LockedStatusBadge
+          locked={!hasStreamAccess}
+          variant={isPurchase ? 'purchase' : 'gated'}
+        />
+      )
+    }
+
+    return (
+      !hidePlays &&
+      playCount !== undefined &&
+      playCount > 0 && (
+        <Text style={[trackTileStyles.statText, styles.listenCount]}>
+          {formatPlayCount(playCount)}
+        </Text>
+      )
+    )
+  }
+
   return (
     <View style={styles.root}>
       <View style={styles.stats}>
@@ -259,18 +297,7 @@ export const LineupTileStats = ({
           ) : null}
         </View>
       </View>
-      {streamConditions && !isOwner ? (
-        <LockedStatusBadge
-          locked={!hasStreamAccess}
-          variant={
-            isContentUSDCPurchaseGated(streamConditions) ? 'purchase' : 'gated'
-          }
-        />
-      ) : !hidePlays ? (
-        <Text style={[trackTileStyles.statText, styles.listenCount]}>
-          {formatPlayCount(playCount)}
-        </Text>
-      ) : null}
+      {renderLockedContentOrPlayCount()}
     </View>
   )
 }
diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx
@@ -77,7 +77,7 @@ const RankAndIndexIndicator = ({
   )
 }
 
-const renderLockedOrPlaysContent = ({
+const renderLockedContentOrPlayCount = ({
   hasStreamAccess,
   fieldVisibility,
   isOwner,
@@ -366,7 +366,7 @@ const TrackTile = ({
           </Text>
           <Text variant='body' size='xs' className={styles.bottomRight}>
             {!isLoading
-              ? renderLockedOrPlaysContent({
+              ? renderLockedContentOrPlayCount({
                   hasStreamAccess,
                   fieldVisibility,
                   isOwner,

diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx
@@ -86,7 +86,7 @@ type LockedOrPlaysContentProps = Pick<
     onClickGatedUnlockPill: (e: MouseEvent) => void
   }
 
-const renderLockedOrPlaysContent = ({
+const renderLockedContentOrPlayCount = ({
   hasStreamAccess,
   fieldVisibility,
   isOwner,
@@ -477,7 +477,7 @@ const TrackTile = (props: CombinedProps) => {
             className={cn(styles.bottomRight, fadeIn)}
           >
             {!isLoading
-              ? renderLockedOrPlaysContent({
+              ? renderLockedContentOrPlayCount({
                   hasStreamAccess,
                   fieldVisibility,
                   isOwner,