From 51613c30201aaaafe951e5356e35346dd5ab008c Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Mon, 16 Dec 2024 16:00:27 +0100
Subject: [PATCH] Fix toggle animation issue

---
 .../SettingsBlocks/PaymentMethodItemBlock.js  | 75 ++++++++-----------
 .../SettingsBlocks/PaymentMethodsBlock.js     | 13 ++++
 .../SettingsBlocks/SettingsBlock.js           |  9 ++-
 3 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
index 3f3827f76..9dadf3023 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
@@ -5,56 +5,43 @@ import PaymentMethodIcon from '../PaymentMethodIcon';
 import data from '../../../utils/data';
 
 const PaymentMethodItemBlock = ( props ) => {
-	const [ paymentMethodState, setPaymentMethodState ] = useState();
+	const [ isChecked, setIsChecked ] = useState( false );
 	const [ modalIsVisible, setModalIsVisible ] = useState( false );
 	const Modal = props?.modal;
 
-	const handleCheckboxState = ( checked ) => {
-		setPaymentMethodState( checked ? props.id : null );
-	};
-
 	return (
 		<>
-			<SettingsBlock
-				className="ppcp-r-settings-block__payment-methods__item"
-				components={ [
-					() => (
-						<div className="ppcp-r-settings-block__payment-methods__item__inner">
-							<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
-								<PaymentMethodIcon
-									icons={ [ props.icon ] }
-									type={ props.icon }
-								/>
-								<span className="ppcp-r-settings-block__payment-methods__item__title">
-									{ props.title }
-								</span>
+			<SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
+				<div className="ppcp-r-settings-block__payment-methods__item__inner">
+					<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
+						<PaymentMethodIcon
+							icons={ [ props.icon ] }
+							type={ props.icon }
+						/>
+						<span className="ppcp-r-settings-block__payment-methods__item__title">
+							{ props.title }
+						</span>
+					</div>
+					<p className="ppcp-r-settings-block__payment-methods__item__description">
+						{ props.description }
+					</p>
+					<div className="ppcp-r-settings-block__payment-methods__item__footer">
+						<ToggleControl
+							__nextHasNoMarginBottom={ true }
+							checked={ isChecked }
+							onChange={ setIsChecked }
+						/>
+						{ Modal && (
+							<div
+								className="ppcp-r-settings-block__payment-methods__item__settings"
+								onClick={ () => setModalIsVisible( true ) }
+							>
+								{ data().getImage( 'icon-settings.svg' ) }
 							</div>
-							<p className="ppcp-r-settings-block__payment-methods__item__description">
-								{ props.description }
-							</p>
-							<div className="ppcp-r-settings-block__payment-methods__item__footer">
-								<ToggleControl
-									__nextHasNoMarginBottom={ true }
-									checked={ props.id === paymentMethodState }
-									onChange={ handleCheckboxState }
-								/>
-								{ Modal && (
-									<div
-										className="ppcp-r-settings-block__payment-methods__item__settings"
-										onClick={ () =>
-											setModalIsVisible( true )
-										}
-									>
-										{ data().getImage(
-											'icon-settings.svg'
-										) }
-									</div>
-								) }
-							</div>
-						</div>
-					),
-				] }
-			/>
+						) }
+					</div>
+				</div>
+			</SettingsBlock>
 			{ Modal && modalIsVisible && (
 				<Modal setModalIsVisible={ setModalIsVisible } />
 			) }
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
index 68a18ad4b..28ed05f8c 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
@@ -1,7 +1,14 @@
+import { useState, useCallback } from '@wordpress/element';
 import SettingsBlock from './SettingsBlock';
 import PaymentMethodItemBlock from './PaymentMethodItemBlock';
 
 const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
+	const [ selectedMethod, setSelectedMethod ] = useState( null );
+
+	const handleSelect = useCallback( ( methodId, isSelected ) => {
+		setSelectedMethod( isSelected ? methodId : null );
+	}, [] );
+
 	if ( paymentMethods.length === 0 ) {
 		return null;
 	}
@@ -16,6 +23,12 @@ const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
 							<PaymentMethodItemBlock
 								key={ paymentMethod.id }
 								{ ...paymentMethod }
+								isSelected={
+									selectedMethod === paymentMethod.id
+								}
+								onSelect={ ( checked ) =>
+									handleSelect( paymentMethod.id, checked )
+								}
 							/>
 						) ) }
 					</>
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
index 5e4985104..bb5de947a 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
@@ -1,13 +1,14 @@
-const SettingsBlock = ( { className, components = [] } ) => {
+const SettingsBlock = ( { className, components = [], children } ) => {
 	const blockClassName = [ 'ppcp-r-settings-block', className ].filter(
 		Boolean
 	);
 
 	return (
 		<div className={ blockClassName.join( ' ' ) }>
-			{ components.map( ( Component, index ) => (
-				<Component key={ index } />
-			) ) }
+			{ children ||
+				components.map( ( Component, index ) => (
+					<Component key={ index } />
+				) ) }
 		</div>
 	);
 };