diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 13365796ef6e..d84ff052ee21 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -23,6 +23,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import {useSearchContext} from '@components/Search/SearchContext'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; +import useDeleteTransactions from '@hooks/useDeleteTransactions'; import useDuplicateTransactionsAndViolations from '@hooks/useDuplicateTransactionsAndViolations'; import useGetIOUReportFromReportAction from '@hooks/useGetIOUReportFromReportAction'; import useLocalize from '@hooks/useLocalize'; @@ -98,7 +99,7 @@ import { } from '@libs/ReportUtils'; import StringUtils from '@libs/StringUtils'; import {isDemoTransaction} from '@libs/TransactionUtils'; -import {deleteMoneyRequest, deleteTrackExpense, getNavigationUrlAfterTrackExpenseDelete, getNavigationUrlOnMoneyRequestDelete} from '@userActions/IOU'; +import {deleteTrackExpense, getNavigationUrlAfterTrackExpenseDelete, getNavigationUrlOnMoneyRequestDelete} from '@userActions/IOU'; import { clearAvatarErrors, clearPolicyRoomNameErrors, @@ -285,6 +286,12 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail const iouTransactionID = isMoneyRequestAction(requestParentReportAction) ? getOriginalMessage(requestParentReportAction)?.IOUTransactionID : undefined; const [iouTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${iouTransactionID}`, {canBeMissing: true}); const {duplicateTransactions, duplicateTransactionViolations} = useDuplicateTransactionsAndViolations(iouTransactionID ? [iouTransactionID] : []); + const {deleteTransactions} = useDeleteTransactions({ + report: parentReport, + reportActions: requestParentReportAction ? [requestParentReportAction] : [], + policy, + }); + const {currentSearchHash} = useSearchContext(); const isCardTransactionCanBeDeleted = canDeleteCardTransactionByLiabilityType(iouTransaction); const shouldShowDeleteButton = shouldShowTaskDeleteButton || (canDeleteRequest && isCardTransactionCanBeDeleted) || isDemoTransaction(iouTransaction); const [reportAttributes] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, {canBeMissing: true, selector: reportsSelector}); @@ -805,60 +812,32 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail isChatReportArchived: isMoneyRequestReportArchived, isChatIOUReportArchived, }); - } else { - deleteMoneyRequest( - iouTransactionID, - requestParentReportAction, - duplicateTransactions, - duplicateTransactionViolations, - iouReport, - chatIOUReport, - isChatIOUReportArchived, - isSingleTransactionView, - undefined, - undefined, - ); + } else if (iouTransactionID) { + deleteTransactions([iouTransactionID], duplicateTransactions, duplicateTransactionViolations, currentSearchHash, isSingleTransactionView); removeTransaction(iouTransactionID); } }, [ - duplicateTransactions, - duplicateTransactionViolations, caseID, + requestParentReportAction, + report, + isReportArchived, + currentUserPersonalDetails.accountID, iouTransactionID, + duplicateTransactions, + duplicateTransactionViolations, isSingleTransactionView, moneyRequestReport, removeTransaction, - report, - requestParentReportAction, - isReportArchived, isMoneyRequestReportArchived, iouReport, chatIOUReport, + deleteTransactions, + currentSearchHash, isChatIOUReportArchived, ]); - // A flag to indicate whether the user chose to delete the transaction or not - const isTransactionDeleted = useRef(false); - - useEffect(() => { - return () => { - // Perform the actual deletion after the details page is unmounted. This prevents the [Deleted ...] text from briefly appearing when dismissing the modal. - if (!isTransactionDeleted.current) { - return; - } - isTransactionDeleted.current = false; - deleteTransaction(); - }; - }, [deleteTransaction]); - // Where to navigate back to after deleting the transaction and its report. const navigateToTargetUrl = useCallback(() => { - // If transaction was not deleted (i.e. Cancel was clicked), do nothing - // which only dismiss the delete confirmation modal - if (!isTransactionDeleted.current) { - return; - } - let urlToNavigateBack: string | undefined; // Only proceed with navigation logic if transaction was actually deleted @@ -893,7 +872,22 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail setDeleteTransactionNavigateBackUrl(urlToNavigateBack); navigateBackOnDeleteTransaction(urlToNavigateBack as Route, true); } - }, [iouTransactionID, requestParentReportAction, isSingleTransactionView, isTransactionDeleted, moneyRequestReport, isChatIOUReportArchived, iouReport, chatIOUReport]); + }, [iouTransactionID, requestParentReportAction, isSingleTransactionView, moneyRequestReport, isChatIOUReportArchived, iouReport, chatIOUReport]); + + // A flag to indicate whether the user chose to delete the transaction or not + const isTransactionDeleted = useRef(false); + + useEffect(() => { + return () => { + // Perform the actual deletion after the details page is unmounted. This prevents the [Deleted ...] text from briefly appearing when dismissing the modal. + if (!isTransactionDeleted.current) { + return; + } + isTransactionDeleted.current = false; + navigateToTargetUrl(); + deleteTransaction(); + }; + }, [deleteTransaction, navigateToTargetUrl]); const mentionReportContextValue = useMemo(() => ({currentReportID: report.reportID, exactlyMatch: true}), [report.reportID]); @@ -1006,7 +1000,6 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail cancelText={translate('common.cancel')} danger shouldEnableNewFocusManagement - onModalHide={navigateToTargetUrl} />