[PAY-2767] Premium albums mobile analytics

packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx

@@ -13,7 +13,7 @@ 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 } from '@audius/common/store'
 import {
   usersSocialActions,
   tippingActions,
@@ -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])
 

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}
     />
   )
 }

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}
         />
       </View>
       {children}
@@ -167,6 +169,7 @@ export const LineupTile = ({
           }
           streamConditions={streamConditions}
           hasStreamAccess={hasStreamAccess}
+          source={source}
           onPressOverflow={onPressOverflow}
           onPressRepost={onPressRepost}
           onPressSave={onPressSave}

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
   ])
 

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<AccessConditions>
   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}
           />
         </View>
       )
@@ -160,6 +164,7 @@ export const LineupTileActionButtons = ({
               contentType={contentType}
               streamConditions={streamConditions}
               hasStreamAccess={hasStreamAccess}
+              source={source}
             />
           ) : null}
           {showLeftButtons && (

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}
           />
         )
       }

packages/mobile/src/components/lineup-tile/types.ts

@@ -7,7 +7,8 @@ import type {
   ID,
   UID,
   Track,
-  User
+  User,
+  ModalSource
 } from '@audius/common/models'
 import type { RepostType, EnhancedCollectionTrack } from '@audius/common/store'
 import type { StyleProp, ViewStyle } from 'react-native'
@@ -23,6 +24,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 +67,9 @@ export type LineupItemProps = {
 
   /** Passed in styles */
   styles?: StyleProp<ViewStyle>
+
+  /** Tell the tile where it's being used */
+  source?: LineupTileSource
 }
 
 export type LineupTileProps = Omit<LineupItemProps, 'togglePlay'> & {
@@ -125,4 +136,7 @@ export type LineupTileProps = Omit<LineupItemProps, 'togglePlay'> & {
   isPlayingUid: boolean
 
   TileProps?: Partial<TileProps>
+
+  /** Analytics context about where this tile is being used */
+  source?: LineupTileSource
 }

packages/mobile/src/screens/chat-screen/ChatMessagePlaylist.tsx

@@ -6,7 +6,7 @@ import {
 } from '@audius/common/api'
 import { usePlayTrack, usePauseTrack } from '@audius/common/hooks'
 import type { TrackPlayback } from '@audius/common/hooks'
-import { Name, PlaybackSource, Kind } from '@audius/common/models'
+import { Name, PlaybackSource, Kind, ModalSource } from '@audius/common/models'
 import type { ID } from '@audius/common/models'
 import {
   accountSelectors,
@@ -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
 }

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
 }