[$250] Onboarding - Onboarding Modal opens when returning back online

[IuliiaHerets]

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: v9.0.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Sign in with a new user
2. On the Onboarding modal turn off the internet
3. Go through the onboarding flow and click continue
4. Refresh the page to kill the app
5. Go back online and reload

Expected Result:

Reloading after going back online should not bring the Onboarding flow back

Actual Result:

Reloading after going back online bring back the Onboarding flow for a moment

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6608836_1726747731805.Onboarding_01.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021836961456209861456
• Upwork Job ID: 1836961456209861456
• Last Price Increase: 2024-09-20
• Automatic offers:
• allgandalf | Contributor | 104080039

Issue Owner

Current Issue Owner: @eVoloshchak

[melvin-bot]

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

[IuliiaHerets]

@jliexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[jliexpensify]

Able to repro this one

[melvin-bot]

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

[melvin-bot]

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

[dominictb]

Proposal

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

Reloading after going back online bring back the Onboarding flow for a moment

What is the root cause of that problem?

When calling CompleteGuidedSetup API, we didn't set hasCompletedGuidedSetupFlow: true

App/src/libs/actions/Report.ts

Line 3692 in 6510ae4

API.write(WRITE_COMMANDS.COMPLETE_GUIDED_SETUP, parameters, {optimisticData, successData, failureData});

so when users reload, the onboarding flow will be shown again

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

set hasCompletedGuidedSetupFlow: true optimistically when calling CompleteGuidedSetup API. We should reset hasCompletedGuidedSetupFlow: false in failureData

What alternative solutions did you explore? (Optional)

[huult]

Proposal

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

Onboarding Modal opens when returning back online

What is the root cause of that problem?

CompleteGuidedSetup will be stored locally when there is no internet connection, and hasCompletedGuidedSetupFlow will not be updated because CompleteGuidedSetup has not been executed yet. Once the connection is restored, the condition checking hasCompletedGuidedSetupFlow will still return false until the CompleteGuidedSetup API is fully executed. As a result, the onboarding process will reappear because the condition to show onboarding is checked before CompleteGuidedSetup is completed.

App/src/libs/actions/Report.ts

Line 3692 in 00d2e32

API.write(WRITE_COMMANDS.COMPLETE_GUIDED_SETUP, parameters, {optimisticData, successData, failureData});

App/src/libs/hasCompletedGuidedSetupFlowSelector.ts

Line 10 in 00d2e32

return onboarding?.hasCompletedGuidedSetupFlow ?? true;

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

We need to add a condition for displaying onboarding. If there is a CompleteGuidedSetup pending for the account, onboarding will not be displayed. By using this method, we can avoid the scenario where, if the CompleteGuidedSetup API call encounters an error, onboarding will still follow the correct flow

// .src/libs/hasCompletedGuidedSetupFlowSelector.ts#L6
function hasCompletedGuidedSetupFlowSelector(onboarding: OnyxValue<typeof ONYXKEYS.NVP_ONBOARDING>): boolean {
    // onboarding is an array for old accounts and accounts created from olddot
    if (Array.isArray(onboarding)) {
        return true;
    }

+    const persistedRequests = PersistedRequests.getAll();
+    const hasPendingCompleteGuidedSetupRequest = persistedRequests.some((item) => item.command === WRITE_COMMANDS.COMPLETE_GUIDED_SETUP);

+    // If there's a pending request to complete guided setup, return false
+    if (hasPendingCompleteGuidedSetupRequest) {
+        return false;
+    }

    return onboarding?.hasCompletedGuidedSetupFlow ?? true;
}

POC

Screen.Recording.2024-09-20.at.14.57.18.mp4

[CyberAndrii]

This is a regression from #49263 and was fixed in #49516 by removing the hasCompletedGuidedSetupFlowSelector call. Ideally we should still revert #49263 to prevent bugs in other places

[melvin-bot]

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[jliexpensify]

Thanks @CyberAndrii - have assigned Vit and @allgandalf to have a look at this and confirm it's a regression fornm their PR.

[mountiny]

I think this is minor, the original bug the Pr was fixing was much more critical

@blazejkustra would you be able to follow up on this one and see why the modal is opening for a bit? Thanks!

[CyberAndrii]

To clarify, this issue was already fixed by #49516. It's just that #49263 changed the default value in the hasCompletedGuidedSetupFlowSelector function from false to true. Then the follow-up PR fixed the initial issue using a completely different appoach (to avoid bugs like this) that no longer uses hasCompletedGuidedSetupFlowSelector. And since it's no longer used, it would make sense to revert the default value to what it was previously.

[huult]

We can use my proposal to fix this issue because it solves the problem without affecting other flows.

[blazejkustra]

Update: I have a working fix for this here, but I'm struggling to make the exit animation of the Modal to work correctly, I'm sure I'll update on the progress rather quickly

[blazejkustra]

I'm sure I'll update on the progress rather quickly

Famous last words 💀

Update: We investigated this with @adamgrzybowski, as it is deeply connected to navigation logic, there are several issues with the current setup of onboarding (redundant logic, weird flows etc)

• hasCompletedGuidedSetupFlow is not optimistically updated when onboarding is finished
• onboardingFlow is initiated from BottomTabBar.tsx component (❓❗️)
• For some reason NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR is always mounted, while nested screens are not always accessible
• There is a sophisticated logic inside OnboardingModalNavigator.tsx to navigate back once the onboarding is finished

All that being said we come up with a solution that refactors a lot of code, and could potentially affect HybridApp - that's why first thing in the morning I'll check with the HybridApp team to make sure we don't introduce any new bugs.

cc @mountiny @allgandalf

[mountiny]

@blazejkustra thanks for the update, how its going?

[blazejkustra]

I'll update shortly, we are testing the refactor on HybridApp with @mateuuszzzzz

[blazejkustra]

Update: I added an explanation to the draft PR here

After a long discussion with both @adamgrzybowski (navigation) and @mateuuszzzzz (hybrid), we think the onboarding flow is unnecessary complicated and some of the logic is redundant. This makes all work connected to the onboarding very tedious and full of edge cases (especially on HybridApp).

I think we should refactor the onboarding logic as part of this issue, because it's not trivial how to fix the offline behaviour without breaking new things. You can check the draft PR to see the necessary changes, we are also expecting some changes in the hybrid app as we discovered some hidden bugs.

Thoughts? @mountiny @allgandalf @jliexpensify

[blazejkustra]

Alternative approach would be to try to fix this issue without the big refactor, but as mentioned above it could prove complicated due to OnboardingNavigator conditional rendering (I have a working approach but the onboarding modal disappearing animation is cut off)

[blazejkustra]

Do you think we should proceed with the refactor? @mountiny @jliexpensify

[allgandalf]

Do you think we should proceed with the refactor? @mountiny @jliexpensify

Complete onboarding refactor you mean?

[blazejkustra]

Yes, but it's not "complete" onboarding refactor, as the onboarding modals are the same - just the logic is brought together into one place + it's simplified.

[allgandalf]

Yes, but it's not "complete" onboarding refactor, as the onboarding modals are the same - just the logic is brought together into one place + it's simplified.

Sounds cool to me, but eager to hear what @mountiny has to say

[mountiny]

@blazejkustra lets do it right and properly so if that requires a bigger refactor, lets do that

[blazejkustra]

Awesome, I'm excited to do it right 🤩 @allgandalf mind taking a first look at the PR?

[allgandalf]

I will look at it tomorrow morning afresh!

[jliexpensify]

Not overdue!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[allgandalf]

double mention @blazejkustra 😆