[Due for payment 2025-02-10] [$250] Contact method - Two error messages appear the same time

@zanyrenney

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.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: @zanyrenney

@zanyrenney

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.

@Krishna2323

⚠️ @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).

🚨 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)

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

PROPOSAL UPDATED

Added an optional change

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

@parasharrajat

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

@zanyrenney

@zanyrenney Could you please add the summary?

@zanyrenney

Chill Melvi, we're waiting for @zanyrenney

@carlosmiceli

@carlosmiceli @parasharrajat @zanyrenney @Krishna2323 this issue is now 4 weeks old, please consider:

Finding a contributor to fix the bug
Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

@carlosmiceli

@carlosmiceli, @parasharrajat, @zanyrenney, @Krishna2323 Huh... This is 4 days overdue. Who can take care of this?

@Krishna2323

Contributor: @Krishna2323 paid $250 via Upwork
Contributor+: @parasharrajat due $250 via NewDot

Test case created

https://github.com/Expensify/Expensify/issues/471799

Apologies for the payment delay

@parasharrajat

$250 approved for @parasharrajat

Navigation Menu

Repository navigation

[Due for payment 2025-02-10] [$250] Contact method - Two error messages appear the same time #55490

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

What alternative solutions did you explore? (Optional)

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)

PROPOSAL UPDATED

22 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

[Due for payment 2025-02-10] [$250] Contact method - Two error messages appear the same time #55490

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 20, 2025

github-actions commented on Jan 20, 2025

Krishna2323 commented on Jan 20, 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)

Shahidullah-Muffakir commented on 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 on Jan 21, 2025

PROPOSAL UPDATED

zanyrenney commented on Jan 22, 2025

melvin-bot commented on Jan 22, 2025

melvin-bot commented on Jan 22, 2025

22 remaining items

parasharrajat commented on Feb 10, 2025

carlosmiceli commented on Feb 12, 2025

melvin-bot commented on Feb 17, 2025

melvin-bot commented on Feb 18, 2025

mallenexpensify commented on Feb 18, 2025

JmillsExpensify commented on Feb 21, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions