From 1f58e3e35e81a7272f690a57c4e694b9647b764e Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 9 Sep 2024 17:37:56 +0700 Subject: [PATCH 1/6] fix: policy id shows as domain card description --- src/CONST.ts | 10 ++++++++-- src/libs/CardUtils.ts | 12 ++++++++++++ src/pages/settings/Wallet/PaymentMethodList.tsx | 2 +- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index d0695b1e285f..261ad734b726 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -34,6 +34,8 @@ const CURRENT_YEAR = new Date().getFullYear(); const PULL_REQUEST_NUMBER = Config?.PULL_REQUEST_NUMBER ?? ''; const MAX_DATE = dateAdd(new Date(), {years: 1}); const MIN_DATE = dateSubtract(new Date(), {years: 20}); +const EXPENSIFY_POLICY_DOMAIN = 'expensify-policy'; +const EXPENSIFY_POLICY_DOMAIN_EXTENSION = '.exfy'; const keyModifierControl = KeyCommand?.constants?.keyModifierControl ?? 'keyModifierControl'; const keyModifierCommand = KeyCommand?.constants?.keyModifierCommand ?? 'keyModifierCommand'; @@ -724,8 +726,8 @@ const CONST = { INBOX: 'inbox', }, - EXPENSIFY_POLICY_DOMAIN: 'expensify-policy', - EXPENSIFY_POLICY_DOMAIN_EXTENSION: '.exfy', + EXPENSIFY_POLICY_DOMAIN, + EXPENSIFY_POLICY_DOMAIN_EXTENSION, SIGN_IN_FORM_WIDTH: 300, @@ -2553,6 +2555,10 @@ const CONST = { SHORT_MENTION: new RegExp(`@[\\w\\-\\+\\'#@]+(?:\\.[\\w\\-\\'\\+]+)*(?![^\`]*\`)`, 'gim'), REPORT_ID_FROM_PATH: /\/r\/(\d+)/, + + get EXPENSIFY_POLICY_DOMAIN_NAME() { + return new RegExp(`${EXPENSIFY_POLICY_DOMAIN}([a-zA-Z0-9]+)\\${EXPENSIFY_POLICY_DOMAIN_EXTENSION}`); + }, }, PRONOUNS: { diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 2398bc1e729a..17ba3d518108 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -13,6 +13,7 @@ import type IconAsset from '@src/types/utils/IconAsset'; import localeCompare from './LocaleCompare'; import * as Localize from './Localize'; import * as PersonalDetailsUtils from './PersonalDetailsUtils'; +import * as PolicyUtils from './PolicyUtils'; let allCards: OnyxValues[typeof ONYXKEYS.CARD_LIST] = {}; Onyx.connect({ @@ -194,6 +195,16 @@ function getCardFeedIcon(cardFeed: string): IconAsset { return Illustrations.AmexCompanyCards; } +function getDescriptionForPolicyDomainCard(domainName: string) { + const match = domainName.match(CONST.REGEX.EXPENSIFY_POLICY_DOMAIN_NAME); + if (match) { + const policyID = match[1]; + const policy = PolicyUtils.getPolicy(policyID); + return policy?.name ?? domainName; + } + return domainName; +} + export { isExpensifyCard, isCorporateCard, @@ -210,4 +221,5 @@ export { getEligibleBankAccountsForCard, sortCardsByCardholderName, getCardFeedIcon, + getDescriptionForPolicyDomainCard, }; diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 0d127e3346ae..a0d7a9fea6ee 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -214,7 +214,7 @@ function PaymentMethodList({ assignedCardsGrouped.push({ key: card.cardID.toString(), title: card.bank, - description: card.domainName, + description: CardUtils.getDescriptionForPolicyDomainCard(card.domainName), shouldShowRightIcon: false, interactive: false, canDismissError: false, From fb65ba5193536066468cbc45057e3098b5f594bb Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 9 Sep 2024 22:39:43 +0700 Subject: [PATCH 2/6] just apply getDescriptionForPolicyDomainCard to expensify card --- src/pages/settings/Wallet/PaymentMethodList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index a0d7a9fea6ee..89ebc3158a90 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -214,7 +214,7 @@ function PaymentMethodList({ assignedCardsGrouped.push({ key: card.cardID.toString(), title: card.bank, - description: CardUtils.getDescriptionForPolicyDomainCard(card.domainName), + description: card.domainName, shouldShowRightIcon: false, interactive: false, canDismissError: false, @@ -245,7 +245,7 @@ function PaymentMethodList({ key: card.cardID.toString(), // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing title: card?.nameValuePairs?.cardTitle || card.bank, - description: card.domainName, + description: CardUtils.getDescriptionForPolicyDomainCard(card.domainName), onPress: () => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(String(card.cardID))), isGroupedCardDomain: !isAdminIssuedVirtualCard, shouldShowRightIcon: true, From 8368f49eb2e6396886582978ff841dc7611cdea6 Mon Sep 17 00:00:00 2001 From: dominictb Date: Tue, 10 Sep 2024 16:33:55 +0700 Subject: [PATCH 3/6] move out of utils functions --- src/libs/CardUtils.ts | 12 ------------ src/pages/settings/Wallet/PaymentMethodList.tsx | 13 ++++++++++++- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 17ba3d518108..2398bc1e729a 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -13,7 +13,6 @@ import type IconAsset from '@src/types/utils/IconAsset'; import localeCompare from './LocaleCompare'; import * as Localize from './Localize'; import * as PersonalDetailsUtils from './PersonalDetailsUtils'; -import * as PolicyUtils from './PolicyUtils'; let allCards: OnyxValues[typeof ONYXKEYS.CARD_LIST] = {}; Onyx.connect({ @@ -195,16 +194,6 @@ function getCardFeedIcon(cardFeed: string): IconAsset { return Illustrations.AmexCompanyCards; } -function getDescriptionForPolicyDomainCard(domainName: string) { - const match = domainName.match(CONST.REGEX.EXPENSIFY_POLICY_DOMAIN_NAME); - if (match) { - const policyID = match[1]; - const policy = PolicyUtils.getPolicy(policyID); - return policy?.name ?? domainName; - } - return domainName; -} - export { isExpensifyCard, isCorporateCard, @@ -221,5 +210,4 @@ export { getEligibleBankAccountsForCard, sortCardsByCardholderName, getCardFeedIcon, - getDescriptionForPolicyDomainCard, }; diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index a0d7a9fea6ee..c7c0c657b977 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -24,6 +24,7 @@ import * as CardUtils from '@libs/CardUtils'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import * as PaymentUtils from '@libs/PaymentUtils'; +import * as PolicyUtils from '@libs/PolicyUtils'; import variables from '@styles/variables'; import * as PaymentMethods from '@userActions/PaymentMethods'; import CONST from '@src/CONST'; @@ -199,6 +200,16 @@ function PaymentMethodList({ const {isOffline} = useNetwork(); const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); + const getDescriptionForPolicyDomainCard = (domainName: string): string => { + const match = domainName.match(CONST.REGEX.EXPENSIFY_POLICY_DOMAIN_NAME); + if (match) { + const policyID = match[1]; + const policy = PolicyUtils.getPolicy(policyID); + return policy?.name ?? domainName; + } + return domainName; + }; + const filteredPaymentMethods = useMemo(() => { if (shouldShowAssignedCards) { const assignedCards = Object.values(cardList ?? {}) @@ -214,7 +225,7 @@ function PaymentMethodList({ assignedCardsGrouped.push({ key: card.cardID.toString(), title: card.bank, - description: CardUtils.getDescriptionForPolicyDomainCard(card.domainName), + description: getDescriptionForPolicyDomainCard(card.domainName), shouldShowRightIcon: false, interactive: false, canDismissError: false, From 657d3d0d76c047b40fff0459ed5694753e17ecf2 Mon Sep 17 00:00:00 2001 From: dominictb Date: Tue, 10 Sep 2024 16:35:27 +0700 Subject: [PATCH 4/6] resolve conflicts --- src/pages/settings/Wallet/PaymentMethodList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 499e2ce81f65..7992b43966a8 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -256,7 +256,7 @@ function PaymentMethodList({ key: card.cardID.toString(), // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing title: card?.nameValuePairs?.cardTitle || card.bank, - description: CardUtils.getDescriptionForPolicyDomainCard(card.domainName), + description: getDescriptionForPolicyDomainCard(card.domainName), onPress: () => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(String(card.cardID))), isGroupedCardDomain: !isAdminIssuedVirtualCard, shouldShowRightIcon: true, From 922276698206d0e83f8a919ad187d98f071bce09 Mon Sep 17 00:00:00 2001 From: dominictb Date: Thu, 12 Sep 2024 14:31:24 +0700 Subject: [PATCH 5/6] handle lowercase ID --- src/pages/settings/Wallet/PaymentMethodList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 7992b43966a8..9549a8e69e35 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -203,7 +203,7 @@ function PaymentMethodList({ const getDescriptionForPolicyDomainCard = (domainName: string): string => { const match = domainName.match(CONST.REGEX.EXPENSIFY_POLICY_DOMAIN_NAME); if (match) { - const policyID = match[1]; + const policyID = match[1].toUpperCase(); const policy = PolicyUtils.getPolicy(policyID); return policy?.name ?? domainName; } From e52e9a9b03a2ae26cf58716ed4a4a70af918f689 Mon Sep 17 00:00:00 2001 From: dominictb Date: Thu, 12 Sep 2024 15:19:58 +0700 Subject: [PATCH 6/6] add comments and change variable name --- src/pages/settings/Wallet/PaymentMethodList.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 9549a8e69e35..5f77ac33becf 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -201,10 +201,10 @@ function PaymentMethodList({ const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated}); const getDescriptionForPolicyDomainCard = (domainName: string): string => { - const match = domainName.match(CONST.REGEX.EXPENSIFY_POLICY_DOMAIN_NAME); - if (match) { - const policyID = match[1].toUpperCase(); - const policy = PolicyUtils.getPolicy(policyID); + // A domain name containing a policyID indicates that this is a workspace feed + const policyID = domainName.match(CONST.REGEX.EXPENSIFY_POLICY_DOMAIN_NAME)?.[1]; + if (policyID) { + const policy = PolicyUtils.getPolicy(policyID.toUpperCase()); return policy?.name ?? domainName; } return domainName;