Refactor ImportSpreadsheetConfirmModal flow

src/components/ImportSpreadsheetColumns.tsx

@@ -28,7 +28,7 @@ type ImportSpreadsheetColumnsProps = {
     columnRoles?: ColumnRole[];
 
     // A function to perform the import operation.
-    importFunction: () => void;
+    importFunction: () => void | Promise<void>;
 
     // An optional Errors object containing any errors that may have occurred.
     errors?: Errors | null;
@@ -65,6 +65,9 @@ function ImportSpreadsheetColumns({
     const {isOffline} = useNetwork();
     const [spreadsheet] = useOnyx(ONYXKEYS.IMPORTED_SPREADSHEET);
     const {containsHeader = true} = spreadsheet ?? {};
+    const handleImport = () => {
+        importFunction();
+    };
 
     return (
         <>
@@ -117,7 +120,7 @@ function ImportSpreadsheetColumns({
                 >
                     <Button
                         text={translate('common.import')}
-                        onPress={importFunction}
+                        onPress={handleImport}
                         isLoading={isButtonLoading}
                         isDisabled={isOffline}
                         pressOnEnter

src/hooks/useImportSpreadsheetConfirmModal.ts

@@ -0,0 +1,48 @@
+import {useCallback} from 'react';
+import type {TranslationParameters} from '@src/languages/types';
+import type {ImportFinalModal} from '@src/types/onyx/ImportedSpreadsheet';
+import useConfirmModal from './useConfirmModal';
+import useIsFocusedRef from './useIsFocusedRef';
+import useLocalize from './useLocalize';
+
+type ShowImportSpreadsheetConfirmModalOptions = {
+    /** Callback method fired when the modal is hidden */
+    onModalHide?: () => void;
+
+    /** Whether to handle navigation back when modal visibility changes. */
+    shouldHandleNavigationBack?: boolean;
+};
+
+function useImportSpreadsheetConfirmModal() {
+    const {translate} = useLocalize();
+    const {showConfirmModal} = useConfirmModal();
+    const isFocusedRef = useIsFocusedRef();
+
+    return useCallback(
+        async (importFinalModal: ImportFinalModal, {onModalHide, shouldHandleNavigationBack = true}: ShowImportSpreadsheetConfirmModalOptions = {}) => {
+            if (!isFocusedRef.current) {
+                return false;
+            }
+
+            const titleText = translate(importFinalModal.titleKey);
+            const promptText = translate(importFinalModal.promptKey, importFinalModal.promptKeyParams as TranslationParameters<typeof importFinalModal.promptKey>[0]);
+            const pendingText = importFinalModal.pendingMessageKey ? translate(importFinalModal.pendingMessageKey) : '';
+            const fullPromptText = pendingText ? `${promptText} ${pendingText}` : promptText;
+
+            await showConfirmModal({
+                id: 'import-spreadsheet-confirm-modal',
+                title: titleText,
+                prompt: fullPromptText,
+                confirmText: translate('common.buttonConfirm'),
+                shouldShowCancelButton: false,
+                shouldHandleNavigationBack,
+                onModalHide,
+            });
+
+            return true;
+        },
+        [isFocusedRef, showConfirmModal, translate],
+    );
+}
+
+export default useImportSpreadsheetConfirmModal;

src/libs/API/types.ts

@@ -11,9 +11,7 @@ import type UpdateBeneficialOwnersForBankAccountParams from './parameters/Update
 type ApiRequestType = ValueOf<typeof CONST.API_REQUEST_TYPE>;
 
 const WRITE_COMMANDS = {
-    IMPORT_CSV_TRANSACTIONS: 'ImportCSVTransactions',
     CLEAN_POLICY_TAGS: 'ClearPolicyTags',
-    IMPORT_MULTI_LEVEL_TAGS: 'ImportMultiLevelTags',
     SET_WORKSPACE_AUTO_HARVESTING: 'SetWorkspaceAutoHarvesting',
     SET_WORKSPACE_AUTO_REPORTING_FREQUENCY: 'SetWorkspaceAutoReportingFrequency',
     SET_WORKSPACE_AUTO_REPORTING_MONTHLY_OFFSET: 'SetWorkspaceAutoReportingOffset',
@@ -172,11 +170,6 @@ const WRITE_COMMANDS = {
     MOVE_IOU_REPORT_TO_POLICY_AND_INVITE_SUBMITTER: 'MoveIOUReportToPolicyAndInviteSubmitter',
     SET_POLICY_TAGS_ENABLED: 'SetPolicyTagsEnabled',
     CREATE_WORKSPACE_CATEGORIES: 'CreateWorkspaceCategories',
-    IMPORT_CATEGORIES_SPREADSHEET: 'ImportCategoriesSpreadsheet',
-    IMPORT_MEMBERS_SPREADSHEET: 'ImportMembersSpreadsheet',
-    IMPORT_TAGS_SPREADSHEET: 'ImportTagsSpreadsheet',
-    IMPORT_CSV_COMPANY_CARDS: 'ImportCSVCompanyCards',
-    IMPORT_PER_DIEM_RATES: 'ImportPerDiemRates',
     EXPORT_CATEGORIES_CSV: 'ExportCategoriesCSV',
     EXPORT_MEMBERS_CSV: 'ExportMembersCSV',
     EXPORT_TAGS_CSV: 'ExportSingleLevelTagsCSV',
@@ -598,9 +591,7 @@ const WRITE_COMMANDS = {
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
 
 type WriteCommandParameters = {
-    [WRITE_COMMANDS.IMPORT_CSV_TRANSACTIONS]: Parameters.ImportCSVTransactionsParams;
     [WRITE_COMMANDS.CLEAN_POLICY_TAGS]: Parameters.CleanPolicyTagsParams;
-    [WRITE_COMMANDS.IMPORT_MULTI_LEVEL_TAGS]: Parameters.ImportMultiLevelTagsParams;
     [WRITE_COMMANDS.DISMISS_REFERRAL_BANNER]: Parameters.DismissReferralBannerParams;
     [WRITE_COMMANDS.UPDATE_PREFERRED_LOCALE]: Parameters.UpdatePreferredLocaleParams;
     [WRITE_COMMANDS.RECONNECT_APP]: Parameters.ReconnectAppParams;
@@ -754,11 +745,6 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.SET_WORKSPACE_CATEGORIES_ENABLED]: Parameters.SetWorkspaceCategoriesEnabledParams;
     [WRITE_COMMANDS.MOVE_IOU_REPORT_TO_POLICY_AND_INVITE_SUBMITTER]: Parameters.MoveIOUReportToPolicyAndInviteSubmitterParams;
     [WRITE_COMMANDS.CREATE_WORKSPACE_CATEGORIES]: Parameters.CreateWorkspaceCategoriesParams;
-    [WRITE_COMMANDS.IMPORT_CATEGORIES_SPREADSHEET]: Parameters.ImportCategoriesSpreadsheetParams;
-    [WRITE_COMMANDS.IMPORT_PER_DIEM_RATES]: Parameters.ImportPerDiemRatesParams;
-    [WRITE_COMMANDS.IMPORT_MEMBERS_SPREADSHEET]: Parameters.ImportMembersSpreadsheetParams;
-    [WRITE_COMMANDS.IMPORT_TAGS_SPREADSHEET]: Parameters.ImportTagsSpreadsheetParams;
-    [WRITE_COMMANDS.IMPORT_CSV_COMPANY_CARDS]: Parameters.ImportCSVCompanyCardsParams;
     [WRITE_COMMANDS.EXPORT_CATEGORIES_CSV]: Parameters.ExportCategoriesSpreadsheetParams;
     [WRITE_COMMANDS.EXPORT_MEMBERS_CSV]: Parameters.ExportMembersSpreadsheetParams;
     [WRITE_COMMANDS.EXPORT_TAGS_CSV]: Parameters.ExportTagsSpreadsheetParams;
@@ -1401,6 +1387,13 @@ const SIDE_EFFECT_REQUEST_COMMANDS = {
     AUTHENTICATE_PUSHER: 'AuthenticatePusher',
     GENERATE_SPOTNANA_TOKEN: 'GenerateSpotnanaToken',
     GET_MISSING_ONYX_MESSAGES: 'GetMissingOnyxMessages',
+    IMPORT_CATEGORIES_SPREADSHEET: 'ImportCategoriesSpreadsheet',
+    IMPORT_CSV_COMPANY_CARDS: 'ImportCSVCompanyCards',
+    IMPORT_CSV_TRANSACTIONS: 'ImportCSVTransactions',
+    IMPORT_MEMBERS_SPREADSHEET: 'ImportMembersSpreadsheet',
+    IMPORT_MULTI_LEVEL_TAGS: 'ImportMultiLevelTags',
+    IMPORT_PER_DIEM_RATES: 'ImportPerDiemRates',
+    IMPORT_TAGS_SPREADSHEET: 'ImportTagsSpreadsheet',
     OPEN_OLD_DOT_LINK: 'OpenOldDotLink',
     RECONNECT_APP: 'ReconnectApp',
     REVEAL_EXPENSIFY_CARD_DETAILS: 'RevealExpensifyCardDetails',
@@ -1443,6 +1436,13 @@ type SideEffectRequestCommand = ValueOf<typeof SIDE_EFFECT_REQUEST_COMMANDS>;
 
 type SideEffectRequestCommandParameters = {
     [SIDE_EFFECT_REQUEST_COMMANDS.AUTHENTICATE_PUSHER]: Parameters.AuthenticatePusherParams;
+    [SIDE_EFFECT_REQUEST_COMMANDS.IMPORT_CATEGORIES_SPREADSHEET]: Parameters.ImportCategoriesSpreadsheetParams;
+    [SIDE_EFFECT_REQUEST_COMMANDS.IMPORT_CSV_COMPANY_CARDS]: Parameters.ImportCSVCompanyCardsParams;
+    [SIDE_EFFECT_REQUEST_COMMANDS.IMPORT_CSV_TRANSACTIONS]: Parameters.ImportCSVTransactionsParams;
+    [SIDE_EFFECT_REQUEST_COMMANDS.IMPORT_MEMBERS_SPREADSHEET]: Parameters.ImportMembersSpreadsheetParams;
+    [SIDE_EFFECT_REQUEST_COMMANDS.IMPORT_MULTI_LEVEL_TAGS]: Parameters.ImportMultiLevelTagsParams;
+    [SIDE_EFFECT_REQUEST_COMMANDS.IMPORT_PER_DIEM_RATES]: Parameters.ImportPerDiemRatesParams;
+    [SIDE_EFFECT_REQUEST_COMMANDS.IMPORT_TAGS_SPREADSHEET]: Parameters.ImportTagsSpreadsheetParams;
     [SIDE_EFFECT_REQUEST_COMMANDS.OPEN_OLD_DOT_LINK]: Parameters.OpenOldDotLinkParams;
     [SIDE_EFFECT_REQUEST_COMMANDS.REVEAL_EXPENSIFY_CARD_DETAILS]: Parameters.RevealExpensifyCardDetailsParams;
     [SIDE_EFFECT_REQUEST_COMMANDS.GET_MISSING_ONYX_MESSAGES]: Parameters.GetMissingOnyxMessagesParams;

src/libs/actions/CompanyCards.ts

@@ -40,6 +40,7 @@ import type {
     StatementPeriodEnd,
     StatementPeriodEndDay,
 } from '@src/types/onyx/CardFeeds';
+import type {ImportFinalModal} from '@src/types/onyx/ImportedSpreadsheet';
 import type {OnyxData} from '@src/types/onyx/Request';
 import type Transaction from '@src/types/onyx/Transaction';
 
@@ -1119,7 +1120,7 @@ function importCSVCompanyCards({
     lastSelectedFeed,
     workspaceCardFeeds,
     existingInstanceID,
-}: ImportCSVCompanyCardsData) {
+}: ImportCSVCompanyCardsData): Promise<ImportFinalModal> {
     const feedName = layoutType as CompanyCardFeed;
     const {csvDataWithGeneratedIDs, normalizedColumnMappings, transactions} = buildOptimisticCompanyCardCSVTransactions(csvData, columnMappings, feedName);
     const instanceID = existingInstanceID ?? Date.now().toString();
@@ -1151,44 +1152,28 @@ function importCSVCompanyCards({
         },
     ];
 
-    const successData: Array<OnyxUpdate<typeof ONYXKEYS.IMPORTED_SPREADSHEET>> = [
+    const importFinalModal: ImportFinalModal = {
+        titleKey: 'spreadsheet.importSuccessfulTitle',
+        promptKey: 'spreadsheet.importCompanyCardTransactionsSuccessfulDescription',
+        promptKeyParams: {
+            transactions: transactionsCount,
+        },
+        pendingMessageKey: 'spreadsheet.importCompanyCardTransactionsPendingMessage',
+    };
+
+    const importFailedFinalModal: ImportFinalModal = {
+        titleKey: 'spreadsheet.importFailedTitle',
+        promptKey: 'spreadsheet.importFailedDescription',
+    };
+
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER | typeof ONYXKEYS.COLLECTION.LAST_SELECTED_FEED>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: ONYXKEYS.IMPORTED_SPREADSHEET,
-            value: {
-                shouldFinalModalBeOpened: true,
-                shouldShowPendingMessage: true,
-                importFinalModal: {
-                    titleKey: 'spreadsheet.importSuccessfulTitle',
-                    promptKey: 'spreadsheet.importCompanyCardTransactionsSuccessfulDescription',
-                    promptKeyParams: {
-                        transactions: transactionsCount,
-                    },
-                },
-            },
+            key: `${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`,
+            value: lastSelectedFeed ?? null,
         },
     ];
 
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER | typeof ONYXKEYS.COLLECTION.LAST_SELECTED_FEED | typeof ONYXKEYS.IMPORTED_SPREADSHEET>> =
-        [
-            {
-                onyxMethod: Onyx.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`,
-                value: lastSelectedFeed ?? null,
-            },
-            {
-                onyxMethod: Onyx.METHOD.MERGE,
-                key: ONYXKEYS.IMPORTED_SPREADSHEET,
-                value: {
-                    shouldFinalModalBeOpened: true,
-                    importFinalModal: {
-                        titleKey: 'spreadsheet.importFailedTitle',
-                        promptKey: 'spreadsheet.importFailedDescription',
-                    },
-                },
-            },
-        ];
-
     if (shouldCreateFeed || shouldSetNickname) {
         optimisticData.push({
             onyxMethod: Onyx.METHOD.MERGE,
@@ -1228,7 +1213,12 @@ function importCSVCompanyCards({
         });
     }
 
-    API.write(WRITE_COMMANDS.IMPORT_CSV_COMPANY_CARDS, parameters, {optimisticData, successData, failureData});
+    return (
+        // eslint-disable-next-line rulesdir/no-api-side-effects-method
+        API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.IMPORT_CSV_COMPANY_CARDS, parameters, {optimisticData, failureData})
+            .then((response) => (response?.jsonCode === CONST.JSON_CODE.SUCCESS ? importFinalModal : importFailedFinalModal))
+            .catch(() => importFailedFinalModal)
+    );
 }
 
 /**

src/libs/actions/ImportSpreadsheet.ts

@@ -49,9 +49,6 @@ function setSpreadsheetData(
         isImportingMultiLevelTags,
         // Preserve transaction import settings that were configured before file upload
         importTransactionSettings,
-        // Reset modal state for new import
-        shouldFinalModalBeOpened: false,
-        importFinalModal: undefined,
         containsHeader: true,
         isImportingIndependentMultiLevelTags: false,
         isGLAdjacent: false,
@@ -70,8 +67,6 @@ function closeImportPage(): Promise<void> {
     return Onyx.merge(ONYXKEYS.IMPORTED_SPREADSHEET, {
         data: null,
         columns: null,
-        shouldFinalModalBeOpened: false,
-        importFinalModal: null,
         // Clear the import settings so the next import starts fresh
         importTransactionSettings: null,
     });