[Due for payment 2026-03-02] [$250] Rules - Rule when deleted offline is not disabled and can be opened

[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: 9.3.22-4
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #82438
Email or phone of affected tester (no customers): osijdnojsdoijisdoijs@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Rules are enabled.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Rules.
3. Click Add merchant rule.
4. Select any option and click Save rule.
5. Go offline.
6. Click on the created rule.
7. Click Delete rule > Delete.
8. Click on the deleted rule.

Expected Result:

Rule when deleted offline should be disabled.

Actual Result:

Rule when deleted offline is not disabled and can be opened.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7082610_1771518766991.9.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @heyjennahay

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @heyjennahay (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.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[twilight2294]

Proposal

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

When a merchant rule is deleted while offline, the rule remains visible and tappable in the rules list (with strikethrough styling), allowing users to open and interact with a rule that is pending deletion — behavior inconsistent with how other workspace settings (categories, tags) handle this state.

What is the root cause of that problem?

There are two related root causes. The primary one is in sortedRules inside MerchantRulesSection: the filter only excludes null/falsy rules but does not filter out rules with pendingAction: 'delete'. When deletePolicyCodingRule() is called offline, it optimistically sets pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE on the rule in Onyx — the rule is not removed until the API call succeeds. Because the filter passes these rules through, they are rendered in the list with a live onPress handler that navigates to the edit page. The OfflineWithFeedback wrapper applies strikethrough styling but intentionally does not block interaction — the caller is responsible for filtering.

The secondary root cause is in MerchantRulePageBase, where the NotFoundPage guard at line 347 only triggers when the rule is entirely absent from Onyx (!existingRule). A rule pending deletion still exists in Onyx, so existingRule is truthy and the guard is bypassed, allowing the full edit form to render for a rule being deleted.

Other workspace settings pages follow the correct pattern: WorkspaceCategoriesPage and WorkspaceTagsPage both explicitly filter out items where pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE before rendering their lists.

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

Fix 1 (primary) — MerchantRulesSection: Add a pendingAction check to the sortedRules filter so DELETE-pending rules are excluded from the rendered list:

return Object.entries(codingRules)
    .filter(([, rule]) => !!rule && rule.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE)
    .map(([ruleID, rule]) => ({...rule, ruleID}))

Fix 2 (defense-in-depth) — MerchantRulePageBase: Update the NotFoundPage guard to also treat DELETE-pending rules as non-existent, protecting against edge cases like direct deep-link navigation:

if (ruleID && (!existingRule || existingRule.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) && !isDeleting) {
    return <NotFoundPage />;
}

What alternative solutions did you explore?

Disabling the onPress on the MenuItemWithTopDescription for DELETE-pending rules rather than filtering them out was considered, but filtering is the established pattern across the codebase (categories, tags, distance rates) and is cleaner — it removes the item entirely rather than leaving a disabled-but-visible entry.

[daledah]

Proposal

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

Rule when deleted offline is not disabled and can be opened.

What is the root cause of that problem?

In MerchantRulesSection.tsx, the MenuItemWithTopDescription does not check whether the rule has a pendingAction of delete. When a rule is deleted offline, the optimistic data correctly sets pendingAction: 'delete' on the rule, and OfflineWithFeedback renders the item with strikethrough styling. However, the menu item remains interactive — it doesn't pass disabled or interactive={false}, so users can still tap/click through to the edit page of a rule that is pending deletion.

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

We should disable the MenuItemWithTopDescription when the rule has pendingAction === 'delete' so that it cannot be opened while the deletion is pending.

--- a/src/pages/workspace/rules/MerchantRulesSection.tsx
+++ b/src/pages/workspace/rules/MerchantRulesSection.tsx
@@ -136,6 +136,7 @@
                                     <MenuItemWithTopDescription
                                         description={matchDescription}
                                         title={ruleDescription}
+                                        interactive={rule.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
                                         wrapperStyle={[styles.sectionMenuItemTopDescription]}
                                         descriptionTextStyle={[styles.textStrong, styles.themeTextColor, styles.fontSizeNormal]}
                                         titleStyle={[styles.textLabelSupporting, styles.fontSizeLabel]}

Optional: we can show the not found page when rule is pending delete in MerchantRulePageBase component

What alternative solutions did you explore? (Optional)

We could also filter out rules with pendingAction === 'delete' from the sortedRules list entirely when offline. However, keeping them visible with strikethrough styling (via OfflineWithFeedback) and just disabling interaction is the standard pattern used across the codebase for optimistic deletes.

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.

[annaweber830]

Proposal

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

When a merchant rule is deleted while offline, the rule row remains tappable in Workspace Rules. Users can still open the edit page for a rule that is already pending deletion, which is inconsistent with expected disabled behavior.

What is the root cause of that problem?

The delete flow correctly marks the coding rule as pendingAction: DELETE in optimistic Onyx data, but the merchant rules list does not use that pending state to disable navigation. As a result, the row remains interactive until the server success removes it from Onyx.

App/src/libs/actions/Policy/Rules.ts

Lines 260 to 293 in 480fd3d

	function deletePolicyCodingRule(policy: Policy, ruleID: string) {
	if (!policy.id || !ruleID) {
	Log.warn('Invalid params for deletePolicyCodingRule');
	return;
	}
	const policyKey = `${ONYXKEYS.COLLECTION.POLICY}${policy.id}` as const;
	const existingRule = policy.rules?.codingRules?.[ruleID];
	const onyxData = {
	optimisticData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: policyKey,
	value: {
	rules: {
	codingRules: {
	[ruleID]: {
	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
	},
	},
	},
	},
	},
	],
	successData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: policyKey,
	value: {
	rules: {
	codingRules: {
	[ruleID]: null,
	},

function deletePolicyCodingRule(policy: Policy, ruleID: string) {
    // ...
    const onyxData = {
        optimisticData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: policyKey,
                value: {
                    rules: {
                        codingRules: {
                            [ruleID]: {
                                pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                            },
                        },
                    },
                },
            },
        ],
        successData: [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: policyKey,
                value: {
                    rules: {
                        codingRules: {
                            [ruleID]: null,
                        },
                    },
                },
            },
        ],
    };
}

App/src/pages/workspace/rules/MerchantRulesSection.tsx

Lines 132 to 144 in 480fd3d

	<OfflineWithFeedback
	pendingAction={rule.pendingAction}
	errors={rule.errors}
	>
	<MenuItemWithTopDescription
	description={matchDescription}
	title={ruleDescription}
	wrapperStyle={[styles.sectionMenuItemTopDescription]}
	descriptionTextStyle={[styles.textStrong, styles.themeTextColor, styles.fontSizeNormal]}
	titleStyle={[styles.textLabelSupporting, styles.fontSizeLabel]}
	shouldShowRightIcon
	onPress={() => Navigation.navigate(ROUTES.RULES_MERCHANT_EDIT.getRoute(policyID, rule.ruleID))}
	sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.MERCHANT_RULE_ITEM}

<OfflineWithFeedback
    pendingAction={rule.pendingAction}
    errors={rule.errors}
>
    <MenuItemWithTopDescription
        description={matchDescription}
        title={ruleDescription}
        shouldShowRightIcon
        onPress={() => Navigation.navigate(ROUTES.RULES_MERCHANT_EDIT.getRoute(policyID, rule.ruleID))}
    />
</OfflineWithFeedback>

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

At the merchant rules list render site, derive an isPendingDelete flag from each rule and pass it to MenuItemWithTopDescription as disabled. This prevents opening a rule that is already pending deletion while offline, while still allowing OfflineWithFeedback to show delete status/errors.

App/src/pages/workspace/rules/MerchantRulesSection.tsx

Lines 124 to 145 in 480fd3d

	{sortedRules.map((rule) => {
	const merchantName = rule.filters?.right ?? '';
	const isExactMatch = rule.filters?.operator === CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO;
	const matchDescription = translate('workspace.rules.merchantRules.ruleSummaryTitle', merchantName, isExactMatch);
	const ruleDescription = getRuleDescription(rule, translate, fieldLabels);
	return (
	<View key={rule.ruleID}>
	<OfflineWithFeedback
	pendingAction={rule.pendingAction}
	errors={rule.errors}
	>
	<MenuItemWithTopDescription
	description={matchDescription}
	title={ruleDescription}
	wrapperStyle={[styles.sectionMenuItemTopDescription]}
	descriptionTextStyle={[styles.textStrong, styles.themeTextColor, styles.fontSizeNormal]}
	titleStyle={[styles.textLabelSupporting, styles.fontSizeLabel]}
	shouldShowRightIcon
	onPress={() => Navigation.navigate(ROUTES.RULES_MERCHANT_EDIT.getRoute(policyID, rule.ruleID))}
	sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.MERCHANT_RULE_ITEM}
	/>

Current code:

{sortedRules.map((rule) => {
    const merchantName = rule.filters?.right ?? '';
    const isExactMatch = rule.filters?.operator === CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO;
    const matchDescription = translate('workspace.rules.merchantRules.ruleSummaryTitle', merchantName, isExactMatch);
    const ruleDescription = getRuleDescription(rule, translate, fieldLabels);

    return (
        <View key={rule.ruleID}>
            <OfflineWithFeedback
                pendingAction={rule.pendingAction}
                errors={rule.errors}
            >
                <MenuItemWithTopDescription
                    description={matchDescription}
                    title={ruleDescription}
                    wrapperStyle={[styles.sectionMenuItemTopDescription]}
                    descriptionTextStyle={[styles.textStrong, styles.themeTextColor, styles.fontSizeNormal]}
                    titleStyle={[styles.textLabelSupporting, styles.fontSizeLabel]}
                    shouldShowRightIcon
                    onPress={() => Navigation.navigate(ROUTES.RULES_MERCHANT_EDIT.getRoute(policyID, rule.ruleID))}
                    sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.MERCHANT_RULE_ITEM}
                />
            </OfflineWithFeedback>
        </View>
    );
})}

Updated code:

{sortedRules.map((rule) => {
    const merchantName = rule.filters?.right ?? '';
    const isExactMatch = rule.filters?.operator === CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO;
    const matchDescription = translate('workspace.rules.merchantRules.ruleSummaryTitle', merchantName, isExactMatch);
    const ruleDescription = getRuleDescription(rule, translate, fieldLabels);
    const isPendingDelete = rule.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

    return (
        <View key={rule.ruleID}>
            <OfflineWithFeedback
                pendingAction={rule.pendingAction}
                errors={rule.errors}
            >
                <MenuItemWithTopDescription
                    description={matchDescription}
                    title={ruleDescription}
                    wrapperStyle={[styles.sectionMenuItemTopDescription]}
                    descriptionTextStyle={[styles.textStrong, styles.themeTextColor, styles.fontSizeNormal]}
                    titleStyle={[styles.textLabelSupporting, styles.fontSizeLabel]}
                    shouldShowRightIcon
                    disabled={isPendingDelete}
                    onPress={() => Navigation.navigate(ROUTES.RULES_MERCHANT_EDIT.getRoute(policyID, rule.ruleID))}
                    sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.MERCHANT_RULE_ITEM}
                />
            </OfflineWithFeedback>
        </View>
    );
})}

What alternative solutions did you explore? (Optional)

Another option is filtering out pending-delete rules from sortedRules immediately. I did not choose that because the current pattern in this app often keeps pending-delete items visible offline (but disabled) until the success merge removes them, which gives better feedback for in-flight changes.

[situchan]

cc: @luacmartins

[MelvinBot]

Proposal

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

When a merchant rule is deleted while offline, the rule still appears interactive in the list — the user can tap/click it and navigate to the full edit page. It should be disabled (non-interactive) while the delete is pending offline.

What is the root cause of that problem?

In MerchantRulesSection.tsx, each merchant rule is wrapped in OfflineWithFeedback with pendingAction={rule.pendingAction}, which correctly applies visual feedback (strikethrough + opacity) when offline with a pending delete. However, the MenuItemWithTopDescription inside it is never passed a disabled prop, so the onPress handler remains active and the user can still tap the item and navigate to the edit page.

The OfflineWithFeedback component (OfflineWithFeedback.tsx:98-103) only handles visual styling — it does not block interaction on its children. The consuming component is responsible for disabling interactive elements when appropriate.

The correct pattern already exists in ExpenseRulesPage.tsx:88, which explicitly sets isDisabled: rule.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE on each list item. MerchantRulesSection simply lacks this same handling.

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

In MerchantRulesSection.tsx, pass disabled={rule.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE} to the MenuItemWithTopDescription component. This will prevent the onPress handler from firing when the rule is pending deletion, matching the pattern used in ExpenseRulesPage.tsx.

What alternative solutions did you explore? (Optional)

1. Blocking interaction in OfflineWithFeedback itself (e.g., adding pointerEvents: 'none' when pendingAction === 'delete'). This was rejected because OfflineWithFeedback is a general-purpose component used across the app, and changing its behavior could have unintended side effects on other screens. The component's current design intentionally delegates interaction control to the consuming component.

2. Adding a guard in MerchantRulePageBase to show NotFoundPage when existingRule.pendingAction === 'delete'. While this would prevent the edit page from rendering for a deleted rule, it doesn't address the core issue — the list item should not be interactive in the first place.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, or @MelvinBot <your feedback> to refine this analysis.