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

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:

Go to https://staging.new.expensify.com/ and log in with a new account
Select Something else on the onboarding modal
Click on FAB > Start chat and enter an email of another user
In 1:1 chat click on + > Pay someone
Enter the amount and proceed to the next step
Select Pay with Expensify
Enter incorrect code
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:

Screenshots/Videos

Bug6663345_1731471083313.Recording__944.mp4

View all open jobs on GitHub

@jliexpensify

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.

@lakchote

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

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

👋 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:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

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)

I can raise a quick pr if needed

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

@arosiclair

The offending PR is #50835

cc @arosiclair

Fixed in v9.0.61-1:

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

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const onTextInput = useCallback(
	(text: string) => {
	setValidateCode(text);
	setFormError({});

	if (validateError) {
	clearError();
	User.clearValidateCodeActionError('actionVerified');

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Nov 13, 2024

melvin-bot commented on Nov 13, 2024

melvin-bot commented on Nov 13, 2024

github-actions commented on Nov 13, 2024

etCoderDysto commented on Nov 13, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

etCoderDysto commented on Nov 13, 2024

lakchote commented on Nov 13, 2024

lakchote commented on Nov 13, 2024

arosiclair commented on Nov 13, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions