From 3afbbdc1332bfd51b251494e802beaafad4a301d Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 26 Sep 2024 09:36:20 +0200
Subject: [PATCH 01/36] Implement AssignCard API call

---
 .../API/parameters/AssignCompanyCardParams.ts | 10 +++++++++
 src/libs/API/parameters/index.ts              |  1 +
 src/libs/API/types.ts                         |  2 ++
 src/libs/actions/Policy/Policy.ts             | 21 +++++++++++++++++++
 .../assignCard/AssignCardFeedPage.tsx         |  4 ++--
 .../assignCard/CardSelectionStep.tsx          | 20 +++++++++---------
 .../assignCard/ConfirmationStep.tsx           |  9 +++++++-
 src/types/onyx/AssignCard.ts                  |  6 +++---
 8 files changed, 57 insertions(+), 16 deletions(-)
 create mode 100644 src/libs/API/parameters/AssignCompanyCardParams.ts

diff --git a/src/libs/API/parameters/AssignCompanyCardParams.ts b/src/libs/API/parameters/AssignCompanyCardParams.ts
new file mode 100644
index 000000000000..6139bd5708f6
--- /dev/null
+++ b/src/libs/API/parameters/AssignCompanyCardParams.ts
@@ -0,0 +1,10 @@
+type AssignCompanyCardParams = {
+    policyID: string;
+    bankName: string;
+    encryptedCardNumber: string;
+    email: string;
+    startDate: string;
+    // reportActionID: string;
+};
+
+export default AssignCompanyCardParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
index e5cde1b77be7..32a4286f1755 100644
--- a/src/libs/API/parameters/index.ts
+++ b/src/libs/API/parameters/index.ts
@@ -321,6 +321,7 @@ export type {default as UpdateCardSettlementAccountParams} from './UpdateCardSet
 export type {default as SetCompanyCardFeedName} from './SetCompanyCardFeedName';
 export type {default as DeleteCompanyCardFeed} from './DeleteCompanyCardFeed';
 export type {default as SetCompanyCardTransactionLiability} from './SetCompanyCardTransactionLiability';
+export type {default as AssignCompanyCardParams} from './AssignCompanyCardParams';
 export type {default as UnassignCompanyCard} from './UnassignCompanyCard';
 export type {default as UpdateCompanyCard} from './UpdateCompanyCard';
 export type {default as UpdateCompanyCardNameParams} from './UpdateCompanyCardNameParams';
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index 8e35a0cb1984..9a2da64c115c 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -402,6 +402,7 @@ const WRITE_COMMANDS = {
     SET_COMPANY_CARD_FEED_NAME: 'SetFeedName',
     DELETE_COMPANY_CARD_FEED: 'RemoveFeed',
     SET_COMPANY_CARD_TRANSACTION_LIABILITY: 'SetFeedTransactionLiability',
+    ASSIGN_COMPANY_CARD: 'AssignCard',
     UNASSIGN_COMPANY_CARD: 'UnassignCard',
     UPDATE_COMPANY_CARD: 'SyncCard',
     UPDATE_COMPANY_CARD_NAME: 'SetCardName',
@@ -466,6 +467,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.UPDATE_PERSONAL_DETAILS_FOR_WALLET]: Parameters.UpdatePersonalDetailsForWalletParams;
     [WRITE_COMMANDS.SET_COMPANY_CARD_FEED_NAME]: Parameters.SetCompanyCardFeedName;
     [WRITE_COMMANDS.DELETE_COMPANY_CARD_FEED]: Parameters.DeleteCompanyCardFeed;
+    [WRITE_COMMANDS.ASSIGN_COMPANY_CARD]: Parameters.AssignCompanyCardParams;
     [WRITE_COMMANDS.UNASSIGN_COMPANY_CARD]: Parameters.UnassignCompanyCard;
     [WRITE_COMMANDS.UPDATE_COMPANY_CARD]: Parameters.UpdateCompanyCard;
     [WRITE_COMMANDS.UPDATE_COMPANY_CARD_NAME]: Parameters.UpdateCompanyCardNameParams;
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 2123f2a47764..e1f0d1b8b045 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -8,6 +8,7 @@ import type {ReportExportType} from '@components/ButtonWithDropdownMenu/types';
 import * as API from '@libs/API';
 import type {
     AddBillingCardAndRequestWorkspaceOwnerChangeParams,
+    AssignCompanyCardParams,
     CreateWorkspaceFromIOUPaymentParams,
     CreateWorkspaceParams,
     DeleteWorkspaceAvatarParams,
@@ -88,6 +89,7 @@ import type {
     TaxRatesWithDefault,
     Transaction,
 } from '@src/types/onyx';
+import type {AssignCardData} from '@src/types/onyx/AssignCard';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type {Attributes, CompanyAddress, CustomUnit, NetSuiteCustomList, NetSuiteCustomSegment, Rate, TaxRate} from '@src/types/onyx/Policy';
 import type {OnyxData} from '@src/types/onyx/Request';
@@ -4540,6 +4542,24 @@ function deleteWorkspaceCompanyCardFeed(policyID: string, workspaceAccountID: nu
     API.write(WRITE_COMMANDS.DELETE_COMPANY_CARD_FEED, parameters, onyxData);
 }
 
+function assignWorkspaceCompanyCard(policyID: string, data?: Partial<AssignCardData>) {
+    if (!data) {
+        return;
+    }
+    const {bankName = '', email = '', encryptedCardNumber = '', startDate = ''} = data;
+
+    const parameters: AssignCompanyCardParams = {
+        policyID,
+        bankName,
+        encryptedCardNumber,
+        email,
+        startDate,
+        // reportActionID,
+    };
+
+    API.write(WRITE_COMMANDS.ASSIGN_COMPANY_CARD, parameters);
+}
+
 function unassignWorkspaceCompanyCard(workspaceAccountID: number, cardID: string, bankName: string) {
     const authToken = NetworkStore.getAuthToken();
 
@@ -4879,6 +4899,7 @@ export {
     deleteWorkspaceCompanyCardFeed,
     setWorkspaceCompanyCardTransactionLiability,
     openPolicyCompanyCardsPage,
+    assignWorkspaceCompanyCard,
     unassignWorkspaceCompanyCard,
     updateWorkspaceCompanyCard,
     updateCompanyCardName,
diff --git a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
index 66ceaaf914c4..03e9d58a71ab 100644
--- a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
+++ b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
@@ -25,7 +25,7 @@ function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
     const feed = route.params?.feed;
 
     useEffect(() => {
-        CompanyCards.setAssignCardStepAndData({data: {feed}});
+        CompanyCards.setAssignCardStepAndData({data: {bankName: feed}});
     }, [feed]);
 
     switch (currentStep) {
@@ -36,7 +36,7 @@ function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
         case CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE:
             return <TransactionStartDateStep />;
         case CONST.COMPANY_CARD.STEP.CONFIRMATION:
-            return <ConfirmationStep />;
+            return <ConfirmationStep policyID={policy?.id ?? '-1'} />;
         default:
             return <AssigneeStep policy={policy} />;
     }
diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
index b31780d54fa2..5947d382029f 100644
--- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
@@ -23,21 +23,21 @@ import ROUTES from '@src/ROUTES';
 
 type MockedCard = {
     key: string;
-    cardNumber: string;
+    encryptedCardNumber: string;
 };
 
 const mockedCardList = [
     {
         key: '1',
-        cardNumber: '123412XXXXXX1234',
+        encryptedCardNumber: '123412XXXXXX1234',
     },
     {
         key: '2',
-        cardNumber: '123412XXXXXX1235',
+        encryptedCardNumber: '123412XXXXXX1235',
     },
     {
         key: '3',
-        cardNumber: '123412XXXXXX1236',
+        encryptedCardNumber: '123412XXXXXX1236',
     },
 ];
 
@@ -62,7 +62,7 @@ function CardSelectionStep({feed}: CardSelectionStepProps) {
     const isEditing = assignCard?.isEditing;
     const assignee = assignCard?.data?.email ?? '';
 
-    const [cardSelected, setCardSelected] = useState(assignCard?.data?.cardName ?? '');
+    const [cardSelected, setCardSelected] = useState(assignCard?.data?.encryptedCardNumber ?? '');
     const [shouldShowError, setShouldShowError] = useState(false);
 
     const handleBackButtonPress = () => {
@@ -88,7 +88,7 @@ function CardSelectionStep({feed}: CardSelectionStepProps) {
         }
         CompanyCards.setAssignCardStepAndData({
             currentStep: isEditing ? CONST.COMPANY_CARD.STEP.CONFIRMATION : CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE,
-            data: {cardName: cardSelected},
+            data: {encryptedCardNumber: cardSelected},
             isEditing: false,
         });
     };
@@ -97,10 +97,10 @@ function CardSelectionStep({feed}: CardSelectionStepProps) {
     const mockedCards = !Object.values(CONST.COMPANY_CARD.FEED_BANK_NAME).some((value) => value === feed) ? mockedCardListEmpty : mockedCardList;
 
     const cardListOptions = mockedCards.map((item) => ({
-        keyForList: item?.cardNumber,
-        value: item?.cardNumber,
-        text: item?.cardNumber,
-        isSelected: cardSelected === item?.cardNumber,
+        keyForList: item?.encryptedCardNumber,
+        value: item?.encryptedCardNumber,
+        text: item?.encryptedCardNumber,
+        isSelected: cardSelected === item?.encryptedCardNumber,
         leftElement: (
             <Icon
                 src={CardUtils.getCardFeedIcon(feed)}
diff --git a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
index 5eb39719c022..479529b7e906 100644
--- a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
@@ -10,6 +10,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useSafePaddingBottomStyle from '@hooks/useSafePaddingBottomStyle';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as Policy from '@libs/actions/Policy/Policy';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import Navigation from '@navigation/Navigation';
 import * as CompanyCards from '@userActions/CompanyCards';
@@ -17,7 +18,12 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {AssignCardStep} from '@src/types/onyx/AssignCard';
 
-function ConfirmationStep() {
+type ConfirmationStepProps = {
+    /** Current policy id */
+    policyID: string;
+};
+
+function ConfirmationStep({policyID}: ConfirmationStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
@@ -28,6 +34,7 @@ function ConfirmationStep() {
     const data = assignCard?.data;
 
     const submit = () => {
+        Policy.assignWorkspaceCompanyCard(policyID, data);
         Navigation.goBack();
         CompanyCards.clearAssignCardStepAndData();
     };
diff --git a/src/types/onyx/AssignCard.ts b/src/types/onyx/AssignCard.ts
index 0b2592d15079..690900fe5f74 100644
--- a/src/types/onyx/AssignCard.ts
+++ b/src/types/onyx/AssignCard.ts
@@ -6,14 +6,14 @@ type AssignCardStep = ValueOf<typeof CONST.COMPANY_CARD.STEP>;
 
 /** Data required to be sent to issue a new card */
 type AssignCardData = {
-    /** The email address of the asignee */
+    /** The email address of the assignee */
     email: string;
 
     /** Number of the selected card */
-    cardNumber: string;
+    encryptedCardNumber: string;
 
     /** The name of the feed */
-    feed: string;
+    bankName: string;
 
     /** The name of the card */
     cardName: string;

From 8cea638bc766e0f362d1bbc31be1918860099e25 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 26 Sep 2024 10:09:23 +0200
Subject: [PATCH 02/36] Resolve TODO

---
 .../companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index b71f6583e25a..aeb75603ce20 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -57,8 +57,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                 <Button
                     success
                     isDisabled={cardFeeds?.companyCards?.[selectedFeed].pending ?? false}
-                    // TODO: navigate to Assign card flow when it's implemented
-                    onPress={() => {}}
+                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD.getRoute(policyID, selectedFeed))}
                     icon={Expensicons.Plus}
                     text={translate('workspace.companyCards.assignCard')}
                     style={shouldChangeLayout && styles.flex1}

From 8ed44786cfa28e55bc3e49d57fee3cb62c33ec42 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 30 Sep 2024 11:42:29 +0200
Subject: [PATCH 03/36] Resolve TODOs

---
 src/libs/CardUtils.ts                         |   8 +-
 .../WorkspaceCompanyCardFeedSelectorPage.tsx  |  32 +-----
 .../WorkspaceCompanyCardsPage.tsx             | 102 +-----------------
 ...kspaceCompanyCardsSettingsFeedNamePage.tsx |   9 +-
 .../WorkspaceCompanyCardsSettingsPage.tsx     |  14 +--
 .../members/WorkspaceMemberNewCardPage.tsx    |  28 +----
 6 files changed, 33 insertions(+), 160 deletions(-)

diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 07ed431a0bc0..f5bd8397937f 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -7,7 +7,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {BankAccountList, Card, CardList, PersonalDetailsList, WorkspaceCardsList} from '@src/types/onyx';
+import type {BankAccountList, Card, CardFeeds, CardList, PersonalDetailsList, WorkspaceCardsList} from '@src/types/onyx';
 import type Policy from '@src/types/onyx/Policy';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -227,6 +227,11 @@ function getMemberCards(policy: OnyxEntry<Policy>, allCardsList: OnyxCollection<
     return cards;
 }
 
+function getSelectedFeed(lastSelectedFeed: OnyxEntry<string>, cardFeeds: OnyxEntry<CardFeeds>): string {
+    const defaultFeed = Object.keys(cardFeeds?.companyCards ?? {}).at(0);
+    return lastSelectedFeed ?? defaultFeed ?? '';
+}
+
 export {
     isExpensifyCard,
     isCorporateCard,
@@ -245,4 +250,5 @@ export {
     getCardFeedIcon,
     getCardDetailsImage,
     getMemberCards,
+    getSelectedFeed,
 };
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
index b1876c17efd5..435711a12be9 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
@@ -13,6 +13,7 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import * as PolicyUtils from '@libs/PolicyUtils';
 import Navigation from '@navigation/Navigation';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import variables from '@styles/variables';
@@ -21,44 +22,23 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {CardFeeds} from '@src/types/onyx';
 
 type CardFeedListItem = ListItem & {
     /** Card feed value */
     value: string;
 };
 
-const mockedData: CardFeeds = {
-    companyCards: {
-        cdfbmo: {
-            pending: false,
-            asrEnabled: true,
-            forceReimbursable: 'force_no',
-            liabilityType: 'corporate',
-            preferredPolicy: '',
-            reportTitleFormat: '{report:card}{report:bank}{report:submit:from}{report:total}{report:enddate:MMMM}',
-            statementPeriodEndDay: 'LAST_DAY_OF_MONTH',
-        },
-    },
-    companyCardNicknames: {
-        cdfbmo: 'BMO MasterCard',
-    },
-};
-
 type WorkspaceCompanyCardFeedSelectorPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_SELECT_FEED>;
 
 function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedSelectorPageProps) {
     const {policyID} = route.params;
+    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
 
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    // TODO: use data form onyx instead of mocked one when API is implemented
-    // const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
-
-    const cardFeeds = mockedData;
-    const defaultFeed = Object.keys(cardFeeds?.companyCards ?? {})[0];
-    const selectedFeed = lastSelectedFeed ?? defaultFeed;
+    const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
 
     const feeds: CardFeedListItem[] = Object.entries(cardFeeds?.companyCardNicknames ?? {}).map(([key, value]) => ({
         value: key,
@@ -107,9 +87,7 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
                         <MenuItem
                             title={translate('workspace.companyCards.addCompanyCards')}
                             icon={Expensicons.Plus}
-                            onPress={() => {
-                                // TODO: navigate to Add Feed flow when it's implemented
-                            }}
+                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policyID))}
                         />
                     }
                 />
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index fe03b2a241dd..70a127e8de74 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -7,6 +7,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as CardUtils from '@libs/CardUtils';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
@@ -15,103 +16,12 @@ import * as Policy from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
-import type {WorkspaceCardsList} from '@src/types/onyx';
 import WorkspaceCompanyCardPageEmptyState from './WorkspaceCompanyCardPageEmptyState';
 import WorkspaceCompanyCardsFeedAddedEmptyPage from './WorkspaceCompanyCardsFeedAddedEmptyPage';
 import WorkspaceCompanyCardsFeedPendingPage from './WorkspaceCompanyCardsFeedPendingPage';
 import WorkspaceCompanyCardsList from './WorkspaceCompanyCardsList';
 import WorkspaceCompanyCardsListHeaderButtons from './WorkspaceCompanyCardsListHeaderButtons';
 
-const mockedCards = {
-    id1: {
-        cardID: 885646,
-        accountID: 11309072,
-        bank: 'cdfbmo',
-        nameValuePairs: {
-            cardTitle: 'Test 1',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-    id2: {
-        accountID: 885646,
-        bank: 'cdfbmo',
-        cardID: 885642,
-        nameValuePairs: {
-            cardTitle: 'Test 2',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-    id18: {
-        accountID: 885646,
-        cardID: 885643,
-        nameValuePairs: {
-            cardTitle: 'Test 1',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-    id27: {
-        cardID: 885644,
-        accountID: 885646,
-        bank: 'cdfbmo',
-        nameValuePairs: {
-            cardTitle: 'Test 2',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-    id16: {
-        cardID: 885645,
-        accountID: 885646,
-        bank: 'cdfbmo',
-        nameValuePairs: {
-            cardTitle: 'Test 1',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-    id25: {
-        cardID: 885646,
-        accountID: 885646,
-        nameValuePairs: {
-            cardTitle: 'Test 2',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-    id14: {
-        cardID: 885647,
-        accountID: 885646,
-        bank: 'cdfbmo',
-        nameValuePairs: {
-            cardTitle: 'Test 1',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-    id23: {
-        cardID: 885648,
-        accountID: 885646,
-        bank: 'cdfbmo',
-        nameValuePairs: {
-            cardTitle: 'Test 2',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-    id12: {
-        cardID: 885649,
-        accountID: 885646,
-        nameValuePairs: {
-            cardTitle: 'Test 1',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-    id21: {
-        cardID: 885640,
-        accountID: 885646,
-        bank: 'cdfbmo',
-        nameValuePairs: {
-            cardTitle: 'Test 2',
-        },
-        cardNumber: '1234 56XX XXXX 1222',
-    },
-} as unknown as WorkspaceCardsList;
-
 type WorkspaceCompanyCardPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS>;
 
 function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
@@ -122,8 +32,10 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
-    const defaultFeed = Object.keys(cardFeeds?.companyCards ?? {})[0];
-    const selectedFeed = lastSelectedFeed ?? defaultFeed;
+    const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
+
+    const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${selectedFeed}`);
+
     const fetchCompanyCards = useCallback(() => {
         Policy.openPolicyCompanyCardsPage(policyID, workspaceAccountID);
     }, [policyID, workspaceAccountID]);
@@ -137,10 +49,6 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const isFeedAdded = !isPending && !isNoFeed;
     const isLoading = !cardFeeds || cardFeeds.isLoading;
 
-    // TODO: use data form onyx instead of mocked one when API is implemented
-    // const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${selectedFeed}`);
-    const cardsList = mockedCards ?? {};
-
     return (
         <AccessOrNotFoundWrapper
             policyID={route.params.policyID}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
index bacc82331331..7b4b62c61acf 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
@@ -14,6 +14,7 @@ import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Policy from '@libs/actions/Policy/Policy';
+import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -37,10 +38,10 @@ function WorkspaceCompanyCardsSettingsFeedNamePage({
     const {inputCallbackRef} = useAutoFocusInput();
     const policy = usePolicy(policyID);
     const workspaceAccountID = policy?.workspaceAccountID ?? -1;
-    // const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`)
+    const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
-    const lastSelectedFeed = 'cdfbmo';
-    const feedName = cardFeeds?.companyCardNicknames?.[lastSelectedFeed] ?? '';
+    const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
+    const feedName = cardFeeds?.companyCardNicknames?.[selectedFeed] ?? '';
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_COMPANY_CARD_FEED_NAME>) => {
@@ -57,7 +58,7 @@ function WorkspaceCompanyCardsSettingsFeedNamePage({
     );
 
     const submit = ({name}: WorkspaceCompanyCardFeedName) => {
-        Policy.setWorkspaceCompanyCardFeedName(policyID, workspaceAccountID, lastSelectedFeed, name);
+        Policy.setWorkspaceCompanyCardFeedName(policyID, workspaceAccountID, selectedFeed, name);
         Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARDS_SETTINGS.getRoute(policyID));
     };
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
index 42f89c44ee8b..2b1f53a1e454 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
@@ -14,6 +14,7 @@ import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Policy from '@libs/actions/Policy/Policy';
+import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
@@ -36,12 +37,11 @@ function WorkspaceCompanyCardsSettingsPage({
     const workspaceAccountID = policy?.workspaceAccountID ?? -1;
     const [deleteCompanyCardConfirmModalVisible, setDeleteCompanyCardConfirmModalVisible] = useState(false);
 
-    // TODO: use data form onyx instead of mocked one when API is implemented
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
-    // const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
-    const lastSelectedFeed = 'cdfbmo';
-    const feedName = cardFeeds?.companyCardNicknames?.[lastSelectedFeed] ?? '';
-    const liabilityType = cardFeeds?.companyCards?.[lastSelectedFeed]?.liabilityType;
+    const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
+    const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
+    const feedName = cardFeeds?.companyCardNicknames?.[selectedFeed] ?? '';
+    const liabilityType = cardFeeds?.companyCards?.[selectedFeed]?.liabilityType;
     const isPersonal = liabilityType === CONST.COMPANY_CARDS.DELETE_TRANSACTIONS.ALLOW;
 
     const navigateToChangeFeedName = () => {
@@ -49,7 +49,7 @@ function WorkspaceCompanyCardsSettingsPage({
     };
 
     const deleteCompanyCardFeed = () => {
-        Policy.deleteWorkspaceCompanyCardFeed(policyID, workspaceAccountID, lastSelectedFeed);
+        Policy.deleteWorkspaceCompanyCardFeed(policyID, workspaceAccountID, selectedFeed);
         setDeleteCompanyCardConfirmModalVisible(false);
         Navigation.setNavigationActionToMicrotaskQueue(Navigation.goBack);
     };
@@ -57,7 +57,7 @@ function WorkspaceCompanyCardsSettingsPage({
     const onToggleLiability = (isOn: boolean) => {
         Policy.setWorkspaceCompanyCardTransactionLiability(
             workspaceAccountID,
-            lastSelectedFeed,
+            selectedFeed,
             isOn ? CONST.COMPANY_CARDS.DELETE_TRANSACTIONS.ALLOW : CONST.COMPANY_CARDS.DELETE_TRANSACTIONS.RESTRICT,
         );
     };
diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
index 1b824811d012..e0a9657cf710 100644
--- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
@@ -1,5 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useState} from 'react';
+import {useOnyx} from 'react-native-onyx';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -21,48 +22,27 @@ import variables from '@styles/variables';
 import * as Card from '@userActions/Card';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {CardFeeds} from '@src/types/onyx';
 
 type CardFeedListItem = ListItem & {
     /** Card feed value */
     value: string;
 };
 
-const mockedData: CardFeeds = {
-    companyCards: {
-        cdfbmo: {
-            pending: false,
-            asrEnabled: true,
-            forceReimbursable: 'force_no',
-            liabilityType: 'corporate',
-            preferredPolicy: '',
-            reportTitleFormat: '{report:card}{report:bank}{report:submit:from}{report:total}{report:enddate:MMMM}',
-            statementPeriodEndDay: 'LAST_DAY_OF_MONTH',
-        },
-    },
-    companyCardNicknames: {
-        cdfbmo: 'BMO MasterCard',
-        vcf: 'Visa Corporate Card',
-        gl1025: 'Corporate Amex',
-    },
-};
-
 type WorkspaceMemberNewCardPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBER_NEW_CARD>;
 
 function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNewCardPageProps) {
     const {policyID} = route.params;
+    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
 
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    // TODO: use data form onyx instead of mocked one when API is implemented
-    // const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
-    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [selectedFeed, setSelectedFeed] = useState('');
     const [shouldShowError, setShouldShowError] = useState(false);
 
-    const cardFeeds = mockedData;
     const accountID = Number(route.params.accountID);
     const memberLogin = personalDetails?.[accountID]?.login ?? '';
 

From b1dc48361e5d85d438c761e33bbc73bc617e28ba Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 30 Sep 2024 12:35:43 +0200
Subject: [PATCH 04/36] Support CARDASSIGNED report action display

---
 src/CONST.ts                               |  1 +
 src/languages/en.ts                        |  3 ++-
 src/languages/es.ts                        |  3 ++-
 src/libs/ReportActionsUtils.ts             | 17 ++++++++++++++---
 src/pages/home/report/ReportActionItem.tsx |  8 +++++++-
 src/types/onyx/OriginalMessage.ts          | 16 ++++++++++------
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 33eae01ed9c8..aed1aab34b7c 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -793,6 +793,7 @@ const CONST = {
                 CARD_MISSING_ADDRESS: 'CARDMISSINGADDRESS',
                 CARD_ISSUED: 'CARDISSUED',
                 CARD_ISSUED_VIRTUAL: 'CARDISSUEDVIRTUAL',
+                CARD_ASSIGNED: 'CARDASSIGNED',
                 CHANGE_FIELD: 'CHANGEFIELD', // OldDot Action
                 CHANGE_POLICY: 'CHANGEPOLICY', // OldDot Action
                 CHANGE_TYPE: 'CHANGETYPE', // OldDot Action
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7844d12e764a..4843225eb48b 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2880,7 +2880,8 @@ export default {
             card: 'Card',
             startTransactionDate: 'Start transaction date',
             cardName: 'Card name',
-            assignedYouCard: (assigner: string) => `${assigner} assigned you a company card! Imported transactions will appear in this chat.`,
+            assignedYouCard: (link) => `assigned you a ${link}! Imported transactions will appear in this chat.`,
+            companyCard: 'company card',
             chooseCardFeed: 'Choose card feed',
         },
         expensifyCard: {
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 362fe5575dd0..203a227d4084 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2925,7 +2925,8 @@ export default {
             card: 'Tarjeta',
             startTransactionDate: 'Fecha de inicio de transacciones',
             cardName: 'Nombre de la tarjeta',
-            assignedYouCard: (assigner: string) => `¡${assigner} te ha asignado una tarjeta de empresa! Las transacciones importadas aparecerán en este chat.`,
+            assignedYouCard: (link: string) => `te ha asignado una ${link}! Las transacciones importadas aparecerán en este chat.`,
+            companyCard: 'tarjeta de empresa',
             chooseCardFeed: 'Elige feed de tarjetas',
         },
         expensifyCard: {
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index f584f694edd0..39664eedcbb4 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -1694,7 +1694,13 @@ function getRemovedFromApprovalChainMessage(reportAction: OnyxEntry<ReportAction
 }
 
 function isCardIssuedAction(reportAction: OnyxEntry<ReportAction>) {
-    return isActionOfType(reportAction, CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED, CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL, CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS);
+    return isActionOfType(
+        reportAction,
+        CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED,
+        CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL,
+        CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS,
+        CONST.REPORT.ACTIONS.TYPE.CARD_ASSIGNED,
+    );
 }
 
 function getCardIssuedMessage(reportAction: OnyxEntry<ReportAction>, shouldRenderHTML = false) {
@@ -1702,9 +1708,12 @@ function getCardIssuedMessage(reportAction: OnyxEntry<ReportAction>, shouldRende
     const assigneeDetails = PersonalDetailsUtils.getPersonalDetailsByIDs([assigneeAccountID], currentUserAccountID ?? -1)[0];
 
     const assignee = shouldRenderHTML ? `<mention-user accountID="${assigneeAccountID}"/>` : assigneeDetails?.firstName ?? assigneeDetails.login ?? '';
-    const link = shouldRenderHTML
+    const expensifyCardLink = shouldRenderHTML
         ? `<a href='${environmentURL}/${ROUTES.SETTINGS_WALLET}'>${Localize.translateLocal('cardPage.expensifyCard')}</a>`
         : Localize.translateLocal('cardPage.expensifyCard');
+    const companyCardLink = shouldRenderHTML
+        ? `<a href='${environmentURL}/${ROUTES.SETTINGS_WALLET}'>${Localize.translateLocal('workspace.companyCards.companyCard')}</a>`
+        : Localize.translateLocal('workspace.companyCards.companyCard');
 
     const missingDetails =
         !privatePersonalDetails?.legalFirstName ||
@@ -1721,7 +1730,9 @@ function getCardIssuedMessage(reportAction: OnyxEntry<ReportAction>, shouldRende
         case CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED:
             return Localize.translateLocal('workspace.expensifyCard.issuedCard', assignee);
         case CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL:
-            return Localize.translateLocal('workspace.expensifyCard.issuedCardVirtual', {assignee, link});
+            return Localize.translateLocal('workspace.expensifyCard.issuedCardVirtual', {assignee, link: expensifyCardLink});
+        case CONST.REPORT.ACTIONS.TYPE.CARD_ASSIGNED:
+            return Localize.translateLocal('workspace.companyCards.assignedYouCard', companyCardLink);
         case CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS:
             return Localize.translateLocal(`workspace.expensifyCard.${shouldShowAddMissingDetailsButton ? 'issuedCardNoShippingDetails' : 'addedShippingDetails'}`, assignee);
         default:
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 99d25e2b4023..73a3b15dac54 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -658,7 +658,13 @@ function ReportActionItem({
         } else if (ReportActionsUtils.isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.REMOVED_FROM_APPROVAL_CHAIN)) {
             children = <ReportActionItemBasicMessage message={ReportActionsUtils.getRemovedFromApprovalChainMessage(action)} />;
         } else if (
-            ReportActionsUtils.isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED, CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL, CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS)
+            ReportActionsUtils.isActionOfType(
+                action,
+                CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED,
+                CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL,
+                CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS,
+                CONST.REPORT.ACTIONS.TYPE.CARD_ASSIGNED,
+            )
         ) {
             children = (
                 <IssueCardMessage
diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index c330d009a43d..920e302dbb35 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -525,16 +525,19 @@ type OriginalMessageIntegrationSyncFailed = {
 /**
  * Model of CARD_ISSUED, CARD_MISSING_ADDRESS, and CARD_ISSUED_VIRTUAL actions
  */
-type OriginalMessageExpensifyCard = {
+type OriginalMessageCard = {
     /** The id of the user the card was assigned to */
     assigneeAccountID: number;
 };
 
 /**
- * Original message for CARD_ISSUED, CARD_MISSING_ADDRESS, and CARD_ISSUED_VIRTUAL actions
+ * Original message for CARD_ISSUED, CARD_MISSING_ADDRESS, CARD_ASSIGNED and CARD_ISSUED_VIRTUAL actions
  */
 type IssueNewCardOriginalMessage = OriginalMessage<
-    typeof CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS | typeof CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED | typeof CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL
+    | typeof CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS
+    | typeof CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED
+    | typeof CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL
+    | typeof CONST.REPORT.ACTIONS.TYPE.CARD_ASSIGNED
 >;
 
 /** The map type of original message */
@@ -602,9 +605,10 @@ type OriginalMessageMap = {
     [CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_REQUESTED]: never;
     [CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_SETUP]: never;
     [CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_SETUP_REQUESTED]: never;
-    [CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED]: OriginalMessageExpensifyCard;
-    [CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS]: OriginalMessageExpensifyCard;
-    [CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL]: OriginalMessageExpensifyCard;
+    [CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED]: OriginalMessageCard;
+    [CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS]: OriginalMessageCard;
+    [CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL]: OriginalMessageCard;
+    [CONST.REPORT.ACTIONS.TYPE.CARD_ASSIGNED]: OriginalMessageCard;
     [CONST.REPORT.ACTIONS.TYPE.INTEGRATION_SYNC_FAILED]: OriginalMessageIntegrationSyncFailed;
 } & OldDotOriginalMessageMap & {
         [T in ValueOf<typeof CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG>]: OriginalMessageChangeLog;

From 252a900fd8742682f3b76be30aa166381a4435fc Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 30 Sep 2024 13:54:48 +0200
Subject: [PATCH 05/36] Build optimistic CARDASSIGNED report action

---
 .../API/parameters/AssignCompanyCardParams.ts |  2 +-
 src/libs/ReportUtils.ts                       | 26 +++++++++++++++++++
 src/libs/actions/Policy/Policy.ts             |  4 ++-
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/libs/API/parameters/AssignCompanyCardParams.ts b/src/libs/API/parameters/AssignCompanyCardParams.ts
index 6139bd5708f6..c4dcd7c628a0 100644
--- a/src/libs/API/parameters/AssignCompanyCardParams.ts
+++ b/src/libs/API/parameters/AssignCompanyCardParams.ts
@@ -4,7 +4,7 @@ type AssignCompanyCardParams = {
     encryptedCardNumber: string;
     email: string;
     startDate: string;
-    // reportActionID: string;
+    reportActionID: string;
 };
 
 export default AssignCompanyCardParams;
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index f4391a1171ac..fb0d94bb1d82 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -241,6 +241,11 @@ type OptimisticClosedReportAction = Pick<
     'actionName' | 'actorAccountID' | 'automatic' | 'avatar' | 'created' | 'message' | 'originalMessage' | 'pendingAction' | 'person' | 'reportActionID' | 'shouldShow'
 >;
 
+type OptimisticCardAssignedReportAction = Pick<
+    ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.CARD_ASSIGNED>,
+    'actionName' | 'actorAccountID' | 'automatic' | 'avatar' | 'created' | 'message' | 'originalMessage' | 'pendingAction' | 'person' | 'reportActionID' | 'shouldShow'
+>;
+
 type OptimisticDismissedViolationReportAction = Pick<
     ReportAction,
     'actionName' | 'actorAccountID' | 'avatar' | 'created' | 'message' | 'originalMessage' | 'person' | 'reportActionID' | 'shouldShow' | 'pendingAction'
@@ -5401,6 +5406,26 @@ function buildOptimisticEditedTaskFieldReportAction({title, description}: Task):
     };
 }
 
+function buildOptimisticCardAssignedReportAction(assigneeAccountID: number): OptimisticCardAssignedReportAction {
+    return {
+        actionName: CONST.REPORT.ACTIONS.TYPE.CARD_ASSIGNED,
+        actorAccountID: currentUserAccountID,
+        avatar: getCurrentUserAvatar(),
+        created: DateUtils.getDBTime(),
+        originalMessage: {assigneeAccountID},
+        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+        person: [
+            {
+                type: CONST.REPORT.MESSAGE.TYPE.TEXT,
+                style: 'strong',
+                text: getCurrentUserDisplayNameOrEmail(),
+            },
+        ],
+        reportActionID: NumberUtils.rand64(),
+        shouldShow: true,
+    };
+}
+
 function buildOptimisticChangedTaskAssigneeReportAction(assigneeAccountID: number): OptimisticEditedTaskReportAction {
     return {
         reportActionID: NumberUtils.rand64(),
@@ -7848,6 +7873,7 @@ export {
     buildOptimisticTaskReportAction,
     buildOptimisticUnHoldReportAction,
     buildOptimisticWorkspaceChats,
+    buildOptimisticCardAssignedReportAction,
     buildParticipantsFromAccountIDs,
     buildTransactionThread,
     canAccessReport,
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index e1f0d1b8b045..f36be40dacc0 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -4547,6 +4547,8 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial<AssignCardD
         return;
     }
     const {bankName = '', email = '', encryptedCardNumber = '', startDate = ''} = data;
+    const assigneeDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
+    const optimisticCardAssignedReportAction = ReportUtils.buildOptimisticCardAssignedReportAction(assigneeDetails?.accountID ?? -1);
 
     const parameters: AssignCompanyCardParams = {
         policyID,
@@ -4554,7 +4556,7 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial<AssignCardD
         encryptedCardNumber,
         email,
         startDate,
-        // reportActionID,
+        reportActionID: optimisticCardAssignedReportAction.reportActionID,
     };
 
     API.write(WRITE_COMMANDS.ASSIGN_COMPANY_CARD, parameters);

From 1e96e1b3def3eea3ea0e15dbd85bdb04863da7f2 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 30 Sep 2024 14:59:03 +0200
Subject: [PATCH 06/36] Add RequestFeedSetup API call

---
 src/libs/API/parameters/RequestFeedSetupParams.ts |  6 ++++++
 src/libs/API/parameters/index.ts                  |  1 +
 src/libs/API/types.ts                             |  2 ++
 src/libs/actions/Policy/Policy.ts                 |  8 ++++++++
 .../companyCards/addNew/AddNewCardPage.tsx        |  7 +++++--
 .../workspace/companyCards/addNew/DetailsStep.tsx | 15 +++++++++++++--
 6 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 src/libs/API/parameters/RequestFeedSetupParams.ts

diff --git a/src/libs/API/parameters/RequestFeedSetupParams.ts b/src/libs/API/parameters/RequestFeedSetupParams.ts
new file mode 100644
index 000000000000..53f81301fcf3
--- /dev/null
+++ b/src/libs/API/parameters/RequestFeedSetupParams.ts
@@ -0,0 +1,6 @@
+type RequestFeedSetupParams = {
+    // bankName: string;
+    // feedDetails: string;
+};
+
+export default RequestFeedSetupParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
index 32a4286f1755..12a5d62c41a5 100644
--- a/src/libs/API/parameters/index.ts
+++ b/src/libs/API/parameters/index.ts
@@ -326,4 +326,5 @@ export type {default as UnassignCompanyCard} from './UnassignCompanyCard';
 export type {default as UpdateCompanyCard} from './UpdateCompanyCard';
 export type {default as UpdateCompanyCardNameParams} from './UpdateCompanyCardNameParams';
 export type {default as SetCompanyCardExportAccountParams} from './SetCompanyCardExportAccountParams';
+export type {default as RequestFeedSetupParams} from './RequestFeedSetupParams';
 export type {default as SetMissingPersonalDetailsAndShipExpensifyCardParams} from './SetMissingPersonalDetailsAndShipExpensifyCardParams';
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index 9a2da64c115c..8be65f586980 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -399,6 +399,7 @@ const WRITE_COMMANDS = {
     UPDATE_XERO_SYNC_INVOICE_COLLECTIONS_ACCOUNT_ID: 'UpdateXeroSyncInvoiceCollectionsAccountID',
     UPDATE_XERO_SYNC_SYNC_REIMBURSED_REPORTS: 'UpdateXeroSyncSyncReimbursedReports',
     UPDATE_XERO_SYNC_REIMBURSEMENT_ACCOUNT_ID: 'UpdateXeroSyncReimbursementAccountID',
+    REQUEST_FEED_SETUP: 'RequestFeedSetup',
     SET_COMPANY_CARD_FEED_NAME: 'SetFeedName',
     DELETE_COMPANY_CARD_FEED: 'RemoveFeed',
     SET_COMPANY_CARD_TRANSACTION_LIABILITY: 'SetFeedTransactionLiability',
@@ -465,6 +466,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.UPDATE_STATUS]: Parameters.UpdateStatusParams;
     [WRITE_COMMANDS.CLEAR_STATUS]: null;
     [WRITE_COMMANDS.UPDATE_PERSONAL_DETAILS_FOR_WALLET]: Parameters.UpdatePersonalDetailsForWalletParams;
+    [WRITE_COMMANDS.REQUEST_FEED_SETUP]: Parameters.RequestFeedSetupParams;
     [WRITE_COMMANDS.SET_COMPANY_CARD_FEED_NAME]: Parameters.SetCompanyCardFeedName;
     [WRITE_COMMANDS.DELETE_COMPANY_CARD_FEED]: Parameters.DeleteCompanyCardFeed;
     [WRITE_COMMANDS.ASSIGN_COMPANY_CARD]: Parameters.AssignCompanyCardParams;
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index f36be40dacc0..3d3ef18f5198 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -36,6 +36,7 @@ import type {
     OpenWorkspaceInvitePageParams,
     OpenWorkspaceParams,
     RequestExpensifyCardLimitIncreaseParams,
+    RequestFeedSetupParams,
     SetCompanyCardExportAccountParams,
     SetPolicyAutomaticApprovalLimitParams,
     SetPolicyAutomaticApprovalRateParams,
@@ -90,6 +91,7 @@ import type {
     Transaction,
 } from '@src/types/onyx';
 import type {AssignCardData} from '@src/types/onyx/AssignCard';
+import {AddNewCardFeedData} from '@src/types/onyx/CardFeeds';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type {Attributes, CompanyAddress, CustomUnit, NetSuiteCustomList, NetSuiteCustomSegment, Rate, TaxRate} from '@src/types/onyx/Policy';
 import type {OnyxData} from '@src/types/onyx/Request';
@@ -4462,6 +4464,11 @@ function enablePolicyAutoReimbursementLimit(policyID: string, enabled: boolean)
     });
 }
 
+function addNewCompanyCardsFeed(policyID: string, data: AddNewCardFeedData) {
+    const parameters: RequestFeedSetupParams = {};
+    API.write(WRITE_COMMANDS.REQUEST_FEED_SETUP, parameters);
+}
+
 function setWorkspaceCompanyCardFeedName(policyID: string, workspaceAccountID: number, bankName: string, userDefinedName: string) {
     const authToken = NetworkStore.getAuthToken();
     const onyxData: OnyxData = {
@@ -4901,6 +4908,7 @@ export {
     deleteWorkspaceCompanyCardFeed,
     setWorkspaceCompanyCardTransactionLiability,
     openPolicyCompanyCardsPage,
+    addNewCompanyCardsFeed,
     assignWorkspaceCompanyCard,
     unassignWorkspaceCompanyCard,
     updateWorkspaceCompanyCard,
diff --git a/src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx b/src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx
index 8d42b3e8408e..0be836658bc7 100644
--- a/src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx
+++ b/src/pages/workspace/companyCards/addNew/AddNewCardPage.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {useOnyx} from 'react-native-onyx';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import CardInstructionsStep from './CardInstructionsStep';
@@ -8,7 +9,9 @@ import CardNameStep from './CardNameStep';
 import CardTypeStep from './CardTypeStep';
 import DetailsStep from './DetailsStep';
 
-function AddNewCardPage() {
+type AssignCardFeedPageProps = WithPolicyAndFullscreenLoadingProps;
+
+function AddNewCardPage({policy}: AssignCardFeedPageProps) {
     const [addNewCardFeed] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
 
     const {currentStep} = addNewCardFeed ?? {};
@@ -21,7 +24,7 @@ function AddNewCardPage() {
         case CONST.COMPANY_CARDS.STEP.CARD_NAME:
             return <CardNameStep />;
         case CONST.COMPANY_CARDS.STEP.CARD_DETAILS:
-            return <DetailsStep />;
+            return <DetailsStep policyID={policy?.id ?? '-1'} />;
         default:
             return <CardTypeStep />;
     }
diff --git a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
index 93eccbb85a32..b162d704e9ea 100644
--- a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
@@ -11,20 +11,31 @@ import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as Policy from '@libs/actions/Policy/Policy';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/AddNewCardFeedForm';
 
-function DetailsStep() {
+type DetailsStepProps = {
+    /** ID of the current policy */
+    policyID: string;
+};
+
+function DetailsStep({policyID}: DetailsStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {inputCallbackRef} = useAutoFocusInput();
 
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
     const feedProvider = addNewCard?.data.cardType;
-    const submit = () => {};
+
+    const submit = () => {
+        if (addNewCard?.data) {
+            Policy.addNewCompanyCardsFeed(policyID, addNewCard.data);
+        }
+    };
 
     const handleBackButtonPress = () => {
         if (feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX) {

From ad79dbde4b45308ac0fd108cc1b158432ded227e Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 30 Sep 2024 15:20:51 +0200
Subject: [PATCH 07/36] Fix ts errors

---
 src/languages/params.ts           | 2 +-
 src/libs/ReportActionsUtils.ts    | 2 +-
 src/libs/actions/Policy/Policy.ts | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/languages/params.ts b/src/languages/params.ts
index d51bb2d20e03..189f232524de 100644
--- a/src/languages/params.ts
+++ b/src/languages/params.ts
@@ -476,7 +476,7 @@ type SpreadCategoriesParams = {
 };
 
 type AssignedYouCardParams = {
-    assigner: string;
+    link: string;
 };
 
 type FeatureNameParams = {
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 18d2769a18f8..476e08690ba5 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -1777,7 +1777,7 @@ function getCardIssuedMessage(reportAction: OnyxEntry<ReportAction>, shouldRende
         case CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL:
             return Localize.translateLocal('workspace.expensifyCard.issuedCardVirtual', {assignee, link: expensifyCardLink});
         case CONST.REPORT.ACTIONS.TYPE.CARD_ASSIGNED:
-            return Localize.translateLocal('workspace.companyCards.assignedYouCard', companyCardLink);
+            return Localize.translateLocal('workspace.companyCards.assignedYouCard', {link: companyCardLink});
         case CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS:
             return Localize.translateLocal(`workspace.expensifyCard.${shouldShowAddMissingDetailsButton ? 'issuedCardNoShippingDetails' : 'addedShippingDetails'}`, {assignee});
         default:
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 522e12ec37e7..86f950c24f42 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -4335,6 +4335,7 @@ function enablePolicyAutoReimbursementLimit(policyID: string, enabled: boolean)
     });
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function addNewCompanyCardsFeed(policyID: string, data: AddNewCardFeedData) {
     const parameters: RequestFeedSetupParams = {};
     API.write(WRITE_COMMANDS.REQUEST_FEED_SETUP, parameters);

From 93b819f558fd0f9219f75418687a4d5aa93f8331 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 30 Sep 2024 15:43:30 +0200
Subject: [PATCH 08/36] Lint fixes

---
 src/libs/actions/Policy/Policy.ts                       | 2 +-
 src/pages/workspace/companyCards/addNew/DetailsStep.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 86f950c24f42..852a88b267ae 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -91,7 +91,7 @@ import type {
     Transaction,
 } from '@src/types/onyx';
 import type {AssignCardData} from '@src/types/onyx/AssignCard';
-import {AddNewCardFeedData} from '@src/types/onyx/CardFeeds';
+import type {AddNewCardFeedData} from '@src/types/onyx/CardFeeds';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type {Attributes, CompanyAddress, CustomUnit, NetSuiteCustomList, NetSuiteCustomSegment, Rate, TaxRate} from '@src/types/onyx/Policy';
 import type {OnyxData} from '@src/types/onyx/Request';
diff --git a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
index b162d704e9ea..371ee2139de8 100644
--- a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
@@ -32,9 +32,11 @@ function DetailsStep({policyID}: DetailsStepProps) {
     const feedProvider = addNewCard?.data.cardType;
 
     const submit = () => {
-        if (addNewCard?.data) {
-            Policy.addNewCompanyCardsFeed(policyID, addNewCard.data);
+        if (!addNewCard?.data) {
+            return;
         }
+
+        Policy.addNewCompanyCardsFeed(policyID, addNewCard.data);
     };
 
     const handleBackButtonPress = () => {

From 44b4e468a5ad7a1b3e29891523a392066bd5a6f4 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 3 Oct 2024 11:24:08 +0200
Subject: [PATCH 09/36] Update field names and values to pass the right data to
 RequestFeedSetup API call; add getCardFeedName function

---
 src/languages/en.ts                           | 12 +++---
 src/languages/es.ts                           | 12 +++---
 .../API/parameters/RequestFeedSetupParams.ts  |  6 ++-
 src/libs/CardUtils.ts                         | 11 ++++++
 src/libs/actions/Policy/Policy.ts             | 17 +++++++--
 .../addNew/CardInstructionsStep.tsx           |  8 ++--
 .../companyCards/addNew/CardNameStep.tsx      |  4 +-
 .../companyCards/addNew/CardTypeStep.tsx      | 28 +++++++-------
 .../companyCards/addNew/DetailsStep.tsx       | 37 +++++++++++--------
 .../assignCard/CardSelectionStep.tsx          | 10 +----
 src/types/onyx/CardFeeds.ts                   | 11 ++----
 11 files changed, 89 insertions(+), 67 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7c7a8afd33bf..faf9fa4316f1 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2931,24 +2931,24 @@ const translations = {
                 enableFeed: {
                     title: ({provider}: GoBackMessageParams) => `Enable your ${provider} feed`,
                     heading: 'We have a direct integration with your card issuer and can import your transaction data into Expensify quickly and accurately.\n\nTo get started, simply:',
-                    visa: `1. Visit [this help article](${CONST.COMPANY_CARDS_HELP}) for detailed instructionson how to set up your Visa Commercial Cards.\n\n2. [Contact your bank](${CONST.COMPANY_CARDS_HELP}) to verify they support a custom feed for your program, and ask them toenable it.\n\n3. *Once the feed is enabled and you have its details, continue to the next screen.*`,
-                    amex: `1. Visit [this help article](${CONST.COMPANY_CARDS_HELP}) to find out if American Express can enable a custom feed for your program.\n\n2. Once the feed is enabled, Amex will send you a production letter.\n\n3. *Once you have the feed information, continue to the next screen.*`,
-                    mastercard: `1. Visit [this help article](${CONST.COMPANY_CARDS_HELP}) for detailed instructions on how to set up your Mastercard Commercial Cards.\n\n 2. [Contact your bank](${CONST.COMPANY_CARDS_HELP}) to verify they support a custom feed for your program, and ask them to enable it.\n\n3. *Once the feed is enabled and you have its details, continue to the next screen.*`,
+                    vcf: `1. Visit [this help article](${CONST.COMPANY_CARDS_HELP}) for detailed instructionson how to set up your Visa Commercial Cards.\n\n2. [Contact your bank](${CONST.COMPANY_CARDS_HELP}) to verify they support a custom feed for your program, and ask them toenable it.\n\n3. *Once the feed is enabled and you have its details, continue to the next screen.*`,
+                    gl1025: `1. Visit [this help article](${CONST.COMPANY_CARDS_HELP}) to find out if American Express can enable a custom feed for your program.\n\n2. Once the feed is enabled, Amex will send you a production letter.\n\n3. *Once you have the feed information, continue to the next screen.*`,
+                    cdf: `1. Visit [this help article](${CONST.COMPANY_CARDS_HELP}) for detailed instructions on how to set up your Mastercard Commercial Cards.\n\n 2. [Contact your bank](${CONST.COMPANY_CARDS_HELP}) to verify they support a custom feed for your program, and ask them to enable it.\n\n3. *Once the feed is enabled and you have its details, continue to the next screen.*`,
                 },
                 whatBankIssuesCard: 'What bank issues these cards?',
                 enterNameOfBank: 'Enter name of bank',
                 feedDetails: {
-                    visa: {
+                    vcf: {
                         title: 'What are the Visa feed details?',
                         processorLabel: 'Processor ID',
                         bankLabel: 'Financial institution (bank) ID',
                         companyLabel: 'Company ID',
                     },
-                    amex: {
+                    gl1025: {
                         title: `What's the Amex delivery file name?`,
                         fileNameLabel: 'Delivery file name',
                     },
-                    mastercard: {
+                    cdf: {
                         title: `What's the Mastercard distribution ID?`,
                         distributionLabel: 'Distribution ID',
                     },
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 4ab304f47e5f..a6ef6126c7b2 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2967,24 +2967,24 @@ const translations = {
                     title: ({provider}: GoBackMessageParams) => `Habilita tu feed ${provider}`,
                     heading:
                         'Tenemos una integración directa con el emisor de su tarjeta y podemos importar los datos de sus transacciones a Expensify de forma rápida y precisa.\n\nPara empezar, simplemente:',
-                    visa: `1. Visite [este artículo de ayuda](${CONST.COMPANY_CARDS_HELP}) para obtener instrucciones detalladas sobre cómo configurar sus tarjetas comerciales Visa.\n\n2. [Póngase en contacto con su banco](${CONST.COMPANY_CARDS_HELP}) para comprobar que admiten un feed personalizado para su programa, y pídales que lo activen.\n\n3. *Una vez que el feed esté habilitado y tengas sus datos, pasa a la siguiente pantalla.*`,
-                    amex: `1. Visite [este artículo de ayuda](${CONST.COMPANY_CARDS_HELP}) para saber si American Express puede habilitar un feed personalizado para su programa.\n\n2. Una vez activada la alimentación, Amex le enviará una carta de producción.\n\n3. *Una vez que tenga la información de alimentación, continúe con la siguiente pantalla.*`,
-                    mastercard: `1. Visite [este artículo de ayuda](${CONST.NETSUITE_IMPORT.HELP_LINKS.CUSTOM_SEGMENTS}) para obtener instrucciones detalladas sobre cómo configurar sus tarjetas comerciales Mastercard.\n\n 2. [Póngase en contacto con su banco](${CONST.COMPANY_CARDS_HELP}) para verificar que admiten un feed personalizado para su programa, y pídales que lo habiliten.\n\n3. *Una vez que el feed esté habilitado y tengas sus datos, pasa a la siguiente pantalla.*`,
+                    vcf: `1. Visite [este artículo de ayuda](${CONST.COMPANY_CARDS_HELP}) para obtener instrucciones detalladas sobre cómo configurar sus tarjetas comerciales Visa.\n\n2. [Póngase en contacto con su banco](${CONST.COMPANY_CARDS_HELP}) para comprobar que admiten un feed personalizado para su programa, y pídales que lo activen.\n\n3. *Una vez que el feed esté habilitado y tengas sus datos, pasa a la siguiente pantalla.*`,
+                    gl1025: `1. Visite [este artículo de ayuda](${CONST.COMPANY_CARDS_HELP}) para saber si American Express puede habilitar un feed personalizado para su programa.\n\n2. Una vez activada la alimentación, Amex le enviará una carta de producción.\n\n3. *Una vez que tenga la información de alimentación, continúe con la siguiente pantalla.*`,
+                    cdf: `1. Visite [este artículo de ayuda](${CONST.NETSUITE_IMPORT.HELP_LINKS.CUSTOM_SEGMENTS}) para obtener instrucciones detalladas sobre cómo configurar sus tarjetas comerciales Mastercard.\n\n 2. [Póngase en contacto con su banco](${CONST.COMPANY_CARDS_HELP}) para verificar que admiten un feed personalizado para su programa, y pídales que lo habiliten.\n\n3. *Una vez que el feed esté habilitado y tengas sus datos, pasa a la siguiente pantalla.*`,
                 },
                 whatBankIssuesCard: '¿Qué banco emite estas tarjetas?',
                 enterNameOfBank: 'Introduzca el nombre del banco',
                 feedDetails: {
-                    visa: {
+                    vcf: {
                         title: '¿Cuáles son los datos de alimentación de Visa?',
                         processorLabel: 'ID del procesador',
                         bankLabel: 'Identificación de la institución financiera (banco)',
                         companyLabel: 'Empresa ID',
                     },
-                    amex: {
+                    gl1025: {
                         title: `¿Cuál es el nombre del archivo de entrega de Amex?`,
                         fileNameLabel: 'Nombre del archivo de entrega',
                     },
-                    mastercard: {
+                    cdf: {
                         title: `¿Cuál es el identificador de distribución de Mastercard?`,
                         distributionLabel: 'ID de distribución',
                     },
diff --git a/src/libs/API/parameters/RequestFeedSetupParams.ts b/src/libs/API/parameters/RequestFeedSetupParams.ts
index 53f81301fcf3..98e22c611efd 100644
--- a/src/libs/API/parameters/RequestFeedSetupParams.ts
+++ b/src/libs/API/parameters/RequestFeedSetupParams.ts
@@ -1,6 +1,8 @@
 type RequestFeedSetupParams = {
-    // bankName: string;
-    // feedDetails: string;
+    authToken: string;
+    policyID: string;
+    feedDetails: string;
+    feedType: string;
 };
 
 export default RequestFeedSetupParams;
diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index f5bd8397937f..56fb2334170a 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -195,6 +195,16 @@ function getCardFeedIcon(cardFeed: string): IconAsset {
     return Illustrations.AmexCompanyCards;
 }
 
+function getCardFeedName(feedType: ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>): string {
+    const feedNamesMapping = {
+        [CONST.COMPANY_CARD.FEED_BANK_NAME.VISA]: 'Visa',
+        [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: 'Mastercard',
+        [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: 'American Express',
+    };
+
+    return feedNamesMapping[feedType];
+}
+
 function getCardDetailsImage(cardFeed: string): IconAsset {
     if (cardFeed.startsWith(CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD)) {
         return Illustrations.MasterCardCompanyCardDetail;
@@ -248,6 +258,7 @@ export {
     getEligibleBankAccountsForCard,
     sortCardsByCardholderName,
     getCardFeedIcon,
+    getCardFeedName,
     getCardDetailsImage,
     getMemberCards,
     getSelectedFeed,
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 1d7067edc67c..89c223557bc2 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -4420,9 +4420,20 @@ function enablePolicyAutoReimbursementLimit(policyID: string, enabled: boolean)
     });
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function addNewCompanyCardsFeed(policyID: string, data: AddNewCardFeedData) {
-    const parameters: RequestFeedSetupParams = {};
+function addNewCompanyCardsFeed(policyID: string, feedType: string, feedDetails: string) {
+    const authToken = NetworkStore.getAuthToken();
+
+    if (!authToken) {
+        return;
+    }
+
+    const parameters: RequestFeedSetupParams = {
+        policyID,
+        authToken,
+        feedType,
+        feedDetails,
+    };
+
     API.write(WRITE_COMMANDS.REQUEST_FEED_SETUP, parameters);
 }
 
diff --git a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
index 7338f0df5046..5b380d3d525d 100644
--- a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
@@ -1,4 +1,3 @@
-import {Str} from 'expensify-common';
 import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -11,6 +10,7 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as CardUtils from '@libs/CardUtils';
 import Parser from '@libs/Parser';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
@@ -24,11 +24,11 @@ function CardInstructionsStep() {
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
 
     const data = addNewCard?.data;
-    const feedProvider = data?.cardType;
+    const feedProvider = data?.feedType ?? CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX;
 
     const submit = () => {
         CompanyCards.setAddNewCompanyCardStepAndData({
-            step: feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX ? CONST.COMPANY_CARDS.STEP.CARD_DETAILS : CONST.COMPANY_CARDS.STEP.CARD_NAME,
+            step: feedProvider === CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX ? CONST.COMPANY_CARDS.STEP.CARD_DETAILS : CONST.COMPANY_CARDS.STEP.CARD_NAME,
         });
     };
 
@@ -52,7 +52,7 @@ function CardInstructionsStep() {
                 contentContainerStyle={styles.flexGrow1}
             >
                 <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>
-                    {translate('workspace.companyCards.addNewCard.enableFeed.title', {provider: Str.recapitalize(feedProvider ?? '')})}
+                    {translate('workspace.companyCards.addNewCard.enableFeed.title', {provider: CardUtils.getCardFeedName(feedProvider)})}
                 </Text>
                 <Text style={[styles.ph5, styles.mb3]}>{translate('workspace.companyCards.addNewCard.enableFeed.heading')}</Text>
                 <View style={[styles.ph5]}>
diff --git a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx
index d8d6fe10acf4..2b910515ba64 100644
--- a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx
@@ -30,7 +30,7 @@ function CardNameStep() {
         CompanyCards.setAddNewCompanyCardStepAndData({
             step: CONST.COMPANY_CARDS.STEP.CARD_DETAILS,
             data: {
-                cardTitle: values.cardTitle,
+                bankName: values.cardTitle,
             },
             isEditing: false,
         });
@@ -65,7 +65,7 @@ function CardNameStep() {
                     inputID={INPUT_IDS.CARD_TITLE}
                     label={translate('workspace.companyCards.addNewCard.enterNameOfBank')}
                     role={CONST.ROLE.PRESENTATION}
-                    defaultValue={addNewCard?.data?.cardTitle}
+                    defaultValue={addNewCard?.data?.bankName}
                     containerStyles={[styles.mb6]}
                     ref={inputCallbackRef}
                 />
diff --git a/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx b/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
index 391799851f8c..9a14c7df4afd 100644
--- a/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
@@ -22,7 +22,7 @@ function CardTypeStep() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
-    const [typeSelected, setTypeSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.CARD_TYPE>>();
+    const [typeSelected, setTypeSelected] = useState<ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>>();
     const [isError, setIsError] = useState(false);
 
     const submit = () => {
@@ -32,7 +32,7 @@ function CardTypeStep() {
             CompanyCards.setAddNewCompanyCardStepAndData({
                 step: CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS,
                 data: {
-                    cardType: typeSelected,
+                    feedType: typeSelected,
                 },
                 isEditing: false,
             });
@@ -40,8 +40,8 @@ function CardTypeStep() {
     };
 
     useEffect(() => {
-        setTypeSelected(addNewCard?.data.cardType);
-    }, [addNewCard?.data.cardType]);
+        setTypeSelected(addNewCard?.data.feedType);
+    }, [addNewCard?.data.feedType]);
 
     const handleBackButtonPress = () => {
         Navigation.goBack();
@@ -49,10 +49,10 @@ function CardTypeStep() {
 
     const data = [
         {
-            value: CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
+            value: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
             text: translate('workspace.companyCards.addNewCard.cardProviders.amex'),
-            keyForList: CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
-            isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
+            keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
+            isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
             leftElement: (
                 <Icon
                     src={Illustrations.AmexCardCompanyCardDetail}
@@ -63,10 +63,10 @@ function CardTypeStep() {
             ),
         },
         {
-            value: CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
+            value: CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
             text: translate('workspace.companyCards.addNewCard.cardProviders.mastercard'),
-            keyForList: CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
-            isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
+            keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
+            isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
             leftElement: (
                 <Icon
                     src={Illustrations.MasterCardCompanyCardDetail}
@@ -77,10 +77,10 @@ function CardTypeStep() {
             ),
         },
         {
-            value: CONST.COMPANY_CARDS.CARD_TYPE.VISA,
+            value: CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
             text: translate('workspace.companyCards.addNewCard.cardProviders.visa'),
-            keyForList: CONST.COMPANY_CARDS.CARD_TYPE.VISA,
-            isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.VISA,
+            keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
+            isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
             leftElement: (
                 <Icon
                     src={Illustrations.VisaCompanyCardDetail}
@@ -113,7 +113,7 @@ function CardTypeStep() {
                 }}
                 sections={[{data}]}
                 shouldSingleExecuteRowSelect
-                initiallyFocusedOptionKey={addNewCard?.data.cardType}
+                initiallyFocusedOptionKey={addNewCard?.data.feedType}
                 shouldUpdateFocusedIndex
                 showConfirmButton
                 confirmButtonText={translate('common.next')}
diff --git a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
index 371ee2139de8..86e2c7e5747e 100644
--- a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
@@ -29,18 +29,25 @@ function DetailsStep({policyID}: DetailsStepProps) {
     const {inputCallbackRef} = useAutoFocusInput();
 
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
-    const feedProvider = addNewCard?.data.cardType;
+    const feedProvider = addNewCard?.data.feedType;
 
-    const submit = () => {
+    const submit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM>) => {
         if (!addNewCard?.data) {
             return;
         }
 
-        Policy.addNewCompanyCardsFeed(policyID, addNewCard.data);
+        const feedDetails = Object.entries({
+            ...values,
+            bankName: addNewCard.data.bankName ?? 'Amex',
+        })
+            .map(([key, value]) => `${key}: ${value}`)
+            .join(', ');
+
+        Policy.addNewCompanyCardsFeed(policyID, addNewCard.data.feedType, feedDetails);
     };
 
     const handleBackButtonPress = () => {
-        if (feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX) {
+        if (feedProvider === CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX) {
             CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS});
             return;
         }
@@ -52,7 +59,7 @@ function DetailsStep({policyID}: DetailsStepProps) {
             const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.BANK_ID]);
 
             switch (feedProvider) {
-                case CONST.COMPANY_CARDS.CARD_TYPE.VISA:
+                case CONST.COMPANY_CARD.FEED_BANK_NAME.VISA:
                     if (!values[INPUT_IDS.BANK_ID]) {
                         errors[INPUT_IDS.BANK_ID] = translate('common.error.fieldRequired');
                     }
@@ -63,12 +70,12 @@ function DetailsStep({policyID}: DetailsStepProps) {
                         errors[INPUT_IDS.COMPANY_ID] = translate('common.error.fieldRequired');
                     }
                     break;
-                case CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD:
+                case CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD:
                     if (!values[INPUT_IDS.DISTRIBUTION_ID]) {
                         errors[INPUT_IDS.DISTRIBUTION_ID] = translate('common.error.fieldRequired');
                     }
                     break;
-                case CONST.COMPANY_CARDS.CARD_TYPE.AMEX:
+                case CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX:
                     if (!values[INPUT_IDS.DELIVERY_FILE_NAME]) {
                         errors[INPUT_IDS.DELIVERY_FILE_NAME] = translate('common.error.fieldRequired');
                     }
@@ -83,13 +90,13 @@ function DetailsStep({policyID}: DetailsStepProps) {
 
     const renderInputs = () => {
         switch (feedProvider) {
-            case CONST.COMPANY_CARDS.CARD_TYPE.VISA:
+            case CONST.COMPANY_CARD.FEED_BANK_NAME.VISA:
                 return (
                     <>
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={INPUT_IDS.PROCESSOR_ID}
-                            label={translate('workspace.companyCards.addNewCard.feedDetails.visa.processorLabel')}
+                            label={translate('workspace.companyCards.addNewCard.feedDetails.vcf.processorLabel')}
                             role={CONST.ROLE.PRESENTATION}
                             containerStyles={[styles.mb6]}
                             ref={inputCallbackRef}
@@ -97,36 +104,36 @@ function DetailsStep({policyID}: DetailsStepProps) {
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={INPUT_IDS.BANK_ID}
-                            label={translate('workspace.companyCards.addNewCard.feedDetails.visa.bankLabel')}
+                            label={translate('workspace.companyCards.addNewCard.feedDetails.vcf.bankLabel')}
                             role={CONST.ROLE.PRESENTATION}
                             containerStyles={[styles.mb6]}
                         />
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={INPUT_IDS.COMPANY_ID}
-                            label={translate('workspace.companyCards.addNewCard.feedDetails.visa.companyLabel')}
+                            label={translate('workspace.companyCards.addNewCard.feedDetails.vcf.companyLabel')}
                             role={CONST.ROLE.PRESENTATION}
                             containerStyles={[styles.mb6]}
                         />
                     </>
                 );
-            case CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD:
+            case CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD:
                 return (
                     <InputWrapper
                         InputComponent={TextInput}
                         inputID={INPUT_IDS.DISTRIBUTION_ID}
-                        label={translate('workspace.companyCards.addNewCard.feedDetails.mastercard.distributionLabel')}
+                        label={translate('workspace.companyCards.addNewCard.feedDetails.cdf.distributionLabel')}
                         role={CONST.ROLE.PRESENTATION}
                         containerStyles={[styles.mb6]}
                         ref={inputCallbackRef}
                     />
                 );
-            case CONST.COMPANY_CARDS.CARD_TYPE.AMEX:
+            case CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX:
                 return (
                     <InputWrapper
                         InputComponent={TextInput}
                         inputID={INPUT_IDS.DELIVERY_FILE_NAME}
-                        label={translate('workspace.companyCards.addNewCard.feedDetails.amex.fileNameLabel')}
+                        label={translate('workspace.companyCards.addNewCard.feedDetails.gl1025.fileNameLabel')}
                         role={CONST.ROLE.PRESENTATION}
                         containerStyles={[styles.mb6]}
                         ref={inputCallbackRef}
diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
index 5947d382029f..7c1d427ffd7a 100644
--- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
@@ -43,14 +43,8 @@ const mockedCardList = [
 
 const mockedCardListEmpty: MockedCard[] = [];
 
-const feedNamesMapping = {
-    [CONST.COMPANY_CARD.FEED_BANK_NAME.VISA]: 'Visa',
-    [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: 'MasterCard',
-    [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: 'American Express',
-};
-
 type CardSelectionStepProps = {
-    feed: string;
+    feed: ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>;
 };
 
 function CardSelectionStep({feed}: CardSelectionStepProps) {
@@ -144,7 +138,7 @@ function CardSelectionStep({feed}: CardSelectionStepProps) {
                     <Text style={[styles.textSupporting, styles.ph5, styles.mv3]}>
                         {translate('workspace.companyCards.chooseCardFor', {
                             assignee: PersonalDetailsUtils.getPersonalDetailByEmail(assignee ?? '')?.displayName ?? '',
-                            feed: feedNamesMapping[feed as ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>] ?? 'visa',
+                            feed: CardUtils.getCardFeedName(feed),
                         })}
                     </Text>
                     <SelectionList
diff --git a/src/types/onyx/CardFeeds.ts b/src/types/onyx/CardFeeds.ts
index bd78d54db71b..738e5e61a82a 100644
--- a/src/types/onyx/CardFeeds.ts
+++ b/src/types/onyx/CardFeeds.ts
@@ -39,14 +39,11 @@ type CardFeeds = {
 
 /** Data required to be sent to add a new card */
 type AddNewCardFeedData = {
-    /** The email address of the cardholder */
-    assigneeEmail: string;
+    /** Card feed provider */
+    feedType: ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>;
 
-    /** Card type */
-    cardType: ValueOf<typeof CONST.COMPANY_CARDS.CARD_TYPE>;
-
-    /** Name of the card */
-    cardTitle: string;
+    /** Name of the bank */
+    bankName?: string;
 };
 
 /** Issue new card flow steps */

From 806b3754db1e9f8d0c2d1aa9f47239a2baa62ce7 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 3 Oct 2024 11:33:15 +0200
Subject: [PATCH 10/36] Fixes

---
 src/libs/actions/Policy/Policy.ts                              | 1 -
 .../workspace/companyCards/assignCard/AssignCardFeedPage.tsx   | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 89c223557bc2..3e8a0eb63194 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -93,7 +93,6 @@ import type {
     Transaction,
 } from '@src/types/onyx';
 import type {AssignCardData} from '@src/types/onyx/AssignCard';
-import type {AddNewCardFeedData} from '@src/types/onyx/CardFeeds';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type {Attributes, CompanyAddress, CustomUnit, NetSuiteCustomList, NetSuiteCustomSegment, Rate, TaxRate} from '@src/types/onyx/Policy';
 import type {OnyxData} from '@src/types/onyx/Request';
diff --git a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
index 03e9d58a71ab..52d0b0c6b293 100644
--- a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
+++ b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import * as CompanyCards from '@userActions/CompanyCards';
@@ -13,7 +14,7 @@ import TransactionStartDateStep from './TransactionStartDateStep';
 type AssignCardFeedPageProps = {
     route: {
         params: {
-            feed: string;
+            feed: ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>;
         };
     };
 } & WithPolicyAndFullscreenLoadingProps;

From e28132ef8aa7750107e396b7c2e0f2f5f46b3214 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 7 Oct 2024 11:38:03 +0200
Subject: [PATCH 11/36] Add CompanyCardFeed type, fix pending feed display

---
 src/ONYXKEYS.ts                                     |  6 +++---
 src/languages/en.ts                                 |  6 +++---
 src/languages/es.ts                                 |  6 +++---
 src/libs/CardUtils.ts                               | 10 +++++-----
 src/libs/actions/Card.ts                            |  4 ++--
 src/libs/actions/Policy/Policy.ts                   | 12 ++++++------
 src/pages/workspace/WorkspaceMoreFeaturesPage.tsx   |  2 +-
 .../WorkspaceCompanyCardFeedSelectorPage.tsx        |  7 ++++---
 .../WorkspaceCompanyCardsListHeaderButtons.tsx      | 13 ++++++++-----
 .../companyCards/WorkspaceCompanyCardsPage.tsx      |  2 +-
 .../WorkspaceCompanyCardsSettingsFeedNamePage.tsx   |  2 +-
 .../WorkspaceCompanyCardsSettingsPage.tsx           |  2 +-
 .../workspace/companyCards/addNew/CardTypeStep.tsx  |  9 +++++----
 .../workspace/companyCards/addNew/DetailsStep.tsx   |  3 +++
 .../companyCards/assignCard/AssignCardFeedPage.tsx  |  4 ++--
 .../companyCards/assignCard/CardSelectionStep.tsx   |  4 ++--
 .../members/WorkspaceMemberNewCardPage.tsx          |  2 +-
 src/types/onyx/CardFeeds.ts                         |  7 +++++--
 src/types/onyx/index.ts                             |  3 ++-
 19 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index df1413620c20..59f59cef4603 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -495,7 +495,7 @@ const ONYXKEYS = {
         SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END: 'sharedNVP_private_billingGracePeriodEnd_',
 
         /** The collection of card feeds */
-        SHARED_NVP_PRIVATE_DOMAIN_MEMBER: 'sharedNVP_private_domain_member_',
+        DOMAIN_MEMBER: 'domain_member_',
 
         /**
          * Stores the card list for a given fundID and feed in the format: cards_<fundID>_<bankName>
@@ -841,12 +841,12 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS]: OnyxTypes.PolicyConnectionSyncProgress;
     [ONYXKEYS.COLLECTION.SNAPSHOT]: OnyxTypes.SearchResults;
     [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END]: OnyxTypes.BillingGraceEndPeriod;
-    [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER]: OnyxTypes.CardFeeds;
+    [ONYXKEYS.COLLECTION.DOMAIN_MEMBER]: OnyxTypes.CardFeeds;
     [ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS]: OnyxTypes.ExpensifyCardSettings;
     [ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST]: OnyxTypes.WorkspaceCardsList;
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION]: OnyxTypes.PolicyConnectionName;
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION]: boolean;
-    [ONYXKEYS.COLLECTION.LAST_SELECTED_FEED]: string;
+    [ONYXKEYS.COLLECTION.LAST_SELECTED_FEED]: OnyxTypes.CompanyCardFeed;
 };
 
 type OnyxValuesMapping = {
diff --git a/src/languages/en.ts b/src/languages/en.ts
index e159bf6b8f33..bbe499f13fef 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2931,9 +2931,9 @@ const translations = {
             addCardFeed: 'Add card feed',
             addNewCard: {
                 cardProviders: {
-                    amex: 'American Express Corporate Cards',
-                    mastercard: 'Mastercard Commercial Cards',
-                    visa: 'Visa Commercial Cards',
+                    gl1025: 'American Express Corporate Cards',
+                    cdf: 'Mastercard Commercial Cards',
+                    vcf: 'Visa Commercial Cards',
                 },
                 yourCardProvider: `Who's your card provider?`,
                 enableFeed: {
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 22e13ab6a48d..b2ff989e3606 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2967,9 +2967,9 @@ const translations = {
             addCardFeed: 'Añadir alimentación de tarjeta',
             addNewCard: {
                 cardProviders: {
-                    amex: 'Tarjetas de empresa American Express',
-                    mastercard: 'Tarjetas comerciales Mastercard',
-                    visa: 'Tarjetas comerciales Visa',
+                    gl1025: 'Tarjetas de empresa American Express',
+                    cdf: 'Tarjetas comerciales Mastercard',
+                    vcf: 'Tarjetas comerciales Visa',
                 },
                 yourCardProvider: `¿Quién es su proveedor de tarjetas?`,
                 enableFeed: {
diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 56fb2334170a..1841bf09c256 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -7,7 +7,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {BankAccountList, Card, CardFeeds, CardList, PersonalDetailsList, WorkspaceCardsList} from '@src/types/onyx';
+import type {BankAccountList, Card, CardFeeds, CardList, CompanyCardFeed, PersonalDetailsList, WorkspaceCardsList} from '@src/types/onyx';
 import type Policy from '@src/types/onyx/Policy';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -195,7 +195,7 @@ function getCardFeedIcon(cardFeed: string): IconAsset {
     return Illustrations.AmexCompanyCards;
 }
 
-function getCardFeedName(feedType: ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>): string {
+function getCardFeedName(feedType: CompanyCardFeed): string {
     const feedNamesMapping = {
         [CONST.COMPANY_CARD.FEED_BANK_NAME.VISA]: 'Visa',
         [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: 'Mastercard',
@@ -237,9 +237,9 @@ function getMemberCards(policy: OnyxEntry<Policy>, allCardsList: OnyxCollection<
     return cards;
 }
 
-function getSelectedFeed(lastSelectedFeed: OnyxEntry<string>, cardFeeds: OnyxEntry<CardFeeds>): string {
-    const defaultFeed = Object.keys(cardFeeds?.companyCards ?? {}).at(0);
-    return lastSelectedFeed ?? defaultFeed ?? '';
+function getSelectedFeed(lastSelectedFeed: OnyxEntry<CompanyCardFeed>, cardFeeds: OnyxEntry<CardFeeds>): CompanyCardFeed {
+    const defaultFeed = Object.keys(cardFeeds?.companyCards ?? {}).at(0) as CompanyCardFeed;
+    return lastSelectedFeed ?? defaultFeed;
 }
 
 export {
diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts
index c0de9510c6ba..2a0ab6defa12 100644
--- a/src/libs/actions/Card.ts
+++ b/src/libs/actions/Card.ts
@@ -20,7 +20,7 @@ import * as NetworkStore from '@libs/Network/NetworkStore';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Card} from '@src/types/onyx';
+import type {Card, CompanyCardFeed} from '@src/types/onyx';
 import type {CardLimitType, ExpensifyCardDetails, IssueNewCardData, IssueNewCardStep} from '@src/types/onyx/Card';
 import type {ConnectionName} from '@src/types/onyx/Policy';
 
@@ -717,7 +717,7 @@ function toggleContinuousReconciliation(workspaceAccountID: number, shouldUseCon
     });
 }
 
-function updateSelectedFeed(feed: string, policyID: string) {
+function updateSelectedFeed(feed: CompanyCardFeed, policyID: string) {
     Onyx.update([
         {
             onyxMethod: Onyx.METHOD.MERGE,
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 327f7c3427c3..d9779e8422cd 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -2002,7 +2002,7 @@ function openPolicyCompanyCardsPage(policyID: string, workspaceAccountID: number
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
+            key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
             value: {
                 isLoading: true,
             },
@@ -2012,7 +2012,7 @@ function openPolicyCompanyCardsPage(policyID: string, workspaceAccountID: number
     const successData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
+            key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
             value: {
                 isLoading: false,
             },
@@ -2022,7 +2022,7 @@ function openPolicyCompanyCardsPage(policyID: string, workspaceAccountID: number
     const failureData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
+            key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
             value: {
                 isLoading: false,
             },
@@ -4441,7 +4441,7 @@ function setWorkspaceCompanyCardFeedName(policyID: string, workspaceAccountID: n
         optimisticData: [
             {
                 onyxMethod: Onyx.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
+                key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
                 value: {
                     companyCardNicknames: {
                         [bankName]: userDefinedName,
@@ -4467,7 +4467,7 @@ function setWorkspaceCompanyCardTransactionLiability(workspaceAccountID: number,
         optimisticData: [
             {
                 onyxMethod: Onyx.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
+                key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
                 value: {
                     companyCards: {
                         [bankName]: {liabilityType},
@@ -4493,7 +4493,7 @@ function deleteWorkspaceCompanyCardFeed(policyID: string, workspaceAccountID: nu
         optimisticData: [
             {
                 onyxMethod: Onyx.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
+                key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
                 value: {
                     companyCards: {
                         [bankName]: null,
diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index a743140278f7..381853e456dc 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -72,7 +72,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
     const policyID = policy?.id;
     const workspaceAccountID = policy?.workspaceAccountID ?? -1;
     const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID.toString()}_${CONST.EXPENSIFY_CARD.BANK}`);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID.toString()}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID.toString()}`);
     const [isOrganizeWarningModalOpen, setIsOrganizeWarningModalOpen] = useState(false);
     const [isIntegrateWarningModalOpen, setIsIntegrateWarningModalOpen] = useState(false);
     const [isReportFieldsWarningModalOpen, setIsReportFieldsWarningModalOpen] = useState(false);
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
index 435711a12be9..c30706da85e4 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
@@ -22,10 +22,11 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
+import type {CompanyCardFeed} from '@src/types/onyx';
 
 type CardFeedListItem = ListItem & {
     /** Card feed value */
-    value: string;
+    value: CompanyCardFeed;
 };
 
 type WorkspaceCompanyCardFeedSelectorPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_SELECT_FEED>;
@@ -36,12 +37,12 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
 
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
 
     const feeds: CardFeedListItem[] = Object.entries(cardFeeds?.companyCardNicknames ?? {}).map(([key, value]) => ({
-        value: key,
+        value: key as CompanyCardFeed,
         text: value,
         keyForList: key,
         isSelected: key === selectedFeed,
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index aeb75603ce20..121b64150925 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -16,13 +16,14 @@ import Navigation from '@navigation/Navigation';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {CompanyCardFeed} from '@src/types/onyx';
 
 type WorkspaceCompanyCardsListHeaderButtonsProps = {
     /** Current policy id */
     policyID: string;
 
     /** Currently selected feed */
-    selectedFeed: string;
+    selectedFeed: CompanyCardFeed;
 };
 
 function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: WorkspaceCompanyCardsListHeaderButtonsProps) {
@@ -30,15 +31,16 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const shouldChangeLayout = isMediumScreenWidth || shouldUseNarrowLayout;
+    const feedName = cardFeeds?.companyCardNicknames?.[selectedFeed] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${selectedFeed}`);
 
     return (
         <View style={[styles.w100, styles.ph5, !shouldChangeLayout ? [styles.pv2, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween] : styles.pb2]}>
             <PressableWithFeedback
                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_SELECT_FEED.getRoute(policyID))}
-                style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.ml4, shouldUseNarrowLayout && styles.mb3]}
-                accessibilityLabel={cardFeeds?.companyCardNicknames?.[selectedFeed] ?? ''}
+                style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.ml4, shouldChangeLayout && styles.mb3]}
+                accessibilityLabel={feedName}
             >
                 <Icon
                     src={CardUtils.getCardFeedIcon(selectedFeed)}
@@ -47,7 +49,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                 />
                 <View>
                     <CaretWrapper>
-                        <Text style={styles.textStrong}>{cardFeeds?.companyCardNicknames?.[selectedFeed]}</Text>
+                        <Text style={styles.textStrong}>{feedName}</Text>
                     </CaretWrapper>
                     <Text style={styles.textLabelSupporting}>{translate('workspace.companyCards.customFeed')}</Text>
                 </View>
@@ -65,6 +67,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                 <Button
                     onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_SETTINGS.getRoute(policyID))}
                     icon={Expensicons.Gear}
+                    isDisabled={cardFeeds?.companyCards?.[selectedFeed].pending ?? false}
                     text={translate('common.settings')}
                     style={shouldChangeLayout && styles.flex1}
                 />
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 99e39926b3f0..11fffd54e1e3 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -30,7 +30,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const theme = useTheme();
     const policyID = route.params.policyID;
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
index 7b4b62c61acf..0d301507c357 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
@@ -39,7 +39,7 @@ function WorkspaceCompanyCardsSettingsFeedNamePage({
     const policy = usePolicy(policyID);
     const workspaceAccountID = policy?.workspaceAccountID ?? -1;
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
     const feedName = cardFeeds?.companyCardNicknames?.[selectedFeed] ?? '';
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
index 2b1f53a1e454..56f2e7e3140c 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
@@ -37,7 +37,7 @@ function WorkspaceCompanyCardsSettingsPage({
     const workspaceAccountID = policy?.workspaceAccountID ?? -1;
     const [deleteCompanyCardConfirmModalVisible, setDeleteCompanyCardConfirmModalVisible] = useState(false);
 
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
     const feedName = cardFeeds?.companyCardNicknames?.[selectedFeed] ?? '';
diff --git a/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx b/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
index 9a14c7df4afd..7e87bfbdd068 100644
--- a/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
@@ -17,12 +17,13 @@ import variables from '@styles/variables';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {CompanyCardFeed} from '@src/types/onyx';
 
 function CardTypeStep() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
-    const [typeSelected, setTypeSelected] = useState<ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>>();
+    const [typeSelected, setTypeSelected] = useState<CompanyCardFeed>();
     const [isError, setIsError] = useState(false);
 
     const submit = () => {
@@ -50,7 +51,7 @@ function CardTypeStep() {
     const data = [
         {
             value: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
-            text: translate('workspace.companyCards.addNewCard.cardProviders.amex'),
+            text: translate('workspace.companyCards.addNewCard.cardProviders.gl1025'),
             keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
             isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
             leftElement: (
@@ -64,7 +65,7 @@ function CardTypeStep() {
         },
         {
             value: CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
-            text: translate('workspace.companyCards.addNewCard.cardProviders.mastercard'),
+            text: translate('workspace.companyCards.addNewCard.cardProviders.cdf'),
             keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
             isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
             leftElement: (
@@ -78,7 +79,7 @@ function CardTypeStep() {
         },
         {
             value: CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
-            text: translate('workspace.companyCards.addNewCard.cardProviders.visa'),
+            text: translate('workspace.companyCards.addNewCard.cardProviders.vcf'),
             keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
             isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
             leftElement: (
diff --git a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
index 86e2c7e5747e..1d3ea1c4156d 100644
--- a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
@@ -13,9 +13,11 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Policy from '@libs/actions/Policy/Policy';
 import * as ValidationUtils from '@libs/ValidationUtils';
+import Navigation from '@navigation/Navigation';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import INPUT_IDS from '@src/types/form/AddNewCardFeedForm';
 
 type DetailsStepProps = {
@@ -44,6 +46,7 @@ function DetailsStep({policyID}: DetailsStepProps) {
             .join(', ');
 
         Policy.addNewCompanyCardsFeed(policyID, addNewCard.data.feedType, feedDetails);
+        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
     };
 
     const handleBackButtonPress = () => {
diff --git a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
index 52d0b0c6b293..5dffda0e1b38 100644
--- a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
+++ b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
@@ -1,11 +1,11 @@
 import React, {useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
-import type {ValueOf} from 'type-fest';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {CompanyCardFeed} from '@src/types/onyx';
 import AssigneeStep from './AssigneeStep';
 import CardSelectionStep from './CardSelectionStep';
 import ConfirmationStep from './ConfirmationStep';
@@ -14,7 +14,7 @@ import TransactionStartDateStep from './TransactionStartDateStep';
 type AssignCardFeedPageProps = {
     route: {
         params: {
-            feed: ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>;
+            feed: CompanyCardFeed;
         };
     };
 } & WithPolicyAndFullscreenLoadingProps;
diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
index 7c1d427ffd7a..b4f733e54ebf 100644
--- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import type {ValueOf} from 'type-fest';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import Icon from '@components/Icon';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -20,6 +19,7 @@ import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {CompanyCardFeed} from '@src/types/onyx';
 
 type MockedCard = {
     key: string;
@@ -44,7 +44,7 @@ const mockedCardList = [
 const mockedCardListEmpty: MockedCard[] = [];
 
 type CardSelectionStepProps = {
-    feed: ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>;
+    feed: CompanyCardFeed;
 };
 
 function CardSelectionStep({feed}: CardSelectionStepProps) {
diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
index e0a9657cf710..d71b88537535 100644
--- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
@@ -39,7 +39,7 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
 
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const [selectedFeed, setSelectedFeed] = useState('');
     const [shouldShowError, setShouldShowError] = useState(false);
 
diff --git a/src/types/onyx/CardFeeds.ts b/src/types/onyx/CardFeeds.ts
index 738e5e61a82a..d04b9c5e92ed 100644
--- a/src/types/onyx/CardFeeds.ts
+++ b/src/types/onyx/CardFeeds.ts
@@ -1,6 +1,9 @@
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 
+/** Card feed provider */
+type CompanyCardFeed = ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>;
+
 /** Card feed data */
 type CardFeedData = {
     /** Whether any actions are pending */
@@ -40,7 +43,7 @@ type CardFeeds = {
 /** Data required to be sent to add a new card */
 type AddNewCardFeedData = {
     /** Card feed provider */
-    feedType: ValueOf<typeof CONST.COMPANY_CARD.FEED_BANK_NAME>;
+    feedType: CompanyCardFeed;
 
     /** Name of the bank */
     bankName?: string;
@@ -62,4 +65,4 @@ type AddNewCompanyCardFeed = {
 };
 
 export default CardFeeds;
-export type {AddNewCardFeedStep, AddNewCompanyCardFeed, AddNewCardFeedData};
+export type {AddNewCardFeedStep, AddNewCompanyCardFeed, AddNewCardFeedData, CompanyCardFeed};
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index abad91f78c77..fe559aab3aa9 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -12,7 +12,7 @@ import type CancellationDetails from './CancellationDetails';
 import type Card from './Card';
 import type {CardList, IssueNewCard, WorkspaceCardsList} from './Card';
 import type CardFeeds from './CardFeeds';
-import type {AddNewCompanyCardFeed} from './CardFeeds';
+import type {AddNewCompanyCardFeed, CompanyCardFeed} from './CardFeeds';
 import type {CapturedLogs, Log} from './Console';
 import type Credentials from './Credentials';
 import type Currency from './Currency';
@@ -134,6 +134,7 @@ export type {
     IOU,
     IssueNewCard,
     AddNewCompanyCardFeed,
+    CompanyCardFeed,
     LastExportMethod,
     Locale,
     Login,

From 294ef33d5df9ecb34d20f04b515afef6af273913 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 7 Oct 2024 11:52:44 +0200
Subject: [PATCH 12/36] Lint fix

---
 src/pages/workspace/companyCards/addNew/CardTypeStep.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx b/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
index 7e87bfbdd068..70090e374012 100644
--- a/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
@@ -1,7 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import type {ValueOf} from 'type-fest';
 import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';

From 81a01111172e9da14bc7dee714d1a9db745fb660 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 7 Oct 2024 14:57:09 +0200
Subject: [PATCH 13/36] Fix feature check

---
 .../companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx     | 1 -
 .../companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx  | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index 121b64150925..7991963ed67a 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -67,7 +67,6 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                 <Button
                     onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_SETTINGS.getRoute(policyID))}
                     icon={Expensicons.Gear}
-                    isDisabled={cardFeeds?.companyCards?.[selectedFeed].pending ?? false}
                     text={translate('common.settings')}
                     style={shouldChangeLayout && styles.flex1}
                 />
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
index 0d301507c357..23fb903db48a 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
@@ -66,7 +66,7 @@ function WorkspaceCompanyCardsSettingsFeedNamePage({
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
-            featureName={CONST.POLICY.MORE_FEATURES.ARE_TAXES_ENABLED}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}

From f62c5461d9b4839c40928f368127f1031ac19bfe Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 8 Oct 2024 09:06:54 +0200
Subject: [PATCH 14/36] Fix card feed selector

---
 .../WorkspaceCompanyCardFeedSelectorPage.tsx         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
index c30706da85e4..63cbd93180b9 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
@@ -41,14 +41,14 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
 
-    const feeds: CardFeedListItem[] = Object.entries(cardFeeds?.companyCardNicknames ?? {}).map(([key, value]) => ({
-        value: key as CompanyCardFeed,
-        text: value,
-        keyForList: key,
-        isSelected: key === selectedFeed,
+    const feeds: CardFeedListItem[] = Object.keys(cardFeeds?.companyCards ?? {}).map((feed) => ({
+        value: feed as CompanyCardFeed,
+        text: cardFeeds?.companyCardNicknames?.[selectedFeed] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${feed as CompanyCardFeed}`),
+        keyForList: feed,
+        isSelected: feed === selectedFeed,
         leftElement: (
             <Icon
-                src={CardUtils.getCardFeedIcon(key)}
+                src={CardUtils.getCardFeedIcon(feed)}
                 height={variables.iconSizeExtraLarge}
                 width={variables.iconSizeExtraLarge}
                 additionalStyles={styles.mr3}

From 9c67f3694dd2be9e354a778da3467adcd39bf8e6 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 8 Oct 2024 09:25:07 +0200
Subject: [PATCH 15/36] Add OpenPolicyCompanyCardsFeed API call

---
 .../OpenPolicyCompanyCardsFeedParams.ts           |  6 ++++++
 src/libs/API/parameters/index.ts                  |  1 +
 src/libs/API/types.ts                             |  2 ++
 src/libs/actions/Policy/Policy.ts                 | 15 ++++++++++++++-
 .../companyCards/WorkspaceCompanyCardsPage.tsx    | 10 ++++++++--
 .../WorkspaceCompanyCardsSettingsPage.tsx         |  1 +
 6 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 src/libs/API/parameters/OpenPolicyCompanyCardsFeedParams.ts

diff --git a/src/libs/API/parameters/OpenPolicyCompanyCardsFeedParams.ts b/src/libs/API/parameters/OpenPolicyCompanyCardsFeedParams.ts
new file mode 100644
index 000000000000..e3a8653886b9
--- /dev/null
+++ b/src/libs/API/parameters/OpenPolicyCompanyCardsFeedParams.ts
@@ -0,0 +1,6 @@
+type OpenPolicyCompanyCardsFeedParams = {
+    policyID: string;
+    feed: string;
+};
+
+export default OpenPolicyCompanyCardsFeedParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
index 8a74744d27fc..facc4ec46206 100644
--- a/src/libs/API/parameters/index.ts
+++ b/src/libs/API/parameters/index.ts
@@ -323,6 +323,7 @@ export type {default as UpdateCardSettlementAccountParams} from './UpdateCardSet
 export type {default as SetCompanyCardFeedName} from './SetCompanyCardFeedName';
 export type {default as DeleteCompanyCardFeed} from './DeleteCompanyCardFeed';
 export type {default as SetCompanyCardTransactionLiability} from './SetCompanyCardTransactionLiability';
+export type {default as OpenPolicyCompanyCardsFeedParams} from './OpenPolicyCompanyCardsFeedParams';
 export type {default as AssignCompanyCardParams} from './AssignCompanyCardParams';
 export type {default as UnassignCompanyCard} from './UnassignCompanyCard';
 export type {default as UpdateCompanyCard} from './UpdateCompanyCard';
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index 48d4cc76d803..621b70d855eb 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -875,6 +875,7 @@ const READ_COMMANDS = {
     OPEN_POLICY_TAXES_PAGE: 'OpenPolicyTaxesPage',
     OPEN_POLICY_REPORT_FIELDS_PAGE: 'OpenPolicyReportFieldsPage',
     OPEN_POLICY_EXPENSIFY_CARDS_PAGE: 'OpenPolicyExpensifyCardsPage',
+    OPEN_POLICY_COMPANY_CARDS_FEED: 'OpenPolicyCompanyCardsFeed',
     OPEN_POLICY_COMPANY_CARDS_PAGE: 'OpenPolicyCompanyCardsPage',
     OPEN_POLICY_EDIT_CARD_LIMIT_TYPE_PAGE: 'OpenPolicyEditCardLimitTypePage',
     OPEN_WORKSPACE_INVITE_PAGE: 'OpenWorkspaceInvitePage',
@@ -939,6 +940,7 @@ type ReadCommandParameters = {
     [READ_COMMANDS.OPEN_POLICY_ACCOUNTING_PAGE]: Parameters.OpenPolicyAccountingPageParams;
     [READ_COMMANDS.OPEN_POLICY_EXPENSIFY_CARDS_PAGE]: Parameters.OpenPolicyExpensifyCardsPageParams;
     [READ_COMMANDS.OPEN_POLICY_COMPANY_CARDS_PAGE]: Parameters.OpenPolicyExpensifyCardsPageParams;
+    [READ_COMMANDS.OPEN_POLICY_COMPANY_CARDS_FEED]: Parameters.OpenPolicyCompanyCardsFeedParams;
     [READ_COMMANDS.OPEN_POLICY_EDIT_CARD_LIMIT_TYPE_PAGE]: Parameters.OpenPolicyEditCardLimitTypePageParams;
     [READ_COMMANDS.OPEN_POLICY_PROFILE_PAGE]: Parameters.OpenPolicyProfilePageParams;
     [READ_COMMANDS.OPEN_POLICY_INITIAL_PAGE]: Parameters.OpenPolicyInitialPageParams;
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index d9779e8422cd..3d35b2de616c 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -27,6 +27,7 @@ import type {
     EnablePolicyWorkflowsParams,
     LeavePolicyParams,
     OpenDraftWorkspaceRequestParams,
+    OpenPolicyCompanyCardsFeedParams,
     OpenPolicyEditCardLimitTypePageParams,
     OpenPolicyExpensifyCardsPageParams,
     OpenPolicyInitialPageParams,
@@ -81,6 +82,7 @@ import * as PersistedRequests from '@userActions/PersistedRequests';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {
+    CompanyCardFeed,
     InvitedEmailsToAccountIDs,
     PersonalDetailsList,
     Policy,
@@ -1996,6 +1998,15 @@ function openPolicyTaxesPage(policyID: string) {
     API.read(READ_COMMANDS.OPEN_POLICY_TAXES_PAGE, params);
 }
 
+function openPolicyCompanyCardsFeed(policyID: string, feed: CompanyCardFeed) {
+    const parameters: OpenPolicyCompanyCardsFeedParams = {
+        policyID,
+        feed,
+    };
+
+    API.read(READ_COMMANDS.OPEN_POLICY_COMPANY_CARDS_FEED, parameters);
+}
+
 function openPolicyCompanyCardsPage(policyID: string, workspaceAccountID: number) {
     const authToken = NetworkStore.getAuthToken();
 
@@ -4461,7 +4472,7 @@ function setWorkspaceCompanyCardFeedName(policyID: string, workspaceAccountID: n
     API.write(WRITE_COMMANDS.SET_COMPANY_CARD_FEED_NAME, parameters, onyxData);
 }
 
-function setWorkspaceCompanyCardTransactionLiability(workspaceAccountID: number, bankName: string, liabilityType: string) {
+function setWorkspaceCompanyCardTransactionLiability(workspaceAccountID: number, policyID: string, bankName: string, liabilityType: string) {
     const authToken = NetworkStore.getAuthToken();
     const onyxData: OnyxData = {
         optimisticData: [
@@ -4479,6 +4490,7 @@ function setWorkspaceCompanyCardTransactionLiability(workspaceAccountID: number,
 
     const parameters = {
         authToken,
+        policyID,
         bankName,
         liabilityType,
     };
@@ -4874,6 +4886,7 @@ export {
     deleteWorkspaceCompanyCardFeed,
     setWorkspaceCompanyCardTransactionLiability,
     openPolicyCompanyCardsPage,
+    openPolicyCompanyCardsFeed,
     addNewCompanyCardsFeed,
     assignWorkspaceCompanyCard,
     unassignWorkspaceCompanyCard,
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 11fffd54e1e3..f62b00eca2d5 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -1,6 +1,6 @@
 import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {ActivityIndicator} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -33,6 +33,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
+    const isLoading = !cardFeeds || cardFeeds.isLoading;
 
     const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${selectedFeed}`);
 
@@ -42,12 +43,17 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
 
     useFocusEffect(fetchCompanyCards);
 
+    useEffect(() => {
+        if (!isLoading) {
+            Policy.openPolicyCompanyCardsFeed(policyID, selectedFeed);
+        }
+    }, [selectedFeed, isLoading]);
+
     const companyCards = cardFeeds?.companyCards ?? {};
     const selectedCompanyCard = companyCards[selectedFeed ?? ''] ?? null;
     const isNoFeed = !selectedCompanyCard;
     const isPending = selectedCompanyCard?.pending;
     const isFeedAdded = !isPending && !isNoFeed;
-    const isLoading = !cardFeeds || cardFeeds.isLoading;
 
     return (
         <AccessOrNotFoundWrapper
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
index 56f2e7e3140c..b181e1f821da 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
@@ -57,6 +57,7 @@ function WorkspaceCompanyCardsSettingsPage({
     const onToggleLiability = (isOn: boolean) => {
         Policy.setWorkspaceCompanyCardTransactionLiability(
             workspaceAccountID,
+            policyID,
             selectedFeed,
             isOn ? CONST.COMPANY_CARDS.DELETE_TRANSACTIONS.ALLOW : CONST.COMPANY_CARDS.DELETE_TRANSACTIONS.RESTRICT,
         );

From 364301ea655e214c63a76bb5a8b591a4799b454f Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 9 Oct 2024 09:28:27 +0200
Subject: [PATCH 16/36] Minor fix

---
 .../companyCards/WorkspaceCompanyCardsFeedPendingPage.tsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedPendingPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedPendingPage.tsx
index f387de8c6f03..561e4548ea1f 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedPendingPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedPendingPage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import * as Illustrations from '@components/Icon/Illustrations';
 import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton';
+import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -14,10 +15,10 @@ function WorkspaceCompanyCardsFeedPendingPage() {
     const styles = useThemeStyles();
 
     const subtitle = (
-        <>
+        <Text>
             {translate('workspace.moreFeatures.companyCards.pendingFeedDescription')}
             <TextLink onPress={() => ReportInstance.navigateToConciergeChat()}> {CONST?.CONCIERGE_CHAT_NAME}</TextLink>
-        </>
+        </Text>
     );
 
     return (

From d61b15e569461012b9efd1286e3b1b1e2af886bf Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 9 Oct 2024 09:54:54 +0200
Subject: [PATCH 17/36] Update CardFeeds type to follow BE updates

---
 src/libs/CardUtils.ts                         |  2 +-
 src/libs/actions/Policy/Policy.ts             | 24 ++++++++++++-------
 .../workspace/WorkspaceMoreFeaturesPage.tsx   |  2 +-
 .../WorkspaceCompanyCardFeedSelectorPage.tsx  |  4 ++--
 ...WorkspaceCompanyCardsListHeaderButtons.tsx |  4 ++--
 .../WorkspaceCompanyCardsPage.tsx             |  2 +-
 ...kspaceCompanyCardsSettingsFeedNamePage.tsx |  2 +-
 .../WorkspaceCompanyCardsSettingsPage.tsx     |  4 ++--
 .../members/WorkspaceMemberNewCardPage.tsx    |  2 +-
 src/types/onyx/CardFeeds.ts                   | 13 ++++++----
 10 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 1841bf09c256..86f09a8663a4 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -238,7 +238,7 @@ function getMemberCards(policy: OnyxEntry<Policy>, allCardsList: OnyxCollection<
 }
 
 function getSelectedFeed(lastSelectedFeed: OnyxEntry<CompanyCardFeed>, cardFeeds: OnyxEntry<CardFeeds>): CompanyCardFeed {
-    const defaultFeed = Object.keys(cardFeeds?.companyCards ?? {}).at(0) as CompanyCardFeed;
+    const defaultFeed = Object.keys(cardFeeds?.settings?.companyCards ?? {}).at(0) as CompanyCardFeed;
     return lastSelectedFeed ?? defaultFeed;
 }
 
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 3d35b2de616c..cfff83536232 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -4454,8 +4454,10 @@ function setWorkspaceCompanyCardFeedName(policyID: string, workspaceAccountID: n
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
                 value: {
-                    companyCardNicknames: {
-                        [bankName]: userDefinedName,
+                    settings: {
+                        companyCardNicknames: {
+                            [bankName]: userDefinedName,
+                        },
                     },
                 },
             },
@@ -4480,8 +4482,10 @@ function setWorkspaceCompanyCardTransactionLiability(workspaceAccountID: number,
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
                 value: {
-                    companyCards: {
-                        [bankName]: {liabilityType},
+                    settings: {
+                        companyCards: {
+                            [bankName]: {liabilityType},
+                        },
                     },
                 },
             },
@@ -4507,11 +4511,13 @@ function deleteWorkspaceCompanyCardFeed(policyID: string, workspaceAccountID: nu
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
                 value: {
-                    companyCards: {
-                        [bankName]: null,
-                    },
-                    companyCardNicknames: {
-                        [bankName]: null,
+                    settings: {
+                        companyCards: {
+                            [bankName]: null,
+                        },
+                        companyCardNicknames: {
+                            [bankName]: null,
+                        },
                     },
                 },
             },
diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 381853e456dc..87842ca03c7a 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -130,7 +130,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
             subtitleTranslationKey: 'workspace.moreFeatures.companyCards.subtitle',
             isActive: policy?.areCompanyCardsEnabled ?? false,
             pendingAction: policy?.pendingFields?.areCompanyCardsEnabled,
-            disabled: !isEmptyObject(cardFeeds?.companyCards),
+            disabled: !isEmptyObject(cardFeeds?.settings?.companyCards),
             action: (isEnabled: boolean) => {
                 if (!policyID) {
                     return;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
index 63cbd93180b9..e75bf8af258a 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
@@ -41,9 +41,9 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
 
-    const feeds: CardFeedListItem[] = Object.keys(cardFeeds?.companyCards ?? {}).map((feed) => ({
+    const feeds: CardFeedListItem[] = Object.keys(cardFeeds?.settings?.companyCards ?? {}).map((feed) => ({
         value: feed as CompanyCardFeed,
-        text: cardFeeds?.companyCardNicknames?.[selectedFeed] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${feed as CompanyCardFeed}`),
+        text: cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${feed as CompanyCardFeed}`),
         keyForList: feed,
         isSelected: feed === selectedFeed,
         leftElement: (
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index 7991963ed67a..a74885866d6b 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -33,7 +33,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const shouldChangeLayout = isMediumScreenWidth || shouldUseNarrowLayout;
-    const feedName = cardFeeds?.companyCardNicknames?.[selectedFeed] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${selectedFeed}`);
+    const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${selectedFeed}`);
 
     return (
         <View style={[styles.w100, styles.ph5, !shouldChangeLayout ? [styles.pv2, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween] : styles.pb2]}>
@@ -58,7 +58,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
             <View style={[styles.flexRow, styles.gap2]}>
                 <Button
                     success
-                    isDisabled={cardFeeds?.companyCards?.[selectedFeed].pending ?? false}
+                    isDisabled={cardFeeds?.settings?.companyCards?.[selectedFeed].pending ?? false}
                     onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD.getRoute(policyID, selectedFeed))}
                     icon={Expensicons.Plus}
                     text={translate('workspace.companyCards.assignCard')}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index f62b00eca2d5..dba0ec3f2412 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -49,7 +49,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
         }
     }, [selectedFeed, isLoading]);
 
-    const companyCards = cardFeeds?.companyCards ?? {};
+    const companyCards = cardFeeds?.settings?.companyCards ?? {};
     const selectedCompanyCard = companyCards[selectedFeed ?? ''] ?? null;
     const isNoFeed = !selectedCompanyCard;
     const isPending = selectedCompanyCard?.pending;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
index 23fb903db48a..9e2f8f2a0b43 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
@@ -41,7 +41,7 @@ function WorkspaceCompanyCardsSettingsFeedNamePage({
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
-    const feedName = cardFeeds?.companyCardNicknames?.[selectedFeed] ?? '';
+    const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? '';
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_COMPANY_CARD_FEED_NAME>) => {
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
index b181e1f821da..2f21feb4f02d 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
@@ -40,8 +40,8 @@ function WorkspaceCompanyCardsSettingsPage({
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
-    const feedName = cardFeeds?.companyCardNicknames?.[selectedFeed] ?? '';
-    const liabilityType = cardFeeds?.companyCards?.[selectedFeed]?.liabilityType;
+    const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? '';
+    const liabilityType = cardFeeds?.settings?.companyCards?.[selectedFeed]?.liabilityType;
     const isPersonal = liabilityType === CONST.COMPANY_CARDS.DELETE_TRANSACTIONS.ALLOW;
 
     const navigateToChangeFeedName = () => {
diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
index d71b88537535..7558e79073f5 100644
--- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
@@ -79,7 +79,7 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
         setShouldShowError(false);
     };
 
-    const companyCardFeeds: CardFeedListItem[] = Object.entries(cardFeeds?.companyCardNicknames ?? {}).map(([key, value]) => ({
+    const companyCardFeeds: CardFeedListItem[] = Object.entries(cardFeeds?.settings?.companyCardNicknames ?? {}).map(([key, value]) => ({
         value: key,
         text: value,
         keyForList: key,
diff --git a/src/types/onyx/CardFeeds.ts b/src/types/onyx/CardFeeds.ts
index d04b9c5e92ed..d4f405d7df84 100644
--- a/src/types/onyx/CardFeeds.ts
+++ b/src/types/onyx/CardFeeds.ts
@@ -30,11 +30,14 @@ type CardFeedData = {
 
 /** Card feeds model */
 type CardFeeds = {
-    /** Company cards feeds */
-    companyCards: Record<string, CardFeedData>;
-
-    /** User-friendly feed nicknames */
-    companyCardNicknames: Record<string, string>;
+    /** Feed settings */
+    settings: {
+        /** User-friendly feed nicknames */
+        companyCardNicknames: Record<string, string>;
+
+        /** Company cards feeds */
+        companyCards: Record<string, CardFeedData>;
+    };
 
     /** Whether we are loading the data via the API */
     isLoading?: boolean;

From 1bd714a8ae16f2e46c51c08636b63558a9bf12cc Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 9 Oct 2024 10:48:17 +0200
Subject: [PATCH 18/36] Fix Empty view display

---
 src/libs/CardUtils.ts                                         | 4 +++-
 .../workspace/companyCards/WorkspaceCompanyCardsPage.tsx      | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 86f09a8663a4..b31083cdc3cc 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -172,7 +172,9 @@ function getEligibleBankAccountsForCard(bankAccountsList: OnyxEntry<BankAccountL
 }
 
 function sortCardsByCardholderName(cardsList: OnyxEntry<WorkspaceCardsList>, personalDetails: OnyxEntry<PersonalDetailsList>): Card[] {
-    return Object.values(cardsList ?? {}).sort((cardA: Card, cardB: Card) => {
+    const KEY_TO_FILTER = 'cardList';
+    const filteredList = Object.fromEntries(Object.entries(cardsList ?? {}).filter(([key]) => key !== KEY_TO_FILTER));
+    return Object.values(filteredList).sort((cardA: Card, cardB: Card) => {
         const userA = personalDetails?.[cardA.accountID ?? '-1'] ?? {};
         const userB = personalDetails?.[cardB.accountID ?? '-1'] ?? {};
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index dba0ec3f2412..d2b95b063232 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -85,7 +85,6 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
                         />
                     )}
                     {isNoFeed && <WorkspaceCompanyCardPageEmptyState route={route} />}
-                    {isFeedAdded && !isPending && <WorkspaceCompanyCardsFeedAddedEmptyPage />}
                     {isPending && <WorkspaceCompanyCardsFeedPendingPage />}
                     {isFeedAdded && !isPending && (
                         <WorkspaceCompanyCardsList

From 90bd1622eebef074f328c9469999008bc85af2fc Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 9 Oct 2024 11:40:47 +0200
Subject: [PATCH 19/36] Fix assign card flow

---
 src/libs/CardUtils.ts                         |  5 +-
 .../WorkspaceCompanyCardsList.tsx             |  2 +-
 .../assignCard/AssignCardFeedPage.tsx         | 10 +++-
 .../assignCard/CardSelectionStep.tsx          | 53 ++++++++-----------
 .../members/WorkspaceMemberDetailsPage.tsx    |  3 +-
 src/types/onyx/Card.ts                        |  5 +-
 6 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index b31083cdc3cc..ee1a253f8abf 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -172,9 +172,8 @@ function getEligibleBankAccountsForCard(bankAccountsList: OnyxEntry<BankAccountL
 }
 
 function sortCardsByCardholderName(cardsList: OnyxEntry<WorkspaceCardsList>, personalDetails: OnyxEntry<PersonalDetailsList>): Card[] {
-    const KEY_TO_FILTER = 'cardList';
-    const filteredList = Object.fromEntries(Object.entries(cardsList ?? {}).filter(([key]) => key !== KEY_TO_FILTER));
-    return Object.values(filteredList).sort((cardA: Card, cardB: Card) => {
+    const {cardList, ...cards} = cardsList ?? {};
+    return Object.values(cards).sort((cardA: Card, cardB: Card) => {
         const userA = personalDetails?.[cardA.accountID ?? '-1'] ?? {};
         const userB = personalDetails?.[cardB.accountID ?? '-1'] ?? {};
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index c9c01592304a..1d254d5bb600 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -55,7 +55,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
                     >
                         <WorkspaceCompanyCardsListRow
                             cardholder={personalDetails?.[item.accountID ?? '-1']}
-                            cardNumber={item?.cardNumber ?? ''}
+                            cardNumber={item?.lastFourPAN ?? ''}
                             name={item.nameValuePairs?.cardTitle ?? ''}
                         />
                     </PressableWithFeedback>
diff --git a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
index 5dffda0e1b38..adefd522661c 100644
--- a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
+++ b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
@@ -24,6 +24,7 @@ function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
     const currentStep = assignCard?.currentStep;
 
     const feed = route.params?.feed;
+    const policyID = policy?.id ?? '-1';
 
     useEffect(() => {
         CompanyCards.setAssignCardStepAndData({data: {bankName: feed}});
@@ -33,11 +34,16 @@ function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
         case CONST.COMPANY_CARD.STEP.ASSIGNEE:
             return <AssigneeStep policy={policy} />;
         case CONST.COMPANY_CARD.STEP.CARD:
-            return <CardSelectionStep feed={feed} />;
+            return (
+                <CardSelectionStep
+                    feed={feed}
+                    policyID={policyID}
+                />
+            );
         case CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE:
             return <TransactionStartDateStep />;
         case CONST.COMPANY_CARD.STEP.CONFIRMATION:
-            return <ConfirmationStep policyID={policy?.id ?? '-1'} />;
+            return <ConfirmationStep policyID={policyID} />;
         default:
             return <AssigneeStep policy={policy} />;
     }
diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
index b4f733e54ebf..04713ba2fa90 100644
--- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
@@ -14,6 +14,7 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import * as PolicyUtils from '@libs/PolicyUtils';
 import variables from '@styles/variables';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
@@ -21,37 +22,22 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {CompanyCardFeed} from '@src/types/onyx';
 
-type MockedCard = {
-    key: string;
-    encryptedCardNumber: string;
-};
-
-const mockedCardList = [
-    {
-        key: '1',
-        encryptedCardNumber: '123412XXXXXX1234',
-    },
-    {
-        key: '2',
-        encryptedCardNumber: '123412XXXXXX1235',
-    },
-    {
-        key: '3',
-        encryptedCardNumber: '123412XXXXXX1236',
-    },
-];
-
-const mockedCardListEmpty: MockedCard[] = [];
-
 type CardSelectionStepProps = {
+    /** Selected feed */
     feed: CompanyCardFeed;
+
+    /** Current policy id */
+    policyID: string;
 };
 
-function CardSelectionStep({feed}: CardSelectionStepProps) {
+function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
+    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
+
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {environmentURL} = useEnvironment();
     const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);
+    const [list] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${feed}`);
 
     const isEditing = assignCard?.isEditing;
     const assignee = assignCard?.data?.email ?? '';
@@ -80,21 +66,24 @@ function CardSelectionStep({feed}: CardSelectionStepProps) {
             setShouldShowError(true);
             return;
         }
+
+        const cardName =
+            Object.entries(list?.cardList ?? {})
+                .find(([cardNumber, encryptedCardNumber]) => encryptedCardNumber === cardSelected)
+                ?.at(0) ?? '';
+
         CompanyCards.setAssignCardStepAndData({
             currentStep: isEditing ? CONST.COMPANY_CARD.STEP.CONFIRMATION : CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE,
-            data: {encryptedCardNumber: cardSelected},
+            data: {encryptedCardNumber: cardSelected, cardName},
             isEditing: false,
         });
     };
 
-    // TODO: for now mocking cards
-    const mockedCards = !Object.values(CONST.COMPANY_CARD.FEED_BANK_NAME).some((value) => value === feed) ? mockedCardListEmpty : mockedCardList;
-
-    const cardListOptions = mockedCards.map((item) => ({
-        keyForList: item?.encryptedCardNumber,
-        value: item?.encryptedCardNumber,
-        text: item?.encryptedCardNumber,
-        isSelected: cardSelected === item?.encryptedCardNumber,
+    const cardListOptions = Object.entries(list?.cardList ?? {}).map(([cardNumber, encryptedCardNumber]) => ({
+        keyForList: encryptedCardNumber,
+        value: encryptedCardNumber,
+        text: cardNumber,
+        isSelected: cardSelected === encryptedCardNumber,
         leftElement: (
             <Icon
                 src={CardUtils.getCardFeedIcon(feed)}
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index 52814f5da23d..3a323c4820e2 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -88,7 +88,8 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
         if (!expensifyCardsList) {
             return [];
         }
-        return Object.values(expensifyCardsList).filter((expensifyCard) => expensifyCard.accountID === accountID);
+        const {cardList, ...expensifyCards} = expensifyCardsList;
+        return Object.values(expensifyCards).filter((expensifyCard) => expensifyCard.accountID === accountID);
     }, [expensifyCardsList, accountID]);
 
     const confirmModalPrompt = useMemo(() => {
diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index 8ddc21bb4a8e..444c74855e62 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -157,7 +157,10 @@ type IssueNewCard = {
 };
 
 /** List of Expensify cards */
-type WorkspaceCardsList = Record<string, Card>;
+type WorkspaceCardsList = Record<string, Card> & {
+    /** List of cards to assign */
+    cardList?: Record<string, string>;
+};
 
 export default Card;
 export type {ExpensifyCardDetails, CardList, IssueNewCard, IssueNewCardStep, IssueNewCardData, WorkspaceCardsList, CardLimitType};

From 610ef21eff437967d024d21fbb30ea61bef11ebe Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 9 Oct 2024 15:58:38 +0200
Subject: [PATCH 20/36] Filter out assigned card, fixes

---
 src/libs/CardUtils.ts                              | 14 +++++++++++---
 .../companyCards/WorkspaceCompanyCardsList.tsx     |  3 ++-
 .../companyCards/WorkspaceCompanyCardsPage.tsx     |  1 -
 .../companyCards/assignCard/CardSelectionStep.tsx  |  9 +++++++--
 .../members/WorkspaceMemberDetailsPage.tsx         |  2 +-
 .../members/WorkspaceMemberNewCardPage.tsx         |  5 +++--
 6 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index ee1a253f8abf..51c847f9b1c3 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -184,6 +184,14 @@ function sortCardsByCardholderName(cardsList: OnyxEntry<WorkspaceCardsList>, per
     });
 }
 
+function getCompanyCardNumber(cardList: Record<string, string>, lastFourPAN?: string): string {
+    if (!lastFourPAN) {
+        return '';
+    }
+
+    return Object.keys(cardList).find((card) => card.endsWith(lastFourPAN)) ?? '';
+}
+
 function getCardFeedIcon(cardFeed: string): IconAsset {
     if (cardFeed.startsWith(CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD)) {
         return Illustrations.MasterCardCompanyCards;
@@ -221,11 +229,10 @@ function getCardDetailsImage(cardFeed: string): IconAsset {
 function getMemberCards(policy: OnyxEntry<Policy>, allCardsList: OnyxCollection<WorkspaceCardsList>, accountID?: number) {
     const workspaceId = policy?.workspaceAccountID ? policy.workspaceAccountID.toString() : '';
     const cards: WorkspaceCardsList = {};
-    const mockedCardsList = allCardsList ?? {};
-    Object.keys(mockedCardsList)
+    Object.keys(allCardsList ?? {})
         .filter((key) => key !== `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceId}_${CONST.EXPENSIFY_CARD.BANK}` && key.includes(workspaceId))
         .forEach((key) => {
-            const feedCards = mockedCardsList?.[key];
+            const feedCards = allCardsList?.[key];
             if (feedCards && Object.keys(feedCards).length > 0) {
                 Object.keys(feedCards).forEach((feedCardKey) => {
                     if (feedCards?.[feedCardKey].accountID !== accountID) {
@@ -258,6 +265,7 @@ export {
     getTranslationKeyForLimitType,
     getEligibleBankAccountsForCard,
     sortCardsByCardholderName,
+    getCompanyCardNumber,
     getCardFeedIcon,
     getCardFeedName,
     getCardDetailsImage,
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index 1d254d5bb600..153b854534db 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -29,6 +29,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const cardList = cardsList?.cardList ?? {};
 
     const sortedCards = useMemo(() => CardUtils.sortCardsByCardholderName(cardsList, personalDetails), [cardsList, personalDetails]);
 
@@ -55,7 +56,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
                     >
                         <WorkspaceCompanyCardsListRow
                             cardholder={personalDetails?.[item.accountID ?? '-1']}
-                            cardNumber={item?.lastFourPAN ?? ''}
+                            cardNumber={CardUtils.getCompanyCardNumber(cardList, item.lastFourPAN)}
                             name={item.nameValuePairs?.cardTitle ?? ''}
                         />
                     </PressableWithFeedback>
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index d2b95b063232..f884bafa1d10 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -17,7 +17,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import WorkspaceCompanyCardPageEmptyState from './WorkspaceCompanyCardPageEmptyState';
-import WorkspaceCompanyCardsFeedAddedEmptyPage from './WorkspaceCompanyCardsFeedAddedEmptyPage';
 import WorkspaceCompanyCardsFeedPendingPage from './WorkspaceCompanyCardsFeedPendingPage';
 import WorkspaceCompanyCardsList from './WorkspaceCompanyCardsList';
 import WorkspaceCompanyCardsListHeaderButtons from './WorkspaceCompanyCardsListHeaderButtons';
diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
index 04713ba2fa90..0f2ffa92e943 100644
--- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
@@ -41,6 +41,11 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
 
     const isEditing = assignCard?.isEditing;
     const assignee = assignCard?.data?.email ?? '';
+    const {cardList, ...cards} = list ?? {};
+    // We need to filter out cards which already has been assigned
+    const filteredCardList = Object.fromEntries(
+        Object.entries(cardList ?? {}).filter(([cardNumber]) => !Object.values(cards).find((card) => card.lastFourPAN && cardNumber.endsWith(card.lastFourPAN))),
+    );
 
     const [cardSelected, setCardSelected] = useState(assignCard?.data?.encryptedCardNumber ?? '');
     const [shouldShowError, setShouldShowError] = useState(false);
@@ -68,7 +73,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
         }
 
         const cardName =
-            Object.entries(list?.cardList ?? {})
+            Object.entries(filteredCardList)
                 .find(([cardNumber, encryptedCardNumber]) => encryptedCardNumber === cardSelected)
                 ?.at(0) ?? '';
 
@@ -79,7 +84,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
         });
     };
 
-    const cardListOptions = Object.entries(list?.cardList ?? {}).map(([cardNumber, encryptedCardNumber]) => ({
+    const cardListOptions = Object.entries(filteredCardList).map(([cardNumber, encryptedCardNumber]) => ({
         keyForList: encryptedCardNumber,
         value: encryptedCardNumber,
         text: cardNumber,
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index 3a323c4820e2..0331cc2be899 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -294,7 +294,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                         onRoleChange={changeRole}
                                         onClose={() => setIsRoleSelectionModalVisible(false)}
                                     />
-                                    {(policy?.areExpensifyCardsEnabled ?? policy?.areCompanyCardsEnabled) && (
+                                    {(policy?.areExpensifyCardsEnabled || policy?.areCompanyCardsEnabled) && (
                                         <>
                                             <View style={[styles.ph5, styles.pv3]}>
                                                 <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting])}>
diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
index 7558e79073f5..0dbfb55cdb21 100644
--- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
@@ -25,6 +25,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
+import type {CompanyCardFeed} from '@src/types/onyx';
 
 type CardFeedListItem = ListItem & {
     /** Card feed value */
@@ -79,9 +80,9 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
         setShouldShowError(false);
     };
 
-    const companyCardFeeds: CardFeedListItem[] = Object.entries(cardFeeds?.settings?.companyCardNicknames ?? {}).map(([key, value]) => ({
+    const companyCardFeeds: CardFeedListItem[] = Object.keys(cardFeeds?.settings?.companyCards ?? {}).map((key) => ({
         value: key,
-        text: value,
+        text: cardFeeds?.settings?.companyCardNicknames?.[key] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${key as CompanyCardFeed}`),
         keyForList: key,
         isSelected: selectedFeed === key,
         leftElement: (

From 9897fabfd1edd704ea99671dbd0147fd38a24be2 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 9 Oct 2024 16:05:59 +0200
Subject: [PATCH 21/36] Lint fix

---
 src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index 0331cc2be899..f7c6dba6f316 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -294,7 +294,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                         onRoleChange={changeRole}
                                         onClose={() => setIsRoleSelectionModalVisible(false)}
                                     />
-                                    {(policy?.areExpensifyCardsEnabled || policy?.areCompanyCardsEnabled) && (
+                                    {(!!policy?.areExpensifyCardsEnabled || !!policy?.areCompanyCardsEnabled) && (
                                         <>
                                             <View style={[styles.ph5, styles.pv3]}>
                                                 <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting])}>

From 418b6416891a4b07042c5fcf9ac2ce0bd4d3ac22 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 9 Oct 2024 16:56:13 +0200
Subject: [PATCH 22/36] Lint fixes

---
 .../workspace/companyCards/WorkspaceCompanyCardsList.tsx   | 3 +--
 .../workspace/companyCards/WorkspaceCompanyCardsPage.tsx   | 7 ++++---
 .../companyCards/assignCard/CardSelectionStep.tsx          | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index 153b854534db..015df6782e3f 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -29,7 +29,6 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
-    const cardList = cardsList?.cardList ?? {};
 
     const sortedCards = useMemo(() => CardUtils.sortCardsByCardholderName(cardsList, personalDetails), [cardsList, personalDetails]);
 
@@ -56,7 +55,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
                     >
                         <WorkspaceCompanyCardsListRow
                             cardholder={personalDetails?.[item.accountID ?? '-1']}
-                            cardNumber={CardUtils.getCompanyCardNumber(cardList, item.lastFourPAN)}
+                            cardNumber={CardUtils.getCompanyCardNumber(cardsList?.cardList ?? {}, item.lastFourPAN)}
                             name={item.nameValuePairs?.cardTitle ?? ''}
                         />
                     </PressableWithFeedback>
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index f884bafa1d10..39fefead2bc2 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -43,10 +43,11 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     useFocusEffect(fetchCompanyCards);
 
     useEffect(() => {
-        if (!isLoading) {
-            Policy.openPolicyCompanyCardsFeed(policyID, selectedFeed);
+        if (isLoading) {
+            return;
         }
-    }, [selectedFeed, isLoading]);
+        Policy.openPolicyCompanyCardsFeed(policyID, selectedFeed);
+    }, [selectedFeed, isLoading, policyID]);
 
     const companyCards = cardFeeds?.settings?.companyCards ?? {};
     const selectedCompanyCard = companyCards[selectedFeed ?? ''] ?? null;
diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
index 0f2ffa92e943..ef5c51927a9b 100644
--- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
@@ -74,7 +74,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
 
         const cardName =
             Object.entries(filteredCardList)
-                .find(([cardNumber, encryptedCardNumber]) => encryptedCardNumber === cardSelected)
+                .find(([, encryptedCardNumber]) => encryptedCardNumber === cardSelected)
                 ?.at(0) ?? '';
 
         CompanyCards.setAssignCardStepAndData({

From 47d6963b5af6edb8631b81d29533be99030831d4 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 9 Oct 2024 17:26:19 +0200
Subject: [PATCH 23/36] TS fix, pass optimistic CardAssigned report action

---
 src/libs/ReportUtils.ts           |  3 ++-
 src/libs/actions/Policy/Policy.ts | 35 ++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 9e514f6dc5cb..8be637ef1109 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -5589,7 +5589,8 @@ function buildOptimisticCardAssignedReportAction(assigneeAccountID: number): Opt
         actorAccountID: currentUserAccountID,
         avatar: getCurrentUserAvatar(),
         created: DateUtils.getDBTime(),
-        originalMessage: {assigneeAccountID},
+        originalMessage: {assigneeAccountID, cardID: -1},
+        message: [{type: CONST.REPORT.MESSAGE.TYPE.COMMENT, text: '', html: ''}],
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
         person: [
             {
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index cfff83536232..6fda0d0acaad 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -4549,8 +4549,41 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial<AssignCardD
         startDate,
         reportActionID: optimisticCardAssignedReportAction.reportActionID,
     };
+    const policy = getPolicy(policyID);
+    const policyExpenseChat = ReportUtils.getPolicyExpenseChat(policy?.ownerAccountID ?? -1, policyID);
+
+    const onyxData: OnyxData = {
+        optimisticData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${policyExpenseChat?.reportID}`,
+                value: {
+                    [optimisticCardAssignedReportAction.reportActionID]: optimisticCardAssignedReportAction,
+                },
+            },
+        ],
+        successData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${policyExpenseChat?.reportID}`,
+                value: {[optimisticCardAssignedReportAction.reportActionID]: {pendingAction: null}},
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${policyExpenseChat?.reportID}`,
+                value: {
+                    [optimisticCardAssignedReportAction.reportActionID]: {
+                        pendingAction: null,
+                        errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                    },
+                },
+            },
+        ],
+    };
 
-    API.write(WRITE_COMMANDS.ASSIGN_COMPANY_CARD, parameters);
+    API.write(WRITE_COMMANDS.ASSIGN_COMPANY_CARD, parameters, onyxData);
 }
 
 function unassignWorkspaceCompanyCard(workspaceAccountID: number, cardID: string, bankName: string) {

From 68883ee564db12f42bd50931fd551b74a126e648 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 10 Oct 2024 13:18:21 +0200
Subject: [PATCH 24/36] Display all cards on the member details page

---
 src/libs/CardUtils.ts                         |  5 ++
 .../members/WorkspaceMemberDetailsPage.tsx    | 68 +++++++------------
 2 files changed, 31 insertions(+), 42 deletions(-)

diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 51c847f9b1c3..4ec6e0a1a6ca 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -2,6 +2,7 @@ import groupBy from 'lodash/groupBy';
 import Onyx from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import * as Illustrations from '@src/components/Icon/Illustrations';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -223,6 +224,10 @@ function getCardDetailsImage(cardFeed: string): IconAsset {
         return Illustrations.VisaCompanyCardDetail;
     }
 
+    if (cardFeed.startsWith(CONST.EXPENSIFY_CARD.BANK)) {
+        return ExpensifyCardImage;
+    }
+
     return Illustrations.AmexCardCompanyCardDetail;
 }
 
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index f7c6dba6f316..a95864c19bae 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -4,7 +4,6 @@ import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
-import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import Avatar from '@components/Avatar';
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
@@ -35,11 +34,12 @@ import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullsc
 import variables from '@styles/variables';
 import * as Card from '@userActions/Card';
 import * as Member from '@userActions/Policy/Member';
+import * as Policy from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx';
+import type {Card as MemberCard, PersonalDetails, PersonalDetailsList} from '@src/types/onyx';
 import type {ListItemType} from './WorkspaceMemberDetailsRoleSelectionModal';
 import WorkspaceMemberDetailsRoleSelectionModal from './WorkspaceMemberDetailsRoleSelectionModal';
 
@@ -61,8 +61,8 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
     const {translate} = useLocalize();
     const StyleUtils = useStyleUtils();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
-    const [expensifyCardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);
-    const [allCardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}`);
+    const [allCardsList] = useOnyx(`${ONYXKEYS.CARD_LIST}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
     const [isRemoveMemberConfirmModalVisible, setIsRemoveMemberConfirmModalVisible] = useState(false);
     const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(false);
 
@@ -79,18 +79,18 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
     const isCurrentUserOwner = policy?.owner === currentUserPersonalDetails?.login;
     const ownerDetails = personalDetails?.[policy?.ownerAccountID ?? -1] ?? ({} as PersonalDetails);
     const policyOwnerDisplayName = ownerDetails.displayName ?? policy?.owner ?? '';
-    const companyCards = CardUtils.getMemberCards(policy, allCardsList, accountID);
+    const hasMultipleFeeds = Object.values(cardFeeds?.settings?.companyCards ?? {}).filter((feed) => !feed.pending).length > 0;
 
-    // TODO: for now enabled for testing purposes. Change this to check for the actual multiple feeds when API is ready
-    const hasMultipleFeeds = policy?.areCompanyCardsEnabled;
+    useEffect(() => {
+        Policy.openPolicyCompanyCardsPage(policyID, workspaceAccountID);
+    }, [policyID, workspaceAccountID]);
 
     const memberCards = useMemo(() => {
-        if (!expensifyCardsList) {
+        if (!allCardsList) {
             return [];
         }
-        const {cardList, ...expensifyCards} = expensifyCardsList;
-        return Object.values(expensifyCards).filter((expensifyCard) => expensifyCard.accountID === accountID);
-    }, [expensifyCardsList, accountID]);
+        return Object.values(allCardsList ?? {}).filter((card) => card.accountID === accountID);
+    }, [allCardsList, accountID]);
 
     const confirmModalPrompt = useMemo(() => {
         const isApprover = Member.isApprover(policy, accountID);
@@ -151,15 +151,12 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
     }, [accountID]);
 
     const navigateToDetails = useCallback(
-        (cardID: string) => {
-            Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID, Navigation.getActiveRoute()));
-        },
-        [policyID],
-    );
-
-    const navigateToCompanyCardDetails = useCallback(
-        (cardID: string, bank: string) => {
-            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, bank, Navigation.getActiveRoute()));
+        (card: MemberCard) => {
+            if (card.bank === CONST.EXPENSIFY_CARD.BANK) {
+                Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, card.cardID.toString(), Navigation.getActiveRoute()));
+                return;
+            }
+            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, card.cardID.toString(), card.bank, Navigation.getActiveRoute()));
         },
         [policyID],
     );
@@ -294,7 +291,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                         onRoleChange={changeRole}
                                         onClose={() => setIsRoleSelectionModalVisible(false)}
                                     />
-                                    {(!!policy?.areExpensifyCardsEnabled || !!policy?.areCompanyCardsEnabled) && (
+                                    {(!!policy?.areExpensifyCardsEnabled || (!!policy?.areCompanyCardsEnabled && hasMultipleFeeds)) && (
                                         <>
                                             <View style={[styles.ph5, styles.pv3]}>
                                                 <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting])}>
@@ -303,35 +300,22 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                             </View>
                                             {memberCards.map((memberCard) => (
                                                 <MenuItem
-                                                    title={memberCard.nameValuePairs?.cardTitle}
-                                                    badgeText={CurrencyUtils.convertToDisplayString(memberCard.nameValuePairs?.unapprovedExpenseLimit)}
-                                                    icon={ExpensifyCardImage}
+                                                    title={memberCard.nameValuePairs?.cardTitle ?? memberCard?.cardNumber}
+                                                    badgeText={
+                                                        memberCard.bank === CONST.EXPENSIFY_CARD.BANK
+                                                            ? CurrencyUtils.convertToDisplayString(memberCard.nameValuePairs?.unapprovedExpenseLimit)
+                                                            : ''
+                                                    }
+                                                    icon={CardUtils.getCardDetailsImage(memberCard?.bank ?? '')}
                                                     displayInDefaultIconColor
                                                     iconStyles={styles.cardIcon}
                                                     contentFit="contain"
                                                     iconWidth={variables.cardIconWidth}
                                                     iconHeight={variables.cardIconHeight}
-                                                    onPress={() => navigateToDetails(memberCard.cardID.toString())}
+                                                    onPress={() => navigateToDetails(memberCard)}
                                                     shouldShowRightIcon
                                                 />
                                             ))}
-                                            {Object.keys(companyCards ?? {}).map((companyCardKey) => {
-                                                const companyCard = companyCards[companyCardKey];
-                                                return (
-                                                    <MenuItem
-                                                        key={companyCardKey}
-                                                        title={companyCard?.cardNumber ?? ''}
-                                                        icon={CardUtils.getCardDetailsImage(companyCard?.bank ?? '')}
-                                                        displayInDefaultIconColor
-                                                        iconStyles={styles.cardIcon}
-                                                        contentFit="contain"
-                                                        iconWidth={variables.cardIconWidth}
-                                                        iconHeight={variables.cardIconHeight}
-                                                        onPress={() => navigateToCompanyCardDetails(companyCardKey, companyCard?.bank)}
-                                                        shouldShowRightIcon
-                                                    />
-                                                );
-                                            })}
                                             <MenuItem
                                                 title={translate('workspace.expensifyCard.newCard')}
                                                 icon={Expensicons.Plus}

From 79e5c2b9de8b391ed0c0bc36e1bf9e9b82b714b5 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Fri, 11 Oct 2024 09:33:23 +0200
Subject: [PATCH 25/36] Rename the domain member onyx key

---
 src/ONYXKEYS.ts                                      |  4 ++--
 src/libs/actions/Policy/Policy.ts                    | 12 ++++++------
 src/pages/workspace/WorkspaceMoreFeaturesPage.tsx    |  2 +-
 .../WorkspaceCompanyCardFeedSelectorPage.tsx         |  2 +-
 .../WorkspaceCompanyCardsListHeaderButtons.tsx       |  2 +-
 .../companyCards/WorkspaceCompanyCardsPage.tsx       |  2 +-
 .../WorkspaceCompanyCardsSettingsFeedNamePage.tsx    |  2 +-
 .../WorkspaceCompanyCardsSettingsPage.tsx            |  2 +-
 .../workspace/members/WorkspaceMemberDetailsPage.tsx |  2 +-
 .../workspace/members/WorkspaceMemberNewCardPage.tsx |  2 +-
 10 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 2c707c78d75c..a8de931a3eca 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -498,7 +498,7 @@ const ONYXKEYS = {
         SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END: 'sharedNVP_private_billingGracePeriodEnd_',
 
         /** The collection of card feeds */
-        DOMAIN_MEMBER: 'domain_member_',
+        SHARED_NVP_PRIVATE_DOMAIN_MEMBER: 'sharedNVP_private_domain_member_',
 
         /**
          * Stores the card list for a given fundID and feed in the format: cards_<fundID>_<bankName>
@@ -844,7 +844,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS]: OnyxTypes.PolicyConnectionSyncProgress;
     [ONYXKEYS.COLLECTION.SNAPSHOT]: OnyxTypes.SearchResults;
     [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END]: OnyxTypes.BillingGraceEndPeriod;
-    [ONYXKEYS.COLLECTION.DOMAIN_MEMBER]: OnyxTypes.CardFeeds;
+    [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER]: OnyxTypes.CardFeeds;
     [ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS]: OnyxTypes.ExpensifyCardSettings;
     [ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST]: OnyxTypes.WorkspaceCardsList;
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION]: OnyxTypes.PolicyConnectionName;
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 6fda0d0acaad..c81c1d7ba92b 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -2013,7 +2013,7 @@ function openPolicyCompanyCardsPage(policyID: string, workspaceAccountID: number
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
+            key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
             value: {
                 isLoading: true,
             },
@@ -2023,7 +2023,7 @@ function openPolicyCompanyCardsPage(policyID: string, workspaceAccountID: number
     const successData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
+            key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
             value: {
                 isLoading: false,
             },
@@ -2033,7 +2033,7 @@ function openPolicyCompanyCardsPage(policyID: string, workspaceAccountID: number
     const failureData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
+            key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
             value: {
                 isLoading: false,
             },
@@ -4452,7 +4452,7 @@ function setWorkspaceCompanyCardFeedName(policyID: string, workspaceAccountID: n
         optimisticData: [
             {
                 onyxMethod: Onyx.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
+                key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
                 value: {
                     settings: {
                         companyCardNicknames: {
@@ -4480,7 +4480,7 @@ function setWorkspaceCompanyCardTransactionLiability(workspaceAccountID: number,
         optimisticData: [
             {
                 onyxMethod: Onyx.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
+                key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
                 value: {
                     settings: {
                         companyCards: {
@@ -4509,7 +4509,7 @@ function deleteWorkspaceCompanyCardFeed(policyID: string, workspaceAccountID: nu
         optimisticData: [
             {
                 onyxMethod: Onyx.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`,
+                key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
                 value: {
                     settings: {
                         companyCards: {
diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 87842ca03c7a..d60ac66dd95f 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -72,7 +72,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
     const policyID = policy?.id;
     const workspaceAccountID = policy?.workspaceAccountID ?? -1;
     const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID.toString()}_${CONST.EXPENSIFY_CARD.BANK}`);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID.toString()}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID.toString()}`);
     const [isOrganizeWarningModalOpen, setIsOrganizeWarningModalOpen] = useState(false);
     const [isIntegrateWarningModalOpen, setIsIntegrateWarningModalOpen] = useState(false);
     const [isReportFieldsWarningModalOpen, setIsReportFieldsWarningModalOpen] = useState(false);
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
index e75bf8af258a..2d111d98794c 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
@@ -37,7 +37,7 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
 
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index a74885866d6b..eff14afece31 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -31,7 +31,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const shouldChangeLayout = isMediumScreenWidth || shouldUseNarrowLayout;
     const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${selectedFeed}`);
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 39fefead2bc2..32d5f9e94acb 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -29,7 +29,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const theme = useTheme();
     const policyID = route.params.policyID;
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
     const isLoading = !cardFeeds || cardFeeds.isLoading;
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
index 9e2f8f2a0b43..fb9eeb9e87c1 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsFeedNamePage.tsx
@@ -39,7 +39,7 @@ function WorkspaceCompanyCardsSettingsFeedNamePage({
     const policy = usePolicy(policyID);
     const workspaceAccountID = policy?.workspaceAccountID ?? -1;
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
     const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? '';
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
index 2f21feb4f02d..331a14825616 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsSettingsPage.tsx
@@ -37,7 +37,7 @@ function WorkspaceCompanyCardsSettingsPage({
     const workspaceAccountID = policy?.workspaceAccountID ?? -1;
     const [deleteCompanyCardConfirmModalVisible, setDeleteCompanyCardConfirmModalVisible] = useState(false);
 
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
     const feedName = cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? '';
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index a95864c19bae..633f818df31d 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -62,7 +62,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
     const StyleUtils = useStyleUtils();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const [allCardsList] = useOnyx(`${ONYXKEYS.CARD_LIST}`);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [isRemoveMemberConfirmModalVisible, setIsRemoveMemberConfirmModalVisible] = useState(false);
     const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(false);
 
diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
index 0dbfb55cdb21..1a05166cef89 100644
--- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
@@ -40,7 +40,7 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
 
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [selectedFeed, setSelectedFeed] = useState('');
     const [shouldShowError, setShouldShowError] = useState(false);
 

From 6c1d8d05b03b796d5e74ac6bbc0594e3784c1188 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Fri, 11 Oct 2024 10:09:30 +0200
Subject: [PATCH 26/36] Add custom card name display

---
 src/ONYXKEYS.ts                                      |  4 ++++
 src/libs/actions/Policy/Policy.ts                    | 12 +++++++++++-
 .../companyCards/WorkspaceCompanyCardDetailsPage.tsx |  3 ++-
 .../WorkspaceCompanyCardEditCardNamePage.tsx         |  9 ++++-----
 .../companyCards/WorkspaceCompanyCardsList.tsx       |  5 +++--
 5 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index a8de931a3eca..bcf520f51523 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -438,6 +438,9 @@ const ONYXKEYS = {
     /** Stores recently used currencies */
     RECENTLY_USED_CURRENCIES: 'nvp_recentlyUsedCurrencies',
 
+    /** Company cards custom names */
+    NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES: 'nvp_expensify_ccCustomNames',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -1002,6 +1005,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.LAST_ROUTE]: string;
     [ONYXKEYS.IS_USING_IMPORTED_STATE]: boolean;
     [ONYXKEYS.SHOULD_SHOW_SAVED_SEARCH_RENAME_TOOLTIP]: boolean;
+    [ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES]: Record<string, string>;
 };
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping;
 
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index c81c1d7ba92b..93f398a0d59d 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -4670,7 +4670,7 @@ function updateWorkspaceCompanyCard(workspaceAccountID: number, cardID: string,
     API.write(WRITE_COMMANDS.UPDATE_COMPANY_CARD, parameters, {optimisticData, finallyData, failureData});
 }
 
-function updateCompanyCardName(workspaceAccountID: number, cardID: string, newCardTitle: string, bankName: string) {
+function updateCompanyCardName(workspaceAccountID: number, cardID: string, newCardTitle: string, bankName: string, oldCardName?: string) {
     const authToken = NetworkStore.getAuthToken();
 
     const optimisticData: OnyxUpdate[] = [
@@ -4691,6 +4691,11 @@ function updateCompanyCardName(workspaceAccountID: number, cardID: string, newCa
                 },
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES,
+            value: {[cardID]: newCardTitle},
+        },
     ];
 
     const finallyData: OnyxUpdate[] = [
@@ -4725,6 +4730,11 @@ function updateCompanyCardName(workspaceAccountID: number, cardID: string, newCa
                 },
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES,
+            value: {[cardID]: oldCardName},
+        },
     ];
 
     const parameters: UpdateCompanyCardNameParams = {
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
index df4e9635e851..3139468f185d 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
@@ -38,6 +38,7 @@ type WorkspaceCompanyCardDetailsPageProps = StackScreenProps<SettingsNavigatorPa
 function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPageProps) {
     const {policyID, cardID, backTo, bank} = route.params;
     const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`);
+    const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES);
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
     const policy = usePolicy(policyID);
     const [isUnassignModalVisible, setIsUnassignModalVisible] = useState(false);
@@ -113,7 +114,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                             >
                                 <MenuItemWithTopDescription
                                     description={translate('workspace.moreFeatures.companyCards.cardName')}
-                                    title={card?.nameValuePairs?.cardTitle}
+                                    title={customCardNames?.[cardID] ?? ''}
                                     shouldShowRightIcon
                                     brickRoadIndicator={card?.nameValuePairs?.errorFields?.cardTitle ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                                     onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_NAME.getRoute(policyID, cardID, bank))}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
index c55d575838a8..56e8d88d8d54 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx
@@ -27,16 +27,15 @@ type WorkspaceCompanyCardEditCardNamePageProps = StackScreenProps<SettingsNaviga
 function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditCardNamePageProps) {
     const {policyID, cardID, bank} = route.params;
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
+    const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES);
+    const defaultValue = customCardNames?.[cardID];
 
     const {translate} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
     const styles = useThemeStyles();
 
-    const [allBankCards] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bank}`);
-    const card = allBankCards?.[cardID];
-
     const submit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_WORKSPACE_COMPANY_CARD_NAME_FORM>) => {
-        Policy.updateCompanyCardName(workspaceAccountID, cardID, values[INPUT_IDS.NAME], bank);
+        Policy.updateCompanyCardName(workspaceAccountID, cardID, values[INPUT_IDS.NAME], bank, defaultValue);
         Navigation.goBack();
     };
 
@@ -72,7 +71,7 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC
                         hint={translate('workspace.moreFeatures.companyCards.giveItNameInstruction')}
                         aria-label={translate('workspace.moreFeatures.companyCards.cardName')}
                         role={CONST.ROLE.PRESENTATION}
-                        defaultValue={card?.nameValuePairs?.cardTitle}
+                        defaultValue={defaultValue}
                         maxLength={CONST.EXPENSIFY_CARD.CARD_TITLE_INPUT_LIMIT}
                         ref={inputCallbackRef}
                     />
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index 015df6782e3f..667289360ac8 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -29,6 +29,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES);
 
     const sortedCards = useMemo(() => CardUtils.sortCardsByCardholderName(cardsList, personalDetails), [cardsList, personalDetails]);
 
@@ -56,13 +57,13 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
                         <WorkspaceCompanyCardsListRow
                             cardholder={personalDetails?.[item.accountID ?? '-1']}
                             cardNumber={CardUtils.getCompanyCardNumber(cardsList?.cardList ?? {}, item.lastFourPAN)}
-                            name={item.nameValuePairs?.cardTitle ?? ''}
+                            name={customCardNames?.[item.cardID] ?? ''}
                         />
                     </PressableWithFeedback>
                 </OfflineWithFeedback>
             );
         },
-        [cardsList, personalDetails, policyID, styles],
+        [cardsList, customCardNames, personalDetails, policyID, styles],
     );
 
     const renderListHeader = useCallback(

From 27944d52d7de9d60db0595503510ef6e23f42a4f Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 14 Oct 2024 11:12:41 +0300
Subject: [PATCH 27/36] TS fixes after merging main

---
 src/libs/actions/Policy/Policy.ts                | 16 ++++++++++------
 src/pages/workspace/WorkspaceInitialPage.tsx     |  2 +-
 .../WorkspaceCompanyCardFeedSelectorPage.tsx     |  2 +-
 .../WorkspaceCompanyCardsListHeaderButtons.tsx   |  6 +++---
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 14709815d8cc..1c30e5093184 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -4637,9 +4637,11 @@ function updateWorkspaceCompanyCard(workspaceAccountID: number, cardID: string,
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
             value: {
-                companyCards: {
-                    [bankName]: {
-                        errors: null,
+                settings: {
+                    companyCards: {
+                        [bankName]: {
+                            errors: null,
+                        },
                     },
                 },
             },
@@ -4681,9 +4683,11 @@ function updateWorkspaceCompanyCard(workspaceAccountID: number, cardID: string,
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`,
             value: {
-                companyCards: {
-                    [bankName]: {
-                        errors: {error: CONST.COMPANY_CARDS.CONNECTION_ERROR},
+                settings: {
+                    companyCards: {
+                        [bankName]: {
+                            errors: {error: CONST.COMPANY_CARDS.CONNECTION_ERROR},
+                        },
                     },
                 },
             },
diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index 3db7623bfad1..6cfc66466da4 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -217,7 +217,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
             icon: Expensicons.CreditCard,
             action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID)))),
             routeName: SCREENS.WORKSPACE.COMPANY_CARDS,
-            brickRoadIndicator: PolicyUtils.hasPolicyFeedsError(cardFeeds?.companyCards ?? {}) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
+            brickRoadIndicator: PolicyUtils.hasPolicyFeedsError(cardFeeds?.settings?.companyCards ?? {}) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
         });
     }
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
index 273d8d9dc320..c54b092ca679 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
@@ -47,7 +47,7 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
         keyForList: feed,
         isSelected: feed === selectedFeed,
         brickRoadIndicator: CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR,
-        canShowSeveralIndicators: !!cardFeeds?.companyCards?.[selectedFeed]?.errors,
+        canShowSeveralIndicators: !!cardFeeds?.settings?.companyCards?.[selectedFeed]?.errors,
         leftElement: (
             <Icon
                 src={CardUtils.getCardFeedIcon(feed)}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index 8f8ac479d63a..cc315854b445 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -58,9 +58,9 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                     <View>
                         <View style={[styles.flexRow, styles.gap1]}>
                             <CaretWrapper>
-                                <Text style={styles.textStrong}>{cardFeeds?.companyCardNicknames?.[selectedFeed]}</Text>
+                                <Text style={styles.textStrong}>{cardFeeds?.settings?.companyCardNicknames?.[selectedFeed]}</Text>
                             </CaretWrapper>
-                            {PolicyUtils.hasPolicyFeedsError(cardFeeds?.companyCards ?? {}, selectedFeed) && (
+                            {PolicyUtils.hasPolicyFeedsError(cardFeeds?.settings?.companyCards ?? {}, selectedFeed) && (
                                 <Icon
                                     src={Expensicons.DotIndicator}
                                     fill={theme.danger}
@@ -74,7 +74,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                 <View style={[styles.flexRow, styles.gap2]}>
                     <Button
                         success
-                        isDisabled={!!cardFeeds?.settings?.companyCards?.[selectedFeed].pending || !!cardFeeds?.companyCards?.[selectedFeed].errors}
+                        isDisabled={!!cardFeeds?.settings?.companyCards?.[selectedFeed].pending || !!cardFeeds?.settings?.companyCards?.[selectedFeed].errors}
                         onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD.getRoute(policyID, selectedFeed))}
                         icon={Expensicons.Plus}
                         text={translate('workspace.companyCards.assignCard')}

From 16cf1843dcd6b9ff4be0ae8dff89515fcf9058b8 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 14 Oct 2024 15:27:07 +0300
Subject: [PATCH 28/36] Updated details fields names, fixes

---
 src/libs/actions/Policy/Policy.ts             | 52 +++++++++++++++++--
 .../WorkspaceCompanyCardDetailsPage.tsx       | 14 ++---
 .../WorkspaceCompanyCardFeedSelectorPage.tsx  |  6 +--
 ...WorkspaceCompanyCardsListHeaderButtons.tsx |  2 +-
 .../WorkspaceCompanyCardsPage.tsx             |  2 +-
 .../members/WorkspaceMemberDetailsPage.tsx    |  4 +-
 src/types/onyx/Card.ts                        | 12 +++++
 7 files changed, 73 insertions(+), 19 deletions(-)

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 1c30e5093184..33dc63371088 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -4625,10 +4625,25 @@ function updateWorkspaceCompanyCard(workspaceAccountID: number, cardID: string,
                 [cardID]: {
                     isLoadingLastUpdated: true,
                     pendingFields: {
-                        lastUpdated: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                        lastScrape: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
                     },
                     errorFields: {
-                        lastUpdated: null,
+                        lastScrape: null,
+                    },
+                },
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: {
+                    isLoadingLastUpdated: true,
+                    pendingFields: {
+                        lastScrape: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                    },
+                    errorFields: {
+                        lastScrape: null,
                     },
                 },
             },
@@ -4656,7 +4671,19 @@ function updateWorkspaceCompanyCard(workspaceAccountID: number, cardID: string,
                 [cardID]: {
                     isLoadingLastUpdated: false,
                     pendingFields: {
-                        lastUpdated: null,
+                        lastScrape: null,
+                    },
+                },
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: {
+                    isLoadingLastUpdated: false,
+                    pendingFields: {
+                        lastScrape: null,
                     },
                 },
             },
@@ -4671,10 +4698,25 @@ function updateWorkspaceCompanyCard(workspaceAccountID: number, cardID: string,
                 [cardID]: {
                     isLoadingLastUpdated: false,
                     pendingFields: {
-                        lastUpdated: null,
+                        lastScrape: null,
+                    },
+                    errorFields: {
+                        lastScrape: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                    },
+                },
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: {
+                    isLoadingLastUpdated: false,
+                    pendingFields: {
+                        lastScrape: null,
                     },
                     errorFields: {
-                        lastUpdated: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                        lastScrape: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                     },
                 },
             },
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
index 3139468f185d..726001e80146 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
@@ -49,7 +49,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
     const connectedIntegration = getConnectedIntegration(policy, accountingIntegrations) ?? connectionSyncProgress?.connectionName;
 
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
-    const [allBankCards] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bank}`);
+    const [allBankCards] = useOnyx(`${ONYXKEYS.CARD_LIST}`);
     const card = allBankCards?.[cardID];
 
     const cardholder = personalDetails?.[card?.accountID ?? -1];
@@ -144,26 +144,26 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                                     />
                                 }
                                 description={translate('workspace.moreFeatures.companyCards.lastUpdated')}
-                                title={card?.isLoadingLastUpdated ? translate('workspace.moreFeatures.companyCards.updating') : card?.lastUpdated}
+                                title={card?.isLoadingLastUpdated ? translate('workspace.moreFeatures.companyCards.updating') : card?.lastScrape}
                                 interactive={false}
                             />
                             <MenuItemWithTopDescription
                                 description={translate('workspace.moreFeatures.companyCards.transactionStartDate')}
-                                title={card?.startDate ? format(card.startDate, CONST.DATE.FNS_FORMAT_STRING) : ''}
+                                title={card?.scrapeMinDate ? format(card.scrapeMinDate, CONST.DATE.FNS_FORMAT_STRING) : ''}
                                 interactive={false}
                             />
                             <OfflineWithFeedback
-                                pendingAction={card?.pendingFields?.lastUpdated}
+                                pendingAction={card?.pendingFields?.lastScrape}
                                 errorRowStyles={[styles.ph5, styles.mb3]}
-                                errors={ErrorUtils.getLatestErrorField(card ?? {}, 'lastUpdated')}
-                                onClose={() => Policy.clearCompanyCardErrorField(workspaceAccountID, cardID, bank, 'lastUpdated', true)}
+                                errors={ErrorUtils.getLatestErrorField(card ?? {}, 'lastScrape')}
+                                onClose={() => Policy.clearCompanyCardErrorField(workspaceAccountID, cardID, bank, 'lastScrape', true)}
                             >
                                 <MenuItem
                                     icon={Expensicons.Sync}
                                     iconFill={theme.success}
                                     title={translate('workspace.moreFeatures.companyCards.updateCard')}
                                     style={styles.mv1}
-                                    brickRoadIndicator={card?.errorFields?.lastUpdated ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                                    brickRoadIndicator={card?.errorFields?.lastScrape ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                                     onPress={updateCard}
                                 />
                             </OfflineWithFeedback>
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
index c54b092ca679..f9161d136c4a 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
@@ -43,11 +43,11 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
 
     const feeds: CardFeedListItem[] = Object.keys(cardFeeds?.settings?.companyCards ?? {}).map((feed) => ({
         value: feed as CompanyCardFeed,
-        text: cardFeeds?.settings?.companyCardNicknames?.[selectedFeed] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${feed as CompanyCardFeed}`),
+        text: cardFeeds?.settings?.companyCardNicknames?.[feed] ?? translate(`workspace.companyCards.addNewCard.cardProviders.${feed as CompanyCardFeed}`),
         keyForList: feed,
         isSelected: feed === selectedFeed,
-        brickRoadIndicator: CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR,
-        canShowSeveralIndicators: !!cardFeeds?.settings?.companyCards?.[selectedFeed]?.errors,
+        brickRoadIndicator: cardFeeds?.settings?.companyCards?.[feed]?.errors ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
+        canShowSeveralIndicators: !!cardFeeds?.settings?.companyCards?.[feed]?.errors,
         leftElement: (
             <Icon
                 src={CardUtils.getCardFeedIcon(feed)}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
index cc315854b445..74e6593d6986 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
@@ -58,7 +58,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                     <View>
                         <View style={[styles.flexRow, styles.gap1]}>
                             <CaretWrapper>
-                                <Text style={styles.textStrong}>{cardFeeds?.settings?.companyCardNicknames?.[selectedFeed]}</Text>
+                                <Text style={styles.textStrong}>{feedName}</Text>
                             </CaretWrapper>
                             {PolicyUtils.hasPolicyFeedsError(cardFeeds?.settings?.companyCards ?? {}, selectedFeed) && (
                                 <Icon
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 32d5f9e94acb..80069c735858 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -43,7 +43,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     useFocusEffect(fetchCompanyCards);
 
     useEffect(() => {
-        if (isLoading) {
+        if (isLoading || !selectedFeed) {
             return;
         }
         Policy.openPolicyCompanyCardsFeed(policyID, selectedFeed);
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index 633f818df31d..f803fd947546 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -89,7 +89,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
         if (!allCardsList) {
             return [];
         }
-        return Object.values(allCardsList ?? {}).filter((card) => card.accountID === accountID);
+        return Object.values(allCardsList ?? {}).filter((card) => card.accountID === accountID && workspaceAccountID.toString() === card.fundID);
     }, [allCardsList, accountID]);
 
     const confirmModalPrompt = useMemo(() => {
@@ -300,7 +300,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                             </View>
                                             {memberCards.map((memberCard) => (
                                                 <MenuItem
-                                                    title={memberCard.nameValuePairs?.cardTitle ?? memberCard?.cardNumber}
+                                                    title={memberCard.nameValuePairs?.cardTitle ?? memberCard?.cardName}
                                                     badgeText={
                                                         memberCard.bank === CONST.EXPENSIFY_CARD.BANK
                                                             ? CurrencyUtils.convertToDisplayString(memberCard.nameValuePairs?.unapprovedExpenseLimit)
diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index 444c74855e62..2eb2b47354b8 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -47,6 +47,18 @@ type Card = OnyxCommon.OnyxValueWithOfflineFeedback<{
     /** Current fraud state of the card */
     fraud: ValueOf<typeof CONST.EXPENSIFY_CARD.FRAUD_TYPES>;
 
+    /** Card name */
+    cardName?: string;
+
+    /** Related policy account id */
+    fundID?: string;
+
+    /** Transaction start date */
+    scrapeMinDate?: string;
+
+    /** Last updated time */
+    lastScrape?: string;
+
     /** Card related error messages */
     errors?: OnyxCommon.Errors;
 

From 5a0a0cee8e4d96fa99acd10537c30ffe42652141 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 14 Oct 2024 15:48:49 +0300
Subject: [PATCH 29/36] Lint fixes

---
 src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx | 2 +-
 src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 80069c735858..581c39afc278 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -43,7 +43,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     useFocusEffect(fetchCompanyCards);
 
     useEffect(() => {
-        if (isLoading || !selectedFeed) {
+        if (!!isLoading || !selectedFeed) {
             return;
         }
         Policy.openPolicyCompanyCardsFeed(policyID, selectedFeed);
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index f803fd947546..c94f4472330d 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -90,7 +90,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
             return [];
         }
         return Object.values(allCardsList ?? {}).filter((card) => card.accountID === accountID && workspaceAccountID.toString() === card.fundID);
-    }, [allCardsList, accountID]);
+    }, [allCardsList, accountID, workspaceAccountID]);
 
     const confirmModalPrompt = useMemo(() => {
         const isApprover = Member.isApprover(policy, accountID);

From bdda650a6abc065bc096647da8ccf5704997a5ed Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 14 Oct 2024 17:32:46 +0300
Subject: [PATCH 30/36] Improved loading

---
 .../workspace/WorkspacePageWithSections.tsx   |  1 +
 .../WorkspaceCompanyCardsList.tsx             | 14 +++++++++++-
 .../WorkspaceCompanyCardsPage.tsx             | 22 +++++++++----------
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx
index 4f0a84cffd9c..b4382c5ef9ee 100644
--- a/src/pages/workspace/WorkspacePageWithSections.tsx
+++ b/src/pages/workspace/WorkspacePageWithSections.tsx
@@ -199,6 +199,7 @@ function WorkspacePageWithSections({
                         {shouldUseScrollView ? (
                             <ScrollViewWithContext
                                 keyboardShouldPersistTaps="handled"
+                                contentContainerStyle={styles.flex1}
                                 style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
                             >
                                 <View style={[styles.w100, styles.flex1]}>{content}</View>
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
index 667289360ac8..fd2c73ddb402 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -1,12 +1,13 @@
 import React, {useCallback, useMemo} from 'react';
 import type {ListRenderItemInfo} from 'react-native';
-import {FlatList, View} from 'react-native';
+import {ActivityIndicator, FlatList, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@navigation/Navigation';
@@ -27,6 +28,7 @@ type WorkspaceCompanyCardsListProps = {
 
 function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsListProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES);
@@ -86,6 +88,16 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
         [styles, translate],
     );
 
+    if (!cardsList) {
+        return (
+            <ActivityIndicator
+                size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                style={styles.flex1}
+                color={theme.spinner}
+            />
+        );
+    }
+
     if (sortedCards.length === 0) {
         return <WorkspaceCompanyCardsFeedAddedEmptyPage />;
     }
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 581c39afc278..a0e11101a405 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -29,13 +29,18 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     const theme = useTheme();
     const policyID = route.params.policyID;
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
-    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [lastSelectedFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_FEED}${policyID}`);
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const selectedFeed = CardUtils.getSelectedFeed(lastSelectedFeed, cardFeeds);
-    const isLoading = !cardFeeds || cardFeeds.isLoading;
-
     const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${selectedFeed}`);
 
+    const isLoading = !cardFeeds || !!(cardFeeds.isLoading && !cardFeeds.settings);
+    const companyCards = cardFeeds?.settings?.companyCards ?? {};
+    const selectedCompanyCard = companyCards[selectedFeed ?? ''] ?? null;
+    const isNoFeed = !selectedCompanyCard;
+    const isPending = !!selectedCompanyCard?.pending;
+    const isFeedAdded = !isPending && !isNoFeed;
+
     const fetchCompanyCards = useCallback(() => {
         Policy.openPolicyCompanyCardsPage(policyID, workspaceAccountID);
     }, [policyID, workspaceAccountID]);
@@ -43,17 +48,12 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
     useFocusEffect(fetchCompanyCards);
 
     useEffect(() => {
-        if (!!isLoading || !selectedFeed) {
+        if (isLoading || !selectedFeed || isPending) {
             return;
         }
-        Policy.openPolicyCompanyCardsFeed(policyID, selectedFeed);
-    }, [selectedFeed, isLoading, policyID]);
 
-    const companyCards = cardFeeds?.settings?.companyCards ?? {};
-    const selectedCompanyCard = companyCards[selectedFeed ?? ''] ?? null;
-    const isNoFeed = !selectedCompanyCard;
-    const isPending = selectedCompanyCard?.pending;
-    const isFeedAdded = !isPending && !isNoFeed;
+        Policy.openPolicyCompanyCardsFeed(policyID, selectedFeed);
+    }, [selectedFeed, isLoading, policyID, isPending]);
 
     return (
         <AccessOrNotFoundWrapper

From 8fcd2de080a385dc5fe3f2b6ad1c6835160740cb Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 14 Oct 2024 17:52:50 +0300
Subject: [PATCH 31/36] Minor improvement

---
 src/libs/actions/Policy/Policy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
index 33dc63371088..4880543af42c 100644
--- a/src/libs/actions/Policy/Policy.ts
+++ b/src/libs/actions/Policy/Policy.ts
@@ -4744,7 +4744,7 @@ function updateWorkspaceCompanyCard(workspaceAccountID: number, cardID: string,
     API.write(WRITE_COMMANDS.UPDATE_COMPANY_CARD, parameters, {optimisticData, finallyData, failureData});
 }
 
-function updateCompanyCardName(workspaceAccountID: number, cardID: string, newCardTitle: string, bankName: string, oldCardName?: string) {
+function updateCompanyCardName(workspaceAccountID: number, cardID: string, newCardTitle: string, bankName: string, oldCardTitle?: string) {
     const authToken = NetworkStore.getAuthToken();
 
     const optimisticData: OnyxUpdate[] = [
@@ -4807,7 +4807,7 @@ function updateCompanyCardName(workspaceAccountID: number, cardID: string, newCa
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES,
-            value: {[cardID]: oldCardName},
+            value: {[cardID]: oldCardTitle},
         },
     ];
 

From 98d7bbb1a57e2e6e82902bdd6e075f3a46c32eb5 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 15 Oct 2024 10:22:14 +0300
Subject: [PATCH 32/36] Fix warnings

---
 src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx | 2 +-
 src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index a0e11101a405..14c7322e9c19 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -69,7 +69,7 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
             )}
             {!isLoading && (
                 <WorkspacePageWithSections
-                    shouldUseScrollView={isFeedAdded}
+                    shouldUseScrollView={!isFeedAdded}
                     icon={Illustrations.CompanyCard}
                     headerText={translate('workspace.common.companyCards')}
                     route={route}
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index c94f4472330d..4bc912ba6812 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -300,6 +300,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                             </View>
                                             {memberCards.map((memberCard) => (
                                                 <MenuItem
+                                                    key={memberCard.cardID}
                                                     title={memberCard.nameValuePairs?.cardTitle ?? memberCard?.cardName}
                                                     badgeText={
                                                         memberCard.bank === CONST.EXPENSIFY_CARD.BANK

From f46e5455dd22a845921c0eb4de1801c97308a1d2 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 15 Oct 2024 11:07:01 +0300
Subject: [PATCH 33/36] Fix assign card navigation

---
 src/ROUTES.ts                                 |  2 +-
 src/libs/Navigation/types.ts                  | 10 ++++++----
 .../assignCard/AssignCardFeedPage.tsx         | 20 ++++++++++---------
 .../assignCard/ConfirmationStep.tsx           |  9 +++++++--
 .../members/WorkspaceMemberNewCardPage.tsx    |  2 +-
 src/pages/workspace/withPolicy.tsx            |  1 +
 6 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 86b014c0fb91..99be0ddfb8c3 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -1053,7 +1053,7 @@ const ROUTES = {
     },
     WORKSPACE_COMPANY_CARDS_ASSIGN_CARD: {
         route: 'settings/workspaces/:policyID/company-cards/:feed/assign-card',
-        getRoute: (policyID: string, feed: string) => `settings/workspaces/${policyID}/company-cards/${feed}/assign-card` as const,
+        getRoute: (policyID: string, feed: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/company-cards/${feed}/assign-card`, backTo),
     },
     WORKSPACE_COMPANY_CARD_DETAILS: {
         route: 'settings/workspaces/:policyID/company-cards/:bank/:cardID',
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index b127c73e41de..7470cab0cc5e 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -20,6 +20,7 @@ import type NAVIGATORS from '@src/NAVIGATORS';
 import type {HybridAppRoute, Route as Routes} from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type EXIT_SURVEY_REASON_FORM_INPUT_IDS from '@src/types/form/ExitSurveyReasonForm';
+import type {CompanyCardFeed} from '@src/types/onyx';
 import type {ConnectionName, SageIntacctMappingName} from '@src/types/onyx/Policy';
 
 type NavigationRef = NavigationContainerRefWithCurrent<RootStackParamList>;
@@ -802,6 +803,11 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.COMPANY_CARDS_SETTINGS]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD]: {
+        policyID: string;
+        feed: CompanyCardFeed;
+        backTo?: Routes;
+    };
     [SCREENS.WORKSPACE.COMPANY_CARDS_SETTINGS_FEED_NAME]: {
         policyID: string;
     };
@@ -1337,10 +1343,6 @@ type FullScreenNavigatorParamList = {
     [SCREENS.WORKSPACE.COMPANY_CARDS_ADD_NEW]: {
         policyID: string;
     };
-    [SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD]: {
-        policyID: string;
-        feed: string;
-    };
     [SCREENS.WORKSPACE.WORKFLOWS]: {
         policyID: string;
     };
diff --git a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
index adefd522661c..ad3589651b3a 100644
--- a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
+++ b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
@@ -1,29 +1,26 @@
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
+import type {SettingsNavigatorParamList} from '@navigation/types';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {CompanyCardFeed} from '@src/types/onyx';
+import type SCREENS from '@src/SCREENS';
 import AssigneeStep from './AssigneeStep';
 import CardSelectionStep from './CardSelectionStep';
 import ConfirmationStep from './ConfirmationStep';
 import TransactionStartDateStep from './TransactionStartDateStep';
 
-type AssignCardFeedPageProps = {
-    route: {
-        params: {
-            feed: CompanyCardFeed;
-        };
-    };
-} & WithPolicyAndFullscreenLoadingProps;
+type AssignCardFeedPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD> & WithPolicyAndFullscreenLoadingProps;
 
 function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
     const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);
     const currentStep = assignCard?.currentStep;
 
     const feed = route.params?.feed;
+    const backTo = route.params?.backTo;
     const policyID = policy?.id ?? '-1';
 
     useEffect(() => {
@@ -43,7 +40,12 @@ function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
         case CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE:
             return <TransactionStartDateStep />;
         case CONST.COMPANY_CARD.STEP.CONFIRMATION:
-            return <ConfirmationStep policyID={policyID} />;
+            return (
+                <ConfirmationStep
+                    policyID={policyID}
+                    backTo={backTo}
+                />
+            );
         default:
             return <AssigneeStep policy={policy} />;
     }
diff --git a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
index 479529b7e906..e365b9be4e9d 100644
--- a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
@@ -16,14 +16,19 @@ import Navigation from '@navigation/Navigation';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {Route} from '@src/ROUTES';
 import type {AssignCardStep} from '@src/types/onyx/AssignCard';
 
 type ConfirmationStepProps = {
     /** Current policy id */
     policyID: string;
+
+    /** Route to go back to */
+    backTo?: Route;
 };
 
-function ConfirmationStep({policyID}: ConfirmationStepProps) {
+function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
@@ -35,7 +40,7 @@ function ConfirmationStep({policyID}: ConfirmationStepProps) {
 
     const submit = () => {
         Policy.assignWorkspaceCompanyCard(policyID, data);
-        Navigation.goBack();
+        Navigation.navigate(backTo ?? ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
         CompanyCards.clearAssignCardStepAndData();
     };
 
diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
index fd4dec256e68..390449cd8896 100644
--- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
@@ -69,7 +69,7 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
                 },
                 isEditing: false,
             });
-            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD.getRoute(policyID, selectedFeed));
+            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD.getRoute(policyID, selectedFeed, ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(policyID, accountID)));
         }
     };
 
diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index e1fdd2b29687..16f05fa3e324 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -46,6 +46,7 @@ type PolicyRoute = RouteProp<
     | typeof SCREENS.WORKSPACE.ACCOUNTING.CARD_RECONCILIATION
     | typeof SCREENS.WORKSPACE.RULES
     | typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW
+    | typeof SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD
 >;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {

From c33e71a4f1fe9c3736e0c68004f98c3a418f20db Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 15 Oct 2024 11:59:44 +0300
Subject: [PATCH 34/36] Fix

---
 src/pages/workspace/WorkspacePageWithSections.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx
index b4382c5ef9ee..4f0a84cffd9c 100644
--- a/src/pages/workspace/WorkspacePageWithSections.tsx
+++ b/src/pages/workspace/WorkspacePageWithSections.tsx
@@ -199,7 +199,6 @@ function WorkspacePageWithSections({
                         {shouldUseScrollView ? (
                             <ScrollViewWithContext
                                 keyboardShouldPersistTaps="handled"
-                                contentContainerStyle={styles.flex1}
                                 style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
                             >
                                 <View style={[styles.w100, styles.flex1]}>{content}</View>

From b5100b3d1207c134f131c9f3db2ae4fa0d4dc6ad Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 16 Oct 2024 09:24:42 +0300
Subject: [PATCH 35/36] Fix TS after merging main

---
 src/types/onyx/CardFeeds.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/types/onyx/CardFeeds.ts b/src/types/onyx/CardFeeds.ts
index 2eb32b0660dd..ec2e555d3201 100644
--- a/src/types/onyx/CardFeeds.ts
+++ b/src/types/onyx/CardFeeds.ts
@@ -52,6 +52,9 @@ type AddNewCardFeedData = {
     /** Card feed provider */
     feedType: CompanyCardFeed;
 
+    /** Card type */
+    cardType: ValueOf<typeof CONST.COMPANY_CARDS.CARD_TYPE>;
+
     /** Selected bank */
     selectedBank: ValueOf<typeof CONST.COMPANY_CARDS.BANKS>;
 

From 2782c1ba95f96fdfd974aabbb1454dc5707c3ee8 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Thu, 17 Oct 2024 16:32:28 +0300
Subject: [PATCH 36/36] Fixes after merging main

---
 src/CONST.ts                                  |  1 +
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  1 +
 src/libs/CardUtils.ts                         |  1 +
 .../WorkspaceCompanyCardFeedSelectorPage.tsx  |  6 +-
 .../companyCards/addNew/AmexCustomFeed.tsx    |  2 +-
 .../addNew/CardInstructionsStep.tsx           |  4 +-
 .../companyCards/addNew/CardTypeStep.tsx      | 72 ++++---------------
 .../companyCards/addNew/DetailsStep.tsx       |  2 +-
 .../companyCards/addNew/SelectBankStep.tsx    |  2 +-
 src/types/onyx/CardFeeds.ts                   |  4 +-
 11 files changed, 29 insertions(+), 67 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 2a5d8af3da04..97ea1dd2b27d 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -2510,6 +2510,7 @@ const CONST = {
             MASTER_CARD: 'cdf',
             VISA: 'vcf',
             AMEX: 'gl1025',
+            STRIPE: 'stripe',
         },
         STEP_NAMES: ['1', '2', '3', '4'],
         STEP: {
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 3046775201ba..ccc482941d51 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3049,6 +3049,7 @@ const translations = {
                     gl1025: 'American Express Corporate Cards',
                     cdf: 'Mastercard Commercial Cards',
                     vcf: 'Visa Commercial Cards',
+                    stripe: 'Stripe Cards',
                 },
                 yourCardProvider: `Who's your card provider?`,
                 whoIsYourBankAccount: 'Who’s your bank?',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index d092c7fe1941..ca2e730d71c5 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3086,6 +3086,7 @@ const translations = {
                     gl1025: 'Tarjetas de empresa American Express',
                     cdf: 'Tarjetas comerciales Mastercard',
                     vcf: 'Tarjetas comerciales Visa',
+                    stripe: 'Tarjetas comerciales Stripe',
                 },
                 yourCardProvider: `¿Quién es su proveedor de tarjetas?`,
                 whoIsYourBankAccount: '¿Cuál es tu banco?',
diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 16ddde3be5a8..7c81c5c224c6 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -210,6 +210,7 @@ function getCardFeedName(feedType: CompanyCardFeed): string {
         [CONST.COMPANY_CARD.FEED_BANK_NAME.VISA]: 'Visa',
         [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: 'Mastercard',
         [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: 'American Express',
+        [CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE]: 'Stripe',
     };
 
     return feedNamesMapping[feedType];
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
index f9161d136c4a..2589f05e2769 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
@@ -18,6 +18,7 @@ import Navigation from '@navigation/Navigation';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import variables from '@styles/variables';
 import * as Card from '@userActions/Card';
+import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -90,7 +91,10 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
                         <MenuItem
                             title={translate('workspace.companyCards.addCompanyCards')}
                             icon={Expensicons.Plus}
-                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policyID))}
+                            onPress={() => {
+                                CompanyCards.clearAddNewCardFlow();
+                                Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policyID));
+                            }}
                         />
                     }
                 />
diff --git a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx
index f168c72924ea..765b42997573 100644
--- a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx
+++ b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx
@@ -30,7 +30,7 @@ function AmexCustomFeed() {
         CompanyCards.setAddNewCompanyCardStepAndData({
             step: typeSelected === CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.CORPORATE ? CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS : CONST.COMPANY_CARDS.STEP.BANK_CONNECTION,
             data: {
-                cardType: CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
+                feedType: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
                 selectedAmexCustomFeed: typeSelected,
             },
         });
diff --git a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
index de68a2b77f7b..1b49074a116a 100644
--- a/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
@@ -31,9 +31,9 @@ function CardInstructionsStep({policyID}: CardInstructionsStepProps) {
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
 
     const data = addNewCard?.data;
-    const feedProvider = data?.feedType;
+    const feedProvider = data?.feedType ?? CONST.COMPANY_CARD.FEED_BANK_NAME.VISA;
     const bank = data?.selectedBank;
-    const isStripeFeedProvider = feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.STRIPE;
+    const isStripeFeedProvider = feedProvider === CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE;
     const isAmexFeedProvider = feedProvider === CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX;
     const isOtherBankSelected = bank === CONST.COMPANY_CARDS.BANKS.OTHER;
 
diff --git a/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx b/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
index a2ac260eb095..b2f5f3f0c321 100644
--- a/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
@@ -24,17 +24,17 @@ import type {CompanyCardFeed} from '@src/types/onyx';
 type AvailableCompanyCardTypes = {
     isAmexAvailable?: boolean;
     translate: LocaleContextProps['translate'];
-    typeSelected?: ValueOf<typeof CONST.COMPANY_CARDS.CARD_TYPE>;
+    typeSelected?: CompanyCardFeed;
     styles: StyleProp<ViewStyle>;
 };
 
 function getAvailableCompanyCardTypes({isAmexAvailable, translate, typeSelected, styles}: AvailableCompanyCardTypes) {
     const defaultTypes = [
         {
-            value: CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
-            text: translate('workspace.companyCards.addNewCard.cardProviders.mastercard'),
-            keyForList: CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
-            isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
+            value: CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
+            text: translate('workspace.companyCards.addNewCard.cardProviders.cdf'),
+            keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
+            isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
             leftElement: (
                 <Icon
                     src={Illustrations.MasterCardCompanyCardDetail}
@@ -45,10 +45,10 @@ function getAvailableCompanyCardTypes({isAmexAvailable, translate, typeSelected,
             ),
         },
         {
-            value: CONST.COMPANY_CARDS.CARD_TYPE.VISA,
-            text: translate('workspace.companyCards.addNewCard.cardProviders.visa'),
-            keyForList: CONST.COMPANY_CARDS.CARD_TYPE.VISA,
-            isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.VISA,
+            value: CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
+            text: translate('workspace.companyCards.addNewCard.cardProviders.vcf'),
+            keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
+            isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
             leftElement: (
                 <Icon
                     src={Illustrations.VisaCompanyCardDetail}
@@ -66,10 +66,10 @@ function getAvailableCompanyCardTypes({isAmexAvailable, translate, typeSelected,
 
     return [
         {
-            value: CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
-            text: translate('workspace.companyCards.addNewCard.cardProviders.amex'),
-            keyForList: CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
-            isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
+            value: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
+            text: translate('workspace.companyCards.addNewCard.cardProviders.gl1025'),
+            keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
+            isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
             leftElement: (
                 <Icon
                     src={Illustrations.AmexCardCompanyCardDetail}
@@ -100,7 +100,6 @@ function CardTypeStep() {
                 step: CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS,
                 data: {
                     feedType: typeSelected,
-                    cardType: typeSelected,
                 },
                 isEditing: false,
             });
@@ -119,51 +118,6 @@ function CardTypeStep() {
         }
     };
 
-    const data = [
-        {
-            value: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
-            text: translate('workspace.companyCards.addNewCard.cardProviders.gl1025'),
-            keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
-            isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX,
-            leftElement: (
-                <Icon
-                    src={Illustrations.AmexCardCompanyCardDetail}
-                    height={variables.iconSizeExtraLarge}
-                    width={variables.iconSizeExtraLarge}
-                    additionalStyles={styles.mr3}
-                />
-            ),
-        },
-        {
-            value: CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
-            text: translate('workspace.companyCards.addNewCard.cardProviders.cdf'),
-            keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
-            isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD,
-            leftElement: (
-                <Icon
-                    src={Illustrations.MasterCardCompanyCardDetail}
-                    height={variables.iconSizeExtraLarge}
-                    width={variables.iconSizeExtraLarge}
-                    additionalStyles={styles.mr3}
-                />
-            ),
-        },
-        {
-            value: CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
-            text: translate('workspace.companyCards.addNewCard.cardProviders.vcf'),
-            keyForList: CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
-            isSelected: typeSelected === CONST.COMPANY_CARD.FEED_BANK_NAME.VISA,
-            leftElement: (
-                <Icon
-                    src={Illustrations.VisaCompanyCardDetail}
-                    height={variables.iconSizeExtraLarge}
-                    width={variables.iconSizeExtraLarge}
-                    additionalStyles={styles.mr3}
-                />
-            ),
-        },
-    ];
-
     return (
         <ScreenWrapper
             testID={CardTypeStep.displayName}
diff --git a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
index 9b75bf1c3cb3..87c819b074b6 100644
--- a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
@@ -33,7 +33,7 @@ function DetailsStep({policyID}: DetailsStepProps) {
     const {canUseDirectFeeds} = usePermissions();
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
     const feedProvider = addNewCard?.data?.feedType;
-    const isStripeFeedProvider = feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.STRIPE;
+    const isStripeFeedProvider = feedProvider === CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE;
     const bank = addNewCard?.data?.selectedBank;
     const isOtherBankSelected = bank === CONST.COMPANY_CARDS.BANKS.OTHER;
 
diff --git a/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx b/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx
index 88ad28afb522..822469df6e29 100644
--- a/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx
@@ -38,7 +38,7 @@ function SelectBankStep() {
                 data: {
                     selectedBank: bankSelected,
                     cardTitle: !isOtherBankSelected ? bankSelected : undefined,
-                    cardType: bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? CONST.COMPANY_CARDS.CARD_TYPE.STRIPE : undefined,
+                    feedType: bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE : undefined,
                 },
                 isEditing: false,
             });
diff --git a/src/types/onyx/CardFeeds.ts b/src/types/onyx/CardFeeds.ts
index ec2e555d3201..4a3eb5632d83 100644
--- a/src/types/onyx/CardFeeds.ts
+++ b/src/types/onyx/CardFeeds.ts
@@ -52,8 +52,8 @@ type AddNewCardFeedData = {
     /** Card feed provider */
     feedType: CompanyCardFeed;
 
-    /** Card type */
-    cardType: ValueOf<typeof CONST.COMPANY_CARDS.CARD_TYPE>;
+    /** Name of the card */
+    cardTitle: string;
 
     /** Selected bank */
     selectedBank: ValueOf<typeof CONST.COMPANY_CARDS.BANKS>;