[HOLD for payment 2024-05-09] [Desktop] Create a page to show when we fail to close the window during the QBO Authentication flow

[aldo-expensify]

This is a follow up to this comment: #39219 (comment)

When the QBO flow finishes, the backend sends <script>window.close();</script> to close the tab we opened. The problem is this fails for Desktop and we get the following message in the console:

and we end up with a white screen.

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:
Reproducible in staging?:
Reproducible in production?:
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
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

Action Performed:

Break down in numbered steps

Expected Result:

Describe what you think should've happened

Actual Result:

Describe what actually happened

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

Triggered auto assignment to @isabelastisser (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 @shawnborton (Design), see these Stack Overflow questions for more details.

[aldo-expensify]

Added Design label so we can work on what we want as a solution. I see two improvements we can do:

1. Create page for the end of the authentication flow that will only be visible if the javascript snippet to close the window fails. This page should have some message like "Close this window and continue in the Expensify App", and
2. Try to redirect the user to the Desktop app using a deep link

This is how the authentication flow looks like when using the Desktop app:

Screen.Recording.2024-04-17.at.10.32.58.AM.mov

[aldo-expensify]

cc @s77rt @hayata-suenaga

Created this issue to decide how we want to handle the Desktop case

[shawnborton]

How about something like this?

We already have this kind of page template for the passwordless flows, so it should be easy to implement (famous last words).

cc @Expensify/design for thoughts too, Figma is here

[aldo-expensify]

@shawnborton that looks great to me! I think we can just use exactly the same.

[dannymcclain]

I love it!

so it should be easy to implement (famous last words)

😂

[aldo-expensify]

That page has not been implemented yet, we only have the design for it, right?

[shawnborton]

I think they already exist. Take a look at this PR here - it's adding animations to the pages that already exist, in case that is helpful at all.