Add quick setup methods for recommended payment gateways

[joshuatf]

Adds quick setup methods for the payment recommendations setup.

Related PR - woocommerce/woocommerce-admin#7044

---

Description

This PR SlotFills the payment task in the WooCommerce onboarding task list. In brief, this PR does the following:

• Adds a webpack build process to the ppcp-onboarding module.
• Adds a script to SlotFill the payment task in WooCommerce onboarding.
• Updates the gateway's needs_setup check.
• Register (but not enqueue) scripts so we can expose and enqueue them dynamically via the REST API.

I apologize for the size of this PR; most if it is boilerplate and the component itself has been copied from WooCommerce Admin with a bit of refactoring.

I tried to follow this repo's conventions as closely as possible, but please let me know if there are changes that would be more in line with the code in this repo.

Steps to test:

1. Install and activate this plugin in your plugins/ directory matching the wp.org slug. woocommerce-paypal-payments
2. Build out the modules npm run build:dev;
3. Install and activate the development version of WooCommerce Admin ( git clone https://github.com/woocommerce/woocommerce-admin.git && cd woocommerce-admin && composer install && npm i && npm run build ).
4. Make sure India is not selected as the store country under WooCommerce general settings and CBD is not selected as an industry during onboarding.
5. Navigate to the PayPal gateway in the payments task /wp-admin/admin.php?page=wc-admin&task=payments
6. Check that the "Connect" button works and opens the PayPal connection flow. (Note the return to WooCommerce Admin still needs tweaking).
7. Throw an error in the /onboarding/get-params endpoint to force the manual connection form.
8. Fill out the manual connection form and update settings.
9. Make sure that the PayPal gateway is moved to the "Enabled payment gateways" section.
10. Make sure that settings are persisted on when visiting the Payment settings under WooCommerce->Settings. (I'm getting a bearer token error on the settings page when setting bad credentials- is this an error in setting or should further sanitization happen in the controller?)

Changelog entry

Enter a summary of all changes on this Pull Request. This will appear in the changelog if accepted.

Add SlotFill for WooCommerce Admin onboarding payment task.

[jorgeatorres]

@joshuatf: Not formally reviewing this, but please keep in mind that the correct capitalization is "PayPal" (not "Paypal") 😸.

[louwie17]

Adding this here for reference, as I already mentioned it in Slack:
Currently getting an error when initializing the task-list-fill.js file:

react-dom.js?ver=16.13.1:24100 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `render`.

[joshuatf]

Thanks for taking a look at this, @louwie17! The SlotFill component names and package itself were recently changed. Updated this in 44e5672.

This worked for me as-is after rebuilding the assets and should be fine, but if it doesn't work still, it may require a yarn link to link the @woocommerce/onboarding package.

[louwie17]

Thanks for taking a look at this, @louwie17! The SlotFill component names and package itself were recently changed. Updated this in 44e5672.

This worked for me as-is after rebuilding the assets and should be fine, but if it doesn't work still, it may require a yarn link to link the @woocommerce/onboarding package.

Thanks for the quick fix @joshuatf, it tested well this time 👍

[joelclimbsthings]

Just a note here that the Slot names seemed to have changed again. WooPaymentGatewayConnect has become WooPaymentGatewayConfigure.

[joshuatf]

@joelclimbsthings @louwie17 This has been rebased and had a significant amount of changes. It could use another review to verify things are still working as expected.

I would also like a review from someone on @woocommerce/axiom to verify that building the settings from resources does not break anything.

[leonardola]

I tested this on a completely new install:

• When testing the manual connection form I disconnected the PayPal account but did not disable the payment method. After throwing an exception here and accessing /wp-admin/admin.php?page=wc-admin&task=payments&id=ppcp-gateway I filled the form and clicked on proceed. Nothing happens but the credentials are saved. The flow works ok if I disable the gateway before using the manual connection. Maybe we should disable the payment method after disconnecting? This can be treated in another issue/PR if we choose to tackle that problem.

• After trying to connect with the automated connection I get redirected to /wp-admin/admin.php?page=wc-settings&tab=checkout&section=ppcp-gateway with an error telling me that I should try again. If I try again it works but the payment method is not enabled automatically.

• If I add invalid credentials on the manual form no error is shown and I get redirected to WooCommerce > Home. Maybe we should test if the connection is successful here?

I would also like a review from someone on @woocommerce/axiom to verify that building the settings from resources does not break anything.

What do you mean about building the settings from resources?

[leonardola]

@joshuatf Any news on this PR?