[Awaiting Payment][$1000] Web - The error doesn't clear immediately after reloading the contact method verify page #23813

kbecciv · 2023-07-28T17:39:59Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Go to setting > profile > contact method
Click on add contact method
Add a new contact method
Click on this contact method to verify
Enter a random magic code to make the error appears
Reload the page and notice the error

Expected Result:

The error should clear immediately after reloading the page

Actual Result:

The error doesn't clear immediately

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.47-2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screencast.from.28-07-2023.18_05_23.webm

Recording.3981.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dukenv0307
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690542294914639

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0140f90e5805b83227
Upwork Job ID: 1684997840572416000
Last Price Increase: 2023-07-28
Automatic offers:

WikusKriek | Contributor | 26183374
dukenv0307 | Reporter | 26183376

melvin-bot · 2023-07-28T17:40:05Z

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

melvin-bot · 2023-07-28T17:40:06Z

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

StevenKKC · 2023-07-28T17:57:31Z

Proposal

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

The error doesn't clear immediately after reloading the contact method verify page.

What is the root cause of that problem?

The error message is stored in loginList onyx data, and retrieved by ErrorUtils.getEarliestErrorField and ErrorUtils.getLatestErrorField function.

App/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js

Line 75 in 7d88540

    
           const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js

Line 239 in 55d6a28

messages={ErrorUtils.getLatestErrorField(loginData, 'addedLogin')}

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js

Line 259 in 55d6a28

errors={ErrorUtils.getLatestErrorField(loginData, 'defaultLogin')}

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js

Line 282 in 55d6a28

errors={ErrorUtils.getLatestErrorField(loginData, 'deletedLogin')}

But when reloading the contact method verify page, these onyx data does not clear.
Therefore after reloading the page, the error is still shown.

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

We should clear error message data in componentDidUpdate in ContactMethodDetailsPage.
There are four types of error message: validateLogin, addedLogin, defaultLogin, deletedLogin, we should clear these message.
We can change User.clearContactMethodErrors function to clear all error fields if fieldName is empty.

function clearContactMethodErrors(contactMethod, fieldName) {
    if (fieldName === '') {
        Onyx.merge(ONYXKEYS.LOGIN_LIST, {
            [contactMethod]: {
                errorFields: {
                    validateLogin: null,
                    addedLogin: null,
                    deletedLogin: null,
                    defaultLogin: null,
                },
                pendingFields: {
                    validateLogin: null,
                    addedLogin: null,
                    deletedLogin: null,
                    defaultLogin: null,
                },
            },
        });
        return;
    }
    ...
}

    componentDidMount() {
+       User.clearContactMethodErrors(this.getContactMethod(), '');
        User.resetContactMethodValidateCodeSentState(this.getContactMethod());
    }

What alternative solutions did you explore? (Optional)

None.

garrettmknight · 2023-07-28T18:42:33Z

Confirmed error on staging

melvin-bot · 2023-07-28T18:42:47Z

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

melvin-bot · 2023-07-28T18:42:50Z

Current assignee @garrettmknight is eligible for the External assigner, not assigning anyone new.

melvin-bot · 2023-07-28T18:42:55Z

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

mananjadhav · 2023-07-28T21:01:07Z

Thanks for the proposal @StevenKKC. I get that the proposal works, and the RCA is also correct. But I am going to have to confirm if we're okay to clear these messages.

@johnmlee101 I can see we're storing all the error messages in Onyx and not clearing, is there any reason we would want to retain after refresh?

🎀 👀 🎀 C+ reviewed.

melvin-bot · 2023-07-28T21:01:13Z

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

DreamSoft0888 · 2023-07-29T03:31:32Z

Hello, everyone!
I am the professional web/mobile app developer who have full experience 8 years.
How can I join this project dev team?
Regards.

Janitha!

melvin-bot · 2023-07-29T03:31:35Z

📣 @DreamSoft0888! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

DreamSoft0888 · 2023-07-29T03:35:49Z

Contributor details
My expensify account email: janithaamaradasa0888@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~015084d5d2f275fda4

dukenv0307 · 2023-07-29T04:30:25Z

Proposal

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

The error doesn't clear immediately after reloading the contact method verify page

What is the root cause of that problem?

We don't clear the validateLogin error in Onyx when ContactMethodDetailsPage is mounted and then when we reload the page the error still shows

After some seconds reconnectAPP API is called, loginList is updated in Onyx without the error. That's why it was cleared after that

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

addedLogin, defaultLogin, and deletedLogin errors need to display the error when the contact method is invalid. We should keep it to display the error and hide the magic code form when we go to ContactMethodDetailsPage without the reload. So we should only remove the validateLogin error in componentDidMount function by using User.clearContactMethodErrors

componentDidMount() {
    User.clearContactMethodErrors(props.contactMethod, 'validateLogin')
    User.resetContactMethodValidateCodeSentState(this.getContactMethod());
}

What alternative solutions did you explore? (Optional)

rahatcse5bu · 2023-07-29T05:45:28Z

Contributor details
Your Expensify account email: rahat.cse5.bu@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~015e503612775150e8

melvin-bot · 2023-07-29T05:45:31Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

dukenv0307 · 2023-07-29T08:54:16Z

@mananjadhav The RCA of the solution above does not show why it is cleared after a few seconds

if we're okay to clear these messages

We shouldn't clear other errors because these errors need to display when we add a contact method or delete a contact method fails. We should only remove validateLogin error.

DreamSoft0888 · 2023-07-29T09:49:15Z

Contributor details
Your Expensify account email: janithaamaradasa0888@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~015084d5d2f275fda4

melvin-bot · 2023-07-29T09:49:17Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

codewithwaheed · 2023-07-29T12:32:23Z

Contributor details
Your Expensify account email: ahmadwaheed359@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~018273a94f8b5612b2

melvin-bot · 2023-07-29T12:32:24Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

melvin-bot · 2023-08-17T21:12:04Z

🎯 ⚡️ Woah @mananjadhav / @WikusKriek, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

when @WikusKriek got assigned: 2023-08-17 18:19:49 Z
when the PR got merged: 2023-08-17 21:12:03 UTC

On to the next one 🚀

mananjadhav · 2023-08-25T18:21:00Z

This was deployed on production 2 days, but the title wasn't updated.

mananjadhav · 2023-08-31T14:36:40Z

@garrettmknight This is in production for 7 days, and ready for payout now. Can you post the payout summary here?

garrettmknight · 2023-09-04T10:08:46Z

Oops, yep, let me process now.

garrettmknight · 2023-09-04T10:10:35Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@mananjadhav] The PR that introduced the bug has been identified. Link to the PR:
[@mananjadhav] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@mananjadhav] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@mananjadhav] Determine if we should create a regression test for this bug.
[@mananjadhav] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@garrettmknight] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

garrettmknight · 2023-09-04T10:13:53Z

Summary of payments for this issue:

#urgency bonus? Yes
Reporter: @dukenv0307 - $250 paid via Upwork
Contirbutor: @WikusKriek - $1500 paid via Upwork
Contributor+: @mananjadhav - $1500

Upwork job: https://www.upwork.com/jobs/~0140f90e5805b83227

JmillsExpensify · 2023-09-10T11:27:33Z

$1,500 payment approved via NewDot based on BZ summary.

mananjadhav · 2023-09-12T17:32:02Z

@JmillsExpensify @garrettmknight We're good to close this one?

garrettmknight · 2023-09-14T11:35:07Z

@mananjadhav can you complete the checklist?

mananjadhav · 2023-09-17T16:59:42Z

I can't attribute this to a specific offending PR. We are not clearing the code is something that we have had since BaseValidationCodeForm component was created. It's a base component, where we've fixed the change. Hence I don't think we would have the issue again. This is the reason, I don't think we need a regression test for this one.

garrettmknight · 2023-09-21T08:44:00Z

Thanks, we can close now.

kbecciv added Daily KSv2 Needs Reproduction Reproducible steps needed Bug Something is broken. Auto assigns a BugZero manager. labels Jul 28, 2023

melvin-bot bot assigned garrettmknight Jul 28, 2023

kbecciv removed the Needs Reproduction Reproducible steps needed label Jul 28, 2023

garrettmknight added the External Added to denote the issue can be worked on by a contributor label Jul 28, 2023

melvin-bot bot changed the title ~~Web - The error doesn't clear immediately after reloading the contact method verify page~~ [$1000] Web - The error doesn't clear immediately after reloading the contact method verify page Jul 28, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jul 28, 2023

melvin-bot bot assigned mananjadhav Jul 28, 2023

melvin-bot bot assigned johnmlee101 Jul 28, 2023

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Aug 17, 2023

mvtglobally mentioned this issue Aug 23, 2023

Deploy Checklist: New Expensify 2023-08-21 #25625

Closed

garrettmknight added Awaiting Payment Auto-added when associated PR is deployed to production and removed Reviewing Has a PR in review labels Sep 4, 2023

garrettmknight changed the title ~~[$1000] Web - The error doesn't clear immediately after reloading the contact method verify page~~ [Awaiting Payment][$1000] Web - The error doesn't clear immediately after reloading the contact method verify page Sep 4, 2023

garrettmknight added Daily KSv2 and removed Weekly KSv2 labels Sep 4, 2023

melvin-bot bot added Overdue Daily KSv2 and removed Daily KSv2 Overdue labels Sep 10, 2023

melvin-bot bot added the Overdue label Sep 20, 2023

garrettmknight closed this as completed Sep 21, 2023

melvin-bot bot removed the Overdue label Sep 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Awaiting Payment][$1000] Web - The error doesn't clear immediately after reloading the contact method verify page #23813

[Awaiting Payment][$1000] Web - The error doesn't clear immediately after reloading the contact method verify page #23813

kbecciv commented Jul 28, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jul 28, 2023

melvin-bot bot commented Jul 28, 2023 •

edited by garrettmknight

Loading

StevenKKC commented Jul 28, 2023 •

edited

Loading

garrettmknight commented Jul 28, 2023

melvin-bot bot commented Jul 28, 2023

melvin-bot bot commented Jul 28, 2023

melvin-bot bot commented Jul 28, 2023

mananjadhav commented Jul 28, 2023 •

edited

Loading

melvin-bot bot commented Jul 28, 2023

DreamSoft0888 commented Jul 29, 2023

melvin-bot bot commented Jul 29, 2023

DreamSoft0888 commented Jul 29, 2023

dukenv0307 commented Jul 29, 2023 •

edited

Loading

rahatcse5bu commented Jul 29, 2023

melvin-bot bot commented Jul 29, 2023

dukenv0307 commented Jul 29, 2023 •

edited

Loading

DreamSoft0888 commented Jul 29, 2023

melvin-bot bot commented Jul 29, 2023

codewithwaheed commented Jul 29, 2023

melvin-bot bot commented Jul 29, 2023

melvin-bot bot commented Aug 17, 2023

mananjadhav commented Aug 25, 2023

mananjadhav commented Aug 31, 2023

garrettmknight commented Sep 4, 2023

garrettmknight commented Sep 4, 2023

garrettmknight commented Sep 4, 2023 •

edited

Loading

JmillsExpensify commented Sep 10, 2023

mananjadhav commented Sep 12, 2023

garrettmknight commented Sep 14, 2023

mananjadhav commented Sep 17, 2023

garrettmknight commented Sep 21, 2023

[Awaiting Payment][$1000] Web - The error doesn't clear immediately after reloading the contact method verify page #23813

[Awaiting Payment][$1000] Web - The error doesn't clear immediately after reloading the contact method verify page #23813

Comments

kbecciv commented Jul 28, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Jul 28, 2023

melvin-bot bot commented Jul 28, 2023 • edited by garrettmknight Loading

Bug0 Triage Checklist (Main S/O)

StevenKKC commented Jul 28, 2023 • 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 alternative solutions did you explore? (Optional)

garrettmknight commented Jul 28, 2023

melvin-bot bot commented Jul 28, 2023

melvin-bot bot commented Jul 28, 2023

melvin-bot bot commented Jul 28, 2023

mananjadhav commented Jul 28, 2023 • edited Loading

melvin-bot bot commented Jul 28, 2023

DreamSoft0888 commented Jul 29, 2023

melvin-bot bot commented Jul 29, 2023

DreamSoft0888 commented Jul 29, 2023

dukenv0307 commented Jul 29, 2023 • 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 alternative solutions did you explore? (Optional)

rahatcse5bu commented Jul 29, 2023

melvin-bot bot commented Jul 29, 2023

dukenv0307 commented Jul 29, 2023 • edited Loading

DreamSoft0888 commented Jul 29, 2023

melvin-bot bot commented Jul 29, 2023

codewithwaheed commented Jul 29, 2023

melvin-bot bot commented Jul 29, 2023

melvin-bot bot commented Aug 17, 2023

mananjadhav commented Aug 25, 2023

mananjadhav commented Aug 31, 2023

garrettmknight commented Sep 4, 2023

garrettmknight commented Sep 4, 2023

garrettmknight commented Sep 4, 2023 • edited Loading

JmillsExpensify commented Sep 10, 2023

mananjadhav commented Sep 12, 2023

garrettmknight commented Sep 14, 2023

mananjadhav commented Sep 17, 2023

garrettmknight commented Sep 21, 2023

kbecciv commented Jul 28, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jul 28, 2023 •

edited by garrettmknight

Loading

StevenKKC commented Jul 28, 2023 •

edited

Loading

mananjadhav commented Jul 28, 2023 •

edited

Loading

dukenv0307 commented Jul 29, 2023 •

edited

Loading

dukenv0307 commented Jul 29, 2023 •

edited

Loading

garrettmknight commented Sep 4, 2023 •

edited

Loading