[$250] 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 [email protected] 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): [email protected] 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?

• [x] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/1e35f089-7307-4c4a-8db3-f097d7ef743a

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-03

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot[bot]]

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

[github-actions[bot]]

:wave: 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[bot]]

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

[melvin-bot[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[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.

https://github.com/Expensify/App/blob/cdc52ea014526834eaad6d0d39377f89ee06fb6a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx#L56-L62

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. https://github.com/Expensify/App/blob/e157c1a6347ac6bb4edbc4ef495aea880f9a1c9e/src/pages/settings/Profile/Contacts/ValidateContactActionPage.tsx#L35-L38

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. https://github.com/Expensify/App/blob/8f0f140df7f740b48a184014755aae88727c686f/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx#L93-L95

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

https://github.com/Expensify/App/blob/ec8a5d974d18dea142da2c27e4a8a27ce0a70794/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx#L56-L62

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

https://github.com/Expensify/App/blob/ec8a5d974d18dea142da2c27e4a8a27ce0a70794/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx#L64

• 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

https://github.com/Expensify/App/blob/ec8a5d974d18dea142da2c27e4a8a27ce0a70794/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx#L56-L62

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

[melvin-bot[bot]]

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

[parasharrajat]

@Krishna2323 Thoughts?

[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 https://github.com/Expensify/App/issues/48498#issuecomment-2328682962 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.

https://github.com/user-attachments/assets/9a70b6c7-43c0-486b-bd95-f9be35b0b380

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

https://github.com/user-attachments/assets/9a70b6c7-43c0-486b-bd95-f9be35b0b380

[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[bot]]

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