From f90ab656f5645ef3327545cf203da88d09d6e278 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Wed, 22 Jan 2025 15:32:22 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Migrate=20InputSettings=20?=
 =?UTF-8?q?to=20ControlTextInput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SettingsBlocks/ControlTextInput.js        | 18 +++++++
 .../SettingsBlocks/InputSettingsBlock.js      | 37 --------------
 .../SettingsBlocks/index.js                   |  3 +-
 .../Blocks/ConnectionDetails.js               |  6 +--
 .../Blocks/PaypalSettings.js                  | 49 ++++++++++---------
 .../Settings/Blocks/InvoicePrefix.js          | 20 +++++---
 6 files changed, 62 insertions(+), 71 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ControlTextInput.js
 delete mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ControlTextInput.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ControlTextInput.js
new file mode 100644
index 000000000..08e6a8d11
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ControlTextInput.js
@@ -0,0 +1,18 @@
+import { TextControl } from '@wordpress/components';
+
+import { Action } from '../Elements';
+
+const ControlTextInput = ( { value, onChange, placeholder = '' } ) => {
+	return (
+		<Action>
+			<TextControl
+				className="ppcp-r-vertical-text-control"
+				placeholder={ placeholder }
+				value={ value }
+				onChange={ onChange }
+			/>
+		</Action>
+	);
+};
+
+export default ControlTextInput;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
deleted file mode 100644
index 21cc53887..000000000
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { TextControl } from '@wordpress/components';
-
-import SettingsBlock from '../SettingsBlock';
-import { Title, Action, Description, TitleExtra } from '../Elements';
-
-const InputSettingsBlock = ( {
-	title,
-	description,
-	supplementaryLabel,
-	showDescriptionFirst = false,
-	value,
-	onChange,
-	placeholder = '',
-} ) => {
-	const TheDescription = <Description>{ description }</Description>;
-
-	return (
-		<SettingsBlock className="ppcp-r-settings-block__input">
-			<Title>
-				{ title }
-				<TitleExtra>{ supplementaryLabel }</TitleExtra>
-			</Title>
-			{ showDescriptionFirst && TheDescription }
-			<Action>
-				<TextControl
-					className="ppcp-r-vertical-text-control"
-					placeholder={ placeholder }
-					value={ value }
-					onChange={ onChange }
-				/>
-			</Action>
-			{ ! showDescriptionFirst && TheDescription }
-		</SettingsBlock>
-	);
-};
-
-export default InputSettingsBlock;
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 cb06265c4..048c09ca1 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
@@ -1,8 +1,9 @@
 export { default as ButtonSettingsBlock } from './ButtonSettingsBlock';
-export { default as InputSettingsBlock } from './InputSettingsBlock';
 export { default as SelectSettingsBlock } from './SelectSettingsBlock';
 export { default as AccordionSettingsBlock } from './AccordionSettingsBlock';
 export { default as ToggleSettingsBlock } from './ToggleSettingsBlock';
 export { default as RadioSettingsBlock } from './RadioSettingsBlock';
 export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
 export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';
+
+export { default as ControlTextInput } from './ControlTextInput';
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
index 144f9a55b..224b5dbd0 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
@@ -3,7 +3,7 @@ import { Button } from '@wordpress/components';
 
 import {
 	AccordionSettingsBlock,
-	InputSettingsBlock,
+	ControlTextInput,
 	RadioSettingsBlock,
 } from '../../../../ReusableComponents/SettingsBlocks';
 
@@ -80,7 +80,7 @@ const generateOptions = ( config, settings, updateFormValue ) => [
 		),
 		additionalContent: (
 			<>
-				<InputSettingsBlock
+				<ControlTextInput
 					title={ config.clientIdTitle }
 					// Input field props.
 					value={ settings[ `${ config.mode }ClientId` ] }
@@ -90,7 +90,7 @@ const generateOptions = ( config, settings, updateFormValue ) => [
 						'woocommerce-paypal-payments'
 					) }
 				/>
-				<InputSettingsBlock
+				<ControlTextInput
 					title={ config.secretKeyTitle }
 					// Input field props.
 					value={ settings[ `${ config.mode }SecretKey` ] }
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 25b97b1ea..304b38815 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
@@ -3,9 +3,10 @@ import {
 	AccordionSettingsBlock,
 	RadioSettingsBlock,
 	ToggleSettingsBlock,
-	InputSettingsBlock,
+	ControlTextInput,
 	SelectSettingsBlock,
 } from '../../../../ReusableComponents/SettingsBlocks';
+import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
 
 const PaypalSettings = ( { updateFormValue, settings } ) => {
 	return (
@@ -81,37 +82,39 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 				} }
 			/>
 
-			<InputSettingsBlock
+			<SettingsBlock
 				title={ __( 'Brand name', 'woocommerce-paypal-payments' ) }
-				description={ __(
+				headerDescription={ __(
 					'What business name to show to your buyers during checkout and on receipts.',
 					'woocommerce-paypal-payments'
 				) }
-				showDescriptionFirst={ true }
-				// Input field props.
-				value={ settings.brandName }
-				onChange={ updateFormValue }
-				placeholder={ __(
-					'Brand name',
-					'woocommerce-paypal-payments'
-				) }
-			/>
+			>
+				<ControlTextInput
+					value={ settings.brandName }
+					onChange={ updateFormValue }
+					placeholder={ __(
+						'Brand name',
+						'woocommerce-paypal-payments'
+					) }
+				/>
+			</SettingsBlock>
 
-			<InputSettingsBlock
+			<SettingsBlock
 				title={ __( 'Soft Descriptor', 'woocommerce-paypal-payments' ) }
-				description={ __(
+				headerDescription={ __(
 					"The dynamic text used to construct the statement descriptor that appears on a payer's card statement. Applies to PayPal and Credit Card transactions. Max value of 22 characters.",
 					'woocommerce-paypal-payments'
 				) }
-				showDescriptionFirst={ true }
-				// Input field props.
-				value={ settings.softDescriptor }
-				onChange={ updateFormValue }
-				placeholder={ __(
-					'Soft Descriptor',
-					'woocommerce-paypal-payments'
-				) }
-			/>
+			>
+				<ControlTextInput
+					value={ settings.softDescriptor }
+					onChange={ updateFormValue }
+					placeholder={ __(
+						'Soft Descriptor',
+						'woocommerce-paypal-payments'
+					) }
+				/>
+			</SettingsBlock>
 
 			<RadioSettingsBlock
 				title={ __(
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/InvoicePrefix.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/InvoicePrefix.js
index 8e5c76fd0..f009c679e 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/InvoicePrefix.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/InvoicePrefix.js
@@ -1,23 +1,29 @@
 import { __ } from '@wordpress/i18n';
-import { InputSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
+import { ControlTextInput } from '../../../../../ReusableComponents/SettingsBlocks';
 import { SettingsHooks } from '../../../../../../data';
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
 
 const InvoicePrefix = () => {
 	const { invoicePrefix, setInvoicePrefix } = SettingsHooks.useSettings();
 
 	return (
-		<InputSettingsBlock
+		<SettingsBlock
 			title="Invoice Prefix"
 			supplementaryLabel={ __(
 				'(Recommended)',
 				'woocommerce-paypal-payments'
 			) }
 			description="Add a unique prefix to invoice numbers for site-specific tracking (recommended)."
-			// Input field props.
-			placeholder={ __( 'Input prefix', 'woocommerce-paypal-payments' ) }
-			onChange={ setInvoicePrefix }
-			value={ invoicePrefix }
-		/>
+		>
+			<ControlTextInput
+				placeholder={ __(
+					'Input prefix',
+					'woocommerce-paypal-payments'
+				) }
+				onChange={ setInvoicePrefix }
+				value={ invoicePrefix }
+			/>
+		</SettingsBlock>
 	);
 };