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

✨ Move styling options to Redux store!

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

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

@ -8,8 +8,8 @@
*/
import { __ } from '@wordpress/i18n';
import { useCallback, useState } from '@wordpress/element'; // Temporary
import { useDispatch } from '@wordpress/data';
import { useCallback } from '@wordpress/element'; // Temporary
import { useDispatch, useSelect } from '@wordpress/data';
import { createHooksForStore } from '../utils';
import { STORE_NAME } from './constants';
@ -33,43 +33,29 @@ const useHooks = () => {
const [ location, setLocation ] = useTransient( 'location' );
// Persistent accessors.
// TODO - this is a dummy implementation.
const defaultStyle = {
paymentMethods: [],
color: 'gold',
shape: 'rect',
label: 'paypal',
layout: 'vertical',
tagline: false,
};
const persistentData = useSelect(
( select ) => select( STORE_NAME ).persistentData(),
[]
);
// 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 [ locationStyles, setLocationStyles ] = usePersistent( location );
const getLocationProp = useCallback(
( prop ) => styles[ location ]?.[ prop ],
[ location, styles ]
( prop ) => {
return persistentData[ location ]?.[ prop ];
},
[ location, persistentData ]
);
const setLocationProp = useCallback(
( prop, value ) => {
setStyles( ( prevState ) => ( {
...prevState,
[ location ]: {
...prevState[ location ],
[ prop ]: value,
},
} ) );
setLocationStyles( {
...locationStyles,
[ prop ]: value,
} );
},
[ location ]
[ locationStyles, setLocationStyles ]
);
// end of dummy implementation
return {
persist,