✨ Create a much cleaner “SelectBox” alternative

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js

@@ -0,0 +1,100 @@
+import classNames from 'classnames';
+import { PayPalCheckbox, PayPalRdb } from './index';
+
+const OptionSelector = ( {
+	multiSelect = false,
+	options,
+	value,
+	onChange,
+} ) => (
+	<div className="ppcp-r-select-box-wrapper">
+		{ options.map(
+			( { value: itemValue, title, description, contents } ) => {
+				let isSelected;
+
+				if ( Array.isArray( value ) ) {
+					isSelected = value.includes( itemValue );
+				} else {
+					isSelected = value === itemValue;
+				}
+
+				return (
+					<OptionItem
+						key={ itemValue }
+						itemTitle={ title }
+						itemDescription={ description }
+						itemValue={ itemValue }
+						onChange={ onChange }
+						isMulti={ multiSelect }
+						isSelected={ isSelected }
+					>
+						{ contents }
+					</OptionItem>
+				);
+			}
+		) }
+	</div>
+);
+
+export default OptionSelector;
+
+const OptionItem = ( {
+	itemTitle,
+	itemDescription,
+	itemValue,
+	onChange,
+	isMulti,
+	isSelected,
+	children,
+} ) => {
+	const boxClassName = classNames( 'ppcp-r-select-box', {
+		'ppcp--selected': isSelected,
+	} );
+
+	return (
+		<div className={ boxClassName }>
+			<InputField
+				value={ itemValue }
+				isRadio={ ! isMulti }
+				onChange={ onChange }
+				isSelected={ isSelected }
+			/>
+
+			<div className="ppcp-r-select-box__content">
+				<div className="ppcp-r-select-box__content-inner">
+					<span className="ppcp-r-select-box__title">
+						{ itemTitle }
+					</span>
+					<p className="ppcp-r-select-box__description">
+						{ itemDescription }
+					</p>
+					{ children && (
+						<div className="ppcp-r-select-box__additional-content">
+							{ children }
+						</div>
+					) }
+				</div>
+			</div>
+		</div>
+	);
+};
+
+const InputField = ( { value, onChange, isRadio, isSelected } ) => {
+	if ( isRadio ) {
+		return (
+			<PayPalRdb
+				value={ value }
+				handleRdbState={ onChange }
+				checked={ isSelected }
+			/>
+		);
+	}
+
+	return (
+		<PayPalCheckbox
+			value={ value }
+			changeCallback={ onChange }
+			checked={ isSelected }
+		/>
+	);
+};

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/index.js

@@ -8,4 +8,5 @@ export { default as RadioGroup } from './RadioGroup';
 export { default as PayPalRdb } from './RadioButton';
 export { default as PayPalRdbWithContent } from './RadioContent';
 export { default as SelectBox } from './SelectableContent';
+export { default as OptionSelector } from './OptionSelector';
 export { default as Select } from './Select';