feat: Wire ExportDownloadStatusModal into CSV export flow

cspell.json

@@ -516,6 +516,7 @@
         "creditamount",
         "creditcards",
         "crios",
+        "csvexport",
         "csvg",
         "customairshipextender",
         "customfield",

src/components/ExportDownloadStatusModal.tsx

@@ -1,17 +1,22 @@
-import {hasSeenTourSelector} from '@selectors/Onboarding';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePreviousDefined from '@hooks/usePreviousDefined';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
+import {isMobileSafari} from '@libs/Browser';
+import {getOldDotURLFromEnvironment} from '@libs/Environment/Environment';
 import fileDownload from '@libs/fileDownload';
+import Navigation from '@libs/Navigation/Navigation';
+import addTrailingForwardSlash from '@libs/UrlUtils';
 import {clearExportDownload, sendExportFileFromConcierge} from '@userActions/Export';
-import {navigateToConciergeChat} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import ActivityIndicator from './ActivityIndicator';
 import Button from './Button';
 import Modal from './Modal';
@@ -37,45 +42,54 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
     // isSmallScreenWidth is needed here because the modal type depends on actual screen width, not layout mode
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+    const {login: currentUserLogin} = useCurrentUserPersonalDetails();
+    const {environment} = useEnvironment();
 
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
-    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
-    const [betas] = useOnyx(ONYXKEYS.BETAS);
-    const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
+    const [encryptedAuthToken] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.encryptedAuthToken});
 
     const [exportDownload] = useOnyx(`${ONYXKEYS.COLLECTION.EXPORT_DOWNLOAD}${exportID}`);
     const displayedExport = usePreviousDefined(exportDownload);
 
     const state = displayedExport?.state;
     const shouldSendFromConcierge = displayedExport?.shouldSendFromConcierge;
-    const downloadURL = displayedExport?.downloadURL;
+    const fileName = displayedExport?.fileName;
     const isPreparing = state === CONST.EXPORT_DOWNLOAD.STATE.PREPARING && !shouldSendFromConcierge;
     const isConcierge = !!shouldSendFromConcierge;
     const isReady = state === CONST.EXPORT_DOWNLOAD.STATE.READY;
     const isFailed = state === CONST.EXPORT_DOWNLOAD.STATE.FAILED;
 
+    // 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.
+    const downloadFile = () => {
+        if (!fileName || !currentUserLogin) {
+            return;
+        }
+        const baseURL = addTrailingForwardSlash(getOldDotURLFromEnvironment(environment));
+        const isCSV = fileName.endsWith('.csv');
+        const secureType = isCSV ? 'csvexport' : 'pdfreport';
+        const url = `${baseURL}secure?secureType=${secureType}&filename=${encodeURIComponent(fileName)}&downloadName=${encodeURIComponent(fileName)}&email=${encodeURIComponent(currentUserLogin)}`;
+        fileDownload(translate, addEncryptedAuthTokenToURL(url, encryptedAuthToken ?? '', true), fileName, '', isMobileSafari());
+    };
+
     useEffect(() => {
-        if (!isReady || !downloadURL || shouldSendFromConcierge) {
+        if (!isReady || !fileName || shouldSendFromConcierge) {
             return;
         }
-        fileDownload(translate, downloadURL);
-    }, [isReady, downloadURL, translate, shouldSendFromConcierge]);
+        downloadFile();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isReady, fileName, shouldSendFromConcierge]);
 
     const handleSendFromConcierge = () => {
         sendExportFileFromConcierge(exportID, displayedExport ?? undefined);
     };
 
     const handleGoToConcierge = () => {
         onClose();
-        navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, isSelfTourViewed, betas);
-    };
-
-    const handleDownloadFile = () => {
-        if (!downloadURL) {
-            return;
+        if (conciergeReportID) {
+            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: conciergeReportID}));
         }
-        fileDownload(translate, downloadURL);
     };
 
     const handleClose = () => {
@@ -89,15 +103,15 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
         if (isPreparing) {
             return (
                 <>
-                    <ActivityIndicator
-                        size="large"
-                        style={styles.mb4}
-                        reasonAttributes={{context: 'ExportDownloadStatusModal.preparing'}}
-                    />
-                    <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb2]}>{translate('exportDownload.preparingTitle')}</Text>
-                    <Text style={[styles.textAlignCenter, styles.mb5]}>{translate('exportDownload.preparingBody')}</Text>
+                    <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb2]}>
+                        <Text style={[styles.textHeadlineH1, styles.flexShrink1]}>{translate('exportDownload.preparingTitle')}</Text>
+                        <ActivityIndicator
+                            size="small"
+                            reasonAttributes={{context: 'ExportDownloadStatusModal.preparing'}}
+                        />
+                    </View>
+                    <Text style={styles.mb5}>{translate('exportDownload.preparingBody')}</Text>
                     <Button
-                        success
                         text={translate('exportDownload.sendFromConcierge')}
                         onPress={handleSendFromConcierge}
                         style={styles.w100}
@@ -109,8 +123,8 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
         if (isConcierge) {
             return (
                 <>
-                    <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb2]}>{translate('exportDownload.conciergeTitle')}</Text>
-                    <Text style={[styles.textAlignCenter, styles.mb5]}>{translate('exportDownload.conciergeBody')}</Text>
+                    <Text style={[styles.textHeadlineH1, styles.mb2]}>{translate('exportDownload.conciergeTitle')}</Text>
+                    <Text style={styles.mb5}>{translate('exportDownload.conciergeBody')}</Text>
                     <Button
                         success
                         text={translate('exportDownload.goToConcierge')}
@@ -129,12 +143,12 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
         if (isReady) {
             return (
                 <>
-                    <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb2]}>{translate('exportDownload.readyTitle')}</Text>
-                    <Text style={[styles.textAlignCenter, styles.mb5]}>{translate('exportDownload.readyBody')}</Text>
+                    <Text style={[styles.textHeadlineH1, styles.mb2]}>{translate('exportDownload.readyTitle')}</Text>
+                    <Text style={styles.mb5}>{translate('exportDownload.readyBody')}</Text>
                     <Button
                         success
                         text={translate('exportDownload.downloadFile')}
-                        onPress={handleDownloadFile}
+                        onPress={downloadFile}
                         style={styles.w100}
                     />
                     <Button
@@ -149,8 +163,8 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
         if (isFailed) {
             return (
                 <>
-                    <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb2]}>{translate('exportDownload.failedTitle')}</Text>
-                    {!!failedBody && <Text style={[styles.textAlignCenter, styles.mb5]}>{failedBody}</Text>}
+                    <Text style={[styles.textHeadlineH1, styles.mb2]}>{translate('exportDownload.failedTitle')}</Text>
+                    {!!failedBody && <Text style={styles.mb5}>{failedBody}</Text>}
                     <Button
                         text={translate('exportDownload.close')}
                         onPress={handleClose}
@@ -171,7 +185,7 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={styles.pv0}
         >
-            <View style={[styles.m5, styles.alignItemsCenter]}>{renderContent()}</View>
+            <View style={styles.m5}>{renderContent()}</View>
         </Modal>
     );
 }

src/components/Search/SearchBulkActionsButton.tsx

@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import DecisionModal from '@components/DecisionModal';
 import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
+import ExportDownloadStatusModal from '@components/ExportDownloadStatusModal';
 import HoldOrRejectEducationalModal from '@components/HoldOrRejectEducationalModal';
 import HoldSubmitterEducationalModal from '@components/HoldSubmitterEducationalModal';
 import KYCWall from '@components/KYCWall';
@@ -80,6 +81,8 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
         allTransactions,
         allReports,
         searchData,
+        activeExportID,
+        handleExportModalClose,
     } = useSearchBulkActions({queryJSON});
     const currentSelectedPolicyID = selectedPolicyIDs?.at(0);
     const currentSelectedReportID = selectedTransactionReportIDs?.at(0) ?? selectedReportIDs?.at(0);
@@ -273,6 +276,14 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) {
                     onConfirm={dismissModalAndUpdateUseHold}
                 />
             )}
+            {!!activeExportID && (
+                <ExportDownloadStatusModal
+                    exportID={activeExportID}
+                    isVisible
+                    onClose={handleExportModalClose}
+                    failedBody={translate('exportDownload.csvFailedBody')}
+                />
+            )}
         </>
     );
 }