From c2859e362ad38b9d2685bae71f1c56ad0020333e Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 28 Jan 2025 12:42:43 +0100
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=90=9B=20Fix=20the=20JS=20error=20abo?=
 =?UTF-8?q?ut=20=E2=80=9CButton=20not=20defined=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SettingsBlocks/PaymentMethodItemBlock.js      | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 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 df2c5159c..d8a0bb775 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
@@ -1,4 +1,5 @@
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, Icon, Button } from '@wordpress/components';
+import { cog } from '@wordpress/icons';
 
 import SettingsBlock from '../SettingsBlock';
 import PaymentMethodIcon from '../PaymentMethodIcon';
@@ -13,12 +14,12 @@ const PaymentMethodItemBlock = ( {
 		<SettingsBlock className="ppcp--method-item" separatorAndGap={ false }>
 			<div className="ppcp--method-inner">
 				<div className="ppcp--method-title-wrapper">
-                    { paymentMethod?.icon && (
-                        <PaymentMethodIcon
-                            icons={ [ paymentMethod.icon ] }
-                            type={ paymentMethod.icon }
-                        />
-                    ) }
+					{ paymentMethod?.icon && (
+						<PaymentMethodIcon
+							icons={ [ paymentMethod.icon ] }
+							type={ paymentMethod.icon }
+						/>
+					) }
 					<span className="ppcp--method-title">
 						{ paymentMethod.itemTitle }
 					</span>

From dc6c8e2316e5ba3e0561521c148bea82d828eee2 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 28 Jan 2025 12:44:30 +0100
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=90=9B=20Fix=20JS=20error=20in=20the?=
 =?UTF-8?q?=20payment=20method=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/Components/Screens/Settings/Components/Payment/Modal.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
index 2865e8777..8930167f3 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
@@ -11,7 +11,7 @@ import PaymentMethodModal from '../../../../ReusableComponents/PaymentMethodModa
 import { PaymentHooks } from '../../../../../data';
 
 const Modal = ( { method, setModalIsVisible, onSave } ) => {
-	const { paymentMethods } = PaymentHooks.usePaymentMethods();
+	const { all: paymentMethods } = PaymentHooks.usePaymentMethods();
 	const {
 		paypalShowLogo,
 		threeDSecure,

From d547a3b21836b5739ffd8efd20721e49f8c4a318 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 28 Jan 2025 12:53:33 +0100
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A9=B9=20Fix=20React=20deprecation=20?=
 =?UTF-8?q?warnings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReusableComponents/Controls/ControlToggleButton.js         | 2 +-
 .../SettingsBlocks/PaymentMethodItemBlock.js                   | 2 +-
 .../js/Components/ReusableComponents/SettingsToggleBlock.js    | 1 +
 .../js/Components/Screens/Settings/Components/Payment/Modal.js | 3 ++-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlToggleButton.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlToggleButton.js
index 86350f5c7..2d648e20b 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlToggleButton.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlToggleButton.js
@@ -5,7 +5,7 @@ const ControlToggleButton = ( { label, description, value, onChange } ) => (
 	<Action>
 		<ToggleControl
 			className="ppcp--control-toggle"
-			__nextHasNoMarginBottom={ true }
+			__nextHasNoMarginBottom
 			checked={ value }
 			onChange={ onChange }
 			label={ label }
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 d8a0bb775..949b21c97 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
@@ -29,7 +29,7 @@ const PaymentMethodItemBlock = ( {
 				</p>
 				<div className="ppcp--method-footer">
 					<ToggleControl
-						__nextHasNoMarginBottom={ true }
+						__nextHasNoMarginBottom
 						checked={ isSelected }
 						onChange={ onSelect }
 					/>
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js
index 4a7cf1a20..614ad0a3b 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js
@@ -43,6 +43,7 @@ const SettingsToggleBlock = ( {
 				</div>
 				<div className="ppcp-r-toggle-block__switch">
 					<ToggleControl
+						__nextHasNoMarginBottom
 						ref={ toggleRef }
 						checked={ isToggled }
 						onChange={ ( newState ) => setToggled( newState ) }
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
index 8930167f3..1db3ae16a 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
@@ -66,7 +66,7 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
 				return (
 					<div className="ppcp-r-modal__field-row">
 						<TextControl
-							__nextHasNoMarginBottom={ true }
+							__nextHasNoMarginBottom
 							className="ppcp-r-vertical-text-control"
 							label={ field.label }
 							value={ settings[ key ] }
@@ -84,6 +84,7 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
 				return (
 					<div className="ppcp-r-modal__field-row">
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ field.label }
 							checked={ settings[ key ] }
 							onChange={ ( value ) =>

From 34ccd47bbc63f6050bd334c0c491aeb5238e5645 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 28 Jan 2025 12:53:48 +0100
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=A9=B9=20Fix=20React=20warning=20abou?=
 =?UTF-8?q?t=20missing=20key-props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Screens/Settings/Components/Payment/Modal.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
index 1db3ae16a..a749c7420 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
@@ -64,7 +64,7 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
 		switch ( field.type ) {
 			case 'text':
 				return (
-					<div className="ppcp-r-modal__field-row">
+					<div key={ key } className="ppcp-r-modal__field-row">
 						<TextControl
 							__nextHasNoMarginBottom
 							className="ppcp-r-vertical-text-control"
@@ -82,7 +82,7 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
 
 			case 'toggle':
 				return (
-					<div className="ppcp-r-modal__field-row">
+					<div key={ key } className="ppcp-r-modal__field-row">
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ field.label }