diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js index e1f060640..59066cd39 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js @@ -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 ( - - ); - } - - return null; -}; +const PaymentMethodIcon = ( { type } ) => ( + +); export default PaymentMethodIcon; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcons.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcons.js index 9eaac5d3f..d516ece53 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcons.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcons.js @@ -1,20 +1,11 @@ import PaymentMethodIcon from './PaymentMethodIcon'; -const PaymentMethodIcons = ( props ) => { - return ( -
- - - - - - - - - - -
- ); -}; +const PaymentMethodIcons = ( { icons = [] } ) => ( +
+ { icons.map( ( type ) => ( + + ) ) } +
+); export default PaymentMethodIcons; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentFlow.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentFlow.js index f08601b8e..eefcb3231 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentFlow.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentFlow.js @@ -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 = ( { { +const DefaultMethodsSection = ( { + methods, + learnMoreConfig, + paypalCheckoutDescription, +} ) => { return (
- + { + const title = __( 'PayPal Checkout', 'woocommerce-paypal-payments' ); + return ( } - 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 } /> ); diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/WelcomeDocs.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/WelcomeDocs.js index 18cd9b526..4e468c9c3 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/WelcomeDocs.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/WelcomeDocs.js @@ -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 (

@@ -15,7 +15,6 @@ const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry } ) => { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js index 7d044256c..b2ff25ecf 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js @@ -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 (
@@ -31,11 +36,11 @@ const StepWelcome = ( { setStep, currentStep } ) => {

{ __( - `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' ) }

@@ -56,7 +61,6 @@ const StepWelcome = ( { setStep, currentStep } ) => { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js index 4b16edef0..64991a727 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js @@ -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 ] ); };