[PAY-2107] Switch purchase drawer to use common modal slice on mobile (…

…#6589)
AudiusProject · Nov 6, 2023 · 61f2bcd · 61f2bcd
1 parent 7fcf4d3
commit 61f2bcd
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 70 deletions.
diff --git a/packages/mobile/src/app/Drawers.tsx b/packages/mobile/src/app/Drawers.tsx
@@ -113,6 +113,7 @@ const commonDrawersMap: { [Modal in Modals]?: ComponentType } = {
   PublishPlaylistConfirmation: PublishPlaylistDrawer,
   // Disabled to allow the proper zIndex sibling order for multiple purchases on Android.
   // See: https://linear.app/audius/issue/PAY-2119/stripe-drawer-appearing-behind-purchase-drawer
+  // PremiumTrackPurchaseModal: PremiumTrackPurchaseDrawer,
   // StripeOnRamp: StripeOnrampDrawer,
   InboxUnavailableModal: InboxUnavailableDrawer,
   LeavingAudiusModal: LeavingAudiusDrawer
@@ -139,7 +140,6 @@ const nativeDrawersMap: { [DrawerName in Drawer]?: ComponentType } = {
   SupportersInfo: SupportersInfoDrawer
   // Disabled to allow the proper zIndex sibling order for multiple purchases on Android.
   // See: https://linear.app/audius/issue/PAY-2119/stripe-drawer-appearing-behind-purchase-drawer
-  // PremiumTrackPurchase: PremiumTrackPurchaseDrawer,
   // USDCManualTransfer: USDCManualTransferDrawer
 }
 
@@ -177,9 +177,9 @@ export const Drawers = () => {
        * we made the tradeoff of not unmounting these drawers to reduce the
        * risk of introducing other zIndex bugs in fixing this one.
        */}
-      <NativeDrawer
-        drawer={PremiumTrackPurchaseDrawer}
-        drawerName={'PremiumTrackPurchase'}
+      <CommonDrawer
+        modal={PremiumTrackPurchaseDrawer}
+        modalName={'PremiumContentPurchaseModal'}
       />
       <NativeDrawer
         drawer={USDCManualTransferDrawer}

diff --git a/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx b/packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx
@@ -13,6 +13,7 @@ import {
   premiumContentSelectors,
   tippingActions,
   usePremiumConditionsEntity,
+  usePremiumContentPurchaseModal,
   usersSocialActions
 } from '@audius/common'
 import type { ViewStyle } from 'react-native'
@@ -29,7 +30,6 @@ import LoadingSpinner from 'app/components/loading-spinner'
 import UserBadges from 'app/components/user-badges'
 import { useDrawer } from 'app/hooks/useDrawer'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { setVisibility } from 'app/store/drawers/slice'
 import { flexRowCentered, makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 
@@ -188,6 +188,8 @@ export const DetailsTileNoAccess = ({
   const dispatch = useDispatch()
   const navigation = useNavigation()
   const { isOpen: isModalOpen } = useDrawer('LockedContent')
+  const { onOpen: openPremiumContentPurchaseModal } =
+    usePremiumContentPurchaseModal()
   const source = isModalOpen ? 'howToUnlockModal' : 'howToUnlockTrackPage'
   const followSource = isModalOpen
     ? FollowSource.HOW_TO_UNLOCK_MODAL
@@ -211,14 +213,8 @@ export const DetailsTileNoAccess = ({
   }, [tippedUser, navigation, dispatch, source, trackId])
 
   const handlePurchasePress = useCallback(() => {
-    dispatch(
-      setVisibility({
-        drawer: 'PremiumTrackPurchase',
-        visible: true,
-        data: { trackId }
-      })
-    )
-  }, [dispatch, trackId])
+    openPremiumContentPurchaseModal({ contentId: trackId })
+  }, [trackId, openPremiumContentPurchaseModal])
 
   const handlePressArtistName = useCallback(
     (handle: string) => () => {

diff --git a/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx b/packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx
@@ -5,7 +5,8 @@ import {
   formatPrice,
   isPremiumContentUSDCPurchaseGated,
   premiumContentActions,
-  premiumContentSelectors
+  premiumContentSelectors,
+  usePremiumContentPurchaseModal
 } from '@audius/common'
 import { TouchableOpacity, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
@@ -61,6 +62,8 @@ export const LineupTileAccessStatus = ({
   const styles = useStyles()
   const dispatch = useDispatch()
   const isUSDCEnabled = useIsUSDCEnabled()
+  const { onOpen: openPremiumContentPurchaseModal } =
+    usePremiumContentPurchaseModal()
   const premiumTrackStatusMap = useSelector(getPremiumTrackStatusMap)
   const premiumTrackStatus = premiumTrackStatusMap[trackId]
   const staticWhite = useColor('staticWhite')
@@ -69,18 +72,12 @@ export const LineupTileAccessStatus = ({
 
   const handlePress = useCallback(() => {
     if (isUSDCPurchase) {
-      dispatch(
-        setVisibility({
-          drawer: 'PremiumTrackPurchase',
-          visible: true,
-          data: { trackId }
-        })
-      )
+      openPremiumContentPurchaseModal({ contentId: trackId })
     } else if (trackId) {
       dispatch(setLockedContentId({ id: trackId }))
       dispatch(setVisibility({ drawer: 'LockedContent', visible: true }))
     }
-  }, [isUSDCPurchase, dispatch, trackId])
+  }, [trackId, isUSDCPurchase, openPremiumContentPurchaseModal, dispatch])
 
   return (
     <TouchableOpacity onPress={handlePress}>

diff --git a/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx b/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx
@@ -19,7 +19,8 @@ import {
   mobileOverflowMenuUIActions,
   shareModalUIActions,
   usePremiumContentAccess,
-  formatPrice
+  formatPrice,
+  usePremiumContentPurchaseModal
 } from '@audius/common'
 import { View, Platform } from 'react-native'
 import { CastButton } from 'react-native-google-cast'
@@ -34,7 +35,6 @@ import { Button, IconButton } from 'app/components/core'
 import { useIsOfflineModeEnabled } from 'app/hooks/useIsOfflineModeEnabled'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useToast } from 'app/hooks/useToast'
-import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
@@ -109,18 +109,14 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
     FeatureFlags.PODCAST_CONTROL_UPDATES_ENABLED,
     FeatureFlags.PODCAST_CONTROL_UPDATES_ENABLED_FALLBACK
   )
+  const { onOpen: openPremiumContentPurchaseModal } =
+    usePremiumContentPurchaseModal()
 
   const handlePurchasePress = useCallback(() => {
     if (track?.track_id) {
-      dispatch(
-        setVisibility({
-          drawer: 'PremiumTrackPurchase',
-          visible: true,
-          data: { trackId: track.track_id }
-        })
-      )
+      openPremiumContentPurchaseModal({ contentId: track.track_id })
     }
-  }, [dispatch, track?.track_id])
+  }, [track?.track_id, openPremiumContentPurchaseModal])
   const { doesUserHaveAccess } = usePremiumContentAccess(track)
   const shouldShowPurchasePill =
     track?.premium_conditions &&

diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx
@@ -11,12 +11,12 @@ import {
   formatPrice,
   isContentPurchaseInProgress,
   isTrackPurchasable,
-  modalsActions,
   purchaseContentActions,
   purchaseContentSelectors,
   statusIsNotFinalized,
   useGetTrackById,
   usePayExtraPresets,
+  usePremiumContentPurchaseModal,
   usePurchaseContentErrorMessage,
   usePurchaseContentFormConfiguration
 } from '@audius/common'
@@ -35,8 +35,7 @@ import IconCart from 'app/assets/images/iconCart.svg'
 import IconCloseAlt from 'app/assets/images/iconCloseAlt.svg'
 import IconError from 'app/assets/images/iconError.svg'
 import { Button, LockedStatusBadge, Text } from 'app/components/core'
-import { NativeDrawer } from 'app/components/drawer'
-import { useDrawer } from 'app/hooks/useDrawer'
+import Drawer from 'app/components/drawer'
 import { useIsUSDCEnabled } from 'app/hooks/useIsUSDCEnabled'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag, useRemoteVar } from 'app/hooks/useRemoteConfig'
@@ -59,8 +58,6 @@ import { usePurchaseContentFormState } from './hooks/usePurchaseContentFormState
 const { getPurchaseContentFlowStage, getPurchaseContentError } =
   purchaseContentSelectors
 
-const PREMIUM_TRACK_PURCHASE_MODAL_NAME = 'PremiumTrackPurchase'
-
 const messages = {
   buy: 'Buy',
   title: 'Complete Purchase',
@@ -215,7 +212,13 @@ const getButtonText = (isUnlocking: boolean, amountDue: number) =>
 // The bulk of the form rendering is in a nested component because we want access
 // to the FormikContext, which can only be used in a component which is a descendant
 // of the `<Formik />` component
-const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
+const RenderForm = ({
+  onClose,
+  track
+}: {
+  onClose: () => void
+  track: PurchasableTrackMetadata
+}) => {
   const dispatch = useDispatch()
   const navigation = useNavigation()
   const styles = useStyles()
@@ -294,7 +297,7 @@ const RenderForm = ({ track }: { track: PurchasableTrackMetadata }) => {
           {isIOSDisabled ? (
             <PurchaseUnavailable />
           ) : isPurchaseSuccessful ? (
-            <PurchaseSuccess track={track} />
+            <PurchaseSuccess onPressViewTrack={onClose} track={track} />
           ) : isUnlocking ? null : (
             <View>
               <View style={styles.payToUnlockTitleContainer}>
@@ -339,8 +342,13 @@ export const PremiumTrackPurchaseDrawer = () => {
   const dispatch = useDispatch()
   const isUSDCEnabled = useIsUSDCEnabled()
   const presetValues = usePayExtraPresets(useRemoteVar)
-  const { data, isOpen } = useDrawer('PremiumTrackPurchase')
-  const trackId = data?.trackId
+  const {
+    data: { contentId: trackId },
+    isOpen,
+    onClose,
+    onClosed
+  } = usePremiumContentPurchaseModal()
+
   const { data: track, status: trackStatus } = useGetTrackById(
     { id: trackId },
     { disabled: !trackId }
@@ -355,33 +363,18 @@ export const PremiumTrackPurchaseDrawer = () => {
     usePurchaseContentFormConfiguration({ track, presetValues })
 
   const handleClosed = useCallback(() => {
+    onClosed()
     dispatch(purchaseContentActions.cleanup())
-    dispatch(
-      modalsActions.trackModalClosed({ name: 'PremiumContentPurchaseModal' })
-    )
-  }, [dispatch])
-
-  // TODO: Remove manual event tracking in this drawer once
-  // it's using common modal state
-  // https://linear.app/audius/issue/PAY-2107/switch-mobile-drawers-over-to-common-modal-infrastructure
-  useEffect(() => {
-    if (trackId && isOpen) {
-      dispatch(
-        modalsActions.trackModalOpened({
-          name: 'PremiumContentPurchaseModal',
-          trackingData: { contentId: trackId }
-        })
-      )
-    }
-  }, [trackId, isOpen, dispatch])
+  }, [onClosed, dispatch])
 
   if (!track || !isTrackPurchasable(track) || !isUSDCEnabled) return null
 
   return (
-    <NativeDrawer
+    <Drawer
       blockClose={isUnlocking}
+      isOpen={isOpen}
+      onClose={onClose}
       drawerHeader={PremiumTrackPurchaseDrawerHeader}
-      drawerName={PREMIUM_TRACK_PURCHASE_MODAL_NAME}
       onClosed={handleClosed}
       isGestureSupported={false}
       isFullscreen
@@ -397,10 +390,10 @@ export const PremiumTrackPurchaseDrawer = () => {
             validationSchema={toFormikValidationSchema(validationSchema)}
             onSubmit={onSubmit}
           >
-            <RenderForm track={track} />
+            <RenderForm onClose={onClose} track={track} />
           </Formik>
         </View>
       )}
-    </NativeDrawer>
+    </Drawer>
   )
 }
diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PurchaseSuccess.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PurchaseSuccess.tsx
@@ -6,7 +6,6 @@ import { View } from 'react-native'
 import IconCaretRight from 'app/assets/images/iconCaretRight.svg'
 import IconVerified from 'app/assets/images/iconVerified.svg'
 import { Button, Text } from 'app/components/core'
-import { useDrawer } from 'app/hooks/useDrawer'
 import { flexRowCentered, makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { EventNames } from 'app/types/analytics'
@@ -41,10 +40,15 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   }
 }))
 
-export const PurchaseSuccess = ({ track }: { track: UserTrackMetadata }) => {
+export const PurchaseSuccess = ({
+  onPressViewTrack,
+  track
+}: {
+  onPressViewTrack: () => void
+  track: UserTrackMetadata
+}) => {
   const styles = useStyles()
   const { specialGreen, staticWhite, neutralLight4 } = useThemeColors()
-  const { onClose } = useDrawer('PremiumTrackPurchase')
   const { handle } = track.user
   const { title } = track
   const link = getTrackRoute(track, true)
@@ -83,7 +87,7 @@ export const PurchaseSuccess = ({ track }: { track: UserTrackMetadata }) => {
         size='large'
       />
       <Button
-        onPress={onClose}
+        onPress={onPressViewTrack}
         title={messages.viewTrack}
         variant='commonAlt'
         styles={{

diff --git a/packages/mobile/src/store/drawers/slice.ts b/packages/mobile/src/store/drawers/slice.ts
@@ -28,7 +28,6 @@ export type Drawer =
   | 'BlockMessages'
   | 'DeleteChat'
   | 'SupportersInfo'
-  | 'PremiumTrackPurchase'
   | 'StripeOnramp'
   | 'OfflineListening'
   | 'USDCManualTransfer'
@@ -71,7 +70,6 @@ export type DrawerData = {
   DeleteChat: { chatId: string }
   SupportersInfo: undefined
   InboxUnavailable: { userId: number; shouldOpenChat: boolean }
-  PremiumTrackPurchase: { trackId: ID }
   StripeOnramp: { clientSecret: string }
   USDCManualTransfer: undefined
 }
@@ -105,7 +103,6 @@ const initialState: DrawersState = {
   BlockMessages: false,
   DeleteChat: false,
   SupportersInfo: false,
-  PremiumTrackPurchase: false,
   StripeOnramp: false,
   USDCManualTransfer: false,
   data: {}