woocommerce-paypal-payments/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js

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

const BcdcFlow = ( {
	isPayLater,
	storeCountry,
	storeCurrency,
	countryPriceInfo,
} ) => {
	if ( isPayLater && storeCountry === 'us' ) {
		return (
			<div className="ppcp-r-welcome-docs__wrapper">
				<div className="ppcp-r-welcome-docs__col">
					<BadgeBox
						title={ __(
							'PayPal Checkout',
							'woocommerce-paypal-payments'
						) }
						titleType={ BADGE_BOX_TITLE_BIG }
						textBadge={ __(
							'from 3.49% + $0.49 USD<sup>1</sup>',
							'woocommerce-paypal-payments'
						) }
						description={ __(
							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
							'woocommerce-paypal-payments'
						) }
					/>
					<BadgeBox
						title={ __(
							'Included in PayPal Checkout',
							'woocommerce-paypal-payments'
						) }
						titleType={ BADGE_BOX_TITLE_BIG }
					/>
					<BadgeBox
						title={ __(
							'Pay with PayPal',
							'woocommerce-paypal-payments'
						) }
						imageBadge={ [ 'icon-button-paypal.svg' ] }
						description={ sprintf(
							// translators: %s: Link to PayPal REST application guide
							__(
								'Our brand recognition helps give customers the confidence to buy. <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-page-welcome-mode-separator" />
					<BadgeBox
						title={ __(
							'Pay Later',
							'woocommerce-paypal-payments'
						) }
						imageBadge={ [
							'icon-payment-method-paypal-small.svg',
						] }
						description={ sprintf(
							// translators: %s: Link to PayPal REST application guide
							__(
								'Offer installment payment options and get paid upfront - at no extra cost to you. <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-page-welcome-mode-separator" />
					<BadgeBox
						title={ __( 'Venmo', 'woocommerce-paypal-payments' ) }
						imageBadge={ [ 'icon-button-venmo.svg' ] }
						description={ sprintf(
							// translators: %s: Link to PayPal REST application guide
							__(
								'Automatically offer Venmo checkout to millions of active users. <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-page-welcome-mode-separator" />
					<BadgeBox
						title={ __( 'Crypto', 'woocommerce-paypal-payments' ) }
						imageBadge={ [ 'icon-payment-method-crypto.svg' ] }
						description={ sprintf(
							// translators: %s: Link to PayPal REST application guide
							__(
								'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>',
								'woocommerce-paypal-payments'
							),
							'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
						) }
					/>
				</div>
				<div className="ppcp-r-welcome-docs__col">
					<BadgeBox
						title={ __(
							'Optional payment methods',
							'woocommerce-paypal-payments'
						) }
						titleType={ BADGE_BOX_TITLE_BIG }
						description={ __(
							'with additional application',
							'woocommerce-paypal-payments'
						) }
					/>
					<BadgeBox
						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={ __(
							'from 2.99% + $0.49 USD<sup>1</sup>',
							'woocommerce-paypal-payments'
						) }
						description={ sprintf(
							// translators: %s: Link to PayPal REST application guide
							__(
								'Process major credit and debit cards through PayPal’s card fields. <a target="_blank" href="%s">Learn more</a>',
								'woocommerce-paypal-payments'
							),
							'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
						) }
					/>
				</div>
			</div>
		);
	}

	return (
		<div className="ppcp-r-welcome-docs__wrapper ppcp-r-welcome-docs__wrapper--one-col">
			<BadgeBox
				title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
				titleType={ BADGE_BOX_TITLE_BIG }
				textBadge={ generatePriceText(
					'checkout',
					countryPriceInfo[ storeCountry ],
					storeCurrency
				) }
				description={ __(
					'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
					'woocommerce-paypal-payments'
				) }
			/>
			<BadgeBox
				title={ __(
					'Included in PayPal Checkout',
					'woocommerce-paypal-payments'
				) }
				titleType={ BADGE_BOX_TITLE_BIG }
			/>
			<BadgeBox
				title={ __( 'Pay with PayPal', 'woocommerce-paypal-payments' ) }
				imageBadge={ [ 'icon-button-paypal.svg' ] }
				description={ sprintf(
					// translators: %s: Link to PayPal REST application guide
					__(
						'Our brand recognition helps give customers the confidence to buy. <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-page-welcome-mode-separator" />
			<BadgeBox
				title={ __( 'Pay Later', 'woocommerce-paypal-payments' ) }
				imageBadge={ [ 'icon-payment-method-paypal-small.svg' ] }
				description={ sprintf(
					// translators: %s: Link to PayPal REST application guide
					__(
						'Offer installment payment options and get paid upfront - at no extra cost to you. <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-page-welcome-mode-separator" />
			<BadgeBox
				title={ __(
					'Optional payment methods',
					'woocommerce-paypal-payments'
				) }
				titleType={ BADGE_BOX_TITLE_BIG }
				description={ __(
					'with additional application',
					'woocommerce-paypal-payments'
				) }
			/>
			<BadgeBox
				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={ generatePriceText(
					'standardCardFields',
					countryPriceInfo[ storeCountry ],
					storeCurrency
				) }
				description={ sprintf(
					// translators: %s: Link to PayPal REST application guide
					__(
						'Process major credit and debit cards through PayPal’s card fields. <a target="_blank" href="%s">Learn more</a>',
						'woocommerce-paypal-payments'
					),
					'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
				) }
			/>
		</div>
	);
};

export default BcdcFlow;