PAY-716 Take user to trending at end of BuyAudio flow (#2210)

packages/common/src/store/ui/buy-audio/selectors.ts

@@ -17,8 +17,7 @@ export const getAudioPurchaseInfoStatus = (state: CommonState) =>
 
 export const getFeesCache = (state: CommonState) => state.ui.buyAudio.feesCache
 
-export const getOnSuccessAction = (state: CommonState) =>
-  state.ui.buyAudio.onSuccessAction
+export const getOnSuccess = (state: CommonState) => state.ui.buyAudio.onSuccess
 
 export const getStripeSessionStatus = (state: CommonState) =>
   state.ui.buyAudio.stripeSessionStatus

packages/common/src/store/ui/buy-audio/slice.ts

@@ -42,6 +42,11 @@ type StripeSessionStatus =
   | 'fulfillment_processing'
   | 'fulfillment_complete'
 
+type OnSuccess = {
+  action?: Action
+  message?: string
+}
+
 type BuyAudioState = {
   stage: BuyAudioStage
   error?: boolean
@@ -52,7 +57,7 @@ type BuyAudioState = {
     transactionFees: number
   }
   provider: OnRampProvider
-  onSuccessAction?: Action
+  onSuccess?: OnSuccess
   stripeSessionStatus?: StripeSessionStatus
 }
 
@@ -116,13 +121,13 @@ const slice = createSlice({
       state,
       action: PayloadAction<{
         provider: OnRampProvider
-        onSuccessAction?: Action
+        onSuccess?: OnSuccess
       }>
     ) => {
       state.stage = BuyAudioStage.START
       state.error = undefined
       state.provider = action.payload.provider
-      state.onSuccessAction = action.payload.onSuccessAction
+      state.onSuccess = action.payload.onSuccess
     },
     onRampOpened: (state, _action: PayloadAction<PurchaseInfo>) => {
       state.stage = BuyAudioStage.PURCHASING

packages/web/src/components/buy-audio-modal/components/SuccessPage.tsx

@@ -27,24 +27,24 @@ const messages = {
 const { getTransactionDetails } = transactionDetailsSelectors
 const { setModalClosedAction: setOnTransactionDetailsModalClosedAction } =
   transactionDetailsActions
-const { getOnSuccessAction } = buyAudioSelectors
+const { getOnSuccess } = buyAudioSelectors
 const { setVisibility } = modalsActions
 
 export const SuccessPage = () => {
   const dispatch = useDispatch()
   const transactionDetails = useSelector(getTransactionDetails)
-  const onSuccessAction = useSelector(getOnSuccessAction)
+  const onSuccess = useSelector(getOnSuccess)
   const [, setModalVisibility] = useModalState('BuyAudio')
   const [, setTransactionDetailsModalVisibility] =
     useModalState('TransactionDetails')
 
   const handleDoneClicked = useCallback(() => {
-    if (onSuccessAction) {
-      dispatch(onSuccessAction)
+    if (onSuccess?.action) {
+      dispatch(onSuccess.action)
       dispatch(setOnTransactionDetailsModalClosedAction())
     }
     setModalVisibility(false)
-  }, [dispatch, setModalVisibility, onSuccessAction])
+  }, [dispatch, setModalVisibility, onSuccess])
 
   const handleReviewTransactionClicked = useCallback(() => {
     dispatch(
@@ -84,7 +84,7 @@ export const SuccessPage = () => {
         </div>
       </div>
       <Button
-        text={messages.done}
+        text={onSuccess?.message ?? messages.done}
         type={ButtonType.PRIMARY_ALT}
         onClick={handleDoneClicked}
       />

packages/web/src/components/tipping/tip-audio/SendTip.tsx

@@ -145,7 +145,9 @@ export const SendTip = () => {
     dispatch(
       startBuyAudioFlow({
         provider: OnRampProvider.STRIPE,
-        onSuccessAction: beginTip({ user: receiver, source: 'buyAudio' })
+        onSuccess: {
+          action: beginTip({ user: receiver, source: 'buyAudio' })
+        }
       })
     )
     dispatch(resetSend())

packages/web/src/components/tipping/tip-audio/TipAudio.module.css

@@ -76,7 +76,7 @@
   padding: 0 8px;
   font-size: var(--font-m);
   font-weight: var(--font-demi-bold);
-  color: var(--white);
+  color: var(--static-white);
   background: linear-gradient(
     315deg,
     var(--page-header-gradient-color-1) 0%,

packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx

@@ -31,6 +31,7 @@ import Tooltip from 'components/tooltip/Tooltip'
 import { useFlag, useRemoteVar } from 'hooks/useRemoteConfig'
 import { getLocation, Location } from 'services/Location'
 import { isMobile } from 'utils/clientUtil'
+import { pushUniqueRoute, TRENDING_PAGE } from 'utils/route'
 
 import TokenHoverTooltip from './TokenHoverTooltip'
 import styles from './WalletManagementTile.module.css'
@@ -62,7 +63,8 @@ const messages = {
     `Link by Stripe is not supported in the state of ${state}`,
   coinbaseStateNotSupported: (state: string) =>
     `Coinbase Pay is not supported in the state of ${state}`,
-  goldAudioToken: 'Gold $AUDIO token'
+  goldAudioToken: 'Gold $AUDIO token',
+  findArtists: 'Find Artists to Support on Trending'
 }
 
 const AdvancedWalletActions = () => {
@@ -223,11 +225,27 @@ export const WalletManagementTile = () => {
   }, [setOpen])
 
   const onBuyWithCoinbaseClicked = useCallback(() => {
-    dispatch(startBuyAudioFlow({ provider: OnRampProvider.COINBASE }))
+    dispatch(
+      startBuyAudioFlow({
+        provider: OnRampProvider.COINBASE,
+        onSuccess: {
+          action: pushUniqueRoute(TRENDING_PAGE),
+          message: messages.findArtists
+        }
+      })
+    )
   }, [dispatch])
 
   const onBuyWithStripeClicked = useCallback(() => {
-    dispatch(startBuyAudioFlow({ provider: OnRampProvider.STRIPE }))
+    dispatch(
+      startBuyAudioFlow({
+        provider: OnRampProvider.STRIPE,
+        onSuccess: {
+          action: pushUniqueRoute(TRENDING_PAGE),
+          message: messages.findArtists
+        }
+      })
+    )
   }, [dispatch])
 
   return (