From 18429d91e5d87edd5613d760a0d3e15c94860510 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 17 Jan 2025 13:05:25 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Split=20the=20styling=20ho?= =?UTF-8?q?ok=20into=20multiple=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Styling/Content/ButtonColor.js | 5 +- .../Components/Styling/Content/ButtonLabel.js | 5 +- .../Styling/Content/ButtonLayout.js | 8 +- .../Components/Styling/Content/ButtonShape.js | 5 +- .../Styling/Content/LocationSelector.js | 13 +-- .../Styling/Content/PaymentMethods.js | 6 +- .../Components/Styling/Content/TagLine.js | 8 +- .../Components/Styling/Content/index.js | 2 +- .../Components/Styling/SettingsPanel.js | 4 +- .../resources/js/data/styling/hooks.js | 97 +++++++++++++------ 10 files changed, 90 insertions(+), 63 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js index acadc3943..29b98069c 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js @@ -4,14 +4,13 @@ import { StylingHooks } from '../../../../../../data'; import { SelectStylingSection } from '../Layout'; const SectionButtonColor = ( { location } ) => { - const { color, setColor, colorChoices } = - StylingHooks.useStylingProps( location ); + const { color, setColor, choices } = StylingHooks.useColorProps( location ); return ( diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js index a0763a049..de7c1a103 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js @@ -4,14 +4,13 @@ import { StylingHooks } from '../../../../../../data'; import { SelectStylingSection } from '../Layout'; const SectionButtonLabel = ( { location } ) => { - const { label, setLabel, labelChoices } = - StylingHooks.useStylingProps( location ); + const { label, setLabel, choices } = StylingHooks.useLabelProps( location ); return ( diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js index 0b6407ef1..1acf666f9 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js @@ -4,10 +4,10 @@ import { StylingHooks } from '../../../../../../data'; import { RadiobuttonStylingSection } from '../Layout'; const SectionButtonLayout = ( { location } ) => { - const { supportsLayout, layout, setLayout, layoutChoices } = - StylingHooks.useStylingProps( location ); + const { isAvailable, layout, setLayout, choices } = + StylingHooks.useLayoutProps( location ); - if ( ! supportsLayout ) { + if ( ! isAvailable ) { return null; } @@ -15,7 +15,7 @@ const SectionButtonLayout = ( { location } ) => { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js index 68eaef1dc..71bc5bebe 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js @@ -4,14 +4,13 @@ import { StylingHooks } from '../../../../../../data'; import { RadiobuttonStylingSection } from '../Layout'; const SectionButtonShape = ( { location } ) => { - const { shape, setShape, shapeChoices } = - StylingHooks.useStylingProps( location ); + const { shape, setShape, choices } = StylingHooks.useShapeProps( location ); return ( diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js index 2fd21caa0..f5d8231b8 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js @@ -1,14 +1,11 @@ -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { StylingHooks } from '../../../../../../data'; import { Description } from '../../../../../ReusableComponents/SettingsBlocks'; import { SelectStylingSection, StylingSection } from '../Layout'; const LocationSelector = ( { location, setLocation } ) => { - const { locationChoices, locationDetails } = - StylingHooks.useStylingProps( location ); - const { description, link } = locationDetails || {}; - const locationDescription = sprintf( description, link ); + const { choices, description } = StylingHooks.useLocationProps( location ); return ( <> @@ -25,13 +22,11 @@ const LocationSelector = ( { location, setLocation } ) => { className="location-selector" title={ __( 'Location', 'woocommerce-paypal-payments' ) } separatorAndGap={ false } - options={ locationChoices } + options={ choices } value={ location } onChange={ setLocation } > - - { locationDescription } - + { description } ); diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js index e379f876b..0397d34c3 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js @@ -4,14 +4,14 @@ import { StylingHooks } from '../../../../../../data'; import { CheckboxStylingSection } from '../Layout'; const SectionPaymentMethods = ( { location } ) => { - const { paymentMethods, setPaymentMethods, paymentMethodChoices } = - StylingHooks.useStylingProps( location ); + const { paymentMethods, setPaymentMethods, choices } = + StylingHooks.usePaymentMethodProps( location ); return ( diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js index 66fa4cd1f..ec292455c 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js @@ -4,10 +4,10 @@ import { StylingHooks } from '../../../../../../data'; import { CheckboxStylingSection } from '../Layout'; const SectionTagline = ( { location } ) => { - const { supportsTagline, tagline, setTagline, taglineChoices } = - StylingHooks.useStylingProps( location ); + const { isAvailable, tagline, setTagline, choices } = + StylingHooks.useTaglineProps( location ); - if ( ! supportsTagline ) { + if ( ! isAvailable ) { return null; } @@ -15,7 +15,7 @@ const SectionTagline = ( { location } ) => { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js index 27a4e3d56..4529fb9eb 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js @@ -4,4 +4,4 @@ export { default as ButtonLabel } from './ButtonLabel'; export { default as ButtonLayout } from './ButtonLayout'; export { default as ButtonShape } from './ButtonShape'; export { default as PaymentMethods } from './PaymentMethods'; -export { default as TagLine } from './TagLine'; +export { default as Tagline } from './Tagline'; 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 ad65185cf..9151781f7 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 @@ -6,7 +6,7 @@ import { ButtonShape, ButtonLabel, ButtonColor, - TagLine, + Tagline, } from './Content'; const SettingsPanel = () => { @@ -23,7 +23,7 @@ const SettingsPanel = () => { - + ); }; diff --git a/modules/ppcp-settings/resources/js/data/styling/hooks.js b/modules/ppcp-settings/resources/js/data/styling/hooks.js index 946aa4cc7..2e77d41f2 100644 --- a/modules/ppcp-settings/resources/js/data/styling/hooks.js +++ b/modules/ppcp-settings/resources/js/data/styling/hooks.js @@ -7,7 +7,7 @@ * @file */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useCallback } from '@wordpress/element'; // Temporary import { useDispatch, useSelect } from '@wordpress/data'; @@ -82,49 +82,84 @@ export const useStylingLocation = () => { return { location, setLocation }; }; -export const useStylingProps = ( location ) => { +export const useLocationProps = ( location ) => { + const details = STYLING_LOCATIONS[ location ] ?? {}; + + // eslint-disable-next-line @wordpress/valid-sprintf + const description = sprintf( details.description ?? '', details.link ); + + return { + choices: Object.values( STYLING_LOCATIONS ), + details, + description, + }; +}; + +export const usePaymentMethodProps = ( location ) => { const { getLocationProp, setLocationProp } = useHooks(); return { - // Location (drop down). - locationChoices: Object.values( STYLING_LOCATIONS ), - locationDetails: STYLING_LOCATIONS[ location ], + choices: Object.values( STYLING_PAYMENT_METHODS ), + paymentMethods: getLocationProp( location, 'methods' ), + setPaymentMethods: ( methods ) => + setLocationProp( location, 'methods', methods ), + }; +}; - // Payment methods (checkboxes). - paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ), - paymentMethods: getLocationProp( 'methods' ), - setPaymentMethods: ( methods ) => setLocationProp( 'methods', methods ), +export const useColorProps = ( location ) => { + const { getLocationProp, setLocationProp } = useHooks(); - // Color (dropdown). - colorChoices: Object.values( STYLING_COLORS ), - color: getLocationProp( 'color' ), - setColor: ( color ) => setLocationProp( 'color', color ), + return { + choices: Object.values( STYLING_COLORS ), + color: getLocationProp( location, 'color' ), + setColor: ( color ) => setLocationProp( location, 'color', color ), + }; +}; - // Shape (radio). - shapeChoices: Object.values( STYLING_SHAPES ), - shape: getLocationProp( 'shape' ), - setShape: ( shape ) => setLocationProp( 'shape', shape ), +export const useShapeProps = ( location ) => { + const { getLocationProp, setLocationProp } = useHooks(); - // Label (dropdown). - labelChoices: Object.values( STYLING_LABELS ), - label: getLocationProp( 'label' ), - setLabel: ( label ) => setLocationProp( 'label', label ), + return { + choices: Object.values( STYLING_SHAPES ), + shape: getLocationProp( location, 'shape' ), + setShape: ( shape ) => setLocationProp( location, 'shape', shape ), + }; +}; - // Layout (radio). - layoutChoices: Object.values( STYLING_LAYOUTS ), - supportsLayout: true, - layout: getLocationProp( 'layout' ), - setLayout: ( layout ) => setLocationProp( 'layout', layout ), +export const useLabelProps = ( location ) => { + const { getLocationProp, setLocationProp } = useHooks(); - // Tagline (checkbox). - taglineChoices: [ + return { + choices: Object.values( STYLING_LABELS ), + label: getLocationProp( location, 'label' ), + setLabel: ( label ) => setLocationProp( location, 'label', label ), + }; +}; + +export const useLayoutProps = ( location ) => { + const { getLocationProp, setLocationProp } = useHooks(); + + return { + choices: Object.values( STYLING_LAYOUTS ), + isAvailable: true, + layout: getLocationProp( location, 'layout' ), + setLayout: ( layout ) => setLocationProp( location, 'layout', layout ), + }; +}; + +export const useTaglineProps = ( location ) => { + const { getLocationProp, setLocationProp } = useHooks(); + + return { + choices: [ { value: 'tagline', label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ), }, ], - supportsTagline: true, - tagline: getLocationProp( 'tagline' ), - setTagline: ( tagline ) => setLocationProp( 'tagline', tagline ), + isAvailable: true, + tagline: getLocationProp( location, 'tagline' ), + setTagline: ( tagline ) => + setLocationProp( location, 'tagline', tagline ), }; };