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

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

1. Go to URL https://staging.new.expensify.com/
2. Login with any account
3. Go to Settings -> Profile -> Contact methods
4. Enter a new contact method -> Don't validate
5. Several times click Didn't receive a magic code? until you get an error message
6. 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?

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

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

[melvin-bot]

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]

⚠️ @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]

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

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?

1. 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'),
   	},

2. When user types a incorrect magic code and click verify , the AddNewContactMethod endpoint returns a new error message for the wrong magic code
3. 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]

PROPOSAL UPDATED

• Added an optional change

[zanyrenney]

[melvin-bot]

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

[melvin-bot]

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