[HOLD for payment 2024-11-18] [QBD] Handle errors gracefully if the setup link cannot be obtained

[lakchote]

Related to #50216,

We should handle backend errors gracefully if the setup link cannot be obtained.

Otherwise an infinite loader will show:

[hoangzinh]

Hi @lakchote @ZhenjaHorbach what should we show on the page if the setup link cannot be obtained?

[hoangzinh]

Should it be

[ZhenjaHorbach]

Or something similar as for offline mode but with a different text

@Expensify/design
But I think we will need help from designers anyway !
What should we show on the QBD setup page if the setup link cannot be obtained

[shawnborton]

Some follow up questions to this:

We should handle backend errors gracefully if the setup link cannot be obtained.

What causes the error in the first place?

Can you retry? Is the retry likely to succeed? Or no?

[lakchote]

What causes the error in the first place?

Can you retry? Is the retry likely to succeed? Or no?

@shawnborton

It will occur if for some reason the Integration Server didn't return the setupUrl to setup QBD.

You can retry by going back and clicking on Connect again.

However, it'll likely won't succeed as it usually indicates a bigger issue from the server.

[dubielzyk-expensify]

I wonder if we could do something like this?

[lakchote]

I wonder if we could do something like this?

I love it! Clean and explanative. What do you think @shawnborton @dannymcclain?

[shawnborton]

That looks great to me, thanks Jon!

[dannymcclain]

Love it 🚀

[hoangzinh]

Cool. Could you give me the image or can you add it to this QBD Figma? @dubielzyk-expensify Thanks

[dannymcclain]

@hoangzinh should be available here: App/assets/images/product-illustrations/broken-magnifying-glass.svg

[hoangzinh]

Hi @lakchote do you have any idea how to reproduce this issue locally?

[hoangzinh]

@hoangzinh should be available here: App/assets/images/product-illustrations/broken-magnifying-glass.svg

Hi @dannymcclain can I request another broken-magnifying-glass.svg? The current broken-magnifying-glass.svg has a lot of redundant spaces on the right. I have trouble centralizing it in the middle.

[dannymcclain]

Hmm, that's weird. I'm not seeing that bounding box issue in the current SVG... But I've exported another one just in case. You may want to double-check that one you're using though—we've definitely used this SVG in other places in the app without issue.

Broken Magnifying Glass.svg.zip

Also looks like according to Jon's mock in Figma it should be sized to be 120px tall (with a width around ~83px).

[hoangzinh]

Thank you @dannymcclain

[hoangzinh]

Update: still working on PR here #51850

[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 9.0.59-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [QBD] Handle errors gracefully if the setup link cannot be obtained #51850

If no regressions arise, payment will be issued on 2024-11-18. 🎊

For reference, here are some details about the assignees on this issue:

• @hoangzinh requires payment through NewDot Manual Requests
• @ZhenjaHorbach requires payment (Needs manual offer from BZ)

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @isabelastisser you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @hoangzinh owed $250 via NewDot
• ROLE: @ZhenjaHorbach paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@isabelastisser)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[isabelastisser]

Payment Summary

Upwork Job

Reviewer: @hoangzinh owed $250 via NewDot PENDING.
PR: @ZhenjaHorbach paid $250 via Upwork (LINK)

[isabelastisser]

All set!

[garrettmknight]

$250 approved for @hoangzinh