Revert #79076 - "fix: Refactor ConfirmModal usage to useConfirmModal in IOU"

src/pages/iou/request/step/IOURequestStepConfirmation.tsx

@@ -2,19 +2,18 @@ import reportsSelector from '@selectors/Attributes';
 import {transactionDraftValuesSelector} from '@selectors/TransactionDraft';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import ConfirmModal from '@components/ConfirmModal';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import DropZoneUI from '@components/DropZone/DropZoneUI';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import LocationPermissionModal from '@components/LocationPermissionModal';
-import {ModalActions} from '@components/Modal/Global/ModalContext';
 import MoneyRequestConfirmationList from '@components/MoneyRequestConfirmationList';
 import {usePersonalDetails, usePolicyCategories} from '@components/OnyxListItemProvider';
 import PrevNextButtons from '@components/PrevNextButtons';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useArchivedReportsIdSet from '@hooks/useArchivedReportsIdSet';
-import useConfirmModal from '@hooks/useConfirmModal';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDeepCompareRef from '@hooks/useDeepCompareRef';
 import useFetchRoute from '@hooks/useFetchRoute';
@@ -128,6 +127,7 @@ function IOURequestStepConfirmation({
     const personalDetails = usePersonalDetails();
     const allPolicyCategories = usePolicyCategories();
 
+    const [isRemoveConfirmModalVisible, setRemoveConfirmModalVisible] = useState(false);
     const [optimisticTransactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {
         selector: transactionDraftValuesSelector,
         canBeMissing: true,
@@ -234,7 +234,6 @@ function IOURequestStepConfirmation({
     const {translate} = useLocalize();
     const {isBetaEnabled} = usePermissions();
     const {isOffline} = useNetwork();
-    const {showConfirmModal} = useConfirmModal();
     const [startLocationPermissionFlow, setStartLocationPermissionFlow] = useState(false);
     const [selectedParticipantList, setSelectedParticipantList] = useState<Participant[]>([]);
 
@@ -1295,27 +1294,15 @@ function IOURequestStepConfirmation({
         if (currentTransactionID === CONST.IOU.OPTIMISTIC_TRANSACTION_ID) {
             const nextTransaction = transactions.at(currentTransactionIndex + 1);
             replaceDefaultDraftTransaction(nextTransaction);
+            setRemoveConfirmModalVisible(false);
             return;
         }
 
         removeDraftTransaction(currentTransactionID);
+        setRemoveConfirmModalVisible(false);
         showPreviousTransaction();
     };
 
-    const confirmRemoveCurrentTransaction = async () => {
-        const result = await showConfirmModal({
-            title: translate('iou.removeExpense'),
-            prompt: translate('iou.removeExpenseConfirmation'),
-            confirmText: translate('common.remove'),
-            cancelText: translate('common.cancel'),
-            danger: true,
-        });
-        if (result.action !== ModalActions.CONFIRM) {
-            return;
-        }
-        removeCurrentTransaction();
-    };
-
     const showReceiptEmptyState = shouldShowReceiptEmptyState(iouType, action, policy, isPerDiemRequest);
 
     const shouldShowSmartScanFields =
@@ -1386,9 +1373,7 @@ function IOURequestStepConfirmation({
                         iouCategory={transaction?.category}
                         onConfirm={onConfirm}
                         onSendMoney={sendMoney}
-                        showRemoveExpenseConfirmModal={() => {
-                            confirmRemoveCurrentTransaction();
-                        }}
+                        showRemoveExpenseConfirmModal={() => setRemoveConfirmModalVisible(true)}
                         receiptPath={receiptPath}
                         receiptFilename={receiptFilename}
                         iouType={iouType}
@@ -1412,6 +1397,16 @@ function IOURequestStepConfirmation({
                         isReceiptEditable
                     />
                 </View>
+                <ConfirmModal
+                    title={translate('iou.removeExpense')}
+                    isVisible={isRemoveConfirmModalVisible}
+                    onConfirm={removeCurrentTransaction}
+                    onCancel={() => setRemoveConfirmModalVisible(false)}
+                    prompt={translate('iou.removeExpenseConfirmation')}
+                    confirmText={translate('common.remove')}
+                    cancelText={translate('common.cancel')}
+                    danger
+                />
             </DragAndDropProvider>
         </ScreenWrapper>
     );

src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx

@@ -5,11 +5,10 @@
 import useCarouselArrows from '@components/Attachments/AttachmentCarousel/useCarouselArrows';
 import useAttachmentErrors from '@components/Attachments/AttachmentView/useAttachmentErrors';
 import Button from '@components/Button';
+import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import {ModalActions} from '@components/Modal/Global/ModalContext';
+import * as Expensicons from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
-import useConfirmModal from '@hooks/useConfirmModal';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -38,10 +37,9 @@
     const {setAttachmentError} = useAttachmentErrors();
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
     const styles = useThemeStyles();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Trashcan'] as const);
     const [currentReceipt, setCurrentReceipt] = useState<ReceiptWithTransactionIDAndSource | null>();
     const [page, setPage] = useState<number>(-1);
-    const {showConfirmModal} = useConfirmModal();
+    const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false);
 
     const [receipts = getEmptyArray<ReceiptWithTransactionIDAndSource>()] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {
         selector: transactionDraftReceiptsViewSelector,
@@ -83,28 +81,19 @@
         Navigation.goBack();
     }, [currentReceipt, receipts.length, secondTransaction, secondTransactionID]);
 
+    const handleCloseConfirmModal = () => {
+        setIsDeleteReceiptConfirmModalVisible(false);
+    };
+
     const deleteReceipt = useCallback(() => {
+        handleCloseConfirmModal();
         handleDeleteReceipt();
     }, [handleDeleteReceipt]);
 
     const handleGoBack = useCallback(() => {
         Navigation.goBack(route.params.backTo);
     }, [route.params.backTo]);
 
-    const handleDeleteReceiptPress = useCallback(async () => {
-        const result = await showConfirmModal({
-            title: translate('receipt.deleteReceipt'),
-            prompt: translate('receipt.deleteConfirmation'),
-            confirmText: translate('common.delete'),
-            cancelText: translate('common.cancel'),
-            danger: true,
-        });
-        if (result.action !== ModalActions.CONFIRM) {
-            return;
-        }
-        deleteReceipt();
-    }, [showConfirmModal, translate, deleteReceipt]);
-
     return (
         <ScreenWrapper
             testID="ReceiptView"
@@ -114,11 +103,12 @@
                 title={translate('common.receipt')}
                 shouldDisplayHelpButton={false}
                 onBackButtonPress={handleGoBack}
+                onCloseButtonPress={handleCloseConfirmModal}
             >
                 <Button
                     shouldShowRightIcon
-                    iconRight={expensifyIcons.Trashcan}
-                    onPress={handleDeleteReceiptPress}
+                    iconRight={Expensicons.Trashcan}
+                    onPress={() => setIsDeleteReceiptConfirmModalVisible(true)}
                     innerStyles={styles.bgTransparent}
                     large
                 />
@@ -136,6 +126,17 @@
                 onAttachmentError={setAttachmentError}
                 shouldShowArrows={shouldShowArrows}
             />
+            <ConfirmModal
+                title={translate('receipt.deleteReceipt')}
+                isVisible={isDeleteReceiptConfirmModalVisible}
+                onConfirm={deleteReceipt}
+                onCancel={handleCloseConfirmModal}
+                prompt={translate('receipt.deleteConfirmation')}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                onBackdropPress={handleCloseConfirmModal}
+                danger
+            />
         </ScreenWrapper>
     );
 }

src/pages/iou/request/step/IOURequestStepSubrate.tsx

@@ -3,18 +3,18 @@
 import {InteractionManager, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import ConfirmModal from '@components/ConfirmModal';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapperWithRef from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import {ModalActions} from '@components/Modal/Global/ModalContext';
+import * as Expensicons from '@components/Icon/Expensicons';
+import type BaseModalProps from '@components/Modal/types';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import ValuePicker from '@components/ValuePicker';
-import useConfirmModal from '@hooks/useConfirmModal';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -70,11 +70,11 @@
     const styles = useThemeStyles();
     const policy = usePolicy(report?.policyID);
     const customUnit = getPerDiemCustomUnit(policy);
+    const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false);
+    const [restoreFocusType, setRestoreFocusType] = useState<BaseModalProps['restoreFocusType']>();
     const navigation = useNavigation();
     const isFocused = navigation.isFocused();
     const {translate} = useLocalize();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Trashcan'] as const);
-    const {showConfirmModal} = useConfirmModal();
     const textInputRef = useRef<AnimatedTextInputRef>(null);
     const parsedIndex = parseInt(pageIndex, 10);
     const selectedDestination = transaction?.comment?.customUnit?.customUnitRateID;
@@ -155,24 +155,11 @@
 
     const deleteSubrateAndHideModal = () => {
         removeSubrate(transaction, pageIndex);
+        setRestoreFocusType(CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE);
+        setIsDeleteStopModalOpen(false);
         goBack();
     };
 
-    const handleDeleteSubrate = async () => {
-        const result = await showConfirmModal({
-            title: translate('iou.deleteSubrate'),
-            prompt: translate('iou.deleteSubrateConfirmation'),
-            confirmText: translate('common.delete'),
-            cancelText: translate('common.cancel'),
-            shouldEnableNewFocusManagement: true,
-            danger: true,
-        });
-        if (result.action !== ModalActions.CONFIRM) {
-            return;
-        }
-        deleteSubrateAndHideModal();
-    };
-
     const tabTitles = {
         [CONST.IOU.TYPE.REQUEST]: translate('iou.createExpense'),
         [CONST.IOU.TYPE.SUBMIT]: translate('iou.createExpense'),
@@ -189,7 +176,7 @@
         <ScreenWrapper
             includeSafeAreaPaddingBottom
             shouldEnableMaxHeight
-            testID={IOURequestStepSubrate.displayName}
+            testID="IOURequestStepSubrate"
         >
             <FullPageNotFoundView shouldShow={shouldDisableEditor}>
                 <HeaderWithBackButton
@@ -200,15 +187,29 @@
                     shouldSetModalVisibility={false}
                     threeDotsMenuItems={[
                         {
-                            icon: expensifyIcons.Trashcan,
+                            icon: Expensicons.Trashcan,
                             text: translate('iou.deleteSubrate'),
                             onSelected: () => {
-                                handleDeleteSubrate();
+                                setRestoreFocusType(undefined);
+                                setIsDeleteStopModalOpen(true);
                             },
                             shouldCallAfterModalHide: true,
                         },
                     ]}
                 />
+                <ConfirmModal
+                    title={translate('iou.deleteSubrate')}
+                    isVisible={isDeleteStopModalOpen}
+                    onConfirm={deleteSubrateAndHideModal}
+                    onCancel={() => setIsDeleteStopModalOpen(false)}
+                    shouldSetModalVisibility={false}
+                    prompt={translate('iou.deleteSubrateConfirmation')}
+                    confirmText={translate('common.delete')}
+                    cancelText={translate('common.cancel')}
+                    shouldEnableNewFocusManagement
+                    danger
+                    restoreFocusType={restoreFocusType}
+                />
                 <FormProvider
                     style={[styles.flexGrow1, styles.mh5]}
                     formID={ONYXKEYS.FORMS.MONEY_REQUEST_SUBRATE_FORM}
@@ -254,6 +255,4 @@
     );
 }
 
-IOURequestStepSubrate.displayName = 'IOURequestStepSubrate';
-
 export default withWritableReportOrNotFound(withFullTransactionOrNotFound(IOURequestStepSubrate));

src/pages/iou/request/step/IOURequestStepWaypoint.tsx

@@ -5,14 +5,14 @@
 import type {OnyxEntry} from 'react-native-onyx';
 import AddressSearch from '@components/AddressSearch';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import ConfirmModal from '@components/ConfirmModal';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapperWithRef from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import {ModalActions} from '@components/Modal/Global/ModalContext';
+import * as Expensicons from '@components/Icon/Expensicons';
+import type BaseModalProps from '@components/Modal/types';
 import ScreenWrapper from '@components/ScreenWrapper';
-import useConfirmModal from '@hooks/useConfirmModal';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useLocationBias from '@hooks/useLocationBias';
 import useNetwork from '@hooks/useNetwork';
@@ -66,6 +66,8 @@
     transaction,
 }: IOURequestStepWaypointProps) {
     const styles = useThemeStyles();
+    const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false);
+    const [restoreFocusType, setRestoreFocusType] = useState<BaseModalProps['restoreFocusType']>();
     const navigation = useNavigation();
     const isFocused = navigation.isFocused();
     const {translate} = useLocalize();
@@ -77,8 +79,6 @@
     const waypointCount = Object.keys(allWaypoints).length;
     const filledWaypointCount = Object.values(allWaypoints).filter((waypoint) => !isEmptyObject(waypoint)).length;
     const [caretHidden, setCaretHidden] = useState(false);
-    const {showConfirmModal} = useConfirmModal();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Trashcan'] as const);
 
     const [userLocation] = useOnyx(ONYXKEYS.USER_LOCATION, {canBeMissing: true});
     const [recentWaypoints] = useOnyx(ONYXKEYS.NVP_RECENT_WAYPOINTS, {selector: recentWaypointsSelector, canBeMissing: true});
@@ -155,24 +155,11 @@
 
     const deleteStopAndHideModal = () => {
         removeWaypoint(transaction, pageIndex, shouldUseTransactionDraft(action));
+        setRestoreFocusType(CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE);
+        setIsDeleteStopModalOpen(false);
         goBack();
     };
 
-    const handleDeleteWaypoint = async () => {
-        const result = await showConfirmModal({
-            title: translate('distance.deleteWaypoint'),
-            prompt: translate('distance.deleteWaypointConfirmation'),
-            confirmText: translate('common.delete'),
-            cancelText: translate('common.cancel'),
-            shouldEnableNewFocusManagement: true,
-            danger: true,
-        });
-        if (result.action !== ModalActions.CONFIRM) {
-            return;
-        }
-        deleteStopAndHideModal();
-    };
-
     const selectWaypoint = (values: Waypoint) => {
         const waypoint = {
             lat: values.lat ?? 0,
@@ -219,15 +206,29 @@
                     shouldSetModalVisibility={false}
                     threeDotsMenuItems={[
                         {
-                            icon: expensifyIcons.Trashcan,
+                            icon: Expensicons.Trashcan,
                             text: translate('distance.deleteWaypoint'),
                             onSelected: () => {
-                                handleDeleteWaypoint();
+                                setRestoreFocusType(undefined);
+                                setIsDeleteStopModalOpen(true);
                             },
                             shouldCallAfterModalHide: true,
                         },
                     ]}
                 />
+                <ConfirmModal
+                    title={translate('distance.deleteWaypoint')}
+                    isVisible={isDeleteStopModalOpen}
+                    onConfirm={deleteStopAndHideModal}
+                    onCancel={() => setIsDeleteStopModalOpen(false)}
+                    shouldSetModalVisibility={false}
+                    prompt={translate('distance.deleteWaypointConfirmation')}
+                    confirmText={translate('common.delete')}
+                    cancelText={translate('common.cancel')}
+                    shouldEnableNewFocusManagement
+                    danger
+                    restoreFocusType={restoreFocusType}
+                />
                 <FormProvider
                     style={[styles.flexGrow1, styles.mh5]}
                     formID={ONYXKEYS.FORMS.WAYPOINT_FORM}