Refactor ConfirmModal usage to useConfirmModal in workspace feature pages

src/pages/settings/Wallet/PersonalCards/AddNewCardPage.tsx

@@ -1,7 +1,8 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
-import ConfirmModal from '@components/ConfirmModal';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import {ModalActions} from '@components/Modal/Global/ModalContext';
+import useConfirmModal from '@hooks/useConfirmModal';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -25,7 +26,7 @@ function AddPersonalNewCardPage() {
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const {currentStep} = addNewPersonalCardFeed ?? {};
-    const [isModalVisible, setIsModalVisible] = useState(false);
+    const {showConfirmModal} = useConfirmModal();
     const {translate} = useLocalize();
     const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const isAddCardFeedLoading = isLoadingOnyxValue(addNewPersonalCardFeedMetadata);
@@ -61,31 +62,31 @@ function AddPersonalNewCardPage() {
             CurrentStep = <BankConnection />;
             break;
         case CONST.PERSONAL_CARDS.STEP.PLAID_CONNECTION:
-            CurrentStep = <PlaidConnectionStep onExit={() => setIsModalVisible(true)} />;
+            CurrentStep = (
+                <PlaidConnectionStep
+                    onExit={() => {
+                        showConfirmModal({
+                            title: translate('workspace.companyCards.addNewCard.exitModal.title'),
+                            success: true,
+                            confirmText: translate('workspace.companyCards.addNewCard.exitModal.confirmText'),
+                            cancelText: translate('workspace.companyCards.addNewCard.exitModal.cancelText'),
+                            prompt: translate('workspace.companyCards.addNewCard.exitModal.prompt'),
+                        }).then((result) => {
+                            if (result.action !== ModalActions.CONFIRM) {
+                                return;
+                            }
+                            navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, false, betas);
+                        });
+                    }}
+                />
+            );
             break;
         default:
             CurrentStep = <SelectCountryStep />;
             break;
     }
 
-    return (
-        <>
-            <View style={styles.flex1}>{CurrentStep}</View>
-            <ConfirmModal
-                isVisible={isModalVisible}
-                title={translate('workspace.companyCards.addNewCard.exitModal.title')}
-                success
-                confirmText={translate('workspace.companyCards.addNewCard.exitModal.confirmText')}
-                cancelText={translate('workspace.companyCards.addNewCard.exitModal.cancelText')}
-                prompt={translate('workspace.companyCards.addNewCard.exitModal.prompt')}
-                onCancel={() => setIsModalVisible(false)}
-                onConfirm={() => {
-                    setIsModalVisible(false);
-                    navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, false, betas);
-                }}
-            />
-        </>
-    );
+    return <View style={styles.flex1}>{CurrentStep}</View>;
 }
 
 export default AddPersonalNewCardPage;

src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx

@@ -1,20 +1,21 @@
 import {format, parseISO} from 'date-fns';
 import {Str} from 'expensify-common';
-import React, {useMemo, useRef, useState} from 'react';
+import React, {useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
-import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ImageSVG from '@components/ImageSVG';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import {ModalActions} from '@components/Modal/Global/ModalContext';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PlaidCardFeedIcon from '@components/PlaidCardFeedIcon';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useCardFeeds from '@hooks/useCardFeeds';
 import useCardsList from '@hooks/useCardsList';
 import {useCompanyCardFeedIcons} from '@hooks/useCompanyCardIcons';
+import useConfirmModal from '@hooks/useConfirmModal';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -57,7 +58,6 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
     const [shouldUseStagingServer = isUsingStagingApi()] = useOnyx(ONYXKEYS.SHOULD_USE_STAGING_SERVER);
     const policy = usePolicy(policyID);
     const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID;
-    const [isUnassignModalVisible, setIsUnassignModalVisible] = useState(false);
     const isUnassigningRef = useRef(false);
     const {translate, getLocalDateFromDatetime} = useLocalize();
     const styles = useThemeStyles();
@@ -69,6 +69,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
     const {isOffline} = useNetwork();
     const accountingIntegrations = Object.values(CONST.POLICY.CONNECTIONS.NAME);
     const connectedIntegration = getConnectedIntegration(policy, accountingIntegrations) ?? connectionSyncProgress?.connectionName;
+    const {showConfirmModal} = useConfirmModal();
 
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [allBankCards, allBankCardsMetadata] = useCardsList(feedName);
@@ -94,12 +95,11 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
     const plaidUrl = getPlaidInstitutionIconUrl(feedName);
 
     const unassignCard = () => {
-        setIsUnassignModalVisible(false);
         if (card) {
             isUnassigningRef.current = true;
             unassignWorkspaceCompanyCard(domainOrWorkspaceAccountID, bank, card);
         }
-        Navigation.goBack();
+        Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack());
     };
 
     const updateCard = () => {
@@ -293,20 +293,24 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                         icon={expensifyIcons.RemoveMembers}
                         title={translate('workspace.moreFeatures.companyCards.unassignCard')}
                         style={styles.mb1}
-                        onPress={() => setIsUnassignModalVisible(true)}
+                        onPress={() => {
+                            showConfirmModal({
+                                shouldSetModalVisibility: false,
+                                title: translate('workspace.moreFeatures.companyCards.unassignCard'),
+                                prompt: translate('workspace.moreFeatures.companyCards.unassignCardDescription'),
+                                confirmText: translate('workspace.moreFeatures.companyCards.unassign'),
+                                cancelText: translate('common.cancel'),
+                                danger: true,
+                            }).then((result) => {
+                                if (result.action !== ModalActions.CONFIRM) {
+                                    return;
+                                }
+
+                                unassignCard();
+                            });
+                        }}
                         sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.UNASSIGN_CARD}
                     />
-                    <ConfirmModal
-                        title={translate('workspace.moreFeatures.companyCards.unassignCard')}
-                        isVisible={isUnassignModalVisible}
-                        onConfirm={unassignCard}
-                        onCancel={() => setIsUnassignModalVisible(false)}
-                        shouldSetModalVisibility={false}
-                        prompt={translate('workspace.moreFeatures.companyCards.unassignCardDescription')}
-                        confirmText={translate('workspace.moreFeatures.companyCards.unassign')}
-                        cancelText={translate('common.cancel')}
-                        danger
-                    />
                 </ScrollView>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>

src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx

@@ -1,16 +1,17 @@
 import {isUserValidatedSelector} from '@selectors/Account';
-import React, {useMemo, useState} from 'react';
+import React, {useMemo} from 'react';
 import {InteractionManager, View} from 'react-native';
-import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import {ModalActions} from '@components/Modal/Global/ModalContext';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useCardFeeds from '@hooks/useCardFeeds';
 import useCardsList from '@hooks/useCardsList';
+import useConfirmModal from '@hooks/useConfirmModal';
 import {useCurrencyListState} from '@hooks/useCurrencyList';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -42,7 +43,6 @@ function WorkspaceCompanyCardsSettingsPage({
     const {translate} = useLocalize();
     const policy = usePolicy(policyID);
     const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID;
-    const [deleteCompanyCardConfirmModalVisible, setDeleteCompanyCardConfirmModalVisible] = useState(false);
 
     const [cardFeeds] = useCardFeeds(policyID);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
@@ -52,6 +52,7 @@ function WorkspaceCompanyCardsSettingsPage({
 
     const selectedFeed = useMemo(() => getSelectedFeed(lastSelectedFeed, cardFeeds), [cardFeeds, lastSelectedFeed]);
     const feed = selectedFeed ? getCompanyCardFeed(selectedFeed) : undefined;
+    const {showConfirmModal} = useConfirmModal();
 
     const [cardsList] = useCardsList(selectedFeed);
     const icons = useMemoizedLazyExpensifyIcons(['Sync', 'Trashcan']);
@@ -84,7 +85,6 @@ function WorkspaceCompanyCardsSettingsPage({
     };
 
     const deleteCompanyCardFeed = () => {
-        setDeleteCompanyCardConfirmModalVisible(false);
         Navigation.goBack();
         if (feed) {
             const {cardList, ...cards} = cardsList ?? {};
@@ -176,19 +176,22 @@ function WorkspaceCompanyCardsSettingsPage({
                         <MenuItem
                             icon={icons.Trashcan}
                             title={translate('workspace.moreFeatures.companyCards.removeCardFeed')}
-                            onPress={() => setDeleteCompanyCardConfirmModalVisible(true)}
+                            onPress={() => {
+                                showConfirmModal({
+                                    title: feedName && translate('workspace.moreFeatures.companyCards.removeCardFeedTitle', feedName),
+                                    prompt: translate('workspace.moreFeatures.companyCards.removeCardFeedDescription'),
+                                    confirmText: translate('common.delete'),
+                                    cancelText: translate('common.cancel'),
+                                    danger: true,
+                                }).then((result) => {
+                                    if (result.action !== ModalActions.CONFIRM) {
+                                        return;
+                                    }
+                                    deleteCompanyCardFeed();
+                                });
+                            }}
                         />
                     </View>
-                    <ConfirmModal
-                        isVisible={deleteCompanyCardConfirmModalVisible}
-                        onConfirm={deleteCompanyCardFeed}
-                        onCancel={() => setDeleteCompanyCardConfirmModalVisible(false)}
-                        title={feedName && translate('workspace.moreFeatures.companyCards.removeCardFeedTitle', feedName)}
-                        prompt={translate('workspace.moreFeatures.companyCards.removeCardFeedDescription')}
-                        confirmText={translate('common.delete')}
-                        cancelText={translate('common.cancel')}
-                        danger
-                    />
                 </ScrollView>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>

src/pages/workspace/reports/ReportFieldsListValuesPage.tsx

@@ -3,9 +3,9 @@ import {InteractionManager, View} from 'react-native';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
-import ConfirmModal from '@components/ConfirmModal';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {ModalActions} from '@components/Modal/Global/ModalContext';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import SearchBar from '@components/SearchBar';
@@ -15,6 +15,7 @@ import SelectionListWithModal from '@components/SelectionListWithModal';
 import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
+import useConfirmModal from '@hooks/useConfirmModal';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
@@ -74,9 +75,9 @@ function ReportFieldsListValuesPage({
     const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT);
     const isMobileSelectionModeEnabled = useMobileSelectionMode();
     const illustrations = useMemoizedLazyIllustrations(['FolderWithPapers']);
+    const {showConfirmModal} = useConfirmModal();
 
     const [selectedValues, setSelectedValues] = useState<Record<string, boolean>>({});
-    const [deleteValuesConfirmModalVisible, setDeleteValuesConfirmModalVisible] = useState(false);
     const hasAccountingConnections = hasAccountingConnectionsPolicyUtils(policy);
 
     const canSelectMultiple = isSmallScreenWidth ? isMobileSelectionModeEnabled : true;
@@ -187,8 +188,6 @@ function ReportFieldsListValuesPage({
             });
         }
 
-        setDeleteValuesConfirmModalVisible(false);
-
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         InteractionManager.runAfterInteractions(() => {
             setSelectedValues({});
@@ -225,7 +224,21 @@ function ReportFieldsListValuesPage({
                     icon: icons.Trashcan,
                     text: translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValue' : 'workspace.reportFields.deleteValues'),
                     value: CONST.POLICY.BULK_ACTION_TYPES.DELETE,
-                    onSelected: () => setDeleteValuesConfirmModalVisible(true),
+                    onSelected: () => {
+                        showConfirmModal({
+                            danger: true,
+                            title: translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValue' : 'workspace.reportFields.deleteValues'),
+                            prompt: translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValuePrompt' : 'workspace.reportFields.deleteValuesPrompt'),
+                            confirmText: translate('common.delete'),
+                            cancelText: translate('common.cancel'),
+                        }).then((result) => {
+                            if (result.action !== ModalActions.CONFIRM) {
+                                return;
+                            }
+
+                            handleDeleteValues();
+                        });
+                    },
                 });
             }
             const enabledValues = selectedValuesArray.filter((valueName) => {
@@ -404,16 +417,6 @@ function ReportFieldsListValuesPage({
                         shouldShowRightCaret
                     />
                 )}
-                <ConfirmModal
-                    isVisible={deleteValuesConfirmModalVisible}
-                    onConfirm={handleDeleteValues}
-                    onCancel={() => setDeleteValuesConfirmModalVisible(false)}
-                    title={translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValue' : 'workspace.reportFields.deleteValues')}
-                    prompt={translate(selectedValuesArray.length === 1 ? 'workspace.reportFields.deleteValuePrompt' : 'workspace.reportFields.deleteValuesPrompt')}
-                    confirmText={translate('common.delete')}
-                    cancelText={translate('common.cancel')}
-                    danger
-                />
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );