✨ Start implementing new store attributes

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

@@ -2,4 +2,6 @@ export default {
 	SET_ONBOARDING_DETAILS: 'SET_ONBOARDING_DETAILS',
 	SET_IS_SAVING_ONBOARDING_DETAILS: 'SET_IS_SAVING_ONBOARDING_DETAILS',
 	SET_ONBOARDING_STEP: 'SET_ONBOARDING_STEP',
+	SET_SANDBOX_MODE: 'SET_SANDBOX_MODE',
+	SET_MANUAL_CONNECTION_MODE: 'SET_MANUAL_CONNECTION_MODE',
 };

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

@@ -8,7 +8,7 @@ import { NAMESPACE, STORE_NAME } from '../constants';
  * Persistent. Set the full onboarding details, usually during app initialization.
  *
  * @param {Object} payload
- * @return {{payload, type: string}} The action.
+ * @return {{type: string, payload}} The action.
  */
 export const updateOnboardingDetails = ( payload ) => {
 	return {
@@ -30,6 +30,32 @@ export const setOnboardingStep = ( step ) => {
 	};
 };
 
+/**
+ * Persistent. Sets the sandbox mode on or off.
+ *
+ * @param {boolean} sandboxMode
+ * @return {{type: string, useSandbox}} An action.
+ */
+export const setSandboxMode = ( sandboxMode ) => {
+	return {
+		type: ACTION_TYPES.SET_SANDBOX_MODE,
+		useSandbox: sandboxMode,
+	};
+};
+
+/**
+ * Persistent. Toggles the "Manual Connection" mode on or off.
+ *
+ * @param {boolean} manualConnectionMode
+ * @return {{type: string, useManualConnection}} An action.
+ */
+export const setManualConnectionMode = ( manualConnectionMode ) => {
+	return {
+		type: ACTION_TYPES.SET_MANUAL_CONNECTION_MODE,
+		useManualConnection: manualConnectionMode,
+	};
+};
+
 /**
  * Non-persistent. Changes the "saving" flag.
  *

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

@@ -2,7 +2,12 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { STORE_NAME } from '../constants';
 
 export const useOnboardingDetails = () => {
-	const { setOnboardingStep, persist } = useDispatch( STORE_NAME );
+	const {
+		setOnboardingStep,
+		setSandboxMode,
+		setManualConnectionMode,
+		persist,
+	} = useDispatch( STORE_NAME );
 
 	const onboardingStep = useSelect( ( select ) => {
 		return select( STORE_NAME ).getOnboardingStep();
@@ -12,12 +17,19 @@ export const useOnboardingDetails = () => {
 		return select( STORE_NAME ).isSaving();
 	}, [] );
 
+	const setDetailAndPersist = async ( setter, value ) => {
+		setter( value );
+		await persist();
+	};
+
 	return {
 		onboardingStep,
 		isSaving,
-		setOnboardingStep: async ( step ) => {
-			setOnboardingStep( step );
-			await persist();
-		},
+		setOnboardingStep: ( step ) =>
+			setDetailAndPersist( setOnboardingStep, step ),
+		setSandboxMode: ( state ) =>
+			setDetailAndPersist( setSandboxMode, state ),
+		setManualConnectionMode: ( state ) =>
+			setDetailAndPersist( setManualConnectionMode, state ),
 	};
 };

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

@@ -4,6 +4,8 @@ const defaultState = {
 	isSaving: false,
 	data: {
 		step: 0,
+		useSandbox: false,
+		useManualConnection: false,
 	},
 };
 
@@ -33,6 +35,24 @@ export const onboardingReducer = (
 				},
 			};
 
+		case ACTION_TYPES.SET_SANDBOX_MODE:
+			return {
+				...state,
+				data: {
+					...( state.data || {} ),
+					useSandbox: action.useSandbox,
+				},
+			};
+
+		case ACTION_TYPES.SET_MANUAL_CONNECTION_MODE:
+			return {
+				...state,
+				data: {
+					...( state.data || {} ),
+					useManualConnection: action.useManualConnection,
+				},
+			};
+
 		default:
 	}