Add quick setup methods for recommended payment gateways

.gitignore

@@ -5,6 +5,7 @@ node_modules
 .phpunit.result.cache
 yarn-error.log
 modules/ppcp-button/assets/*
+modules/ppcp-onboarding/assets/*
 modules/ppcp-wc-gateway/assets/*
 *.zip
 .env

modules/ppcp-onboarding/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+	extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ],
+	rules: {
+		// temporary conversion to warnings until the below are all handled.
+		'@wordpress/i18n-translator-comments': 'warn',
+		'@wordpress/valid-sprintf': 'warn',
+		'jsdoc/check-tag-names': [
+			'error',
+			{ definedTags: [ 'jest-environment' ] },
+		],
+	},
+};

modules/ppcp-onboarding/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "ppcp-onboarding",
+	"license": "GPL-3.0-or-later",
+	"version": "0.1.0",
+	"scripts": {
+		"build": "wp-scripts build",
+		"check-engines": "wp-scripts check-engines",
+		"check-licenses": "wp-scripts check-licenses",
+		"format:js": "wp-scripts format-js",
+		"lint:css": "wp-scripts lint-style",
+		"lint:js": "wp-scripts lint-js",
+		"lint:md:docs": "wp-scripts lint-md-docs",
+		"lint:md:js": "wp-scripts lint-md-js",
+		"lint:pkg-json": "wp-scripts lint-pkg-json",
+		"packages-update": "wp-scripts packages-update",
+		"start": "wp-scripts start",
+		"test:e2e": "wp-scripts test-e2e",
+		"test:unit": "wp-scripts test-unit-js"
+	},
+	"devDependencies": {
+		"@wordpress/scripts": "^12.2.1",
+		"@woocommerce/eslint-plugin": "1.1.0",
+		"@woocommerce/dependency-extraction-webpack-plugin": "1.5.0",
+		"copy-webpack-plugin": "5.1.2"
+	},
+	"dependencies": {
+		"@woocommerce/components": "^6.1.2",
+		"@woocommerce/data": "^1.3.0",
+		"@woocommerce/onboarding": "^2.1.0",
+		"@wordpress/api-fetch": "^5.1.0",
+		"@wordpress/components": "^14.1.0",
+		"@wordpress/data": "^5.1.0",
+		"@wordpress/element": "^2.20.3",
+		"@wordpress/i18n": "^4.1.0",
+		"@wordpress/plugins": "^2.25.3",
+		"@wordpress/url": "^3.1.0",
+		"interpolate-components": "^1.1.1"
+	}
+}

modules/ppcp-onboarding/assets/js/onboarding.js → modules/ppcp-onboarding/resources/js/onboarding.js

@@ -295,4 +295,4 @@ const disconnect = (event) => {
 
 	// Onboarding buttons.
 	ppcp_onboarding.init();
-})();
+})();

modules/ppcp-onboarding/assets/js/settings.js → modules/ppcp-onboarding/resources/js/settings.js

@@ -295,4 +295,4 @@ document.addEventListener(
             updateCartMessageFields();
         })();
     }
-)
+)

modules/ppcp-onboarding/resources/js/task-list/connection-button.js

@@ -0,0 +1,126 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import apiFetch from '@wordpress/api-fetch';
+import { Spinner } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+
+const WC_PAYPAL_NAMESPACE = '/wc-paypal/v1';
+
+/* global ppcp_onboarding */
+
+/**
+ * Loads the onboarding script file into the dom on the fly.
+ *
+ * @param {string} url of the onboarding js file.
+ * @param {Object} data required for the onboarding script, labeled as PayPalCommerceGatewayOnboarding
+ * @param {Function} onLoad callback for when the script is loaded.
+ */
+const loadOnboardingScript = ( url, data, onLoad ) => {
+	try {
+		// eslint-disable-next-line camelcase
+		if ( ppcp_onboarding ) {
+			onLoad();
+		}
+	} catch ( e ) {
+		const script = document.createElement( 'script' );
+		script.src = url;
+		document.body.append( script );
+
+		// Callback after scripts have loaded.
+		script.onload = function () {
+			onLoad();
+		};
+		window.PayPalCommerceGatewayOnboarding = data;
+	}
+};
+
+export const ConnectionButton = ( { onError = () => {} } ) => {
+	const { createNotice } = useDispatch( 'core/notices' );
+	const [ connectionUrl, setConnectionUrl ] = useState( null );
+	const [ isPending, setIsPending ] = useState( false );
+
+	useEffect( () => {
+		fetchOauthConnectionUrl();
+	}, [] );
+
+	useEffect( () => {
+		if ( ! connectionUrl ) {
+			return;
+		}
+
+		// eslint-disable-next-line camelcase
+		if ( typeof ppcp_onboarding !== 'undefined' ) {
+			// Makes sure the onboarding is hooked up to the Connect button rendered.
+			ppcp_onboarding.reload();
+		}
+	}, [ connectionUrl ] );
+
+	const fetchOauthConnectionUrl = () => {
+		setIsPending( true );
+
+		apiFetch( {
+			path: WC_PAYPAL_NAMESPACE + '/onboarding/get-params',
+			method: 'POST',
+			data: {
+				environment: 'production',
+				returnUrlArgs: {
+					ppcpobw: '1',
+				},
+			},
+		} )
+			.then( ( result ) => {
+				if ( ! result || ! result.signupLink ) {
+					throw new Error();
+				}
+				loadOnboardingScript(
+					result.scriptURL,
+					result.scriptData,
+					() => {
+						setIsPending( false );
+						setConnectionUrl( result.signupLink );
+					}
+				);
+			} )
+			.catch( () => {
+				createNotice(
+					'error',
+					__(
+						'There was a problem with the Paypal onboarding setup, please fill the fields in manually.',
+						'woocommerce-paypal-payments'
+					)
+				);
+				setIsPending( false );
+				onError();
+			} );
+	};
+
+	if ( isPending ) {
+		return <Spinner />;
+	}
+
+	return (
+		<>
+			<a
+				className="button-primary"
+				target="_blank"
+				rel="noreferrer"
+				disabled={ isPending }
+				href={ connectionUrl }
+				data-paypal-onboard-button="true"
+				data-paypal-button="true"
+				data-paypal-onboard-complete="ppcp_onboarding_productionCallback"
+			>
+				{ __( 'Connect', 'woocommerce-paypal-payments' ) }
+			</a>
+			<p>
+				{ __(
+					'You will be redirected to the PayPal website to create the connection.',
+					'woocommerce-paypal-payments'
+				) }
+			</p>
+		</>
+	);
+};