woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 16:24:33 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Extract repeat code into separate components

Browse source
This commit is contained in:
Philipp Stracker 2025-02-03 17:39:50 +01:00
parent 17f5b9dd85
commit a2ce42b2a1
No known key found for this signature in database
5 changed files with 91 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

142
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcOptionalPaymentMethods.js
View file

@ -1,9 +1,10 @@
import { __ } from '@wordpress/i18n';
import BadgeBox from '../../../ReusableComponents/BadgeBox';
import { Separator } from '../../../ReusableComponents/Elements'; import { Separator } from '../../../ReusableComponents/Elements';
import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge'; import {
import { CardFields } from './PaymentOptions'; AlternativePaymentMethods,
CardFields,
DigitalWallets,
Fastlane,
} from './PaymentOptions';
const AcdcOptionalPaymentMethods = ( { const AcdcOptionalPaymentMethods = ( {
isFastlane, isFastlane,
@ -15,59 +16,11 @@ const AcdcOptionalPaymentMethods = ( {
<div className="ppcp-r-optional-payment-methods__wrapper"> <div className="ppcp-r-optional-payment-methods__wrapper">
<CardFields /> <CardFields />
<Separator className="ppcp-r-optional-payment-methods__separator" /> <Separator className="ppcp-r-optional-payment-methods__separator" />
<BadgeBox <DigitalWallets />
title={ __(
'Digital Wallets',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-apple-pay.svg',
'icon-button-google-pay.svg',
] }
textBadge={ <PricingTitleBadge item="dw" /> }
description={ __(
'Accept Apple Pay on eligible devices and Google Pay through mobile and web.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
<Separator className="ppcp-r-optional-payment-methods__separator" /> <Separator className="ppcp-r-optional-payment-methods__separator" />
<BadgeBox <AlternativePaymentMethods />
title={ __(
'Alternative Payment Methods',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-ideal.svg',
'icon-button-blik.svg',
'icon-button-bancontact.svg',
] }
textBadge={ <PricingTitleBadge item="apm" /> }
description={ __(
'Seamless payments for customers across the globe using their preferred payment methods.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
<Separator className="ppcp-r-optional-payment-methods__separator" /> <Separator className="ppcp-r-optional-payment-methods__separator" />
<BadgeBox <Fastlane />
title={ __( '', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-payment-method-fastlane-small.svg' ] }
textBadge={
<PricingTitleBadge item="fast country currency=storeCurrency=storeCountrylane" />
}
description={ __(
"Speed up guest checkout with Fatslane. Link a customer's email address to their payment details.",
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
</div> </div>
); );
} }
@ -77,45 +30,9 @@ const AcdcOptionalPaymentMethods = ( {
<div className="ppcp-r-optional-payment-methods__wrapper"> <div className="ppcp-r-optional-payment-methods__wrapper">
<CardFields /> <CardFields />
<Separator className="ppcp-r-optional-payment-methods__separator" /> <Separator className="ppcp-r-optional-payment-methods__separator" />
<BadgeBox <DigitalWallets />
title={ __(
'Digital Wallets',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-apple-pay.svg',
'icon-button-google-pay.svg',
] }
textBadge={ <PricingTitleBadge item="dw" /> }
description={ __(
'Accept Apple Pay on eligible devices and Google Pay through mobile and web.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
<Separator className="ppcp-r-optional-payment-methods__separator" /> <Separator className="ppcp-r-optional-payment-methods__separator" />
<BadgeBox <AlternativePaymentMethods />
title={ __(
'Alternative Payment Methods',
'woocommerce-paypal-payments'
) }
imageBadge={ [
// 'icon-button-sepa.svg',
'icon-button-ideal.svg',
'icon-button-blik.svg',
'icon-button-bancontact.svg',
] }
textBadge={ <PricingTitleBadge item="apm" /> }
description={ __(
'Seamless payments for customers across the globe using their preferred payment methods.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
</div> </div>
); );
} }
@ -124,42 +41,9 @@ const AcdcOptionalPaymentMethods = ( {
<div className="ppcp-r-optional-payment-methods__wrapper"> <div className="ppcp-r-optional-payment-methods__wrapper">
<CardFields /> <CardFields />
<Separator className="ppcp-r-optional-payment-methods__separator" /> <Separator className="ppcp-r-optional-payment-methods__separator" />
<BadgeBox <DigitalWallets />
title={ __( 'Digital Wallets', 'woocommerce-paypal-payments' ) }
imageBadge={ [
'icon-button-apple-pay.svg',
'icon-button-google-pay.svg',
] }
textBadge={ <PricingTitleBadge item="dw" /> }
description={ __(
'Accept Apple Pay on eligible devices and Google Pay through mobile and web.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
<Separator className="ppcp-r-optional-payment-methods__separator" /> <Separator className="ppcp-r-optional-payment-methods__separator" />
<BadgeBox <AlternativePaymentMethods />
title={ __(
'Alternative Payment Methods',
'woocommerce-paypal-payments'
) }
imageBadge={ [
// 'icon-button-sepa.svg',
'icon-button-ideal.svg',
'icon-button-blik.svg',
'icon-button-bancontact.svg',
] }
textBadge={ <PricingTitleBadge item="apm" /> }
description={ __(
'Seamless payments for customers across the globe using their preferred payment methods.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
</div> </div>
); );
}; };

28
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentOptions/AlternativePaymentMethods.js Normal file
View file

@ -0,0 +1,28 @@
import { __ } from '@wordpress/i18n';
import PricingTitleBadge from '../../../../ReusableComponents/PricingTitleBadge';
import BadgeBox from '../../../../ReusableComponents/BadgeBox';
const AlternativePaymentMethods = () => (
<BadgeBox
title={ __(
'Alternative Payment Methods',
'woocommerce-paypal-payments'
) }
imageBadge={ [
// 'icon-button-sepa.svg', // Enable this when the SEPA-Gateway is ready.
'icon-button-ideal.svg',
'icon-button-blik.svg',
'icon-button-bancontact.svg',
] }
textBadge={ <PricingTitleBadge item="apm" /> }
description={ __(
'Seamless payments for customers across the globe using their preferred payment methods.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
);
export default AlternativePaymentMethods;

23
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentOptions/DigitalWallets.js Normal file
View file

@ -0,0 +1,23 @@
import { __ } from '@wordpress/i18n';
import PricingTitleBadge from '../../../../ReusableComponents/PricingTitleBadge';
import BadgeBox from '../../../../ReusableComponents/BadgeBox';
const DigitalWallets = () => (
<BadgeBox
title={ __( 'Digital Wallets', 'woocommerce-paypal-payments' ) }
imageBadge={ [
'icon-button-apple-pay.svg',
'icon-button-google-pay.svg',
] }
textBadge={ <PricingTitleBadge item="dw" /> }
description={ __(
'Accept Apple Pay on eligible devices and Google Pay through mobile and web.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
);
export default DigitalWallets;

22
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentOptions/Fastlane.js Normal file
View file

@ -0,0 +1,22 @@
import { __ } from '@wordpress/i18n';
import PricingTitleBadge from '../../../../ReusableComponents/PricingTitleBadge';
import BadgeBox from '../../../../ReusableComponents/BadgeBox';
const Fastlane = () => (
<BadgeBox
title={ __( '', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-payment-method-fastlane-small.svg' ] }
textBadge={
<PricingTitleBadge item="fast country currency=storeCurrency=storeCountrylane" />
}
description={ __(
"Speed up guest checkout with Fatslane. Link a customer's email address to their payment details.",
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://www.paypal.com/us/business/paypal-business-fees'
}
/>
);
export default Fastlane;

7
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/PaymentOptions/index.js
View file

@ -1,8 +1,11 @@
export { default as AlternativePaymentMethods } from './AlternativePaymentMethods';
export { default as CardFields } from './CardFields';
export { default as CreditDebitCards } from './CreditDebitCards';
export { default as Crypto } from './Crypto'; export { default as Crypto } from './Crypto';
export { default as DigitalWallets } from './DigitalWallets';
export { default as Fastlane } from './Fastlane';
export { default as PayInThree } from './PayInThree'; export { default as PayInThree } from './PayInThree';
export { default as PayLater } from './PayLater'; export { default as PayLater } from './PayLater';
export { default as PayPalCheckout } from './PayPalCheckout'; export { default as PayPalCheckout } from './PayPalCheckout';
export { default as PayWithPayPal } from './PayWithPayPal'; export { default as PayWithPayPal } from './PayWithPayPal';
export { default as Venmo } from './Venmo'; export { default as Venmo } from './Venmo';
export { default as CardFields } from './CardFields';
export { default as CreditDebitCards } from './CreditDebitCards';