diff --git a/changelog/deferred-upe-rollout-notices b/changelog/deferred-upe-rollout-notices new file mode 100644 index 00000000000..231d4bb7942 --- /dev/null +++ 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 index 355174f37c1..d47b2ddb9e1 100644 --- 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,7 +83,6 @@ const UpeSetupBanner = () => { return ( <> - { >

{ __( - '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' ) }

{ __( /* 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' ) }

@@ -106,7 +106,7 @@ const UpeSetupBanner = () => { @@ -278,6 +278,30 @@ const PaymentMethods = () => { ) } + { isUpeEnabled && upeType === 'legacy' && ( + + + { 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 + + ), + }, + } ) } + + + ) } + { availableMethods.map( @@ -341,10 +365,21 @@ const PaymentMethods = () => { ) } - { isUpeSettingsPreviewEnabled && ! isUpeEnabled && ( - - ) } + + { isUpeSettingsPreviewEnabled && ! isUpeEnabled && ( + <> +
+ + + + + ) } + { activationModalParams && ( { diff --git a/client/payment-methods/test/index.js b/client/payment-methods/test/index.js index 2830f9d3c55..5d2ebf69ff9 100644 --- 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();