[PAY-2209] Use single modal for purchase and transfer

packages/common/src/hooks/purchaseContent/constants.ts

@@ -1,6 +1,7 @@
 export const CUSTOM_AMOUNT = 'customAmount'
 export const AMOUNT_PRESET = 'amountPreset'
 export const PURCHASE_METHOD = 'purchaseMethod'
+export const PAGE = 'page'
 
 // Pay between $1 and $100 extra
 export const minimumPayExtraAmountCents = 100

packages/common/src/hooks/purchaseContent/types.ts

@@ -25,3 +25,5 @@ export type USDCPurchaseConfig = {
   minUSDCPurchaseAmountCents: number
   maxUSDCPurchaseAmountCents: number
 }
+
+export type PurchasePage = 'purchase' | 'crypto-transfer'

packages/common/src/hooks/purchaseContent/usePurchaseContentFormConfiguration.ts

@@ -8,11 +8,11 @@ import { PurchaseMethod } from 'models/PurchaseContent'
 import { UserTrackMetadata } from 'models/Track'
 import {
   ContentType,
+  PurchaseContentPage,
   isContentPurchaseInProgress,
   purchaseContentActions,
   purchaseContentSelectors
 } from 'store/purchase-content'
-import { useUSDCManualTransferModal } from 'store/ui'
 import { Nullable } from 'utils/typeUtils'
 
 import { useUSDCBalance } from '../useUSDCBalance'
@@ -27,9 +27,12 @@ import { PayExtraAmountPresetValues, PayExtraPreset } from './types'
 import { getExtraAmount } from './utils'
 import { PurchaseContentSchema, PurchaseContentValues } from './validation'
 
-const { startPurchaseContentFlow } = purchaseContentActions
-const { getPurchaseContentFlowStage, getPurchaseContentError } =
-  purchaseContentSelectors
+const { startPurchaseContentFlow, setPurchasePage } = purchaseContentActions
+const {
+  getPurchaseContentFlowStage,
+  getPurchaseContentError,
+  getPurchaseContentPage
+} = purchaseContentSelectors
 
 export const usePurchaseContentFormConfiguration = ({
   track,
@@ -41,9 +44,9 @@ export const usePurchaseContentFormConfiguration = ({
   presetValues: PayExtraAmountPresetValues
 }) => {
   const dispatch = useDispatch()
-  const { onOpen: openUsdcManualTransferModal } = useUSDCManualTransferModal()
   const stage = useSelector(getPurchaseContentFlowStage)
   const error = useSelector(getPurchaseContentError)
+  const page = useSelector(getPurchaseContentPage)
   const isUnlocking = !error && isContentPurchaseInProgress(stage)
   const { data: balanceBN } = useUSDCBalance()
   const balance = USDC(balanceBN ?? new BN(0)).value
@@ -60,36 +63,29 @@ export const usePurchaseContentFormConfiguration = ({
     ({ customAmount, amountPreset, purchaseMethod }: PurchaseContentValues) => {
       if (isUnlocking || !track?.track_id) return
 
-      const extraAmount = getExtraAmount({
-        amountPreset,
-        presetValues,
-        customAmount
-      })
-      const startPurchaseAction = startPurchaseContentFlow({
-        purchaseMethod,
-        extraAmount,
-        extraAmountPreset: amountPreset,
-        contentId: track.track_id,
-        contentType: ContentType.TRACK
-      })
-
-      if (purchaseMethod === PurchaseMethod.CRYPTO) {
-        openUsdcManualTransferModal({
-          amount: price + extraAmount,
-          onSuccessAction: startPurchaseAction
-        })
+      if (
+        purchaseMethod === PurchaseMethod.CRYPTO &&
+        page === PurchaseContentPage.PURCHASE
+      ) {
+        dispatch(setPurchasePage({ page: PurchaseContentPage.TRANSFER }))
       } else {
-        dispatch(startPurchaseAction)
+        const extraAmount = getExtraAmount({
+          amountPreset,
+          presetValues,
+          customAmount
+        })
+        dispatch(
+          startPurchaseContentFlow({
+            purchaseMethod,
+            extraAmount,
+            extraAmountPreset: amountPreset,
+            contentId: track.track_id,
+            contentType: ContentType.TRACK
+          })
+        )
       }
     },
-    [
-      isUnlocking,
-      track,
-      presetValues,
-      dispatch,
-      openUsdcManualTransferModal,
-      price
-    ]
+    [isUnlocking, track, page, presetValues, dispatch]
   )
 
   return {

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

@@ -6,6 +6,9 @@ export const getPurchaseContentId = (state: CommonState) =>
 export const getPurchaseContentType = (state: CommonState) =>
   state.purchaseContent.contentType
 
+export const getPurchaseContentPage = (state: CommonState) =>
+  state.purchaseContent.page
+
 export const getPurchaseContentFlowStage = (state: CommonState) =>
   state.purchaseContent.stage
 

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

@@ -6,6 +6,7 @@ import { PurchaseMethod } from 'models/PurchaseContent'
 import {
   ContentType,
   PurchaseContentError,
+  PurchaseContentPage,
   PurchaseContentStage
 } from './types'
 
@@ -15,6 +16,7 @@ type OnSuccess = {
 }
 
 type PurchaseContentState = {
+  page: PurchaseContentPage
   stage: PurchaseContentStage
   contentType: ContentType
   contentId: ID
@@ -28,6 +30,7 @@ type PurchaseContentState = {
 }
 
 const initialState: PurchaseContentState = {
+  page: PurchaseContentPage.PURCHASE,
   contentType: ContentType.TRACK,
   contentId: -1,
   extraAmount: undefined,
@@ -52,6 +55,7 @@ const slice = createSlice({
         onSuccess?: OnSuccess
       }>
     ) => {
+      state.page = PurchaseContentPage.PURCHASE
       state.stage = PurchaseContentStage.START
       state.error = undefined
       state.extraAmount = action.payload.extraAmount
@@ -81,6 +85,12 @@ const slice = createSlice({
     ) => {
       state.stage = PurchaseContentStage.FINISH
     },
+    setPurchasePage: (
+      state,
+      action: PayloadAction<{ page: PurchaseContentPage }>
+    ) => {
+      state.page = action.payload.page
+    },
     purchaseContentFlowFailed: (
       state,
       action: PayloadAction<{ error: PurchaseContentError }>

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

@@ -15,6 +15,11 @@ export enum PurchaseContentStage {
   FINISH = 'FINISH'
 }
 
+export enum PurchaseContentPage {
+  PURCHASE = 'purchase',
+  TRANSFER = 'crypto-transfer'
+}
+
 export enum PurchaseErrorCode {
   Canceled = 'Canceled',
   InsufficientBalance = 'InsufficientBalance',

packages/common/src/store/ui/modals/usdc-manual-transfer-modal/index.ts

@@ -1,11 +1,6 @@
-import { Action } from 'redux'
-
 import { createModal } from '../createModal'
 
-export type USDCManualTransferModalState = {
-  amount?: number
-  onSuccessAction?: Action
-}
+export type USDCManualTransferModalState = {}
 
 const USDCManualTransferModal = createModal<USDCManualTransferModalState>({
   reducerPath: 'USDCManualTransferModal',

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

@@ -5,6 +5,7 @@ import type {
   PurchaseContentError
 } from '@audius/common'
 import {
+  PurchaseContentPage,
   FeatureFlags,
   Name,
   PURCHASE_METHOD,
@@ -50,6 +51,7 @@ import { useThemeColors } from 'app/utils/theme'
 import LoadingSpinner from '../loading-spinner/LoadingSpinner'
 import { PaymentMethod } from '../payment-method/PaymentMethod'
 import { TrackDetailsTile } from '../track-details-tile'
+import { USDCManualTransfer } from '../usdc-manual-transfer'
 
 import { AudioMatchSection } from './AudioMatchSection'
 import { PayExtraFormSection } from './PayExtraFormSection'
@@ -61,6 +63,7 @@ import { usePurchaseSummaryValues } from './hooks/usePurchaseSummaryValues'
 
 const { getPurchaseContentFlowStage, getPurchaseContentError } =
   purchaseContentSelectors
+const { setPurchasePage } = purchaseContentActions
 
 const messages = {
   buy: 'Buy',
@@ -151,6 +154,9 @@ const useStyles = makeStyles(({ spacing, typography, palette }) => ({
   },
   bottomSection: {
     gap: spacing(6)
+  },
+  paddingTop: {
+    paddingTop: spacing(4)
   }
 }))
 
@@ -219,6 +225,7 @@ const RenderForm = ({
 }) => {
   const navigation = useNavigation()
   const styles = useStyles()
+  const dispatch = useDispatch()
   const { specialLightGreen, primary } = useThemeColors()
   const presetValues = usePayExtraPresets()
   const { isEnabled: isIOSUSDCPurchaseEnabled } = useFeatureFlag(
@@ -253,7 +260,7 @@ const RenderForm = ({
     setMethod: setPurchaseMethod
   })
 
-  const { stage, error, isUnlocking, purchaseSummaryValues } =
+  const { page, stage, error, isUnlocking, purchaseSummaryValues } =
     usePurchaseContentFormState({ price })
   const { amountDue } = purchaseSummaryValues
 
@@ -271,7 +278,11 @@ const RenderForm = ({
     trackEvent(make({ eventName: Name.PURCHASE_CONTENT_TOS_CLICKED }))
   }, [])
 
-  return (
+  const handleUSDCManualTransferClose = useCallback(() => {
+    dispatch(setPurchasePage({ page: PurchaseContentPage.PURCHASE }))
+  }, [dispatch])
+
+  return page === PurchaseContentPage.PURCHASE ? (
     <>
       <ScrollView contentContainerStyle={styles.formContentContainer}>
         {stage !== PurchaseContentStage.FINISH ? (
@@ -340,6 +351,14 @@ const RenderForm = ({
         </View>
       )}
     </>
+  ) : (
+    <View style={styles.paddingTop}>
+      <USDCManualTransfer
+        onClose={handleUSDCManualTransferClose}
+        amountInCents={totalPriceInCents}
+        onSuccess={submitForm}
+      />
+    </View>
   )
 }
 

packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts

@@ -9,10 +9,14 @@ import { useSelector } from 'react-redux'
 
 import { usePurchaseSummaryValues } from './usePurchaseSummaryValues'
 
-const { getPurchaseContentFlowStage, getPurchaseContentError } =
-  purchaseContentSelectors
+const {
+  getPurchaseContentFlowStage,
+  getPurchaseContentError,
+  getPurchaseContentPage
+} = purchaseContentSelectors
 
 export const usePurchaseContentFormState = ({ price }: { price: number }) => {
+  const page = useSelector(getPurchaseContentPage)
   const stage = useSelector(getPurchaseContentFlowStage)
   const error = useSelector(getPurchaseContentError)
   const isUnlocking = !error && isContentPurchaseInProgress(stage)
@@ -32,6 +36,7 @@ export const usePurchaseContentFormState = ({ price }: { price: number }) => {
   })
 
   return {
+    page,
     stage,
     error,
     isUnlocking,