Merge pull request #61243 from ishakakkad/60755-delete-confirm-modal

Author: mountiny

src/components/MoneyReportHeader.tsx

@@ -201,7 +201,12 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
 
     const {selectedTransactionsID, setSelectedTransactionsID} = useMoneyRequestReportContext();
 
-    const selectedTransactionsOptions = useSelectedTransactionsActions({report: moneyRequestReport, reportActions, session, onExportFailed: () => setIsDownloadErrorModalVisible(true)});
+    const {
+        options: selectedTransactionsOptions,
+        handleDeleteTransactions,
+        isDeleteModalVisible: hookDeleteModalVisible,
+        hideDeleteModal,
+    } = useSelectedTransactionsActions({report: moneyRequestReport, reportActions, session, onExportFailed: () => setIsDownloadErrorModalVisible(true)});
 
     const shouldShowSelectedTransactionsButton = !!selectedTransactionsOptions.length && !transactionThreadReportID;
 
@@ -831,6 +836,17 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 danger
                 shouldEnableNewFocusManagement
             />
+            <ConfirmModal
+                title={translate('iou.deleteExpense', {count: selectedTransactionsID.length})}
+                isVisible={hookDeleteModalVisible}
+                onConfirm={handleDeleteTransactions}
+                onCancel={hideDeleteModal}
+                prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsID.length})}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                danger
+                shouldEnableNewFocusManagement
+            />
             {!!connectedIntegration && (
                 <ConfirmModal
                     title={translate('workspace.exportAgainModal.title')}

src/components/MoneyReportHeaderOld.tsx

@@ -197,7 +197,12 @@ function MoneyReportHeaderOld({policy, report: moneyRequestReport, transactionTh
 
     const {selectedTransactionsID, setSelectedTransactionsID} = useMoneyRequestReportContext();
 
-    const selectedTransactionsOptions = useSelectedTransactionsActions({report: moneyRequestReport, reportActions, session, onExportFailed: () => setIsDownloadErrorModalVisible(true)});
+    const {
+        options: selectedTransactionsOptions,
+        handleDeleteTransactions,
+        isDeleteModalVisible,
+        hideDeleteModal,
+    } = useSelectedTransactionsActions({report: moneyRequestReport, reportActions, session, onExportFailed: () => setIsDownloadErrorModalVisible(true)});
 
     const shouldShowSelectedTransactionsButton = !!selectedTransactionsOptions.length && !transactionThreadReportID;
 
@@ -654,6 +659,19 @@ function MoneyReportHeaderOld({policy, report: moneyRequestReport, transactionTh
                 danger
                 shouldEnableNewFocusManagement
             />
+
+            <ConfirmModal
+                title={translate('iou.deleteExpense', {count: selectedTransactionsID.length})}
+                isVisible={isDeleteModalVisible}
+                onConfirm={handleDeleteTransactions}
+                onCancel={hideDeleteModal}
+                prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsID.length})}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                danger
+                shouldEnableNewFocusManagement
+            />
+
             <DecisionModal
                 title={translate('common.downloadFailedTitle')}
                 prompt={translate('common.downloadFailedDescription')}

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -7,6 +7,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import Checkbox from '@components/Checkbox';
+import ConfirmModal from '@components/ConfirmModal';
 import DecisionModal from '@components/DecisionModal';
 import FlatList from '@components/FlatList';
 import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/InvertedFlatList/BaseInvertedFlatList';
@@ -119,7 +120,12 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
     const {selectedTransactionsID, setSelectedTransactionsID} = useMoneyRequestReportContext();
 
     const {selectionMode} = useMobileSelectionMode();
-    const selectedTransactionsOptions = useSelectedTransactionsActions({report, reportActions, session, onExportFailed: () => setIsDownloadErrorModalVisible(true)});
+    const {
+        options: selectedTransactionsOptions,
+        handleDeleteTransactions,
+        isDeleteModalVisible,
+        hideDeleteModal,
+    } = useSelectedTransactionsActions({report, reportActions, session, onExportFailed: () => setIsDownloadErrorModalVisible(true)});
 
     // We are reversing actions because in this View we are starting at the top and don't use Inverted list
     const visibleReportActions = useMemo(() => {
@@ -459,6 +465,17 @@ function MoneyRequestReportActionsList({report, policy, reportActions = [], tran
                             <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
                         </PressableWithFeedback>
                     </View>
+                    <ConfirmModal
+                        title={translate('iou.deleteExpense', {count: selectedTransactionsID.length})}
+                        isVisible={isDeleteModalVisible}
+                        onConfirm={handleDeleteTransactions}
+                        onCancel={hideDeleteModal}
+                        prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsID.length})}
+                        confirmText={translate('common.delete')}
+                        cancelText={translate('common.cancel')}
+                        danger
+                        shouldEnableNewFocusManagement
+                    />
                 </>
             )}
             <View style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden, styles.pb4]}>

src/hooks/useSelectedTransactionsActions.ts

@@ -1,4 +1,4 @@
-import {useMemo} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {useMoneyRequestReportContext} from '@components/MoneyRequestReportView/MoneyRequestReportContext';
 import {deleteMoneyRequest, unholdRequest} from '@libs/actions/IOU';
@@ -19,8 +19,33 @@ const UNHOLD = 'UNHOLD';
 function useSelectedTransactionsActions({report, reportActions, session, onExportFailed}: {report?: Report; reportActions: ReportAction[]; session?: Session; onExportFailed?: () => void}) {
     const {selectedTransactionsID, setSelectedTransactionsID} = useMoneyRequestReportContext();
     const {translate} = useLocalize();
+    const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
 
-    return useMemo(() => {
+    const handleDeleteTransactions = useCallback(() => {
+        const iouActions = reportActions.filter((action) => isMoneyRequestAction(action));
+
+        const transactionsWithActions = selectedTransactionsID.map((transactionID) => ({
+            transactionID,
+            action: iouActions.find((action) => {
+                const IOUTransactionID = (getOriginalMessage(action) as OriginalMessageIOU)?.IOUTransactionID;
+                return transactionID === IOUTransactionID;
+            }),
+        }));
+
+        transactionsWithActions.forEach(({transactionID, action}) => action && deleteMoneyRequest(transactionID, action));
+        setSelectedTransactionsID([]);
+        setIsDeleteModalVisible(false);
+    }, [reportActions, selectedTransactionsID, setSelectedTransactionsID]);
+
+    const showDeleteModal = useCallback(() => {
+        setIsDeleteModalVisible(true);
+    }, []);
+
+    const hideDeleteModal = useCallback(() => {
+        setIsDeleteModalVisible(false);
+    }, []);
+
+    const computedOptions = useMemo(() => {
         if (!selectedTransactionsID.length) {
             return [];
         }
@@ -109,25 +134,19 @@ function useSelectedTransactionsActions({report, reportActions, session, onExpor
                 text: translate('common.delete'),
                 icon: Expensicons.Trashcan,
                 value: CONST.REPORT.SECONDARY_ACTIONS.DELETE,
-                onSelected: () => {
-                    const iouActions = reportActions.filter((action) => isMoneyRequestAction(action));
-
-                    const transactionsWithActions = selectedTransactions.map((t) => ({
-                        transactionID: t?.transactionID,
-                        action: iouActions.find((action) => {
-                            const IOUTransactionID = (getOriginalMessage(action) as OriginalMessageIOU)?.IOUTransactionID;
-
-                            return t?.transactionID === IOUTransactionID;
-                        }),
-                    }));
-
-                    transactionsWithActions.forEach(({transactionID, action}) => action && deleteMoneyRequest(transactionID, action));
-                    setSelectedTransactionsID([]);
-                },
+                onSelected: showDeleteModal,
             });
         }
         return options;
-    }, [onExportFailed, report, reportActions, selectedTransactionsID, session?.accountID, setSelectedTransactionsID, translate]);
+    }, [onExportFailed, report, reportActions, selectedTransactionsID, session?.accountID, setSelectedTransactionsID, translate, showDeleteModal]);
+
+    return {
+        options: computedOptions,
+        handleDeleteTransactions,
+        isDeleteModalVisible,
+        showDeleteModal,
+        hideDeleteModal,
+    };
 }
 
 export default useSelectedTransactionsActions;