[Violations] [MEDIUM] IOU - The disabled category message does not disappear immediately after the change is made

[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.25-1
Reproducible in staging?: Y
Reproducible in production?: N
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: Applause - Internal Team
Slack conversation:

Action Performed:

Preconditions:
In OldDot under admin, create a Collect group policy, enable Categories, add 3 Categories, add an employee to the policy.

1. Open https://staging.new.expensify.com/
2. Log in to the employee's account
3. Tap on the green plus button (FAB)
4. Select Request money
5. Select any currency and amount
6. Click next
7. Choose a WS room
8. Click on "Show more"
9. In the "Category" section, select any category
10. Complete the IOU
11. Open https://staging.expensify.com/
12. Log in to the admin account
13. Navigate to the Collect group policy settings
14. In the category tab, disable the employee's selected category from step 9
15. In the employee's account in ND, open the IOU details.
16. Click on the category field
17. Select an enabled category

Expected Result:

The message about a disabled category should immediately disappear after selecting an enabled category

Actual Result:

The disabled category message does not disappear immediately after selecting an enabled category

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

Bug6343627_1705355438570.Recording__1091.mp4

View all open jobs on GitHub

[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 @tylerkaraszewski (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[mountiny]

Not a blocker, new feature

[paultsimura]

Proposal

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

The categoryOutOfPolicy violation message doesn't disappear on the category change.

What is the root cause of that problem?

We do not optimistically remove the category violation when updating the Money Request's category.

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

When editing a money request, if the changes contain category, along with updating the recently used category, we should remove the category violation from this transaction's Onyx entry: ${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}

It can be done like this (added a concern at the end):

const transactionViolations = allTransactionViolations[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`];
        optimisticData.push({
            onyxMethod: Onyx.METHOD.SET,
            key: `${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`,
            value: transactionViolations.filter((violation) => violation.name === 'categoryOutOfPolicy'),
        });

App/src/libs/actions/IOU.js

Lines 2342 to 2352 in c13c497

	// Update recently used categories if the category is changed
	if (_.has(transactionChanges, 'category')) {
	const optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, transactionChanges.category);
	if (!_.isEmpty(optimisticPolicyRecentlyUsedCategories)) {
	optimisticData.push({
	onyxMethod: Onyx.METHOD.SET,
	key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${iouReport.policyID}`,
	value: optimisticPolicyRecentlyUsedCategories,
	});
	}
	}

Also, we need to introduce a BE change to update the TRANSACTION_VIOLATIONS Onyx key on the EditMoneyRequest API response.

Concern: IMO, it's quite risky to operate an Onyx entry that holds an array, because it doesn't support the MERGE operation properly. It's worth thinking of using an Object for them in Onyx, this will enable better control over the specific violations.
Asked to clarify here: https://expensify.slack.com/archives/C01GTK53T8Q/p1705400084950499

What alternative solutions did you explore? (Optional)