[PAY-1723] Purchase content twitter share copy (#4005)

apps/audius-client/packages/common/src/models/Analytics.ts

@@ -329,6 +329,7 @@ export enum Name {
   PURCHASE_CONTENT_STARTED = 'Purchase Content: Started',
   PURCHASE_CONTENT_SUCCESS = 'Purchase Content: Success',
   PURCHASE_CONTENT_FAILURE = 'Purchase Content: Failure',
+  PURCHASE_CONTENT_TWITTER_SHARE = 'Purchase Content: Twitter Share',
 
   // Rate & Review CTA
   RATE_CTA_DISPLAYED = 'Rate CTA: Displayed',
@@ -1589,6 +1590,10 @@ type PurchaseContentFailure = {
   contentType: string
   error: string
 }
+type PurchaseContentTwitterShare = {
+  eventName: Name.PURCHASE_CONTENT_TWITTER_SHARE
+  text: string
+}
 
 type RateCtaDisplayed = {
   eventName: Name.RATE_CTA_DISPLAYED
@@ -1913,6 +1918,7 @@ export type AllTrackingEvents =
   | PurchaseContentStarted
   | PurchaseContentSuccess
   | PurchaseContentFailure
+  | PurchaseContentTwitterShare
   | RateCtaDisplayed
   | RateCtaResponseNo
   | RateCtaResponseYes

apps/audius-client/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx

@@ -166,7 +166,7 @@ export const PremiumTrackPurchaseDrawer = () => {
             isPurchaseSuccessful={isPurchaseSuccessful}
           />
           {isPurchaseSuccessful ? (
-            <PurchaseSuccess />
+            <PurchaseSuccess track={track} />
           ) : (
             <>
               <View>

apps/audius-client/packages/mobile/src/components/premium-track-purchase-drawer/PurchaseSuccess.tsx

@@ -1,15 +1,21 @@
+import { useCallback } from 'react'
+
+import type { UserTrackMetadata } from '@audius/common'
 import { View } from 'react-native'
 
 import IconVerified from 'app/assets/images/iconVerified.svg'
 import { Text } from 'app/components/core'
 import { flexRowCentered, makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
+import { EventNames } from 'app/types/analytics'
 import { useThemeColors } from 'app/utils/theme'
 
 import { TwitterButton } from '../twitter-button'
 
 const messages = {
-  success: 'Your purchase was successful!'
+  success: 'Your purchase was successful!',
+  shareTwitterText: (trackTitle: string, handle: string, trackUrl: string) =>
+    `I bought the track ${trackTitle} by ${handle} on Audius! #AudiusPremium ${trackUrl}`
 }
 
 const useStyles = makeStyles(({ spacing, typography, palette }) => ({
@@ -25,9 +31,25 @@ const useStyles = makeStyles(({ spacing, typography, palette }) => ({
   }
 }))
 
-export const PurchaseSuccess = () => {
+export const PurchaseSuccess = ({ track }: { track: UserTrackMetadata }) => {
   const styles = useStyles()
   const { specialGreen, staticWhite } = useThemeColors()
+  const { handle } = track.user
+  const { permalink, title } = track
+
+  const handleTwitterShare = useCallback(
+    (handle: string) => {
+      const shareText = messages.shareTwitterText(title, handle, permalink)
+      return {
+        shareText,
+        analytics: {
+          eventName: EventNames.PURCHASE_CONTENT_TWITTER_SHARE,
+          text: shareText
+        } as const
+      }
+    },
+    [permalink, title]
+  )
 
   return (
     <View style={styles.root}>
@@ -42,9 +64,10 @@ export const PurchaseSuccess = () => {
       </View>
       <TwitterButton
         fullWidth
+        type='dynamic'
+        shareData={handleTwitterShare}
+        handle={handle}
         size='large'
-        type='static'
-        shareText={messages.success}
       />
     </View>
   )

apps/audius-client/packages/web/src/components/premium-content-purchase-modal/components/PurchaseDetailsPage.tsx

@@ -10,7 +10,8 @@ import {
   purchaseContentSelectors,
   PurchaseContentStage,
   Track,
-  UserTrackMetadata
+  UserTrackMetadata,
+  Name
 } from '@audius/common'
 import {
   HarmonyButton,
@@ -23,6 +24,7 @@ import {
 } from '@audius/stems'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { make } from 'common/store/analytics/actions'
 import { Icon } from 'components/Icon'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { LockedTrackDetailsTile } from 'components/track/LockedTrackDetailsTile'
@@ -46,6 +48,8 @@ const messages = {
   error: 'Your purchase was unsuccessful.',
   // TODO: PAY-1723
   shareButtonContent: 'I just purchased a track on Audius!',
+  shareTwitterText: (trackTitle: string, handle: string, trackUrl: string) =>
+    `I bought the track ${trackTitle} by ${handle} on Audius! #AudiusPremium ${trackUrl}`,
   viewTrack: 'View Track'
 }
 
@@ -86,6 +90,8 @@ export const PurchaseDetailsPage = ({
   const error = useSelector(getPurchaseContentError)
   const isUnlocking = !error && isContentPurchaseInProgress(stage)
   const isPurchased = stage === PurchaseContentStage.FINISH
+  const { handle } = track.user
+  const { permalink, title } = track
 
   const onClickBuy = useCallback(() => {
     if (isUnlocking) return
@@ -100,6 +106,17 @@ export const PurchaseDetailsPage = ({
 
   useNavigateOnSuccess(track, stage)
 
+  const handleTwitterShare = useCallback(
+    (handle: string) => {
+      const shareText = messages.shareTwitterText(title, handle, permalink)
+      const analytics = make(Name.PURCHASE_CONTENT_TWITTER_SHARE, {
+        text: shareText
+      })
+      return { shareText, analytics }
+    },
+    [permalink, title]
+  )
+
   if (!isPremiumContentUSDCPurchaseGated(track.premium_conditions)) {
     console.error(
       `Loaded Purchase modal with a non-USDC-gated track: ${track.track_id}`
@@ -150,8 +167,9 @@ export const PurchaseDetailsPage = ({
           </div>
           <TwitterShareButton
             fullWidth
-            type='static'
-            shareText={messages.shareButtonContent}
+            type='dynamic'
+            shareData={handleTwitterShare}
+            handle={handle}
           />
           <HarmonyPlainButton
             onClick={onViewTrackClicked}