diff --git a/modules/ppcp-settings/resources/js/data/onboarding/action-types.js b/modules/ppcp-settings/resources/js/data/onboarding/action-types.js index 0adfb2fcf..232c6b1fc 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/action-types.js +++ b/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', }; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/actions.js b/modules/ppcp-settings/resources/js/data/onboarding/actions.js index af4603f3c..8deb822c3 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/actions.js +++ b/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. - * - * @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. + * 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. diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js index e9699da25..730ec060c 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js +++ b/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 ) => diff --git a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js index d1d04d673..954801995 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js +++ b/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 { - ...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, - }; + return setTransient( { isSaving: action.isSaving } ); // 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 { - ...state, - data: action.payload, - }; + return setPersistent( action.payload ); case ACTION_TYPES.SET_ONBOARDING_STEP: - return { - ...state, - data: { - ...( state.data || {} ), - step: action.step, - }, - }; + return setPersistent( { step: action.step } ); case ACTION_TYPES.SET_SANDBOX_MODE: - return { - ...state, - data: { - ...( state.data || {} ), - useSandbox: action.useSandbox, - }, - }; + return setPersistent( { useSandbox: action.useSandbox } ); case ACTION_TYPES.SET_MANUAL_CONNECTION_MODE: - return { - ...state, - data: { - ...( state.data || {} ), - useManualConnection: action.useManualConnection, - }, - }; + return setPersistent( { + useManualConnection: action.useManualConnection, + } ); default: + return state; } - - return state; }; export default onboardingReducer;