♻️ Move sandbox & manual-connect to common store

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

@@ -11,20 +11,19 @@ import { OnboardingHooks, CommonHooks } from '../../../../data';
 
 const AdvancedOptionsForm = ( { setCompleted } ) => {
 	const { isBusy } = CommonHooks.useBusyState();
+	const { isSandboxMode, setSandboxMode } = CommonHooks.useSandbox();
 	const {
-		isSandboxMode,
-		setSandboxMode,
 		isManualConnectionMode,
 		setManualConnectionMode,
 		clientId,
 		setClientId,
 		clientSecret,
 		setClientSecret,
-	} = OnboardingHooks.useConnection();
+		connectViaIdAndSecret,
+	} = CommonHooks.useManualConnection();
 
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
-	const { connectManual } = OnboardingHooks.useManualConnect();
 	const refClientId = useRef( null );
 	const refClientSecret = useRef( null );
 
@@ -87,7 +86,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 			return;
 		}
 
-		const res = await connectManual();
+		const res = await connectViaIdAndSecret();
 
 		if ( res.success ) {
 			handleServerSuccess();

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,
+	};
+};

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

@@ -145,22 +145,3 @@ export const persist = function* () {
 
 	yield { type: ACTION_TYPES.DO_PERSIST_DATA, data };
 };
-
-/**
- * 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();
-
-	const result = yield {
-		type: ACTION_TYPES.DO_MANUAL_CONNECTION,
-		clientId,
-		clientSecret,
-		useSandbox,
-	};
-
-	return result;
-};

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

@@ -26,13 +26,3 @@ export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/onboarding';
  * @type {string}
  */
 export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/onboarding';
-
-/**
- * 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/onboarding/controls.js

@@ -9,7 +9,7 @@
 
 import apiFetch from '@wordpress/api-fetch';
 
-import { REST_PERSIST_PATH, REST_MANUAL_CONNECTION_PATH } from './constants';
+import { REST_PERSIST_PATH } from './constants';
 import ACTION_TYPES from './action-types';
 
 export const controls = {
@@ -24,31 +24,4 @@ export const controls = {
 			console.error( 'Error saving progress.', e );
 		}
 	},
-
-	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/onboarding/hooks.js

@@ -24,18 +24,9 @@ const usePersistent = ( key ) =>
 		[ key ]
 	);
 
-const useOnboardingDetails = () => {
+const useHooks = () => {
-	const {
+	const { persist, setStep, setCompleted, setIsCasualSeller, setProducts } =
-		persist,
+		useDispatch( STORE_NAME );
-		setStep,
-		setCompleted,
-		setSandboxMode,
-		setManualConnectionMode,
-		setClientId,
-		setClientSecret,
-		setIsCasualSeller,
-		setProducts,
-	} = useDispatch( STORE_NAME );
 
 	// Read-only flags.
 	const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] );
@@ -46,21 +37,10 @@ const useOnboardingDetails = () => {
 	// Persistent accessors.
 	const step = usePersistent( 'step' );
 	const completed = usePersistent( 'completed' );
-	const clientId = usePersistent( 'clientId' );
-	const clientSecret = usePersistent( 'clientSecret' );
-	const isSandboxMode = usePersistent( 'useSandbox' );
-	const isManualConnectionMode = usePersistent( 'useManualConnection' );
 	const isCasualSeller = usePersistent( 'isCasualSeller' );
 	const products = usePersistent( 'products' );
 
-	const toggleProduct = ( list ) => {
+	const savePersistent = async ( setter, value ) => {
-		const validProducts = list.filter( ( item ) =>
-			Object.values( PRODUCT_TYPES ).includes( item )
-		);
-		return setDetailAndPersist( setProducts, validProducts );
-	};
-
-	const setDetailAndPersist = async ( setter, value ) => {
 		setter( value );
 		await persist();
 	};
@@ -69,75 +49,42 @@ const useOnboardingDetails = () => {
 		flags,
 		isReady,
 		step,
-		setStep: ( value ) => setDetailAndPersist( setStep, value ),
+		setStep: ( value ) => {
+			return savePersistent( setStep, value );
+		},
 		completed,
-		setCompleted: ( state ) => setDetailAndPersist( setCompleted, state ),
+		setCompleted: ( state ) => {
-		isSandboxMode,
+			return savePersistent( setCompleted, state );
-		setSandboxMode: ( state ) =>
+		},
-			setDetailAndPersist( setSandboxMode, state ),
-		isManualConnectionMode,
-		setManualConnectionMode: ( state ) =>
-			setDetailAndPersist( setManualConnectionMode, state ),
-		clientId,
-		setClientId: ( value ) => setDetailAndPersist( setClientId, value ),
-		clientSecret,
-		setClientSecret: ( value ) =>
-			setDetailAndPersist( setClientSecret, value ),
 		isCasualSeller,
-		setIsCasualSeller: ( value ) =>
+		setIsCasualSeller: ( value ) => {
-			setDetailAndPersist( setIsCasualSeller, value ),
+			return savePersistent( setIsCasualSeller, value );
+		},
 		products,
-		toggleProduct,
+		setProducts: ( activeProducts ) => {
-	};
+			const validProducts = activeProducts.filter( ( item ) =>
-};
+				Object.values( PRODUCT_TYPES ).includes( item )
-
+			);
-export const useConnection = () => {
+			return savePersistent( setProducts, validProducts );
-	const {
+		},
-		isSandboxMode,
-		setSandboxMode,
-		isManualConnectionMode,
-		setManualConnectionMode,
-		clientId,
-		setClientId,
-		clientSecret,
-		setClientSecret,
-	} = useOnboardingDetails();
-
-	return {
-		isSandboxMode,
-		setSandboxMode,
-		isManualConnectionMode,
-		setManualConnectionMode,
-		clientId,
-		setClientId,
-		clientSecret,
-		setClientSecret,
 	};
 };
 
 export const useBusiness = () => {
-	const { isCasualSeller, setIsCasualSeller } = useOnboardingDetails();
+	const { isCasualSeller, setIsCasualSeller } = useHooks();
 
 	return { isCasualSeller, setIsCasualSeller };
 };
 
 export const useProducts = () => {
-	const { products, toggleProduct } = useOnboardingDetails();
+	const { products, setProducts } = useHooks();
 
-	return { products, toggleProduct };
+	return { products, setProducts };
 };
 
 export const useSteps = () => {
-	const { isReady, step, setStep, completed, setCompleted, flags } =
+	const { flags, isReady, step, setStep, completed, setCompleted } =
-		useOnboardingDetails();
+		useHooks();
 
-	return { isReady, step, setStep, completed, setCompleted, flags };
+	return { flags, isReady, step, setStep, completed, setCompleted };
-};
-
-export const useManualConnect = () => {
-	const { connectViaIdAndSecret } = useDispatch( STORE_NAME );
-
-	return {
-		connectManual: connectViaIdAndSecret,
-	};
 };

modules/ppcp-settings/resources/js/data/onboarding/reducer.js

@@ -26,10 +26,6 @@ const defaultTransient = {
 const defaultPersistent = {
 	completed: false,
 	step: 0,
-	useSandbox: false,
-	useManualConnection: false,
-	clientId: '',
-	clientSecret: '',
 	isCasualSeller: null, // null value will uncheck both options in the UI.
 	products: [],
 };