diff --git a/changelog.txt b/changelog.txt index 2b3ea4698..531ef26cd 100644 --- a/changelog.txt +++ b/changelog.txt @@ -8,6 +8,7 @@ * Fix - Fix multiple issues related to the reuse of Cash App Pay tokens (as a saved payment method) when subscribing. = 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. diff --git a/client/settings/payment-settings/__tests__/promotional-banner-section.test.js b/client/settings/payment-settings/__tests__/promotional-banner-section.test.js index 841d36731..cd15ff6d3 100644 --- a/client/settings/payment-settings/__tests__/promotional-banner-section.test.js +++ b/client/settings/payment-settings/__tests__/promotional-banner-section.test.js @@ -3,6 +3,7 @@ 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' ); @@ -10,6 +11,11 @@ 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( + + ); + + expect( + screen.queryByTestId( 'new-checkout-apms-banner' ) + ).toBeInTheDocument(); + } ); } ); diff --git a/client/settings/payment-settings/promotional-banner-section.js b/client/settings/payment-settings/promotional-banner-section.js index e01c6fdef..1a793c0c6 100644 --- a/client/settings/payment-settings/promotional-banner-section.js +++ b/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 = ( { ); + const NewCheckoutExperienceAPMsBanner = () => ( + + + + + { __( 'New', 'woocommerce-gateway-stripe' ) } + +

+ { __( + 'Enable the new Stripe checkout to continue accepting non-card payments', + 'woocommerce-gateway-stripe' + ) } +

+

+ { 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: ( + + ), + }, + } ) } +

+
+ + + +
+ + + { __( + 'Enable the new checkout', + 'woocommerce-gateway-stripe' + ) } + + + { __( 'Dismiss', 'woocommerce-gateway-stripe' ) } + + +
+ ); + const NewCheckoutExperienceBanner = () => ( @@ -215,7 +278,11 @@ const PromotionalBannerSection = ( { if ( isConnectedViaOAuth === false ) { BannerContent = ; } else if ( ! isUpeEnabled ) { - BannerContent = ; + if ( hasAPMEnabled ) { + BannerContent = ; + } else { + BannerContent = ; + } } return ( diff --git a/readme.txt b/readme.txt index 5850861e2..ec42af24d 100644 --- a/readme.txt +++ b/readme.txt @@ -136,6 +136,7 @@ If you get stuck, you can ask for help in the Plugin Forum. * Fix - Fix multiple issues related to the reuse of Cash App Pay tokens (as a saved payment method) when subscribing. = 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.