Merge pull request #2992 from woocommerce/fix/PCP-4100

🌐 Use new wording only for US stores
This commit is contained in:
Emili Castells 2025-01-14 12:13:19 +01:00 committed by GitHub
commit 02f2e1d005
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 62 additions and 40 deletions

View file

@ -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>
) }

View file

@ -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'
) }
/>

View file

@ -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'
) }
/>