[$325] Android - Profile - Add contact method flow resumes at magic code page after killing app

[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.28-1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify app
2. Go to Account settings
3. Go to Profile > Contact methods
4. Tap New contact method
5. Enter email > Next
6. On magic code page, kill the app
7. Relaunch the app
8. Go to Account settings
9. Go to Profile > Contact methods
10. Tap New contact method

Expected Result:

Add contact method flow will restart. App will open new contact method input page

Actual Result:

Add contact method flow resumes at magic code page instead of new contact method input page after killing app

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6592010_1725385884722.1725384996537_Screen_Recording_20240904_003949_New_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017a6ead314da0c17b
• Upwork Job ID: 1831082861275959824
• Last Price Increase: 2024-09-20

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

Triggered auto assignment to @roryabraham (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[roryabraham]

NAB, demoting.

[roryabraham]

For posterity, this was likely introduced in this checklist.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-09-03 22:23:02 UTC.

Proposal


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

Android - Profile - Add contact method flow resumes at magic code page after killing app

What is the root cause of that problem?

The NewContactMethodPage redirects to SETTINGS_CONTACT_METHOD_VALIDATE_ACTION when pendingContactAction?.validateCodeSent is true. Once the code is sent, pendingContactAction?.validateCodeSent is set to true. Additionally, when the app is closed, the ONYX data is not cleared.

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

Lines 56 to 62 in cdc52ea

	useEffect(() => {
	if (!pendingContactAction?.validateCodeSent) {
	return;
	}
	Navigation.navigate(ROUTES.SETINGS_CONTACT_METHOD_VALIDATE_ACTION);
	}, [pendingContactAction]);

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


• We should add a useEffect in the ContactMethodsPage which will call User.clearUnvalidatedNewContactMethodAction(), this will clear the ONYX data related to PENDING_CONTACT_ACTION. Or it can be added in AuthScreens.tsx

    useEffect(() => {
        User.clearUnvalidatedNewContactMethodAction();
    }, []);

• The same method is called on the ValidateContactActionPage when we press back button.
  

  App/src/pages/settings/Profile/Contacts/ValidateContactActionPage.tsx

  Lines 35 to 38 in e157c1a

  	const onBackButtonPress = () => {
  	User.clearUnvalidatedNewContactMethodAction();
  	Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.route);
  	};

What alternative solutions did you explore? (Optional)

We can add a useEffect cleanup function to call User.clearUnvalidatedNewContactMethodAction(); when component unmounts.

What alternative solutions did you explore? (Optional) 2

• We can call User.clearUnvalidatedNewContactMethodAction() when New contact method button is pressed.
  

  App/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx

  Lines 93 to 95 in 8f0f140

  	const onNewContactMethodButtonPress = useCallback(() => {
  	Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));
  	}, [navigateBackTo]);

Result

[Krishna2323]

Proposal Updated

• Added alternative 2

[nkdengineer]

Proposal

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

Add contact method flow resumes at magic code page instead of new contact method input page after killing app

What is the root cause of that problem?

When we kill the app the cleanup function here isn't triggered then if we requested the magic code before killing the App, this useEffect will redirect the user to the magic code page

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

Lines 56 to 62 in ec8a5d9

	useEffect(() => {
	if (!pendingContactAction?.validateCodeSent) {
	return;
	}
	Navigation.navigate(ROUTES.SETINGS_CONTACT_METHOD_VALIDATE_ACTION);
	}, [pendingContactAction]);

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

• If it's expected that we want to continue the current step after we kill the app or close the validate code page without clicking on back button we can remove this cleanup function

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

Line 64 in ec8a5d9

useEffect(() => () => User.clearUnvalidatedNewContactMethodAction(), []);

• Otherwise, I think we can remove this useEffect because I don't see any case that we need this logic.

OPTIONAL: we can also change the cleanup function here to clear the pending contact method whenever the NewContactMethodPage is mounted. It also can be unnecessary because when we submit this form the pending contact method data is also reset

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

Lines 56 to 62 in ec8a5d9

	useEffect(() => {
	if (!pendingContactAction?.validateCodeSent) {
	return;
	}
	Navigation.navigate(ROUTES.SETINGS_CONTACT_METHOD_VALIDATE_ACTION);
	}, [pendingContactAction]);

What alternative solutions did you explore? (Optional)

[parasharrajat]

Analyzing the correct behaviour...

[parasharrajat]

IMO the behaviour should be as follows:

1. when the user refreshes the validate code page, it lands on the same validate input given that the validation flow was in progress.
2. When user press back button or closes the flow via dismiss the modal or etc, the flow cancels. Clicking new contact should initiate the new flow.

What do you think @Krishna2323 @nkdengineer ?

[Krishna2323]

@parasharrajat, yep, that sounds accurate to me.

I think my alternative solution 2 will fix the issue with the expected behaviour. Then we can also remove this and this code.

[roryabraham]

Agree with @parasharrajat's analysis of the expected behavior

[parasharrajat]

Let's go with @Krishna2323's alternative solution 2 for this, then. let's keep the cleanup login on the back button press.

We might have to handle a case.

1. User on validate contact page.
2. He dismisses the modal.
   3 Now landing on new contact page directly should not show validate code page as user dismissed it.

@Krishna2323 thoughts.

[bfitzexpensify]

I am heading out of office until September 21st, so assigning a buddy to watch over this in my absence.

Current status: working through proposals

[Krishna2323]

@parasharrajat, I think dismissing the modal will clear the data and the validate code page won't be shown when directly visiting. I agree to keep the clear cleanup login.

[parasharrajat]

OK. What about the page refresh? If we keep the cleanup logic as it is now, How will it work in that case?

Can you please explain the behaviour of all cases as mentioned in #48498 (comment) after applying your solution?

[Krishna2323]

Full Page Refresh (F5 or Browser Refresh Button): In this case, the page is completely reloaded, and the React component tree is destroyed. However, React will not get a chance to run the cleanup function because the entire page is reloaded by the browser, effectively bypassing React's lifecycle methods.

1. when the user refreshes the validate code page, it lands on the same validate input given that the validation flow was in progress.

@parasharrajat, according to the above point and my testing, the cleanup function will not run when we refresh the page, so we will land on the same validate code if we refresh.

2. When user press back button or closes the flow via dismiss the modal or etc, the flow cancels. Clicking new contact should initiate the new flow.

• If the user presses the back button or dismisses the modal, the flow will be canceled by calling User.clearUnvalidatedNewContactMethodAction();.
• When quitting the page during the contact method flow and starting the flow again, pressing the "New Contact" button will trigger User.clearUnvalidatedNewContactMethodAction(); and new flow will be initiated.

[parasharrajat]

the cleanup function will not run when we refresh the page, so we will land on the same validate code if we refresh.

Did you try it twice? Does this this work for each page refresh?

When quitting the page during the contact method flow and starting the flow again, pressing the "New Contact" button will trigger User.clearUnvalidatedNewContactMethodAction(); and new flow will be initiated.

What if user does not start the flow via new Contact Button, we do that directly via the URL. Will this work?

[Krishna2323]

Did you try it twice? Does this this work for each page refresh?

Yes, it will work.

What if user does not start the flow via new Contact Button, we do that directly via the URL. Will this work?

I think we should show the validate code page in this case also.

Monosnap.screencast.2024-09-09.14-11-26.mp4

[parasharrajat]

What if user does not start the flow via new Contact Button, we do that directly via the URL. Will this work?

It should be as follows:

1. A user initiates a flow and does not close it either via a back button or dismissing the modal, navigating to that page via refresh or directly opens the validate code page.
2. If user cancels the flow by any action, navigating to that page will show a fresh flow.

Does that make sense?

[Krishna2323]

@parasharrajat, sorry I still couldn't understand what do you mean.

Are you trying to say that we want to initiate a new flow when the user closes the web page on the validate code page and opens it again with the url?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[parasharrajat]

I am saying that we initiate the new flow when the user closes the page via a back button or dismisses the modal (Any other actions that indicate that the user has closed the flow themselves). But page refresh is not one of them. Refreshing the page continues the same flow.

[Krishna2323]

Refreshing the page continues the same flow.

I agree with that and that's what I tried to show in the video below. Refreshing the page continues the same flow.

Monosnap.screencast.2024-09-09.14-11-26.mp4

[parasharrajat]

that's good. Now what happens if you close the modal by clicking outside the modal and then directly open the URL?

[melvin-bot]

@CortneyOfstad, @parasharrajat, @bfitzexpensify, @roryabraham Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[parasharrajat]

@Krishna2323 Any thoughts?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@CortneyOfstad @parasharrajat @bfitzexpensify @roryabraham this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[CortneyOfstad]

@Krishna2323 — bump @parasharrajat's comment above — thanks!

[melvin-bot]

@CortneyOfstad, @parasharrajat, @bfitzexpensify, @roryabraham Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Upwork job price has been updated to $325

[rushatgabhane]

regression from #48541 (comment) @hungvu193 @getusha

[hungvu193]

Thanks for the ping @rushatgabhane.
I remembered I had already removed the usage of ValidateContactActionPage in this PR (#48628).
We switched to using ValdiateCodeModal and using local state to handle modal state so I think this issue is fixed.

[hungvu193]

I can confirm it's fixed. We can close this issue:

Screen.Recording.2024-09-20.at.09.25.51.mov