2024-12-09 17:38:17 +01:00
|
|
|
import { __ } from '@wordpress/i18n';
|
2024-11-25 20:47:13 -04:00
|
|
|
|
2025-01-10 13:30:06 +01:00
|
|
|
import { CommonHooks, OnboardingHooks } from '../../../../data';
|
2025-01-23 19:50:02 +01:00
|
|
|
import { OptionSelector } from '../../../ReusableComponents/Fields';
|
2025-01-10 13:30:06 +01:00
|
|
|
import PricingDescription from '../../../ReusableComponents/PricingDescription';
|
|
|
|
import OnboardingHeader from '../Components/OnboardingHeader';
|
2025-02-03 19:17:13 +01:00
|
|
|
import PaymentFlow from '../Components/PaymentFlow';
|
2024-11-25 20:47:13 -04:00
|
|
|
|
|
|
|
const StepPaymentMethods = ( {} ) => {
|
2025-01-23 19:52:17 +01:00
|
|
|
const { optionalMethods, setOptionalMethods } =
|
|
|
|
OnboardingHooks.useOptionalPaymentMethods();
|
2024-12-02 18:15:07 -04:00
|
|
|
|
2025-01-23 19:50:02 +01:00
|
|
|
return (
|
|
|
|
<div className="ppcp-r-page-optional-payment-methods">
|
|
|
|
<OnboardingHeader title={ <PaymentStepTitle /> } />
|
|
|
|
<div className="ppcp-r-inner-container">
|
|
|
|
<OptionSelector
|
|
|
|
multiSelect={ false }
|
|
|
|
options={ methodChoices }
|
2025-01-23 19:52:17 +01:00
|
|
|
onChange={ setOptionalMethods }
|
|
|
|
value={ optionalMethods }
|
2025-01-23 19:50:02 +01:00
|
|
|
/>
|
2024-12-02 18:15:07 -04:00
|
|
|
|
2025-01-23 19:50:02 +01:00
|
|
|
<PricingDescription />
|
|
|
|
</div>
|
|
|
|
</div>
|
2025-01-14 11:29:50 +01:00
|
|
|
);
|
2025-01-23 19:50:02 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
export default StepPaymentMethods;
|
|
|
|
|
|
|
|
const PaymentStepTitle = () => {
|
|
|
|
const { storeCountry } = CommonHooks.useWooSettings();
|
2025-01-14 11:29:50 +01:00
|
|
|
|
|
|
|
if ( 'US' === storeCountry ) {
|
2025-01-23 19:50:02 +01:00
|
|
|
return __(
|
2025-01-14 11:29:50 +01:00
|
|
|
'Add Expanded Checkout for More Ways to Pay',
|
|
|
|
'woocommerce-paypal-payments'
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2025-01-23 19:50:02 +01:00
|
|
|
return __(
|
|
|
|
'Add optional payment methods to your Checkout',
|
|
|
|
'woocommerce-paypal-payments'
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const OptionalMethodDescription = () => {
|
|
|
|
const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
|
|
|
|
|
2024-11-25 20:47:13 -04:00
|
|
|
return (
|
2025-02-03 19:17:13 +01:00
|
|
|
<PaymentFlow
|
|
|
|
onlyOptional={ true }
|
2025-01-23 19:50:02 +01:00
|
|
|
useAcdc={ true }
|
|
|
|
isFastlane={ true }
|
|
|
|
isPayLater={ true }
|
|
|
|
storeCountry={ storeCountry }
|
|
|
|
storeCurrency={ storeCurrency }
|
|
|
|
/>
|
2024-11-25 20:47:13 -04:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2025-01-23 19:50:02 +01:00
|
|
|
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,
|
|
|
|
},
|
|
|
|
];
|