From 8de1374fd1a2ca8c3b5c54b13ab1b22a037a587b Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Thu, 9 May 2024 20:22:51 -0400 Subject: [PATCH 1/2] [PAY-2966] Add purchase track to mobile collection tracklist overflow --- .../store/ui/mobile-overflow-menu/types.ts | 3 ++- .../OverflowMenuDrawer.tsx | 3 ++- .../TrackOverflowMenuDrawer.tsx | 26 ++++++++++++++++--- .../components/track-list/TrackListItem.tsx | 5 ++-- 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/packages/common/src/store/ui/mobile-overflow-menu/types.ts b/packages/common/src/store/ui/mobile-overflow-menu/types.ts index cc970e37ea1..0d1f1da363c 100644 --- a/packages/common/src/store/ui/mobile-overflow-menu/types.ts +++ b/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 { diff --git a/packages/mobile/src/components/overflow-menu-drawer/OverflowMenuDrawer.tsx b/packages/mobile/src/components/overflow-menu-drawer/OverflowMenuDrawer.tsx index de73ba6f6b9..a07dc65d27c 100644 --- a/packages/mobile/src/components/overflow-menu-drawer/OverflowMenuDrawer.tsx +++ b/packages/mobile/src/components/overflow-menu-drawer/OverflowMenuDrawer.tsx @@ -51,7 +51,8 @@ const overflowRowConfig: Record = { [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 = () => { diff --git a/packages/mobile/src/components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx b/packages/mobile/src/components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx index 3f29f791492..55e9729cf07 100644 --- a/packages/mobile/src/components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx +++ b/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.LineUpCollectionTile } + ) + } + }, [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) diff --git a/packages/mobile/src/components/track-list/TrackListItem.tsx b/packages/mobile/src/components/track-list/TrackListItem.tsx index 63750a86015..f9f22bf1da1 100644 --- a/packages/mobile/src/components/track-list/TrackListItem.tsx +++ b/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, From c1b03801a57238b685362b634e3429e924d8c728 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Fri, 10 May 2024 14:23:41 -0400 Subject: [PATCH 2/2] TrackListItem --- .../components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mobile/src/components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx b/packages/mobile/src/components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx index 55e9729cf07..63e2110c983 100644 --- a/packages/mobile/src/components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx +++ b/packages/mobile/src/components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx @@ -93,7 +93,7 @@ const TrackOverflowMenuDrawer = ({ render }: Props) => { contentId: track?.track_id, contentType: PurchaseableContentType.TRACK }, - { source: ModalSource.LineUpCollectionTile } + { source: ModalSource.TrackListItem } ) } }, [track, openPremiumContentPurchaseModal])