Display tooltips on the connect screen if the oauth URL fails to load

[james-allan]

Fixes #3316

Changes proposed in this Pull Request:

This PR adds tooltips to the OAuth connect UI when the connect URLs fail being generated.

Live URL empty	Test URL empty

Testing instructions

ERROR STATES

1. Checkout this branch and run npm run build.
2. Backup your Stripe settings by renaming it or delete the woocommerce_stripe_settings option.
3. Change the script params generated in WC_Stripe_Settings_Controller::admin_scripts(). Change both stripe_oauth_url and stripe_test_oauth_url to ''.
4. Refresh the Stripe plugin settings and you should see the connect UI with the error message shown.
5. Restore the stripe_oauth_url or stripe_test_oauth_url in the script params.
6. If the Live or Test URL is empty, both buttons will load. The button that corresponds to the empty URL will be disabled and will display a tooltip on hover.

Live URL empty	Test URL empty

Important

To test the tooltips make sure you have 1 URL that is empty and the other URL should be the one that was generated.

---

• Covered with tests (or have a good reason not to test in description ☝️)
• Added changelog entry in both changelog.txt and readme.txt (or does not apply)
• Tested on mobile (or does not apply)

Post merge

• Added testing instructions to the Release Testing Instructions wiki page (or does not apply)
• Added the needs docs label (or does not apply)
• Included this PR in the Release Thread scope (or does not apply)

[james-allan]

@aheckler just a heads up that merging this PR will lead to some required docs changes.

The error notice points to this page: https://woocommerce.com/document/stripe/setup-and-configuration/connecting-to-stripe/.

There's no help section on that page so we might want to add one so we can direct the user to known cases that can lead to issues connecting to Stripe. eg Sites not served over https, localhost sites, api.woocommerce.com being down etc. What do are your thoughts on that? Does a help section make sense?

This PR adds the ability to connect to a test account and therefore changes the UI to include a new button. With that in mind general screenshot updates and added instructions on how to connect a test account would be good.

This PR is just in draft and may change over the course of code review. But I'll update the screenshots in this PR if things change. Let me know if you'd prefer a follow up later this week once it's merged.

[aheckler]

@james-allan Sorry for the delay, was AFK all last week. I've subscribed to this PR, so once it's merged, I'll know. However, is this still going in 8.6.0 given that the July 25 deadline mentioned in the release post has passed?

[james-allan]

However, is this still going in 8.6.0 given that the July 25 deadline mentioned in the release post has passed.

No this PR isn't likely to go out in the 8.6.0 release anymore. Since my last comment though things have changed a little. The ability to onboard to a test account has been added in a different PR and will be included in 8.6.0. There just won't be the tooltips if the URLs fail to load.

So, to clarify this is what the UI will look like on 8.6.0 releasing later this week:

---

If either connect URL fails to load, that button won't be shown.

Live URL fails - only test mode connect button	Test URL fails - only live mode connect button

---

If both URLS fail to load there's still the error message shown that points to this doc https://woocommerce.com/document/stripe/setup-and-configuration/connecting-to-stripe/.