From c4c1cd7c24a0992207bcc7d5e0ce07bcd3733924 Mon Sep 17 00:00:00 2001
From: Narek Zakarian <narekzakarian@gmail.com>
Date: Wed, 22 Jan 2025 14:57:21 +0400
Subject: [PATCH] toggle the checkboxes when clicking inside the box

---
 .../ReusableComponents/SelectBox.js           | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js
index a2abcc47c..d9bfc23a6 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js
@@ -12,8 +12,31 @@ const SelectBox = ( props ) => {
 		boxClassName += ' selected';
 	}
 
+	const handleClick = () => {
+		if ( props.type === 'checkbox' ) {
+			let newValue;
+
+			if ( Array.isArray( props.currentValue ) ) {
+				if ( props.currentValue.includes( props.value ) ) {
+					newValue = props.currentValue.filter(
+						( optionValue ) => optionValue !== props.value
+					);
+				} else {
+					newValue = [ ...props.currentValue, props.value ];
+				}
+			} else {
+				newValue = ! props.currentValue;
+			}
+
+			props.changeCallback( newValue );
+		}
+	};
+
 	return (
-		<div className={ boxClassName }>
+		<div
+			className={ boxClassName }
+			onClick={ props.type === 'checkbox' ? handleClick : undefined }
+		>
 			{ props.type === 'radio' && (
 				<PayPalRdb
 					{ ...{
@@ -22,11 +45,7 @@ const SelectBox = ( props ) => {
 					} }
 				/>
 			) }
-			{ props.type === 'checkbox' && (
-				<PayPalCheckbox
-					{ ...props }
-				/>
-			) }
+			{ props.type === 'checkbox' && <PayPalCheckbox { ...props } /> }
 			<div className="ppcp-r-select-box__content">
 				<div className="ppcp-r-select-box__content-inner">
 					<span className="ppcp-r-select-box__title">