From ab5475473a8470a584e8bbc3900b2c90734f774b Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 15 Nov 2024 17:24:46 +0700 Subject: [PATCH 01/17] fix: display default card name as a fallback --- src/libs/CardUtils.ts | 8 ++++++++ .../workspace/companyCards/WorkspaceCompanyCardsList.tsx | 3 ++- .../workspace/companyCards/assignCard/AssigneeStep.tsx | 3 ++- .../workspace/expensifyCard/issueNew/CardNameStep.tsx | 3 ++- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index d56477c3f148..e255ae31a5b7 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -341,6 +341,13 @@ function getSelectedFeed(lastSelectedFeed: OnyxEntry, cardFeeds return lastSelectedFeed ?? defaultFeed; } +function getDefaultCardName(cardholder?: string) { + if (!cardholder) { + return ''; + } + return `${cardholder}'s card`; +} + export { isExpensifyCard, isCorporateCard, @@ -367,4 +374,5 @@ export { getCorrectStepForSelectedBank, getCustomOrFormattedFeedName, removeExpensifyCardFromCompanyCards, + getDefaultCardName, }; diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx index 9e9e2bf5208f..3558cd516b61 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx @@ -9,6 +9,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; +import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import Navigation from '@navigation/Navigation'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -61,7 +62,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL diff --git a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx index e8e8c81cba07..7ac80f8e1c15 100644 --- a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx @@ -13,6 +13,7 @@ import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as CardUtils from '@libs/CardUtils'; import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -61,7 +62,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { currentStep: isEditing ? CONST.COMPANY_CARD.STEP.CONFIRMATION : CONST.COMPANY_CARD.STEP.CARD, data: { email: selectedMember, - cardName: `${memberName}'s card`, + cardName: CardUtils.getDefaultCardName(memberName), }, isEditing: false, }); diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx index d21a819540fa..75ea83755704 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx @@ -9,6 +9,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as CardUtils from '@libs/CardUtils'; import * as ErrorUtils from '@libs/ErrorUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; @@ -27,7 +28,7 @@ function CardNameStep() { const data = issueNewCard?.data; const userName = PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName'); - const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? `${userName}'s Card` : ''; + const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? CardUtils.getDefaultCardName(userName) : ''; const validate = (values: FormOnyxValues): FormInputErrors => { const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); From 15e2819f7fd016958980f14a7e449105ed94f945 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 15 Nov 2024 17:43:35 +0700 Subject: [PATCH 02/17] fix: show default name on card details page --- .../workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx index 9fdfa7bec7b3..b49133a7c51e 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx @@ -124,7 +124,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag > Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_NAME.getRoute(policyID, cardID, bank))} From 5d3097a46df51b759b488b2847d954351fb7bc3b Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 19 Nov 2024 10:11:00 +0700 Subject: [PATCH 03/17] fix: revert the changes for bank cards icons, add another param to show large icons --- src/libs/CardUtils.ts | 24 +++++++++---------- .../WorkspaceCompanyCardDetailsPage.tsx | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index e255ae31a5b7..821a8c4b2b08 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -209,19 +209,19 @@ function getCompanyCardNumber(cardList: Record, lastFourPAN?: st return Object.keys(cardList).find((card) => card.endsWith(lastFourPAN)) ?? cardName; } -function getCardFeedIcon(cardFeed: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK): IconAsset { +function getCardFeedIcon(cardFeed: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK, large?: boolean): IconAsset { const feedIcons = { - [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.COMPANY_CARD.FEED_BANK_NAME.VISA]: large ? Illustrations.VisaCompanyCardDetailLarge : Illustrations.VisaCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: large ? Illustrations.AmexCardCompanyCardDetailLarge : Illustrations.AmexCardCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: large ? Illustrations.MasterCardCompanyCardDetailLarge : Illustrations.MasterCardCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX_DIRECT]: large ? Illustrations.AmexCardCompanyCardDetailLarge : Illustrations.AmexCardCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.BANK_OF_AMERICA]: large ? Illustrations.BankOfAmericaCompanyCardDetailLarge : Illustrations.BankOfAmericaCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.CAPITAL_ONE]: large ? Illustrations.CapitalOneCompanyCardDetailLarge : Illustrations.CapitalOneCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.CHASE]: large ? Illustrations.ChaseCompanyCardDetailLarge : Illustrations.ChaseCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.CITIBANK]: large ? Illustrations.CitibankCompanyCardDetailLarge : Illustrations.CitibankCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.WELLS_FARGO]: large ? Illustrations.WellsFargoCompanyCardDetailLarge : Illustrations.WellsFargoCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.BREX]: large ? Illustrations.BrexCompanyCardDetailLarge : Illustrations.BrexCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE]: large ? Illustrations.StripeCompanyCardDetailLarge : Illustrations.StripeCompanyCardDetail, [CONST.EXPENSIFY_CARD.BANK]: ExpensifyCardImage, }; diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx index b49133a7c51e..497be30ab1ff 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx @@ -95,7 +95,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag Date: Tue, 19 Nov 2024 12:13:57 +0700 Subject: [PATCH 04/17] fix: eslint --- src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx index 3558cd516b61..63e634306d05 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx @@ -9,7 +9,6 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; -import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import Navigation from '@navigation/Navigation'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; From 6c7ff9a662360c3dfe4b606af9ac06040d79aebd Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 20 Nov 2024 19:34:20 +0700 Subject: [PATCH 05/17] fix: fix images sizes --- src/libs/CardUtils.ts | 24 +++++++++---------- .../WorkspaceCompanyCardFeedSelectorPage.tsx | 2 +- ...WorkspaceCompanyCardsListHeaderButtons.tsx | 2 +- .../assignCard/CardSelectionStep.tsx | 4 ++-- .../members/WorkspaceMemberNewCardPage.tsx | 2 +- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index d34864d8b571..29cf729643cf 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -220,19 +220,19 @@ function getCompanyCardNumber(cardList: Record, lastFourPAN?: st return Object.keys(cardList).find((card) => card.endsWith(lastFourPAN)) ?? cardName; } -function getCardFeedIcon(cardFeed: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK, large?: boolean): IconAsset { +function getCardFeedIcon(cardFeed: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK): IconAsset { const feedIcons = { - [CONST.COMPANY_CARD.FEED_BANK_NAME.VISA]: large ? Illustrations.VisaCompanyCardDetailLarge : Illustrations.VisaCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: large ? Illustrations.AmexCardCompanyCardDetailLarge : Illustrations.AmexCardCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: large ? Illustrations.MasterCardCompanyCardDetailLarge : Illustrations.MasterCardCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX_DIRECT]: large ? Illustrations.AmexCardCompanyCardDetailLarge : Illustrations.AmexCardCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.BANK_OF_AMERICA]: large ? Illustrations.BankOfAmericaCompanyCardDetailLarge : Illustrations.BankOfAmericaCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.CAPITAL_ONE]: large ? Illustrations.CapitalOneCompanyCardDetailLarge : Illustrations.CapitalOneCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.CHASE]: large ? Illustrations.ChaseCompanyCardDetailLarge : Illustrations.ChaseCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.CITIBANK]: large ? Illustrations.CitibankCompanyCardDetailLarge : Illustrations.CitibankCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.WELLS_FARGO]: large ? Illustrations.WellsFargoCompanyCardDetailLarge : Illustrations.WellsFargoCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.BREX]: large ? Illustrations.BrexCompanyCardDetailLarge : Illustrations.BrexCompanyCardDetail, - [CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE]: large ? Illustrations.StripeCompanyCardDetailLarge : 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/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx index 50eb27df790b..0bb13dcec2a4 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx @@ -54,7 +54,7 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS leftElement: ( diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx index 031ac309e155..d87d68a793f8 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx @@ -57,7 +57,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx index 4b07e7a220b8..590f8cc21c63 100644 --- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx @@ -77,7 +77,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) { leftElement: ( @@ -110,7 +110,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) { leftElement: ( diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx index 79dcdd37ce1f..3c028fdae533 100644 --- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx @@ -88,7 +88,7 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew leftElement: ( From 02f7a72a76d3ce0bcfda2aded8d53512f337cf84 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 20 Nov 2024 19:45:58 +0700 Subject: [PATCH 06/17] fix: typecheck --- .../workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx index f72070c5d9b8..cc1649b51c89 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx @@ -95,7 +95,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag Date: Wed, 20 Nov 2024 20:38:30 +0700 Subject: [PATCH 07/17] fix: unify card icon size across the app --- .../companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx | 4 ++-- .../workspace/companyCards/assignCard/CardSelectionStep.tsx | 6 +++--- src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx | 4 ++-- src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx | 4 ++-- src/styles/index.ts | 1 - 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx index d87d68a793f8..0518318ae7d2 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx @@ -56,8 +56,8 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp > diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx index 590f8cc21c63..ac3305602a45 100644 --- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx @@ -77,8 +77,8 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) { leftElement: ( ), @@ -110,7 +110,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) { leftElement: ( diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index b0066187e6f1..2812768886a8 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -336,8 +336,8 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM displayInDefaultIconColor iconStyles={styles.cardIcon} contentFit="contain" - iconWidth={variables.iconSizeExtraLarge} - iconHeight={variables.iconSizeExtraLarge} + iconWidth={variables.cardIconWidth} + iconHeight={variables.cardIconHeight} onPress={() => navigateToDetails(memberCard)} shouldRemoveHoverBackground={isCardDeleted} disabled={isCardDeleted} diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx index 3c028fdae533..f14473269b9b 100644 --- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx @@ -88,8 +88,8 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew leftElement: ( ), diff --git a/src/styles/index.ts b/src/styles/index.ts index 154f8240b0c5..d85bcae9a3a7 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5191,7 +5191,6 @@ const styles = (theme: ThemeColors) => cardIcon: { overflow: 'hidden', borderRadius: variables.cardBorderRadius, - height: variables.cardIconHeight, alignSelf: 'center', }, From 2b2b512bcf39fe23fbda4316e3b806b02d510aa0 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 21 Nov 2024 09:37:20 +0700 Subject: [PATCH 08/17] fix: apply the same icon styles for all the cards --- src/components/Icon/BankIcons/index.native.ts | 6 +++--- src/components/Icon/BankIcons/index.ts | 6 +++--- src/pages/settings/Wallet/PaymentMethodList.tsx | 11 ++++++----- .../WorkspaceCompanyCardsListHeaderButtons.tsx | 1 + .../companyCards/assignCard/CardSelectionStep.tsx | 4 ++-- .../workspace/members/WorkspaceMemberDetailsPage.tsx | 1 - .../workspace/members/WorkspaceMemberNewCardPage.tsx | 2 +- src/styles/index.ts | 12 ++---------- src/styles/variables.ts | 2 -- 9 files changed, 18 insertions(+), 27 deletions(-) diff --git a/src/components/Icon/BankIcons/index.native.ts b/src/components/Icon/BankIcons/index.native.ts index 61721512ec04..af6cd0679fda 100644 --- a/src/components/Icon/BankIcons/index.native.ts +++ b/src/components/Icon/BankIcons/index.native.ts @@ -26,9 +26,9 @@ export default function getBankIcon({styles, bankName, isCard = false}: BankIcon bankIcon.iconSize = variables.iconSizeExtraLarge; bankIcon.iconStyles = [styles.bankIconContainer]; } else { - bankIcon.iconHeight = variables.bankCardHeight; - bankIcon.iconWidth = variables.bankCardWidth; - bankIcon.iconStyles = [styles.assignedCardsIconContainer]; + bankIcon.iconHeight = variables.cardIconHeight; + bankIcon.iconWidth = variables.cardIconWidth; + bankIcon.iconStyles = [styles.cardIcon]; } return bankIcon; diff --git a/src/components/Icon/BankIcons/index.ts b/src/components/Icon/BankIcons/index.ts index 378a7107aa03..cf233da702fa 100644 --- a/src/components/Icon/BankIcons/index.ts +++ b/src/components/Icon/BankIcons/index.ts @@ -34,9 +34,9 @@ export default function getBankIcon({styles, bankName, isCard = false}: BankIcon bankIcon.iconSize = variables.iconSizeExtraLarge; bankIcon.iconStyles = [styles.bankIconContainer]; } else { - bankIcon.iconHeight = variables.bankCardHeight; - bankIcon.iconWidth = variables.bankCardWidth; - bankIcon.iconStyles = [styles.assignedCardsIconContainer]; + bankIcon.iconHeight = variables.cardIconHeight; + bankIcon.iconWidth = variables.cardIconWidth; + bankIcon.iconStyles = [styles.cardIcon]; } return bankIcon; diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 961f1bffe007..24c7fa0db508 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -250,8 +250,9 @@ function PaymentMethodList({ ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, icon, - iconStyles: [styles.assignedCardsIconContainer], - iconSize: variables.iconSizeExtraLarge, + iconStyles: [styles.cardIcon], + iconWidth: variables.cardIconWidth, + iconHeight: variables.cardIconHeight, }); return; } @@ -290,9 +291,9 @@ function PaymentMethodList({ ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, icon, - iconStyles: [styles.assignedCardsIconContainer], - iconWidth: variables.bankCardWidth, - iconHeight: variables.bankCardHeight, + iconStyles: [styles.cardIcon], + iconWidth: variables.cardIconWidth, + iconHeight: variables.cardIconHeight, }); }); return assignedCardsGrouped; diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx index 0518318ae7d2..fa24c99ef98e 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx @@ -58,6 +58,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp src={CardUtils.getCardFeedIcon(selectedFeed)} height={variables.cardIconHeight} width={variables.cardIconWidth} + additionalStyles={styles.cardIcon} /> diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx index ac3305602a45..dce05345861b 100644 --- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx @@ -79,7 +79,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) { src={CardUtils.getCardFeedIcon(feed)} height={variables.cardIconHeight} width={variables.cardIconWidth} - additionalStyles={styles.mr3} + additionalStyles={[styles.mr3, styles.cardIcon]} /> ), })); @@ -112,7 +112,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) { src={CardUtils.getCardFeedIcon(feed)} height={variables.cardIconHeight} width={variables.iconSizeExtraLarge} - additionalStyles={styles.mr3} + additionalStyles={[styles.mr3, styles.cardIcon]} /> ), })); diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 2812768886a8..0efba8837ea5 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -335,7 +335,6 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM icon={CardUtils.getCardFeedIcon(memberCard.bank as CompanyCardFeed)} displayInDefaultIconColor iconStyles={styles.cardIcon} - contentFit="contain" iconWidth={variables.cardIconWidth} iconHeight={variables.cardIconHeight} onPress={() => navigateToDetails(memberCard)} diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx index f14473269b9b..f7151672175c 100644 --- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx @@ -90,7 +90,7 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew src={CardUtils.getCardFeedIcon(key)} height={variables.cardIconHeight} width={variables.cardIconWidth} - additionalStyles={styles.mr3} + additionalStyles={[styles.mr3, styles.cardIcon]} /> ), })); diff --git a/src/styles/index.ts b/src/styles/index.ts index d85bcae9a3a7..79aab3034eee 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4517,17 +4517,9 @@ const styles = (theme: ThemeColors) => position: 'absolute', }, - assignedCardsIconContainer: { - height: variables.bankCardHeight, - width: variables.bankCardWidth, - borderRadius: 4, - overflow: 'hidden', - alignSelf: 'center', - }, - bankIconContainer: { - height: variables.bankCardWidth, - width: variables.bankCardWidth, + height: variables.cardIconWidth, + width: variables.cardIconWidth, borderRadius: 8, overflow: 'hidden', alignSelf: 'center', diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 5a8927ede6d0..c334a294a5d4 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -204,8 +204,6 @@ export default { reportActionImagesDoubleImageHeight: 138, reportActionImagesMultipleImageHeight: 110, reportActionItemImagesMoreCornerTriangleWidth: 40, - bankCardWidth: 40, - bankCardHeight: 26, popoverzIndex: 10000, workspaceTypeIconWidth: 34, sectionMargin: 16, From 2b53f551741556c19be62406103cc64fa286f901 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 21 Nov 2024 09:46:39 +0700 Subject: [PATCH 09/17] fix: minor change --- .../companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx index 0bb13dcec2a4..b1e31d5bbfa2 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx @@ -54,9 +54,9 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS leftElement: ( ), })); From 45b416c256c07e8f46c7576199fc7eac62517c73 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 21 Nov 2024 19:16:37 +0700 Subject: [PATCH 10/17] fix: border for icons --- src/styles/variables.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/variables.ts b/src/styles/variables.ts index c334a294a5d4..a8fa70cc9459 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -232,8 +232,8 @@ export default { cardPreviewHeight: 148, cardPreviewWidth: 235, cardIconWidth: 40, - cardIconHeight: 25.29, - cardBorderRadius: 2.35, + cardIconHeight: 26, + cardBorderRadius: 4, cardNameWidth: 156, holdMenuIconSize: 64, From bd21576b0f888ac4f98bfc87a12d002a19b05e28 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 22 Nov 2024 10:11:26 +0700 Subject: [PATCH 11/17] fix: display proper card icon in search --- .../SearchFiltersCardPage.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx index 92d07c3caffc..df900cd5f229 100644 --- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx +++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx @@ -3,20 +3,21 @@ import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import getBankIcon from '@components/Icon/BankIcons'; -import type {BankName} from '@components/Icon/BankIconsUtils'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import CardListItem from '@components/SelectionList/CardListItem'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as CardUtils from '@libs/CardUtils'; import type {CategorySection} from '@libs/OptionsListUtils'; import type {OptionData} from '@libs/ReportUtils'; import Navigation from '@navigation/Navigation'; +import variables from '@styles/variables'; import * as SearchActions from '@userActions/Search'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type {CompanyCardFeed} from '@src/types/onyx'; function SearchFiltersCardPage() { const styles = useThemeStyles(); @@ -32,7 +33,7 @@ function SearchFiltersCardPage() { const cards = Object.values(cardList ?? {}) .sort((a, b) => a.bank.localeCompare(b.bank)) .map((card) => { - const icon = getBankIcon({bankName: card.bank as BankName, isCard: true, styles}); + const icon = CardUtils.getCardFeedIcon(card?.bank as CompanyCardFeed); const cardName = card?.nameValuePairs?.cardTitle ?? card?.cardName; const text = card.bank === CONST.EXPENSIFY_CARD.BANK ? card.bank : cardName; @@ -42,7 +43,12 @@ function SearchFiltersCardPage() { text, keyForList: card.cardID.toString(), isSelected: newCards.includes(card.cardID.toString()), - bankIcon: icon, + bankIcon: { + icon, + iconWidth: variables.cardIconWidth, + iconHeight: variables.cardIconHeight, + iconStyles: [styles.cardIcon], + }, }; }); newSections.push({ From cc42bbb5ed370e8a55962432e3dd3b946a55bbe1 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 22 Nov 2024 20:38:10 +0700 Subject: [PATCH 12/17] fix: truncate the text when the name is too long --- .../WorkspaceCompanyCardsListRow.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx index 2ce8c289c96e..5c85d2e40ae0 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx @@ -25,14 +25,14 @@ function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber}: WorkspaceC return ( - + - + - - {cardNumber} - + + + {cardNumber} + + ); } From fd6c86ce6eb59e6dfdb401492dca5209cbec3ffe Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 25 Nov 2024 10:10:38 +0700 Subject: [PATCH 13/17] fix: show only last 4 digits for mobile/narrow screen --- .../workspace/companyCards/WorkspaceCompanyCardsList.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx index b0720f5f95e0..b35bd76ac974 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx @@ -7,6 +7,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; import Navigation from '@navigation/Navigation'; @@ -28,6 +29,7 @@ type WorkspaceCompanyCardsListProps = { function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsListProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES); @@ -59,7 +61,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL > @@ -82,7 +84,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL numberOfLines={1} style={[styles.textLabelSupporting, styles.lh16]} > - {translate('workspace.companyCards.cardNumber')} + {translate(shouldUseNarrowLayout ? 'workspace.expensifyCard.lastFour' : 'workspace.companyCards.cardNumber')} ), From 897dad7775158fa79967c865718e021ab3b66111 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 25 Nov 2024 13:30:54 +0700 Subject: [PATCH 14/17] fix: failing tests --- .../Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx | 2 +- src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx index d83935010f26..9a6863f478f7 100644 --- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx +++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx @@ -8,8 +8,8 @@ import SelectionList from '@components/SelectionList'; import CardListItem from '@components/SelectionList/CardListItem'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {Section} from '@libs/OptionsListUtils'; import * as CardUtils from '@libs/CardUtils'; +import type {Section} from '@libs/OptionsListUtils'; import type {OptionData} from '@libs/ReportUtils'; import Navigation from '@navigation/Navigation'; import variables from '@styles/variables'; diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx index b35bd76ac974..8748ef6ec4fc 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx @@ -88,7 +88,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL ), - [styles, translate], + [styles, translate, shouldUseNarrowLayout], ); if (sortedCards.length === 0) { From b107f40da060e7718b60961437a45b368bb7c93d Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 25 Nov 2024 13:40:07 +0700 Subject: [PATCH 15/17] fix: failing tests --- src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx index 8748ef6ec4fc..8e41124a203b 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx @@ -68,7 +68,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL ); }, - [cardsList, customCardNames, personalDetails, policyID, styles], + [cardsList, customCardNames, personalDetails, policyID, styles, shouldUseNarrowLayout], ); const renderListHeader = useCallback( From 100cf3e3f964d0c7af71575c6cd52b34b079fdf1 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 25 Nov 2024 21:44:04 +0700 Subject: [PATCH 16/17] fix: show only 4 last PAN --- .../workspace/companyCards/WorkspaceCompanyCardsList.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx index 8e41124a203b..f5dd94ee3adb 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx @@ -61,14 +61,14 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL > ); }, - [cardsList, customCardNames, personalDetails, policyID, styles, shouldUseNarrowLayout], + [cardsList, customCardNames, personalDetails, policyID, styles], ); const renderListHeader = useCallback( @@ -84,11 +84,11 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL numberOfLines={1} style={[styles.textLabelSupporting, styles.lh16]} > - {translate(shouldUseNarrowLayout ? 'workspace.expensifyCard.lastFour' : 'workspace.companyCards.cardNumber')} + {translate('workspace.expensifyCard.lastFour')} ), - [styles, translate, shouldUseNarrowLayout], + [styles, translate], ); if (sortedCards.length === 0) { From 69ab559254becba6c8b2cb6352039482a28db856 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 25 Nov 2024 21:47:19 +0700 Subject: [PATCH 17/17] fix: lint --- src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx index f5dd94ee3adb..ebaa4c5aa63a 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx @@ -7,7 +7,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; import Navigation from '@navigation/Navigation'; @@ -29,7 +28,6 @@ type WorkspaceCompanyCardsListProps = { function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsListProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES);