Merge remote-tracking branch 'origin/release/8.8.1' into trunk

Author: diegocurbelo

changelog.txt

@@ -1,5 +1,12 @@
 *** Changelog ***
 
+= 8.8.1 - 2024-10-28 =
+* Tweak - Disables APMs when using the legacy checkout experience due Stripe deprecation by October 29, 2024.
+* Fix - Prevent marking orders on-hold with order note "Process order to take payment" when the payment has failed.
+* Fix - Prevent subscriptions from being marked as "Pending" when a customer attempts to change their payment method to a declining card.
+* Fix - Delay updating the subscription's payment method until after the intent is confirmed when using the new checkout experience.
+* Fix - Display a success notice to customers after successfully changing their subscription payment method to a card that required 3DS authentication.
+
 = 8.8.0 - 2024-10-17 =
 * Fix - Update URL and path constants to support use of symlinked plugin.
 * Tweak - Disable ECE when cart has virtual products and tax is based on customer billing or shipping address.

client/classic/upe/payment-processing.js

@@ -405,14 +405,15 @@ export const confirmVoucherPayment = async ( api, jQueryForm ) => {
  */
 export const confirmWalletPayment = async ( api, jQueryForm ) => {
 	const isOrderPay = getStripeServerData()?.isOrderPay;
+	const isChangingPayment = getStripeServerData()?.isChangingPayment;
 
 	// The Order Pay page does a hard refresh when the hash changes, so we need to block the UI again.
 	if ( isOrderPay ) {
 		blockUI( jQueryForm );
 	}
 
 	const partials = window.location.href.match(
-		/#wc-stripe-wallet-(.+):(.+):(.+):(.+):(.+)$/
+		/#wc-stripe-wallet-(.+):(.+):(.+):(.+):(.+):(.+)$/
 	);
 
 	if ( ! partials ) {
@@ -495,7 +496,27 @@ export const confirmWalletPayment = async ( api, jQueryForm ) => {
 		// Do not redirect to the order received page if the modal is closed without payment.
 		// Otherwise redirect to the order received page.
 		if ( intentObject.status !== 'requires_action' ) {
-			window.location.href = returnURL;
+			if ( ! isChangingPayment ) {
+				window.location.href = returnURL;
+			}
+
+			// If we're changing a subscription's payment method, there's an extra step needed.
+			// We need to confirm the change payment intent via the confirm_change_payment AJAX request and then redirect to the return URL.
+			const response = await api.request(
+				api.getAjaxUrl( 'confirm_change_payment' ),
+				{
+					order_id: orderId,
+					intent_id: intentObject.id,
+					payment_method_id: intentObject.payment_method || null,
+					_ajax_nonce: partials[ 6 ],
+				}
+			);
+
+			if ( response.success ) {
+				window.location.href = response.data.return_url;
+			} else {
+				throw new Error( response.data.error.message );
+			}
 		}
 	} catch ( error ) {
 		showErrorCheckout( error.message );

client/components/payment-method-deprecation-pill/__tests__/payment-method-deprecation-pill.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import PaymentMethodDeprecationPill from '..';
+import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
+
+describe( 'PaymentMethodDeprecationPill', () => {
+	it( 'should render', () => {
+		render(
+			<UpeToggleContext.Provider>
+				<PaymentMethodDeprecationPill />
+			</UpeToggleContext.Provider>
+		);
+
+		expect( screen.queryByText( 'Deprecated' ) ).toBeInTheDocument();
+	} );
+} );

client/components/payment-method-deprecation-pill/index.js

@@ -0,0 +1,79 @@
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+import styled from '@emotion/styled';
+import { Icon, info } from '@wordpress/icons';
+import interpolateComponents from 'interpolate-components';
+import Pill from 'wcstripe/components/pill';
+import Popover from 'wcstripe/components/popover';
+
+const StyledPill = styled( Pill )`
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 4px 8px;
+	border: 1px solid #fcf9e8;
+	border-radius: 2px;
+	background-color: #fcf9e8;
+	color: #674600;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+	width: fit-content;
+`;
+
+const StyledLink = styled.a`
+	&:focus,
+	&:visited {
+		box-shadow: none;
+	}
+`;
+
+const IconWrapper = styled.span`
+	height: 16px;
+	cursor: pointer;
+`;
+
+const AlertIcon = styled( Icon )`
+	fill: #674600;
+`;
+
+const IconComponent = ( { children, ...props } ) => (
+	<IconWrapper { ...props }>
+		<AlertIcon icon={ info } size="16" />
+		{ children }
+	</IconWrapper>
+);
+
+const PaymentMethodDeprecationPill = () => {
+	return (
+		<StyledPill>
+			{ __( 'Deprecated', 'woocommerce-gateway-stripe' ) }
+			<Popover
+				BaseComponent={ IconComponent }
+				content={ interpolateComponents( {
+					mixedString:
+						/* translators: $1: a payment method name. %2: Currency(ies). */
+						__(
+							'This payment method is deprecated on the {{currencySettingsLink}}legacy checkout as of Oct 29th, 2024{{/currencySettingsLink}}.',
+							'woocommerce-gateway-stripe'
+						),
+					components: {
+						currencySettingsLink: (
+							<StyledLink
+								href="https://support.stripe.com/topics/shutdown-of-the-legacy-sources-api-for-non-card-payment-methods"
+								target="_blank"
+								rel="noreferrer"
+								onClick={ ( ev ) => {
+									// Stop propagation is necessary so it doesn't trigger the tooltip click event.
+									ev.stopPropagation();
+								} }
+							/>
+						),
+					},
+				} ) }
+			/>
+		</StyledPill>
+	);
+};
+
+export default PaymentMethodDeprecationPill;

client/settings/general-settings-section/__tests__/general-settings-section.test.js

@@ -46,6 +46,7 @@ describe( 'GeneralSettingsSection', () => {
 
 	beforeEach( () => {
 		global.wcSettings = { currency: { code: 'EUR' } };
+		global.wc_stripe_settings_params = { are_apms_deprecated: false };
 		useGetCapabilities.mockReturnValue( {
 			card_payments: 'active',
 			alipay_payments: 'active',

client/settings/general-settings-section/payment-method-checkbox.js

@@ -27,7 +27,12 @@ const IconWrapper = styled.span`
 	flex-shrink: 0;
 `;
 
-const PaymentMethodCheckbox = ( { id, label, isAllowingManualCapture } ) => {
+const PaymentMethodCheckbox = ( {
+	id,
+	label,
+	isAllowingManualCapture,
+	disabled,
+} ) => {
 	const [ isManualCaptureEnabled ] = useManualCapture();
 	const [ isConfirmationModalOpen, setIsConfirmationModalOpen ] = useState(
 		false
@@ -40,6 +45,9 @@ const PaymentMethodCheckbox = ( { id, label, isAllowingManualCapture } ) => {
 	const { isUpeEnabled } = useContext( UpeToggleContext );
 
 	const handleCheckboxChange = ( hasBeenChecked ) => {
+		if ( disabled ) {
+			return;
+		}
 		if ( ! hasBeenChecked ) {
 			setIsConfirmationModalOpen( true );
 			return;
@@ -98,7 +106,10 @@ const PaymentMethodCheckbox = ( { id, label, isAllowingManualCapture } ) => {
 				<StyledCheckbox
 					label={ <VisuallyHidden>{ label }</VisuallyHidden> }
 					onChange={ handleCheckboxChange }
-					checked={ enabledPaymentMethods.includes( id ) }
+					checked={
+						disabled ? false : enabledPaymentMethods.includes( id )
+					}
+					disabled={ disabled }
 				/>
 			) }
 			{ isConfirmationModalOpen && (

client/settings/general-settings-section/payment-method-description.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import PaymentMethodMissingCurrencyPill from '../../components/payment-method-missing-currency-pill';
 import PaymentMethodCapabilityStatusPill from 'wcstripe/components/payment-method-capability-status-pill';
+import PaymentMethodDeprecationPill from 'wcstripe/components/payment-method-deprecation-pill';
 
 const Wrapper = styled.div`
 	display: flex;
@@ -43,6 +44,7 @@ const PaymentMethodDescription = ( {
 	label,
 	description,
 	id,
+	deprecated,
 	...restProps
 } ) => {
 	return (
@@ -53,14 +55,19 @@ const PaymentMethodDescription = ( {
 			<div>
 				<LabelWrapper>
 					<Label>{ label }</Label>
-					<PaymentMethodMissingCurrencyPill
-						id={ id }
-						label={ label }
-					/>
-					<PaymentMethodCapabilityStatusPill
-						id={ id }
-						label={ label }
-					/>
+					{ deprecated && <PaymentMethodDeprecationPill /> }
+					{ ! deprecated && (
+						<>
+							<PaymentMethodMissingCurrencyPill
+								id={ id }
+								label={ label }
+							/>
+							<PaymentMethodCapabilityStatusPill
+								id={ id }
+								label={ label }
+							/>
+						</>
+					) }
 				</LabelWrapper>
 				<Description>{ description }</Description>
 			</div>

client/settings/general-settings-section/payment-methods-list.js

@@ -1,3 +1,4 @@
+/* global wc_stripe_settings_params */
 import { __, sprintf } from '@wordpress/i18n';
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
@@ -235,6 +236,15 @@ const GeneralSettingsSection = ( {
 					return null;
 				}
 
+				// Remove APMs (legacy checkout) due deprecation by Stripe on Oct 31st, 2024.
+				if (
+					// eslint-disable-next-line camelcase
+					wc_stripe_settings_params.are_apms_deprecated &&
+					method !== 'card'
+				) {
+					return null;
+				}
+
 				const {
 					Icon,
 					label,
@@ -288,6 +298,12 @@ const GeneralSettingsSection = ( {
 					allows_manual_capture: isAllowingManualCapture,
 				} = PaymentMethodsMap[ method ];
 
+				// Remove APMs (legacy checkout) due deprecation by Stripe on Oct 31st, 2024.
+				const deprecated =
+					// eslint-disable-next-line camelcase
+					wc_stripe_settings_params.are_apms_deprecated &&
+					method !== 'card';
+
 				return (
 					<div key={ method }>
 						<ListElement
@@ -305,6 +321,7 @@ const GeneralSettingsSection = ( {
 								isAllowingManualCapture={
 									isAllowingManualCapture
 								}
+								disabled={ deprecated }
 							/>
 							<PaymentMethodWrapper>
 								<PaymentMethodDescription
@@ -315,6 +332,7 @@ const GeneralSettingsSection = ( {
 										data.account?.default_currency
 									) }
 									label={ label }
+									deprecated={ deprecated }
 								/>
 								<StyledFees id={ method } />
 							</PaymentMethodWrapper>
@@ -327,6 +345,7 @@ const GeneralSettingsSection = ( {
 											[ method ]: true,
 										} )
 									}
+									disabled={ deprecated }
 								>
 									{ __(
 										'Customize',

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

@@ -32,6 +32,10 @@ useDispatch.mockImplementation( ( storeName ) => {
 const setShowPromotionalBanner = jest.fn();
 
 describe( 'PromotionalBanner', () => {
+	beforeEach( () => {
+		global.wc_stripe_settings_params = { are_apms_deprecated: false };
+	} );
+
 	it( 'dismiss function should be called', () => {
 		render(
 			<PromotionalBannerSection

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

@@ -1,3 +1,4 @@
+/* global wc_stripe_settings_params */
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { React } from 'react';
@@ -163,6 +164,20 @@ const PromotionalBannerSection = ( {
 		</CardBody>
 	);
 
+	let newCheckoutExperienceAPMsBannerDescription = '';
+	// eslint-disable-next-line camelcase
+	if ( wc_stripe_settings_params.are_apms_deprecated ) {
+		newCheckoutExperienceAPMsBannerDescription = __(
+			'Stripe ended 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'
+		);
+	} else {
+		newCheckoutExperienceAPMsBannerDescription = __(
+			'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'
+		);
+	}
+
 	const NewCheckoutExperienceAPMsBanner = () => (
 		<CardBody data-testid="new-checkout-apms-banner">
 			<CardInner>
@@ -178,10 +193,7 @@ const PromotionalBannerSection = ( {
 					</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'
-							),
+							mixedString: newCheckoutExperienceAPMsBannerDescription,
 							components: {
 								StripeLegacyLink: (
 									<ExternalLink href="https://support.stripe.com/topics/shutdown-of-the-legacy-sources-api-for-non-card-payment-methods" />