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

🌐 Use new wording only for US stores

modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js

@@ -1,40 +1,62 @@
 import data from '../../utils/data';
 
-const BadgeBox = ( props ) => {
+const ImageBadge = ( { images } ) => {
-	const titleSize =
+	if ( ! images || ! images.length ) {
-		props.titleType && props.titleType === BADGE_BOX_TITLE_BIG
+		return null;
-			? BADGE_BOX_TITLE_BIG
+	}
-			: BADGE_BOX_TITLE_SMALL;
+
+	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 && (
+				<ImageBadge images={ imageBadge } />
-					<span className="ppcp-r-badge-box__title-image-badge">
+				<BadgeContent>{ textBadge }</BadgeContent>
-						{ props.imageBadge.map( ( badge ) =>
-							data().getImage( badge )
-						) }
-					</span>
-				) }
-
-				{ props.textBadge }
 			</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>
 				) }

modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js

@@ -53,9 +53,7 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
 						imageBadge={ [
 							'icon-payment-method-paypal-small.svg',
 						] }
-                        textBadge={
+						textBadge={ <PricingTitleBadge item="plater" /> }
-                            <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' +
+							'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more. Note: Additional application required for more methods',
-                            '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' +
+							'with additional application',
-                            'Note: Additional application required for more methods',
 							'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' +
+						'with additional application',
-                        'Note: Additional application required for more methods',
 						'woocommerce-paypal-payments'
 					) }
 				/>

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

@@ -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' +
+							'Accept debit/credit cards, PayPal, Apple Pay, Google Pay, and more. Note: Additional application required for more methods',
-                            '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' +
+					'with additional application',
-                    'Note: Additional application required for more methods',
 					'woocommerce-paypal-payments'
 				) }
 			/>

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js

@@ -17,14 +17,21 @@ const StepPaymentMethods = ( {} ) => {
 
 	const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
 
+	let screenTitle = __(
+		'Add optional payment methods to your Checkout',
+		'woocommerce-paypal-payments'
+	);
+
+	if ( 'US' === storeCountry ) {
+		screenTitle = __(
+			'Add Expanded Checkout for More Ways to Pay',
+			'woocommerce-paypal-payments'
+		);
+	}
+
 	return (
 		<div className="ppcp-r-page-optional-payment-methods">
-			<OnboardingHeader
+			<OnboardingHeader title={ screenTitle } />
-				title={ __(
-					'Add Expanded Checkout for more ways to pay',
-					'woocommerce-paypal-payments'
-				) }
-			/>
 			<div className="ppcp-r-inner-container">
 				<SelectBoxWrapper>
 					<SelectBox