Fix company cards endless skeleton for domain feeds

src/hooks/useCompanyCards.ts

@@ -1,6 +1,5 @@
 import type {OnyxCollection, OnyxEntry, ResultMetadata} from 'react-native-onyx';
-import type {ValueOf} from 'type-fest';
-import {getCompanyCardFeed, getCompanyFeeds, getPlaidInstitutionId, getSelectedFeed} from '@libs/CardUtils';
+import {getCompanyCardFeed, getCompanyFeeds, getSelectedFeed} from '@libs/CardUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {CardFeeds, CardList} from '@src/types/onyx';
@@ -12,21 +11,18 @@ import type {CombinedCardFeed} from './useCardFeeds';
 import useCardsList from './useCardsList';
 import useOnyx from './useOnyx';
 
-type CardFeedType = ValueOf<typeof CONST.COMPANY_CARDS.FEED_TYPE>;
-
 type UseCompanyCardsProps = {
     policyID: string | undefined;
     feedName?: CompanyCardFeedWithDomainID;
 };
 
 type UseCompanyCardsResult = Partial<{
-    cardFeedType: CardFeedType;
     bankName: CompanyCardFeed;
     feedName: CompanyCardFeedWithDomainID;
     cardList: AssignableCardsList;
     assignedCards: CardList;
+    cardNamesToEncryptedCardNumberMapping: Record<string, string>;
     workspaceCardFeedsStatus: CardFeedsStatusByDomainID;
-    cardNames: string[];
     allCardFeeds: CombinedCardFeeds;
     companyCardFeeds: CompanyFeeds;
     selectedFeed: CombinedCardFeed;
@@ -58,17 +54,16 @@ function useCompanyCards({policyID, feedName: feedNameProp}: UseCompanyCardsProp
 
     const companyCardFeeds = getCompanyFeeds(allCardFeeds);
     const selectedFeed = feedName && companyCardFeeds[feedName];
-    const isPlaidCardFeed = !!getPlaidInstitutionId(feedName);
-
-    // Direct feeds include Plaid feeds and OAuth feeds (like oauth.chase.com) that have accountList
-    const isDirectFeed = isPlaidCardFeed || !!selectedFeed?.accountList;
-    let cardFeedType: CardFeedType = 'customFeed';
-    if (isDirectFeed) {
-        cardFeedType = 'directFeed';
-    }
 
     const {cardList, ...assignedCards} = cardsList ?? {};
-    const cardNames = cardFeedType === 'directFeed' ? (selectedFeed?.accountList ?? []) : Object.keys(cardList ?? {});
+    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 onyxMetadata = {
         cardListMetadata,
@@ -79,7 +74,7 @@ function useCompanyCards({policyID, feedName: feedNameProp}: UseCompanyCardsProp
     const isInitiallyLoadingFeeds = isLoadingOnyxValue(allCardFeedsMetadata);
     const isNoFeed = !selectedFeed && !isInitiallyLoadingFeeds;
     const isFeedPending = !!selectedFeed?.pending;
-    const isFeedAdded = !isLoadingOnyxValue(allCardFeedsMetadata) && !isFeedPending && !isNoFeed;
+    const isFeedAdded = !isInitiallyLoadingFeeds && !isFeedPending && !isNoFeed;
 
     if (!policyID) {
         return {onyxMetadata, isInitiallyLoadingFeeds, isNoFeed, isFeedPending, isFeedAdded};
@@ -91,11 +86,10 @@ function useCompanyCards({policyID, feedName: feedNameProp}: UseCompanyCardsProp
         companyCardFeeds,
         cardList,
         assignedCards,
+        cardNamesToEncryptedCardNumberMapping,
         workspaceCardFeedsStatus,
-        cardNames,
         selectedFeed,
         bankName,
-        cardFeedType,
         onyxMetadata,
         isInitiallyLoadingFeeds,
         isNoFeed,

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

@@ -17,7 +17,7 @@ import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {resetFailedWorkspaceCompanyCardAssignment, resetFailedWorkspaceCompanyCardUnassignment} from '@libs/actions/CompanyCards';
-import {getDefaultCardName} 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';
@@ -77,18 +77,15 @@ function WorkspaceCompanyCardsTable({
     const {
         feedName,
         bankName,
-        cardList,
         assignedCards,
+        cardNamesToEncryptedCardNumberMapping,
         workspaceCardFeedsStatus,
-        cardNames,
-        cardFeedType,
         selectedFeed,
         isInitiallyLoadingFeeds,
         isNoFeed,
         isFeedPending,
         onyxMetadata: {cardListMetadata, lastSelectedFeedMetadata},
     } = companyCards;
-    const isDirectCardFeed = cardFeedType === 'directFeed';
 
     const [countryByIp] = useOnyx(ONYXKEYS.COUNTRY, {canBeMissing: false});
     const [personalDetails, personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
@@ -117,7 +114,7 @@ function WorkspaceCompanyCardsTable({
     }
 
     const isLoadingFeed = (!feedName && isInitiallyLoadingFeeds) || !isPolicyLoaded || isLoadingOnyxValue(lastSelectedFeedMetadata) || !!selectedFeedStatus?.isLoading;
-    const isLoadingCards = cardFeedType === 'directFeed' ? selectedFeed?.accountList === undefined : isLoadingOnyxValue(cardListMetadata) || cardList === undefined;
+    const isLoadingCards = Object.keys(cardNamesToEncryptedCardNumberMapping ?? {}).length === 0 ? isLoadingOnyxValue(cardListMetadata) : false;
     const isLoadingPage = !isOffline && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata) || areWorkspaceCardFeedsLoading);
     const isLoading = isLoadingPage || isLoadingFeed;
 
@@ -154,9 +151,7 @@ function WorkspaceCompanyCardsTable({
 
     const cardsData: WorkspaceCompanyCardTableItemData[] = isLoadingCards
         ? []
-        : (cardNames?.map((cardName) => {
-              // For direct feeds cardID equals cardName, for commercial feeds it's looked up from cardList
-              const encryptedCardNumber = isDirectCardFeed ? cardName : (cardList?.[cardName] ?? '');
+        : (Object.entries(cardNamesToEncryptedCardNumberMapping ?? {}).map(([cardName, encryptedCardNumber]) => {
               const failedCompanyCardAssignment = failedCompanyCardAssignments?.[encryptedCardNumber];
 
               if (failedCompanyCardAssignment) {
@@ -290,7 +285,7 @@ function WorkspaceCompanyCardsTable({
             item={item}
             policyID={policyID ?? String(CONST.DEFAULT_NUMBER_ID)}
             CardFeedIcon={cardFeedIcon}
-            isPlaidCardFeed={isDirectCardFeed}
+            isPlaidCardFeed={!!getPlaidInstitutionId(feedName)}
             onAssignCard={onAssignCard}
             isAssigningCardDisabled={isAssigningCardDisabled}
             shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}