[$250] Contact method - Two error messages appear the same time #55490

lanitochka17 · 2025-01-20T22:00:48Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

Version Number: 9.0.86-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Go to URL https://staging.new.expensify.com/
Login with any account
Go to Settings -> Profile -> Contact methods
Enter a new contact method -> Don't validate
Several times click Didn't receive a magic code? until you get an error message
Then enter incorrect magic code -> Verify

Expected Result:

The previous error must disappear when the next one appears

Actual Result:

Two error messages appear at the same time

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Bug6704213_1736242730055.bandicam_2025-01-07_15-04-37-042.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021882050166066042062
Upwork Job ID: 1882050166066042062
Last Price Increase: 2025-01-22
Automatic offers:

Krishna2323 | Contributor | 105907621

Issue Owner

Current Issue Owner: @parasharrajat

melvin-bot · 2025-01-20T22:00:57Z

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

github-actions · 2025-01-20T22:30:51Z

⚠️ @Krishna2323 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

Krishna2323 · 2025-01-20T22:31:41Z

🚨 Edited by proposal-police: This proposal was edited at 2025-01-21 05:01:01 UTC.

Proposal

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

Contact method - Two error messages appear the same time

What is the root cause of that problem?

We only clear the error when validateError is not empty but we missed to check !isEmptyObject(ErrorUtils.getLatestErrorField(validateCodeAction, 'actionVerified')).

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

Lines 186 to 190 in bec182c

    
               if (!isEmptyObject(validateError)) { 
        
                   clearError(); 
        
                   User.clearValidateCodeActionError('actionVerified'); 
        
               } 
        
           },

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

We should add || !isEmptyObject(ErrorUtils.getLatestErrorField(validateCodeAction, 'actionVerified')) to the condition below:

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

Line 186 in bec182c

if (!isEmptyObject(validateError)) {
Optional: We can create a const to store the value of ErrorUtils.getLatestErrorField(validateCodeAction, 'actionVerified') since we are using that here also:

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

Line 234 in bec182c

errors={ErrorUtils.getLatestErrorField(validateCodeAction, 'actionVerified')}
Optional: We can also clear the actionVerified error inside validateAndSubmitForm, it should be called before the conditional blocks.

    const validateAndSubmitForm = useCallback(() => {
        User.clearValidateCodeActionError('actionVerified');
        if (!validateCode.trim()) {
            setFormError({validateCode: 'validateCodeForm.error.pleaseFillMagicCode'});
            return;
        }

        if (!ValidationUtils.isValidValidateCode(validateCode)) {
            setFormError({validateCode: 'validateCodeForm.error.incorrectMagicCode'});
            return;
        }

        setFormError({});
        handleSubmitForm(validateCode);
    }, [validateCode, handleSubmitForm]);

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

NA

What alternative solutions did you explore? (Optional)

Shahidullah-Muffakir · 2025-01-21T03:49:39Z

Proposal

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

Two error messages appears at the same time

What is the root cause of that problem?

When user tries to send a new magic code multiple times with ResendValidateCode endpoint, we get the error Failed to send a new magic code. because of the limit, and then we are storing this error in the ONYXKEYS.VALIDATE_ACTION_CODE key , under actionVerified property:

App/src/libs/actions/User.ts

Lines 549 to 551 in bec182c

    
           errorFields: { 
        
               actionVerified: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('contacts.genericFailureMessages.requestContactMethodValidateCode'), 
        
           },

When user types a incorrect magic code and click verify , the AddNewContactMethod endpoint returns a new error message for the wrong magic code
The issue occurs because at the point 2, if user gets a new error we are not clearing the the previous error

App/src/libs/actions/User.ts

Line 416 in bec182c

function addNewContactMethod(contactMethod: string, validateCode = '') {

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

To remove the previous error, we can clear the VALIDATE_ACTION_CODE error message whenever user clicks the Verify Btn and addNewContactMethod returns a new error.
here:

App/src/libs/actions/User.ts

Line 416 in bec182c

function addNewContactMethod(contactMethod: string, validateCode = '') {

in the failureData we can add this:

        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: ONYXKEYS.VALIDATE_ACTION_CODE,
            value: {
                errorFields: {
                    actionVerified: null,
                },
            },
        },

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

NA

What alternative solutions did you explore? (Optional)

NA

Screen.Recording.2025-01-21.at.9.15.23.AM.mov

Krishna2323 · 2025-01-21T05:02:44Z

PROPOSAL UPDATED

Added an optional change

zanyrenney · 2025-01-22T12:58:11Z

melvin-bot · 2025-01-22T12:58:22Z

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

melvin-bot · 2025-01-22T12:58:27Z

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

zanyrenney · 2025-01-22T14:12:59Z

hey @parasharrajat - please review the proposals above and let me know which looks good!

FitseTLT · 2025-01-23T21:22:21Z

🚨 Edited by proposal-police: This proposal was edited at 2025-01-23 21:25:51 UTC.

Proposal

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

Contact method - Two error messages appear the same time

What is the root cause of that problem?

We already have a pattern to clear errors on text input here

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

Lines 187 to 191 in fc199fa

    
               if (!isEmptyObject(validateError)) { 
        
                   clearError(); 
        
                   clearValidateCodeActionError('actionVerified'); 
        
               } 
        
           },

but we are only clearing both errors when the validateError is not empty so it will not clear the validateCodeActionError when validateError doesn't exist

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

We need to clear validateError only if it exists and similarly for validateCodeActionError so we shouldn't have a common condition for clearing of the two different errors as they are independent errors. So we should update

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

Lines 187 to 191 in fc199fa

    
               if (!isEmptyObject(validateError)) { 
        
                   clearError(); 
        
                   clearValidateCodeActionError('actionVerified'); 
        
               } 
        
           },

  if (!isEmptyObject(validateError)) {
                clearError();
            }
            if (!isEmptyObject(getLatestErrorField(validateCodeAction, 'actionVerified'))) {
                clearValidateCodeActionError('actionVerified');
            }

Additionally we can also consider clearing both errors on validateAndSubmitForm here.

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

N/A

What alternative solutions did you explore? (Optional)

parasharrajat · 2025-01-27T14:43:07Z

I will start looking into the proposals today.

parasharrajat · 2025-01-29T08:26:43Z

Following the same pattern on clearing the error text input makes sense. I think that there was a case on why we are removing both errors together on text input change. Thus @Krishna2323's proposal looks good to me and they proposed first.

🎀 👀 🎀 C+ reviewed

melvin-bot · 2025-01-29T08:26:54Z

Triggered auto assignment to @carlosmiceli, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

melvin-bot · 2025-01-29T14:49:11Z

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

Krishna2323 · 2025-01-30T08:45:47Z

@parasharrajat PR is ready for review.

lanitochka17 added Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 labels Jan 20, 2025

melvin-bot bot assigned zanyrenney Jan 20, 2025

zanyrenney added the External Added to denote the issue can be worked on by a contributor label Jan 22, 2025

melvin-bot bot changed the title ~~Contact method - Two error messages appear the same time~~ [$250] Contact method - Two error messages appear the same time Jan 22, 2025

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 22, 2025

melvin-bot bot assigned parasharrajat Jan 22, 2025

melvin-bot bot assigned carlosmiceli Jan 29, 2025

carlosmiceli assigned Krishna2323 Jan 29, 2025

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 29, 2025

Krishna2323 mentioned this issue Jan 29, 2025

fix: Contact method - Two error messages appear the same time. #55998

Merged

49 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Jan 29, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$250] Contact method - Two error messages appear the same time #55490

[$250] Contact method - Two error messages appear the same time #55490

lanitochka17 commented Jan 20, 2025 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jan 20, 2025

github-actions bot commented Jan 20, 2025

Krishna2323 commented Jan 20, 2025 •

edited by github-actions bot

Loading

Shahidullah-Muffakir commented Jan 21, 2025

Krishna2323 commented Jan 21, 2025

zanyrenney commented Jan 22, 2025

melvin-bot bot commented Jan 22, 2025

melvin-bot bot commented Jan 22, 2025

zanyrenney commented Jan 22, 2025

FitseTLT commented Jan 23, 2025 •

edited

Loading

parasharrajat commented Jan 27, 2025

parasharrajat commented Jan 29, 2025

melvin-bot bot commented Jan 29, 2025

melvin-bot bot commented Jan 29, 2025

Krishna2323 commented Jan 30, 2025

[$250] Contact method - Two error messages appear the same time #55490

[$250] Contact method - Two error messages appear the same time #55490

Comments

lanitochka17 commented Jan 20, 2025 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Jan 20, 2025

github-actions bot commented Jan 20, 2025

Krishna2323 commented Jan 20, 2025 • edited by github-actions bot Loading

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 specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Shahidullah-Muffakir commented Jan 21, 2025

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 specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Krishna2323 commented Jan 21, 2025

PROPOSAL UPDATED

zanyrenney commented Jan 22, 2025

melvin-bot bot commented Jan 22, 2025

melvin-bot bot commented Jan 22, 2025

zanyrenney commented Jan 22, 2025

FitseTLT commented Jan 23, 2025 • edited Loading

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 specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

parasharrajat commented Jan 27, 2025

parasharrajat commented Jan 29, 2025

melvin-bot bot commented Jan 29, 2025

melvin-bot bot commented Jan 29, 2025

Krishna2323 commented Jan 30, 2025

lanitochka17 commented Jan 20, 2025 •

edited by melvin-bot bot

Loading

Krishna2323 commented Jan 20, 2025 •

edited by github-actions bot

Loading

FitseTLT commented Jan 23, 2025 •

edited

Loading