Notices for deferred UPE rollout (#7210)

Co-authored-by: Francesco <[email protected]>
Automattic · Sep 14, 2023 · 4fa9b05 · 4fa9b05
1 parent 37bbac3
commit 4fa9b05
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 14 deletions.
diff --git a/changelog/deferred-upe-rollout-notices b/changelog/deferred-upe-rollout-notices
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Add notice for legacy UPE users about deferred UPE upcoming, and adjust wording for non-UPE users
diff --git a/client/payment-methods/index.js b/client/payment-methods/index.js
@@ -8,7 +8,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	Card,
-	CardDivider,
 	CardHeader,
 	DropdownMenu,
 	ExternalLink,
@@ -48,6 +47,8 @@ import ConfirmPaymentMethodActivationModal from './activation-modal';
 import ConfirmPaymentMethodDeleteModal from './delete-modal';
 import { getAdminUrl } from 'wcpay/utils';
 import { getPaymentMethodDescription } from 'wcpay/utils/payment-methods';
+import InlineNotice from 'wcpay/components/inline-notice';
+import interpolateComponents from '@automattic/interpolate-components';
 
 const PaymentMethodsDropdownMenu = ( { setOpenModal } ) => {
 	return (
@@ -82,22 +83,21 @@ const UpeSetupBanner = () => {
 
 	return (
 		<>
-			<CardDivider />
 			<CardBody
 				className={ classNames( 'payment-methods__express-checkouts', {
 					'background-local-payment-methods': ! wcpaySettings.isBnplAffirmAfterpayEnabled,
 				} ) }
 			>
 				<h3>
 					{ __(
-						'Boost your sales by accepting additional payment methods',
+						'Enable the new WooPayments checkout experience, which will become the default on November 1, 2023',
 						'woocommerce-payments'
 					) }
 				</h3>
 				<p>
 					{ __(
 						/* eslint-disable-next-line max-len */
-						'Get access to additional payment methods and an improved checkout experience.',
+						'This will improve the checkout experience and boost sales with access to additional payment methods, which you’ll be able to manage from here in settings.',
 						'woocommerce-payments'
 					) }
 				</p>
@@ -106,7 +106,7 @@ const UpeSetupBanner = () => {
 					<span className="payment-methods__express-checkouts-get-started">
 						<Button isSecondary onClick={ handleEnableUpeClick }>
 							{ __(
-								'Enable in your store',
+								'Enable payment methods',
 								'woocommerce-payments'
 							) }
 						</Button>
@@ -278,6 +278,30 @@ const PaymentMethods = () => {
 					</CardHeader>
 				) }
 
+				{ isUpeEnabled && upeType === 'legacy' && (
+					<CardHeader className="payment-methods__header">
+						<InlineNotice
+							icon
+							status="warning"
+							isDismissible={ false }
+						>
+							{ interpolateComponents( {
+								mixedString: __(
+									'The new WooPayments checkout experience will become the default on October 11, 2023.' +
+										' {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+									'woocommerce-payments'
+								),
+								components: {
+									learnMoreLink: (
+										// eslint-disable-next-line max-len
+										<ExternalLink href="https://woocommerce.com/document/woopayments/payment-methods/additional-payment-methods/#popular-payment-methods" />
+									),
+								},
+							} ) }
+						</InlineNotice>
+					</CardHeader>
+				) }
+
 				<CardBody size={ null }>
 					<PaymentMethodsList className="payment-methods__available-methods">
 						{ availableMethods.map(
@@ -341,10 +365,21 @@ const PaymentMethods = () => {
 						) }
 					</PaymentMethodsList>
 				</CardBody>
-				{ isUpeSettingsPreviewEnabled && ! isUpeEnabled && (
-					<UpeSetupBanner />
-				) }
 			</Card>
+
+			{ isUpeSettingsPreviewEnabled && ! isUpeEnabled && (
+				<>
+					<br />
+					<Card
+						className={ classNames( 'payment-methods', {
+							'is-loading': status === 'pending',
+						} ) }
+					>
+						<UpeSetupBanner />
+					</Card>
+				</>
+			) }
+
 			{ activationModalParams && (
 				<ConfirmPaymentMethodActivationModal
 					onClose={ () => {

diff --git a/client/payment-methods/test/index.js b/client/payment-methods/test/index.js
@@ -227,7 +227,7 @@ describe( 'PaymentMethods', () => {
 		);
 
 		const enableWooCommercePaymentText = screen.getByText(
-			'Boost your sales by accepting additional payment methods'
+			'Enable the new WooPayments checkout experience, which will become the default on November 1, 2023'
 		);
 
 		expect( enableWooCommercePaymentText ).toBeInTheDocument();
@@ -342,7 +342,7 @@ describe( 'PaymentMethods', () => {
 		);
 
 		const enableWooCommercePaymentText = screen.getByText(
-			'Boost your sales by accepting additional payment methods'
+			'Enable the new WooPayments checkout experience, which will become the default on November 1, 2023'
 		);
 
 		expect( enableWooCommercePaymentText.parentElement ).not.toHaveClass(
@@ -371,7 +371,7 @@ describe( 'PaymentMethods', () => {
 		);
 
 		const enableWooCommercePaymentText = screen.getByText(
-			'Boost your sales by accepting additional payment methods'
+			'Enable the new WooPayments checkout experience, which will become the default on November 1, 2023'
 		);
 
 		expect( enableWooCommercePaymentText.parentElement ).toHaveClass(
@@ -404,7 +404,7 @@ describe( 'PaymentMethods', () => {
 			);
 
 			const enableWooCommercePaymentText = screen.queryByText(
-				'Boost your sales by accepting additional payment methods'
+				'Enable the new WooPayments checkout experience, which will become the default on November 1, 2023'
 			);
 
 			expect( enableWooCommercePaymentText ).toBeNull();
@@ -444,7 +444,7 @@ describe( 'PaymentMethods', () => {
 		).not.toBeInTheDocument();
 	} );
 
-	test( 'clicking "Enable in your store" in express payments enable UPE and redirects', async () => {
+	test( 'clicking "Enable payment methods" in express payments enable UPE and redirects', async () => {
 		Object.defineProperty( window, 'location', {
 			value: {
 				href: 'example.com/',
@@ -471,7 +471,7 @@ describe( 'PaymentMethods', () => {
 		);
 
 		const enableInYourStoreButton = screen.queryByRole( 'button', {
-			name: 'Enable in your store',
+			name: 'Enable payment methods',
 		} );
 
 		expect( enableInYourStoreButton ).toBeInTheDocument();