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

🚧 Prepare Redux integration in hooks-file

Browse source
This commit is contained in:
Philipp Stracker 2025-01-16 19:30:54 +01:00
parent f7f140875d
commit 34cc8f8fab
No known key found for this signature in database
1 changed files with 52 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

99
modules/ppcp-settings/resources/js/data/styling/hooks.js
View file

@ -33,13 +33,51 @@ const useHooks = () => {
const [ location, setLocation ] = useTransient( 'location' ); const [ location, setLocation ] = useTransient( 'location' );
// Persistent accessors. // Persistent accessors.
const [ shape, setShape ] = usePersistent( 'shape' ); // TODO - this is a dummy implementation.
const defaultStyle = {
paymentMethods: [],
color: 'gold',
shape: 'rect',
label: 'paypal',
layout: 'vertical',
tagline: false,
};
// This data-struct is already present in the Redux store via persistentData, e.g. "persistentData.cart.label"
const [ styles, setStyles ] = useState( {
cart: { ...defaultStyle, label: 'checkout' },
'classic-checkout': { ...defaultStyle },
'express-checkout': { ...defaultStyle, label: 'pay' },
'mini-cart': { ...defaultStyle, label: 'pay' },
'product-page': { ...defaultStyle },
} );
const getLocationProp = useCallback(
( prop ) => styles[ location ]?.[ prop ],
[ location, styles ]
);
const setLocationProp = useCallback(
( prop, value ) => {
setStyles( ( prevState ) => ( {
...prevState,
[ location ]: {
...prevState[ location ],
[ prop ]: value,
},
} ) );
},
[ location ]
);
// end of dummy implementation
return { return {
persist, persist,
isReady, isReady,
location, location,
setLocation, setLocation,
getLocationProp,
setLocationProp,
}; };
}; };
@ -54,40 +92,7 @@ export const useStylingLocation = () => {
}; };
export const useStylingProps = ( location ) => { export const useStylingProps = ( location ) => {
const defaultStyle = { const { getLocationProp, setLocationProp } = useHooks();
paymentMethods: [],
color: 'gold',
shape: 'rect',
label: 'paypal',
layout: 'vertical',
tagline: false,
};
const [ styles, setStyles ] = useState( {
cart: { ...defaultStyle, label: 'checkout' },
'classic-checkout': { ...defaultStyle },
'express-checkout': { ...defaultStyle, label: 'pay' },
'mini-cart': { ...defaultStyle, label: 'pay' },
'product-page': { ...defaultStyle },
} );
const getLocationStyle = useCallback(
( prop ) => styles[ location ]?.[ prop ],
[ location, styles ]
);
const setLocationStyle = useCallback(
( prop, value ) => {
setStyles( ( prevState ) => ( {
...prevState,
[ location ]: {
...prevState[ location ],
[ prop ]: value,
},
} ) );
},
[ location ]
);
return { return {
// Location (drop down). // Location (drop down).
@ -96,30 +101,30 @@ export const useStylingProps = ( location ) => {
// Payment methods (checkboxes). // Payment methods (checkboxes).
paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ), paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ),
paymentMethods: getLocationStyle( 'paymentMethods' ), paymentMethods: getLocationProp( 'paymentMethods' ),
setPaymentMethods: ( methods ) => setPaymentMethods: ( methods ) =>
setLocationStyle( 'paymentMethods', methods ), setLocationProp( 'paymentMethods', methods ),
// Color (dropdown). // Color (dropdown).
colorChoices: Object.values( STYLING_COLORS ), colorChoices: Object.values( STYLING_COLORS ),
color: getLocationStyle( 'color' ), color: getLocationProp( 'color' ),
setColor: ( color ) => setLocationStyle( 'color', color ), setColor: ( color ) => setLocationProp( 'color', color ),
// Shape (radio). // Shape (radio).
shapeChoices: Object.values( STYLING_SHAPES ), shapeChoices: Object.values( STYLING_SHAPES ),
shape: getLocationStyle( 'shape' ), shape: getLocationProp( 'shape' ),
setShape: ( shape ) => setLocationStyle( 'shape', shape ), setShape: ( shape ) => setLocationProp( 'shape', shape ),
// Label (dropdown). // Label (dropdown).
labelChoices: Object.values( STYLING_LABELS ), labelChoices: Object.values( STYLING_LABELS ),
label: getLocationStyle( 'label' ), label: getLocationProp( 'label' ),
setLabel: ( label ) => setLocationStyle( 'label', label ), setLabel: ( label ) => setLocationProp( 'label', label ),
// Layout (radio). // Layout (radio).
layoutChoices: Object.values( STYLING_LAYOUTS ), layoutChoices: Object.values( STYLING_LAYOUTS ),
supportsLayout: true, supportsLayout: true,
layout: getLocationStyle( 'layout' ), layout: getLocationProp( 'layout' ),
setLayout: ( layout ) => setLocationStyle( 'layout', layout ), setLayout: ( layout ) => setLocationProp( 'layout', layout ),
// Tagline (checkbox). // Tagline (checkbox).
taglineChoices: [ taglineChoices: [
@ -129,7 +134,7 @@ export const useStylingProps = ( location ) => {
}, },
], ],
supportsTagline: true, supportsTagline: true,
tagline: getLocationStyle( 'tagline' ), tagline: getLocationProp( 'tagline' ),
setTagline: ( tagline ) => setLocationStyle( 'tagline', tagline ), setTagline: ( tagline ) => setLocationProp( 'tagline', tagline ),
}; };
}; };