[PAY-2966] Add purchase track to mobile collection tracklist overflow

packages/common/src/store/ui/mobile-overflow-menu/types.ts

@@ -29,7 +29,8 @@ export enum OverflowAction {
   UNFOLLOW = 'UNFOLLOW',
   MARK_AS_PLAYED = 'MARK_AS_PLAYED',
   MARK_AS_UNPLAYED = 'MARK_AS_UNPLAYED',
-  RELEASE_NOW = 'RELEASE_NOW'
+  RELEASE_NOW = 'RELEASE_NOW',
+  PURCHASE_TRACK = 'PURCHASE_TRACK'
 }
 
 export enum OverflowSource {

packages/mobile/src/components/overflow-menu-drawer/OverflowMenuDrawer.tsx

@@ -51,7 +51,8 @@ const overflowRowConfig: Record<OverflowAction, ActionDrawerRow> = {
   [OverflowAction.VIEW_COLLECTIBLE_PAGE]: { text: 'View Collectible Page' },
   [OverflowAction.VIEW_EPISODE_PAGE]: { text: 'View Episode Page' },
   [OverflowAction.MARK_AS_PLAYED]: { text: 'Mark as Played' },
-  [OverflowAction.MARK_AS_UNPLAYED]: { text: 'Mark as Unplayed' }
+  [OverflowAction.MARK_AS_UNPLAYED]: { text: 'Mark as Unplayed' },
+  [OverflowAction.PURCHASE_TRACK]: { text: 'Purchase Track' }
 }
 
 export const OverflowMenuDrawer = () => {

packages/mobile/src/components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx

@@ -1,10 +1,11 @@
-import { useContext } from 'react'
+import { useCallback, useContext } from 'react'
 
 import {
   ShareSource,
   RepostSource,
   FavoriteSource,
-  FollowSource
+  FollowSource,
+  ModalSource
 } from '@audius/common/models'
 import type { ID } from '@audius/common/models'
 import {
@@ -20,7 +21,9 @@ import {
   mobileOverflowMenuUISelectors,
   shareModalUIActions,
   OverflowAction,
-  playbackPositionActions
+  playbackPositionActions,
+  PurchaseableContentType,
+  usePremiumContentPurchaseModal
 } from '@audius/common/store'
 import type { CommonState, OverflowActionCallbacks } from '@audius/common/store'
 import { useDispatch, useSelector } from 'react-redux'
@@ -63,6 +66,8 @@ const TrackOverflowMenuDrawer = ({ render }: Props) => {
   const { toast } = useToast()
   const { id: modalId, contextPlaylistId } = useSelector(getMobileOverflowModal)
   const id = modalId as ID
+  const { onOpen: openPremiumContentPurchaseModal } =
+    usePremiumContentPurchaseModal()
 
   const track = useSelector((state: CommonState) => getTrack(state, { id }))
   const playlist = useSelector((state: CommonState) =>
@@ -81,6 +86,18 @@ const TrackOverflowMenuDrawer = ({ render }: Props) => {
     getUser(state, { id: track?.owner_id })
   )
 
+  const handlePurchasePress = useCallback(() => {
+    if (track?.track_id) {
+      openPremiumContentPurchaseModal(
+        {
+          contentId: track?.track_id,
+          contentType: PurchaseableContentType.TRACK
+        },
+        { source: ModalSource.TrackListItem }
+      )
+    }
+  }, [track, openPremiumContentPurchaseModal])
+
   if (!track || !user) {
     return null
   }
@@ -179,7 +196,8 @@ const TrackOverflowMenuDrawer = ({ render }: Props) => {
     [OverflowAction.MARK_AS_UNPLAYED]: () => {
       dispatch(clearTrackPosition({ trackId: id, userId: currentUserId }))
       toast({ content: messages.markedAsUnplayed })
-    }
+    },
+    [OverflowAction.PURCHASE_TRACK]: handlePurchasePress
   }
 
   return render(callbacks)

packages/mobile/src/components/track-list/TrackListItem.tsx

@@ -297,16 +297,17 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
   const handleOpenOverflowMenu = useCallback(() => {
     const overflowActions = [
       OverflowAction.SHARE,
-      !isTrackOwner
+      !isTrackOwner && !isLocked
         ? has_current_user_saved
           ? OverflowAction.UNFAVORITE
           : OverflowAction.FAVORITE
         : null,
-      !isTrackOwner
+      !isTrackOwner && !isLocked
         ? has_current_user_reposted
           ? OverflowAction.UNREPOST
           : OverflowAction.REPOST
         : null,
+      !isTrackOwner && isLocked ? OverflowAction.PURCHASE_TRACK : null,
       isEditAlbumsEnabled && isTrackOwner && !ddexApp
         ? OverflowAction.ADD_TO_ALBUM
         : null,