From 29dcc711e4553d083ecbd85256ba6809b413b710 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 11 Dec 2025 16:32:18 +0700 Subject: [PATCH 1/4] Refactor ConfirmModal usage to useConfirmModal in IOU --- .../step/IOURequestStepConfirmation.tsx | 34 ++++++++------- .../IOURequestStepScan/ReceiptView/index.tsx | 42 +++++++++---------- .../request/step/IOURequestStepSubrate.tsx | 42 +++++++++---------- .../request/step/IOURequestStepWaypoint.tsx | 42 +++++++++---------- 4 files changed, 77 insertions(+), 83 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx index 21fead678f19..82702a5e993b 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx @@ -2,18 +2,19 @@ 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'; @@ -127,7 +128,6 @@ function IOURequestStepConfirmation({ const personalDetails = usePersonalDetails(); const allPolicyCategories = usePolicyCategories(); - const [isRemoveConfirmModalVisible, setRemoveConfirmModalVisible] = useState(false); const [optimisticTransactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, { selector: transactionDraftValuesSelector, canBeMissing: true, @@ -230,6 +230,7 @@ function IOURequestStepConfirmation({ const {translate} = useLocalize(); const {isBetaEnabled} = usePermissions(); const {isOffline} = useNetwork(); + const {showConfirmModal} = useConfirmModal(); const [startLocationPermissionFlow, setStartLocationPermissionFlow] = useState(false); const [selectedParticipantList, setSelectedParticipantList] = useState([]); const [isDraggingOver, setIsDraggingOver] = useState(false); @@ -1238,15 +1239,28 @@ 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 = () => { + showConfirmModal({ + title: translate('iou.removeExpense'), + prompt: translate('iou.removeExpenseConfirmation'), + confirmText: translate('common.remove'), + cancelText: translate('common.cancel'), + danger: true, + }).then((result) => { + if (result.action !== ModalActions.CONFIRM) { + return; + } + removeCurrentTransaction(); + }); + }; + const showReceiptEmptyState = shouldShowReceiptEmptyState(iouType, action, policy, isPerDiemRequest); const shouldShowSmartScanFields = @@ -1321,7 +1335,7 @@ function IOURequestStepConfirmation({ iouCategory={transaction?.category} onConfirm={onConfirm} onSendMoney={sendMoney} - showRemoveExpenseConfirmModal={() => setRemoveConfirmModalVisible(true)} + showRemoveExpenseConfirmModal={confirmRemoveCurrentTransaction} receiptPath={receiptPath} receiptFilename={receiptFilename} iouType={iouType} @@ -1344,16 +1358,6 @@ function IOURequestStepConfirmation({ isReceiptEditable /> - setRemoveConfirmModalVisible(false)} - prompt={translate('iou.removeExpenseConfirmation')} - confirmText={translate('common.remove')} - cancelText={translate('common.cancel')} - danger - /> ); diff --git a/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx index 0d5911ae63f5..e0626aa72eec 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx @@ -5,10 +5,11 @@ import AttachmentCarouselView from '@components/Attachments/AttachmentCarousel/A 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 * as Expensicons from '@components/Icon/Expensicons'; +import {ModalActions} from '@components/Modal/Global/ModalContext'; 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'; @@ -37,9 +38,10 @@ function ReceiptView({route}: ReceiptViewProps) { const {setAttachmentError} = useAttachmentErrors(); const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows(); const styles = useThemeStyles(); + const expensifyIcons = useMemoizedLazyExpensifyIcons(['Trashcan'] as const); const [currentReceipt, setCurrentReceipt] = useState(); const [page, setPage] = useState(-1); - const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false); + const {showConfirmModal} = useConfirmModal(); const [receipts = getEmptyArray()] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, { selector: transactionDraftReceiptsViewSelector, @@ -81,12 +83,7 @@ function ReceiptView({route}: ReceiptViewProps) { Navigation.goBack(); }, [currentReceipt, receipts.length, secondTransaction, secondTransactionID]); - const handleCloseConfirmModal = () => { - setIsDeleteReceiptConfirmModalVisible(false); - }; - const deleteReceipt = useCallback(() => { - handleCloseConfirmModal(); handleDeleteReceipt(); }, [handleDeleteReceipt]); @@ -103,12 +100,24 @@ function ReceiptView({route}: ReceiptViewProps) { title={translate('common.receipt')} shouldDisplayHelpButton={false} onBackButtonPress={handleGoBack} - onCloseButtonPress={handleCloseConfirmModal} >