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

🚧 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' );
// 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 {
persist,
isReady,
location,
setLocation,
getLocationProp,
setLocationProp,
};
};
@ -54,40 +92,7 @@ export const useStylingLocation = () => {
};
export const useStylingProps = ( location ) => {
const defaultStyle = {
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 ]
);
const { getLocationProp, setLocationProp } = useHooks();
return {
// Location (drop down).
@ -96,30 +101,30 @@ export const useStylingProps = ( location ) => {
// Payment methods (checkboxes).
paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ),
paymentMethods: getLocationStyle( 'paymentMethods' ),
paymentMethods: getLocationProp( 'paymentMethods' ),
setPaymentMethods: ( methods ) =>
setLocationStyle( 'paymentMethods', methods ),
setLocationProp( 'paymentMethods', methods ),
// Color (dropdown).
colorChoices: Object.values( STYLING_COLORS ),
color: getLocationStyle( 'color' ),
setColor: ( color ) => setLocationStyle( 'color', color ),
color: getLocationProp( 'color' ),
setColor: ( color ) => setLocationProp( 'color', color ),
// Shape (radio).
shapeChoices: Object.values( STYLING_SHAPES ),
shape: getLocationStyle( 'shape' ),
setShape: ( shape ) => setLocationStyle( 'shape', shape ),
shape: getLocationProp( 'shape' ),
setShape: ( shape ) => setLocationProp( 'shape', shape ),
// Label (dropdown).
labelChoices: Object.values( STYLING_LABELS ),
label: getLocationStyle( 'label' ),
setLabel: ( label ) => setLocationStyle( 'label', label ),
label: getLocationProp( 'label' ),
setLabel: ( label ) => setLocationProp( 'label', label ),
// Layout (radio).
layoutChoices: Object.values( STYLING_LAYOUTS ),
supportsLayout: true,
layout: getLocationStyle( 'layout' ),
setLayout: ( layout ) => setLocationStyle( 'layout', layout ),
layout: getLocationProp( 'layout' ),
setLayout: ( layout ) => setLocationProp( 'layout', layout ),
// Tagline (checkbox).
taglineChoices: [
@ -129,7 +134,7 @@ export const useStylingProps = ( location ) => {
},
],
supportsTagline: true,
tagline: getLocationStyle( 'tagline' ),
setTagline: ( tagline ) => setLocationStyle( 'tagline', tagline ),
tagline: getLocationProp( 'tagline' ),
setTagline: ( tagline ) => setLocationProp( 'tagline', tagline ),
};
};