feat: update Stripe Settings dashboard UI

[dkoo]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Updates our Stripe Settings dashboard page with a new "Payment Methods" page which lays the groundwork for showing UI for all payment gateways that Newspack fully supports (currently only Stripe and WooPayments). This PR only implements UI for Stripe, for now.

The new UI removes settings fields which are duplicative of settings in the Stripe payment gateway's own settings pages, in favor of a link out to those settings pages for configuration. It shows a "Connection status" indicator showing whether the payment gateway is not connected, partially connected (with API keys but not with the new OAuth method), or fully connected.

It also reorganizes the "Transaction fees" settings fields slightly, for better visual clarity since the UI is now more hierarchical than before.

How to test the changes in this Pull Request:

1. Disable the Stripe gateway plugin if it's already installed/activated on your site.
2. Check out this branch/rebuild
3. In the admin, visit Newspack > Reader Revenue
4. Confirm that the "Stripe Settings" tab is now called "Payment Methods"
5. Visit "Payment Methods" and confirm you see a plugin installer (since the plugin is deactivated):

6. Click "Activate" and confirm that the plugin installer component is replaced by a "Stripe" settings component. If you previously had Stripe connected, it will show as enabled already and with Connection Status and settings in the content area, otherwise it will just show a toggle switch to enable the payment gateway.

7. If your site was already connected to Stripe via API keys (previously the only option) but not OAuth, confirm that the Stripe component shows "Needs attention" under "Connection Status", along with our transaction fee settings:

Note: in this state (connected via API keys but not OAuth), the Stripe gateway will continue to work on the front-end for checkout, but this is not guaranteed to continue working beyond Oct. 29.

8. Delete your Stripe keys (via WP CLI: wp option delete woocommerce_stripe_settings). Refresh the page and confirm that "Connection Status" shows "Not connected" and that the transaction fee fields are no longer shown.

9. Click "Connect" and confirm that you're redirected to the Stripe payment gateway's settings page.
10. On this page you should see a dialogue to authenticate or reauthenticate with Stripe (the messaging may differ depending on whether you're already connected via API keys):

10. Complete the new authentication flow (if connecting to a test Stripe account, you should be able to click a "skip this flow" button to avoid having to enter real banking info during the flow).
11. After you're redirected back to the Stripe gateway settings page, return to our Newspack > Reader Revenue > Payment Methods page. Confirm that the Connection Status dialogue now shows that you're connected (in test mode) and that the transaction fees fields are once again available:

11. Smoke test the "Collect transaction fees" toggle and the related transaction fee fields to ensure they persist after saving and change the modal checkout UI for donations as expected. Note that in this PR, toggling OFF the "Collect transaction fees" toggle will hide the other settings fields.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1208504842518107

[dkoo]

Note: #3494 expands on this PR with a minor data refactor and UI update, plus adds full support for WooPayments in addition to the Stripe gateway. I opened as a separate PR so that we can handle code review in stages.

[dkoo]

Looks like we might need to retain some kind of button to at least delete any stored Stripe API keys on the site. We've found that some sites experienced issues with the reauthentication flow if they already had Stripe API keys stored, but those keys were invalid for some reason (wrong account, expired, revoked, etc.). Resaving valid keys OR clearing the invalid keys were the only ways we could clear the block for reconnecting. After further testing it appears this wasn't the case. If we run into errors after connecting via OAuth in the future, we may reconsider a feature to manually clear stored API keys.

[leogermani]

LGTM! All works

[github-actions]

Hey @dkoo, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to it to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

[matticbot]

🎉 This PR is included in version 5.8.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 5.8.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀