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}