Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Taxes] Display tax rate value in the list #40083

Merged
merged 5 commits into from
Apr 12, 2024
Merged

[Taxes] Display tax rate value in the list #40083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
659b343
display tax rate value in the list
kosmydel Apr 11, 2024
db69892
use dot_separator const
kosmydel Apr 11, 2024
b3984b3
DOT_SEPARATOR
kosmydel Apr 11, 2024
e59cf0f
Merge branch 'Expensify:main' into @kosmydel/polish-taxes
kosmydel Apr 11, 2024
4a4bc88
prettier
kosmydel Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/CONST.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4313,6 +4313,9 @@ const CONST = {
SESSION_STORAGE_KEYS: {
INITIAL_URL: 'INITIAL_URL',
},

DOT_SEPARATOR: '•',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use this in other places too for preview cards, etc. Just wondering if we can check how we're implementing it elsewhere, and try to consolidate so we don't have multiple ways of implementing this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've checked it. We use it just in line. I thought, that it would be nice to have it as a constant. But if needed, I can adjust my solution to also use it inline.

Example (MoneyRequestPreviewContent.tsx):
Screenshot 2024-04-11 at 11 53 45

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like using it as a constant, and it would be nice if the other places followed this same approach as well :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, I think I can change it. Do you want me to change it in this PR or create a new one?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Follow up is totally fine with me, I don't feel too strongly.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use this in other places too for preview cards, etc. Just wondering if we can check how we're implementing it elsewhere, and try to consolidate so we don't have multiple ways of implementing this?

@shawnborton Forgive my ignorance here as I do not understand - other places too for preview cards. Can you please point out exactly where you referred to in the FE?

However, I do see usage of DOT_SEPARATOR for taxes in the money request flow as shown below. That way, we do not have multiple ways of implementing this.

Screenshot 2024-04-11 at 3 58 30 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've replaced this character to use the const everywhere except for the maskCard function, as it is used in different contexts (not as a separator, but as a mask).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I mostly meant that we also use it in places like the expenses detail view:
CleanShot 2024-04-11 at 15 23 27@2x

As well as report previews:
CleanShot 2024-04-11 at 15 23 51@2x

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we should make sure we test those locations as part of the testing steps and screenshots, just to make sure our changes here don't mess anything up. Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated the test sections with the report view. I'm not sure if I will be able to find steps for all the cases.


DEFAULT_TAX: {
defaultExternalID: 'id_TAX_EXEMPT',
defaultValue: '0%',
Expand Down
2 changes: 1 addition & 1 deletion src/components/MoneyRequestConfirmationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
22 changes: 11 additions & 11 deletions src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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;
};
Expand Down
16 changes: 8 additions & 8 deletions src/components/ReportActionItem/MoneyRequestView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}`;
}
}

Expand Down
3 changes: 2 additions & 1 deletion src/libs/OptionsListUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1320,7 +1320,8 @@ function getReportFieldOptionsSection(options: string[], recentlyUsedOptions: st
*/
function transformedTaxRates(taxRates: TaxRatesWithDefault | undefined): Record<string, TaxRate> {
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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/libs/ReportUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2297,7 +2297,7 @@ function getMoneyRequestReportName(report: OnyxEntry<Report>, 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)) {
Expand Down
3 changes: 2 additions & 1 deletion src/libs/TransactionUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}) • ${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;
}

Expand Down
21 changes: 12 additions & 9 deletions src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<WorkspacesCentralPaneNavigatorParamList, typeof SCREENS.WORKSPACE.TAXES>;

Expand Down Expand Up @@ -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],
);
Expand All @@ -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),
Expand Down
Loading