[$500] Taxes - App crashes when changing tax rate to 0% on native apps and it shows 00 on web

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.60-1
Reproducible in staging?: y
Reproducible in production?: n
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• User is an employee of Collect workspace that has taxes.
• One of the tax rates is 0%.

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create a manual request with tax that is not 0%.
4. Go to transaction thread.
5. Click Tax.
6. Select the 0% tax rate.

Expected Result:

App does not crash

Actual Result:

App crashes. On web and desktop app, it shows 00 instead of crashing

Workaround:

n/a

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6437919_1712233908134.iOS.mp4

Bug6437919_1712233908103.tax_0__web.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01738457c70add314d
• Upwork Job ID: 1776310057649451008
• Last Price Increase: 2024-04-05

[melvin-bot]

Triggered auto assignment to @srikarparsi (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[kbecciv]

We think that this bug might be related to #wave-collect - Release 1

[ZhenjaHorbach]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Taxes - App crashes when changing tax rate to 0% on native apps and it shows 00 on web

What is the root cause of that problem?

The main problem with issue is that shouldShowTax can return number

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 159 in 136898c

const shouldShowTax = isTaxPolicyEnabled(isPolicyExpenseChat, policy) && transactionTaxCode && transactionTaxAmount;

As result we show 0 like text(For web) instead hide this element
For native we get crash

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 435 to 446 in 136898c

	{shouldShowTax && (
	<OfflineWithFeedback pendingAction={getPendingFieldAction('taxCode')}>
	<MenuItemWithTopDescription
	title={taxRateTitle ?? ''}
	description={taxRatesDescription}
	interactive={canEdit}
	shouldShowRightIcon={canEdit}
	titleStyle={styles.flex1}
	onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAX_RATE))}
	/>
	</OfflineWithFeedback>
	)}

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 448 to 459 in 136898c

	{shouldShowTax && (
	<OfflineWithFeedback pendingAction={getPendingFieldAction('taxAmount')}>
	<MenuItemWithTopDescription
	title={formattedTaxAmount ? formattedTaxAmount.toString() : ''}
	description={translate('iou.taxAmount')}
	interactive={canEdit}
	shouldShowRightIcon={canEdit}
	titleStyle={styles.flex1}
	onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAX_AMOUNT))}
	/>
	</OfflineWithFeedback>
	)}

What changes do you think we should make in order to solve the problem?

To fix this issue we can we can convert this value to boolean (!!shouldShowTax)

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 435 to 446 in 136898c

	{shouldShowTax && (
	<OfflineWithFeedback pendingAction={getPendingFieldAction('taxCode')}>
	<MenuItemWithTopDescription
	title={taxRateTitle ?? ''}
	description={taxRatesDescription}
	interactive={canEdit}
	shouldShowRightIcon={canEdit}
	titleStyle={styles.flex1}
	onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAX_RATE))}
	/>
	</OfflineWithFeedback>
	)}

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 448 to 459 in 136898c

	{shouldShowTax && (
	<OfflineWithFeedback pendingAction={getPendingFieldAction('taxAmount')}>
	<MenuItemWithTopDescription
	title={formattedTaxAmount ? formattedTaxAmount.toString() : ''}
	description={translate('iou.taxAmount')}
	interactive={canEdit}
	shouldShowRightIcon={canEdit}
	titleStyle={styles.flex1}
	onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAX_AMOUNT))}
	/>
	</OfflineWithFeedback>
	)}

But it's a little unclear here
Should we hide the ability to select taxes when we have chosen the default value (0)?

Because in this case we have a slightly incorrect condition that hides the item menu when the tax value is 0

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 159 in 136898c

const shouldShowTax = isTaxPolicyEnabled(isPolicyExpenseChat, policy) && transactionTaxCode && transactionTaxAmount;

What alternative solutions did you explore? (Optional)

NA

[MonilBhavsar]

Looking