diff --git a/assets/images/bankicons/american-express-card.svg b/assets/images/bankicons/american-express-card.svg
deleted file mode 100644
index 9e31f7c8a08e..000000000000
--- a/assets/images/bankicons/american-express-card.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/bank-of-america-card.svg
deleted file mode 100644
index 62dd510b0649..000000000000
--- a/assets/images/bankicons/bank-of-america-card.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/bb-t-card.svg
deleted file mode 100644
index ad3676458d21..000000000000
--- a/assets/images/bankicons/bb-t-card.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/capital-one-card.svg
deleted file mode 100644
index ee4f756e2600..000000000000
--- a/assets/images/bankicons/capital-one-card.svg
+++ /dev/null
@@ -1,67 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/charles-schwab-card.svg
deleted file mode 100644
index 39c894042cd3..000000000000
--- a/assets/images/bankicons/charles-schwab-card.svg
+++ /dev/null
@@ -1,76 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/chase-card.svg
deleted file mode 100644
index 8e8ddb6d5378..000000000000
--- a/assets/images/bankicons/chase-card.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/citibank-card.svg
deleted file mode 100644
index b9509cc7e37e..000000000000
--- a/assets/images/bankicons/citibank-card.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
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/citizens-card.svg b/assets/images/bankicons/citizens-card.svg
deleted file mode 100644
index 3b4bf9ea1af3..000000000000
--- a/assets/images/bankicons/citizens-card.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
diff --git a/assets/images/bankicons/discover-card.svg b/assets/images/bankicons/discover-card.svg
deleted file mode 100644
index 668e5634339d..000000000000
--- a/assets/images/bankicons/discover-card.svg
+++ /dev/null
@@ -1,53 +0,0 @@
-
-
-
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 @@
-
\ 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-card-dark.svg b/assets/images/bankicons/expensify-card-dark.svg
deleted file mode 100644
index 4a65afeeda9d..000000000000
--- a/assets/images/bankicons/expensify-card-dark.svg
+++ /dev/null
@@ -1,78 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/fidelity-card.svg
deleted file mode 100644
index c87f9c4aa56c..000000000000
--- a/assets/images/bankicons/fidelity-card.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
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/generic-bank-card.svg b/assets/images/bankicons/generic-bank-card.svg
deleted file mode 100644
index e29006ba1077..000000000000
--- a/assets/images/bankicons/generic-bank-card.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
diff --git a/assets/images/bankicons/huntington-bank-card.svg b/assets/images/bankicons/huntington-bank-card.svg
deleted file mode 100644
index c108c7039898..000000000000
--- a/assets/images/bankicons/huntington-bank-card.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/navy-federal-credit-union-card.svg
deleted file mode 100644
index 5abc1103cce1..000000000000
--- a/assets/images/bankicons/navy-federal-credit-union-card.svg
+++ /dev/null
@@ -1,105 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/pnc-card.svg
deleted file mode 100644
index ae4d4aac8e41..000000000000
--- a/assets/images/bankicons/pnc-card.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/regions-bank-card.svg
deleted file mode 100644
index 1837ad2be41b..000000000000
--- a/assets/images/bankicons/regions-bank-card.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/suntrust-card.svg
deleted file mode 100644
index 32ea5096f876..000000000000
--- a/assets/images/bankicons/suntrust-card.svg
+++ /dev/null
@@ -1,237 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/td-bank-card.svg
deleted file mode 100644
index 19988e35bbbe..000000000000
--- a/assets/images/bankicons/td-bank-card.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/us-bank-card.svg
deleted file mode 100644
index 321b4cb755b0..000000000000
--- a/assets/images/bankicons/us-bank-card.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
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-card.svg b/assets/images/bankicons/usaa-card.svg
deleted file mode 100644
index bb634f64e658..000000000000
--- a/assets/images/bankicons/usaa-card.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
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/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts
index 9a0de0c1e628..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';
@@ -20,31 +21,35 @@ 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 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;
};
/**
@@ -128,7 +133,7 @@ function getAssetIcon(bankName: string, isCard: boolean): React.FC {
return isCard ? USAACard : USAA;
}
- return isCard ? Expensicons.CreditCard : GenericBank;
+ return isCard ? GenericBankCard : GenericBank;
}
/**
@@ -137,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) {
@@ -145,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/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 b6d6cd564a8b..2377868d724d 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -207,14 +207,11 @@ function PaymentMethodList({
.sortBy((card) => !CardUtils.isExpensifyCard(card.cardID))
.value();
- const numberPhysicalExpensifyCards = _.filter(cardList, (card) => CardUtils.isExpensifyCard(card.cardID)).length;
+ const numberPhysicalExpensifyCards = _.filter(assignedCards, (card) => CardUtils.isExpensifyCard(card.cardID)).length;
return _.map(assignedCards, (card) => {
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');
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 1723469fe937..f6d0b9210c0d 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -3778,6 +3778,14 @@ const styles = (theme: ThemeDefault) =>
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/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;