Merge pull request Expensify#86806 from Krishna2323/krishna2323/issue/85052

feat: Add Edit Company Card feed feature for CSV Card Import

Author: Gonals

src/libs/actions/CompanyCards.ts

@@ -64,6 +64,7 @@ type ImportCSVCompanyCardsData = {
     existingCardsList?: WorkspaceCardsList;
     lastSelectedFeed?: CompanyCardFeedWithDomainID;
     workspaceCardFeeds?: OnyxEntry<CardFeeds>;
+    existingInstanceID?: string;
 };
 
 type OptimisticCompanyCardCSVTransaction = Pick<Transaction, 'transactionID' | 'amount' | 'created' | 'currency' | 'merchant' | 'category' | 'tag' | 'comment' | 'cardName' | 'bank'> & {
@@ -1124,10 +1125,11 @@ function importCSVCompanyCards({
     existingCardsList,
     lastSelectedFeed,
     workspaceCardFeeds,
+    existingInstanceID,
 }: ImportCSVCompanyCardsData) {
     const feedName = layoutType as CompanyCardFeed;
     const {csvDataWithGeneratedIDs, normalizedColumnMappings, transactions: optimisticTransactions} = buildOptimisticCompanyCardCSVTransactions(csvData, columnMappings, feedName);
-    const instanceID = Date.now().toString();
+    const instanceID = existingInstanceID ?? Date.now().toString();
 
     const parameters: ImportCSVCompanyCardsParams = {
         policyID,

src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx

@@ -18,8 +18,8 @@ import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {deleteWorkspaceCompanyCardFeed, setWorkspaceCompanyCardTransactionLiability} from '@libs/actions/CompanyCards';
-import {getCompanyCardFeed, getCompanyFeeds, getCustomOrFormattedFeedName, getDomainOrWorkspaceAccountID, getSelectedFeed, isDirectFeed} from '@libs/CardUtils';
+import {deleteWorkspaceCompanyCardFeed, setAddNewCompanyCardStepAndData, setWorkspaceCompanyCardTransactionLiability} from '@libs/actions/CompanyCards';
+import {getCompanyCardFeed, getCompanyFeeds, getCustomOrFormattedFeedName, getDomainOrWorkspaceAccountID, getSelectedFeed, isCSVUploadFeed, isDirectFeed} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
@@ -32,6 +32,15 @@ import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {CompanyCardFeedWithDomainID} from '@src/types/onyx';
 
+const ADVANCED_CSV_COLUMNS = new Set<string>([
+    CONST.CSV_IMPORT_COLUMNS.ORIGINAL_TRANSACTION_DATE,
+    CONST.CSV_IMPORT_COLUMNS.ORIGINAL_AMOUNT,
+    CONST.CSV_IMPORT_COLUMNS.ORIGINAL_CURRENCY,
+    CONST.CSV_IMPORT_COLUMNS.COMMENT,
+    CONST.CSV_IMPORT_COLUMNS.CATEGORY,
+    CONST.CSV_IMPORT_COLUMNS.TAG,
+]);
+
 type WorkspaceCompanyCardsSettingsPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_SETTINGS>;
 
 function WorkspaceCompanyCardsSettingsPage({
@@ -55,7 +64,7 @@ function WorkspaceCompanyCardsSettingsPage({
     const {showConfirmModal} = useConfirmModal();
 
     const [cardsList] = useCardsList(selectedFeed);
-    const icons = useMemoizedLazyExpensifyIcons(['Sync', 'Trashcan']);
+    const icons = useMemoizedLazyExpensifyIcons(['Sync', 'Trashcan', 'Table']);
     const feedName = selectedFeed ? getCustomOrFormattedFeedName(translate, feed, cardFeeds?.[selectedFeed]?.customFeedName) : undefined;
     const companyFeeds = getCompanyFeeds(cardFeeds);
     const selectedFeedData = selectedFeed ? companyFeeds[selectedFeed] : undefined;
@@ -64,6 +73,10 @@ function WorkspaceCompanyCardsSettingsPage({
     const domainOrWorkspaceAccountID = getDomainOrWorkspaceAccountID(workspaceAccountID, selectedFeedData);
     const isPending = !!selectedFeedData?.pending;
     const isDirectFeedType = isDirectFeed(feed);
+    const isCsvFeed = isCSVUploadFeed(feed);
+    const storedMappings = selectedFeedData?.uploadLayoutSettings?.columnMappings;
+    const hadAdvancedFields = !!storedMappings && Object.keys(storedMappings).some((col) => ADVANCED_CSV_COLUMNS.has(col));
+
     const statementCloseDate = useMemo(() => {
         if (!selectedFeedData?.statementPeriodEndDay) {
             return undefined;
@@ -173,6 +186,23 @@ function WorkspaceCompanyCardsSettingsPage({
                                 }}
                             />
                         )}
+                        {isCsvFeed && (
+                            <MenuItem
+                                icon={icons.Table}
+                                title={translate('spreadsheet.importSpreadsheet')}
+                                onPress={() => {
+                                    setAddNewCompanyCardStepAndData({
+                                        data: {
+                                            layoutType: feed,
+                                            companyCardLayoutName: selectedFeedData?.customFeedName ?? feedName ?? '',
+                                            useAdvancedFields: hadAdvancedFields,
+                                            existingInstanceID: selectedFeedData?.uploadLayoutSettings?.instanceID ?? null,
+                                        },
+                                    });
+                                    Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_IMPORT_SPREADSHEET.getRoute(policyID));
+                                }}
+                            />
+                        )}
                         <MenuItem
                             icon={icons.Trashcan}
                             title={translate('workspace.moreFeatures.companyCards.removeCardFeed')}

src/pages/workspace/companyCards/addNew/CompanyCardsImportSpreadsheetPage.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import ImportSpreadsheet from '@components/ImportSpreadsheet';
+import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import {goBackFromInvalidPolicy} from '@libs/PolicyUtils';
 import type {WorkspaceSplitNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -15,7 +17,9 @@ type CompanyCardsImportSpreadsheetPageProps = PlatformStackScreenProps<Workspace
 function CompanyCardsImportSpreadsheetPage({route}: CompanyCardsImportSpreadsheetPageProps) {
     const {policyID} = route.params;
     const policy = usePolicy(policyID);
-    const backTo = ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policyID);
+    const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
+    const isEditing = !!addNewCard?.data?.layoutType;
+    const backTo = isEditing ? ROUTES.WORKSPACE_COMPANY_CARDS_SETTINGS.getRoute(policyID) : ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policyID);
     const goTo = ROUTES.WORKSPACE_COMPANY_CARDS_IMPORTED.getRoute(policyID);
 
     return (

src/pages/workspace/companyCards/addNew/CompanyCardsImportedPage.tsx

@@ -138,6 +138,7 @@ function CompanyCardsImportedPage({route}: CompanyCardsImportedPageProps) {
             existingCardsList,
             lastSelectedFeed: lastSelectedFeed ?? undefined,
             workspaceCardFeeds,
+            existingInstanceID: addNewCard?.data?.existingInstanceID,
         });
     };
 

src/types/onyx/CardFeeds.ts

@@ -123,6 +123,13 @@ type CustomCardFeedData = OnyxCommon.OnyxValueWithOfflineFeedback<{
     uploadLayoutSettings?: {
         /** User-defined name for the CSV upload layout */
         layoutName?: string;
+
+        /** Unique identifier for this CSV layout instance */
+        instanceID?: string;
+
+        /** Stored column mappings from the most recent CSV import (column name → column index) */
+        columnMappings?: Record<string, string>;
+
         [key: string]: unknown;
     };
 
@@ -305,6 +312,9 @@ type AddNewCardFeedData = {
     /** Whether to use advanced fields in the CSV layout */
     useAdvancedFields?: boolean;
 
+    /** Existing instance ID when editing a CSV feed */
+    existingInstanceID?: string;
+
     /** Plaid accounts */
     plaidAccounts?: LinkAccount[] | PlaidAccount[];
 };