diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js index 224e0b0d3..0fa0066fd 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js @@ -7,11 +7,11 @@ import { store as noticesStore } from '@wordpress/notices'; import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock'; import Separator from '../../../ReusableComponents/Separator'; import DataStoreControl from '../../../ReusableComponents/DataStoreControl'; -import { OnboardingHooks } from '../../../../data'; +import { OnboardingHooks, CommonHooks } from '../../../../data'; const AdvancedOptionsForm = ( { setCompleted } ) => { + const { isBusy } = CommonHooks.useBusyState(); const { - isBusy, isSandboxMode, setSandboxMode, isManualConnectionMode, diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js index 7a4c8b15f..5a1da25cb 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js @@ -22,8 +22,8 @@ const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => { } }; - const { products, toggleProduct } = OnboardingHooks.useProducts(); - const { isCasualSeller, setIsCasualSeller } = OnboardingHooks.useBusiness(); + const { products } = OnboardingHooks.useProducts(); + const { isCasualSeller } = OnboardingHooks.useBusiness(); let navigationTitle = ''; let disabled = false; diff --git a/modules/ppcp-settings/resources/js/data/common/hooks.js b/modules/ppcp-settings/resources/js/data/common/hooks.js index 907ee00f3..78813f066 100644 --- a/modules/ppcp-settings/resources/js/data/common/hooks.js +++ b/modules/ppcp-settings/resources/js/data/common/hooks.js @@ -22,3 +22,13 @@ const usePersistent = ( key ) => ( select ) => select( STORE_NAME ).persistentData()?.[ key ], [ key ] ); + +export const useBusyState = () => { + const { setIsBusy } = useDispatch( STORE_NAME ); + const isBusy = useTransient( 'isBusy' ); + + return { + isBusy, + setIsBusy: useCallback( ( busy ) => setIsBusy( busy ), [ setIsBusy ] ), + }; +}; diff --git a/modules/ppcp-settings/resources/js/data/common/reducer.js b/modules/ppcp-settings/resources/js/data/common/reducer.js index d16106379..3f822468b 100644 --- a/modules/ppcp-settings/resources/js/data/common/reducer.js +++ b/modules/ppcp-settings/resources/js/data/common/reducer.js @@ -14,7 +14,6 @@ import ACTION_TYPES from './action-types'; const defaultTransient = { isReady: false, - isSaving: false, isBusy: false, }; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/actions.js b/modules/ppcp-settings/resources/js/data/onboarding/actions.js index bd3705fae..764992fc1 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/actions.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/actions.js @@ -36,28 +36,6 @@ export const setIsReady = ( isReady ) => ( { payload: { isReady }, } ); -/** - * Transient. Changes the "saving" flag. - * - * @param {boolean} isSaving - * @return {Action} The action. - */ -export const setIsSaving = ( isSaving ) => ( { - type: ACTION_TYPES.SET_TRANSIENT, - payload: { isSaving }, -} ); - -/** - * Transient. Changes the "manual connection is busy" flag. - * - * @param {boolean} isBusy - * @return {Action} The action. - */ -export const setIsBusy = ( isBusy ) => ( { - type: ACTION_TYPES.SET_TRANSIENT, - payload: { isBusy }, -} ); - /** * Persistent. Set the full onboarding details, usually during app initialization. * @@ -165,9 +143,7 @@ export const setProducts = ( products ) => ( { export const persist = function* () { const data = yield select( STORE_NAME ).persistentData(); - yield setIsSaving( true ); yield { type: ACTION_TYPES.DO_PERSIST_DATA, data }; - yield setIsSaving( false ); }; /** @@ -179,15 +155,12 @@ 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; }; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js index 547a1eaa1..6b2959bea 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js @@ -41,9 +41,7 @@ const useOnboardingDetails = () => { const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] ); // Transient accessors. - const isSaving = useTransient( 'isSaving' ); const isReady = useTransient( 'isReady' ); - const isBusy = useTransient( 'isBusy' ); // Persistent accessors. const step = usePersistent( 'step' ); @@ -68,9 +66,8 @@ const useOnboardingDetails = () => { }; return { - isSaving, + flags, isReady, - isBusy, step, setStep: ( value ) => setDetailAndPersist( setStep, value ), completed, @@ -91,14 +88,11 @@ const useOnboardingDetails = () => { setDetailAndPersist( setIsCasualSeller, value ), products, toggleProduct, - flags, }; }; export const useConnection = () => { const { - isSaving, - isBusy, isSandboxMode, setSandboxMode, isManualConnectionMode, @@ -110,8 +104,6 @@ export const useConnection = () => { } = useOnboardingDetails(); return { - isSaving, - isBusy, isSandboxMode, setSandboxMode, isManualConnectionMode, diff --git a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js index 0ca7dc646..e337295ba 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js @@ -14,8 +14,6 @@ import ACTION_TYPES from './action-types'; const defaultTransient = { isReady: false, - isSaving: false, - isBusy: false, // Read only values, provided by the server. flags: {