UPE banner for APM enabled merchants (#3433)

* UPE banner for APM enabled merchants

* Fix payment method list override

* Changelog and readme entries

* Changing the dummy text for the new banner

* Adding specific unit tests

* Updating promotional surface with the final copy

* Fix minor typo

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 8.7.0 - xxxx-xx-xx =
+* Add - Introduces a new promotional surface to encourage merchants with the legacy checkout experience and APMs enabled to use the new checkout experience.
 * Fix - Prevent duplicate failed-order emails from being sent.
 * Fix - Support custom name and description for Afterpay.
 * Fix - Link APM charge IDs in Order Details page to their Stripe dashboard payments page.

client/settings/payment-settings/__tests__/promotional-banner-section.test.js

@@ -3,13 +3,19 @@ import React from 'react';
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PromotionalBannerSection from '../promotional-banner-section';
+import { useEnabledPaymentMethodIds } from 'wcstripe/data';
 
 jest.mock( '@wordpress/data' );
 
 jest.mock( 'wcstripe/data/account', () => ( {
 	useAccount: jest.fn(),
 } ) );
 
+jest.mock( 'wcstripe/data', () => ( {
+	useEnabledPaymentMethodIds: jest.fn().mockReturnValue( [ [ 'card' ] ] ),
+	useTestMode: jest.fn().mockReturnValue( [ false ] ),
+} ) );
+
 const noticesDispatch = {
 	createErrorNotice: jest.fn(),
 	createSuccessNotice: jest.fn(),
@@ -68,4 +74,19 @@ describe( 'PromotionalBanner', () => {
 			screen.queryByTestId( 're-connect-account-banner' )
 		).toBeInTheDocument();
 	} );
+
+	it( 'Display the APM version of the new checkout experience promotional surface when any APM is enabled', () => {
+		useEnabledPaymentMethodIds.mockReturnValue( [ [ 'card', 'ideal' ] ] );
+
+		render(
+			<PromotionalBannerSection
+				setShowPromotionalBanner={ setShowPromotionalBanner }
+				isConnectedViaOAuth={ true }
+			/>
+		);
+
+		expect(
+			screen.queryByTestId( 'new-checkout-apms-banner' )
+		).toBeInTheDocument();
+	} );
 } );

client/settings/payment-settings/promotional-banner-section.js

@@ -1,14 +1,15 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { React } from 'react';
-import { Card, Button } from '@wordpress/components';
+import { Card, Button, ExternalLink } from '@wordpress/components';
 import styled from '@emotion/styled';
+import interpolateComponents from 'interpolate-components';
 import CardBody from '../card-body';
 import bannerIllustration from './banner-illustration.svg';
 import bannerIllustrationReConnect from './banner-illustration-re-connect.svg';
 import Pill from 'wcstripe/components/pill';
 import { recordEvent } from 'wcstripe/tracking';
-import { useTestMode } from 'wcstripe/data';
+import { useEnabledPaymentMethodIds, useTestMode } from 'wcstripe/data';
 
 const NewPill = styled( Pill )`
 	border-color: #674399;
@@ -66,6 +67,9 @@ const PromotionalBannerSection = ( {
 		'core/notices'
 	);
 	const [ isTestModeEnabled ] = useTestMode();
+	const [ enabledPaymentMethodIds ] = useEnabledPaymentMethodIds();
+	const hasAPMEnabled =
+		enabledPaymentMethodIds.filter( ( e ) => e !== 'card' ).length > 0;
 
 	const handleButtonClick = () => {
 		const callback = async () => {
@@ -159,6 +163,65 @@ const PromotionalBannerSection = ( {
 		</CardBody>
 	);
 
+	const NewCheckoutExperienceAPMsBanner = () => (
+		<CardBody data-testid="new-checkout-apms-banner">
+			<CardInner>
+				<CardColumn>
+					<NewPill>
+						{ __( 'New', 'woocommerce-gateway-stripe' ) }
+					</NewPill>
+					<h4>
+						{ __(
+							'Enable the new Stripe checkout to continue accepting non-card payments',
+							'woocommerce-gateway-stripe'
+						) }
+					</h4>
+					<p>
+						{ interpolateComponents( {
+							mixedString: __(
+								'Stripe will end support for non-card payment methods in the {{StripeLegacyLink}}legacy checkout on October 29, 2024{{/StripeLegacyLink}}. To continue accepting non-card payments, you must enable the new checkout experience or remove non-card payment methods from your checkout to avoid payment disruptions.',
+								'woocommerce-gateway-stripe'
+							),
+							components: {
+								StripeLegacyLink: (
+									<ExternalLink href="https://support.stripe.com/topics/shutdown-of-the-legacy-sources-api-for-non-card-payment-methods" />
+								),
+							},
+						} ) }
+					</p>
+				</CardColumn>
+				<CardColumn>
+					<BannerIllustration
+						src={ bannerIllustration }
+						alt={ __(
+							'New Checkout',
+							'woocommerce-gateway-stripe'
+						) }
+					/>
+				</CardColumn>
+			</CardInner>
+			<ButtonsRow>
+				<MainCTALink
+					variant="secondary"
+					data-testid="disable-the-legacy-checkout"
+					onClick={ handleButtonClick }
+				>
+					{ __(
+						'Enable the new checkout',
+						'woocommerce-gateway-stripe'
+					) }
+				</MainCTALink>
+				<DismissButton
+					variant="secondary"
+					onClick={ handleBannerDismiss }
+					data-testid="dismiss"
+				>
+					{ __( 'Dismiss', 'woocommerce-gateway-stripe' ) }
+				</DismissButton>
+			</ButtonsRow>
+		</CardBody>
+	);
+
 	const NewCheckoutExperienceBanner = () => (
 		<CardBody>
 			<CardInner>
@@ -215,7 +278,11 @@ const PromotionalBannerSection = ( {
 	if ( isConnectedViaOAuth === false ) {
 		BannerContent = <ReConnectAccountBanner />;
 	} else if ( ! isUpeEnabled ) {
-		BannerContent = <NewCheckoutExperienceBanner />;
+		if ( hasAPMEnabled ) {
+			BannerContent = <NewCheckoutExperienceAPMsBanner />;
+		} else {
+			BannerContent = <NewCheckoutExperienceBanner />;
+		}
 	}
 
 	return (

readme.txt

@@ -129,6 +129,7 @@ If you get stuck, you can ask for help in the Plugin Forum.
 == Changelog ==
 
 = 8.7.0 - xxxx-xx-xx =
+* Add - Introduces a new promotional surface to encourage merchants with the legacy checkout experience and APMs enabled to use the new checkout experience.
 * Fix - Prevent duplicate failed-order emails from being sent.
 * Fix - Support custom name and description for Afterpay.
 * Fix - Link APM charge IDs in Order Details page to their Stripe dashboard payments page.