[hold for payment 2025-09-02] [$125] Distance Rate - Missing Lock Icon on Last Enabled Distance Rate

[m-natarajan]

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: 9.1.89-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @nyomanjyotisa
Slack conversation (hyperlinked to channel name): #Opensource

Action Performed:

1. Create a workspace
2. Enable Categories, Tags, and Distance rates
3. Go to Categories, create multiple categories, and enable only one
4. Note that the last enabled category displays a lock icon
5. Repeat the same steps on the Tags page, but also enabling "require tags".
6. Go to Distance Rates, create multiple rates, and enable only one

Expected Result:

The toggle on the last enabled Distance Rate should display a lock icon, consistent with Categories and Tags pages because a workspace with distance rate turned on must always have one active distance rate.

Actual Result:

The toggle on the last enabled Distance Rate does not display a lock icon.
Platforms: All platforms

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

MacOS-Chrome.mp4

Recording.1477.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021953447929399931677
• Upwork Job ID: 1953447929399931677
• Last Price Increase: 2025-08-11
• Automatic offers:
• nkdengineer | Contributor | 108453237

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[m-natarajan]

Proposal by @nyomanjyotisa

Proposal

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

Distance Rate - Missing Lock Icon on Last Enabled Distance Rate

What is the root cause of that problem?

We dont pass any showLockIcon param here

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

Move this canDisableOrDeleteRate outside updateDistanceRateEnabled and accept rateID on its param

    const canDisableOrDeleteRate = (rateID: string): boolean => {
        return Object.values(customUnit?.rates ?? {}).some(
            (distanceRate: Rate) =>
                distanceRate?.enabled &&
                rateID !== distanceRate?.customUnitRateID &&
                distanceRate?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
        );
    };

And set showLockIcon to true if canDisableOrDeleteRate false here

showLockIcon={!canDisableOrDeleteRate(value.customUnitRateID)}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

None

[nkdengineer]

Proposal

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

The toggle on the last enabled Distance Rate does not display a lock icon
Platforms: All platforms

What is the root cause of that problem?

We don't pass showLockIcon here and here

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

Lines 170 to 175 in 57ed206

	<Switch
	isOn={!!value?.enabled}
	accessibilityLabel={translate('workspace.distanceRates.trackTax')}
	onToggle={(newValue: boolean) => updateDistanceRateEnabled(newValue, value.customUnitRateID)}
	disabled={value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
	/>

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

Lines 122 to 126 in 75ddb9d

	<Switch
	isOn={rate?.enabled ?? false}
	onToggle={toggleRate}
	accessibilityLabel={translate('workspace.distanceRates.enableRate')}
	/>

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

1. In list page, we should move canDisableOrDeleteRate to the outside like we did in details page here

    const canDisableOrDeleteRate = useCallback((rateID: string): boolean => {
        return Object.values(customUnit?.rates ?? {}).some(
            (distanceRate: Rate) =>
                distanceRate?.enabled &&
                rateID !== distanceRate?.customUnitRateID &&
                distanceRate?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
        );
    }, [customUnit?.rates]);

Then use this here and here

    showLockIcon={!canDisableOrDeleteRate(value.customUnitRateID)}

2. In details page, we should pass showLockIcon as !canDisableOrDeleteRate

    showLockIcon={!canDisableOrDeleteRate}

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

Lines 122 to 126 in 75ddb9d

	<Switch
	isOn={rate?.enabled ?? false}
	onToggle={toggleRate}
	accessibilityLabel={translate('workspace.distanceRates.enableRate')}
	/>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[daledah]

Proposal

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

The toggle on the last enabled Distance Rate does not display a lock icon
Platforms: All platforms

What is the root cause of that problem?

We're not passing showLockIcon for the distance rates item in the pages:

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

Lines 170 to 175 in c31f822

	<Switch
	isOn={!!value?.enabled}
	accessibilityLabel={translate('workspace.distanceRates.trackTax')}
	onToggle={(newValue: boolean) => updateDistanceRateEnabled(newValue, value.customUnitRateID)}
	disabled={value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
	/>

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

Lines 122 to 126 in c31f822

	<Switch
	isOn={rate?.enabled ?? false}
	onToggle={toggleRate}
	accessibilityLabel={translate('workspace.distanceRates.enableRate')}
	/>

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

We should create a similar function to isDisablingOrDeletingLastEnabledCategory here:

App/src/libs/OptionsListUtils.ts

Lines 1151 to 1167 in c31f822

	function isDisablingOrDeletingLastEnabledCategory(
	policy: Policy | undefined,
	policyCategories: PolicyCategories | undefined,
	selectedCategories: Array<PolicyCategory | undefined>,
	): boolean {
	const enabledCategoriesCount = getEnabledCategoriesCount(policyCategories);
	if (!enabledCategoriesCount) {
	return false;
	}
	if (policy?.requiresCategory && selectedCategories.filter((selectedCategory) => selectedCategory?.enabled).length === enabledCategoriesCount) {
	return true;
	}
	return false;
	}

Sample implementation:

function isDisablingOrDeletingLastEnabledDistanceRate(policy: OnyxEntry<Policy>, selectedRates: Rate[]) {
    const customUnit = getDistanceRateCustomUnit(policy);
    const enabledRatesCount = Object.values(customUnit?.rates ?? {}).filter((rate) => rate.enabled).length;
    if (!enabledRatesCount) {
        return false;
    }

    if (selectedRates.filter((selectedRate) => selectedRate.enabled).length === enabledRatesCount) {
        return true;
    }

    return false;
}

Then use it in the Switches:

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

Lines 170 to 175 in c31f822

	<Switch
	isOn={!!value?.enabled}
	accessibilityLabel={translate('workspace.distanceRates.trackTax')}
	onToggle={(newValue: boolean) => updateDistanceRateEnabled(newValue, value.customUnitRateID)}
	disabled={value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
	/>

showLockIcon={isDisablingOrDeletingLastEnabledDistanceRate(policy, [value])}

Screen.Recording.2025-08-05.at.23.12.26.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[joekaufmanexpensify]

Discussing here

[melvin-bot]

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

[melvin-bot]

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