Web - Pay someone - Error message still displayed after removing incorrect code

[IuliiaHerets]

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.0.61.0
Reproducible in staging?: Y
Reproducible in production?: N
Issue was found when executing this PR: #50835
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/ and log in with a new account
2. Select Something else on the onboarding modal
3. Click on FAB > Start chat and enter an email of another user
4. In 1:1 chat click on + > Pay someone
5. Enter the amount and proceed to the next step
6. Select Pay with Expensify
7. Enter incorrect code
8. Delete the entered code

Expected Result:

The underscore turns green and the error message disappears

Actual Result:

The underscore is still red and the error message is still displayed. The error is still displayed after retuning to the previous screen and selecting Pay with expensify again

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6663345_1731471083313.Recording__944.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @jliexpensify (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]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[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.

[etCoderDysto]

Edited by proposal-police: This proposal was edited at 2024-11-13 09:39:07 UTC.

Proposal

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

Error message still displayed after removing incorrect code

What is the root cause of that problem?

When a wrong magic code is entered we display error message for account.errors.id here

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 205 in c24d217

errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})}

And on text input change we are not clearing the error message from account.errors here

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 165 to 172 in c24d217

	const onTextInput = useCallback(
	(text: string) => {
	setValidateCode(text);
	setFormError({});
	if (validateError) {
	clearError();
	User.clearValidateCodeActionError('actionVerified');

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

We should clear the error from account.errors here

if (account.errors) {
                Session.clearAccountMessages();
            }

Note: we need to add account.errors to the onTextInput callback dependency list

What alternative solutions did you explore? (Optional)

[etCoderDysto]

I can raise a quick pr if needed

[lakchote]

It's not a blocker as it doesn't prevent the user from entering a correct code.

[lakchote]

The offending PR is #50835

cc @arosiclair

[arosiclair]

Fixed in v9.0.61-1:

Screen.Recording.2024-11-13.at.4.48.54.PM.mov