Show export status in one app-level modal instead of per screen

src/components/ExportDownloadStatusManager.tsx

@@ -0,0 +1,67 @@
+import useOnyx from '@hooks/useOnyx';
+
+import {clearExportDownload, markExportDownloadSurfaced} from '@libs/actions/Export';
+
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+import React from 'react';
+
+import ExportDownloadStatusModal from './ExportDownloadStatusModal';
+
+/**
+ * Renders the queued export status modal for the whole app. It watches the export collection and shows the modal
+ * for the active export (preparing, ready, or failed). Because it is the single owner of the modal and reads
+ * straight from Onyx, a screen only has to start an export (which writes its record); this shows the progress,
+ * delivers the file when it is ready, and still surfaces it after a reload or once the screen that started it is
+ * gone. There is no per-screen modal to coordinate with.
+ */
+function ExportDownloadStatusManager() {
+    const [exportDownloads] = useOnyx(ONYXKEYS.COLLECTION.EXPORT_DOWNLOAD);
+
+    const activeEntry = Object.entries(exportDownloads ?? {}).find(([, exportDownload]) => {
+        if (!exportDownload) {
+            return false;
+        }
+        if (exportDownload.shouldSendFromConcierge) {
+            return !exportDownload.hasBeenSurfaced;
+        }
+        return (
+            exportDownload.state === CONST.EXPORT_DOWNLOAD.STATE.PREPARING ||
+            exportDownload.state === CONST.EXPORT_DOWNLOAD.STATE.READY ||
+            exportDownload.state === CONST.EXPORT_DOWNLOAD.STATE.FAILED
+        );
+    });
+
+    if (!activeEntry) {
+        return null;
+    }
+
+    const exportID = activeEntry[0].replace(ONYXKEYS.COLLECTION.EXPORT_DOWNLOAD, '');
+    const exportDownload = activeEntry[1];
+
+    const handleClose = () => {
+        if (exportDownload?.shouldSendFromConcierge) {
+            markExportDownloadSurfaced(exportID);
+            return;
+        }
+        // The modal already blocks dismissal while preparing, so this is an extra guard.
+        if (exportDownload?.state === CONST.EXPORT_DOWNLOAD.STATE.PREPARING) {
+            return;
+        }
+        clearExportDownload(exportID, exportDownload);
+    };
+
+    return (
+        <ExportDownloadStatusModal
+            key={exportID}
+            exportID={exportID}
+            isVisible
+            onClose={handleClose}
+        />
+    );
+}
+
+ExportDownloadStatusManager.displayName = 'ExportDownloadStatusManager';
+
+export default ExportDownloadStatusManager;

src/components/ExportDownloadStatusModal.tsx

@@ -7,13 +7,15 @@ import usePreviousDefined from '@hooks/usePreviousDefined';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import {isClientTheLeader} from '@libs/ActiveClientManager';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import {isMobileSafari} from '@libs/Browser';
 import {getOldDotURLFromEnvironment} from '@libs/Environment/Environment';
 import fileDownload from '@libs/fileDownload';
 import {buildSecureDownloadURL} from '@libs/UrlUtils';
 
 import {sendExportFileFromConcierge} from '@userActions/Export';
+import {close} from '@userActions/Modal';
 
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -71,7 +73,7 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
 
     // Build the secure download URL the same way downloadReportPDF does, so the host always follows
     // the app's current environment (instead of the env baked into a backend-built URL) and authenticates
-    // via the encryptedAuthToken — no separate OldDot sign-in needed.
+    // via the encryptedAuthToken, so no separate OldDot sign-in is needed.
     const downloadFile = () => {
         if (!fileName || !currentUserLogin) {
             return;
@@ -84,7 +86,8 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
     };
 
     useEffect(() => {
-        if (!isReady || !fileName || shouldSendFromConcierge || isEmptyReceipts) {
+        // Only the leader tab auto-downloads, so a ready export isn't downloaded once per open tab.
+        if (!isReady || !fileName || shouldSendFromConcierge || isEmptyReceipts || !isClientTheLeader()) {
             return;
         }
         downloadFile();
@@ -97,8 +100,7 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
     const {openConciergeAnywhere} = useOpenConciergeAnywhere();
 
     const handleGoToConcierge = () => {
-        onClose();
-        openConciergeAnywhere({forceConcierge: true});
+        close(() => openConciergeAnywhere({forceConcierge: true}));
     };
 
     const handleDownloadFile = () => {

src/components/MoneyReportHeader.tsx

@@ -24,7 +24,6 @@ import {View} from 'react-native';
 import HeaderLoadingBar from './HeaderLoadingBar';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import MoneyReportHeaderActions from './MoneyReportHeaderActions';
-import {ExportDownloadStatusProvider} from './MoneyReportHeaderActions/ExportDownloadStatusProvider';
 import MoneyReportHeaderModals from './MoneyReportHeaderModals';
 import MoneyReportHeaderMoreContent from './MoneyReportHeaderMoreContent';
 import {PaymentAnimationsProvider} from './PaymentAnimationsContext';
@@ -44,15 +43,13 @@ type MoneyReportHeaderProps = {
 function MoneyReportHeader({reportID, shouldDisplayBackButton = false, onBackButtonPress}: MoneyReportHeaderProps) {
     return (
         <MoneyReportHeaderModals reportID={reportID}>
-            <ExportDownloadStatusProvider>
-                <PaymentAnimationsProvider>
-                    <MoneyReportHeaderContent
-                        reportID={reportID}
-                        shouldDisplayBackButton={shouldDisplayBackButton}
-                        onBackButtonPress={onBackButtonPress}
-                    />
-                </PaymentAnimationsProvider>
-            </ExportDownloadStatusProvider>
+            <PaymentAnimationsProvider>
+                <MoneyReportHeaderContent
+                    reportID={reportID}
+                    shouldDisplayBackButton={shouldDisplayBackButton}
+                    onBackButtonPress={onBackButtonPress}
+                />
+            </PaymentAnimationsProvider>
         </MoneyReportHeaderModals>
     );
 }

src/components/MoneyRequestReportView/SelectionToolbar/index.tsx

@@ -9,7 +9,6 @@ import BulkDuplicateHandler from '@components/Search/BulkDuplicateHandler';
 import {useSearchSelectionActions, useSearchSelectionContext} from '@components/Search/SearchContext';
 
 import useConfirmModal from '@hooks/useConfirmModal';
-import useExportDownloadStatusModal from '@hooks/useExportDownloadStatusModal';
 import useFilterSelectedTransactions from '@hooks/useFilterSelectedTransactions';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
@@ -82,7 +81,6 @@ function SelectionToolbar({reportID, transactions, reportActions}: SelectionTool
 
     const isMobileSelectionModeEnabled = useMobileSelectionMode();
     const {showConfirmModal} = useConfirmModal();
-    const {trackExport, exportDownloadStatusModal} = useExportDownloadStatusModal(() => clearSelectedTransactions(true));
 
     const [offlineModalVisible, setOfflineModalVisible] = useState(false);
     const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
@@ -100,7 +98,7 @@ function SelectionToolbar({reportID, transactions, reportActions}: SelectionTool
             return;
         }
 
-        const exportID = queueExportSearchWithTemplate(
+        queueExportSearchWithTemplate(
             {
                 templateName,
                 templateType,
@@ -112,7 +110,8 @@ function SelectionToolbar({reportID, transactions, reportActions}: SelectionTool
             },
             true,
         );
-        trackExport(exportID);
+        // Clear the selection now that the export has started; the app-level ExportDownloadStatusManager shows the modal.
+        clearSelectedTransactions(true);
     };
 
     const onDeleteSelected = (handleDeleteTransactions: () => void, handleDeleteTransactionsWithNavigation: (backToRoute?: Route) => void) => {
@@ -238,7 +237,6 @@ function SelectionToolbar({reportID, transactions, reportActions}: SelectionTool
 
     return (
         <>
-            {exportDownloadStatusModal}
             {isDuplicateOptionVisible && (
                 <BulkDuplicateHandler
                     selectedTransactionsKeys={selectedTransactionIDs}

src/components/Search/SearchBulkActionsButton.tsx

@@ -90,7 +90,6 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
         handleExpensifyCardStatementPDFModalHide,
         isExpensifyCardStatementMultiFeedAlertVisible,
         handleExpensifyCardStatementMultiFeedAlertClose,
-        exportDownloadStatusModal,
         dismissModalAndUpdateUseHold,
         dismissRejectModalBasedOnAction,
         isDuplicateOptionVisible,
@@ -339,7 +338,6 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
                     isDM={areAllTransactionsFromDMReports}
                 />
             )}
-            {exportDownloadStatusModal}
         </>
     );
 }

src/hooks/useExportActions.ts

@@ -1,6 +1,6 @@
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
-import {useExportDownloadStatus} from '@components/MoneyReportHeaderActions/ExportDownloadStatusProvider';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
+import {useSearchSelectionActions} from '@components/Search/SearchContext';
 
 import {exportReceiptsToZip} from '@libs/actions/Export';
 import {openOldDotLink} from '@libs/actions/Link';
@@ -83,7 +83,7 @@ function useExportActions({reportID, policy, onPDFModalOpen}: UseExportActionsPa
 
     const {showDecisionModal} = useDecisionModal();
     const {triggerExportOrConfirm} = useExportAgainModal(moneyRequestReport?.reportID, moneyRequestReport?.policyID);
-    const {trackExport} = useExportDownloadStatus();
+    const {clearSelectedTransactions} = useSearchSelectionActions();
 
     const expensifyIcons = useMemoizedLazyExpensifyIcons([
         'Table',
@@ -129,7 +129,7 @@ function useExportActions({reportID, policy, onPDFModalOpen}: UseExportActionsPa
             return;
         }
 
-        const exportID = queueExportSearchWithTemplate(
+        queueExportSearchWithTemplate(
             {
                 templateName,
                 templateType,
@@ -141,7 +141,8 @@ function useExportActions({reportID, policy, onPDFModalOpen}: UseExportActionsPa
             },
             true,
         );
-        trackExport(exportID);
+        // Clear the selection now that the export has started. The app-level ExportDownloadStatusManager shows the modal.
+        clearSelectedTransactions(true);
     };
 
     const exportSubmenuOptions: Record<string, DropdownOption<string>> = {
@@ -291,8 +292,8 @@ function useExportActions({reportID, policy, onPDFModalOpen}: UseExportActionsPa
                 if (!moneyRequestReport?.reportID) {
                     return;
                 }
-                const exportID = exportReceiptsToZip({reportIDs: [moneyRequestReport.reportID]});
-                trackExport(exportID);
+                exportReceiptsToZip({reportIDs: [moneyRequestReport.reportID]});
+                clearSelectedTransactions(true);
             },
         },
         [CONST.REPORT.SECONDARY_ACTIONS.PRINT]: {