diff --git a/assets/images/bankicons/american-express.svg b/assets/images/bankicons/american-express.svg index b22ccbb4169a..0ab8383d46ed 100644 --- a/assets/images/bankicons/american-express.svg +++ b/assets/images/bankicons/american-express.svg @@ -1,38 +1,23 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/bank-of-america.svg b/assets/images/bankicons/bank-of-america.svg index 0d962a914cfd..e4f87be611fc 100644 --- a/assets/images/bankicons/bank-of-america.svg +++ b/assets/images/bankicons/bank-of-america.svg @@ -1,22 +1,22 @@ - - - - - - - - - - - + + + + + + + + + + + diff --git a/assets/images/bankicons/bb-t.svg b/assets/images/bankicons/bb-t.svg index 13dba55f68f4..7e7bf1f29ee4 100644 --- a/assets/images/bankicons/bb-t.svg +++ b/assets/images/bankicons/bb-t.svg @@ -1,27 +1,25 @@ - - - - - - - - - - - + + + + + + + + + diff --git a/assets/images/bankicons/capital-one.svg b/assets/images/bankicons/capital-one.svg index 116543884e52..c37c8e3ca582 100644 --- a/assets/images/bankicons/capital-one.svg +++ b/assets/images/bankicons/capital-one.svg @@ -1,55 +1,53 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/charles-schwab.svg b/assets/images/bankicons/charles-schwab.svg index 4ba4ca4f9488..181a668965da 100644 --- a/assets/images/bankicons/charles-schwab.svg +++ b/assets/images/bankicons/charles-schwab.svg @@ -1,59 +1,58 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/chase.svg b/assets/images/bankicons/chase.svg index 1df546e9785b..70f0b911f147 100644 --- a/assets/images/bankicons/chase.svg +++ b/assets/images/bankicons/chase.svg @@ -1,12 +1,13 @@ - - - - - - - + + + + + + + diff --git a/assets/images/bankicons/citibank.svg b/assets/images/bankicons/citibank.svg index 482f33c8b9c9..b03e1efe9bb6 100644 --- a/assets/images/bankicons/citibank.svg +++ b/assets/images/bankicons/citibank.svg @@ -1,18 +1,18 @@ - - - - - - - - + + + + + + + + diff --git a/assets/images/bankicons/citizens-bank.svg b/assets/images/bankicons/citizens-bank.svg index 19160a747490..a0cdc6c1df2b 100644 --- a/assets/images/bankicons/citizens-bank.svg +++ b/assets/images/bankicons/citizens-bank.svg @@ -1,49 +1,47 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/discover.svg b/assets/images/bankicons/discover.svg index 60396e16d29e..75db16e4d1c1 100644 --- a/assets/images/bankicons/discover.svg +++ b/assets/images/bankicons/discover.svg @@ -1 +1,47 @@ -Discover 4 \ No newline at end of file + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/expensify-background.png b/assets/images/bankicons/expensify-background.png new file mode 100644 index 000000000000..ab7b71d34e11 Binary files /dev/null and b/assets/images/bankicons/expensify-background.png differ diff --git a/assets/images/bankicons/expensify.svg b/assets/images/bankicons/expensify.svg new file mode 100644 index 000000000000..b61773e8d838 --- /dev/null +++ b/assets/images/bankicons/expensify.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/assets/images/bankicons/fidelity.svg b/assets/images/bankicons/fidelity.svg index ac0a05babc95..d49eca17c12d 100644 --- a/assets/images/bankicons/fidelity.svg +++ b/assets/images/bankicons/fidelity.svg @@ -1,17 +1,17 @@ - - - - - - - + + + + + + + diff --git a/assets/images/bankicons/generic-bank-account.svg b/assets/images/bankicons/generic-bank-account.svg index 8912413c668d..493f06b335d8 100644 --- a/assets/images/bankicons/generic-bank-account.svg +++ b/assets/images/bankicons/generic-bank-account.svg @@ -1,14 +1,14 @@ - + - - + + diff --git a/assets/images/bankicons/huntington-bank.svg b/assets/images/bankicons/huntington-bank.svg index e6b43b78daaa..40909a273e19 100644 --- a/assets/images/bankicons/huntington-bank.svg +++ b/assets/images/bankicons/huntington-bank.svg @@ -1,24 +1,22 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/navy-federal-credit-union.svg b/assets/images/bankicons/navy-federal-credit-union.svg index 5541daa9f49a..898cd03768f0 100644 --- a/assets/images/bankicons/navy-federal-credit-union.svg +++ b/assets/images/bankicons/navy-federal-credit-union.svg @@ -1,89 +1,85 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/pnc.svg b/assets/images/bankicons/pnc.svg index 104abb28ba05..3f78dbe94f47 100644 --- a/assets/images/bankicons/pnc.svg +++ b/assets/images/bankicons/pnc.svg @@ -1,19 +1,17 @@ - - - - - - - - - - - + + + + + + + + + diff --git a/assets/images/bankicons/regions-bank.svg b/assets/images/bankicons/regions-bank.svg index 2de53c116064..bff045f0eb5a 100644 --- a/assets/images/bankicons/regions-bank.svg +++ b/assets/images/bankicons/regions-bank.svg @@ -1,40 +1,38 @@ - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/suntrust.svg b/assets/images/bankicons/suntrust.svg index 256b8157600f..b5b94c105b14 100644 --- a/assets/images/bankicons/suntrust.svg +++ b/assets/images/bankicons/suntrust.svg @@ -1,220 +1,217 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/td-bank.svg b/assets/images/bankicons/td-bank.svg index 03f100171f67..84675de5f2bf 100644 --- a/assets/images/bankicons/td-bank.svg +++ b/assets/images/bankicons/td-bank.svg @@ -1,16 +1,14 @@ - - - - - - - - - - - + + + + + + + + + diff --git a/assets/images/bankicons/us-bank.svg b/assets/images/bankicons/us-bank.svg index d1364e253e62..e091ba0a6f50 100644 --- a/assets/images/bankicons/us-bank.svg +++ b/assets/images/bankicons/us-bank.svg @@ -1,29 +1,27 @@ - - - - - - - - - - - - - + + + + + + + + + + + diff --git a/assets/images/bankicons/usaa.svg b/assets/images/bankicons/usaa.svg index 2552db28eca3..1e137fab626f 100644 --- a/assets/images/bankicons/usaa.svg +++ b/assets/images/bankicons/usaa.svg @@ -1,38 +1,36 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/american-express.svg b/assets/images/cardicons/american-express.svg new file mode 100644 index 000000000000..9e31f7c8a08e --- /dev/null +++ b/assets/images/cardicons/american-express.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/bank-of-america.svg b/assets/images/cardicons/bank-of-america.svg new file mode 100644 index 000000000000..62dd510b0649 --- /dev/null +++ b/assets/images/cardicons/bank-of-america.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + diff --git a/assets/images/cardicons/bb-t.svg b/assets/images/cardicons/bb-t.svg new file mode 100644 index 000000000000..ad3676458d21 --- /dev/null +++ b/assets/images/cardicons/bb-t.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + diff --git a/assets/images/cardicons/capital-one.svg b/assets/images/cardicons/capital-one.svg new file mode 100644 index 000000000000..ee4f756e2600 --- /dev/null +++ b/assets/images/cardicons/capital-one.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/charles-schwab.svg b/assets/images/cardicons/charles-schwab.svg new file mode 100644 index 000000000000..39c894042cd3 --- /dev/null +++ b/assets/images/cardicons/charles-schwab.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/chase.svg b/assets/images/cardicons/chase.svg new file mode 100644 index 000000000000..8e8ddb6d5378 --- /dev/null +++ b/assets/images/cardicons/chase.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/assets/images/cardicons/citibank.svg b/assets/images/cardicons/citibank.svg new file mode 100644 index 000000000000..f9869aee7146 --- /dev/null +++ b/assets/images/cardicons/citibank.svg @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/assets/images/cardicons/citizens.svg b/assets/images/cardicons/citizens.svg new file mode 100644 index 000000000000..3b4bf9ea1af3 --- /dev/null +++ b/assets/images/cardicons/citizens.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/discover.svg b/assets/images/cardicons/discover.svg new file mode 100644 index 000000000000..668e5634339d --- /dev/null +++ b/assets/images/cardicons/discover.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/expensify-card-dark.svg b/assets/images/cardicons/expensify-card-dark.svg new file mode 100644 index 000000000000..4a65afeeda9d --- /dev/null +++ b/assets/images/cardicons/expensify-card-dark.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/fidelity.svg b/assets/images/cardicons/fidelity.svg new file mode 100644 index 000000000000..c87f9c4aa56c --- /dev/null +++ b/assets/images/cardicons/fidelity.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/assets/images/cardicons/generic-bank-card.svg b/assets/images/cardicons/generic-bank-card.svg new file mode 100644 index 000000000000..f700691ac29b --- /dev/null +++ b/assets/images/cardicons/generic-bank-card.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/assets/images/cardicons/huntington-bank.svg b/assets/images/cardicons/huntington-bank.svg new file mode 100644 index 000000000000..c108c7039898 --- /dev/null +++ b/assets/images/cardicons/huntington-bank.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/navy-federal-credit-union.svg b/assets/images/cardicons/navy-federal-credit-union.svg new file mode 100644 index 000000000000..5abc1103cce1 --- /dev/null +++ b/assets/images/cardicons/navy-federal-credit-union.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/pnc.svg b/assets/images/cardicons/pnc.svg new file mode 100644 index 000000000000..ae4d4aac8e41 --- /dev/null +++ b/assets/images/cardicons/pnc.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/assets/images/cardicons/regions-bank.svg b/assets/images/cardicons/regions-bank.svg new file mode 100644 index 000000000000..1837ad2be41b --- /dev/null +++ b/assets/images/cardicons/regions-bank.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/suntrust.svg b/assets/images/cardicons/suntrust.svg new file mode 100644 index 000000000000..32ea5096f876 --- /dev/null +++ b/assets/images/cardicons/suntrust.svg @@ -0,0 +1,237 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/td-bank.svg b/assets/images/cardicons/td-bank.svg new file mode 100644 index 000000000000..19988e35bbbe --- /dev/null +++ b/assets/images/cardicons/td-bank.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/assets/images/cardicons/us-bank.svg b/assets/images/cardicons/us-bank.svg new file mode 100644 index 000000000000..321b4cb755b0 --- /dev/null +++ b/assets/images/cardicons/us-bank.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + diff --git a/assets/images/cardicons/usaa.svg b/assets/images/cardicons/usaa.svg new file mode 100644 index 000000000000..bb634f64e658 --- /dev/null +++ b/assets/images/cardicons/usaa.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/CONST.ts b/src/CONST.ts index e2f3fea08215..5569a9356432 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1240,6 +1240,7 @@ const CONST = { NONE: 'none', }, STATE: { + STATE_NOT_ISSUED: 2, OPEN: 3, NOT_ACTIVATED: 4, STATE_DEACTIVATED: 5, diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 3118eec56a6d..a30594d1ab3f 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -1,5 +1,6 @@ import {SvgProps} from 'react-native-svg'; -import * as Expensicons from './Expensicons'; +import {CSSProperties} from 'react'; +import {ViewStyle} from 'react-native'; import AmericanExpress from '../../../assets/images/bankicons/american-express.svg'; import BankOfAmerica from '../../../assets/images/bankicons/bank-of-america.svg'; import BB_T from '../../../assets/images/bankicons/bb-t.svg'; @@ -19,11 +20,36 @@ import SunTrust from '../../../assets/images/bankicons/suntrust.svg'; import TdBank from '../../../assets/images/bankicons/td-bank.svg'; import USBank from '../../../assets/images/bankicons/us-bank.svg'; import USAA from '../../../assets/images/bankicons/usaa.svg'; +// Card Icons +import AmericanExpressCard from '../../../assets/images/cardicons/american-express.svg'; +import BankOfAmericaCard from '../../../assets/images/cardicons/bank-of-america.svg'; +import BB_TCard from '../../../assets/images/cardicons/bb-t.svg'; +import CapitalOneCard from '../../../assets/images/cardicons/capital-one.svg'; +import CharlesSchwabCard from '../../../assets/images/cardicons/charles-schwab.svg'; +import ChaseCard from '../../../assets/images/cardicons/chase.svg'; +import CitiBankCard from '../../../assets/images/cardicons/citibank.svg'; +import CitizensBankCard from '../../../assets/images/cardicons/citizens.svg'; +import DiscoverCard from '../../../assets/images/cardicons/discover.svg'; +import FidelityCard from '../../../assets/images/cardicons/fidelity.svg'; +import HuntingtonBankCard from '../../../assets/images/cardicons/huntington-bank.svg'; +import GenericBankCard from '../../../assets/images/cardicons/generic-bank-card.svg'; +import NavyFederalCreditUnionCard from '../../../assets/images/cardicons/navy-federal-credit-union.svg'; +import PNCCard from '../../../assets/images/cardicons/pnc.svg'; +import RegionsBankCard from '../../../assets/images/cardicons/regions-bank.svg'; +import SunTrustCard from '../../../assets/images/cardicons/suntrust.svg'; +import TdBankCard from '../../../assets/images/cardicons/td-bank.svg'; +import USBankCard from '../../../assets/images/cardicons/us-bank.svg'; +import USAACard from '../../../assets/images/cardicons/usaa.svg'; +import ExpensifyCardImage from '../../../assets/images/cardicons/expensify-card-dark.svg'; +import styles from '../../styles/styles'; import variables from '../../styles/variables'; type BankIcon = { icon: React.FC; iconSize?: number; + iconHeight?: number; + iconWidth?: number; + iconStyles?: Array; }; /** @@ -31,79 +57,83 @@ type BankIcon = { */ function getAssetIcon(bankName: string, isCard: boolean): React.FC { + if (bankName.includes('expensify')) { + return ExpensifyCardImage; + } + if (bankName.includes('americanexpress')) { - return AmericanExpress; + return isCard ? AmericanExpressCard : AmericanExpress; } if (bankName.includes('bank of america') || bankName.includes('bankofamerica')) { - return BankOfAmerica; + return isCard ? BankOfAmericaCard : BankOfAmerica; } if (bankName.startsWith('bbt')) { - return BB_T; + return isCard ? BB_TCard : BB_T; } if (bankName.startsWith('capital one') || bankName.includes('capitalone')) { - return CapitalOne; + return isCard ? CapitalOneCard : CapitalOne; } if (bankName.startsWith('chase') || bankName.includes('chase')) { - return Chase; + return isCard ? ChaseCard : Chase; } if (bankName.includes('charles schwab') || bankName.includes('charlesschwab')) { - return CharlesSchwab; + return isCard ? CharlesSchwabCard : CharlesSchwab; } if (bankName.startsWith('citibank') || bankName.includes('citibank')) { - return CitiBank; + return isCard ? CitiBankCard : CitiBank; } if (bankName.startsWith('citizens bank') || bankName.includes('citizensbank')) { - return CitizensBank; + return isCard ? CitizensBankCard : CitizensBank; } if (bankName.startsWith('discover ') || bankName.includes('discover.') || bankName === 'discover') { - return Discover; + return isCard ? DiscoverCard : Discover; } if (bankName.startsWith('fidelity')) { - return Fidelity; + return isCard ? FidelityCard : Fidelity; } if (bankName.startsWith('huntington bank') || bankName.includes('huntingtonnational') || bankName.includes('huntington national')) { - return HuntingtonBank; + return isCard ? HuntingtonBankCard : HuntingtonBank; } if (bankName.startsWith('navy federal credit union') || bankName.includes('navy federal credit union')) { - return NavyFederalCreditUnion; + return isCard ? NavyFederalCreditUnionCard : NavyFederalCreditUnion; } if (bankName.startsWith('pnc') || bankName.includes('pnc')) { - return PNC; + return isCard ? PNCCard : PNC; } if (bankName.startsWith('regions bank') || bankName.includes('regionsbank')) { - return RegionsBank; + return isCard ? RegionsBankCard : RegionsBank; } if (bankName.startsWith('suntrust') || bankName.includes('suntrust')) { - return SunTrust; + return isCard ? SunTrustCard : SunTrust; } if (bankName.startsWith('td bank') || bankName.startsWith('tdbank') || bankName.includes('tdbank')) { - return TdBank; + return isCard ? TdBankCard : TdBank; } if (bankName.startsWith('us bank') || bankName.startsWith('usbank')) { - return USBank; + return isCard ? USBankCard : USBank; } if (bankName.includes('usaa')) { - return USAA; + return isCard ? USAACard : USAA; } - return isCard ? Expensicons.CreditCard : GenericBank; + return isCard ? GenericBankCard : GenericBank; } /** @@ -112,7 +142,7 @@ function getAssetIcon(bankName: string, isCard: boolean): React.FC { export default function getBankIcon(bankName: string, isCard = false): BankIcon { const bankIcon: BankIcon = { - icon: isCard ? Expensicons.CreditCard : GenericBank, + icon: isCard ? GenericBankCard : GenericBank, }; if (bankName) { @@ -120,8 +150,13 @@ export default function getBankIcon(bankName: string, isCard = false): BankIcon } // For default Credit Card icon the icon size should not be set. - if (![Expensicons.CreditCard].includes(bankIcon.icon)) { + if (!isCard) { bankIcon.iconSize = variables.iconSizeExtraLarge; + bankIcon.iconStyles = [styles.bankIconContainer]; + } else { + bankIcon.iconHeight = variables.bankCardHeight; + bankIcon.iconWidth = variables.bankCardWidth; + bankIcon.iconStyles = [styles.assignedCardsIconContainer]; } return bankIcon; diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index c8ea03cc86c0..87eca3e338b9 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -64,8 +64,9 @@ function getYearFromExpirationDateString(expirationDateString: string) { * @returns collection of assigned cards grouped by domain */ function getDomainCards(cardList: Record) { + // Check for domainName to filter out personal credit cards. // eslint-disable-next-line you-dont-need-lodash-underscore/filter - const activeCards = lodash.filter(cardList, (card) => (CONST.EXPENSIFY_CARD.ACTIVE_STATES as ReadonlyArray).includes(card.state)); + const activeCards = lodash.filter(cardList, (card) => !!card.domainName && (CONST.EXPENSIFY_CARD.ACTIVE_STATES as ReadonlyArray).includes(card.state)); return lodash.groupBy(activeCards, (card) => card.domainName); } diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index 7ea935577fb1..295394f37140 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -47,22 +47,28 @@ function formatPaymentMethods(bankAccountList: Record, fund return; } - const {icon, iconSize} = getBankIcon(bankAccount?.accountData?.additionalData?.bankName ?? '', false); + const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(bankAccount?.accountData?.additionalData?.bankName ?? '', false); combinedPaymentMethods.push({ ...bankAccount, description: getPaymentMethodDescription(bankAccount?.accountType, bankAccount.accountData), icon, iconSize, + iconHeight, + iconWidth, + iconStyles, }); }); Object.values(fundList).forEach((card) => { - const {icon, iconSize} = getBankIcon(card?.accountData?.bank ?? '', true); + const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(card?.accountData?.bank ?? '', true); combinedPaymentMethods.push({ ...card, description: getPaymentMethodDescription(card?.accountType, card.accountData), icon, iconSize, + iconHeight, + iconWidth, + iconStyles, }); }); diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js index 2a533a784a62..cd50d9701373 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.js +++ b/src/pages/settings/Wallet/PaymentMethodList.js @@ -201,18 +201,24 @@ function PaymentMethodList({ if (shouldShowAssignedCards) { const assignedCards = _.chain(cardList) - .filter((card) => CONST.EXPENSIFY_CARD.ACTIVE_STATES.includes(card.state)) - .sortBy((card) => (CardUtils.isExpensifyCard(card.cardID) ? 0 : 1)) + // Filter by physical, active cards associated with a domain + .filter((card) => !card.isVirtual && card.domainName && CONST.EXPENSIFY_CARD.ACTIVE_STATES.includes(card.state)) + .sortBy((card) => !CardUtils.isExpensifyCard(card.cardID)) .value(); + const numberPhysicalExpensifyCards = _.filter(assignedCards, (card) => CardUtils.isExpensifyCard(card.cardID)).length; + return _.map(assignedCards, (card) => { - const icon = getBankIcon(card.bank); const isExpensifyCard = CardUtils.isExpensifyCard(card.cardID); + const icon = getBankIcon(card.bank, true); + + // In the case a user has been assigned multiple physical Expensify Cards under one domain, display the Card with PAN + const expensifyCardDescription = numberPhysicalExpensifyCards > 1 ? CardUtils.getCardDescription(card.cardID) : translate('walletPage.expensifyCard'); return { key: card.cardID, - title: isExpensifyCard ? translate('walletPage.expensifyCard') : card.cardName, + title: isExpensifyCard ? expensifyCardDescription : card.cardName, description: card.domainName, - onPress: isExpensifyCard ? () => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(card.domainName)) : () => {}, + onPress: isExpensifyCard ? () => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(card.domainName)) : () => {}, shouldShowRightIcon: isExpensifyCard, interactive: isExpensifyCard, canDismissError: isExpensifyCard, @@ -293,8 +299,9 @@ function PaymentMethodList({ icon={item.icon} disabled={item.disabled} iconFill={item.iconFill} - iconHeight={item.iconSize} - iconWidth={item.iconSize} + iconHeight={item.iconHeight || item.iconSize} + iconWidth={item.iconWidth || item.iconSize} + iconStyles={item.iconStyles} badgeText={shouldShowDefaultBadge(filteredPaymentMethods, item.isDefault) ? translate('paymentMethodList.defaultPaymentMethod') : null} wrapperStyle={styles.paymentMethod} shouldShowRightIcon={item.shouldShowRightIcon} diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 67c1e1cb9589..f6d0b9210c0d 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3770,6 +3770,22 @@ const styles = (theme: ThemeDefault) => borderBottomColor: theme.border, }, + assignedCardsIconContainer: { + height: variables.bankCardHeight, + width: variables.bankCardWidth, + borderRadius: 4, + overflow: 'hidden', + alignSelf: 'center', + }, + + bankIconContainer: { + height: variables.bankCardWidth, + width: variables.bankCardWidth, + borderRadius: 8, + overflow: 'hidden', + alignSelf: 'center', + }, + moneyRequestHeaderStatusBarBadge: { paddingHorizontal: 8, borderRadius: variables.componentBorderRadiusSmall, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index ea0af11d1b7a..b0d04ef68cc7 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -172,6 +172,8 @@ export default { reportActionImagesSingleImageHeight: 147, reportActionImagesDoubleImageHeight: 138, reportActionImagesMultipleImageHeight: 110, + bankCardWidth: 40, + bankCardHeight: 26, // The height of the empty list is 14px (2px for borders and 12px for vertical padding) // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts index be9c31845acd..2e013957f56f 100644 --- a/src/types/onyx/Card.ts +++ b/src/types/onyx/Card.ts @@ -2,11 +2,9 @@ import {ValueOf} from 'type-fest'; import CONST from '../../CONST'; import * as OnyxCommon from './OnyxCommon'; -type State = 3 /* OPEN */ | 4 /* NOT_ACTIVATED */ | 5 /* STATE_DEACTIVATED */ | 6 /* CLOSED */ | 7 /* STATE_SUSPENDED */; - type Card = { cardID: number; - state: State; + state: ValueOf; bank: string; availableSpend: number; domainName: string; diff --git a/src/types/onyx/PaymentMethod.ts b/src/types/onyx/PaymentMethod.ts index 773e6ff1197c..85f3655f49e8 100644 --- a/src/types/onyx/PaymentMethod.ts +++ b/src/types/onyx/PaymentMethod.ts @@ -1,4 +1,6 @@ import {SvgProps} from 'react-native-svg'; +import {CSSProperties} from 'react'; +import {ViewStyle} from 'react-native'; import BankAccount from './BankAccount'; import Fund from './Fund'; @@ -6,6 +8,9 @@ type PaymentMethod = (BankAccount | Fund) & { description: string; icon: React.FC; iconSize?: number; + iconHeight?: number; + iconWidth?: number; + iconStyles?: Array; }; export default PaymentMethod;