diff --git a/modules/ppcp-settings/resources/js/data/onboarding/actions.js b/modules/ppcp-settings/resources/js/data/onboarding/actions.js index e9bf8ed5f..8c6f2999f 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/actions.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/actions.js @@ -36,16 +36,37 @@ export const hydrate = ( payload ) => ( { payload, } ); +/** + * Generic transient-data updater. + * + * @param {string} prop Name of the property to update. + * @param {any} value The new value of the property. + * @return {Action} The action. + */ +export const setTransient = ( prop, value ) => ( { + type: ACTION_TYPES.SET_TRANSIENT, + payload: { [ prop ]: value }, +} ); + +/** + * Generic persistent-data updater. + * + * @param {string} prop Name of the property to update. + * @param {any} value The new value of the property. + * @return {Action} The action. + */ +export const setPersistent = ( prop, value ) => ( { + type: ACTION_TYPES.SET_PERSISTENT, + payload: { [ prop ]: value }, +} ); + /** * Transient. Marks the onboarding details as "ready", i.e., fully initialized. * * @param {boolean} isReady * @return {Action} The action. */ -export const setIsReady = ( isReady ) => ( { - type: ACTION_TYPES.SET_TRANSIENT, - payload: { isReady }, -} ); +export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady ); /** * Transient. Sets the "manualClientId" value. @@ -53,10 +74,8 @@ export const setIsReady = ( isReady ) => ( { * @param {string} manualClientId * @return {Action} The action. */ -export const setManualClientId = ( manualClientId ) => ( { - type: ACTION_TYPES.SET_TRANSIENT, - payload: { manualClientId }, -} ); +export const setManualClientId = ( manualClientId ) => + setTransient( 'manualClientId', manualClientId ); /** * Transient. Sets the "manualClientSecret" value. @@ -64,10 +83,8 @@ export const setManualClientId = ( manualClientId ) => ( { * @param {string} manualClientSecret * @return {Action} The action. */ -export const setManualClientSecret = ( manualClientSecret ) => ( { - type: ACTION_TYPES.SET_TRANSIENT, - payload: { manualClientSecret }, -} ); +export const setManualClientSecret = ( manualClientSecret ) => + setTransient( 'manualClientSecret', manualClientSecret ); /** * Persistent.Set the "onboarding completed" flag which shows or hides the wizard. @@ -75,10 +92,8 @@ export const setManualClientSecret = ( manualClientSecret ) => ( { * @param {boolean} completed * @return {Action} The action. */ -export const setCompleted = ( completed ) => ( { - type: ACTION_TYPES.SET_PERSISTENT, - payload: { completed }, -} ); +export const setCompleted = ( completed ) => + setPersistent( 'completed', completed ); /** * Persistent. Sets the onboarding wizard to a new step. @@ -86,10 +101,7 @@ export const setCompleted = ( completed ) => ( { * @param {number} step * @return {Action} The action. */ -export const setStep = ( step ) => ( { - type: ACTION_TYPES.SET_PERSISTENT, - payload: { step }, -} ); +export const setStep = ( step ) => setPersistent( 'step', step ); /** * Persistent. Sets the "isCasualSeller" value. @@ -97,10 +109,8 @@ export const setStep = ( step ) => ( { * @param {boolean} isCasualSeller * @return {Action} The action. */ -export const setIsCasualSeller = ( isCasualSeller ) => ( { - type: ACTION_TYPES.SET_PERSISTENT, - payload: { isCasualSeller }, -} ); +export const setIsCasualSeller = ( isCasualSeller ) => + setPersistent( 'isCasualSeller', isCasualSeller ); /** * Persistent. Sets the "areOptionalPaymentMethodsEnabled" value. @@ -110,10 +120,11 @@ export const setIsCasualSeller = ( isCasualSeller ) => ( { */ export const setAreOptionalPaymentMethodsEnabled = ( areOptionalPaymentMethodsEnabled -) => ( { - type: ACTION_TYPES.SET_PERSISTENT, - payload: { areOptionalPaymentMethodsEnabled }, -} ); +) => + setPersistent( + 'areOptionalPaymentMethodsEnabled', + areOptionalPaymentMethodsEnabled + ); /** * Persistent. Sets the "products" array. @@ -121,10 +132,8 @@ export const setAreOptionalPaymentMethodsEnabled = ( * @param {string[]} products * @return {Action} The action. */ -export const setProducts = ( products ) => ( { - type: ACTION_TYPES.SET_PERSISTENT, - payload: { products }, -} ); +export const setProducts = ( products ) => + setPersistent( 'products', products ); /** * Side effect. Triggers the persistence of onboarding data to the server. diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js index 2d1542f68..70999960c 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js @@ -9,32 +9,14 @@ import { useSelect, useDispatch } from '@wordpress/data'; +import { createHooksForStore } from '../utils'; import { PRODUCT_TYPES } from './configuration'; import { STORE_NAME } from './constants'; -const useTransient = ( key ) => - useSelect( - ( select ) => select( STORE_NAME ).transientData()?.[ key ], - [ key ] - ); - -const usePersistent = ( key ) => - useSelect( - ( select ) => select( STORE_NAME ).persistentData()?.[ key ], - [ key ] - ); - const useHooks = () => { - const { - persist, - setStep, - setCompleted, - setIsCasualSeller, - setManualClientId, - setManualClientSecret, - setAreOptionalPaymentMethodsEnabled, - setProducts, - } = useDispatch( STORE_NAME ); + const { useTransient, usePersistent } = createHooksForStore( STORE_NAME ); + + const { persist } = useDispatch( STORE_NAME ); // Read-only flags and derived state. const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] ); @@ -44,18 +26,22 @@ const useHooks = () => { ); // Transient accessors. - const isReady = useTransient( 'isReady' ); - const manualClientId = useTransient( 'manualClientId' ); - const manualClientSecret = useTransient( 'manualClientSecret' ); + const [ isReady ] = useTransient( 'isReady' ); + const [ manualClientId, setManualClientId ] = + useTransient( 'manualClientId' ); + const [ manualClientSecret, setManualClientSecret ] = + useTransient( 'manualClientSecret' ); // Persistent accessors. - const step = usePersistent( 'step' ); - const completed = usePersistent( 'completed' ); - const isCasualSeller = usePersistent( 'isCasualSeller' ); - const areOptionalPaymentMethodsEnabled = usePersistent( - 'areOptionalPaymentMethodsEnabled' - ); - const products = usePersistent( 'products' ); + const [ step, setStep ] = usePersistent( 'step' ); + const [ completed, setCompleted ] = usePersistent( 'completed' ); + const [ isCasualSeller, setIsCasualSeller ] = + usePersistent( 'isCasualSeller' ); + const [ + areOptionalPaymentMethodsEnabled, + setAreOptionalPaymentMethodsEnabled, + ] = usePersistent( 'areOptionalPaymentMethodsEnabled' ); + const [ products, setProducts ] = usePersistent( 'products' ); const savePersistent = async ( setter, value ) => { setter( value );