Merge pull request Expensify#82179 from fedirjh/fix-duplicate-cards-OAuth-feeds

Enhance card mapping to include assigned cards for OAuth feeds

Author: carlosmiceli

src/hooks/useCompanyCards.ts

@@ -1,8 +1,9 @@
 import type {OnyxCollection, OnyxEntry, ResultMetadata} from 'react-native-onyx';
-import {getCompanyCardFeed, getCompanyFeeds, getSelectedFeed} from '@libs/CardUtils';
+import {getCompanyCardFeed, getCompanyFeeds, getSelectedFeed, normalizeCardName} from '@libs/CardUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {CardFeeds, CardList} from '@src/types/onyx';
+import type Card from '@src/types/onyx/Card';
 import type {AssignableCardsList, WorkspaceCardsList} from '@src/types/onyx/Card';
 import type {CardFeedsStatusByDomainID, CombinedCardFeeds, CompanyCardFeedWithDomainID, CompanyCardFeedWithNumber, CompanyFeeds} from '@src/types/onyx/CardFeeds';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
@@ -11,6 +12,13 @@ import type {CombinedCardFeed} from './useCardFeeds';
 import useCardsList from './useCardsList';
 import useOnyx from './useOnyx';
 
+type CompanyCardEntry = {
+    cardName: string;
+    encryptedCardNumber: string;
+    isAssigned: boolean;
+    assignedCard?: Card;
+};
+
 type UseCompanyCardsProps = {
     policyID: string | undefined;
     feedName?: CompanyCardFeedWithDomainID;
@@ -21,7 +29,7 @@ type UseCompanyCardsResult = Partial<{
     feedName: CompanyCardFeedWithDomainID;
     cardList: AssignableCardsList;
     assignedCards: CardList;
-    cardNamesToEncryptedCardNumberMapping: Record<string, string>;
+    companyCardEntries: CompanyCardEntry[];
     workspaceCardFeedsStatus: CardFeedsStatusByDomainID;
     allCardFeeds: CombinedCardFeeds;
     companyCardFeeds: CompanyFeeds;
@@ -39,6 +47,49 @@ type UseCompanyCardsResult = Partial<{
     };
 };
 
+/**
+ * Builds a list of card entries by starting from assignedCards (source of truth for assignments),
+ * then filling in remaining unassigned cards from accountList/cardList.
+ */
+function buildCompanyCardEntries(accountList: string[] | undefined, cardList: AssignableCardsList | undefined, assignedCards: CardList): CompanyCardEntry[] {
+    const entries: CompanyCardEntry[] = [];
+    const coveredNames = new Set<string>();
+    const coveredEncrypted = new Set<string>();
+
+    // Phase 1: Assigned cards first — these are the source of truth.
+    for (const card of Object.values(assignedCards)) {
+        if (!card?.cardName) {
+            continue;
+        }
+        const encryptedCardNumber = card.encryptedCardNumber ?? card.cardName;
+        entries.push({cardName: card.cardName, encryptedCardNumber, isAssigned: true, assignedCard: card});
+        coveredNames.add(normalizeCardName(card.cardName));
+        if (card.encryptedCardNumber) {
+            coveredEncrypted.add(card.encryptedCardNumber);
+        }
+    }
+
+    // Phase 2: Add remaining unassigned cards. cardList first so its encryptedCardNumber takes precedence.
+    for (const [name, encryptedCardNumber] of Object.entries(cardList ?? {})) {
+        if (coveredNames.has(normalizeCardName(name)) || coveredEncrypted.has(encryptedCardNumber)) {
+            continue;
+        }
+        entries.push({cardName: name, encryptedCardNumber, isAssigned: false});
+        coveredNames.add(normalizeCardName(name));
+        coveredEncrypted.add(encryptedCardNumber);
+    }
+
+    for (const name of accountList ?? []) {
+        if (coveredNames.has(normalizeCardName(name))) {
+            continue;
+        }
+        entries.push({cardName: name, encryptedCardNumber: name, isAssigned: false});
+        coveredNames.add(normalizeCardName(name));
+    }
+
+    return entries;
+}
+
 function useCompanyCards({policyID, feedName: feedNameProp}: UseCompanyCardsProps): UseCompanyCardsResult {
     // If an empty string is passed, we need to use an invalid key to avoid fetching the whole collection.
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -56,14 +107,7 @@ function useCompanyCards({policyID, feedName: feedNameProp}: UseCompanyCardsProp
     const selectedFeed = feedName && companyCardFeeds[feedName];
 
     const {cardList, ...assignedCards} = cardsList ?? {};
-    const cardNamesToEncryptedCardNumberMapping: Record<string, string> = {};
-
-    for (const cardName of selectedFeed?.accountList ?? []) {
-        cardNamesToEncryptedCardNumberMapping[cardName] = cardName;
-    }
-    for (const [cardName, encryptedCardNumber] of Object.entries(cardList ?? {})) {
-        cardNamesToEncryptedCardNumberMapping[cardName] = encryptedCardNumber;
-    }
+    const companyCardEntries = buildCompanyCardEntries(selectedFeed?.accountList, cardList, assignedCards);
 
     const onyxMetadata = {
         cardListMetadata,
@@ -86,7 +130,7 @@ function useCompanyCards({policyID, feedName: feedNameProp}: UseCompanyCardsProp
         companyCardFeeds,
         cardList,
         assignedCards,
-        cardNamesToEncryptedCardNumberMapping,
+        companyCardEntries,
         workspaceCardFeedsStatus,
         selectedFeed,
         bankName,
@@ -99,4 +143,4 @@ function useCompanyCards({policyID, feedName: feedNameProp}: UseCompanyCardsProp
 }
 
 export default useCompanyCards;
-export type {UseCompanyCardsResult};
+export type {CompanyCardEntry, UseCompanyCardsResult};

src/libs/CardUtils.ts

@@ -304,10 +304,13 @@ function isMatchingCard(card: Card, encryptedCardNumber: string, cardName: strin
         return false;
     }
 
-    // Normalize both strings to remove special characters (®, ™, ©, etc.)
-    // This handles differences between OAuth provider card names and stored card names
-    const normalize = (str: string) => str.replaceAll(/[^\w\s-]/g, '').trim();
-    return normalize(card.cardName) === normalize(cardName);
+    return normalizeCardName(card.cardName) === normalizeCardName(cardName);
+}
+
+// Normalize both strings to remove special characters (®, ™, ©, etc.)
+// This handles differences between OAuth provider card names and stored card names
+function normalizeCardName(cardName: string): string {
+    return cardName.replaceAll(/[^\w\s-]/g, '').trim();
 }
 
 function getMCardNumberString(cardNumber: string): string {
@@ -1205,6 +1208,7 @@ export {
     isSmartLimitEnabled,
     lastFourNumbersFromCardName,
     isMatchingCard,
+    normalizeCardName,
     hasIssuedExpensifyCard,
     isExpensifyCardFullySetUp,
     filterAllInactiveCards,

src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx

@@ -17,15 +17,14 @@ import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {resetFailedWorkspaceCompanyCardUnassignment} from '@libs/actions/CompanyCards';
-import {getDefaultCardName, getPlaidInstitutionId, isMatchingCard} from '@libs/CardUtils';
+import {getDefaultCardName, getPlaidInstitutionId} from '@libs/CardUtils';
 import tokenizedSearch from '@libs/tokenizedSearch';
 import WorkspaceCompanyCardPageEmptyState from '@pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState';
 import WorkspaceCompanyCardsFeedAddedEmptyPage from '@pages/workspace/companyCards/WorkspaceCompanyCardsFeedAddedEmptyPage';
 import WorkspaceCompanyCardsFeedPendingPage from '@pages/workspace/companyCards/WorkspaceCompanyCardsFeedPendingPage';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Card} from '@src/types/onyx';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import WorkspaceCompanyCardsTableHeaderButtons from './WorkspaceCompanyCardsTableHeaderButtons';
 import WorkspaceCompanyCardTableItem from './WorkspaceCompanyCardsTableItem';
@@ -78,7 +77,7 @@ function WorkspaceCompanyCardsTable({
         feedName,
         bankName,
         assignedCards,
-        cardNamesToEncryptedCardNumberMapping,
+        companyCardEntries,
         workspaceCardFeedsStatus,
         selectedFeed,
         isInitiallyLoadingFeeds,
@@ -113,7 +112,7 @@ function WorkspaceCompanyCardsTable({
     }
 
     const isLoadingFeed = (!feedName && isInitiallyLoadingFeeds) || !isPolicyLoaded || isLoadingOnyxValue(lastSelectedFeedMetadata) || !!selectedFeedStatus?.isLoading;
-    const isLoadingCards = Object.keys(cardNamesToEncryptedCardNumberMapping ?? {}).length === 0 ? isLoadingOnyxValue(cardListMetadata) : false;
+    const isLoadingCards = (companyCardEntries ?? []).length === 0 ? isLoadingOnyxValue(cardListMetadata) : false;
     const isLoadingPage = !isOffline && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata) || areWorkspaceCardFeedsLoading);
     const isLoading = isLoadingPage || isLoadingFeed;
 
@@ -150,23 +149,22 @@ function WorkspaceCompanyCardsTable({
 
     const cardsData: WorkspaceCompanyCardTableItemData[] = isLoadingCards
         ? []
-        : (Object.entries(cardNamesToEncryptedCardNumberMapping ?? {}).map(([cardName, encryptedCardNumber]) => {
-              const assignedCard = Object.values(assignedCards ?? {}).find((card: Card) => isMatchingCard(card, encryptedCardNumber, cardName));
+        : (companyCardEntries ?? []).map(({cardName, encryptedCardNumber, isAssigned, assignedCard}) => {
               const cardholder = assignedCard?.accountID ? personalDetails?.[assignedCard.accountID] : undefined;
 
               return {
                   cardName,
                   encryptedCardNumber,
                   customCardName: assignedCard?.cardID && customCardNames?.[assignedCard.cardID] ? customCardNames?.[assignedCard.cardID] : getDefaultCardName(cardholder?.displayName ?? ''),
                   isCardDeleted: assignedCard?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
-                  isAssigned: !!assignedCard,
+                  isAssigned,
                   assignedCard,
                   cardholder,
                   errors: assignedCard?.errors,
                   pendingAction: assignedCard?.pendingAction,
                   onDismissError: () => resetFailedWorkspaceCompanyCardUnassignment(domainOrWorkspaceAccountID, bankName, assignedCard?.cardID),
               };
-          }) ?? []);
+          });
 
     const keyExtractor = (item: WorkspaceCompanyCardTableItemData, index: number) => `${item.cardName}_${index}`;