From 44c17a446cde53eac2225086daa6d56cd69fd3e6 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 18 Oct 2023 13:14:43 +0100 Subject: [PATCH] Add Card Assets, fix missing card status --- .../bankicons/american-express-card.svg | 25 ++ .../images/bankicons/bank-of-america-card.svg | 25 ++ assets/images/bankicons/bb-t-card.svg | 33 +++ assets/images/bankicons/capital-one-card.svg | 67 +++++ .../images/bankicons/charles-schwab-card.svg | 76 ++++++ assets/images/bankicons/chase-card.svg | 15 ++ assets/images/bankicons/citibank-card.svg | 22 ++ assets/images/bankicons/citizens-card.svg | 57 +++++ assets/images/bankicons/discover-card.svg | 53 ++++ .../images/bankicons/expensify-card-dark.svg | 78 ++++++ assets/images/bankicons/fidelity-card.svg | 21 ++ assets/images/bankicons/generic-bank-card.svg | 16 ++ .../images/bankicons/huntington-bank-card.svg | 26 ++ .../navy-federal-credit-union-card.svg | 105 ++++++++ assets/images/bankicons/pnc-card.svg | 18 ++ assets/images/bankicons/regions-bank-card.svg | 45 ++++ assets/images/bankicons/suntrust-card.svg | 237 ++++++++++++++++++ assets/images/bankicons/td-bank-card.svg | 17 ++ assets/images/bankicons/us-bank-card.svg | 32 +++ assets/images/bankicons/usaa-card.svg | 40 +++ src/CONST.ts | 1 + src/components/Icon/BankIcons.ts | 61 +++-- .../settings/Wallet/PaymentMethodList.js | 12 +- src/styles/styles.ts | 8 + src/styles/variables.ts | 2 + src/types/onyx/Card.ts | 4 +- 26 files changed, 1072 insertions(+), 24 deletions(-) create mode 100644 assets/images/bankicons/american-express-card.svg create mode 100644 assets/images/bankicons/bank-of-america-card.svg create mode 100644 assets/images/bankicons/bb-t-card.svg create mode 100644 assets/images/bankicons/capital-one-card.svg create mode 100644 assets/images/bankicons/charles-schwab-card.svg create mode 100644 assets/images/bankicons/chase-card.svg create mode 100644 assets/images/bankicons/citibank-card.svg create mode 100644 assets/images/bankicons/citizens-card.svg create mode 100644 assets/images/bankicons/discover-card.svg create mode 100644 assets/images/bankicons/expensify-card-dark.svg create mode 100644 assets/images/bankicons/fidelity-card.svg create mode 100644 assets/images/bankicons/generic-bank-card.svg create mode 100644 assets/images/bankicons/huntington-bank-card.svg create mode 100644 assets/images/bankicons/navy-federal-credit-union-card.svg create mode 100644 assets/images/bankicons/pnc-card.svg create mode 100644 assets/images/bankicons/regions-bank-card.svg create mode 100644 assets/images/bankicons/suntrust-card.svg create mode 100644 assets/images/bankicons/td-bank-card.svg create mode 100644 assets/images/bankicons/us-bank-card.svg create mode 100644 assets/images/bankicons/usaa-card.svg 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;