♻️ Migrate InputSettings to ControlTextInput

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;

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

@@ -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;

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';

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` ] }

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={ __(

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>
 	);
 };