From 033b6e5b74ca2194e7c1b5bf470bf6d03610eb72 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 16 Jan 2025 20:01:22 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Move=20styling=20options=20to=20Red?=
 =?UTF-8?q?ux=20store!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/js/data/styling/hooks.js        | 46 +++++++------------
 1 file changed, 16 insertions(+), 30 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/data/styling/hooks.js b/modules/ppcp-settings/resources/js/data/styling/hooks.js
index 7db797d3a..5cf07655e 100644
--- a/modules/ppcp-settings/resources/js/data/styling/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/styling/hooks.js
@@ -8,8 +8,8 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { useCallback, useState } from '@wordpress/element'; // Temporary
-import { useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element'; // Temporary
+import { useDispatch, useSelect } from '@wordpress/data';
 
 import { createHooksForStore } from '../utils';
 import { STORE_NAME } from './constants';
@@ -33,43 +33,29 @@ const useHooks = () => {
 	const [ location, setLocation ] = useTransient( 'location' );
 
 	// Persistent accessors.
-	// TODO - this is a dummy implementation.
-	const defaultStyle = {
-		paymentMethods: [],
-		color: 'gold',
-		shape: 'rect',
-		label: 'paypal',
-		layout: 'vertical',
-		tagline: false,
-	};
+	const persistentData = useSelect(
+		( select ) => select( STORE_NAME ).persistentData(),
+		[]
+	);
 
-	// This data-struct is already present in the Redux store via persistentData, e.g. "persistentData.cart.label"
-	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 [ locationStyles, setLocationStyles ] = usePersistent( location );
 
 	const getLocationProp = useCallback(
-		( prop ) => styles[ location ]?.[ prop ],
-		[ location, styles ]
+		( prop ) => {
+			return persistentData[ location ]?.[ prop ];
+		},
+		[ location, persistentData ]
 	);
 
 	const setLocationProp = useCallback(
 		( prop, value ) => {
-			setStyles( ( prevState ) => ( {
-				...prevState,
-				[ location ]: {
-					...prevState[ location ],
-					[ prop ]: value,
-				},
-			} ) );
+			setLocationStyles( {
+				...locationStyles,
+				[ prop ]: value,
+			} );
 		},
-		[ location ]
+		[ locationStyles, setLocationStyles ]
 	);
-	// end of dummy implementation
 
 	return {
 		persist,