Copy updates for the Optimized Checkout (#4558)

* Copy updates for the Optimized Checkout

* Additional changes

* Changing the setting description

* Changelog and readme entries

* Fix e2e tests + CSS

* Update changelog.txt

Co-authored-by: daledupreez <[email protected]>

* Readme entry update

* Update client/settings/payment-settings/promotional-banner/oc-promotion-banner.js

Co-authored-by: daledupreez <[email protected]>

* Fix promotional banner title

---------

Co-authored-by: daledupreez <[email protected]>

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.8.0 - xxxx-xx-xx =
+* Update - Copy for the Optimized Checkout settings and notices
 * Dev - Implements WooCommerce constants for the tax statuses
 * Add - Adds the current setting value for the Optimized Checkout to the Stripe System Status Report data
 * Add - A new pill to the payment methods page to indicate the credit card requirement when the Optimized Checkout feature is enabled

client/blocks/upe/styles.scss

@@ -24,7 +24,7 @@ button.stripe-gateway-stripelink-modal-trigger:hover {
 	justify-content: center;
 }
 /* stylelint-disable selector-id-pattern */
-#radio-control-wc-payment-method-options-stripe__content.single-payment-element {
+#radio-control-wc-payment-method-options-stripe__content.optimized-checkout-element {
 	padding-top: 1.4em;
 
 	.content {

client/settings/advanced-settings-section/__tests__/optimized-checkout-feature.test.js

@@ -6,7 +6,7 @@ import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
 
 jest.useFakeTimers();
 
-describe( 'Single Payment Element feature setting', () => {
+describe( 'Optimized Checkout Element feature setting', () => {
 	it( 'should render', () => {
 		render( <OptimizedCheckoutFeature /> );
 
@@ -34,7 +34,7 @@ describe( 'Single Payment Element feature setting', () => {
 		);
 
 		const checkbox = screen.getByTestId(
-			'single-payment-element-checkbox'
+			'optimized-checkout-element-checkbox'
 		);
 
 		userEvent.click( checkbox );

client/settings/advanced-settings-section/optimized-checkout-feature.js

@@ -68,14 +68,14 @@ const OptimizedCheckoutFeature = () => {
 				) }
 			</h4>
 			<CheckboxControl
-				data-testid="single-payment-element-checkbox"
+				data-testid="optimized-checkout-element-checkbox"
 				label={ __(
-					'Automatically display the most relevant payment methods',
+					"Dynamically display the most relevant payment methods you've enabled",
 					'woocommerce-gateway-stripe'
 				) }
 				help={ createInterpolateElement(
 					__(
-						"Maximize conversions by enabling Stripe's Optimized Checkout Suite. Display the most relevant payment methods for each of your customers automatically. <learnMoreLink>Learn more</learnMoreLink>.",
+						"Stripe's Optimized Checkout Suite uses AI models to order the most relevant payment methods you've enabled for each of your customers dynamically. <learnMoreLink>Learn more</learnMoreLink>.",
 						'woocommerce-gateway-stripe'
 					),
 					{

client/settings/payment-settings/promotional-banner/__tests__/oc-promotion-banner.test.js

@@ -43,12 +43,12 @@ describe( 'OC promotional banner', () => {
 		);
 		expect(
 			getByText(
-				"Increase conversions with Stripe's Optimized Checkout Suite"
+				"Increase conversion with Stripe's Optimized Checkout Suite"
 			)
 		).toBeInTheDocument();
 		expect(
 			getByText(
-				/Optimize your checkout for more sales by automatically displaying the most relevant payment methods for each customer./
+				/Optimize your checkout experience for more sales by dynamically displaying the most relevant payment methods you've enabled for each customer./
 			)
 		).toBeInTheDocument();
 	} );

client/settings/payment-settings/promotional-banner/oc-promotion-banner.js

@@ -89,15 +89,15 @@ export const OCPromotionBanner = ( {
 				<CardColumn>
 					<TitleBNPL>
 						{ __(
-							"Increase conversions with Stripe's Optimized Checkout Suite",
+							"Increase conversion with Stripe's Optimized Checkout Suite",
 							'woocommerce-gateway-stripe'
 						) }
 					</TitleBNPL>
 					<p>
 						{ __( '', 'woocommerce-gateway-stripe' ) }
 						{ interpolateComponents( {
 							mixedString: __(
-								"Optimize your checkout for more sales by automatically displaying the most relevant payment methods for each customer. {{docLink}}Learn more{{/docLink}} about Stripe's Optimized Checkout Suite.",
+								"Optimize your checkout experience for more sales by dynamically displaying the most relevant payment methods you've enabled for each customer. {{docLink}}Learn more{{/docLink}} about Stripe's Optimized Checkout Suite.",
 								'woocommerce-gateway-stripe'
 							),
 							components: {

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.8.0 - xxxx-xx-xx =
+* Update - Copy for the Optimized Checkout settings and notices
 * Dev - Implements WooCommerce constants for the tax statuses
 * Add - Adds the current setting value for the Optimized Checkout to the Stripe System Status Report data
 * Add - A new pill to the payment methods page to indicate the credit card requirement when the Optimized Checkout feature is enabled

tests/e2e/tests/optimized-checkout.setup.js

@@ -14,7 +14,9 @@ setup(
 			'/wp-admin/admin.php?page=wc-settings&tab=checkout&section=stripe&panel=settings'
 		);
 
-		const checkbox = page.getByTestId( 'single-payment-element-checkbox' );
+		const checkbox = page.getByTestId(
+			'optimized-checkout-element-checkbox'
+		);
 		const isChecked = await checkbox.isChecked();
 
 		if ( ! isChecked ) {
@@ -26,7 +28,7 @@ setup(
 				)
 			).toBeVisible();
 			await expect(
-				page.getByTestId( 'single-payment-element-checkbox' )
+				page.getByTestId( 'optimized-checkout-element-checkbox' )
 			).toBeChecked();
 		}