diff --git a/assets/images/bankicons/american-express-card.svg b/assets/images/bankicons/american-express-card.svg
new file mode 100644
index 000000000000..9e31f7c8a08e
--- /dev/null
+++ b/assets/images/bankicons/american-express-card.svg
@@ -0,0 +1,25 @@
+
+
+
diff --git a/assets/images/bankicons/bank-of-america-card.svg b/assets/images/bankicons/bank-of-america-card.svg
new file mode 100644
index 000000000000..62dd510b0649
--- /dev/null
+++ b/assets/images/bankicons/bank-of-america-card.svg
@@ -0,0 +1,25 @@
+
+
+
diff --git a/assets/images/bankicons/bb-t-card.svg b/assets/images/bankicons/bb-t-card.svg
new file mode 100644
index 000000000000..ad3676458d21
--- /dev/null
+++ b/assets/images/bankicons/bb-t-card.svg
@@ -0,0 +1,33 @@
+
+
+
diff --git a/assets/images/bankicons/capital-one-card.svg b/assets/images/bankicons/capital-one-card.svg
new file mode 100644
index 000000000000..ee4f756e2600
--- /dev/null
+++ b/assets/images/bankicons/capital-one-card.svg
@@ -0,0 +1,67 @@
+
+
+
diff --git a/assets/images/bankicons/charles-schwab-card.svg b/assets/images/bankicons/charles-schwab-card.svg
new file mode 100644
index 000000000000..39c894042cd3
--- /dev/null
+++ b/assets/images/bankicons/charles-schwab-card.svg
@@ -0,0 +1,76 @@
+
+
+
diff --git a/assets/images/bankicons/chase-card.svg b/assets/images/bankicons/chase-card.svg
new file mode 100644
index 000000000000..8e8ddb6d5378
--- /dev/null
+++ b/assets/images/bankicons/chase-card.svg
@@ -0,0 +1,15 @@
+
+
+
diff --git a/assets/images/bankicons/citibank-card.svg b/assets/images/bankicons/citibank-card.svg
new file mode 100644
index 000000000000..b9509cc7e37e
--- /dev/null
+++ b/assets/images/bankicons/citibank-card.svg
@@ -0,0 +1,22 @@
+
+
+
diff --git a/assets/images/bankicons/citizens-card.svg b/assets/images/bankicons/citizens-card.svg
new file mode 100644
index 000000000000..3b4bf9ea1af3
--- /dev/null
+++ b/assets/images/bankicons/citizens-card.svg
@@ -0,0 +1,57 @@
+
+
+
diff --git a/assets/images/bankicons/discover-card.svg b/assets/images/bankicons/discover-card.svg
new file mode 100644
index 000000000000..668e5634339d
--- /dev/null
+++ b/assets/images/bankicons/discover-card.svg
@@ -0,0 +1,53 @@
+
+
+
diff --git a/assets/images/bankicons/expensify-card-dark.svg b/assets/images/bankicons/expensify-card-dark.svg
new file mode 100644
index 000000000000..4a65afeeda9d
--- /dev/null
+++ b/assets/images/bankicons/expensify-card-dark.svg
@@ -0,0 +1,78 @@
+
+
+
diff --git a/assets/images/bankicons/fidelity-card.svg b/assets/images/bankicons/fidelity-card.svg
new file mode 100644
index 000000000000..c87f9c4aa56c
--- /dev/null
+++ b/assets/images/bankicons/fidelity-card.svg
@@ -0,0 +1,21 @@
+
+
+
diff --git a/assets/images/bankicons/generic-bank-card.svg b/assets/images/bankicons/generic-bank-card.svg
new file mode 100644
index 000000000000..e29006ba1077
--- /dev/null
+++ b/assets/images/bankicons/generic-bank-card.svg
@@ -0,0 +1,16 @@
+
+
+
diff --git a/assets/images/bankicons/huntington-bank-card.svg b/assets/images/bankicons/huntington-bank-card.svg
new file mode 100644
index 000000000000..c108c7039898
--- /dev/null
+++ b/assets/images/bankicons/huntington-bank-card.svg
@@ -0,0 +1,26 @@
+
+
+
diff --git a/assets/images/bankicons/navy-federal-credit-union-card.svg b/assets/images/bankicons/navy-federal-credit-union-card.svg
new file mode 100644
index 000000000000..5abc1103cce1
--- /dev/null
+++ b/assets/images/bankicons/navy-federal-credit-union-card.svg
@@ -0,0 +1,105 @@
+
+
+
diff --git a/assets/images/bankicons/pnc-card.svg b/assets/images/bankicons/pnc-card.svg
new file mode 100644
index 000000000000..ae4d4aac8e41
--- /dev/null
+++ b/assets/images/bankicons/pnc-card.svg
@@ -0,0 +1,18 @@
+
+
+
diff --git a/assets/images/bankicons/regions-bank-card.svg b/assets/images/bankicons/regions-bank-card.svg
new file mode 100644
index 000000000000..1837ad2be41b
--- /dev/null
+++ b/assets/images/bankicons/regions-bank-card.svg
@@ -0,0 +1,45 @@
+
+
+
diff --git a/assets/images/bankicons/suntrust-card.svg b/assets/images/bankicons/suntrust-card.svg
new file mode 100644
index 000000000000..32ea5096f876
--- /dev/null
+++ b/assets/images/bankicons/suntrust-card.svg
@@ -0,0 +1,237 @@
+
+
+
diff --git a/assets/images/bankicons/td-bank-card.svg b/assets/images/bankicons/td-bank-card.svg
new file mode 100644
index 000000000000..19988e35bbbe
--- /dev/null
+++ b/assets/images/bankicons/td-bank-card.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/assets/images/bankicons/us-bank-card.svg b/assets/images/bankicons/us-bank-card.svg
new file mode 100644
index 000000000000..321b4cb755b0
--- /dev/null
+++ b/assets/images/bankicons/us-bank-card.svg
@@ -0,0 +1,32 @@
+
+
+
diff --git a/assets/images/bankicons/usaa-card.svg b/assets/images/bankicons/usaa-card.svg
new file mode 100644
index 000000000000..bb634f64e658
--- /dev/null
+++ b/assets/images/bankicons/usaa-card.svg
@@ -0,0 +1,40 @@
+
+
+
diff --git a/src/CONST.ts b/src/CONST.ts
index 70e9bd202e78..f0d1a9ed69ff 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..9a0de0c1e628 100644
--- a/src/components/Icon/BankIcons.ts
+++ b/src/components/Icon/BankIcons.ts
@@ -19,6 +19,27 @@ 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/bankicons/american-express-card.svg';
+import BankOfAmericaCard from '../../../assets/images/bankicons/bank-of-america-card.svg';
+import BB_TCard from '../../../assets/images/bankicons/bb-t-card.svg';
+import CapitalOneCard from '../../../assets/images/bankicons/capital-one-card.svg';
+import CharlesSchwabCard from '../../../assets/images/bankicons/charles-schwab-card.svg';
+import ChaseCard from '../../../assets/images/bankicons/chase-card.svg';
+import CitiBankCard from '../../../assets/images/bankicons/citibank-card.svg';
+import CitizensBankCard from '../../../assets/images/bankicons/citizens-card.svg';
+import DiscoverCard from '../../../assets/images/bankicons/discover-card.svg';
+import FidelityCard from '../../../assets/images/bankicons/fidelity-card.svg';
+import HuntingtonBankCard from '../../../assets/images/bankicons/huntington-bank-card.svg';
+import NavyFederalCreditUnionCard from '../../../assets/images/bankicons/navy-federal-credit-union-card.svg';
+import PNCCard from '../../../assets/images/bankicons/pnc-card.svg';
+import RegionsBankCard from '../../../assets/images/bankicons/regions-bank-card.svg';
+import SunTrustCard from '../../../assets/images/bankicons/suntrust-card.svg';
+import TdBankCard from '../../../assets/images/bankicons/td-bank-card.svg';
+import USBankCard from '../../../assets/images/bankicons/us-bank-card.svg';
+import USAACard from '../../../assets/images/bankicons/usaa-card.svg';
+import ExpensifyCardImage from '../../../assets/images/bankicons/expensify-card-dark.svg';
+
import variables from '../../styles/variables';
type BankIcon = {
@@ -31,76 +52,80 @@ 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;
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index 2357c8b3e66e..24b3e36b6805 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -28,6 +28,7 @@ import ROUTES from '../../../ROUTES';
import getBankIcon from '../../../components/Icon/BankIcons';
import assignedCardPropTypes from './assignedCardPropTypes';
import * as CardUtils from '../../../libs/CardUtils';
+import variables from '../../../styles/variables';
const propTypes = {
/** What to do when a menu item is pressed */
@@ -209,8 +210,12 @@ function PaymentMethodList({
const numberPhysicalExpensifyCards = _.filter(cardList, 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);
+ icon.iconHeight = variables.bankCardHeight;
+ icon.iconWidth = variables.bankCardWidth;
+ icon.iconStyles = [styles.assignedCardsIconContainer];
+
// 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 {
@@ -298,8 +303,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 7b61df8b936d..cc8ebde9bb88 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -3769,6 +3769,14 @@ const styles = (theme: ThemeDefault) =>
borderBottomColor: theme.border,
},
+ assignedCardsIconContainer: {
+ height: variables.bankCardHeight,
+ width: variables.bankCardWidth,
+ borderRadius: 4,
+ 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;