[No QA] Feat: Adding Direct Card Feed: Selecting bank step

src/CONST.ts

@@ -2518,6 +2518,7 @@ const CONST = {
     },
     COMPANY_CARDS: {
         STEP: {
+            SELECT_BANK: 'SelectBank',
             CARD_TYPE: 'CardType',
             CARD_INSTRUCTIONS: 'CardInstructions',
             CARD_NAME: 'CardName',
@@ -2528,6 +2529,17 @@ const CONST = {
             VISA: 'visa',
             MASTERCARD: 'mastercard',
         },
+        BANKS: {
+            AMEX: 'American Express',
+            BANK_OF_AMERICA: 'Bank of America',
+            BREX: 'Brex',
+            CAPITAL_ONE: 'Capital One',
+            CHASE: 'Chase',
+            CITI_BANK: 'Citibank',
+            STRIPE: 'Stripe',
+            WELLS_FARGO: 'Wells Fargo',
+            OTHER: 'Other',
+        },
         DELETE_TRANSACTIONS: {
             RESTRICT: 'corporate',
             ALLOW: 'personal',

src/components/Icon/Illustrations.ts

@@ -1,7 +1,15 @@
 import AmexCompanyCards from '@assets/images/companyCards/amex.svg';
 import AmexCardCompanyCardDetail from '@assets/images/companyCards/card-amex.svg';
+import BankOfAmericaCompanyCardDetail from '@assets/images/companyCards/card-bofa.svg';
+import BrexCompanyCardDetail from '@assets/images/companyCards/card-brex.svg';
+import CapitalOneCompanyCardDetail from '@assets/images/companyCards/card-capitalone.svg';
+import ChaseCompanyCardDetail from '@assets/images/companyCards/card-chase.svg';
+import CitibankCompanyCardDetail from '@assets/images/companyCards/card-citi.svg';
 import MasterCardCompanyCardDetail from '@assets/images/companyCards/card-mastercard.svg';
+import StripeCompanyCardDetail from '@assets/images/companyCards/card-stripe.svg';
 import VisaCompanyCardDetail from '@assets/images/companyCards/card-visa.svg';
+import WellsFargoCompanyCardDetail from '@assets/images/companyCards/card-wellsfargo.svg';
+import OtherCompanyCardDetail from '@assets/images/companyCards/card=-generic.svg';
 import CompanyCardsEmptyState from '@assets/images/companyCards/emptystate__card-pos.svg';
 import MasterCardCompanyCards from '@assets/images/companyCards/mastercard.svg';
 import CompanyCardsPendingState from '@assets/images/companyCards/pendingstate_laptop-with-hourglass-and-cards.svg';
@@ -244,4 +252,12 @@ export {
     MasterCardCompanyCardDetail,
     AmexCardCompanyCardDetail,
     TurtleInShell,
+    BankOfAmericaCompanyCardDetail,
+    BrexCompanyCardDetail,
+    CapitalOneCompanyCardDetail,
+    ChaseCompanyCardDetail,
+    CitibankCompanyCardDetail,
+    OtherCompanyCardDetail,
+    StripeCompanyCardDetail,
+    WellsFargoCompanyCardDetail,
 };

src/languages/en.ts

@@ -2953,12 +2953,14 @@ const translations = {
             selectCardFeed: 'Select card feed',
             addCardFeed: 'Add card feed',
             addNewCard: {
+                other: 'Other',
                 cardProviders: {
                     amex: 'American Express Corporate Cards',
                     mastercard: 'Mastercard Commercial Cards',
                     visa: 'Visa Commercial Cards',
                 },
                 yourCardProvider: `Who's your card provider?`,
+                whoIsYourBankAccount: 'Who’s your bank?',
                 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:',
@@ -2986,6 +2988,7 @@ const translations = {
                 },
                 error: {
                     pleaseSelectProvider: 'Please select a card provider before continuing.',
+                    pleaseSelectBankAccount: 'Please select a bank account before continuing.',
                 },
             },
             assignCard: 'Assign card',

src/languages/es.ts

@@ -2989,12 +2989,14 @@ const translations = {
             selectCardFeed: 'Seleccionar feed de tarjetas',
             addCardFeed: 'Añadir alimentación de tarjeta',
             addNewCard: {
+                other: 'Otros',
                 cardProviders: {
                     amex: 'Tarjetas de empresa American Express',
                     mastercard: 'Tarjetas comerciales Mastercard',
                     visa: 'Tarjetas comerciales Visa',
                 },
                 yourCardProvider: `¿Quién es su proveedor de tarjetas?`,
+                whoIsYourBankAccount: '¿Cuál es tu banco?',
                 enableFeed: {
                     title: ({provider}: GoBackMessageParams) => `Habilita tu feed ${provider}`,
                     heading:
@@ -3023,6 +3025,7 @@ const translations = {
                 },
                 error: {
                     pleaseSelectProvider: 'Seleccione un proveedor de tarjetas antes de continuar.',
+                    pleaseSelectBankAccount: 'Seleccione una cuenta bancaria antes de continuar.',
                 },
             },
             assignCard: 'Asignar tarjeta',

src/libs/CardUtils.ts

@@ -227,6 +227,21 @@ function getMemberCards(policy: OnyxEntry<Policy>, allCardsList: OnyxCollection<
     return cards;
 }
 
+const getBankCardDetailsImage = (bank: ValueOf<typeof CONST.COMPANY_CARDS.BANKS>): IconAsset => {
+    const iconMap: Record<ValueOf<typeof CONST.COMPANY_CARDS.BANKS>, IconAsset> = {
+        [CONST.COMPANY_CARDS.BANKS.AMEX]: Illustrations.AmexCardCompanyCardDetail,
+        [CONST.COMPANY_CARDS.BANKS.BANK_OF_AMERICA]: Illustrations.BankOfAmericaCompanyCardDetail,
+        [CONST.COMPANY_CARDS.BANKS.CAPITAL_ONE]: Illustrations.CapitalOneCompanyCardDetail,
+        [CONST.COMPANY_CARDS.BANKS.CHASE]: Illustrations.ChaseCompanyCardDetail,
+        [CONST.COMPANY_CARDS.BANKS.CITI_BANK]: Illustrations.CitibankCompanyCardDetail,
+        [CONST.COMPANY_CARDS.BANKS.WELLS_FARGO]: Illustrations.WellsFargoCompanyCardDetail,
+        [CONST.COMPANY_CARDS.BANKS.BREX]: Illustrations.BrexCompanyCardDetail,
+        [CONST.COMPANY_CARDS.BANKS.STRIPE]: Illustrations.StripeCompanyCardDetail,
+        [CONST.COMPANY_CARDS.BANKS.OTHER]: Illustrations.OtherCompanyCardDetail,
+    };
+    return iconMap[bank];
+};
+
 export {
     isExpensifyCard,
     isCorporateCard,
@@ -245,4 +260,5 @@ export {
     getCardFeedIcon,
     getCardDetailsImage,
     getMemberCards,
+    getBankCardDetailsImage,
 };

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

@@ -1,29 +1,49 @@
 import React from 'react';
 import {useOnyx} from 'react-native-onyx';
+import usePermissions from '@hooks/usePermissions';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import CardInstructionsStep from './CardInstructionsStep';
 import CardNameStep from './CardNameStep';
 import CardTypeStep from './CardTypeStep';
 import DetailsStep from './DetailsStep';
+import SelectBankStep from './SelectBankStep';
 
 function AddNewCardPage() {
     const [addNewCardFeed] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
+    const {canUseDirectFeeds} = usePermissions();
 
     const {currentStep} = addNewCardFeed ?? {};
 
-    switch (currentStep) {
-        case CONST.COMPANY_CARDS.STEP.CARD_TYPE:
-            return <CardTypeStep />;
-        case CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS:
-            return <CardInstructionsStep />;
-        case CONST.COMPANY_CARDS.STEP.CARD_NAME:
-            return <CardNameStep />;
-        case CONST.COMPANY_CARDS.STEP.CARD_DETAILS:
-            return <DetailsStep />;
-        default:
-            return <CardTypeStep />;
+    if (canUseDirectFeeds) {
+        switch (currentStep) {
+            case CONST.COMPANY_CARDS.STEP.SELECT_BANK:
+                return <SelectBankStep />;
+            case CONST.COMPANY_CARDS.STEP.CARD_TYPE:
+                return <CardTypeStep />;
+            case CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS:
+                return <CardInstructionsStep />;
+            case CONST.COMPANY_CARDS.STEP.CARD_NAME:
+                return <CardNameStep />;
+            case CONST.COMPANY_CARDS.STEP.CARD_DETAILS:
+                return <DetailsStep />;
+            default:
+                return <SelectBankStep />;
+        }
+    } else {
+        switch (currentStep) {
+            case CONST.COMPANY_CARDS.STEP.CARD_TYPE:
+                return <CardTypeStep />;
+            case CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS:
+                return <CardInstructionsStep />;
+            case CONST.COMPANY_CARDS.STEP.CARD_NAME:
+                return <CardNameStep />;
+            case CONST.COMPANY_CARDS.STEP.CARD_DETAILS:
+                return <DetailsStep />;
+            default:
+                return <CardTypeStep />;
+        }
     }
 }
 

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

@@ -11,6 +11,7 @@ import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import usePermissions from '@hooks/usePermissions';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
 import variables from '@styles/variables';
@@ -23,6 +24,7 @@ function CardTypeStep() {
     const styles = useThemeStyles();
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
     const [typeSelected, setTypeSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.CARD_TYPE>>();
+    const {canUseDirectFeeds} = usePermissions();
     const [isError, setIsError] = useState(false);
 
     const submit = () => {
@@ -44,7 +46,11 @@ function CardTypeStep() {
     }, [addNewCard?.data.cardType]);
 
     const handleBackButtonPress = () => {
-        Navigation.goBack();
+        if (canUseDirectFeeds) {
+            CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK});
+        } else {
+            Navigation.goBack();
+        }
     };
 
     const data = [