gather form data

plugins/woocommerce-admin/client/settings/components/checkbox.js

@@ -2,15 +2,22 @@
  * External dependencies
  */
 import { CheckboxControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
-export const SettingsCheckbox = ( { setting } ) => {
+export const SettingsCheckbox = ( { setting, handleFormChange } ) => {
+	const [ checked, setChecked ] = useState( 'yes' === setting.value );
+	const onChange = ( value ) => {
+		setChecked( value );
+		handleFormChange( { id: setting.id, value: value ? 'yes' : 'no' } );
+	};
 	return (
 		<div className="woocommerce-settings-element">
 			<h4>{ setting.title }</h4>
 			<CheckboxControl
+				id={ setting.id }
 				label={ setting.desc }
-				onChange={ () => console.log( 'change' ) }
-				checked={ 'yes' === setting.value }
+				onChange={ onChange }
+				checked={ checked }
 			/>
 		</div>
 	);

plugins/woocommerce-admin/client/settings/content.js

@@ -1,19 +1,59 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useRef, useEffect } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { SettingsCheckbox } from './components';
+import { set } from 'lodash';
 
 export const Content = ( { data } ) => {
 	const { settings } = data;
+	const [ formData, setFormData ] = useState( {} );
+	const formRef = useRef( null );
 
-	console.log( settings );
+	const gatherFormInputs = () => {
+		const formElements = formRef.current.querySelectorAll(
+			'input' // For now. There will be more.
+		);
+		const data = {};
+		formElements.forEach( ( input ) => {
+			const value =
+				// Only looking at checkboxes for now.
+				input.type === input.checked ? 'yes' : 'no';
+			data[ input.id || input.name ] = value;
+		} );
+
+		setFormData( data );
+	};
+
+	const handleFormChange = ( { id, value } ) => {
+		setFormData( {
+			...formData,
+			[ id ]: value,
+		} );
+	};
+
+	const handleSubmit = ( event ) => {
+		event.preventDefault();
+		console.log( 'Form submitted:', formData );
+	};
+
+	// Run once to gather inputs on initial render
+	useEffect( () => {
+		gatherFormInputs();
+	}, [] );
 
 	if ( ! settings ) {
 		return null;
 	}
 
 	return (
-		<div>
+		<form ref={ formRef } id="mainform" onSubmit={ handleSubmit }>
 			{ settings.map( ( setting, idx ) => {
 				const key = setting.id || setting.title || idx;
 				switch ( setting.type ) {
@@ -28,7 +68,11 @@ export const Content = ( { data } ) => {
 						);
 					case 'checkbox':
 						return (
-							<SettingsCheckbox setting={ setting } key={ key } />
+							<SettingsCheckbox
+								setting={ setting }
+								key={ key }
+								handleFormChange={ handleFormChange }
+							/>
 						);
 					case 'slotfill_placeholder':
 						return (
@@ -42,6 +86,9 @@ export const Content = ( { data } ) => {
 						return null;
 				}
 			} ) }
-		</div>
+			<Button variant="primary" type="submit">
+				{ __( 'Save changes', 'woocommerce' ) }
+			</Button>
+		</form>
 	);
 };