♻️ SImplify InputSettingsBlock logic

modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss

@@ -97,15 +97,6 @@
 		margin-left: 5px;
 	}
 
-	.ppcp-r-settings-block__action {
-		display: flex;
-		align-items: center;
-
-		.components-flex {
-			row-gap: 0;
-		}
-	}
-
 	+ .ppcp-r-settings-block:not(.no-gap) {
 		margin-top: var(--block-separator-gap, 32px);
 		padding-top: var(--block-separator-gap, 32px);

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

@@ -1,4 +1,5 @@
 import { TextControl } from '@wordpress/components';
+
 import SettingsBlock from './SettingsBlock';
 import {
 	Title,
@@ -7,55 +8,40 @@ import {
 	SupplementaryLabel,
 } from './SettingsBlockElements';
 
-const DEFAULT_ELEMENT_ORDER = [ 'title', 'action', 'description' ];
-
-const ELEMENT_RENDERERS = {
-	title: ( { title, supplementaryLabel } ) => (
-		<Title>
-			{ title }
-			{ supplementaryLabel && (
-				<SupplementaryLabel>{ supplementaryLabel }</SupplementaryLabel>
-			) }
-		</Title>
-	),
-	action: ( { actionProps } ) => (
-		<Action>
-			<TextControl
-				className="ppcp-r-vertical-text-control"
-				placeholder={ actionProps?.placeholder }
-				value={ actionProps?.value }
-				onChange={ ( newValue ) =>
-					actionProps?.callback( actionProps?.key, newValue )
-				}
-			/>
-		</Action>
-	),
-	description: ( { description } ) => (
-		<Description>{ description }</Description>
-	),
-};
-
 const InputSettingsBlock = ( {
 	title,
 	description,
 	supplementaryLabel,
-	order = DEFAULT_ELEMENT_ORDER,
+	showDescriptionFirst = false,
+	actionProps = {},
 	...props
-} ) => (
+} ) => {
-	<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
+	const TheDescription = <Description>{ description }</Description>;
-		{ order.map( ( elementKey ) => {
+
-			const RenderElement = ELEMENT_RENDERERS[ elementKey ];
+	return (
-			return RenderElement ? (
+		<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
-				<RenderElement
+			<Title>
-					key={ elementKey }
+				{ title }
-					title={ title }
+				{ supplementaryLabel && (
-					description={ description }
+					<SupplementaryLabel>
-					supplementaryLabel={ supplementaryLabel }
+						{ supplementaryLabel }
-					actionProps={ props.actionProps }
+					</SupplementaryLabel>
+				) }
+			</Title>
+			{ showDescriptionFirst && TheDescription }
+			<Action>
+				<TextControl
+					className="ppcp-r-vertical-text-control"
+					placeholder={ actionProps.placeholder }
+					value={ actionProps.value }
+					onChange={ ( newValue ) =>
+						actionProps.callback( actionProps.key, newValue )
+					}
 				/>
-			) : null;
+			</Action>
-		} ) }
+			{ ! showDescriptionFirst && TheDescription }
-	</SettingsBlock>
+		</SettingsBlock>
-);
+	);
+};
 
 export default InputSettingsBlock;

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js

@@ -87,6 +87,7 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 					'What business name to show to your buyers during checkout and on receipts.',
 					'woocommerce-paypal-payments'
 				) }
+				showDescriptionFirst={ true }
 				actionProps={ {
 					value: settings.brandName,
 					callback: updateFormValue,
@@ -96,7 +97,6 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 						'woocommerce-paypal-payments'
 					),
 				} }
-				order={ [ 'title', 'description', 'action' ] }
 			/>
 
 			<InputSettingsBlock
@@ -105,6 +105,7 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 					"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 }
 				actionProps={ {
 					value: settings.softDescriptor,
 					callback: updateFormValue,
@@ -114,7 +115,6 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 						'woocommerce-paypal-payments'
 					),
 				} }
-				order={ [ 'title', 'description', 'action' ] }
 			/>
 
 			<RadioSettingsBlock