woocommerce-paypal-payments/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js

import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n';
import Separator from '../Separator';

const AcdcOptionalPaymentMethods = ( {
	isFastlane,
	isPayLater,
	storeCountry,
} ) => {
	if ( isFastlane && isPayLater && storeCountry === 'us' ) {
		return (
			<div className="ppcp-r-optional-payment-methods__wrapper">
				<BadgeBox
					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={ __(
						'from 2.59% + $0.49 USD<sup>1</sup>',
						'woocommerce-paypal-payments'
					) }
					description={ sprintf(
						// translators: %s: Link to PayPal REST application guide
						__(
							'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
							'woocommerce-paypal-payments'
						),
						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
					) }
				/>
				<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={ __(
						'from 2.59% + $0.49 USD<sup>1</sup>',
						'woocommerce-paypal-payments'
					) }
					description={ sprintf(
						// translators: %s: Link to PayPal REST application guide
						__(
							'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
							'woocommerce-paypal-payments'
						),
						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
					) }
				/>
				<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={ __(
						'from 3.49% + $0.49 USD<sup>1</sup>',
						'woocommerce-paypal-payments'
					) }
					description={ sprintf(
						// translators: %s: Link to PayPal REST application guide
						__(
							'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
							'woocommerce-paypal-payments'
						),
						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
					) }
				/>
				<Separator className="ppcp-r-optional-payment-methods__separator" />
				<BadgeBox
					title={ __( '', 'woocommerce-paypal-payments' ) }
					imageBadge={ [ 'icon-payment-method-fastlane-small.svg' ] }
					textBadge={ __(
						'from 2.59% + $0.49 USD<sup>1</sup>',
						'woocommerce-paypal-payments'
					) }
					description={ sprintf(
						// translators: %s: Link to PayPal REST application guide
						__(
							'Speed up guest checkout with Fatslane. Link a customer\'s email address to their payment details. <a target="_blank" href="%s">Learn more</a>',
							'woocommerce-paypal-payments'
						),
						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
					) }
				/>
			</div>
		);
	}

	if ( isPayLater && storeCountry === 'uk' ) {
		return (
			<div className="ppcp-r-optional-payment-methods__wrapper">
				<BadgeBox
					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={ __(
						'from 1.20% + £0.30 GBP<sup>1</sup>',
						'woocommerce-paypal-payments'
					) }
					description={ sprintf(
						// translators: %s: Link to PayPal REST application guide
						__(
							'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
							'woocommerce-paypal-payments'
						),
						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
					) }
				/>
				<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={ __(
						'from 1.20% + £0.30 GBP<sup>1</sup>',
						'woocommerce-paypal-payments'
					) }
					description={ sprintf(
						// translators: %s: Link to PayPal REST application guide
						__(
							'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
							'woocommerce-paypal-payments'
						),
						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
					) }
				/>
				<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={ __(
						'from 1.20% + £0.30 GBP<sup>1</sup>',
						'woocommerce-paypal-payments'
					) }
					description={ sprintf(
						// translators: %s: Link to PayPal REST application guide
						__(
							'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
							'woocommerce-paypal-payments'
						),
						'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
					) }
				/>
			</div>
		);
	}

	return (
		<div className="ppcp-r-optional-payment-methods__wrapper">
			<BadgeBox
				title={ __(
					'Optional payment methods',
					'woocommerce-paypal-payments'
				) }
				titleType={ BADGE_BOX_TITLE_BIG }
				description={ __(
					'with additional application',
					'woocommerce-paypal-payments'
				) }
			/>
			<BadgeBox
				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={ __(
					'from 3.40% + €0.35 EUR<sup>1</sup>',
					'woocommerce-paypal-payments'
				) }
				description={ sprintf(
					// translators: %s: Link to PayPal REST application guide
					__(
						'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
						'woocommerce-paypal-payments'
					),
					'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
				) }
			/>
			<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={ __(
					'from 3.40% + €0.35 EUR<sup>1</sup>',
					'woocommerce-paypal-payments'
				) }
				description={ sprintf(
					// translators: %s: Link to PayPal REST application guide
					__(
						'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
						'woocommerce-paypal-payments'
					),
					'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
				) }
			/>
			<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={ __(
					'from 3.40% + €0.35 EUR<sup>1</sup>',
					'woocommerce-paypal-payments'
				) }
				description={ sprintf(
					// translators: %s: Link to PayPal REST application guide
					__(
						'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
						'woocommerce-paypal-payments'
					),
					'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
				) }
			/>
		</div>
	);
};

export default AcdcOptionalPaymentMethods;