Update QBO/Xero connection to use standard external link pattern

[joekaufmanexpensify]

Problem

Coming from here, the QBO/Xero connection flows don't use the standard external linking pattern we recently decided on. This hinders a consistent product experience to the customer throughout the application.

Solution

Update the QBO/Xero connection UI use the new standard external linking pattern. This means instead of linking out to a new browser tab to connect to QBO/Xero, we'll open the QBO/Xero connection as a new small-centered window overlaying New Expensify, and display a RHP page that tells you to check your browser window, and offers the opportunity to open another connection window (if the first one didn't open), similar to what we're planning with cards.

Here's an example of what we'd be trying to do with QBO/Xero:

Vs what we do now:

https://github.com/user-attachments/assets/ae09e05e-9599-4c86-a1ee-d91b0314d2ac

cc @Expensify/design @trjExpensify

[joekaufmanexpensify]

Leaving this in planning until we finish the card implementation. Will make this external then!

[dubielzyk-expensify]

Like this?

Btw, this would only work on desktop right cause on mobile it has to open the link in the app of the external browser?

[joekaufmanexpensify]

Looks solid. Though I think we still want to show the RHP for consistency, no?

Btw, this would only work on desktop right cause on mobile it has to open the link in the app of the external browser?

Yep, this is only for web/desktop. We wouldn't change the behavior for mobile because we don't link out to the mobile browser or anything like that.

[joekaufmanexpensify]

There is actually a slight difference between what we were planning for cards on mobile and the accounting integration behavior here on mobile now. Discussing here.

[dubielzyk-expensify]

Updated mocks for desktop:

[joekaufmanexpensify]

Looks great to me!

[dubielzyk-expensify]

Sweet. Let me know if you need any changes down the line 👍