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' />