mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
Modify config defaults to better accommodate country-specific requirements
This commit is contained in:
Daniel Dudzic
parent
80a99c75d3
commit
22cd59d0f5
7 changed files with 101 additions and 61 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,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 />
|
||||
|
|
|
|||
|
|
@ -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' ) } />
|
||||
|
|
|
|||
|
|
@ -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 ] );
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
