From b38b008b835d4052c966c493f1351defd3b23c92 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Thu, 16 Oct 2025 19:37:47 +0700
Subject: [PATCH] fix: infinite loading delete modal in offline mode for
 downgradeable workspaces

---
 src/hooks/usePayAndDowngrade.ts               |  6 ++--
 src/pages/workspace/WorkspaceOverviewPage.tsx | 19 +++++++------
 src/pages/workspace/WorkspacesListPage.tsx    | 28 +++++++++++--------
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/hooks/usePayAndDowngrade.ts b/src/hooks/usePayAndDowngrade.ts
index b8ecb5f13a58..dd23398ab5ab 100644
--- a/src/hooks/usePayAndDowngrade.ts
+++ b/src/hooks/usePayAndDowngrade.ts
@@ -5,7 +5,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import useOnyx from './useOnyx';
 
-function usePayAndDowngrade(setIsDeleteModalOpen: (value: boolean) => void) {
+function usePayAndDowngrade(continueAction: () => void) {
     const [isLoadingBill] = useOnyx(ONYXKEYS.IS_LOADING_BILL_WHEN_DOWNGRADE, {canBeMissing: true});
     const [shouldBillWhenDowngrading] = useOnyx(ONYXKEYS.SHOULD_BILL_WHEN_DOWNGRADING, {canBeMissing: true});
     const isDeletingPaidWorkspaceRef = useRef(false);
@@ -20,13 +20,13 @@ function usePayAndDowngrade(setIsDeleteModalOpen: (value: boolean) => void) {
         }
 
         if (!shouldBillWhenDowngrading) {
-            close(() => setIsDeleteModalOpen(true));
+            close(continueAction);
         } else {
             Navigation.navigate(ROUTES.WORKSPACE_PAY_AND_DOWNGRADE.getRoute(Navigation.getActiveRoute()));
         }
 
         isDeletingPaidWorkspaceRef.current = false;
-    }, [isLoadingBill, shouldBillWhenDowngrading, setIsDeleteModalOpen]);
+    }, [isLoadingBill, shouldBillWhenDowngrading, continueAction]);
 
     return {setIsDeletingPaidWorkspace, isLoadingBill};
 }
diff --git a/src/pages/workspace/WorkspaceOverviewPage.tsx b/src/pages/workspace/WorkspaceOverviewPage.tsx
index ff71b47af43f..44c613ba8ff5 100644
--- a/src/pages/workspace/WorkspaceOverviewPage.tsx
+++ b/src/pages/workspace/WorkspaceOverviewPage.tsx
@@ -204,8 +204,16 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
     );
 
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const continueDeleteWorkspace = useCallback(() => {
+        if (isOffline) {
+            setShouldShowOfflineModal(true);
+            return;
+        }
+        setIsDeleteModalOpen(true);
+    }, [isOffline]);
 
-    const {setIsDeletingPaidWorkspace, isLoadingBill}: {setIsDeletingPaidWorkspace: (value: boolean) => void; isLoadingBill: boolean | undefined} = usePayAndDowngrade(setIsDeleteModalOpen);
+    const {setIsDeletingPaidWorkspace, isLoadingBill}: {setIsDeletingPaidWorkspace: (value: boolean) => void; isLoadingBill: boolean | undefined} =
+        usePayAndDowngrade(continueDeleteWorkspace);
 
     const dropdownMenuRef = useRef<{setIsMenuVisible: (visible: boolean) => void} | null>(null);
 
@@ -248,13 +256,8 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
             return;
         }
 
-        if (isOffline) {
-            setShouldShowOfflineModal(true);
-            return;
-        }
-
-        setIsDeleteModalOpen(true);
-    }, [isOffline, setIsDeletingPaidWorkspace]);
+        continueDeleteWorkspace();
+    }, [continueDeleteWorkspace, setIsDeletingPaidWorkspace]);
 
     const handleBackButtonPress = () => {
         if (isComingFromGlobalReimbursementsFlow) {
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index 8f134a1b6daa..a2f45e492e21 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -134,13 +134,24 @@ function WorkspacesListPage() {
     usePreloadFullScreenNavigators();
 
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [isDeleteWorkspaceErrorModalOpen, setIsDeleteWorkspaceErrorModalOpen] = useState(false);
+    const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false);
     const [policyIDToDelete, setPolicyIDToDelete] = useState<string>();
     // The workspace was deleted in this page
     const [policyNameToDelete, setPolicyNameToDelete] = useState<string>();
+    const continueDeleteWorkspace = useCallback(() => {
+        if (isOffline) {
+            setPolicyIDToDelete(undefined);
+            setPolicyNameToDelete(undefined);
+            setShouldShowOfflineModal(true);
+            return;
+        }
+
+        setIsDeleteModalOpen(true);
+    }, [isOffline]);
     const {reportsToArchive, transactionViolations} = useTransactionViolationOfWorkspace(policyIDToDelete);
-    const {setIsDeletingPaidWorkspace, isLoadingBill}: {setIsDeletingPaidWorkspace: (value: boolean) => void; isLoadingBill: boolean | undefined} = usePayAndDowngrade(setIsDeleteModalOpen);
-    const [isDeleteWorkspaceErrorModalOpen, setIsDeleteWorkspaceErrorModalOpen] = useState(false);
-    const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false);
+    const {setIsDeletingPaidWorkspace, isLoadingBill}: {setIsDeletingPaidWorkspace: (value: boolean) => void; isLoadingBill: boolean | undefined} =
+        usePayAndDowngrade(continueDeleteWorkspace);
 
     const [loadingSpinnerIconIndex, setLoadingSpinnerIconIndex] = useState<number | null>(null);
 
@@ -301,14 +312,7 @@ function WorkspacesListPage() {
                             return;
                         }
 
-                        if (isOffline) {
-                            setPolicyIDToDelete(undefined);
-                            setPolicyNameToDelete(undefined);
-                            setShouldShowOfflineModal(true);
-                            return;
-                        }
-
-                        setIsDeleteModalOpen(true);
+                        continueDeleteWorkspace();
                     },
                     shouldKeepModalOpen: shouldCalculateBillNewDot,
                     shouldCallAfterModalHide: !shouldCalculateBillNewDot,
@@ -386,8 +390,8 @@ function WorkspacesListPage() {
             isLessThanMediumScreen,
             isLoadingBill,
             resetLoadingSpinnerIconIndex,
+            continueDeleteWorkspace,
             isRestrictedToPreferredPolicy,
-            isOffline,
         ],
     );