diff --git a/assets/images/bankicons/generic-bank-account.svg b/assets/images/bankicons/generic-bank-account.svg new file mode 100644 index 000000000000..a76942b1d320 --- /dev/null +++ b/assets/images/bankicons/generic-bank-account.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js index b88e2d58b095..366db74acf62 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/src/components/AddPlaidBankAccount.js @@ -26,7 +26,6 @@ import * as ReimbursementAccountUtils from '../libs/ReimbursementAccountUtils'; import ReimbursementAccountForm from '../pages/ReimbursementAccount/ReimbursementAccountForm'; import getBankIcon from './Icon/BankIcons'; import Icon from './Icon'; -import variables from '../styles/variables'; const propTypes = { ...withLocalizePropTypes, @@ -151,6 +150,7 @@ class AddPlaidBankAccount extends React.Component { const options = _.map(accounts, (account, index) => ({ value: index, label: `${account.addressName} ${account.accountNumber}`, })); + const {bankIcon, bankIconSize} = getBankIcon(this.state.institution.name); return ( <> {(!this.props.plaidLinkToken || this.props.plaidBankAccounts.loading) @@ -185,9 +185,9 @@ class AddPlaidBankAccount extends React.Component { )} {this.state.institution.name} diff --git a/src/components/Icon/BankIcons.js b/src/components/Icon/BankIcons.js index aaae5f6eecc9..048de6e7550c 100644 --- a/src/components/Icon/BankIcons.js +++ b/src/components/Icon/BankIcons.js @@ -1,4 +1,4 @@ -import {Bank, CreditCard} from './Expensicons'; +import CreditCard from './Expensicons'; 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'; @@ -10,6 +10,7 @@ import CitizensBank from '../../../assets/images/bankicons/citizens-bank.svg'; import Discover from '../../../assets/images/bankicons/discover.svg'; import Fidelity from '../../../assets/images/bankicons/fidelity.svg'; import HuntingtonBank from '../../../assets/images/bankicons/huntington-bank.svg'; +import GenericBank from '../../../assets/images/bankicons/generic-bank-account.svg'; import NavyFederalCreditUnion from '../../../assets/images/bankicons/navy-federal-credit-union.svg'; import PNC from '../../../assets/images/bankicons/pnc.svg'; import RegionsBank from '../../../assets/images/bankicons/regions-bank.svg'; @@ -99,7 +100,7 @@ function getAssetIcon(bankName, isCard) { return USAA; } - return isCard ? CreditCard : Bank; + return isCard ? CreditCard : GenericBank; } /** @@ -111,15 +112,15 @@ function getAssetIcon(bankName, isCard) { export default function getBankIcon(bankName, isCard) { const bankIcon = { - icon: isCard ? CreditCard : Bank, + icon: isCard ? CreditCard : GenericBank, }; if (bankName) { bankIcon.icon = getAssetIcon(bankName.toLowerCase(), isCard); } - // For default icons the icon size should not be set. - if (![CreditCard, Bank].includes(bankIcon.icon)) { + // For default Credit Card icon the icon size should not be set. + if (![CreditCard].includes(bankIcon.icon)) { bankIcon.iconSize = variables.iconSizeExtraLarge; }