From 5c371d928ea4f455e6b0b4e36cb31df124430abf Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 17 Jan 2025 16:17:33 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Implement=20logic=20for=20the=20ena?=
 =?UTF-8?q?ble=20buttons=20checkbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Styling/Content/LocationSelector.js       |  6 ++-
 .../Components/Styling/SettingsPanel.js       | 40 ++++++++++++++-----
 .../resources/js/data/styling/hooks.js        |  3 ++
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
index c5acbe81e..a747e93b3 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
@@ -10,7 +10,8 @@ import {
 } from '../Layout';
 
 const LocationSelector = ( { location, setLocation } ) => {
-	const { choices, details } = StylingHooks.useLocationProps( location );
+	const { choices, details, isActive, setActive } =
+		StylingHooks.useLocationProps( location );
 
 	const activateCheckbox = {
 		value: 'active',
@@ -51,7 +52,8 @@ const LocationSelector = ( { location, setLocation } ) => {
 				className="location-activation"
 				separatorAndGap={ false }
 				options={ [ activateCheckbox ] }
-				value={ 'active' }
+				value={ isActive }
+				onChange={ setActive }
 			/>
 		</>
 	);
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
index 6592b0603..dd5b383b8 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
@@ -6,16 +6,36 @@ import {
 	ButtonLabel,
 	ButtonColor,
 } from './Content';
+import { StylingHooks } from '../../../../../data';
 
-const SettingsPanel = ( { location, setLocation } ) => (
-	<div className="settings-panel">
-		<LocationSelector location={ location } setLocation={ setLocation } />
-		<PaymentMethods location={ location } />
-		<ButtonLayout location={ location } />
-		<ButtonShape location={ location } />
-		<ButtonLabel location={ location } />
-		<ButtonColor location={ location } />
-	</div>
-);
+const SettingsPanel = ( { location, setLocation } ) => {
+	const { isActive } = StylingHooks.useLocationProps( location );
+
+	const LocationDetails = () => {
+		if ( ! isActive ) {
+			return null;
+		}
+
+		return (
+			<>
+				<PaymentMethods location={ location } />
+				<ButtonLayout location={ location } />
+				<ButtonShape location={ location } />
+				<ButtonLabel location={ location } />
+				<ButtonColor location={ location } />
+			</>
+		);
+	};
+
+	return (
+		<div className="settings-panel">
+			<LocationSelector
+				location={ location }
+				setLocation={ setLocation }
+			/>
+			<LocationDetails />
+		</div>
+	);
+};
 
 export default SettingsPanel;
diff --git a/modules/ppcp-settings/resources/js/data/styling/hooks.js b/modules/ppcp-settings/resources/js/data/styling/hooks.js
index 3a926439b..79314e18b 100644
--- a/modules/ppcp-settings/resources/js/data/styling/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/styling/hooks.js
@@ -83,11 +83,14 @@ export const useStylingLocation = () => {
 };
 
 export const useLocationProps = ( location ) => {
+	const { getLocationProp, setLocationProp } = useHooks();
 	const details = STYLING_LOCATIONS[ location ] ?? {};
 
 	return {
 		choices: Object.values( STYLING_LOCATIONS ),
 		details,
+		isActive: getLocationProp( location, 'enabled' ),
+		setActive: ( state ) => setLocationProp( location, 'enabled', state ),
 	};
 };