♻️ Make client ID and secret persistent

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

@@ -1,12 +1,12 @@
 export default {
 	// Transient data.
 	SET_IS_SAVING_ONBOARDING_DETAILS: 'SET_IS_SAVING_ONBOARDING_DETAILS',
-	SET_CLIENT_ID: 'SET_CLIENT_ID',
-	SET_CLIENT_SECRET: 'SET_CLIENT_SECRET',
 
 	// Persistent data.
 	SET_ONBOARDING_DETAILS: 'SET_ONBOARDING_DETAILS',
 	SET_ONBOARDING_STEP: 'SET_ONBOARDING_STEP',
 	SET_SANDBOX_MODE: 'SET_SANDBOX_MODE',
 	SET_MANUAL_CONNECTION_MODE: 'SET_MANUAL_CONNECTION_MODE',
+	SET_CLIENT_ID: 'SET_CLIENT_ID',
+	SET_CLIENT_SECRET: 'SET_CLIENT_SECRET',
 };

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

@@ -3,6 +3,19 @@ import { apiFetch } from '@wordpress/data-controls';
 import ACTION_TYPES from './action-types';
 import { NAMESPACE, STORE_NAME } from '../constants';
 
+/**
+ * Non-persistent. Changes the "saving" flag.
+ *
+ * @param {boolean} isSaving
+ * @return {{type: string, isSaving}} The action.
+ */
+export const setIsSaving = ( isSaving ) => {
+	return {
+		type: ACTION_TYPES.SET_IS_SAVING_ONBOARDING_DETAILS,
+		isSaving,
+	};
+};
+
 /**
  * Persistent. Set the full onboarding details, usually during app initialization.
  *
@@ -56,20 +69,7 @@ export const setManualConnectionMode = ( manualConnectionMode ) => {
 };
 
 /**
- * Non-persistent. Changes the "saving" flag.
+ * Persistent. Changes the "client ID" value.
- *
- * @param {boolean} isSaving
- * @return {{type: string, isSaving}} The action.
- */
-export const setIsSaving = ( isSaving ) => {
-	return {
-		type: ACTION_TYPES.SET_IS_SAVING_ONBOARDING_DETAILS,
-		isSaving,
-	};
-};
-
-/**
- * Non-persistent. Changes the "client ID" value.
  *
  * @param {string} clientId
  * @return {{type: string, clientId}} The action.
@@ -82,7 +82,7 @@ export const setClientId = ( clientId ) => {
 };
 
 /**
- * Non-persistent. Changes the "client secret" value.
+ * Persistent. Changes the "client secret" value.
  *
  * @param {string} clientSecret
  * @return {{type: string, clientSecret}} The action.

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

@@ -16,15 +16,15 @@ export const useOnboardingDetails = () => {
 		return select( STORE_NAME ).getTransientData().isSaving;
 	}, [] );
 
+	// Persistent accessors.
 	const clientId = useSelect( ( select ) => {
-		return select( STORE_NAME ).getTransientData().clientId;
+		return select( STORE_NAME ).getPersistentData().clientId;
 	}, [] );
 
 	const clientSecret = useSelect( ( select ) => {
-		return select( STORE_NAME ).getTransientData().clientSecret;
+		return select( STORE_NAME ).getPersistentData().clientSecret;
 	}, [] );
 
-	// Persistent accessors.
 	const onboardingStep = useSelect( ( select ) => {
 		return select( STORE_NAME ).getPersistentData().step || 0;
 	}, [] );
@@ -48,9 +48,10 @@ export const useOnboardingDetails = () => {
 		isSandboxMode,
 		isManualConnectionMode,
 		clientId,
-		setClientId,
+		setClientId: ( value ) => setDetailAndPersist( setClientId, value ),
 		clientSecret,
-		setClientSecret,
+		setClientSecret: ( value ) =>
+			setDetailAndPersist( setClientSecret, value ),
 		setOnboardingStep: ( step ) =>
 			setDetailAndPersist( setOnboardingStep, step ),
 		setSandboxMode: ( state ) =>

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

@@ -2,12 +2,12 @@ import ACTION_TYPES from './action-types';
 
 const defaultState = {
 	isSaving: false,
-	clientId: '',
-	clientSecret: '',
 	data: {
 		step: 0,
 		useSandbox: false,
 		useManualConnection: false,
+		clientId: '',
+		clientSecret: '',
 	},
 };
 
@@ -15,64 +15,54 @@ export const onboardingReducer = (
 	state = defaultState,
 	{ type, ...action }
 ) => {
+	const setTransient = ( changes ) => {
+		const { data, ...transientChanges } = changes;
+		return { ...state, ...transientChanges };
+	};
+
+	const setPersistent = ( changes ) => {
+		const validChanges = Object.keys( changes ).reduce( ( acc, key ) => {
+			if ( key in defaultState.data ) {
+				acc[ key ] = changes[ key ];
+			}
+			return acc;
+		}, {} );
+
+		return {
+			...state,
+			data: { ...state.data, ...validChanges },
+		};
+	};
+
 	switch ( type ) {
 		// Transient data.
 		case ACTION_TYPES.SET_IS_SAVING_ONBOARDING_DETAILS:
-			return {
+			return setTransient( { isSaving: action.isSaving } );
-				...state,
-				isSaving: action.isSaving,
-			};
-
-		case ACTION_TYPES.SET_CLIENT_ID:
-			return {
-				...state,
-				clientId: action.clientId,
-			};
-
-		case ACTION_TYPES.SET_CLIENT_SECRET:
-			return {
-				...state,
-				clientSecret: action.clientSecret,
-			};
 
 		// Persistent data.
+		case ACTION_TYPES.SET_CLIENT_ID:
+			return setPersistent( { clientId: action.clientId } );
+
+		case ACTION_TYPES.SET_CLIENT_SECRET:
+			return setPersistent( { clientSecret: action.clientSecret } );
+
 		case ACTION_TYPES.SET_ONBOARDING_DETAILS:
-			return {
+			return setPersistent( action.payload );
-				...state,
-				data: action.payload,
-			};
 
 		case ACTION_TYPES.SET_ONBOARDING_STEP:
-			return {
+			return setPersistent( { step: action.step } );
-				...state,
-				data: {
-					...( state.data || {} ),
-					step: action.step,
-				},
-			};
 
 		case ACTION_TYPES.SET_SANDBOX_MODE:
-			return {
+			return setPersistent( { useSandbox: action.useSandbox } );
-				...state,
-				data: {
-					...( state.data || {} ),
-					useSandbox: action.useSandbox,
-				},
-			};
 
 		case ACTION_TYPES.SET_MANUAL_CONNECTION_MODE:
-			return {
+			return setPersistent( {
-				...state,
+				useManualConnection: action.useManualConnection,
-				data: {
+			} );
-					...( state.data || {} ),
-					useManualConnection: action.useManualConnection,
-				},
-			};
 
 		default:
+			return state;
 	}
-
-	return state;
 };
 
 export default onboardingReducer;