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

Modify config defaults to better accommodate country-specific requirements

Browse source
This commit is contained in:
Daniel Dudzic 2025-03-13 10:25:25 +01:00
parent 80a99c75d3
commit 22cd59d0f5
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
7 changed files with 101 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

21
modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js
View file

@ -1,20 +1,11 @@
import { Icon } from '@wordpress/components';
import data from '../../utils/data';
const PaymentMethodIcon = ( { icons, type } ) => {
const validIcon = Array.isArray( icons ) && icons.includes( type );
if ( validIcon || icons === 'all' ) {
return (
<Icon
icon={ data().getImage( 'icon-button-' + type + '.svg' ) }
className="ppcp--method-icon"
/>
);
}
return null;
};
const PaymentMethodIcon = ( { type } ) => (
<Icon
icon={ data().getImage( `icon-button-${ type }.svg` ) }
className="ppcp--method-icon"
/>
);
export default PaymentMethodIcon;

23
modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcons.js
View file

@ -1,20 +1,11 @@
import PaymentMethodIcon from './PaymentMethodIcon';
const PaymentMethodIcons = ( props ) => {
return (
<div className="ppcp-r-payment-method-icons">
<PaymentMethodIcon type="paypal" icons={ props.icons } />
<PaymentMethodIcon type="venmo" icons={ props.icons } />
<PaymentMethodIcon type="visa" icons={ props.icons } />
<PaymentMethodIcon type="mastercard" icons={ props.icons } />
<PaymentMethodIcon type="amex" icons={ props.icons } />
<PaymentMethodIcon type="discover" icons={ props.icons } />
<PaymentMethodIcon type="apple-pay" icons={ props.icons } />
<PaymentMethodIcon type="google-pay" icons={ props.icons } />
<PaymentMethodIcon type="ideal" icons={ props.icons } />
<PaymentMethodIcon type="bancontact" icons={ props.icons } />
</div>
);
};
const PaymentMethodIcons = ( { icons = [] } ) => (
<div className="ppcp-r-payment-method-icons">
{ icons.map( ( type ) => (
<PaymentMethodIcon key={ type } type={ type } />
) ) }
</div>
);
export default PaymentMethodIcons;

16
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentFlow.js
View file

@ -8,7 +8,6 @@ import { usePaymentConfig } from '../hooks/usePaymentConfig';
const PaymentFlow = ( {
useAcdc,
isFastlane,
isPayLater,
storeCountry,
onlyOptional = false,
} ) => {
@ -18,7 +17,8 @@ const PaymentFlow = ( {
optionalTitle,
optionalDescription,
learnMoreConfig,
} = usePaymentConfig( storeCountry, isPayLater, useAcdc, isFastlane );
paypalCheckoutDescription,
} = usePaymentConfig( storeCountry, useAcdc, isFastlane );
if ( onlyOptional ) {
return (
@ -34,6 +34,7 @@ const PaymentFlow = ( {
<DefaultMethodsSection
methods={ includedMethods }
learnMoreConfig={ learnMoreConfig }
paypalCheckoutDescription={ paypalCheckoutDescription }
/>
<OptionalMethodsSection
@ -48,10 +49,17 @@ const PaymentFlow = ( {
export default PaymentFlow;
const DefaultMethodsSection = ( { methods, learnMoreConfig } ) => {
const DefaultMethodsSection = ( {
methods,
learnMoreConfig,
paypalCheckoutDescription,
} ) => {
return (
<div className="ppcp-r-welcome-docs__col">
<PayPalCheckout learnMore={ learnMoreConfig.PayPalCheckout } />
<PayPalCheckout
learnMore={ learnMoreConfig.PayPalCheckout }
description={ paypalCheckoutDescription }
/>
<BadgeBox
title={ __(
'Included in PayPal Checkout',

10
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentOptions/PayPalCheckout.js
View file

@ -5,15 +5,15 @@ import BadgeBox from '../../../../ReusableComponents/BadgeBox';
const PayPalCheckout = ( {
learnMore = 'https://www.paypal.com/us/business/accept-payments/checkout',
description,
} ) => {
const title = __( 'PayPal Checkout', 'woocommerce-paypal-payments' );
return (
<BadgeBox
title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
title={ title }
textBadge={ <PricingTitleBadge item="checkout" /> }
description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
) }
description={ description }
learnMoreLink={ learnMore }
/>
);

3
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/WelcomeDocs.js
View file

@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
import PricingDescription from './PricingDescription';
import PaymentFlow from './PaymentFlow';
const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry } ) => {
const WelcomeDocs = ( { useAcdc, isFastlane, storeCountry } ) => {
return (
<div className="ppcp-r-welcome-docs">
<h2 className="ppcp-r-welcome-docs__title">
@ -15,7 +15,6 @@ const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry } ) => {
<PaymentFlow
useAcdc={ useAcdc }
isFastlane={ isFastlane }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
/>
<PricingDescription />

16
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js
View file

@ -9,12 +9,17 @@ import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
import OnboardingHeader from '../Components/OnboardingHeader';
import WelcomeDocs from '../Components/WelcomeDocs';
import AdvancedOptionsForm from '../Components/AdvancedOptionsForm';
import { usePaymentConfig } from '../hooks/usePaymentConfig';
const StepWelcome = ( { setStep, currentStep } ) => {
const { storeCountry } = CommonHooks.useWooSettings();
const { canUseCardPayments, canUseFastlane, canUsePayLater } =
OnboardingHooks.useFlags();
const nonAcdcIcons = [ 'paypal', 'visa', 'mastercard', 'amex', 'discover' ];
const { canUseCardPayments, canUseFastlane } = OnboardingHooks.useFlags();
const { acdcIcons, bcdcIcons } = usePaymentConfig(
storeCountry,
canUseCardPayments,
canUseFastlane
);
return (
<div className="ppcp-r-page-welcome">
@ -31,11 +36,11 @@ const StepWelcome = ( { setStep, currentStep } ) => {
<div className="ppcp-r-inner-container">
<WelcomeFeatures />
<PaymentMethodIcons
icons={ canUseCardPayments ? 'all' : nonAcdcIcons }
icons={ canUseCardPayments ? acdcIcons : bcdcIcons }
/>
<p className="ppcp-r-button__description">
{ __(
`Click the button below to be guided through connecting your existing PayPal account or creating a new one.You will be able to choose the payment options that are right for your store.`,
'Click the button below to be guided through connecting your existing PayPal account or creating a new one. You will be able to choose the payment options that are right for your store.',
'woocommerce-paypal-payments'
) }
</p>
@ -56,7 +61,6 @@ const StepWelcome = ( { setStep, currentStep } ) => {
<WelcomeDocs
useAcdc={ canUseCardPayments }
isFastlane={ canUseFastlane }
isPayLater={ canUsePayLater }
storeCountry={ storeCountry }
/>
<Separator text={ __( 'or', 'woocommerce-paypal-payments' ) } />

73
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js
View file

@ -28,6 +28,7 @@ const defaultConfig = {
// Extended: Items on right side for ACDC-flow.
extendedMethods: [
{ name: 'CardFields', Component: CardFields },
{ name: 'DigitalWallets', Component: DigitalWallets },
{ name: 'APMs', Component: AlternativePaymentMethods },
],
@ -41,6 +42,26 @@ const defaultConfig = {
'with additional application',
'woocommerce-paypal-payments'
),
// PayPal Checkout description.
paypalCheckoutDescription: __(
'Our all-in-one checkout solution lets you offer PayPal, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
),
// Icon groups.
bcdcIcons: [ 'paypal', 'visa', 'mastercard', 'amex', 'discover' ],
acdcIcons: [
'paypal',
'visa',
'mastercard',
'amex',
'discover',
'apple-pay',
'google-pay',
'ideal',
'bancontact',
],
};
const countrySpecificConfigs = {
@ -60,17 +81,52 @@ const countrySpecificConfigs = {
{ name: 'APMs', Component: AlternativePaymentMethods },
{ name: 'Fastlane', Component: Fastlane },
],
paypalCheckoutDescription: __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
),
optionalTitle: __( 'Expanded Checkout', 'woocommerce-paypal-payments' ),
optionalDescription: __(
'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more. Note: Additional application required for more methods',
'woocommerce-paypal-payments'
),
bcdcIcons: [
'paypal',
'venmo',
'visa',
'mastercard',
'amex',
'discover',
],
acdcIcons: [
'paypal',
'venmo',
'visa',
'mastercard',
'amex',
'discover',
'apple-pay',
'google-pay',
'ideal',
'bancontact',
],
},
GB: {
includedMethods: [
{ name: 'PayWithPayPal', Component: PayWithPayPal },
{ name: 'PayInThree', Component: PayInThree },
],
extendedMethods: [
{ name: 'CardFields', Component: CardFields },
{ name: 'DigitalWallets', Component: DigitalWallets },
{ name: 'APMs', Component: AlternativePaymentMethods },
],
},
MX: {
extendedMethods: [
{ name: 'CardFields', Component: CardFields },
{ name: 'APMs', Component: AlternativePaymentMethods },
],
},
};
@ -80,22 +136,12 @@ const filterMethods = ( methods, conditions ) => {
);
};
export const usePaymentConfig = (
country,
isPayLater,
useAcdc,
isFastlane
) => {
export const usePaymentConfig = ( country, useAcdc, isFastlane ) => {
return useMemo( () => {
const countryConfig = countrySpecificConfigs[ country ] || {};
const config = { ...defaultConfig, ...countryConfig };
const learnMoreConfig = learnMoreLinks[ country ] || {};
// Filter the "left side" list. PayLater is conditional.
const includedMethods = filterMethods( config.includedMethods, [
( method ) => isPayLater || method.name !== 'PayLater',
] );
// Determine the "right side" items: Either BCDC or ACDC items.
const optionalMethods = useAcdc
? config.extendedMethods
@ -108,9 +154,10 @@ export const usePaymentConfig = (
return {
...config,
includedMethods,
optionalMethods: availableOptionalMethods,
learnMoreConfig,
acdcIcons: config.acdcIcons,
bcdcIcons: config.bcdcIcons,
};
}, [ country, isPayLater, useAcdc, isFastlane ] );
}, [ country, useAcdc, isFastlane ] );
};