♻️ Split the styling hook into multiple hook

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 } =
+	const { color, setColor, choices } = StylingHooks.useColorProps( location );
-		StylingHooks.useStylingProps( location );
 
 	return (
 		<SelectStylingSection
 			title={ __( 'Button Color', 'woocommerce-paypal-payments' ) }
 			className="button-color"
-			options={ colorChoices }
+			options={ choices }
 			value={ color }
 			onChange={ setColor }
 		/>

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 } =
+	const { label, setLabel, choices } = StylingHooks.useLabelProps( location );
-		StylingHooks.useStylingProps( location );
 
 	return (
 		<SelectStylingSection
 			title={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
 			className="button-label"
-			options={ labelChoices }
+			options={ choices }
 			value={ label }
 			onChange={ setLabel }
 		/>

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 } =
+	const { isAvailable, layout, setLayout, choices } =
-		StylingHooks.useStylingProps( location );
+		StylingHooks.useLayoutProps( location );
 
-	if ( ! supportsLayout ) {
+	if ( ! isAvailable ) {
 		return null;
 	}
 
@@ -15,7 +15,7 @@ const SectionButtonLayout = ( { location } ) => {
 		<RadiobuttonStylingSection
 			className="button-layout"
 			title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
-			options={ layoutChoices }
+			options={ choices }
 			selected={ layout }
 			onChange={ setLayout }
 		/>

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 } =
+	const { shape, setShape, choices } = StylingHooks.useShapeProps( location );
-		StylingHooks.useStylingProps( location );
 
 	return (
 		<RadiobuttonStylingSection
 			title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
 			className="button-shape"
-			options={ shapeChoices }
+			options={ choices }
 			selected={ shape }
 			onChange={ setShape }
 		/>

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 } =
+	const { choices, description } = StylingHooks.useLocationProps( location );
-		StylingHooks.useStylingProps( location );
-	const { description, link } = locationDetails || {};
-	const locationDescription = sprintf( description, link );
 
 	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 }
 			>
-				<Description asHtml={ true }>
+				<Description asHtml={ true }>{ description }</Description>
-					{ locationDescription }
-				</Description>
 			</SelectStylingSection>
 		</>
 	);

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 } =
+	const { paymentMethods, setPaymentMethods, choices } =
-		StylingHooks.useStylingProps( location );
+		StylingHooks.usePaymentMethodProps( location );
 
 	return (
 		<CheckboxStylingSection
 			title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
 			className="payment-methods"
-			options={ paymentMethodChoices }
+			options={ choices }
 			value={ paymentMethods }
 			onChange={ setPaymentMethods }
 		/>

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 } =
+	const { isAvailable, tagline, setTagline, choices } =
-		StylingHooks.useStylingProps( location );
+		StylingHooks.useTaglineProps( location );
 
-	if ( ! supportsTagline ) {
+	if ( ! isAvailable ) {
 		return null;
 	}
 
@@ -15,7 +15,7 @@ const SectionTagline = ( { location } ) => {
 		<CheckboxStylingSection
 			title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
 			className="tagline"
-			options={ taglineChoices }
+			options={ choices }
 			value={ tagline }
 			onChange={ setTagline }
 		/>

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';

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 = () => {
 			<ButtonShape location={ location } />
 			<ButtonLabel location={ location } />
 			<ButtonColor location={ location } />
-			<TagLine location={ location } />
+			<Tagline location={ location } />
 		</div>
 	);
 };

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).
+		choices: Object.values( STYLING_PAYMENT_METHODS ),
-		locationChoices: Object.values( STYLING_LOCATIONS ),
+		paymentMethods: getLocationProp( location, 'methods' ),
-		locationDetails: STYLING_LOCATIONS[ location ],
+		setPaymentMethods: ( methods ) =>
+			setLocationProp( location, 'methods', methods ),
+	};
+};
 
-		// Payment methods (checkboxes).
+export const useColorProps = ( location ) => {
-		paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ),
+	const { getLocationProp, setLocationProp } = useHooks();
-		paymentMethods: getLocationProp( 'methods' ),
-		setPaymentMethods: ( methods ) => setLocationProp( 'methods', methods ),
 
-		// Color (dropdown).
+	return {
-		colorChoices: Object.values( STYLING_COLORS ),
+		choices: Object.values( STYLING_COLORS ),
-		color: getLocationProp( 'color' ),
+		color: getLocationProp( location, 'color' ),
-		setColor: ( color ) => setLocationProp( 'color', color ),
+		setColor: ( color ) => setLocationProp( location, 'color', color ),
+	};
+};
 
-		// Shape (radio).
+export const useShapeProps = ( location ) => {
-		shapeChoices: Object.values( STYLING_SHAPES ),
+	const { getLocationProp, setLocationProp } = useHooks();
-		shape: getLocationProp( 'shape' ),
-		setShape: ( shape ) => setLocationProp( 'shape', shape ),
 
-		// Label (dropdown).
+	return {
-		labelChoices: Object.values( STYLING_LABELS ),
+		choices: Object.values( STYLING_SHAPES ),
-		label: getLocationProp( 'label' ),
+		shape: getLocationProp( location, 'shape' ),
-		setLabel: ( label ) => setLocationProp( 'label', label ),
+		setShape: ( shape ) => setLocationProp( location, 'shape', shape ),
+	};
+};
 
-		// Layout (radio).
+export const useLabelProps = ( location ) => {
-		layoutChoices: Object.values( STYLING_LAYOUTS ),
+	const { getLocationProp, setLocationProp } = useHooks();
-		supportsLayout: true,
-		layout: getLocationProp( 'layout' ),
-		setLayout: ( layout ) => setLocationProp( 'layout', layout ),
 
-		// Tagline (checkbox).
+	return {
-		taglineChoices: [
+		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,
+		isAvailable: true,
-		tagline: getLocationProp( 'tagline' ),
+		tagline: getLocationProp( location, 'tagline' ),
-		setTagline: ( tagline ) => setLocationProp( 'tagline', tagline ),
+		setTagline: ( tagline ) =>
+			setLocationProp( location, 'tagline', tagline ),
 	};
 };