[HOLD for payment 2024-04-25] [$250] Taxes - Not here page shows up when clicking on tax rate with / symbol

[lanitochka17]

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?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Collect workspace settings
3. Go to Taxes
4. Click Add rate
5. Create a tax rate with / symbol in the name
6. Click on the tax rate

Expected Result:

Tax rate editor opens without issue

Actual Result:

Not here page shows up when clicking on tax rate with / symbol

Workaround:

Unknown

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

Bug6437930_1712233918453.tax_name_with_symbol.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011b3c5959006e7d8f
• Upwork Job ID: 1776218862688116736
• Last Price Increase: 2024-04-05
• Automatic offers:
• s77rt | Reviewer | 0
• gijoe0295 | Contributor | 0

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@twisterdotcom FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

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

[gijoe0295]

Proposal

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

Not here page shows up when clicking on tax rate with / symbol

What is the root cause of that problem?

App/src/ROUTES.ts

Line 648 in 8fa9894

getRoute: (policyID: string, taxID: string) => `settings/workspaces/${policyID}/tax/${encodeURI(taxID)}` as const,

encodeURI is used to parse the tax name in URL. But encodeURI does not escape special characters including /. Reference here.

App/src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx

Lines 73 to 75 in d97bcd3

	if (!currentTaxRate) {
	return <NotFoundPage />;
	}

That causes the tax name to be incorrect and then we cannot retrieve the tax rate and eventually show not found page.

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

1. We should use encodeURIComponent for encoding.
2. In linkingConfig, use decodeURIComponent for decoding taxID, following what we've done for categories:

App/src/libs/Navigation/linkingConfig/config.ts

Line 272 in 8fa9894

categoryName: (categoryName: string) => decodeURIComponent(categoryName),

We should apply this to all other tax routes like this and this.

What alternative solutions did you explore? (Optional)

If we don't want to allow special characters in tax name, we should modify tax name validation function to block those.

App/src/libs/actions/TaxRate.ts

Line 37 in a883c05

const validateTaxName = (policy: Policy, values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAX_NAME_FORM>) => {

[twisterdotcom]

I recreated this. It's clearly to do with it affecting the URL yes.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011b3c5959006e7d8f

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @s77rt (External)

[s77rt]

@gijoe0295 Thanks for the proposal. Your RCA is correct. The solution looks good to me 👍

🎀 👀 🎀 C+ reviewed
Link to proposal