[$250] [Hold on #26048] Contact methods - Delayed display of "Hmm... it's not here" message when changing email from URL

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

---

Action Performed:

1. Navigate to Settings > Profile > Contact methods
2. Click on "New contact method."
3. Enter the email address and click on "Add."
4. Click on the newly added contact method
5. Change the email address from the URL and press enter

Expected Result:

Upon refreshing the page, the "Hmm... it's not here" message should be displayed instantly without any delay

Actual Result:

There is a delay in displaying the "Hmm... it's not here" message after changing the email from the URL

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• Windows / Chrome
• MacOS / Desktop

Version Number: 1.3.57-5

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

screen-recording-2023-08-19-at-110003-pm_VRwVa4Dy.mp4

Recording.6025.1.mp4

Expensify/Expensify Issue URL:

Issue reported by: @ayazhussain79

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692468860518189

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01354b1630f20ce5d8
• Upwork Job ID: 1704532530506207232
• Last Price Increase: 2023-09-20

[melvin-bot]

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

[melvin-bot]

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

[c3024]

Proposal

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

Changing the email in url in contact details page shows the magic code page for some time before showing the not found page.

What is the root cause of that problem?

We should show loading indicator while we fetch data to check whether the email in url is added as a validated or not validated secondary contact or never added a secondary contact at all.
After checking, we need to show

1. Magic Code Input if it is an unvalidated secondary contact
2. "Set as default" and "Remove" options if it is a validated secondary contact.
3. "Not Found Page" if the email in the url was never added as a secondary contact.
   When we change the email in url and click go, this new email from url is added to the loginList
   So we should show loading indicator till we show the not found page.
   In this case, we are not showing loading page while fetching because when we access through deep link, this.props.loginList almost immediately contains the email in url and this is not empty.
   So the line here even though the data is loading does not show loading indicator.
   

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

   Line 208 in c029dc5

   if (this.props.isLoadingReportData && _.isEmpty(this.props.loginList)) {

   
   It directly shows the magic code input because till the data is fetched.
   

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

   Line 245 in c029dc5

   {!loginData.validatedDate && !isFailedAddContactMethod && (

   
   Once it fetches the contacts data, the login list does not contain this email in url and this here shows not found page
   

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

   Line 213 in c029dc5

   if (!contactMethod || !loginData) {

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

When we access the contact details page from deep link, the login list almost immediately contains this email from url so this check

_.isEmpty(this.props.loginList)

is true for a very brief and then becomes false here

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

Line 208 in c029dc5

if (this.props.isLoadingReportData && _.isEmpty(this.props.loginList)) {

When we access the contact method details page from deeplink, the email is added to the this.props.loginList almost immediately and value (for this email key) contains only a field validateCodeSent where as the key-values received from backend contains a field called validatedDate for all keys. So we change the condition in RCA to

       if (_.isEmpty(this.props.loginList || (this.props.isLoadingReportData && this.props.loginList[contactMethod] && !_.keys(this.props.loginList[contactMethod]).includes("validatedDate")) ) {
            return <FullscreenLoadingIndicator />;
        }

This now shows a loading indicator instead of magic code page till backend confirms the email in url is not one of the added secondary contacts and the not found page then appears. And no magic code page is shown.

What alternative solutions did you explore? (Optional)

We can just show FullScreenLoadingIndicator when the report data is loading simply

       if (this.props.isLoadingReportData) {
            return <FullscreenLoadingIndicator />;
        }

The disadvantage with this is that even when the contacts are available in the loginList already with validatedDate field, this shows loading indicator when data is being fetched but this is simpler and does not involve many switching between page components during rendering.

Result

noMagicCodeForUrlChange.mov

[hungvu193]

Proposal

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

Contact methods - Delayed display of "Hmm... it's not here" message when changing email from URL

What is the root cause of that problem?

I think problem came from here, where we tried to add non-existent contact method into our loginList

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

Lines 110 to 112 in d09a1b6

	componentDidMount() {
	User.resetContactMethodValidateCodeSentState(this.getContactMethod());
	}

App/src/libs/actions/User.js

Lines 267 to 273 in d09a1b6

	function resetContactMethodValidateCodeSentState(contactMethod) {
	Onyx.merge(ONYXKEYS.LOGIN_LIST, {
	[contactMethod]: {
	validateCodeSent: false,
	},
	});
	}

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

We can add a condition, if the contact method from route param is not a part of currentLogin list, we shouldn't call resetContactMethodValidateCodeSentState.

What alternative solutions did you explore? (Optional)

N/A

[sonialiap]

@michaelhaxhiu sounds like your issue may be to the same thing underlying #26048 and may be resolved once that one is fixed

[michaelhaxhiu]

Just catching up and I think you are correct! Should we consolidate these GH into 1, and make it 1 job in that case since it's the same RCA?

[michaelhaxhiu]

I just posted in #26048 to decide if we should close this or keep it open.

IMO:

• we can pay the bug bonus here, since it is a diff bug after all (that'll be addressed in one singular fix)
• we should hire @hungvu193 to deploy the fix via [HOLD for payment 2023-09-20] [$1000] Contact methods - Login with secondary contact details link displays magic code verify UI for sometime #26048