woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

♻️ Migrate StepPaymentMethods to OptionSelector

Browse source
This commit is contained in:
Philipp Stracker 2025-01-23 19:50:02 +01:00
parent 294bd5c67b
commit a64b1b9d24
No known key found for this signature in database
1 changed files with 57 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

109
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js
View file

@ -1,71 +1,28 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { CommonHooks, OnboardingHooks } from '../../../../data'; import { CommonHooks, OnboardingHooks } from '../../../../data';
import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper'; import { OptionSelector } from '../../../ReusableComponents/Fields';
import { SelectBox } from '../../../ReusableComponents/Fields';
import PricingDescription from '../../../ReusableComponents/PricingDescription'; import PricingDescription from '../../../ReusableComponents/PricingDescription';
import OnboardingHeader from '../Components/OnboardingHeader'; import OnboardingHeader from '../Components/OnboardingHeader';
import OptionalPaymentMethods from '../Components/OptionalPaymentMethods'; import OptionalPaymentMethods from '../Components/OptionalPaymentMethods';
const OPM_RADIO_GROUP_NAME = 'optional-payment-methods';
const StepPaymentMethods = ( {} ) => { const StepPaymentMethods = ( {} ) => {
const { const {
areOptionalPaymentMethodsEnabled, areOptionalPaymentMethodsEnabled,
setAreOptionalPaymentMethodsEnabled, setAreOptionalPaymentMethodsEnabled,
} = OnboardingHooks.useOptionalPaymentMethods(); } = 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 ( return (
<div className="ppcp-r-page-optional-payment-methods"> <div className="ppcp-r-page-optional-payment-methods">
<OnboardingHeader title={ screenTitle } /> <OnboardingHeader title={ <PaymentStepTitle /> } />
<div className="ppcp-r-inner-container"> <div className="ppcp-r-inner-container">
<SelectBoxWrapper> <OptionSelector
<SelectBox multiSelect={ false }
title={ __( options={ methodChoices }
'Available with additional application', onChange={ setAreOptionalPaymentMethodsEnabled }
'woocommerce-paypal-payments' value={ areOptionalPaymentMethodsEnabled }
) } />
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>
<PricingDescription /> <PricingDescription />
</div> </div>
</div> </div>
@ -73,3 +30,51 @@ const StepPaymentMethods = ( {} ) => {
}; };
export default 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,
},
];