♻️ Move dummy hook into redux store

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