From fe76a67ae0f76e7ccb0d6adaddf83e4f7f8da2b3 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Tue, 2 Jan 2024 17:57:41 -0800
Subject: [PATCH 1/2] Allow purchase modal to close if stage is start

---
 .../PremiumTrackPurchaseDrawer.tsx                            | 2 +-
 .../PremiumContentPurchaseModal.tsx                           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

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 acc7f388af7..332b04118d3 100644
--- a/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx
+++ b/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx
@@ -449,7 +449,7 @@ export const PremiumTrackPurchaseDrawer = () => {
 
   return (
     <Drawer
-      blockClose={isUnlocking}
+      blockClose={isUnlocking && stage !== PurchaseContentStage.START}
       isOpen={isOpen}
       onClose={onClose}
       drawerHeader={PremiumTrackPurchaseDrawerHeader}
diff --git a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
index 79291331875..e85ad9c11b7 100644
--- a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
+++ b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
@@ -202,10 +202,10 @@ export const PremiumContentPurchaseModal = () => {
 
   const handleClose = useCallback(() => {
     // Don't allow closing if we're in the middle of a purchase
-    if (!isUnlocking) {
+    if (!isUnlocking || stage === PurchaseContentStage.START) {
       onClose()
     }
-  }, [isUnlocking, onClose])
+  }, [isUnlocking, stage, onClose])
 
   const handleClosed = useCallback(() => {
     onClosed()

From 3383a7b3b6feac3e3b0ad027b62fa3a673230892 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Tue, 2 Jan 2024 18:04:13 -0800
Subject: [PATCH 2/2] [PAY-2289] Close add funds after purchase successful

---
 .../add-funds-modal/AddFundsModal.tsx          | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/add-funds-modal/AddFundsModal.tsx b/packages/web/src/components/add-funds-modal/AddFundsModal.tsx
index 19244ad7f8c..778fbc1f032 100644
--- a/packages/web/src/components/add-funds-modal/AddFundsModal.tsx
+++ b/packages/web/src/components/add-funds-modal/AddFundsModal.tsx
@@ -1,15 +1,17 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import {
   useAddFundsModal,
   buyUSDCActions,
   PurchaseMethod,
   DEFAULT_PURCHASE_AMOUNT_CENTS,
-  PurchaseVendor
+  PurchaseVendor,
+  buyUSDCSelectors,
+  BuyUSDCStage
 } from '@audius/common'
 import { ModalContent, ModalHeader } from '@audius/stems'
 import cn from 'classnames'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { AddFunds } from 'components/add-funds/AddFunds'
 import { Text } from 'components/typography'
@@ -20,6 +22,8 @@ import zIndex from 'utils/zIndex'
 
 import styles from './AddFundsModal.module.css'
 
+const { getBuyUSDCFlowStage } = buyUSDCSelectors
+
 const messages = {
   addFunds: 'Add Funds',
   cryptoTransfer: 'Crypto Transfer'
@@ -30,6 +34,7 @@ type Page = 'add-funds' | 'crypto-transfer'
 export const AddFundsModal = () => {
   const { isOpen, onClose } = useAddFundsModal()
   const dispatch = useDispatch()
+  const buyUSDCStage = useSelector(getBuyUSDCFlowStage)
   const mobile = isMobile()
 
   const [page, setPage] = useState<Page>('add-funds')
@@ -38,6 +43,13 @@ export const AddFundsModal = () => {
     setPage('add-funds')
   }, [setPage])
 
+  useEffect(() => {
+    // Close modal if the buy USDC stage flips to finish
+    if (buyUSDCStage === BuyUSDCStage.FINISH) {
+      onClose()
+    }
+  }, [buyUSDCStage, onClose])
+
   const handleContinue = useCallback(
     (purchaseMethod: PurchaseMethod, purchaseVendor?: PurchaseVendor) => {
       switch (purchaseMethod) {