[Simplified Collect][Distance rates] Subcategory is displayed as indented instead of Parent: Child format

[izarutskaya]

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

---

Found when validating PR : #38060

Version Number: 1.4.55-0
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Precondition:

• User is admin of Collect workspace.
• The Collect workspace has subcategories.

1. Go to staging.new.expensify.com.
2. Go to Profile > Workspaces > Collect workspace.
3. Go to Distance rates.
4. Click Settings.
5. Select a subcategory.

Expected Result:

The selected subcategory in Default category row will be displayed in Parent: Child format.

Actual Result:

The selected subcategory in Default category row is displayed as indented subcategory.

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

Bug6420279_1710929188630.subcat.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 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.

[melvin-bot]

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

[izarutskaya]

@garrettmknight 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.

We think this issue might be related to the #wave-control.

[parasharrajat]

@izarutskaya How do we create subcategories?

[Krishna2323]

@parasharrajat, just by adding a colon, eg: category: subcategory

[tienifr]

@parasharrajat I think we should use category.searchText here instead of category.text:

App/src/pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage.tsx

Line 48 in c1c054d

Policy.setPolicyDistanceRatesDefaultCategory(policyID, customUnit, {...customUnit, defaultCategory: category.text});

That's consistent with how we select sub-categories in IOU request:

App/src/pages/iou/request/step/IOURequestStepCategory.js

Lines 90 to 92 in c1c054d

	const updateCategory = (category) => {
	const isSelectedCategory = category.searchText === transactionCategory;
	const updatedCategory = isSelectedCategory ? '' : category.searchText;

text is for displaying indented space prefix for sub-categories.

I can raise PR immediately if assigned.