From 31bdf0631a0babec85b308cf45f713caea06d935 Mon Sep 17 00:00:00 2001 From: Artem Makushov Date: Tue, 12 Nov 2024 13:56:32 +0100 Subject: [PATCH 1/2] update images, update paymentList cardNumber view, update maskCardNumber --- .../companyCards/large/card-amex-large.svg | 32 ++++++++++ .../companyCards/large/card-bofa-large.svg | 31 ++++++++++ .../companyCards/large/card-brex-large.svg | 23 +++++++ .../large/card-capital_one-large.svg | 23 +++++++ .../companyCards/large/card-chase-large.svg | 26 ++++++++ .../companyCards/large/card-citi-large.svg | 31 ++++++++++ .../large/card-expensify-large.svg | 61 +++++++++++++++++++ .../companyCards/large/card-generic-large.svg | 26 ++++++++ .../large/card-mastercard-large.svg | 33 ++++++++++ .../companyCards/large/card-stripe-large.svg | 32 ++++++++++ .../companyCards/large/card-visa-large.svg | 48 +++++++++++++++ .../large/card-wellsfargo-large.svg | 23 +++++++ src/components/Icon/Illustrations.ts | 22 +++++++ src/libs/CardUtils.ts | 25 ++++---- .../settings/Wallet/PaymentMethodList.tsx | 2 +- 15 files changed, 425 insertions(+), 13 deletions(-) create mode 100644 assets/images/companyCards/large/card-amex-large.svg create mode 100644 assets/images/companyCards/large/card-bofa-large.svg create mode 100644 assets/images/companyCards/large/card-brex-large.svg create mode 100644 assets/images/companyCards/large/card-capital_one-large.svg create mode 100644 assets/images/companyCards/large/card-chase-large.svg create mode 100644 assets/images/companyCards/large/card-citi-large.svg create mode 100644 assets/images/companyCards/large/card-expensify-large.svg create mode 100644 assets/images/companyCards/large/card-generic-large.svg create mode 100644 assets/images/companyCards/large/card-mastercard-large.svg create mode 100644 assets/images/companyCards/large/card-stripe-large.svg create mode 100644 assets/images/companyCards/large/card-visa-large.svg create mode 100644 assets/images/companyCards/large/card-wellsfargo-large.svg diff --git a/assets/images/companyCards/large/card-amex-large.svg b/assets/images/companyCards/large/card-amex-large.svg new file mode 100644 index 000000000000..06f0f57e16d2 --- /dev/null +++ b/assets/images/companyCards/large/card-amex-large.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-bofa-large.svg b/assets/images/companyCards/large/card-bofa-large.svg new file mode 100644 index 000000000000..a842bc93d80b --- /dev/null +++ b/assets/images/companyCards/large/card-bofa-large.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-brex-large.svg b/assets/images/companyCards/large/card-brex-large.svg new file mode 100644 index 000000000000..e1a48c3dbe39 --- /dev/null +++ b/assets/images/companyCards/large/card-brex-large.svg @@ -0,0 +1,23 @@ + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-capital_one-large.svg b/assets/images/companyCards/large/card-capital_one-large.svg new file mode 100644 index 000000000000..b71e209a4c11 --- /dev/null +++ b/assets/images/companyCards/large/card-capital_one-large.svg @@ -0,0 +1,23 @@ + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-chase-large.svg b/assets/images/companyCards/large/card-chase-large.svg new file mode 100644 index 000000000000..2b0904ae225d --- /dev/null +++ b/assets/images/companyCards/large/card-chase-large.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-citi-large.svg b/assets/images/companyCards/large/card-citi-large.svg new file mode 100644 index 000000000000..14e3ecd36850 --- /dev/null +++ b/assets/images/companyCards/large/card-citi-large.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-expensify-large.svg b/assets/images/companyCards/large/card-expensify-large.svg new file mode 100644 index 000000000000..2cef4a59ca20 --- /dev/null +++ b/assets/images/companyCards/large/card-expensify-large.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-generic-large.svg b/assets/images/companyCards/large/card-generic-large.svg new file mode 100644 index 000000000000..542d34fada88 --- /dev/null +++ b/assets/images/companyCards/large/card-generic-large.svg @@ -0,0 +1,26 @@ + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-mastercard-large.svg b/assets/images/companyCards/large/card-mastercard-large.svg new file mode 100644 index 000000000000..efc27960ef73 --- /dev/null +++ b/assets/images/companyCards/large/card-mastercard-large.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-stripe-large.svg b/assets/images/companyCards/large/card-stripe-large.svg new file mode 100644 index 000000000000..cd084457f5b7 --- /dev/null +++ b/assets/images/companyCards/large/card-stripe-large.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-visa-large.svg b/assets/images/companyCards/large/card-visa-large.svg new file mode 100644 index 000000000000..0f000c5652df --- /dev/null +++ b/assets/images/companyCards/large/card-visa-large.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/companyCards/large/card-wellsfargo-large.svg b/assets/images/companyCards/large/card-wellsfargo-large.svg new file mode 100644 index 000000000000..ef9eb84a890d --- /dev/null +++ b/assets/images/companyCards/large/card-wellsfargo-large.svg @@ -0,0 +1,23 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 991aaea86513..6b625f312709 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -11,6 +11,17 @@ import VisaCompanyCardDetail from '@assets/images/companyCards/card-visa.svg'; import WellsFargoCompanyCardDetail from '@assets/images/companyCards/card-wellsfargo.svg'; import OtherCompanyCardDetail from '@assets/images/companyCards/card=-generic.svg'; import CompanyCardsEmptyState from '@assets/images/companyCards/emptystate__card-pos.svg'; +import AmexCardCompanyCardDetailLarge from '@assets/images/companyCards/large/card-amex-large.svg'; +import BankOfAmericaCompanyCardDetailLarge from '@assets/images/companyCards/large/card-bofa-large.svg'; +import BrexCompanyCardDetailLarge from '@assets/images/companyCards/large/card-brex-large.svg'; +import CapitalOneCompanyCardDetailLarge from '@assets/images/companyCards/large/card-capital_one-large.svg'; +import ChaseCompanyCardDetailLarge from '@assets/images/companyCards/large/card-chase-large.svg'; +import CitibankCompanyCardDetailLarge from '@assets/images/companyCards/large/card-citi-large.svg'; +import OtherCompanyCardDetailLarge from '@assets/images/companyCards/large/card-generic-large.svg'; +import MasterCardCompanyCardDetailLarge from '@assets/images/companyCards/large/card-mastercard-large.svg'; +import StripeCompanyCardDetailLarge from '@assets/images/companyCards/large/card-stripe-large.svg'; +import VisaCompanyCardDetailLarge from '@assets/images/companyCards/large/card-visa-large.svg'; +import WellsFargoCompanyCardDetailLarge from '@assets/images/companyCards/large/card-wellsfargo-large.svg'; import MasterCardCompanyCards from '@assets/images/companyCards/mastercard.svg'; import PendingBank from '@assets/images/companyCards/pending-bank.svg'; import CompanyCardsPendingState from '@assets/images/companyCards/pendingstate_laptop-with-hourglass-and-cards.svg'; @@ -266,4 +277,15 @@ export { StripeCompanyCardDetail, WellsFargoCompanyCardDetail, PerDiem, + AmexCardCompanyCardDetailLarge, + BankOfAmericaCompanyCardDetailLarge, + BrexCompanyCardDetailLarge, + CapitalOneCompanyCardDetailLarge, + ChaseCompanyCardDetailLarge, + CitibankCompanyCardDetailLarge, + OtherCompanyCardDetailLarge, + MasterCardCompanyCardDetailLarge, + StripeCompanyCardDetailLarge, + VisaCompanyCardDetailLarge, + WellsFargoCompanyCardDetailLarge, }; diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index e4baef57c001..a00258c4c265 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -141,8 +141,9 @@ function maskCardNumber(cardName: string): string { if (!cardName || cardName === '') { return ''; } + const hasSpace = /\s/.test(cardName); const maskedString = cardName.replace(/X/g, '•'); - return maskedString.replace(/(.{4})/g, '$1 ').trim(); + return hasSpace ? cardName : maskedString.replace(/(.{4})/g, '$1 ').trim(); } /** @@ -210,17 +211,17 @@ function getCompanyCardNumber(cardList: Record, lastFourPAN?: st function getCardFeedIcon(cardFeed: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK): IconAsset { const feedIcons = { - [CONST.COMPANY_CARD.FEED_BANK_NAME.VISA]: Illustrations.VisaCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: Illustrations.AmexCardCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: Illustrations.MasterCardCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX_DIRECT]: Illustrations.AmexCardCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.BANK_OF_AMERICA]: Illustrations.BankOfAmericaCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.CAPITAL_ONE]: Illustrations.CapitalOneCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.CHASE]: Illustrations.ChaseCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.CITIBANK]: Illustrations.CitibankCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.WELLS_FARGO]: Illustrations.WellsFargoCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.BREX]: Illustrations.BrexCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE]: Illustrations.StripeCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.VISA]: Illustrations.VisaCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: Illustrations.AmexCardCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: Illustrations.MasterCardCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX_DIRECT]: Illustrations.AmexCardCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.BANK_OF_AMERICA]: Illustrations.BankOfAmericaCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.CAPITAL_ONE]: Illustrations.CapitalOneCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.CHASE]: Illustrations.ChaseCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.CITIBANK]: Illustrations.CitibankCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.WELLS_FARGO]: Illustrations.WellsFargoCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.BREX]: Illustrations.BrexCompanyCardDetailLarge, + [CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE]: Illustrations.StripeCompanyCardDetailLarge, [CONST.EXPENSIFY_CARD.BANK]: ExpensifyCardImage, }; diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 676083f31004..f409241d7f3e 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -226,7 +226,7 @@ function PaymentMethodList({ if (!CardUtils.isExpensifyCard(card.cardID)) { assignedCardsGrouped.push({ key: card.cardID.toString(), - title: card.cardName, + title: CardUtils.maskCardNumber(card.cardName ?? ''), description: getDescriptionForPolicyDomainCard(card.domainName), shouldShowRightIcon: false, interactive: false, From ca3900e43b372a11b5c0c4ff573d96c7e133cb42 Mon Sep 17 00:00:00 2001 From: Artem Makushov Date: Tue, 12 Nov 2024 21:13:11 +0100 Subject: [PATCH 2/2] fix cardMask for cardName in details --- src/libs/CardUtils.ts | 4 ++-- .../workspace/companyCards/WorkspaceCompanyCardsList.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index a00258c4c265..2e31ffa808b9 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -201,12 +201,12 @@ function sortCardsByCardholderName(cardsList: OnyxEntry, per }); } -function getCompanyCardNumber(cardList: Record, lastFourPAN?: string): string { +function getCompanyCardNumber(cardList: Record, lastFourPAN?: string, cardName = ''): string { if (!lastFourPAN) { return ''; } - return Object.keys(cardList).find((card) => card.endsWith(lastFourPAN)) ?? maskCard(lastFourPAN); + return Object.keys(cardList).find((card) => card.endsWith(lastFourPAN)) ?? cardName; } function getCardFeedIcon(cardFeed: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK): IconAsset { diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx index 6e45b7993a98..4fc219d7eeb9 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx @@ -36,7 +36,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL const renderItem = useCallback( ({item, index}: ListRenderItemInfo) => { const cardID = Object.keys(cardsList ?? {}).find((id) => cardsList?.[id].cardID === item.cardID); - const cardName = CardUtils.getCompanyCardNumber(cardsList?.cardList ?? {}, item.lastFourPAN); + const cardName = CardUtils.getCompanyCardNumber(cardsList?.cardList ?? {}, item.lastFourPAN, item.cardName); return (