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

---
 .../Onboarding/Steps/StepPaymentMethods.js    | 109 +++++++++---------
 1 file changed, 57 insertions(+), 52 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js
index 0659c8f06..b099327eb 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js
@@ -1,71 +1,28 @@
 import { __ } from '@wordpress/i18n';
 
 import { CommonHooks, OnboardingHooks } from '../../../../data';
-import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper';
-import { SelectBox } from '../../../ReusableComponents/Fields';
+import { OptionSelector } from '../../../ReusableComponents/Fields';
 import PricingDescription from '../../../ReusableComponents/PricingDescription';
 import OnboardingHeader from '../Components/OnboardingHeader';
 import OptionalPaymentMethods from '../Components/OptionalPaymentMethods';
 
-const OPM_RADIO_GROUP_NAME = 'optional-payment-methods';
-
 const StepPaymentMethods = ( {} ) => {
 	const {
 		areOptionalPaymentMethodsEnabled,
 		setAreOptionalPaymentMethodsEnabled,
 	} = OnboardingHooks.useOptionalPaymentMethods();
 
-	const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
-
-	let screenTitle = __(
-		'Add optional payment methods to your Checkout',
-		'woocommerce-paypal-payments'
-	);
-
-	if ( 'US' === storeCountry ) {
-		screenTitle = __(
-			'Add Expanded Checkout for More Ways to Pay',
-			'woocommerce-paypal-payments'
-		);
-	}
-
 	return (
 		<div className="ppcp-r-page-optional-payment-methods">
-			<OnboardingHeader title={ screenTitle } />
+			<OnboardingHeader title={ <PaymentStepTitle /> } />
 			<div className="ppcp-r-inner-container">
-				<SelectBoxWrapper>
-					<SelectBox
-						title={ __(
-							'Available with additional application',
-							'woocommerce-paypal-payments'
-						) }
-						description={
-							<OptionalPaymentMethods
-								useAcdc={ true }
-								isFastlane={ true }
-								isPayLater={ true }
-								storeCountry={ storeCountry }
-								storeCurrency={ storeCurrency }
-							/>
-						}
-						name={ OPM_RADIO_GROUP_NAME }
-						value={ true }
-						changeCallback={ setAreOptionalPaymentMethodsEnabled }
-						currentValue={ areOptionalPaymentMethodsEnabled }
-						type="radio"
-					></SelectBox>
-					<SelectBox
-						title={ __(
-							'No thanks, I prefer to use a different provider for processing credit cards, digital wallets, and local payment methods',
-							'woocommerce-paypal-payments'
-						) }
-						name={ OPM_RADIO_GROUP_NAME }
-						value={ false }
-						changeCallback={ setAreOptionalPaymentMethodsEnabled }
-						currentValue={ areOptionalPaymentMethodsEnabled }
-						type="radio"
-					></SelectBox>
-				</SelectBoxWrapper>
+				<OptionSelector
+					multiSelect={ false }
+					options={ methodChoices }
+					onChange={ setAreOptionalPaymentMethodsEnabled }
+					value={ areOptionalPaymentMethodsEnabled }
+				/>
+
 				<PricingDescription />
 			</div>
 		</div>
@@ -73,3 +30,51 @@ const StepPaymentMethods = ( {} ) => {
 };
 
 export default StepPaymentMethods;
+
+const PaymentStepTitle = () => {
+	const { storeCountry } = CommonHooks.useWooSettings();
+
+	if ( 'US' === storeCountry ) {
+		return __(
+			'Add Expanded Checkout for More Ways to Pay',
+			'woocommerce-paypal-payments'
+		);
+	}
+
+	return __(
+		'Add optional payment methods to your Checkout',
+		'woocommerce-paypal-payments'
+	);
+};
+
+const OptionalMethodDescription = () => {
+	const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
+
+	return (
+		<OptionalPaymentMethods
+			useAcdc={ true }
+			isFastlane={ true }
+			isPayLater={ true }
+			storeCountry={ storeCountry }
+			storeCurrency={ storeCurrency }
+		/>
+	);
+};
+
+const methodChoices = [
+	{
+		value: true,
+		title: __(
+			'Available with additional application',
+			'woocommerce-paypal-payments'
+		),
+		description: <OptionalMethodDescription />,
+	},
+	{
+		title: __(
+			'No thanks, I prefer to use a different provider for processing credit cards, digital wallets, and local payment methods',
+			'woocommerce-paypal-payments'
+		),
+		value: false,
+	},
+];