From d24adbfe2fd8b9ed6a7283833cadb8d6c13e6388 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 23 Jan 2025 13:33:35 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Migrate=20SelectBlock=20to?=
 =?UTF-8?q?=20ControlSelect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ControlSelect.js}                         |  9 +-
 .../ReusableComponents/Controls/index.js      |  1 +
 .../SettingsBlocks/index.js                   |  1 -
 .../Blocks/OtherSettings.js                   | 82 ++++++++++---------
 .../Blocks/PaypalSettings.js                  | 21 ++---
 5 files changed, 57 insertions(+), 57 deletions(-)
 rename modules/ppcp-settings/resources/js/Components/ReusableComponents/{SettingsBlocks/SelectSettingsBlock.js => Controls/ControlSelect.js} (85%)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlSelect.js
similarity index 85%
rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlSelect.js
index e67cc6f76..306c10f9e 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlSelect.js
@@ -1,7 +1,6 @@
 import Select, { components } from 'react-select';
 
 import data from '../../../utils/data';
-import SettingsBlock from '../SettingsBlock';
 import { Title, Action, Description } from '../Elements';
 
 const DEFAULT_ELEMENT_ORDER = [ 'title', 'action', 'description' ];
@@ -30,13 +29,13 @@ const ELEMENT_RENDERERS = {
 	),
 };
 
-const SelectSettingsBlock = ( {
+const ControlSelect = ( {
 	title,
 	description,
 	order = DEFAULT_ELEMENT_ORDER,
 	...props
 } ) => (
-	<SettingsBlock { ...props } className="ppcp-r-settings-block__select">
+	<Action>
 		{ order.map( ( elementKey ) => {
 			const RenderElement = ELEMENT_RENDERERS[ elementKey ];
 			return RenderElement ? (
@@ -48,7 +47,7 @@ const SelectSettingsBlock = ( {
 				/>
 			) : null;
 		} ) }
-	</SettingsBlock>
+	</Action>
 );
 
-export default SelectSettingsBlock;
+export default ControlSelect;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/index.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/index.js
index 7603d6762..6856dceed 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/index.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/index.js
@@ -3,3 +3,4 @@ export { default as ControlTextInput } from './ControlTextInput';
 export { default as ControlToggleButton } from './ControlToggleButton';
 export { default as ControlButton } from './ControlButton';
 export { default as ControlRadioGroup } from './ControlRadioGroup';
+export { default as ControlSelect } from './ControlSelect';
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
index 9bdc55794..ac3839db8 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
@@ -1,4 +1,3 @@
-export { default as SelectSettingsBlock } from './SelectSettingsBlock';
 export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
 export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';
 export { default as TodoSettingsBlock } from './TodoSettingsBlock';
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OtherSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OtherSettings.js
index 1dbac3d7d..dc000b782 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OtherSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OtherSettings.js
@@ -1,8 +1,48 @@
 import { __ } from '@wordpress/i18n';
-import { SelectSettingsBlock } from '../../../../ReusableComponents/SettingsBlocks';
-import Accordion from '../../../../ReusableComponents/AccordionSection';
 
-const creditCardExamples = [
+import { ControlSelect } from '@wordpress/components';
+import Accordion from '../../../../ReusableComponents/AccordionSection';
+import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
+import { SettingsHooks } from '../../../../../data';
+
+const OtherSettings = () => {
+	const { disabledCards, setDisabledCards } = SettingsHooks.useSettings();
+
+	return (
+		<Accordion
+			title={ __(
+				'Other payment method settings',
+				'woocommerce-paypal-payments'
+			) }
+			description={ __(
+				'Modify the checkout experience for alternative payment methods, credit cards, and digital wallets.',
+				'woocommerce-paypal-payments'
+			) }
+		>
+			<SettingsBlock
+				title={ __(
+					'Disable specific credit cards',
+					'woocommerce-paypal-payments'
+				) }
+				description={ __(
+					"If left blank, PayPal and other buttons will present in the user's detected language. Enter a language here to force all buttons to display in that language.",
+					'woocommerce-paypal-payments'
+				) }
+			>
+				<ControlSelect
+					options={ disabledCardChoices }
+					value={ disabledCards }
+					onChange={ setDisabledCards }
+					isMulti={ true }
+				/>
+			</SettingsBlock>
+		</Accordion>
+	);
+};
+
+export default OtherSettings;
+
+const disabledCardChoices = [
 	{ value: '', label: __( 'Select', 'woocommerce-paypal-payments' ) },
 	{
 		value: 'mastercard',
@@ -19,39 +59,3 @@ const creditCardExamples = [
 		label: __( 'Diners Club', 'woocommerce-paypal-payments' ),
 	},
 ];
-
-const OtherSettings = ( { settings, updateFormValue } ) => {
-	return (
-		<Accordion
-			title={ __(
-				'Other payment method settings',
-				'woocommerce-paypal-payments'
-			) }
-			description={ __(
-				'Modify the checkout experience for alternative payment methods, credit cards, and digital wallets.',
-				'woocommerce-paypal-payments'
-			) }
-		>
-			<SelectSettingsBlock
-				title={ __(
-					'Disable specific credit cards',
-					'woocommerce-paypal-payments'
-				) }
-				description={ __(
-					"If left blank, PayPal and other buttons will present in the user's detected language. Enter a language here to force all buttons to display in that language.",
-					'woocommerce-paypal-payments'
-				) }
-				actionProps={ {
-					options: creditCardExamples,
-					value: settings.buttonLanguage,
-					callback: updateFormValue,
-					key: 'buttonLanguage',
-					isMulti: true,
-				} }
-				order={ [ 'title', 'description', 'action' ] }
-			/>
-		</Accordion>
-	);
-};
-
-export default OtherSettings;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js
index cef98d663..be7f4897d 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js
@@ -1,9 +1,9 @@
 import { __ } from '@wordpress/i18n';
-import { SelectSettingsBlock } from '../../../../ReusableComponents/SettingsBlocks';
 import {
 	ControlRadioGroup,
 	ControlToggleButton,
 	ControlTextInput,
+	ControlSelect,
 } from '../../../../ReusableComponents/Controls';
 import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
 import Accordion from '../../../../ReusableComponents/AccordionSection';
@@ -124,17 +124,14 @@ const PaypalSettings = () => {
 					'woocommerce-paypal-payments'
 				) }
 			>
-				<SelectSettingsBlock
-					actionProps={ {
-						value: buttonLanguage,
-						callback: setButtonLanguage,
-						options: languagesExample,
-						key: 'buttonLanguage',
-						placeholder: __(
-							'Browser language',
-							'woocommerce-paypal-payments'
-						),
-					} }
+				<ControlSelect
+					options={ languagesExample }
+					value={ buttonLanguage }
+					onChange={ setButtonLanguage }
+					placeholder={ __(
+						'Browser language',
+						'woocommerce-paypal-payments'
+					) }
 				/>
 			</SettingsBlock>
 		</Accordion>