♻️ Add a “name” prop to every CheckboxGroup

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js

@@ -49,7 +49,7 @@ const LocationSelector = ( { location, setLocation } ) => {
 				) }
 			</SelectStylingSection>
 			<CheckboxStylingSection
-				className="location-activation"
+				name="location-activation"
 				separatorAndGap={ false }
 				options={ [ activateCheckbox ] }
 				value={ isActive }

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js

@@ -9,8 +9,8 @@ const SectionPaymentMethods = ( { location } ) => {
 
 	return (
 		<CheckboxStylingSection
+			name="payment-methods"
 			title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
-			className="payment-methods"
 			options={ choices }
 			value={ paymentMethods }
 			onChange={ setPaymentMethods }

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/Tagline.js

@@ -21,7 +21,7 @@ const SectionTagline = ( { location } ) => {
 
 	return (
 		<CheckboxStylingSection
-			className="tagline"
+			name="tagline"
 			separatorAndGap={ false }
 			options={ [ checkbox ] }
 			value={ tagline }

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js

@@ -6,6 +6,7 @@ import StylingSection from './StylingSection';
 
 const StylingSectionWithCheckboxes = ( {
 	title,
+	name,
 	className = '',
 	description = '',
 	separatorAndGap = true,
@@ -14,7 +15,14 @@ const StylingSectionWithCheckboxes = ( {
 	onChange,
 	children,
 } ) => {
-	className = classNames( 'ppcp--has-checkboxes', className );
+	className = classNames( 'ppcp--has-checkboxes', name, className );
+
+	if ( ! name ) {
+		console.error(
+			'Checkbox sections need a unique name! No name given to:',
+			title
+		);
+	}
 
 	return (
 		<StylingSection
@@ -25,6 +33,7 @@ const StylingSectionWithCheckboxes = ( {
 		>
 			<VStack spacing={ 6 }>
 				<CheckboxGroup
+					name={ name }
 					options={ options }
 					value={ value }
 					onChange={ onChange }