diff --git a/src/CONST.ts b/src/CONST.ts index cced7994711b..1c7d29cb5f28 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -919,6 +919,7 @@ const CONST = { }, WALLET: { + CARD_STATE: [2, 3, 4, 7], TRANSFER_METHOD_TYPE: { INSTANT: 'instant', ACH: 'ach', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 3ea8bd868d6a..ace35f147a59 100644 --- a/src/ROUTES.ts +++ b/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', diff --git a/src/languages/en.ts b/src/languages/en.ts index c0c823589eb6..420daeaf8e02 100755 --- a/src/languages/en.ts +++ b/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}` : ''}`, diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 2adaf0397a2c..4fe29b4ab6e9 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/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; diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index ee3054e02f96..3dcc831fadaf 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/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, diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js index caf490c4a5ab..2a223fce47a9 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.js +++ b/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,7 +182,9 @@ function PaymentMethodList({ onListContentSizeChange, onPress, payPalMeData, + shouldShowAddBankAccount, shouldShowAddPaymentMethodButton, + shouldShowAssignedCards, shouldShowEmptyListMessage, shouldShowSelectedState, selectedMethodID, @@ -173,6 +192,15 @@ function PaymentMethodList({ }) { 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} /> ), - [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, }, diff --git a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js index eed6088b9911..339076451c7a 100644 --- a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js +++ b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js @@ -387,6 +387,27 @@ function BaseWalletPage({bankAccountList, betas, cardList, fundList, isLoadingPa )} + {hasAssignedCard ? ( + + {}} + /> + + ) : null}