♻️ Extract code into separate components

This commit is contained in:
Philipp Stracker 2025-02-03 17:25:29 +01:00
parent 90cce3b19b
commit 17f5b9dd85
No known key found for this signature in database
2 changed files with 7 additions and 106 deletions

View file

@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
import BadgeBox from '../../../ReusableComponents/BadgeBox'; import BadgeBox from '../../../ReusableComponents/BadgeBox';
import { Separator } from '../../../ReusableComponents/Elements'; import { Separator } from '../../../ReusableComponents/Elements';
import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge'; import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge';
import { CardFields } from './PaymentOptions';
const AcdcOptionalPaymentMethods = ( { const AcdcOptionalPaymentMethods = ( {
isFastlane, isFastlane,
@ -12,26 +13,7 @@ const AcdcOptionalPaymentMethods = ( {
if ( isFastlane && isPayLater && storeCountry === 'US' ) { if ( isFastlane && isPayLater && storeCountry === 'US' ) {
return ( return (
<div className="ppcp-r-optional-payment-methods__wrapper"> <div className="ppcp-r-optional-payment-methods__wrapper">
<BadgeBox <CardFields />
title={ __(
'Custom Card Fields',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-visa.svg',
'icon-button-mastercard.svg',
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ <PricingTitleBadge item="ccf" /> }
description={ __(
'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection.',
'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 <BadgeBox
title={ __( title={ __(
@ -93,26 +75,7 @@ const AcdcOptionalPaymentMethods = ( {
if ( isPayLater && storeCountry === 'uk' ) { if ( isPayLater && storeCountry === 'uk' ) {
return ( return (
<div className="ppcp-r-optional-payment-methods__wrapper"> <div className="ppcp-r-optional-payment-methods__wrapper">
<BadgeBox <CardFields />
title={ __(
'Custom Card Fields',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-visa.svg',
'icon-button-mastercard.svg',
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ <PricingTitleBadge item="ccf" /> }
description={ __(
'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection.',
'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 <BadgeBox
title={ __( title={ __(
@ -159,26 +122,7 @@ const AcdcOptionalPaymentMethods = ( {
return ( return (
<div className="ppcp-r-optional-payment-methods__wrapper"> <div className="ppcp-r-optional-payment-methods__wrapper">
<BadgeBox <CardFields />
title={ __(
'Custom Card Fields',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-visa.svg',
'icon-button-mastercard.svg',
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ <PricingTitleBadge item="ccf" /> }
description={ __(
'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection.',
'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 <BadgeBox
title={ __( 'Digital Wallets', 'woocommerce-paypal-payments' ) } title={ __( 'Digital Wallets', 'woocommerce-paypal-payments' ) }

View file

@ -1,60 +1,17 @@
import { __ } from '@wordpress/i18n'; import { CreditDebitCards } from './PaymentOptions';
import BadgeBox from '../../../ReusableComponents/BadgeBox';
import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge';
const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => { const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => {
if ( isPayLater && storeCountry === 'us' ) { if ( isPayLater && storeCountry === 'us' ) {
return ( return (
<div className="ppcp-r-optional-payment-methods__wrapper"> <div className="ppcp-r-optional-payment-methods__wrapper">
<BadgeBox <CreditDebitCards />
title={ __(
'Credit and Debit Cards',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-visa.svg',
'icon-button-mastercard.svg',
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={
<PricingTitleBadge item="standardCardFields" />
}
description={ __(
'Process major credit and debit cards through PayPals card fields.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input'
}
/>
</div> </div>
); );
} }
return ( return (
<div className="ppcp-r-optional-payment-methods__wrapper"> <div className="ppcp-r-optional-payment-methods__wrapper">
<BadgeBox <CreditDebitCards />
title={ __(
'Credit and Debit Cards',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-visa.svg',
'icon-button-mastercard.svg',
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ <PricingTitleBadge item="standardCardFields" /> }
description={ __(
'Process major credit and debit cards through PayPals card fields.',
'woocommerce-paypal-payments'
) }
learnMoreLink={
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input'
}
/>
</div> </div>
); );
}; };