From bd14ea441ec2d38a6abed9861a5f2c5e9a6bb977 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Thu, 16 Jan 2025 17:16:37 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Move=20dummy=20hook=20into?= =?UTF-8?q?=20redux=20store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Styling/LocationSelector.js | 8 +- .../Components/Styling/SettingsPanel.js | 21 ++-- .../Screens/Settings/Tabs/TabStyling.js | 102 ------------------ .../resources/js/data/styling/hooks.js | 98 ++++++++++++++++- 4 files changed, 111 insertions(+), 118 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/LocationSelector.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/LocationSelector.js index 01745fbdc..35c3a6efd 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/LocationSelector.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/LocationSelector.js @@ -1,15 +1,13 @@ -import { SelectControl } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; -// Dummy hook. -import { useStylingProps } from '../../Tabs/TabStyling'; - +import { StylingHooks } from '../../../../../data'; import { Description } from '../../../../ReusableComponents/SettingsBlocks'; import StylingSection from './StylingSection'; import StylingSectionWithSelect from './StylingSectionWithSelect'; const LocationSelector = ( { location, setLocation } ) => { - const { locationChoices, locationDetails } = useStylingProps( location ); + const { locationChoices, locationDetails } = + StylingHooks.useStylingProps( location ); const { description, link } = locationDetails || {}; const locationDescription = sprintf( description, link ); diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js index 40d418276..4826632a9 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js @@ -1,15 +1,13 @@ import { __ } from '@wordpress/i18n'; -// Dummy hook. -import { useStylingLocation, useStylingProps } from '../../Tabs/TabStyling'; - +import { StylingHooks } from '../../../../../data'; import LocationSelector from './LocationSelector'; import StylingSectionWithSelect from './StylingSectionWithSelect'; import StylingSectionWithCheckboxes from './StylingSectionWithCheckboxes'; import StylingSectionWithRadiobuttons from './StylingSectionWithRadiobuttons'; const SettingsPanel = () => { - const { location, setLocation } = useStylingLocation(); + const { location, setLocation } = StylingHooks.useStylingLocation(); return (
@@ -33,7 +31,7 @@ export default SettingsPanel; const SectionPaymentMethods = ( { location } ) => { const { paymentMethods, setPaymentMethods, paymentMethodChoices } = - useStylingProps( location ); + StylingHooks.useStylingProps( location ); return ( { const SectionButtonLayout = ( { location } ) => { const { supportsLayout, layout, setLayout, layoutChoices } = - useStylingProps( location ); + StylingHooks.useStylingProps( location ); if ( ! supportsLayout ) { return null; @@ -66,7 +64,8 @@ const SectionButtonLayout = ( { location } ) => { }; const SectionButtonShape = ( { location } ) => { - const { shape, setShape, shapeChoices } = useStylingProps( location ); + const { shape, setShape, shapeChoices } = + StylingHooks.useStylingProps( location ); return ( { }; const SectionButtonLabel = ( { location } ) => { - const { label, setLabel, labelChoices } = useStylingProps( location ); + const { label, setLabel, labelChoices } = + StylingHooks.useStylingProps( location ); return ( { }; const SectionButtonColor = ( { location } ) => { - const { color, setColor, colorChoices } = useStylingProps( location ); + const { color, setColor, colorChoices } = + StylingHooks.useStylingProps( location ); return ( { const SectionButtonTagline = ( { location } ) => { const { supportsTagline, tagline, setTagline, taglineChoices } = - useStylingProps( location ); + StylingHooks.useStylingProps( location ); if ( ! supportsTagline ) { return null; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js index f0ee60151..c1eb5eb19 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js @@ -1,15 +1,3 @@ -import { __ } from '@wordpress/i18n'; -import { useCallback, useState } from '@wordpress/element'; - -import { - STYLING_COLORS, - STYLING_LABELS, - STYLING_LAYOUTS, - STYLING_LOCATIONS, - STYLING_PAYMENT_METHODS, - STYLING_SHAPES, -} from '../../../../data'; - import PreviewPanel from '../Components/Styling/PreviewPanel'; import SettingsPanel from '../Components/Styling/SettingsPanel'; @@ -21,93 +9,3 @@ const TabStyling = () => ( ); export default TabStyling; - -// ---------------------------------------------------------------------------- - -// Temporary "hook" to extract logic before moving it to the Redux store. -export const useStylingLocation = () => { - const [ location, setLocation ] = useState( 'cart' ); - - return { location, setLocation }; -}; - -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 ] - ); - - return { - // Location (drop down). - locationChoices: Object.values( STYLING_LOCATIONS ), - locationDetails: STYLING_LOCATIONS[ location ], - - // Payment methods (checkboxes). - paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ), - paymentMethods: getLocationStyle( 'paymentMethods' ), - setPaymentMethods: ( methods ) => - setLocationStyle( 'paymentMethods', methods ), - - // Color (dropdown). - colorChoices: Object.values( STYLING_COLORS ), - color: getLocationStyle( 'color' ), - setColor: ( color ) => setLocationStyle( 'color', color ), - - // Shape (radio). - shapeChoices: Object.values( STYLING_SHAPES ), - shape: getLocationStyle( 'shape' ), - setShape: ( shape ) => setLocationStyle( 'shape', shape ), - - // Label (dropdown). - labelChoices: Object.values( STYLING_LABELS ), - label: getLocationStyle( 'label' ), - setLabel: ( label ) => setLocationStyle( 'label', label ), - - // Layout (radio). - layoutChoices: Object.values( STYLING_LAYOUTS ), - supportsLayout: true, - layout: getLocationStyle( 'layout' ), - setLayout: ( layout ) => setLocationStyle( 'layout', layout ), - - // Tagline (checkbox). - taglineChoices: [ - { - value: 'tagline', - label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ), - }, - ], - supportsTagline: true, - tagline: getLocationStyle( 'tagline' ), - setTagline: ( tagline ) => setLocationStyle( 'tagline', tagline ), - }; -}; diff --git a/modules/ppcp-settings/resources/js/data/styling/hooks.js b/modules/ppcp-settings/resources/js/data/styling/hooks.js index de08f1124..45280de83 100644 --- a/modules/ppcp-settings/resources/js/data/styling/hooks.js +++ b/modules/ppcp-settings/resources/js/data/styling/hooks.js @@ -7,9 +7,19 @@ * @file */ +import { __ } from '@wordpress/i18n'; +import { useCallback, useState } from '@wordpress/element'; // Temporary import { useSelect, useDispatch } from '@wordpress/data'; import { STORE_NAME } from './constants'; +import { + STYLING_COLORS, + STYLING_LABELS, + STYLING_LAYOUTS, + STYLING_LOCATIONS, + STYLING_PAYMENT_METHODS, + STYLING_SHAPES, +} from './configuration'; const useTransient = ( key ) => useSelect( @@ -42,7 +52,93 @@ const useHooks = () => { }; }; -export const useState = () => { +export const useStore = () => { const { persist, isReady } = useHooks(); return { persist, isReady }; }; + +export const useStylingLocation = () => { + const [ location, setLocation ] = useState( 'cart' ); + return { location, setLocation }; +}; + +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 ] + ); + + return { + // Location (drop down). + locationChoices: Object.values( STYLING_LOCATIONS ), + locationDetails: STYLING_LOCATIONS[ location ], + + // Payment methods (checkboxes). + paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ), + paymentMethods: getLocationStyle( 'paymentMethods' ), + setPaymentMethods: ( methods ) => + setLocationStyle( 'paymentMethods', methods ), + + // Color (dropdown). + colorChoices: Object.values( STYLING_COLORS ), + color: getLocationStyle( 'color' ), + setColor: ( color ) => setLocationStyle( 'color', color ), + + // Shape (radio). + shapeChoices: Object.values( STYLING_SHAPES ), + shape: getLocationStyle( 'shape' ), + setShape: ( shape ) => setLocationStyle( 'shape', shape ), + + // Label (dropdown). + labelChoices: Object.values( STYLING_LABELS ), + label: getLocationStyle( 'label' ), + setLabel: ( label ) => setLocationStyle( 'label', label ), + + // Layout (radio). + layoutChoices: Object.values( STYLING_LAYOUTS ), + supportsLayout: true, + layout: getLocationStyle( 'layout' ), + setLayout: ( layout ) => setLocationStyle( 'layout', layout ), + + // Tagline (checkbox). + taglineChoices: [ + { + value: 'tagline', + label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ), + }, + ], + supportsTagline: true, + tagline: getLocationStyle( 'tagline' ), + setTagline: ( tagline ) => setLocationStyle( 'tagline', tagline ), + }; +};