diff --git a/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx b/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx index bb086047379..53117477999 100644 --- a/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx +++ b/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx @@ -13,8 +13,8 @@ import { } from '@audius/common/models' import type { ID, AccessConditions, User } from '@audius/common/models' import { FeatureFlags } from '@audius/common/services' -import type { PurchaseableContentType } from '@audius/common/store' import { + PurchaseableContentType, usersSocialActions, tippingActions, usePremiumContentPurchaseModal, @@ -226,7 +226,12 @@ export const DetailsTileNoAccess = ({ const handlePurchasePress = useCallback(() => { openPremiumContentPurchaseModal( { contentId: trackId, contentType }, - { source: ModalSource.TrackDetails } + { + source: + contentType === PurchaseableContentType.ALBUM + ? ModalSource.CollectionDetails + : ModalSource.TrackDetails + } ) }, [trackId, openPremiumContentPurchaseModal, contentType]) diff --git a/packages/mobile/src/components/lineup-tile/CollectionTile.tsx b/packages/mobile/src/components/lineup-tile/CollectionTile.tsx index a8a6e417c84..c06d4345a68 100644 --- a/packages/mobile/src/components/lineup-tile/CollectionTile.tsx +++ b/packages/mobile/src/components/lineup-tile/CollectionTile.tsx @@ -36,7 +36,7 @@ import { getIsCollectionMarkedForDownload } from 'app/store/offline-downloads/se import { CollectionTileTrackList } from './CollectionTileTrackList' import { LineupTile } from './LineupTile' -import type { LineupItemProps } from './types' +import { LineupTileSource, type LineupItemProps } from './types' const { getUid } = playerSelectors const { requestOpen: requestOpenShareModal } = shareModalUIActions const { open: openOverflowMenu } = mobileOverflowMenuUIActions @@ -51,7 +51,12 @@ const { getCollection, getTracksFromCollection } = cacheCollectionsSelectors const getUserId = accountSelectors.getUserId export const CollectionTile = (props: LineupItemProps) => { - const { uid, collection: collectionOverride, tracks: tracksOverride } = props + const { + uid, + collection: collectionOverride, + tracks: tracksOverride, + source = LineupTileSource.LINEUP_COLLECTION + } = props const collection = useProxySelector( (state) => { @@ -89,6 +94,7 @@ export const CollectionTile = (props: LineupItemProps) => { collection={collection} tracks={tracks} user={user} + source={source} /> ) } diff --git a/packages/mobile/src/components/lineup-tile/LineupTile.tsx b/packages/mobile/src/components/lineup-tile/LineupTile.tsx index f3f6123103e..1239e2b8a40 100644 --- a/packages/mobile/src/components/lineup-tile/LineupTile.tsx +++ b/packages/mobile/src/components/lineup-tile/LineupTile.tsx @@ -37,6 +37,7 @@ export const LineupTile = ({ index, isTrending, isUnlisted, + source, onPress, onPressOverflow, onPressRepost, @@ -147,6 +148,7 @@ export const LineupTile = ({ isArtistPick={isArtistPick} showArtistPick={showArtistPick} releaseDate={item?.release_date ? item.release_date : undefined} + source={source} /> {children} @@ -167,6 +169,7 @@ export const LineupTile = ({ } streamConditions={streamConditions} hasStreamAccess={hasStreamAccess} + source={source} onPressOverflow={onPressOverflow} onPressRepost={onPressRepost} onPressSave={onPressSave} diff --git a/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx b/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx index 0f42e59ebbf..402a145158d 100644 --- a/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx +++ b/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx @@ -2,8 +2,8 @@ import { useCallback } from 'react' import type { ID, AccessConditions } from '@audius/common/models' import { ModalSource, isContentUSDCPurchaseGated } from '@audius/common/models' -import type { PurchaseableContentType } from '@audius/common/store' import { + PurchaseableContentType, usePremiumContentPurchaseModal, gatedContentActions, gatedContentSelectors @@ -25,6 +25,8 @@ import { useIsUSDCEnabled } from 'app/hooks/useIsUSDCEnabled' import { setVisibility } from 'app/store/drawers/slice' import { makeStyles } from 'app/styles' +import { LineupTileSource } from './types' + const { getGatedContentStatusMap } = gatedContentSelectors const { setLockedContentId } = gatedContentActions @@ -45,12 +47,14 @@ export const LineupTileAccessStatus = ({ contentId, contentType, streamConditions, - hasStreamAccess + hasStreamAccess, + source: tileSource }: { contentId: ID contentType: PurchaseableContentType streamConditions: AccessConditions hasStreamAccess: boolean | undefined + source?: LineupTileSource }) => { const styles = useStyles() const { color } = useTheme() @@ -69,20 +73,34 @@ export const LineupTileAccessStatus = ({ return } if (isUSDCPurchase) { + const determineModalSource = () => { + if (tileSource === LineupTileSource.DM_COLLECTION) { + return ModalSource.DirectMessageCollectionTile + } + if (tileSource === LineupTileSource.DM_TRACK) { + return ModalSource.DirectMessageTrackTile + } + return contentType === PurchaseableContentType.ALBUM + ? ModalSource.LineUpCollectionTile + : ModalSource.LineUpTrackTile + } openPremiumContentPurchaseModal( { contentId, contentType }, - { source: ModalSource.TrackTile } + { + source: determineModalSource() + } ) } else if (contentId) { dispatch(setLockedContentId({ id: contentId })) dispatch(setVisibility({ drawer: 'LockedContent', visible: true })) } }, [ - isUSDCPurchase, hasStreamAccess, + isUSDCPurchase, contentId, openPremiumContentPurchaseModal, contentType, + tileSource, dispatch ]) diff --git a/packages/mobile/src/components/lineup-tile/LineupTileActionButtons.tsx b/packages/mobile/src/components/lineup-tile/LineupTileActionButtons.tsx index 16f962fcf57..cc7dcac5d19 100644 --- a/packages/mobile/src/components/lineup-tile/LineupTileActionButtons.tsx +++ b/packages/mobile/src/components/lineup-tile/LineupTileActionButtons.tsx @@ -18,6 +18,7 @@ import { flexRowCentered, makeStyles } from 'app/styles' import type { GestureResponderHandler } from 'app/types/gesture' import { LineupTileAccessStatus } from './LineupTileAccessStatus' +import type { LineupTileSource } from './types' const messages = { shareButtonLabel: 'Share Content', @@ -38,6 +39,7 @@ type Props = { contentType?: PurchaseableContentType streamConditions?: Nullable hasStreamAccess?: boolean + source?: LineupTileSource onPressOverflow?: GestureResponderHandler onPressRepost?: GestureResponderHandler onPressSave?: GestureResponderHandler @@ -81,6 +83,7 @@ export const LineupTileActionButtons = ({ hasStreamAccess = false, readonly = false, streamConditions, + source, onPressOverflow, onPressRepost, onPressSave, @@ -146,6 +149,7 @@ export const LineupTileActionButtons = ({ contentType={contentType} streamConditions={streamConditions} hasStreamAccess={hasStreamAccess} + source={source} /> ) @@ -160,6 +164,7 @@ export const LineupTileActionButtons = ({ contentType={contentType} streamConditions={streamConditions} hasStreamAccess={hasStreamAccess} + source={source} /> ) : null} {showLeftButtons && ( diff --git a/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx b/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx index 0c32f3af53a..a5c147e931b 100644 --- a/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx +++ b/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx @@ -33,7 +33,7 @@ import { LineupTileAccessStatus } from './LineupTileAccessStatus' import { LineupTileGatedContentTypeTag } from './LineupTilePremiumContentTypeTag' import { LineupTileRankIcon } from './LineupTileRankIcon' import { useStyles as useTrackTileStyles } from './styles' -import type { LineupItemVariant } from './types' +import type { LineupItemVariant, LineupTileSource } from './types' const { setFavorite } = favoritesUserListActions const { setRepost } = repostsUserListActions @@ -111,6 +111,7 @@ type Props = { isArtistPick?: boolean showArtistPick?: boolean releaseDate?: string + source?: LineupTileSource } export const LineupTileStats = ({ @@ -132,7 +133,8 @@ export const LineupTileStats = ({ isOwner, isArtistPick, showArtistPick, - releaseDate + releaseDate, + source }: Props) => { const styles = useStyles() const trackTileStyles = useTrackTileStyles() @@ -175,6 +177,7 @@ export const LineupTileStats = ({ } streamConditions={streamConditions} hasStreamAccess={hasStreamAccess} + source={source} /> ) } diff --git a/packages/mobile/src/components/lineup-tile/types.ts b/packages/mobile/src/components/lineup-tile/types.ts index 24a7608ca0d..9316ce23ff2 100644 --- a/packages/mobile/src/components/lineup-tile/types.ts +++ b/packages/mobile/src/components/lineup-tile/types.ts @@ -23,6 +23,13 @@ import type { TileProps } from '../core' */ export type LineupItemVariant = 'readonly' +export enum LineupTileSource { + DM_COLLECTION = 'DM - Collection', + DM_TRACK = 'DM - Track', + LINEUP_COLLECTION = 'Lineup - Collection', + LINEUP_TRACK = 'Lineup - Track' +} + export type LineupItemProps = { /** Index of tile in lineup */ index: number @@ -59,6 +66,9 @@ export type LineupItemProps = { /** Passed in styles */ styles?: StyleProp + + /** Tell the tile where it's being used */ + source?: LineupTileSource } export type LineupTileProps = Omit & { @@ -125,4 +135,7 @@ export type LineupTileProps = Omit & { isPlayingUid: boolean TileProps?: Partial + + /** Analytics context about where this tile is being used */ + source?: LineupTileSource } diff --git a/packages/mobile/src/screens/chat-screen/ChatMessagePlaylist.tsx b/packages/mobile/src/screens/chat-screen/ChatMessagePlaylist.tsx index 18ddcd98fa2..dac2890a555 100644 --- a/packages/mobile/src/screens/chat-screen/ChatMessagePlaylist.tsx +++ b/packages/mobile/src/screens/chat-screen/ChatMessagePlaylist.tsx @@ -18,6 +18,7 @@ import { getPathFromPlaylistUrl, makeUid } from '@audius/common/utils' import { useSelector } from 'react-redux' import { CollectionTile } from 'app/components/lineup-tile' +import { LineupTileSource } from 'app/components/lineup-tile/types' import { make, track as trackEvent } from 'app/services/analytics' const { getUserId } = accountSelectors @@ -171,6 +172,7 @@ export const ChatMessagePlaylist = ({ showRankIcon={false} styles={styles} variant='readonly' + source={LineupTileSource.DM_COLLECTION} /> ) : null } diff --git a/packages/mobile/src/screens/chat-screen/ChatMessageTrack.tsx b/packages/mobile/src/screens/chat-screen/ChatMessageTrack.tsx index eb6691f04b7..7b889f781f6 100644 --- a/packages/mobile/src/screens/chat-screen/ChatMessageTrack.tsx +++ b/packages/mobile/src/screens/chat-screen/ChatMessageTrack.tsx @@ -11,6 +11,7 @@ import { getPathFromTrackUrl, makeUid } from '@audius/common/utils' import { useSelector } from 'react-redux' import { TrackTile } from 'app/components/lineup-tile' +import { LineupTileSource } from 'app/components/lineup-tile/types' import { make, track as trackEvent } from 'app/services/analytics' const { getUserId } = accountSelectors @@ -87,6 +88,7 @@ export const ChatMessageTrack = ({ showRankIcon={false} styles={styles} variant='readonly' + source={LineupTileSource.DM_TRACK} /> ) : null }