Fix toggle animation issue

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js

@@ -5,20 +5,13 @@ 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={ [
-					() => (
+			<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
@@ -35,26 +28,20 @@ const PaymentMethodItemBlock = ( props ) => {
 					<div className="ppcp-r-settings-block__payment-methods__item__footer">
 						<ToggleControl
 							__nextHasNoMarginBottom={ true }
-									checked={ props.id === paymentMethodState }
-									onChange={ handleCheckboxState }
+							checked={ isChecked }
+							onChange={ setIsChecked }
 						/>
 						{ Modal && (
 							<div
 								className="ppcp-r-settings-block__payment-methods__item__settings"
-										onClick={ () =>
-											setModalIsVisible( true )
-										}
+								onClick={ () => setModalIsVisible( true ) }
 							>
-										{ data().getImage(
-											'icon-settings.svg'
-										) }
+								{ data().getImage( 'icon-settings.svg' ) }
 							</div>
 						) }
 					</div>
 				</div>
-					),
-				] }
-			/>
+			</SettingsBlock>
 			{ Modal && modalIsVisible && (
 				<Modal setModalIsVisible={ setModalIsVisible } />
 			) }

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 )
+								}
 							/>
 						) ) }
 					</>

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js

@@ -1,11 +1,12 @@
-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 ) => (
+			{ children ||
+				components.map( ( Component, index ) => (
 					<Component key={ index } />
 				) ) }
 		</div>