From b5f723d870a85931da88e0c2ecf32598fa14db10 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 13 Nov 2024 22:50:06 +0700 Subject: [PATCH 1/5] fix: change style expensify card list --- src/CONST.ts | 2 +- src/languages/en.ts | 2 +- .../expensifyCard/WorkspaceCardListHeader.tsx | 10 +++++- .../expensifyCard/WorkspaceCardListRow.tsx | 32 +++++++++++-------- 4 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 4e873163cc95..25757b114549 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2732,7 +2732,7 @@ const CONST = { MONTHLY: 'monthly', FIXED: 'fixed', }, - LIMIT_VALUE: 21474836, + LIMIT_VALUE: 10000000, STEP_NAMES: ['1', '2', '3', '4', '5', '6'], STEP: { ASSIGNEE: 'Assignee', diff --git a/src/languages/en.ts b/src/languages/en.ts index 7f05ea436837..d323a3bb4024 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3649,7 +3649,7 @@ const translations = { fixedAmount: 'Fixed amount', fixedAmountDescription: 'Spend up to a certain amount once', setLimit: 'Set a limit', - cardLimitError: 'Please enter an amount less than $21,474,836', + cardLimitError: 'Please enter an amount less than $10,000,000', giveItName: 'Give it a name', giveItNameInstruction: 'Make it unique enough to tell apart from other cards. Specific use cases are even better!', cardName: 'Card name', diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx index a0231f20641b..2625377b67be 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx @@ -64,7 +64,15 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) { )} - + PersonalDetailsUtils.getDisplayNameOrDefault(cardholder), [cardholder]); const cardType = isVirtual ? translate('workspace.expensifyCard.virtual') : translate('workspace.expensifyCard.physical'); return ( - - + + {cardType} )} - + {shouldUseNarrowLayout && ( - - - {cardType} - - + + {cardType} + )} From 17e9b7591fbe67f35968e4e11cdfeae1c7590d0b Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 14 Nov 2024 16:02:10 +0700 Subject: [PATCH 2/5] fix: add new style for workspace card list --- src/CONST.ts | 2 +- src/languages/en.ts | 2 +- src/libs/CurrencyUtils.ts | 4 ++-- src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx | 4 ++-- src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 332270442a4f..4b2b66ab5a2d 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2740,7 +2740,7 @@ const CONST = { MONTHLY: 'monthly', FIXED: 'fixed', }, - LIMIT_VALUE: 10000000, + LIMIT_VALUE: 21474836, STEP_NAMES: ['1', '2', '3', '4', '5', '6'], STEP: { ASSIGNEE: 'Assignee', diff --git a/src/languages/en.ts b/src/languages/en.ts index 9514d9b7aedb..d13cf61957ea 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3650,7 +3650,7 @@ const translations = { fixedAmount: 'Fixed amount', fixedAmountDescription: 'Spend up to a certain amount once', setLimit: 'Set a limit', - cardLimitError: 'Please enter an amount less than $10,000,000', + cardLimitError: 'Please enter an amount less than $21,474,836', giveItName: 'Give it a name', giveItNameInstruction: 'Make it unique enough to tell apart from other cards. Specific use cases are even better!', cardName: 'Card name', diff --git a/src/libs/CurrencyUtils.ts b/src/libs/CurrencyUtils.ts index f9ac681cb468..a8120f20c567 100644 --- a/src/libs/CurrencyUtils.ts +++ b/src/libs/CurrencyUtils.ts @@ -112,7 +112,7 @@ function convertToFrontendAmountAsString(amountAsInt: number | null | undefined, * @param amountInCents – should be an integer. Anything after a decimal place will be dropped. * @param currency - IOU currency */ -function convertToDisplayString(amountInCents = 0, currency: string = CONST.CURRENCY.USD): string { +function convertToDisplayString(amountInCents = 0, currency: string = CONST.CURRENCY.USD, decimals = getCurrencyDecimals(currency)): string { const convertedAmount = convertToFrontendAmountAsInteger(amountInCents, currency); /** * Fallback currency to USD if it empty string or undefined @@ -127,7 +127,7 @@ function convertToDisplayString(amountInCents = 0, currency: string = CONST.CURR // We are forcing the number of decimals because we override the default number of decimals in the backend for some currencies // See: https://github.com/Expensify/PHP-Libs/pull/834 - minimumFractionDigits: getCurrencyDecimals(currency), + minimumFractionDigits: decimals, // For currencies that have decimal places > 2, floor to 2 instead as we don't support more than 2 decimal places. maximumFractionDigits: 2, }); diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx index 2625377b67be..e9aac5685dc1 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx @@ -45,8 +45,8 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) { /> - - + + - {CurrencyUtils.convertToDisplayString(limit, currency)} + {CurrencyUtils.convertToDisplayString(limit, currency, 0)} {shouldUseNarrowLayout && ( Date: Fri, 15 Nov 2024 10:55:54 +0700 Subject: [PATCH 3/5] fix: style last four --- src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx index 4340a406db08..adb13517e5de 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx @@ -77,7 +77,7 @@ function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, i styles.flexRow, styles.gap2, shouldUseNarrowLayout ? styles.flex2 : styles.flex1, - styles.alignItemsCenter, + shouldUseNarrowLayout ? styles.alignItemsStart : styles.alignItemsCenter, shouldUseNarrowLayout ? styles.justifyContentCenter : styles.justifyContentStart, ]} > From 1378eca02b305974ca78d98e4cff79bd11045eea Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 15 Nov 2024 15:37:43 +0700 Subject: [PATCH 4/5] fix style limit column --- src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx index adb13517e5de..275f02e8b219 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx @@ -94,7 +94,7 @@ function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, i shouldUseNarrowLayout ? styles.flex3 : styles.flex1, !shouldUseNarrowLayout && styles.gap2, !shouldUseNarrowLayout ? styles.alignItemsCenter : styles.alignItemsEnd, - shouldUseNarrowLayout ? styles.justifyContentCenter : styles.justifyContentEnd, + shouldUseNarrowLayout ? styles.justifyContentStart : styles.justifyContentEnd, ]} > Date: Fri, 15 Nov 2024 16:07:09 +0700 Subject: [PATCH 5/5] fix: using short display function --- src/libs/CurrencyUtils.ts | 4 ++-- src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/CurrencyUtils.ts b/src/libs/CurrencyUtils.ts index a8120f20c567..f9ac681cb468 100644 --- a/src/libs/CurrencyUtils.ts +++ b/src/libs/CurrencyUtils.ts @@ -112,7 +112,7 @@ function convertToFrontendAmountAsString(amountAsInt: number | null | undefined, * @param amountInCents – should be an integer. Anything after a decimal place will be dropped. * @param currency - IOU currency */ -function convertToDisplayString(amountInCents = 0, currency: string = CONST.CURRENCY.USD, decimals = getCurrencyDecimals(currency)): string { +function convertToDisplayString(amountInCents = 0, currency: string = CONST.CURRENCY.USD): string { const convertedAmount = convertToFrontendAmountAsInteger(amountInCents, currency); /** * Fallback currency to USD if it empty string or undefined @@ -127,7 +127,7 @@ function convertToDisplayString(amountInCents = 0, currency: string = CONST.CURR // We are forcing the number of decimals because we override the default number of decimals in the backend for some currencies // See: https://github.com/Expensify/PHP-Libs/pull/834 - minimumFractionDigits: decimals, + minimumFractionDigits: getCurrencyDecimals(currency), // For currencies that have decimal places > 2, floor to 2 instead as we don't support more than 2 decimal places. maximumFractionDigits: 2, }); diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx index 275f02e8b219..3154913a3a3a 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx @@ -101,7 +101,7 @@ function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, i numberOfLines={1} style={[styles.textNormalThemeText]} > - {CurrencyUtils.convertToDisplayString(limit, currency, 0)} + {CurrencyUtils.convertToShortDisplayString(limit, currency)} {shouldUseNarrowLayout && (