Merge pull request Expensify#81885 from Expensify/alberto-columns

Save CSV-import mapped columns for later use

Author: deetergp

src/CONST/index.ts

@@ -7983,6 +7983,10 @@ const CONST = {
         ENABLED: 'enabled',
         IGNORE: 'ignore',
         DESTINATION: 'destination',
+        CATEGORY: 'category',
+        DATE: 'date',
+        MERCHANT: 'merchant',
+        TRANSACTION_FIELDS: ['date', 'merchant', 'amount', 'category'] as const,
     },
 
     IMPORT_SPREADSHEET: {

src/ONYXKEYS.ts

@@ -9,6 +9,7 @@ import type * as OnyxTypes from './types/onyx';
 import type {Attendee, DistanceExpenseType, Participant} from './types/onyx/IOU';
 import type Onboarding from './types/onyx/Onboarding';
 import type {AnyOnyxUpdate} from './types/onyx/Request';
+import type {SavedCSVColumnLayoutList} from './types/onyx/SavedCSVColumnLayout';
 import type AssertTypesEqual from './types/utils/AssertTypesEqual';
 import type DeepValueOf from './types/utils/DeepValueOf';
 
@@ -187,6 +188,9 @@ const ONYXKEYS = {
     /** This NVP holds to most recent waypoints that a person has used when creating a distance expense */
     NVP_RECENT_WAYPOINTS: 'nvp_expensify_recentWaypoints',
 
+    /** This NVP contains saved CSV column layouts for imported cards */
+    NVP_SAVED_CSV_COLUMN_LAYOUT_LIST: 'nvp_expensify_savedCSVColumnLayoutList',
+
     /** This NVP contains the choice that the user made on the engagement modal */
     NVP_INTRO_SELECTED: 'nvp_introSelected',
 
@@ -1291,6 +1295,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_LAST_LOCATION_PERMISSION_PROMPT]: string;
     [ONYXKEYS.LAST_EXPORT_METHOD]: OnyxTypes.LastExportMethod;
     [ONYXKEYS.NVP_RECENT_WAYPOINTS]: OnyxTypes.RecentWaypoint[];
+    [ONYXKEYS.NVP_SAVED_CSV_COLUMN_LAYOUT_LIST]: SavedCSVColumnLayoutList;
     [ONYXKEYS.NVP_INTRO_SELECTED]: OnyxTypes.IntroSelected;
     [ONYXKEYS.HAS_NON_PERSONAL_POLICY]: boolean;
     [ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES]: OnyxTypes.LastSelectedDistanceRates;

src/components/ImportColumn.tsx

@@ -1,5 +1,5 @@
 import {Str} from 'expensify-common';
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -27,7 +27,7 @@ function findColumnName(header: string): string {
 
         case 'category':
         case 'categories':
-            attribute = CONST.CSV_IMPORT_COLUMNS.EMAIL;
+            attribute = CONST.CSV_IMPORT_COLUMNS.CATEGORY;
             break;
 
         case 'glcode':
@@ -103,6 +103,19 @@ function findColumnName(header: string): string {
             attribute = CONST.CSV_IMPORT_COLUMNS.CURRENCY;
             break;
 
+        case 'date':
+        case 'transactiondate':
+        case 'transaction_date':
+            attribute = CONST.CSV_IMPORT_COLUMNS.DATE;
+            break;
+
+        case 'merchant':
+        case 'merchants':
+        case 'vendor':
+        case 'vendors':
+            attribute = CONST.CSV_IMPORT_COLUMNS.MERCHANT;
+            break;
+
         case 'rateid':
             attribute = CONST.CSV_IMPORT_COLUMNS.RATE_ID;
             break;
@@ -156,6 +169,7 @@ function ImportColumn({column, columnName, columnRoles, columnIndex, shouldShowD
     const {translate} = useLocalize();
     const [spreadsheet] = useOnyx(ONYXKEYS.IMPORTED_SPREADSHEET);
     const {containsHeader = true} = spreadsheet ?? {};
+    const hasAutoDetected = useRef(false);
 
     const options: Array<DropdownOption<string>> = (columnRoles ?? []).map((item) => ({
         text: item.text,
@@ -166,17 +180,27 @@ function ImportColumn({column, columnName, columnRoles, columnIndex, shouldShowD
 
     const columnValuesString = column.slice(containsHeader ? 1 : 0).join(', ');
 
-    const colName = findColumnName(column.at(0) ?? '');
-    const defaultSelectedIndex = columnRoles?.findIndex((item) => item.value === colName);
-    const finalIndex = defaultSelectedIndex !== -1 ? defaultSelectedIndex : 0;
+    const currentColumnValue = spreadsheet?.columns?.[columnIndex];
+    // Treat 'ignore' as unmapped so auto-detection can still run
+    const isMapped = currentColumnValue && currentColumnValue !== CONST.CSV_IMPORT_COLUMNS.IGNORE;
+    const autoDetectedColName = isMapped ? '' : findColumnName(column.at(0) ?? '');
+
+    const foundIndex = columnRoles?.findIndex((item) => item.value === (currentColumnValue ?? autoDetectedColName)) ?? -1;
+    const selectedIndex = foundIndex !== -1 ? foundIndex : 0;
 
     useEffect(() => {
-        if (defaultSelectedIndex === -1) {
+        // Only run auto-detection once on mount
+        if (hasAutoDetected.current) {
             return;
         }
-        setColumnName(columnIndex, colName);
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again
-    }, []);
+
+        if (isMapped || !autoDetectedColName) {
+            return;
+        }
+
+        hasAutoDetected.current = true;
+        setColumnName(columnIndex, autoDetectedColName);
+    }, [isMapped, autoDetectedColName, columnIndex]);
 
     const columnHeader = containsHeader ? column.at(0) : translate('spreadsheet.column', columnName);
 
@@ -208,7 +232,7 @@ function ImportColumn({column, columnName, columnRoles, columnIndex, shouldShowD
                             onOptionSelected={(option) => {
                                 setColumnName(columnIndex, option.value);
                             }}
-                            defaultSelectedIndex={finalIndex}
+                            defaultSelectedIndex={selectedIndex}
                             options={options}
                             success={false}
                         />

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -301,7 +301,7 @@ function MoneyRequestReportActionsList({
             }
             return option;
         });
-    }, [originalSelectedTransactionsOptions, dismissedRejectUseExplanation]);
+    }, [originalSelectedTransactionsOptions, dismissedRejectUseExplanation, isDelegateAccessRestricted, showDelegateNoAccessModal]);
 
     const dismissRejectModalBasedOnAction = useCallback(() => {
         if (rejectModalAction === CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT_BULK) {

src/components/Search/SearchAutocompleteList.tsx

@@ -403,7 +403,7 @@ function SearchAutocompleteList({
                 flatIndex++;
             }
         }
-    }, [areOptionsInitialized, firstRecentReportKey, shouldUseNarrowLayout]);
+    }, [areOptionsInitialized, firstRecentReportKey, sections, shouldUseNarrowLayout]);
 
     useEffect(() => {
         const targetText = autocompleteQueryValue;

src/libs/API/parameters/ImportCSVTransactionsParams.ts

@@ -13,6 +13,9 @@ type ImportCSVTransactionsParams = {
 
     /** Whether transactions are reimbursable */
     reimbursable: boolean;
+
+    /** Mapping of transaction attributes (amount, merchant, category, date) to column names */
+    columnMappings: string;
 };
 
 export default ImportCSVTransactionsParams;

src/libs/actions/Card.ts

@@ -32,6 +32,7 @@ import type {Card, CompanyCardFeedWithDomainID, Report, Transaction} from '@src/
 import type {CardLimitType, ExpensifyCardDetails, IssueNewCardData, IssueNewCardStep} from '@src/types/onyx/Card';
 import type {SelectedTimezone} from '@src/types/onyx/PersonalDetails';
 import type {ConnectionName} from '@src/types/onyx/Policy';
+import type {SavedCSVColumnLayoutData} from '@src/types/onyx/SavedCSVColumnLayout';
 
 type ReplacementReason = 'damaged' | 'stolen';
 
@@ -1157,13 +1158,14 @@ type DeletePersonalCardData = {
     card?: Card;
     allTransactions: OnyxCollection<Transaction>;
     allReports: OnyxCollection<Report>;
+    savedColumnLayout?: SavedCSVColumnLayoutData;
 };
 
 /**
  * Deletes a personal card (CSV-imported card) and its associated transactions.
  * The backend will handle deleting transactions on unsubmitted/open reports.
  */
-function deletePersonalCard({cardID, card, allTransactions, allReports}: DeletePersonalCardData) {
+function deletePersonalCard({cardID, card, allTransactions, allReports, savedColumnLayout}: DeletePersonalCardData) {
     // Find all transactions associated with this card that are on open/unsubmitted reports
     // This matches the backend logic which only deletes transactions on open reports
     const transactionsToDelete: Transaction[] = [];
@@ -1173,18 +1175,25 @@ function deletePersonalCard({cardID, card, allTransactions, allReports}: DeleteP
         }
     }
 
-    // Optimistically remove the card immediately for instant UI feedback
-    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.CARD_LIST | typeof ONYXKEYS.COLLECTION.TRANSACTION>> = [
+    // Optimistically remove the card and its saved column layout immediately for instant UI feedback
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.CARD_LIST | typeof ONYXKEYS.NVP_SAVED_CSV_COLUMN_LAYOUT_LIST | typeof ONYXKEYS.COLLECTION.TRANSACTION>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: ONYXKEYS.CARD_LIST,
             value: {
                 [cardID]: null,
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_SAVED_CSV_COLUMN_LAYOUT_LIST,
+            value: {
+                [cardID]: null,
+            },
+        },
     ];
 
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.CARD_LIST | typeof ONYXKEYS.COLLECTION.TRANSACTION>> = [
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.CARD_LIST | typeof ONYXKEYS.NVP_SAVED_CSV_COLUMN_LAYOUT_LIST | typeof ONYXKEYS.COLLECTION.TRANSACTION>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: ONYXKEYS.CARD_LIST,
@@ -1198,6 +1207,17 @@ function deletePersonalCard({cardID, card, allTransactions, allReports}: DeleteP
         },
     ];
 
+    // Restore the saved column layout on failure if it existed
+    if (savedColumnLayout) {
+        failureData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_SAVED_CSV_COLUMN_LAYOUT_LIST,
+            value: {
+                [cardID]: savedColumnLayout,
+            },
+        });
+    }
+
     // Optimistically delete transactions and prepare failure data to restore them
     for (const transaction of transactionsToDelete) {
         optimisticData.push({

src/libs/actions/ImportSpreadsheet.ts

@@ -2,6 +2,7 @@ import Onyx from 'react-native-onyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ImportTransactionSettings} from '@src/types/onyx/ImportedSpreadsheet';
+import type {SavedCSVColumnLayoutData} from '@src/types/onyx/SavedCSVColumnLayout';
 
 function setSpreadsheetData(
     data: string[][],
@@ -103,4 +104,53 @@ function setImportTransactionSettings(cardDisplayName: string, currency: string,
     });
 }
 
-export {setSpreadsheetData, setColumnName, closeImportPage, setContainsHeader, setImportTransactionCardName, setImportTransactionCurrency, setImportTransactionSettings};
+/**
+ * Applies saved column mappings to the spreadsheet data if the column headers match.
+ * This is used when importing transactions to an existing card that has a saved layout.
+ *
+ * @param spreadsheetData - The spreadsheet data in column-major format
+ * @param savedLayout - The saved column layout for this card
+ */
+function applySavedColumnMappings(spreadsheetData: string[][], savedLayout: SavedCSVColumnLayoutData): void {
+    const columnMapping = savedLayout?.columnMapping;
+    if (!columnMapping?.names) {
+        return;
+    }
+    const savedNames = columnMapping.names;
+
+    const headerToIndex: Record<string, number> = {};
+    for (const [index, column] of spreadsheetData.entries()) {
+        const headerName = column.at(0)?.trim();
+        if (headerName) {
+            headerToIndex[headerName] = index;
+        }
+    }
+
+    const columnUpdates: Record<number, string> = {};
+
+    for (const role of CONST.CSV_IMPORT_COLUMNS.TRANSACTION_FIELDS) {
+        const savedColumnName = savedNames[role];
+        if (typeof savedColumnName !== 'string') {
+            continue;
+        }
+        const trimmedName = savedColumnName.trim();
+        if (trimmedName && headerToIndex[trimmedName] !== undefined) {
+            columnUpdates[headerToIndex[trimmedName]] = role;
+        }
+    }
+
+    if (Object.keys(columnUpdates).length > 0) {
+        Onyx.merge(ONYXKEYS.IMPORTED_SPREADSHEET, {columns: columnUpdates});
+    }
+}
+
+export {
+    setSpreadsheetData,
+    setColumnName,
+    closeImportPage,
+    setContainsHeader,
+    setImportTransactionCardName,
+    setImportTransactionCurrency,
+    setImportTransactionSettings,
+    applySavedColumnMappings,
+};