feat(wallet): add assigned cards tile to wallet

src/CONST.ts

@@ -919,6 +919,7 @@ const CONST = {
     },
 
     WALLET: {
+        CARD_STATE: [2, 3, 4, 7],
         TRANSFER_METHOD_TYPE: {
             INSTANT: 'instant',
             ACH: 'ach',

src/ROUTES.ts

@@ -49,6 +49,8 @@ export default {
     SETTINGS_ABOUT: 'settings/about',
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_WALLET: 'settings/wallet',
+    SETTINGS_WALLET_DOMAINCARDS: '/settings/wallet/card/:domain',
+    getWalletCardRoute: (domain) => `/settings/wallet/card/${domain}`,
     SETTINGS_ADD_PAYPAL_ME: 'settings/wallet/add-paypal-me',
     SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card',
     SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account',

src/languages/en.ts

@@ -799,6 +799,8 @@ export default {
         bankAccounts: 'Bank accounts',
         addBankAccountToSendAndReceive: 'Add a bank account to send and receive payments directly in the app.',
         addBankAccount: 'Add bank account',
+        assignedCards: 'Assigned cards',
+        assignedCardsDescription: 'These are cards assigned by a Workspace admin to manage company spend.',
     },
     transferAmountPage: {
         transfer: ({amount}: TransferParams) => `Transfer${amount ? ` ${amount}` : ''}`,

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -532,6 +532,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Wallet',
     },
+    // TODO: Create domain cards page
+    // {
+    //     getComponent: () => {
+    //         return null;
+    //     },
+    //     name: 'Settings_Wallet_DomainCards',
+    // },
     {
         getComponent: () => {
             const TransferBalancePage = require('../../../pages/settings/Wallet/TransferBalancePage').default;

src/libs/Navigation/linkingConfig.js

@@ -85,6 +85,9 @@ export default {
                                 path: ROUTES.SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT,
                                 exact: true,
                             },
+                            Settings_Wallet_DomainCards: {
+                                path: ROUTES.SETTINGS_WALLET_DOMAINCARDS,
+                            },
                             Settings_Add_Paypal_Me: {
                                 path: ROUTES.SETTINGS_ADD_PAYPAL_ME,
                                 exact: true,

src/pages/settings/Wallet/PaymentMethodList.js

@@ -23,6 +23,10 @@ import FormAlertWrapper from '../../../components/FormAlertWrapper';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
 import Log from '../../../libs/Log';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
+import getBankIcon from '../../../components/Icon/BankIcons';
+import assignedCardPropTypes from './assignedCardPropTypes';
 
 const propTypes = {
     /** What to do when a menu item is pressed */
@@ -34,12 +38,21 @@ const propTypes = {
     /** List of bank accounts */
     bankAccountList: PropTypes.objectOf(bankAccountPropTypes),
 
+    /** List of assigned cards */
+    cardList: PropTypes.objectOf(assignedCardPropTypes),
+
     /** List of user's cards */
     fundList: PropTypes.objectOf(cardPropTypes),
 
+    /** Whether the add bank account button should be shown on the list */
+    shouldShowAddBankAccount: PropTypes.bool,
+
     /** Whether the add Payment button be shown on the list */
     shouldShowAddPaymentMethodButton: PropTypes.bool,
 
+    /** Whether the assigned cards should be shown on the list */
+    shouldShowAssignedCards: PropTypes.bool,
+
     /** Whether the empty list message should be shown when the list is empty */
     shouldShowEmptyListMessage: PropTypes.bool,
 
@@ -82,13 +95,16 @@ const propTypes = {
 const defaultProps = {
     payPalMeData: {},
     bankAccountList: {},
+    cardList: {},
     fundList: null,
     userWallet: {
         walletLinkedAccountID: 0,
         walletLinkedAccountType: '',
     },
     isLoadingPaymentMethods: true,
+    shouldShowAddBankAccount: true,
     shouldShowAddPaymentMethodButton: true,
+    shouldShowAssignedCards: false,
     shouldShowEmptyListMessage: true,
     filterType: '',
     actionPaymentMethodType: '',
@@ -157,6 +173,7 @@ function PaymentMethodList({
     activePaymentMethodID,
     bankAccountList,
     buttonRef,
+    cardList,
     fundList,
     filterType,
     isLoadingPaymentMethods,
@@ -165,14 +182,25 @@ function PaymentMethodList({
     onListContentSizeChange,
     onPress,
     payPalMeData,
+    shouldShowAddBankAccount,
     shouldShowAddPaymentMethodButton,
+    shouldShowAssignedCards,
     shouldShowEmptyListMessage,
     shouldShowSelectedState,
     selectedMethodID,
     translate,
 }) {
     const filteredPaymentMethods = useMemo(() => {
         const paymentCardList = fundList || {};
+
+        if (shouldShowAssignedCards) {
+            const assignedCards = _.filter(cardList, (card) => CONST.WALLET.CARD_STATE.includes(card.state));
+            return _.map(assignedCards, (card) => {
+                const icon = getBankIcon(card.bank);
+                return {title: 'Expensify Card', description: card.domainName, onPress: () => Navigation.navigate(ROUTES.getWalletCardRoute(card.domainName)), ...icon};
+            });
+        }
+
         // Hide any billing cards that are not P2P debit cards for now because you cannot make them your default method, or delete them
         const filteredCardList = _.filter(paymentCardList, (card) => card.accountData.additionalData.isP2PDebitCard);
         let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, filteredCardList, payPalMeData);
@@ -199,7 +227,7 @@ function PaymentMethodList({
         }));
 
         return combinedPaymentMethods;
-    }, [actionPaymentMethodType, activePaymentMethodID, bankAccountList, filterType, network, onPress, payPalMeData, fundList]);
+    }, [fundList, shouldShowAssignedCards, bankAccountList, payPalMeData, filterType, network.isOffline, cardList, actionPaymentMethodType, activePaymentMethodID, onPress]);
 
     /**
      * Render placeholder when there are no payments methods
@@ -247,12 +275,13 @@ function PaymentMethodList({
                     iconWidth={item.iconSize}
                     badgeText={shouldShowDefaultBadge(filteredPaymentMethods, item.isDefault) ? translate('paymentMethodList.defaultPaymentMethod') : null}
                     wrapperStyle={styles.cardMenuItem}
+                    shouldShowRightIcon={shouldShowAssignedCards}
                     shouldShowSelectedState={shouldShowSelectedState}
                     isSelected={selectedMethodID === item.methodID}
                 />
             </OfflineWithFeedback>
         ),
-        [filteredPaymentMethods, translate, shouldShowSelectedState, selectedMethodID],
+        [filteredPaymentMethods, translate, shouldShowAssignedCards, shouldShowSelectedState, selectedMethodID],
     );
 
     return (
@@ -263,7 +292,7 @@ function PaymentMethodList({
                 keyExtractor={(item) => item.key}
                 ListEmptyComponent={shouldShowEmptyListMessage ? renderListEmptyComponent(translate) : null}
                 ListHeaderComponent={listHeaderComponent}
-                ListFooterComponent={renderListFooterComponent}
+                ListFooterComponent={shouldShowAddBankAccount ? renderListFooterComponent : null}
                 onContentSizeChange={onListContentSizeChange}
             />
             {shouldShowAddPaymentMethodButton && (
@@ -300,6 +329,9 @@ export default compose(
         bankAccountList: {
             key: ONYXKEYS.BANK_ACCOUNT_LIST,
         },
+        cardList: {
+            key: ONYXKEYS.CARD_LIST,
+        },
         fundList: {
             key: ONYXKEYS.FUND_LIST,
         },

src/pages/settings/Wallet/WalletPage/BaseWalletPage.js

@@ -387,6 +387,27 @@ function BaseWalletPage({bankAccountList, betas, cardList, fundList, isLoadingPa
                                     </>
                                 </WalletSection>
                             )}
+                            {hasAssignedCard ? (
+                                <WalletSection
+                                    icon={Illustrations.CreditCardsNew}
+                                    subtitle={translate('walletPage.assignedCardsDescription')}
+                                    title={translate('walletPage.assignedCards')}
+                                >
+                                    <PaymentMethodList
+                                        shouldShowAddBankAccount={false}
+                                        shouldShowAddPaymentMethodButton={false}
+                                        shouldShowAssignedCards
+                                        shouldShowEmptyListMessage={false}
+                                        onPress={paymentMethodPressed}
+                                        style={[styles.flex4]}
+                                        isAddPaymentMenuActive={shouldShowAddPaymentMenu}
+                                        actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''}
+                                        activePaymentMethodID={shouldShowDefaultDeleteMenu ? getSelectedPaymentMethodID() : ''}
+                                        buttonRef={addPaymentMethodAnchorRef}
+                                        onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}}
+                                    />
+                                </WalletSection>
+                            ) : null}
                             <WalletSection
                                 icon={Illustrations.BankArrow}
                                 subtitle={translate('walletPage.addBankAccountToSendAndReceive')}

src/pages/settings/Wallet/assignedCardPropTypes.js

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import CONST from '../../../CONST';
+
+/** Assigned Card props */
+const assignedCardPropTypes = PropTypes.shape({
+    cardID: PropTypes.number,
+    state: PropTypes.number,
+    bank: PropTypes.string,
+    availableSpend: PropTypes.number,
+    domainName: PropTypes.string,
+    maskedPan: PropTypes.string,
+    isVirtual: PropTypes.bool,
+    fraud: CONST.EXPENSIFY_CARD.FRAUD_TYPES,
+    cardholderFirstName: PropTypes.string,
+    cardholderLastName: PropTypes.string,
+});
+
+export default assignedCardPropTypes;