woocommerce-paypal-payments/modules/ppcp-settings/resources/js/data/styling/hooks.js

/**
 * Hooks: Provide the main API for components to interact with the store.
 *
 * These encapsulate store interactions, offering a consistent interface.
 * Hooks simplify data access and manipulation for components.
 *
 * @file
 */

import { __ } from '@wordpress/i18n';
import { useCallback } from '@wordpress/element'; // Temporary
import { useDispatch, useSelect } from '@wordpress/data';

import { createHooksForStore } from '../utils';
import { STORE_NAME } from './constants';
import {
	STYLING_COLORS,
	STYLING_LABELS,
	STYLING_LAYOUTS,
	STYLING_LOCATIONS,
	STYLING_PAYMENT_METHODS,
	STYLING_SHAPES,
} from './configuration';

const useHooks = () => {
	const { useTransient } = createHooksForStore( STORE_NAME );
	const { persist, setPersistent } = useDispatch( STORE_NAME );

	// Read-only flags and derived state.

	// Transient accessors.
	const [ isReady ] = useTransient( 'isReady' );
	const [ location, setLocation ] = useTransient( 'location' );

	// Persistent accessors.
	const persistentData = useSelect(
		( select ) => select( STORE_NAME ).persistentData(),
		[]
	);

	const getLocationProp = useCallback(
		( locatonId, prop ) => {
			if ( undefined === persistentData[ locatonId ]?.[ prop ] ) {
				console.error(
					`Trying to access non-existent style property: ${ locatonId }.${ prop }. Possibly wrong style name - review the reducer.`
				);
			}
			return persistentData[ locatonId ]?.[ prop ];
		},
		[ persistentData ]
	);

	const setLocationProp = useCallback(
		( locationId, prop, value ) => {
			const updatedStyles = {
				...persistentData[ locationId ],
				[ prop ]: value,
			};

			setPersistent( locationId, updatedStyles );
		},
		[ persistentData, setPersistent ]
	);

	return {
		persist,
		isReady,
		location,
		setLocation,
		getLocationProp,
		setLocationProp,
	};
};

export const useStore = () => {
	const { persist, isReady } = useHooks();
	return { persist, isReady };
};

export const useStylingLocation = () => {
	const { location, setLocation } = useHooks();
	return { location, setLocation };
};

export const useStylingProps = ( location ) => {
	const { getLocationProp, setLocationProp } = useHooks();

	return {
		// Location (drop down).
		locationChoices: Object.values( STYLING_LOCATIONS ),
		locationDetails: STYLING_LOCATIONS[ location ],

		// Payment methods (checkboxes).
		paymentMethodChoices: Object.values( STYLING_PAYMENT_METHODS ),
		paymentMethods: getLocationProp( 'methods' ),
		setPaymentMethods: ( methods ) => setLocationProp( 'methods', methods ),

		// Color (dropdown).
		colorChoices: Object.values( STYLING_COLORS ),
		color: getLocationProp( 'color' ),
		setColor: ( color ) => setLocationProp( 'color', color ),

		// Shape (radio).
		shapeChoices: Object.values( STYLING_SHAPES ),
		shape: getLocationProp( 'shape' ),
		setShape: ( shape ) => setLocationProp( 'shape', shape ),

		// Label (dropdown).
		labelChoices: Object.values( STYLING_LABELS ),
		label: getLocationProp( 'label' ),
		setLabel: ( label ) => setLocationProp( 'label', label ),

		// Layout (radio).
		layoutChoices: Object.values( STYLING_LAYOUTS ),
		supportsLayout: true,
		layout: getLocationProp( 'layout' ),
		setLayout: ( layout ) => setLocationProp( 'layout', layout ),

		// Tagline (checkbox).
		taglineChoices: [
			{
				value: 'tagline',
				label: __( 'Enable Tagline', 'woocommerce-paypal-payments' ),
			},
		],
		supportsTagline: true,
		tagline: getLocationProp( 'tagline' ),
		setTagline: ( tagline ) => setLocationProp( 'tagline', tagline ),
	};
};