mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 12:25:15 +08:00
♻️ Extract repeat code into separate components
This commit is contained in:
Philipp Stracker
parent
17f5b9dd85
commit
a2ce42b2a1
5 changed files with 91 additions and 131 deletions
|
|
@ -1,9 +1,10 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import BadgeBox from '../../../ReusableComponents/BadgeBox';
|
||||
import { Separator } from '../../../ReusableComponents/Elements';
|
||||
import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge';
|
||||
import { CardFields } from './PaymentOptions';
|
||||
import {
|
||||
AlternativePaymentMethods,
|
||||
CardFields,
|
||||
DigitalWallets,
|
||||
Fastlane,
|
||||
} from './PaymentOptions';
|
||||
|
||||
const AcdcOptionalPaymentMethods = ( {
|
||||
isFastlane,
|
||||
|
|
@ -15,59 +16,11 @@ const AcdcOptionalPaymentMethods = ( {
|
|||
<div className="ppcp-r-optional-payment-methods__wrapper">
|
||||
<CardFields />
|
||||
<Separator className="ppcp-r-optional-payment-methods__separator" />
|
||||
<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'
|
||||
}
|
||||
/>
|
||||
<DigitalWallets />
|
||||
<Separator className="ppcp-r-optional-payment-methods__separator" />
|
||||
<BadgeBox
|
||||
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'
|
||||
}
|
||||
/>
|
||||
<AlternativePaymentMethods />
|
||||
<Separator className="ppcp-r-optional-payment-methods__separator" />
|
||||
<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'
|
||||
}
|
||||
/>
|
||||
<Fastlane />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -77,45 +30,9 @@ const AcdcOptionalPaymentMethods = ( {
|
|||
<div className="ppcp-r-optional-payment-methods__wrapper">
|
||||
<CardFields />
|
||||
<Separator className="ppcp-r-optional-payment-methods__separator" />
|
||||
<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'
|
||||
}
|
||||
/>
|
||||
<DigitalWallets />
|
||||
<Separator className="ppcp-r-optional-payment-methods__separator" />
|
||||
<BadgeBox
|
||||
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'
|
||||
}
|
||||
/>
|
||||
<AlternativePaymentMethods />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -124,42 +41,9 @@ const AcdcOptionalPaymentMethods = ( {
|
|||
<div className="ppcp-r-optional-payment-methods__wrapper">
|
||||
<CardFields />
|
||||
<Separator className="ppcp-r-optional-payment-methods__separator" />
|
||||
<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'
|
||||
}
|
||||
/>
|
||||
<DigitalWallets />
|
||||
<Separator className="ppcp-r-optional-payment-methods__separator" />
|
||||
<BadgeBox
|
||||
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'
|
||||
}
|
||||
/>
|
||||
<AlternativePaymentMethods />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 DigitalWallets } from './DigitalWallets';
|
||||
export { default as Fastlane } from './Fastlane';
|
||||
export { default as PayInThree } from './PayInThree';
|
||||
export { default as PayLater } from './PayLater';
|
||||
export { default as PayPalCheckout } from './PayPalCheckout';
|
||||
export { default as PayWithPayPal } from './PayWithPayPal';
|
||||
export { default as Venmo } from './Venmo';
|
||||
export { default as CardFields } from './CardFields';
|
||||
export { default as CreditDebitCards } from './CreditDebitCards';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
