[$250] Onboarding - Infinite loop in onboarding modal when coming from OD via Support

lanitochka17 commented 1 day ago

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.54 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5121161 Issue reported by: Applause - Internal Team

Action Performed:

Go to https://staging.expensify.com/
Get started with “Organize my own expenses” option
Verify you redirect to NewDot and Onboarding modal appears
Click on "Chat and split expenses with friends" option on the Onboarding modal
Enter user name and click Continue button

Expected Result:

The user can complete the onboarding flow and is brought to the NewDot concierge chat

Actual Result:

The user remains stuck in an infinite loop in the "What do you want to do today?" modal when he chooses the "Chat and split expenses with friends" option. By selecting any other option, for instance, "Get paid back by my employer" the loop ends.

Workaround:

Unknown

Platforms:

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

[ ] Android: Standalone
[ ] Android: HybridApp
[ ] Android: mWeb Chrome
[ ] iOS: Standalone
[ ] iOS: HybridApp
[ ] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/aafc47b6-edf6-419b-b02e-81774d5959ff

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021850366174167695381
Upwork Job ID: 1850366174167695381
Last Price Increase: 2024-10-27

Issue Owner

Current Issue Owner: @fedirjh

melvin-bot[bot] commented 1 day ago

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.

lanitochka17 commented 1 day ago

@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

NJ-2020 commented 1 day ago

Edited by proposal-police: This proposal was edited at 2024-10-26 04:14:21 UTC.

Proposal

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

Onboarding - Infinite loop in onboarding modal when coming from OD via Support

What is the root cause of that problem?

When we navigate to concierge via support, the concierge chat doesn't exist yet so we will create new optimistic chat and generator new report id for the concierge chat https://github.com/Expensify/App/blob/9508b1740083716708c3e6dd4cbfaf90254e7a98/src/libs/actions/Report.ts#L1025-L1035 So when we refresh the page or navigate to concierge chat again via support (like in the video), onboarding modal show's up and when completing the onboarding the onboarding show's up again and causes infinite loop

It's because the BE returns error saying invalid data, because we pass invalid report id which is optimistic concierge report id that we just created for the targetChatReport for introduction message and text message https://github.com/Expensify/App/blob/9508b1740083716708c3e6dd4cbfaf90254e7a98/src/libs/actions/Report.ts#L3341-L3348

We get targetChatReportID for the concierge report id by using ReportUtils.getChatByParticipants function and pass the user and concierge participants for the participants value

And the getChatByParticipants function will return the first report chat which is the optimistic report chat

But in this case why the optimistic chat report doesn't get removed? even we handle it right here and the BE handling correctly returning the preexistingReportID when the optimistic report chat is opened ... https://github.com/Expensify/App/blob/9508b1740083716708c3e6dd4cbfaf90254e7a98/src/libs/actions/Report.ts#L1369-L1376

It's because almost every API write requests the onyx updates will be queued, so first OpenApp API command get called and the onyx updates get flush which will apply the onyx updates from BE to Onyx, and when it's done applying it will clear the queuedOnyxUpdates https://github.com/Expensify/App/blob/9508b1740083716708c3e6dd4cbfaf90254e7a98/src/libs/actions/QueuedOnyxUpdates.ts#L11-L20 But when we still applying the data for OpenApp, the OpenReport get called for optimistic concierge report chat and returns the preexistingReportID onyx updates and will push the onyxUpdates to queuedOnyxUpdates variable

But as we can see in the above the queuedOnyxUpdates will get cleared after the Onyx applied the onyxUpdates for for OpenApp https://github.com/Expensify/App/blob/9508b1740083716708c3e6dd4cbfaf90254e7a98/src/libs/actions/QueuedOnyxUpdates.ts#L16-L20 so the OpenReport onyx updates response will get dismiss because it's got cleared after the Onyx applied the onyx updates for OpenApp

Demo:

https://github.com/user-attachments/assets/d7dc7de4-402e-41af-afab-abc972397a9a

As we can see in the video the OpenReport for concierge optimistic report chat onyx updates (preexistingReportID) got cleared inside queuedOnyxUpdates variable after Onyx applied the onyxUpdates for OpenApp

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

We should clear the queuedOnyxUpdates immediately without waiting until the Onyx applied the onyx updates for OpenApp

function flushQueue(): Promise<void> {
    const savedQueuedOnyxUpdates = queuedOnyxUpdates;
    queuedOnyxUpdates = [];
    return Onyx.update(savedQueuedOnyxUpdates);
}

And also there's another bug, when selecting the Chat and split option inside the onboarding flow, we get an error from BE saying Screenshot 2024-10-24 at 03 25 45 and causing infinite loop It's because we pass undefined value here if the completedTaskReportAction?.reportActionID is null https://github.com/Expensify/App/blob/8e13bcc227cbc330b80bdfdb6bd6c87b232dd6d1/src/libs/actions/Report.ts#L3427