♻️ Move dummy hook into redux store

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 { StylingHooks } from '../../../../../data';
-import { useStylingProps } from '../../Tabs/TabStyling';
-
 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 );
 

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js

@@ -1,15 +1,13 @@
 import { __ } from '@wordpress/i18n';
 
-// Dummy hook.
+import { StylingHooks } from '../../../../../data';
-import { useStylingLocation, useStylingProps } from '../../Tabs/TabStyling';
-
 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 (
 		<div className="settings-panel">
@@ -33,7 +31,7 @@ export default SettingsPanel;
 
 const SectionPaymentMethods = ( { location } ) => {
 	const { paymentMethods, setPaymentMethods, paymentMethodChoices } =
-		useStylingProps( location );
+		StylingHooks.useStylingProps( location );
 
 	return (
 		<StylingSectionWithCheckboxes
@@ -48,7 +46,7 @@ const SectionPaymentMethods = ( { location } ) => {
 
 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 (
 		<StylingSectionWithRadiobuttons
@@ -80,7 +79,8 @@ const SectionButtonShape = ( { location } ) => {
 };
 
 const SectionButtonLabel = ( { location } ) => {
-	const { label, setLabel, labelChoices } = useStylingProps( location );
+	const { label, setLabel, labelChoices } =
+		StylingHooks.useStylingProps( location );
 
 	return (
 		<StylingSectionWithSelect
@@ -94,7 +94,8 @@ const SectionButtonLabel = ( { location } ) => {
 };
 
 const SectionButtonColor = ( { location } ) => {
-	const { color, setColor, colorChoices } = useStylingProps( location );
+	const { color, setColor, colorChoices } =
+		StylingHooks.useStylingProps( location );
 
 	return (
 		<StylingSectionWithSelect
@@ -109,7 +110,7 @@ const SectionButtonColor = ( { location } ) => {
 
 const SectionButtonTagline = ( { location } ) => {
 	const { supportsTagline, tagline, setTagline, taglineChoices } =
-		useStylingProps( location );
+		StylingHooks.useStylingProps( location );
 
 	if ( ! supportsTagline ) {
 		return null;

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 ),
-	};
-};

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 ),
+	};
+};