[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 [email protected] 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.

[aldo-expensify]

Thanks, that helps

[aldo-expensify]

do you know if there is a version of the laptop image that is animated? and if there is, where is the right place to get this?

[dubielzyk-expensify]

Uploaded the static one in the Slack thread here https://expensify.slack.com/archives/C03TME82F/p1713407507785619?thread_ts=1713403069.080199&cid=C03TME82F

If it's not already checked in. No idea if we have an animated version. I tried looking in Dropbox, but couldn't find anything. Maybe @shawnborton and @dannymcclain know.

[shawnborton]

Replied to the thread but also sharing here - let's use this updated version that has better spacing around the illustration content: emptystate__connectioncomplete.svg.zip

We unfortunately don't have an animated version of this, but I think that's okay.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.69-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Add "Connection Complete" page #40497

If no regressions arise, payment will be issued on 2024-05-09. 🎊

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@aldo-expensify] The PR that introduced the bug has been identified. Link to the PR:
• [@aldo-expensify] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@aldo-expensify] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@aldo-expensify] Determine if we should create a regression test for this bug.
• [@aldo-expensify] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[isabelastisser]

No payment is needed. @aldo-expensify, can I close this? Thanks!

[aldo-expensify]

No payment is needed. @aldo-expensify, can I close this? Thanks!

Yep!