[PAY-1628] Navigate to track after purchase (#3904)

packages/common/src/store/purchase-content/sagas.ts

@@ -23,7 +23,6 @@ import { getUSDCUserBank } from 'store/buy-usdc/utils'
 import { getTrack } from 'store/cache/tracks/selectors'
 import { getUser } from 'store/cache/users/selectors'
 import { getContext } from 'store/effects'
-import { setVisibility } from 'store/ui/modals/slice'
 import { BN_USDC_CENT_WEI, ceilingBNUSDCToNearestCent } from 'utils/wallet'
 
 import { pollPremiumTrack } from '../premium-content/sagas'
@@ -221,13 +220,6 @@ function* doStartPurchaseContentFlow({
     // finish
     yield* put(purchaseConfirmed())
 
-    yield* put(
-      setVisibility({
-        modal: 'PremiumContentPurchase',
-        visible: false
-      })
-    )
-
     yield* call(
       track,
       make({ eventName: Name.PURCHASE_CONTENT_SUCCESS, contentId, contentType })

packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx

@@ -4,19 +4,17 @@ import {
   combineStatuses,
   premiumContentSelectors,
   purchaseContentActions,
-  statusIsNotFinalized,
   useGetTrackById,
   useUSDCBalance
 } from '@audius/common'
-import { IconCart, Modal, ModalContentPages, ModalHeader } from '@audius/stems'
+import { IconCart, Modal, ModalContent, ModalHeader } from '@audius/stems'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { useModalState } from 'common/hooks/useModalState'
 import { Icon } from 'components/Icon'
 import { Text } from 'components/typography'
 
 import styles from './PremiumContentPurchaseModal.module.css'
-import { LoadingPage } from './components/LoadingPage'
 import { PurchaseDetailsPage } from './components/PurchaseDetailsPage'
 
 const { getPurchaseContentId } = premiumContentSelectors
@@ -25,11 +23,6 @@ const messages = {
   completePurchase: 'Complete Purchase'
 }
 
-enum PurchaseSteps {
-  LOADING = 0,
-  DETAILS = 1
-}
-
 const usePremiumContentPurchaseModalState = () => {
   const trackId = useSelector(getPurchaseContentId)
   const dispatch = useDispatch()
@@ -47,15 +40,11 @@ const usePremiumContentPurchaseModalState = () => {
     dispatch(purchaseContentActions.cleanup())
   }, [setIsOpen, dispatch])
 
-  const currentStep = statusIsNotFinalized(status)
-    ? PurchaseSteps.LOADING
-    : PurchaseSteps.DETAILS
-
-  return { isOpen, handleClose, currentStep, track, balance, status }
+  return { isOpen, handleClose, track, balance, status }
 }
 
 export const PremiumContentPurchaseModal = () => {
-  const { balance, isOpen, handleClose, currentStep, track } =
+  const { balance, isOpen, handleClose, track } =
     usePremiumContentPurchaseModalState()
 
   return (
@@ -77,16 +66,15 @@ export const PremiumContentPurchaseModal = () => {
           {messages.completePurchase}
         </Text>
       </ModalHeader>
-      {track ? (
-        <ModalContentPages currentPage={currentStep}>
-          <LoadingPage />
+      <ModalContent>
+        {track ? (
           <PurchaseDetailsPage
             track={track}
             currentBalance={balance}
             onViewTrackClicked={handleClose}
           />
-        </ModalContentPages>
-      ) : null}
+        ) : null}
+      </ModalContent>
     </Modal>
   )
 }

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

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import {
   BNUSDC,
@@ -28,6 +28,7 @@ import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { LockedTrackDetailsTile } from 'components/track/LockedTrackDetailsTile'
 import { TwitterShareButton } from 'components/twitter-share-button/TwitterShareButton'
 import { Text } from 'components/typography'
+import { pushUniqueRoute } from 'utils/route'
 
 import { FormatPrice } from './FormatPrice'
 import { PayToUnlockInfo } from './PayToUnlockInfo'
@@ -48,6 +49,18 @@ const messages = {
   viewTrack: 'View Track'
 }
 
+const useNavigateOnSuccess = (
+  track: UserTrackMetadata,
+  stage: PurchaseContentStage
+) => {
+  const dispatch = useDispatch()
+  useEffect(() => {
+    if (stage === PurchaseContentStage.FINISH) {
+      dispatch(pushUniqueRoute(track.permalink))
+    }
+  }, [stage, track, dispatch])
+}
+
 const ContentPurchaseError = () => {
   return (
     <Text className={styles.errorContainer} color='accentRed'>
@@ -85,6 +98,8 @@ export const PurchaseDetailsPage = ({
     )
   }, [isUnlocking, dispatch, track.track_id])
 
+  useNavigateOnSuccess(track, stage)
+
   if (!isPremiumContentUSDCPurchaseGated(track.premium_conditions)) {
     console.error(
       `Loaded Purchase modal with a non-USDC-gated track: ${track.track_id}`

packages/web/src/components/track/PremiumTrackSection.tsx

@@ -133,8 +133,17 @@ const LockedPremiumTrackSection = ({
 
   const handlePurchase = useCallback(() => {
     dispatch(setPurchaseContentId({ id: trackId }))
+    if (lockedContentModalVisibility) {
+      setLockedContentModalVisibility(false)
+    }
     setPurchaseModalVisibility(true)
-  }, [trackId, setPurchaseModalVisibility, dispatch])
+  }, [
+    trackId,
+    lockedContentModalVisibility,
+    setPurchaseModalVisibility,
+    setLockedContentModalVisibility,
+    dispatch
+  ])
 
   const handleSendTip = useCallback(() => {
     if (account) {