diff --git a/packages/mobile/src/app/Drawers.tsx b/packages/mobile/src/app/Drawers.tsx
index d9b9ac3cdea..18aecab3b78 100644
--- 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.
*/}
-
{
- 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
index 88a9daf3281..b28584f11e2 100644
--- 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 (
diff --git a/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx b/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx
index 69c8d28069f..b02889bb79c 100644
--- 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
index b3853afbfd6..6db8d782cc2 100644
--- 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 `` 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 ? (
) : isPurchaseSuccessful ? (
-
+
) : isUnlocking ? null : (
@@ -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 (
- {
validationSchema={toFormikValidationSchema(validationSchema)}
onSubmit={onSubmit}
>
-
+
)}
-
+
)
}
diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PurchaseSuccess.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PurchaseSuccess.tsx
index 4b805e74ad4..945b9181dee 100644
--- 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'
/>