mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Merge pull request #2992 from woocommerce/fix/PCP-4100
🌐 Use new wording only for US stores
This commit is contained in:
commit
02f2e1d005
4 changed files with 62 additions and 40 deletions
|
@ -1,40 +1,62 @@
|
|||
import data from '../../utils/data';
|
||||
|
||||
const BadgeBox = ( props ) => {
|
||||
const titleSize =
|
||||
props.titleType && props.titleType === BADGE_BOX_TITLE_BIG
|
||||
? BADGE_BOX_TITLE_BIG
|
||||
: BADGE_BOX_TITLE_SMALL;
|
||||
const ImageBadge = ( { images } ) => {
|
||||
if ( ! images || ! images.length ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<BadgeContent>
|
||||
<span className="ppcp-r-badge-box__title-image-badge">
|
||||
{ images.map( ( badge ) => data().getImage( badge ) ) }
|
||||
</span>
|
||||
</BadgeContent>
|
||||
);
|
||||
};
|
||||
|
||||
// If `children` is not empty, it's output and wrapped in spaces.
|
||||
const BadgeContent = ( { children } ) => {
|
||||
if ( ! children ) {
|
||||
return null;
|
||||
}
|
||||
return <> { children } </>;
|
||||
};
|
||||
|
||||
const BadgeBox = ( {
|
||||
title,
|
||||
textBadge,
|
||||
imageBadge = [],
|
||||
titleType = BADGE_BOX_TITLE_BIG,
|
||||
description = '',
|
||||
} ) => {
|
||||
let titleSize = BADGE_BOX_TITLE_SMALL;
|
||||
if ( BADGE_BOX_TITLE_BIG === titleType ) {
|
||||
titleSize = BADGE_BOX_TITLE_BIG;
|
||||
}
|
||||
|
||||
const titleTextClassName =
|
||||
'ppcp-r-badge-box__title-text ' +
|
||||
`ppcp-r-badge-box__title-text--${ titleSize }`;
|
||||
|
||||
const titleBaseClassName = 'ppcp-r-badge-box__title';
|
||||
const titleClassName = props.imageBadge
|
||||
const titleClassName = imageBadge.length
|
||||
? `${ titleBaseClassName } ppcp-r-badge-box__title--has-image-badge`
|
||||
: titleBaseClassName;
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-badge-box">
|
||||
<span className={ titleClassName }>
|
||||
<span className={ titleTextClassName }>{ props.title }</span>
|
||||
<span className={ titleTextClassName }>{ title }</span>
|
||||
|
||||
{ props.imageBadge && (
|
||||
<span className="ppcp-r-badge-box__title-image-badge">
|
||||
{ props.imageBadge.map( ( badge ) =>
|
||||
data().getImage( badge )
|
||||
) }
|
||||
</span>
|
||||
) }
|
||||
|
||||
{ props.textBadge }
|
||||
<ImageBadge images={ imageBadge } />
|
||||
<BadgeContent>{ textBadge }</BadgeContent>
|
||||
</span>
|
||||
<div className="ppcp-r-badge-box__description">
|
||||
{ props?.description && (
|
||||
{ description && (
|
||||
<p
|
||||
className="ppcp-r-badge-box__description"
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: props.description,
|
||||
__html: description,
|
||||
} }
|
||||
></p>
|
||||
) }
|
||||
|
|
|
@ -53,9 +53,7 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
|
|||
imageBadge={ [
|
||||
'icon-payment-method-paypal-small.svg',
|
||||
] }
|
||||
textBadge={
|
||||
<PricingTitleBadge item="plater" />
|
||||
}
|
||||
textBadge={ <PricingTitleBadge item="plater" /> }
|
||||
description={ sprintf(
|
||||
// translators: %s: Link to PayPal business fees guide
|
||||
__(
|
||||
|
@ -100,8 +98,7 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
|
|||
) }
|
||||
titleType={ BADGE_BOX_TITLE_BIG }
|
||||
description={ __(
|
||||
'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more.\n' +
|
||||
'Note: Additional application required for more methods',
|
||||
'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more. Note: Additional application required for more methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
|
@ -176,13 +173,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
|
|||
<div className="ppcp-r-welcome-docs__col">
|
||||
<BadgeBox
|
||||
title={ __(
|
||||
'Expanded Checkout',
|
||||
'Optional payment methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
titleType={ BADGE_BOX_TITLE_BIG }
|
||||
description={ __(
|
||||
'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more.\n' +
|
||||
'Note: Additional application required for more methods',
|
||||
'with additional application',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
|
@ -251,13 +247,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
|
|||
<div className="ppcp-r-welcome-docs__col">
|
||||
<BadgeBox
|
||||
title={ __(
|
||||
'Expanded Checkout',
|
||||
'Optional payment methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
titleType={ BADGE_BOX_TITLE_BIG }
|
||||
description={ __(
|
||||
'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more.\n' +
|
||||
'Note: Additional application required for more methods',
|
||||
'with additional application',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
|
|
|
@ -97,8 +97,7 @@ const BcdcFlow = ( { isPayLater, storeCountry } ) => {
|
|||
) }
|
||||
titleType={ BADGE_BOX_TITLE_BIG }
|
||||
description={ __(
|
||||
'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more.\n' +
|
||||
'Note: Additional application required for more methods',
|
||||
'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more. Note: Additional application required for more methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
|
@ -159,13 +158,12 @@ const BcdcFlow = ( { isPayLater, storeCountry } ) => {
|
|||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<BadgeBox
|
||||
title={ __(
|
||||
'Expanded Checkout',
|
||||
'Optional payment methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
titleType={ BADGE_BOX_TITLE_BIG }
|
||||
description={ __(
|
||||
'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more.\n' +
|
||||
'Note: Additional application required for more methods',
|
||||
'with additional application',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue