From cbe8bfae6351fcdbe2f1781b6243a9c4f67a6d07 Mon Sep 17 00:00:00 2001
From: paul sealock <psealock@gmail.com>
Date: Wed, 29 May 2024 15:41:08 +1200
Subject: [PATCH] start components

---
 .../client/settings/components/checkbox.js    | 17 +++++++++++
 .../client/settings/components/index.js       |  1 +
 .../client/settings/content.js                | 28 +++++++++++++++++++
 .../client/settings/index.js                  | 15 ++++++++--
 .../client/settings/section-nav.js            |  3 +-
 .../src/Admin/Features/Settings.php           |  2 ++
 6 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/settings/components/checkbox.js
 create mode 100644 plugins/woocommerce-admin/client/settings/components/index.js
 create mode 100644 plugins/woocommerce-admin/client/settings/content.js

diff --git a/plugins/woocommerce-admin/client/settings/components/checkbox.js b/plugins/woocommerce-admin/client/settings/components/checkbox.js
new file mode 100644
index 00000000000..7ada257a9f6
--- /dev/null
+++ b/plugins/woocommerce-admin/client/settings/components/checkbox.js
@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+export const SettingsCheckbox = ( { setting } ) => {
+	return (
+		<div>
+			<h3>{ setting.title }</h3>
+			<CheckboxControl
+				label={ setting.desc }
+				onChange={ () => console.log( 'change' ) }
+				selected={ true }
+			/>
+		</div>
+	);
+};
diff --git a/plugins/woocommerce-admin/client/settings/components/index.js b/plugins/woocommerce-admin/client/settings/components/index.js
new file mode 100644
index 00000000000..ef1f042eea6
--- /dev/null
+++ b/plugins/woocommerce-admin/client/settings/components/index.js
@@ -0,0 +1 @@
+export { SettingsCheckbox } from './checkbox';
diff --git a/plugins/woocommerce-admin/client/settings/content.js b/plugins/woocommerce-admin/client/settings/content.js
new file mode 100644
index 00000000000..64faa174611
--- /dev/null
+++ b/plugins/woocommerce-admin/client/settings/content.js
@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { SettingsCheckbox } from './components';
+
+export const Content = ( { data } ) => {
+	const { settings } = data;
+
+	return (
+		<div>
+			{ settings.map( ( setting ) => {
+				switch ( setting.type ) {
+					case 'title':
+						return null;
+					case 'checkbox':
+						return (
+							<SettingsCheckbox
+								setting={ setting }
+								key={ setting.id }
+							/>
+						);
+					default:
+						return null;
+				}
+			} ) }
+		</div>
+	);
+};
diff --git a/plugins/woocommerce-admin/client/settings/index.js b/plugins/woocommerce-admin/client/settings/index.js
index 4b89da92f77..2bc46413b9c 100644
--- a/plugins/woocommerce-admin/client/settings/index.js
+++ b/plugins/woocommerce-admin/client/settings/index.js
@@ -1,17 +1,19 @@
 /**
  * External dependencies
  */
-import { useState } from '@wordpress/element';
+import { getQuery } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
 import { Tabs } from './tabs';
 import { SectionNav } from './section-nav';
+import { Content } from './content';
 import './style.scss';
 
 const Settings = ( { params } ) => {
 	const settingsData = window.wcSettings?.admin?.settingsPages;
+	const { section } = getQuery();
 
 	if ( ! settingsData ) {
 		return <div>Error getting data</div>;
@@ -22,10 +24,17 @@ const Settings = ( { params } ) => {
 			<Tabs data={ settingsData } page={ params.page }>
 				<div className="woocommerce-settings-layout">
 					<div className="woocommerce-settings-section-nav">
-						<SectionNav data={ settingsData[ params.page ] } />
+						<SectionNav
+							data={ settingsData[ params.page ] }
+							section={ section }
+						/>
 					</div>
 					<div className="woocommerce-settings-content">
-						<p>Content here</p>
+						<Content
+							data={
+								settingsData[ params.page ].sections[ section ]
+							}
+						/>
 					</div>
 				</div>
 			</Tabs>
diff --git a/plugins/woocommerce-admin/client/settings/section-nav.js b/plugins/woocommerce-admin/client/settings/section-nav.js
index d5a7e365b25..b84da2dfcba 100644
--- a/plugins/woocommerce-admin/client/settings/section-nav.js
+++ b/plugins/woocommerce-admin/client/settings/section-nav.js
@@ -9,10 +9,9 @@ import {
 import { getNewPath, navigateTo, getQuery } from '@woocommerce/navigation';
 import classnames from 'classnames';
 
-export const SectionNav = ( { data } ) => {
+export const SectionNav = ( { data, section } ) => {
 	const { sections } = data;
 	const sectionKeys = Object.keys( sections );
-	const { section } = getQuery();
 
 	if ( sectionKeys.length === 1 ) {
 		return null;
diff --git a/plugins/woocommerce/src/Admin/Features/Settings.php b/plugins/woocommerce/src/Admin/Features/Settings.php
index 79a08a2074f..22534c321d1 100644
--- a/plugins/woocommerce/src/Admin/Features/Settings.php
+++ b/plugins/woocommerce/src/Admin/Features/Settings.php
@@ -54,6 +54,8 @@ class Settings {
 			return $settings;
 		}
 
+		// TODO: change so its only being added on Settings page, otherwise bail.
+
 		$setting_pages = \WC_Admin_Settings::get_settings_pages();
 		$pages         = array();
 		foreach ( $setting_pages as $setting_page ) {