woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 09:08:09 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

♻️ Adjust hooks to new code, rename a flag

Browse source
This commit is contained in:
Philipp Stracker 2024-11-20 16:54:53 +01:00
parent 1c27e90923
commit 4bcdb445d4
No known key found for this signature in database
2 changed files with 36 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

96
modules/ppcp-settings/resources/js/data/onboarding/hooks.js
View file

@ -3,19 +3,31 @@
*
* These encapsulate store interactions, offering a consistent interface.
* Hooks simplify data access and manipulation for components.
* Exported hooks must have unique names across all store modules.
*
* @file
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { PRODUCT_TYPES, STORE_NAME } from '../constants';
import { PRODUCT_TYPES } from '../constants';
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 useOnboardingDetails = () => {
const {
persist,
setOnboardingStep,
setStep,
setCompleted,
setSandboxMode,
setManualConnectionMode,
@ -25,61 +37,23 @@ const useOnboardingDetails = () => {
setProducts,
} = useDispatch( STORE_NAME );
const transientData = ( select ) =>
select( STORE_NAME ).onboardingTransientData();
const persistentData = ( select ) =>
select( STORE_NAME ).onboardingPersistentData();
// Read-only flags.
const flags = useSelect( ( select ) => {
return select( STORE_NAME ).onboardingFlags();
} );
const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] );
// Transient accessors.
const isSaving = useSelect( ( select ) => {
return transientData( select ).isSaving;
}, [] );
const isReady = useSelect( ( select ) => {
return transientData( select ).isReady;
} );
const isManualConnectionBusy = useSelect( ( select ) => {
return transientData( select ).isManualConnectionBusy;
}, [] );
const isSaving = useTransient( 'isSaving' );
const isReady = useTransient( 'isReady' );
const isBusy = useTransient( 'isBusy' );
// Persistent accessors.
const step = useSelect( ( select ) => {
return persistentData( select ).step || 0;
} );
const completed = useSelect( ( select ) => {
return persistentData( select ).completed;
} );
const clientId = useSelect( ( select ) => {
return persistentData( select ).clientId;
}, [] );
const clientSecret = useSelect( ( select ) => {
return persistentData( select ).clientSecret;
}, [] );
const isSandboxMode = useSelect( ( select ) => {
return persistentData( select ).useSandbox;
}, [] );
const isManualConnectionMode = useSelect( ( select ) => {
return persistentData( select ).useManualConnection;
}, [] );
const isCasualSeller = useSelect( ( select ) => {
return persistentData( select ).isCasualSeller;
}, [] );
const products = useSelect( ( select ) => {
return persistentData( select ).products || [];
}, [] );
const step = usePersistent( 'step' );
const completed = usePersistent( 'completed' );
const clientId = usePersistent( 'clientId' );
const clientSecret = usePersistent( 'clientSecret' );
const isSandboxMode = usePersistent( 'useSandbox' );
const isManualConnectionMode = usePersistent( 'useManualConnection' );
const isCasualSeller = usePersistent( 'isCasualSeller' );
const products = usePersistent( 'products' );
const toggleProduct = ( list ) => {
const validProducts = list.filter( ( item ) =>
@ -96,9 +70,9 @@ const useOnboardingDetails = () => {
return {
isSaving,
isReady,
isManualConnectionBusy,
isBusy,
step,
setStep: ( value ) => setDetailAndPersist( setOnboardingStep, value ),
setStep: ( value ) => setDetailAndPersist( setStep, value ),
completed,
setCompleted: ( state ) => setDetailAndPersist( setCompleted, state ),
isSandboxMode,
@ -121,10 +95,10 @@ const useOnboardingDetails = () => {
};
};
export const useOnboardingStepWelcome = () => {
export const useConnection = () => {
const {
isSaving,
isManualConnectionBusy,
isBusy,
isSandboxMode,
setSandboxMode,
isManualConnectionMode,
@ -137,7 +111,7 @@ export const useOnboardingStepWelcome = () => {
return {
isSaving,
isManualConnectionBusy,
isBusy,
isSandboxMode,
setSandboxMode,
isManualConnectionMode,
@ -149,19 +123,19 @@ export const useOnboardingStepWelcome = () => {
};
};
export const useOnboardingStepBusiness = () => {
export const useBusiness = () => {
const { isCasualSeller, setIsCasualSeller } = useOnboardingDetails();
return { isCasualSeller, setIsCasualSeller };
};
export const useOnboardingStepProducts = () => {
export const useProducts = () => {
const { products, toggleProduct } = useOnboardingDetails();
return { products, toggleProduct };
};
export const useOnboardingStep = () => {
export const useSteps = () => {
const { isReady, step, setStep, completed, setCompleted, flags } =
useOnboardingDetails();

3
modules/ppcp-settings/resources/js/data/onboarding/reducer.js
View file

@ -2,7 +2,6 @@
* Reducer: Defines store structure and state updates for this module.
*
* Manages both transient (temporary) and persistent (saved) state.
* Each module uses isolated memory objects to prevent conflicts.
* The initial state must define all properties, as dynamic additions are not supported.
*
* @file
@ -16,7 +15,7 @@ import ACTION_TYPES from './action-types';
const defaultTransient = {
isReady: false,
isSaving: false,
isManualConnectionBusy: false,
isBusy: false,
// Read only values, provided by the server.
flags: {