Extract Report Details delete action into a self-subscribing component

src/pages/DynamicReportDetailsPage/ReportDetailsActions.tsx

@@ -12,8 +12,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 
 import React from 'react';
 
-import type {ReportDetailsRequestData} from './types';
-
 import getReportDetailsCaseID from './getReportDetailsCaseID';
 import ReportDetailsMenuItems from './ReportDetailsMenuItems';
 import ReportDetailsRequestActions from './ReportDetailsRequestActions';
@@ -22,16 +20,10 @@ import {CASES} from './types';
 
 type ReportDetailsActionsProps = {
     reportID: string;
-
-    /** Confirms the delete, navigates away and then runs the passed delete */
-    showDeleteModal: (requestData: ReportDetailsRequestData | undefined, onDelete: () => void) => Promise<void>;
-
-    /** Deletes the expense described by the request data */
-    deleteTransaction: (requestData: ReportDetailsRequestData) => void;
 };
 
 /** Gates the money request subscriptions behind the caseID, so chats, rooms and tasks never mount them */
-function ReportDetailsActions({reportID, showDeleteModal, deleteTransaction}: ReportDetailsActionsProps) {
+function ReportDetailsActions({reportID}: ReportDetailsActionsProps) {
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`);
     const parentReportAction = useParentReportAction(report);
@@ -48,7 +40,7 @@ function ReportDetailsActions({reportID, showDeleteModal, deleteTransaction}: Re
                 <ReportDetailsMenuItems reportID={reportID} />
                 <ReportDetailsTaskDeleteAction
                     reportID={reportID}
-                    showDeleteModal={showDeleteModal}
+                    caseID={caseID}
                 />
             </>
         );
@@ -57,8 +49,7 @@ function ReportDetailsActions({reportID, showDeleteModal, deleteTransaction}: Re
     return (
         <ReportDetailsRequestActions
             reportID={reportID}
-            showDeleteModal={showDeleteModal}
-            deleteTransaction={deleteTransaction}
+            caseID={caseID}
         />
     );
 }

src/pages/DynamicReportDetailsPage/ReportDetailsDeleteAction.tsx

@@ -0,0 +1,109 @@
+import MenuItemAction from '@components/MenuItem/presets/MenuItemAction';
+import {useSearchSelectionActions} from '@components/Search/SearchContext';
+
+import {useCurrencyListActions} from '@hooks/useCurrencyList';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useOnyx from '@hooks/useOnyx';
+
+import {isTrackExpenseAction} from '@libs/ReportActionsUtils';
+import {getOriginalTransactionWithSplitInfo} from '@libs/TransactionUtils';
+
+import {deleteTrackExpense} from '@userActions/IOU/TrackExpense';
+
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+import React from 'react';
+
+import type {CaseID, ReportDetailsRequestData} from './types';
+
+import useReportDetailsDeleteModal from './hooks/useReportDetailsDeleteModal';
+
+type ReportDetailsDeleteActionProps = {
+    reportID: string;
+    caseID: CaseID;
+    requestData: ReportDetailsRequestData;
+};
+
+/** The Delete row of the money cases, deleting a track expense or a regular expense, or opening the split edit flow */
+function ReportDetailsDeleteAction({reportID, caseID, requestData}: ReportDetailsDeleteActionProps) {
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['ArrowSplit', 'Trashcan']);
+    const {removeTransaction} = useSearchSelectionActions();
+    const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const currentUserAccountID = currentUserPersonalDetails?.accountID;
+    const currentUserEmail = currentUserPersonalDetails?.email;
+    const {getCurrencyDecimals} = useCurrencyListActions();
+    const showDeleteModal = useReportDetailsDeleteModal(reportID, caseID);
+    const {shouldShowEditSplitOnDeleteAction, deleteMenuItemTitle} = requestData;
+
+    const deleteTransaction = () => {
+        const {
+            requestParentReportAction,
+            iouTransaction,
+            iouOriginalTransaction,
+            moneyRequestReport,
+            moneyRequestReportActions,
+            transactionThreadReportActions,
+            iouTransactionID,
+            iouReport,
+            iouReportTransactions,
+            chatIOUReport,
+            duplicateTransactions,
+            duplicateTransactionViolations,
+            isSingleTransactionView,
+            isMoneyRequestReportArchived,
+            isChatIOUReportArchived,
+            iouPolicy,
+            deleteTransactions,
+        } = requestData;
+        if (!requestParentReportAction) {
+            return;
+        }
+
+        const isTrackExpense = isTrackExpenseAction(requestParentReportAction);
+        const {isExpenseSplit: isSelfDMExpenseSplit} = getOriginalTransactionWithSplitInfo(iouTransaction, iouOriginalTransaction);
+
+        if (isTrackExpense && !isSelfDMExpenseSplit) {
+            deleteTrackExpense({
+                chatReportID: moneyRequestReport?.reportID,
+                chatReport: moneyRequestReport,
+                chatReportActions: moneyRequestReportActions,
+                transactionThreadReportActions,
+                transactionID: iouTransactionID,
+                reportAction: requestParentReportAction,
+                iouReport,
+                iouReportTransactions,
+                chatIOUReport,
+                transactions: duplicateTransactions,
+                violations: duplicateTransactionViolations,
+                isSingleTransactionView,
+                isChatReportArchived: isMoneyRequestReportArchived,
+                isChatIOUReportArchived,
+                allTransactionViolationsParam: allTransactionViolations,
+                currentUserAccountID,
+                currentUserEmail: currentUserEmail ?? '',
+                policy: iouPolicy,
+                getCurrencyDecimals,
+            });
+        } else if (iouTransactionID) {
+            const deleteResult = deleteTransactions([iouTransactionID], duplicateTransactions, duplicateTransactionViolations, undefined, isSingleTransactionView);
+            if (deleteResult.action === 'redirected') {
+                return;
+            }
+            removeTransaction(iouTransactionID);
+        }
+    };
+
+    return (
+        <MenuItemAction
+            key={CONST.REPORT_DETAILS_MENU_ITEM.DELETE}
+            icon={shouldShowEditSplitOnDeleteAction ? expensifyIcons.ArrowSplit : expensifyIcons.Trashcan}
+            title={deleteMenuItemTitle}
+            onPress={shouldShowEditSplitOnDeleteAction ? () => deleteTransaction() : () => showDeleteModal(requestData, () => deleteTransaction())}
+        />
+    );
+}
+
+export default ReportDetailsDeleteAction;

src/pages/DynamicReportDetailsPage/ReportDetailsRequestActions.tsx

@@ -1,31 +1,20 @@
-import MenuItemAction from '@components/MenuItem/presets/MenuItemAction';
-
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
-
-import CONST from '@src/CONST';
-
 import React from 'react';
 
-import type {ReportDetailsRequestData} from './types';
+import type {CaseID} from './types';
 
+import ReportDetailsDeleteAction from './ReportDetailsDeleteAction';
 import ReportDetailsMenuItems from './ReportDetailsMenuItems';
 import useReportDetailsRequestData from './useReportDetailsRequestData';
 
 type ReportDetailsRequestActionsProps = {
     reportID: string;
-
-    /** Confirms the delete, navigates away and then runs the passed delete */
-    showDeleteModal: (requestData: ReportDetailsRequestData | undefined, onDelete: () => void) => Promise<void>;
-
-    /** Deletes the expense described by the request data */
-    deleteTransaction: (requestData: ReportDetailsRequestData) => void;
+    caseID: CaseID;
 };
 
 /** Menu and Delete row of the money cases, the only place the request data subscriptions are mounted */
-function ReportDetailsRequestActions({reportID, showDeleteModal, deleteTransaction}: ReportDetailsRequestActionsProps) {
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['ArrowSplit', 'Trashcan']);
+function ReportDetailsRequestActions({reportID, caseID}: ReportDetailsRequestActionsProps) {
     const requestData = useReportDetailsRequestData(reportID);
-    const {shouldShowDeleteButton, shouldShowEditSplitOnDeleteAction, deleteMenuItemTitle} = requestData;
+    const {shouldShowDeleteButton} = requestData;
 
     return (
         <>
@@ -35,11 +24,10 @@ function ReportDetailsRequestActions({reportID, showDeleteModal, deleteTransacti
             />
 
             {shouldShowDeleteButton && (
-                <MenuItemAction
-                    key={CONST.REPORT_DETAILS_MENU_ITEM.DELETE}
-                    icon={shouldShowEditSplitOnDeleteAction ? expensifyIcons.ArrowSplit : expensifyIcons.Trashcan}
-                    title={deleteMenuItemTitle}
-                    onPress={shouldShowEditSplitOnDeleteAction ? () => deleteTransaction(requestData) : () => showDeleteModal(requestData, () => deleteTransaction(requestData))}
+                <ReportDetailsDeleteAction
+                    reportID={reportID}
+                    caseID={caseID}
+                    requestData={requestData}
                 />
             )}
         </>

src/pages/DynamicReportDetailsPage/ReportDetailsTaskDeleteAction.tsx

@@ -24,26 +24,24 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {delegateEmailSelector} from '@selectors/Account';
 import React from 'react';
 
-import type {ReportDetailsRequestData} from './types';
+import type {CaseID} from './types';
+
+import useReportDetailsDeleteModal from './hooks/useReportDetailsDeleteModal';
 
 type ReportDetailsTaskDeleteActionProps = {
     reportID: string;
-
-    /** Confirms the delete, navigates away and then runs the passed delete */
-    showDeleteModal: (requestData: ReportDetailsRequestData | undefined, onDelete: () => void) => Promise<void>;
+    caseID: CaseID;
 };
 
 type ReportDetailsTaskDeleteActionContentProps = {
     report: OnyxTypes.Report;
     parentReport: OnyxEntry<OnyxTypes.Report>;
     parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
     currentUserAccountID: number;
-
-    /** Confirms the delete, navigates away and then runs the passed delete */
-    showDeleteModal: (requestData: ReportDetailsRequestData | undefined, onDelete: () => void) => Promise<void>;
+    caseID: CaseID;
 };
 
-function ReportDetailsTaskDeleteActionContent({report, parentReport, parentReportAction, currentUserAccountID, showDeleteModal}: ReportDetailsTaskDeleteActionContentProps) {
+function ReportDetailsTaskDeleteActionContent({report, parentReport, parentReportAction, currentUserAccountID, caseID}: ReportDetailsTaskDeleteActionContentProps) {
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Trashcan']);
     const taskDeleteBackTo = Navigation.getTopmostSearchReportRouteParams()?.backTo;
@@ -54,6 +52,7 @@ function ReportDetailsTaskDeleteActionContent({report, parentReport, parentRepor
     const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, {selector: delegateEmailSelector});
     const isReportArchived = useReportIsArchived(report.reportID);
     const ancestors = useAncestors(report);
+    const showDeleteModal = useReportDetailsDeleteModal(report.reportID, caseID, parentReportAction);
 
     const deleteTransaction = () => {
         deleteTask(
@@ -85,7 +84,7 @@ function ReportDetailsTaskDeleteActionContent({report, parentReport, parentRepor
 }
 
 /** The Delete row of a task, rendered for the default case where no money request data exists */
-function ReportDetailsTaskDeleteAction({reportID, showDeleteModal}: ReportDetailsTaskDeleteActionProps) {
+function ReportDetailsTaskDeleteAction({reportID, caseID}: ReportDetailsTaskDeleteActionProps) {
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`);
     const parentReportAction = useParentReportAction(report);
@@ -112,7 +111,7 @@ function ReportDetailsTaskDeleteAction({reportID, showDeleteModal}: ReportDetail
             parentReport={parentReport}
             parentReportAction={parentReportAction}
             currentUserAccountID={currentUserAccountID}
-            showDeleteModal={showDeleteModal}
+            caseID={caseID}
         />
     );
 }