From 659b343c44fdffa300e61f035a0a35d116a6088a Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 11 Apr 2024 09:32:54 +0200 Subject: [PATCH 1/4] display tax rate value in the list --- src/CONST.ts | 3 +++ .../workspace/taxes/WorkspaceTaxesPage.tsx | 21 +++++++++++-------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 39c3d9d3109b..9be618e29e05 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -4313,6 +4313,9 @@ const CONST = { SESSION_STORAGE_KEYS: { INITIAL_URL: 'INITIAL_URL', }, + + DOT_SEPARATOR: '•', + DEFAULT_TAX: { defaultExternalID: 'id_TAX_EXEMPT', defaultValue: '0%', diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx index 7628bf25a1b8..72680760f08f 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx @@ -35,6 +35,7 @@ import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPol import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; +import type {TaxRate} from '@src/types/onyx'; type WorkspaceTaxesPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps; @@ -67,17 +68,19 @@ function WorkspaceTaxesPage({ ); const textForDefault = useCallback( - (taxID: string): string => { + (taxID: string, taxRate: TaxRate): string => { + let suffix; if (taxID === defaultExternalID && taxID === foreignTaxDefault) { - return translate('common.default'); + suffix = translate('common.default'); + } else if (taxID === defaultExternalID) { + suffix = translate('workspace.taxes.workspaceDefault'); + } else if (taxID === foreignTaxDefault) { + suffix = translate('workspace.taxes.foreignDefault'); } - if (taxID === defaultExternalID) { - return translate('workspace.taxes.workspaceDefault'); + if (suffix) { + return `${taxRate.value} ${CONST.DOT_SEPARATOR} ${suffix}`; } - if (taxID === foreignTaxDefault) { - return translate('workspace.taxes.foreignDefault'); - } - return ''; + return `${taxRate.value}`; }, [defaultExternalID, foreignTaxDefault, translate], ); @@ -89,7 +92,7 @@ function WorkspaceTaxesPage({ return Object.entries(policy.taxRates?.taxes ?? {}) .map(([key, value]) => ({ text: value.name, - alternateText: textForDefault(key), + alternateText: textForDefault(key, value), keyForList: key, isSelected: !!selectedTaxesIDs.includes(key), isDisabledCheckbox: !PolicyUtils.canEditTaxRate(policy, key), From db69892a18601e97ed505d3774203249e57a8d7e Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 11 Apr 2024 14:04:14 +0200 Subject: [PATCH 2/4] use dot_separator const --- .../MoneyRequestConfirmationList.tsx | 2 +- .../MoneyRequestPreviewContent.tsx | 22 +++++++++---------- .../ReportActionItem/MoneyRequestView.tsx | 16 +++++++------- src/libs/TransactionUtils.ts | 2 +- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 64c424e944f6..99d41a38fe76 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -275,7 +275,7 @@ function MoneyRequestConfirmationList({ const formattedTaxAmount = CurrencyUtils.convertToDisplayString(transaction?.taxAmount, iouCurrencyCode); const defaultTaxKey = taxRates?.defaultExternalID; - const defaultTaxName = (defaultTaxKey && `${taxRates.taxes[defaultTaxKey].name} (${taxRates.taxes[defaultTaxKey].value}) • ${translate('common.default')}`) ?? ''; + const defaultTaxName = (defaultTaxKey && `${taxRates.taxes[defaultTaxKey].name} (${taxRates.taxes[defaultTaxKey].value}) ${CONST.DOT_SEPARATOR} ${translate('common.default')}`) ?? ''; // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing is not working when a left hand side value is '' const taxRateTitle = transaction?.taxRate?.text || defaultTaxName; diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx index 2c6f14cec4c2..97287e64b829 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx @@ -146,13 +146,13 @@ function MoneyRequestPreviewContent({ if (isCardTransaction) { message = translate('iou.card'); if (TransactionUtils.isPending(transaction)) { - message += ` • ${translate('iou.pending')}`; + message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.pending')}`; return message; } } if (isSettled && !iouReport?.isCancelledIOU && !isPartialHold) { - message += ` • ${getSettledMessage()}`; + message += ` ${CONST.DOT_SEPARATOR} ${getSettledMessage()}`; return message; } @@ -164,28 +164,28 @@ function MoneyRequestPreviewContent({ const isTooLong = violationsCount > 1 || violationMessage.length > 15; const hasViolationsAndFieldErrors = violationsCount > 0 && hasFieldErrors; - return `${message} • ${isTooLong || hasViolationsAndFieldErrors ? translate('violations.reviewRequired') : violationMessage}`; + return `${message} ${CONST.DOT_SEPARATOR} ${isTooLong || hasViolationsAndFieldErrors ? translate('violations.reviewRequired') : violationMessage}`; } const isMerchantMissing = TransactionUtils.isMerchantMissing(transaction); const isAmountMissing = TransactionUtils.isAmountMissing(transaction); if (isAmountMissing && isMerchantMissing) { - message += ` • ${translate('violations.reviewRequired')}`; + message += ` ${CONST.DOT_SEPARATOR} ${translate('violations.reviewRequired')}`; } else if (isAmountMissing) { - message += ` • ${translate('iou.missingAmount')}`; + message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.missingAmount')}`; } else if (isMerchantMissing) { - message += ` • ${translate('iou.missingMerchant')}`; + message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.missingMerchant')}`; } else if (!(isSettled && !isSettlementOrApprovalPartial) && isOnHold) { - message += ` • ${translate('iou.hold')}`; + message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.hold')}`; } } else if (ReportUtils.isPaidGroupPolicyExpenseReport(iouReport) && ReportUtils.isReportApproved(iouReport) && !ReportUtils.isSettled(iouReport?.reportID) && !isPartialHold) { - message += ` • ${translate('iou.approved')}`; + message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.approved')}`; } else if (iouReport?.isWaitingOnBankAccount) { - message += ` • ${translate('iou.pending')}`; + message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.pending')}`; } else if (iouReport?.isCancelledIOU) { - message += ` • ${translate('iou.canceled')}`; + message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.canceled')}`; } else if (!(isSettled && !isSettlementOrApprovalPartial) && isOnHold) { - message += ` • ${translate('iou.hold')}`; + message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.hold')}`; } return message; }; diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index dd34d0ca2540..aa7d64fbb95b 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -185,26 +185,26 @@ function MoneyRequestView({ if (isCardTransaction) { if (formattedOriginalAmount) { - amountDescription += ` • ${translate('iou.original')} ${formattedOriginalAmount}`; + amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.original')} ${formattedOriginalAmount}`; } if (TransactionUtils.isPending(transaction)) { - amountDescription += ` • ${translate('iou.pending')}`; + amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.pending')}`; } if (isCancelled) { - amountDescription += ` • ${translate('iou.canceled')}`; + amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.canceled')}`; } } else { if (!isDistanceRequest) { - amountDescription += ` • ${translate('iou.cash')}`; + amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.cash')}`; } if (isApproved) { - amountDescription += ` • ${translate('iou.approved')}`; + amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.approved')}`; } else if (isCancelled) { - amountDescription += ` • ${translate('iou.canceled')}`; + amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.canceled')}`; } else if (isSettled) { - amountDescription += ` • ${translate('iou.settledExpensify')}`; + amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.settledExpensify')}`; } else if (report.isWaitingOnBankAccount) { - amountDescription += ` • ${translate('iou.pending')}`; + amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.pending')}`; } } diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts index 9c398998588e..9ecc628d279b 100644 --- a/src/libs/TransactionUtils.ts +++ b/src/libs/TransactionUtils.ts @@ -635,7 +635,7 @@ function getEnabledTaxRateCount(options: TaxRates) { */ function getDefaultTaxName(taxRates: TaxRatesWithDefault, transaction?: Transaction) { const defaultTaxKey = taxRates.defaultExternalID; - const defaultTaxName = (defaultTaxKey && `${taxRates.taxes[defaultTaxKey]?.name} (${taxRates.taxes[defaultTaxKey]?.value}) • ${Localize.translateLocal('common.default')}`) || ''; + const defaultTaxName = (defaultTaxKey && `${taxRates.taxes[defaultTaxKey]?.name} (${taxRates.taxes[defaultTaxKey]?.value}) ${CONST.DOT_SEPARATOR} ${Localize.translateLocal('common.default')}`) || ''; return transaction?.taxRate?.text ?? defaultTaxName; } From b3984b39a37ec2c1da74a60b535baf84b2d18e97 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 11 Apr 2024 14:05:26 +0200 Subject: [PATCH 3/4] DOT_SEPARATOR --- src/libs/OptionsListUtils.ts | 2 +- src/libs/ReportUtils.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 98828205d3fe..998087aea6a1 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1320,7 +1320,7 @@ function getReportFieldOptionsSection(options: string[], recentlyUsedOptions: st */ function transformedTaxRates(taxRates: TaxRatesWithDefault | undefined): Record { const defaultTaxKey = taxRates?.defaultExternalID; - const getModifiedName = (data: TaxRate, code: string) => `${data.name} (${data.value})${defaultTaxKey === code ? ` • ${Localize.translateLocal('common.default')}` : ''}`; + const getModifiedName = (data: TaxRate, code: string) => `${data.name} (${data.value})${defaultTaxKey === code ? ` ${CONST.DOT_SEPARATOR} ${Localize.translateLocal('common.default')}` : ''}`; const taxes = Object.fromEntries(Object.entries(taxRates?.taxes ?? {}).map(([code, data]) => [code, {...data, code, modifiedName: getModifiedName(data, code), name: data.name}])); return taxes; } diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 85f5c414dbe4..aea4af347826 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2297,7 +2297,7 @@ function getMoneyRequestReportName(report: OnyxEntry, policy: OnyxEntry< } if (report?.isWaitingOnBankAccount) { - return `${payerPaidAmountMessage} • ${Localize.translateLocal('iou.pending')}`; + return `${payerPaidAmountMessage} ${CONST.DOT_SEPARATOR} ${Localize.translateLocal('iou.pending')}`; } if (!isSettled(report?.reportID) && hasNonReimbursableTransactions(report?.reportID)) { From 4a4bc88bbfe6ee5ca7364225a31a36cdec04c369 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 11 Apr 2024 16:32:52 +0200 Subject: [PATCH 4/4] prettier --- src/libs/OptionsListUtils.ts | 3 ++- src/libs/TransactionUtils.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 998087aea6a1..87a6443a2f1d 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1320,7 +1320,8 @@ function getReportFieldOptionsSection(options: string[], recentlyUsedOptions: st */ function transformedTaxRates(taxRates: TaxRatesWithDefault | undefined): Record { const defaultTaxKey = taxRates?.defaultExternalID; - const getModifiedName = (data: TaxRate, code: string) => `${data.name} (${data.value})${defaultTaxKey === code ? ` ${CONST.DOT_SEPARATOR} ${Localize.translateLocal('common.default')}` : ''}`; + const getModifiedName = (data: TaxRate, code: string) => + `${data.name} (${data.value})${defaultTaxKey === code ? ` ${CONST.DOT_SEPARATOR} ${Localize.translateLocal('common.default')}` : ''}`; const taxes = Object.fromEntries(Object.entries(taxRates?.taxes ?? {}).map(([code, data]) => [code, {...data, code, modifiedName: getModifiedName(data, code), name: data.name}])); return taxes; } diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts index 9ecc628d279b..95e2ec8a11b5 100644 --- a/src/libs/TransactionUtils.ts +++ b/src/libs/TransactionUtils.ts @@ -635,7 +635,8 @@ function getEnabledTaxRateCount(options: TaxRates) { */ function getDefaultTaxName(taxRates: TaxRatesWithDefault, transaction?: Transaction) { const defaultTaxKey = taxRates.defaultExternalID; - const defaultTaxName = (defaultTaxKey && `${taxRates.taxes[defaultTaxKey]?.name} (${taxRates.taxes[defaultTaxKey]?.value}) ${CONST.DOT_SEPARATOR} ${Localize.translateLocal('common.default')}`) || ''; + const defaultTaxName = + (defaultTaxKey && `${taxRates.taxes[defaultTaxKey]?.name} (${taxRates.taxes[defaultTaxKey]?.value}) ${CONST.DOT_SEPARATOR} ${Localize.translateLocal('common.default')}`) || ''; return transaction?.taxRate?.text ?? defaultTaxName; }