✨ Implement sandbox login actions

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js

@@ -11,7 +11,8 @@ import { OnboardingHooks, CommonHooks } from '../../../../data';
 
 const AdvancedOptionsForm = ( { setCompleted } ) => {
 	const { isBusy } = CommonHooks.useBusyState();
-	const { isSandboxMode, setSandboxMode } = CommonHooks.useSandbox();
+	const { isSandboxMode, setSandboxMode, connectViaSandbox } =
+		CommonHooks.useSandbox();
 	const {
 		isManualConnectionMode,
 		setManualConnectionMode,
@@ -81,6 +82,21 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 		setCompleted( true );
 	};
 
+	const handleSandboxConnect = async () => {
+		const res = await connectViaSandbox();
+
+		if ( ! res.success || ! res.data ) {
+			handleServerError(
+				res,
+				__(
+					'Could not generate a Sandbox login link.',
+					'woocommerce-paypal-payments'
+				)
+			);
+			return;
+		}
+	};
+
 	const handleConnect = async () => {
 		if ( ! handleFormValidation() ) {
 			return;
@@ -117,8 +133,9 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 				) }
 				isToggled={ !! isSandboxMode }
 				setToggled={ setSandboxMode }
+				isLoading={ isBusy }
 			>
-				<Button variant="secondary">
+				<Button onClick={ handleSandboxConnect } variant="secondary">
 					{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
 				</Button>
 			</SettingsToggleBlock>

modules/ppcp-settings/resources/js/data/common/action-types.js

@@ -15,4 +15,5 @@ export default {
 	// Controls - always start with "DO_".
 	DO_PERSIST_DATA: 'COMMON:DO_PERSIST_DATA',
 	DO_MANUAL_CONNECTION: 'COMMON:DO_MANUAL_CONNECTION',
+	DO_SANDBOX_LOGIN: 'COMMON:DO_SANDBOX_LOGIN',
 };

modules/ppcp-settings/resources/js/data/common/actions.js

@@ -117,6 +117,20 @@ export const persist = function* () {
 	yield { type: ACTION_TYPES.DO_PERSIST_DATA, data };
 };
 
+/**
+ * Side effect. Initiates the sandbox login ISU.
+ *
+ * @return {Action} The action.
+ */
+export const connectViaSandbox = function* () {
+	yield setIsBusy( true );
+
+	const result = yield { type: ACTION_TYPES.DO_SANDBOX_LOGIN };
+	yield setIsBusy( false );
+
+	return result;
+};
+
 /**
  * Side effect. Initiates a manual connection attempt using the provided client ID and secret.
  *

modules/ppcp-settings/resources/js/data/common/constants.js

@@ -34,3 +34,13 @@ export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/common';
  * @type {string}
  */
 export const REST_MANUAL_CONNECTION_PATH = '/wc/v3/wc_paypal/connect_manual';
+
+/**
+ * REST path to generate an ISU URL for the sandbox-login.
+ *
+ * Used by: Controls
+ * See: LoginLinkRestEndpoint.php
+ *
+ * @type {string}
+ */
+export const REST_SANDBOX_CONNECTION_PATH = '/wc/v3/wc_paypal/login_link';

modules/ppcp-settings/resources/js/data/common/controls.js

@@ -9,7 +9,11 @@
 
 import apiFetch from '@wordpress/api-fetch';
 
-import { REST_PERSIST_PATH, REST_MANUAL_CONNECTION_PATH } from './constants';
+import {
+	REST_PERSIST_PATH,
+	REST_MANUAL_CONNECTION_PATH,
+	REST_SANDBOX_CONNECTION_PATH,
+} from './constants';
 import ACTION_TYPES from './action-types';
 
 export const controls = {
@@ -25,6 +29,28 @@ export const controls = {
 		}
 	},
 
+	async [ ACTION_TYPES.DO_SANDBOX_LOGIN ]() {
+		let result = null;
+
+		try {
+			result = await apiFetch( {
+				path: REST_SANDBOX_CONNECTION_PATH,
+				method: 'POST',
+				data: {
+					environment: 'sandbox',
+					products: [ 'EXPRESS_CHECKOUT' ],
+				},
+			} );
+		} catch ( e ) {
+			result = {
+				success: false,
+				error: e,
+			};
+		}
+
+		return result;
+	},
+
 	async [ ACTION_TYPES.DO_MANUAL_CONNECTION ]( {
 		clientId,
 		clientSecret,

modules/ppcp-settings/resources/js/data/common/hooks.js

@@ -31,6 +31,7 @@ const useHooks = () => {
 		setManualConnectionMode,
 		setClientId,
 		setClientSecret,
+		connectViaSandbox,
 		connectViaIdAndSecret,
 	} = useDispatch( STORE_NAME );
 
@@ -66,6 +67,7 @@ const useHooks = () => {
 		setClientSecret: ( value ) => {
 			return savePersistent( setClientSecret, value );
 		},
+		connectViaSandbox,
 		connectViaIdAndSecret,
 	};
 };
@@ -81,9 +83,9 @@ export const useBusyState = () => {
 };
 
 export const useSandbox = () => {
-	const { isSandboxMode, setSandboxMode } = useHooks();
+	const { isSandboxMode, setSandboxMode, connectViaSandbox } = useHooks();
 
-	return { isSandboxMode, setSandboxMode };
+	return { isSandboxMode, setSandboxMode, connectViaSandbox };
 };
 
 export const useManualConnection = () => {

modules/ppcp-settings/src/Endpoint/LoginLinkRestEndpoint.php

@@ -47,14 +47,18 @@ class LoginLinkRestEndpoint extends RestEndpoint {
 	public function register_routes() {
 		register_rest_route(
 			$this->namespace,
-			'/' . $this->rest_base . '/(?P<environment>[\w]+)',
+			'/' . $this->rest_base,
 			array(
 				array(
-					'methods'             => WP_REST_Server::READABLE,
+					'methods'             => WP_REST_Server::EDITABLE,
 					'callback'            => array( $this, 'get_login_url' ),
 					'permission_callback' => array( $this, 'check_permission' ),
 					'args'                => array(
-						'products' => array(
+						'environment' => array(
+							'required' => true,
+							'type'     => 'string',
+						),
+						'products'    => array(
 							'required'          => true,
 							'type'              => 'array',
 							'items'             => array(