Showing connection modal when oauth is needed

[wjrosa]

Fixes STRIPE-549
Figma nFI8jCCAQnd19PNwScqVU6-fi

Changes proposed in this Pull Request:

As requested by our design team, this PR enables the Stripe account connection to appear for merchants who did not connect via OAuth. It also adds a new notice on top of the settings page, like below:

The goal is to incentivise more merchants to connect via OAuth to improve security.

Testing instructions

• Checkout to this branch on your test environment (update/showing-connection-modal-when-oath-is-needed)
• Set up your store to behave as if it did not connect via OAuth. You can do it by either:
  -- Removing your keys directly in the database after connecting
  -- Forcing $stripe_connect->is_connected_via_oauth( 'live' ) to return false
• Confirm you can see the connect modal and the new notice on top, and that the notice looks like the preview above

---

• Covered with tests (or have a good reason not to test in description ☝️)
• Tested on mobile (or does not apply)

Changelog entry

• This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Comment

Comment

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)

[diegocurbelo]

The code looks good and it works as described in the PR.... but I think the UX might be confusing.

When the merchant is using manual/shared keys the gateway can still be used for purchases but settings are not available... maybe we can load the onboarding screen by default, but also keep the "Payment Methods" and "Settings" tabs?
Or change the `Connect an account" buttons to the same "Re-authenticate" button we use in the current CTA... and maybe the tittle, currently is "Get started with Stripe" (both both onboarding and re-connections)

BEFORE

AFTER

--

Also, there is a small error in the testing instructions:

Set up your store to behave as if it did not connect via OAuth. You can do it by either:
-- Removing your keys directly in the database after connecting

This actually disconnects the plugin (the gateway can't be used for purchases), to simulate a non-connected merchant, we need to remove the connection_type (or test_connection_type attr from the settings:

wp option patch delete woocommerce_stripe_settings test_connection_type

[wjrosa]

Thanks for the review, Diego!

.... but I think the UX might be confusing.

Yeah, I agree! @orcungogus could you please advise here?

Another suggestion would be to update the existing "Account details" block instead. Changing the "Configure connection" button to "Re-connect" and some other parts of it:

Also, there is a small error in the testing instructions:

Oops. Thanks for pointing that out