Clear Search selection immediately when downloading a single report PDF

src/components/Modal/Global/ReportPDFDownloadModalWrapper.tsx

@@ -0,0 +1,32 @@
+import ReportPDFDownloadModal from '@components/ReportPDFDownloadModal';
+
+import React, {useState} from 'react';
+
+import type {ModalProps} from './ModalContext';
+
+import {ModalActions} from './ModalContext';
+
+type ReportPDFDownloadModalWrapperProps = ModalProps & {
+    reportID: string;
+};
+
+function ReportPDFDownloadModalWrapper({closeModal, reportID}: ReportPDFDownloadModalWrapperProps) {
+    const [isVisible, setIsVisible] = useState(true);
+
+    return (
+        <ReportPDFDownloadModal
+            reportID={reportID}
+            isVisible={isVisible}
+            onClose={() => setIsVisible(false)}
+            onModalHide={() => {
+                if (isVisible) {
+                    return;
+                }
+                closeModal({action: ModalActions.CLOSE});
+            }}
+        />
+    );
+}
+
+export default ReportPDFDownloadModalWrapper;
+export type {ReportPDFDownloadModalWrapperProps};

src/components/Search/SearchBulkActionsButton.tsx

@@ -10,7 +10,6 @@ import {KYCWallContext} from '@components/KYCWall/KYCWallContext';
 import type {ContinueActionParams} from '@components/KYCWall/types';
 import {useLockedAccountActions, useLockedAccountState} from '@components/LockedAccountModalProvider';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
-import ReportPDFDownloadModal from '@components/ReportPDFDownloadModal';
 
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLayoutSpacing from '@hooks/useLayoutSpacing';
@@ -89,10 +88,6 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
         emptyReportsCount,
         handleOfflineModalClose,
         handleDownloadErrorModalClose,
-        isPdfModalVisible,
-        setIsPdfModalVisible,
-        pdfReportID,
-        handlePdfModalHide,
         isExpensifyCardStatementPDFModalVisible,
         setIsExpensifyCardStatementPDFModalVisible,
         expensifyCardStatementPDFParams,
@@ -294,14 +289,6 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
                 isVisible={isDownloadErrorModalVisible}
                 onClose={handleDownloadErrorModalClose}
             />
-            {!!pdfReportID && (
-                <ReportPDFDownloadModal
-                    reportID={pdfReportID}
-                    isVisible={isPdfModalVisible}
-                    onClose={() => setIsPdfModalVisible(false)}
-                    onModalHide={handlePdfModalHide}
-                />
-            )}
             {!!expensifyCardStatementPDFParams && (
                 <ExpensifyCardStatementPDFDownloadModal
                     statementParams={expensifyCardStatementPDFParams}

src/hooks/useReportPDFDownloadModal.ts

@@ -0,0 +1,21 @@
+import type {ModalProps} from '@components/Modal/Global/ModalContext';
+import {useModal} from '@components/Modal/Global/ModalContext';
+import type {ReportPDFDownloadModalWrapperProps} from '@components/Modal/Global/ReportPDFDownloadModalWrapper';
+import ReportPDFDownloadModalWrapper from '@components/Modal/Global/ReportPDFDownloadModalWrapper';
+
+type ReportPDFDownloadModalOptions = Omit<ReportPDFDownloadModalWrapperProps, keyof ModalProps>;
+
+const useReportPDFDownloadModal = () => {
+    const context = useModal();
+
+    const showReportPDFDownloadModal = (options: ReportPDFDownloadModalOptions) => {
+        return context.showModal({
+            component: ReportPDFDownloadModalWrapper,
+            props: options,
+        });
+    };
+
+    return {showReportPDFDownloadModal};
+};
+
+export default useReportPDFDownloadModal;

src/hooks/useSearchBulkActions.ts

@@ -156,6 +156,7 @@ import usePermissions from './usePermissions';
 import {useAllPersonalDetails} from './usePersonalDetails';
 import usePersonalPolicy from './usePersonalPolicy';
 import usePolicyForMovingExpenses from './usePolicyForMovingExpenses';
+import useReportPDFDownloadModal from './useReportPDFDownloadModal';
 import useRestrictedActionPolicyID from './useRestrictedActionPolicyID';
 import useSearchShouldCalculateTotals from './useSearchShouldCalculateTotals';
 import useSelfDMReport from './useSelfDMReport';
@@ -665,13 +666,12 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) {
 
     const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
     const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
-    const [isPdfModalVisible, setIsPdfModalVisible] = useState(false);
-    const [pdfReportID, setPdfReportID] = useState<string | undefined>(undefined);
     const [isExpensifyCardStatementPDFModalVisible, setIsExpensifyCardStatementPDFModalVisible] = useState(false);
     const [expensifyCardStatementPDFParams, setExpensifyCardStatementPDFParams] = useState<ExpensifyCardStatementParams | undefined>(undefined);
     const [isExpensifyCardStatementMultiFeedAlertVisible, setIsExpensifyCardStatementMultiFeedAlertVisible] = useState(false);
     const {showConfirmModal} = useConfirmModal();
     const openSearchReportSubmitToPopover = useOpenSearchReportSubmitToPopover();
+    const {showReportPDFDownloadModal} = useReportPDFDownloadModal();
     const [isHoldEducationalModalVisible, setIsHoldEducationalModalVisible] = useState(false);
     const [rejectModalAction, setRejectModalAction] = useState<ValueOf<
         typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.HOLD | typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT
@@ -2578,8 +2578,9 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) {
                         return;
                     }
                     await exportReportToPDF({reportID: reportIDForPDF});
-                    setPdfReportID(reportIDForPDF);
-                    setIsPdfModalVisible(true);
+                    showReportPDFDownloadModal({reportID: reportIDForPDF});
+                    selectAllMatchingItems(false);
+                    clearSelectedTransactions(undefined, true);
                     return;
                 }
                 exportReportsToPDF(selectedReportIDs);
@@ -3303,6 +3304,7 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) {
         currentSearchResults?.search?.isLoading,
         shouldCalculateTotalsOnRefresh,
         rules,
+        showReportPDFDownloadModal,
     ]);
 
     // When the dropdown surfaces the export options directly there is no "Export" row above them, so on its own the
@@ -3320,11 +3322,6 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) {
         setIsDownloadErrorModalVisible(false);
     }, [setIsDownloadErrorModalVisible]);
 
-    const handlePdfModalHide = useCallback(() => {
-        setPdfReportID(undefined);
-        clearSelectedTransactions();
-    }, [clearSelectedTransactions]);
-
     const handleExpensifyCardStatementPDFModalHide = useCallback(() => {
         setExpensifyCardStatementPDFParams(undefined);
         // Clear the selection when the statement modal closes (after download or failure), like the other bulk
@@ -3375,10 +3372,6 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) {
         emptyReportsCount,
         handleOfflineModalClose,
         handleDownloadErrorModalClose,
-        isPdfModalVisible,
-        setIsPdfModalVisible,
-        pdfReportID,
-        handlePdfModalHide,
         isExpensifyCardStatementPDFModalVisible,
         setIsExpensifyCardStatementPDFModalVisible,
         expensifyCardStatementPDFParams,