♻️ Move sandbox & manual-connect to common store

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

@@ -7,7 +7,10 @@
  * @file
  */
 
+import { select } from '@wordpress/data';
+
 import ACTION_TYPES from './action-types';
+import { STORE_NAME } from './constants';
 
 /**
  * @typedef {Object} Action An action object that is handled by a reducer or control.
@@ -104,3 +107,25 @@ export const persist = function* () {
 	};
 	yield setIsBusy( false );
 };
+
+/**
+ * Side effect. Initiates a manual connection attempt using the provided client ID and secret.
+ *
+ * @return {Action} The action.
+ */
+export const connectViaIdAndSecret = function* () {
+	const { clientId, clientSecret, useSandbox } =
+		yield select( STORE_NAME ).persistentData();
+
+	yield setIsBusy( true );
+
+	const result = yield {
+		type: ACTION_TYPES.DO_MANUAL_CONNECTION,
+		clientId,
+		clientSecret,
+		useSandbox,
+	};
+	yield setIsBusy( false );
+
+	return result;
+};

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

@@ -24,3 +24,13 @@ export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/common';
  * @type {string}
  */
 export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/common';
+
+/**
+ * REST path to perform the manual connection check, using client ID and secret,
+ *
+ * Used by: Controls
+ * See: ConnectManualRestEndpoint.php
+ *
+ * @type {string}
+ */
+export const REST_MANUAL_CONNECTION_PATH = '/wc/v3/wc_paypal/connect_manual';

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

@@ -9,7 +9,7 @@
 
 import apiFetch from '@wordpress/api-fetch';
 
-import { REST_PERSIST_PATH } from './constants';
+import { REST_PERSIST_PATH, REST_MANUAL_CONNECTION_PATH } from './constants';
 import ACTION_TYPES from './action-types';
 
 export const controls = {
@@ -24,4 +24,31 @@ export const controls = {
 			console.error( 'Error saving data.', error );
 		}
 	},
+
+	async [ ACTION_TYPES.DO_MANUAL_CONNECTION ]( {
+		clientId,
+		clientSecret,
+		useSandbox,
+	} ) {
+		let result = null;
+
+		try {
+			result = await apiFetch( {
+				path: REST_MANUAL_CONNECTION_PATH,
+				method: 'POST',
+				data: {
+					clientId,
+					clientSecret,
+					useSandbox,
+				},
+			} );
+		} catch ( e ) {
+			result = {
+				success: false,
+				error: e,
+			};
+		}
+
+		return result;
+	},
 };

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

@@ -7,9 +7,10 @@
  * @file
  */
 
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 import { STORE_NAME } from './constants';
+import { useCallback } from '@wordpress/element';
 
 const useTransient = ( key ) =>
 	useSelect(
@@ -23,6 +24,52 @@ const usePersistent = ( key ) =>
 		[ key ]
 	);
 
+const useHooks = () => {
+	const {
+		persist,
+		setSandboxMode,
+		setManualConnectionMode,
+		setClientId,
+		setClientSecret,
+		connectViaIdAndSecret,
+	} = useDispatch( STORE_NAME );
+
+	// Transient accessors.
+	const isReady = useTransient( 'isReady' );
+
+	// Persistent accessors.
+	const clientId = usePersistent( 'clientId' );
+	const clientSecret = usePersistent( 'clientSecret' );
+	const isSandboxMode = usePersistent( 'useSandbox' );
+	const isManualConnectionMode = usePersistent( 'useManualConnection' );
+
+	const savePersistent = async ( setter, value ) => {
+		setter( value );
+		await persist();
+	};
+
+	return {
+		isReady,
+		isSandboxMode,
+		setSandboxMode: ( state ) => {
+			return savePersistent( setSandboxMode, state );
+		},
+		isManualConnectionMode,
+		setManualConnectionMode: ( state ) => {
+			return savePersistent( setManualConnectionMode, state );
+		},
+		clientId,
+		setClientId: ( value ) => {
+			return savePersistent( setClientId, value );
+		},
+		clientSecret,
+		setClientSecret: ( value ) => {
+			return savePersistent( setClientSecret, value );
+		},
+		connectViaIdAndSecret,
+	};
+};
+
 export const useBusyState = () => {
 	const { setIsBusy } = useDispatch( STORE_NAME );
 	const isBusy = useTransient( 'isBusy' );
@@ -32,3 +79,31 @@ export const useBusyState = () => {
 		setIsBusy: useCallback( ( busy ) => setIsBusy( busy ), [ setIsBusy ] ),
 	};
 };
+
+export const useSandbox = () => {
+	const { isSandboxMode, setSandboxMode } = useHooks();
+
+	return { isSandboxMode, setSandboxMode };
+};
+
+export const useManualConnection = () => {
+	const {
+		isManualConnectionMode,
+		setManualConnectionMode,
+		clientId,
+		setClientId,
+		clientSecret,
+		setClientSecret,
+		connectViaIdAndSecret,
+	} = useHooks();
+
+	return {
+		isManualConnectionMode,
+		setManualConnectionMode,
+		clientId,
+		setClientId,
+		clientSecret,
+		setClientSecret,
+		connectViaIdAndSecret,
+	};
+};