Merge branch 'develop' into release/8.6.0

Author: diegocurbelo

changelog.txt

@@ -1,6 +1,8 @@
 *** Changelog ***
 
 = 8.6.0 - xxxx-xx-xx =
+* Tweak - Improves the wording of the invalid Stripe keys errors, instructing merchants to click the "Configure connection" button instead of manually setting the keys.
+* Add - Includes a new promotional surface to encourage merchants to re-connect their Stripe account using the new flow.
 * Add - Added filter to enable updating Level 3 data based on order data.
 * Add - Replace account key sharing and replace it with an OAuth connect flow allowing users to connect their Stripe account automatically without the need to find keys.
 * Add - Indicate the activation status of each payment method individually, instead of using a general notice.
@@ -11,13 +13,21 @@
 * Fix - Display the payment decline reason on the checkout when using Cash App or WeChat.
 * Fix - Re-enable the "Place order" button on the block checkout after closing the WeChat or Cash App payment modal.
 * Fix - When SEPA tokens are added via the My Account > Payment methods page, ensure they are attached to the Stripe customer.
+* Fix - Clear the saved Stripe Link payment methods when a customer cache is cleared to ensure cached methods are updated promptly.
+* Fix - Display Stripe Link payment methods correctly in both Block Checkout and My Account pages.
+* Fix - Resolve an error when adding a saved card payment method in My Account when Stripe Link is enabled.
 * Fix - Resolved an error when using 3D Secure-enabled cards with Stripe Link enabled.
 * Fix - Corrected setup intent payment method types to include 'link' when Stripe Link is enabled, resolving errors during subscription signups.
 * Fix - Resolved an issue where changing the payment method for subscriptions failed after 3D-Secure authentication.
 * Fix - Prevent displaying the default admin description on the checkout page when a payment method description is empty.
+* Fix - Adds back the ability to perform direct refunds for giropay orders via the order details page.
+* Fix - After configuring webhooks automatically ensure only the latest webhook endpoint is active, deleting duplicates configured manually.
+* Fix - Resolved PHP errors related to detaching payment methods after failed 3D-Secure challenges.
 * Tweak - Minor text updates to webhook-related configuration labels and buttons.
 * Tweak - Improve UX by using the 3DS verification modal to confirm setup intents for subscription sign-ups, ensuring customers stay on the checkout page.
 * Tweak - Display a notice when the Stripe connect URL is not available.
+* Fix - Prevent adding multiple copies of the same order notes.
+* Tweak - Automatically configure webhooks after completing the OAuth Stripe flow.
 * Tweak - Don't process webhooks when the webhook secret isn't set in the store.
 
 = 8.5.2 - 2024-07-22 =

client/api/index.js

@@ -225,7 +225,10 @@ export default class WCStripeAPI {
 
 			// Card Payments.
 			return this.getStripe()
-				.confirmCardSetup( response.data.client_secret )
+				.confirmSetup( {
+					clientSecret: response.data.client_secret,
+					redirect: 'if_required',
+				} )
 				.then( ( confirmedSetupIntent ) => {
 					const { setupIntent, error } = confirmedSetupIntent;
 					if ( error ) {

client/data/account-keys/actions.js

@@ -68,7 +68,7 @@ export function* saveAccountKeys( accountKeys ) {
 		yield dispatch( 'core/notices' ).createSuccessNotice(
 			isDisconnecting
 				? __( 'Account disconnected.', 'woocommerce-gateway-stripe' )
-				: __( 'Account keys saved.', 'woocommerce-gateway-stripe' )
+				: __( 'Account connected.', 'woocommerce-gateway-stripe' )
 		);
 	} catch ( e ) {
 		error = e;
@@ -79,7 +79,7 @@ export function* saveAccountKeys( accountKeys ) {
 						'woocommerce-gateway-stripe'
 				  )
 				: __(
-						'Error saving account keys.',
+						'Error connecting account.',
 						'woocommerce-gateway-stripe'
 				  )
 		);

client/settings/account-details/index.js

@@ -3,7 +3,6 @@ import { createInterpolateElement } from '@wordpress/element';
 import React from 'react';
 import { ExternalLink, Icon } from '@wordpress/components';
 import { help } from '@wordpress/icons';
-import interpolateComponents from 'interpolate-components';
 import styled from '@emotion/styled';
 import SectionStatus from '../section-status';
 import Tooltip from 'wcstripe/components/tooltip';
@@ -144,29 +143,20 @@ const AccountDetails = () => {
 		return (
 			<AccountDetailsContainer>
 				<AccountDetailsError>
-					{ isTestModeEnabled
-						? interpolateComponents( {
-								mixedString: __(
-									"Seems like the test keys we've saved for you are no longer valid. If you recently updated them, enter the new test keys from your {{accountLink}}Stripe Account{{/accountLink}}.",
+					{ createInterpolateElement(
+						isTestModeEnabled
+							? __(
+									"Seems like the test API keys we've saved for you are no longer valid. If you recently updated them, use the <strong>Configure Connection</strong> button below to reconnect.",
 									'woocommerce-gateway-stripe'
-								),
-								components: {
-									accountLink: (
-										<ExternalLink href="https://dashboard.stripe.com/test/apikeys" />
-									),
-								},
-						  } )
-						: interpolateComponents( {
-								mixedString: __(
-									"Seems like the live keys we've saved for you are no longer valid. If you recently updated them, enter the new live keys from your {{accountLink}}Stripe Account{{/accountLink}}.",
+							  )
+							: __(
+									"Seems like the live API keys we've saved for you are no longer valid. If you recently updated them, use the <strong>Configure Connection</strong> button below to reconnect.",
 									'woocommerce-gateway-stripe'
-								),
-								components: {
-									accountLink: (
-										<ExternalLink href="https://dashboard.stripe.com/apikeys" />
-									),
-								},
-						  } ) }
+							  ),
+						{
+							strong: <strong />,
+						}
+					) }
 				</AccountDetailsError>
 			</AccountDetailsContainer>
 		);

client/settings/payment-methods/index.js

@@ -1,12 +1,16 @@
+/* global wc_stripe_settings_params */
 import { __ } from '@wordpress/i18n';
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import { ExternalLink } from '@wordpress/components';
 import SettingsSection from '../settings-section';
 import PaymentRequestSection from '../payment-request-section';
 import GeneralSettingsSection from '../general-settings-section';
 import LoadableSettingsSection from '../loadable-settings-section';
 import CustomizationOptionsNotice from '../customization-options-notice';
 import DisplayOrderCustomizationNotice from '../display-order-customization-notice';
+import PromotionalBannerSection from 'wcstripe/settings/payment-settings/promotional-banner-section';
+import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
+import { useAccount } from 'wcstripe/data/account';
 
 const PaymentMethodsDescription = () => {
 	return (
@@ -46,8 +50,32 @@ const PaymentRequestDescription = () => (
 );
 
 const PaymentMethodsPanel = ( { onSaveChanges } ) => {
+	const [ showPromotionalBanner, setShowPromotionalBanner ] = useState(
+		true
+	);
+	const { isUpeEnabled, setIsUpeEnabled } = useContext( UpeToggleContext );
+	const { data } = useAccount();
+	const isTestModeEnabled = Boolean( data.testmode );
+	const oauthConnected = isTestModeEnabled
+		? data?.oauth_connections?.test
+		: data?.oauth_connections?.live;
+
 	return (
 		<>
+			{ showPromotionalBanner && (
+				<SettingsSection>
+					<PromotionalBannerSection
+						setShowPromotionalBanner={ setShowPromotionalBanner }
+						isUpeEnabled={ isUpeEnabled }
+						setIsUpeEnabled={ setIsUpeEnabled }
+						isConnectedViaOAuth={ oauthConnected }
+						oauthUrl={ wc_stripe_settings_params.stripe_oauth_url }
+						testOauthUrl={
+							wc_stripe_settings_params.stripe_test_oauth_url
+						}
+					/>
+				</SettingsSection>
+			) }
 			<SettingsSection Description={ PaymentMethodsDescription }>
 				<DisplayOrderCustomizationNotice />
 				<GeneralSettingsSection onSaveChanges={ onSaveChanges } />

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

@@ -6,6 +6,10 @@ import PromotionalBannerSection from '../promotional-banner-section';
 
 jest.mock( '@wordpress/data' );
 
+jest.mock( 'wcstripe/data/account', () => ( {
+	useAccount: jest.fn(),
+} ) );
+
 const noticesDispatch = {
 	createErrorNotice: jest.fn(),
 	createSuccessNotice: jest.fn(),
@@ -26,6 +30,7 @@ describe( 'PromotionalBanner', () => {
 		render(
 			<PromotionalBannerSection
 				setShowPromotionalBanner={ setShowPromotionalBanner }
+				isConnectedViaOAuth={ true }
 			/>
 		);
 
@@ -44,10 +49,23 @@ describe( 'PromotionalBanner', () => {
 				setShowPromotionalBanner={ setShowPromotionalBanner }
 				isUpeEnabled={ false }
 				setIsUpeEnabled={ setIsUpeEnabledMock }
+				isConnectedViaOAuth={ true }
 			/>
 		);
 
 		userEvent.click( screen.getByText( 'Enable the new checkout' ) );
 		expect( setIsUpeEnabledMock ).toHaveBeenCalled();
 	} );
+
+	it( 'Display the re-connect promotional surface when OAuth connection is not set', () => {
+		render(
+			<PromotionalBannerSection
+				setShowPromotionalBanner={ setShowPromotionalBanner }
+				isConnectedViaOAuth={ false }
+			/>
+		);
+		expect(
+			screen.queryByTestId( 're-connect-account-banner' )
+		).toBeInTheDocument();
+	} );
 } );

client/settings/payment-settings/account-details-section.js

@@ -112,6 +112,7 @@ const AccountDetailsSection = ( { setModalType, setKeepModalContent } ) => {
 			<CardFooter>
 				<Button
 					variant="secondary"
+					id="btn-configure-connection"
 					onClick={ () =>
 						setModalType( isTestMode ? 'test' : 'live' )
 					}

client/settings/payment-settings/account-keys-connection-status.js

@@ -58,7 +58,7 @@ export const AccountKeysConnectionStatus = ( { formRef } ) => {
 			) {
 				dispatch( 'core/notices' ).createErrorNotice(
 					__(
-						'Only live account keys should be entered.',
+						'Only a live account should be connected.',
 						'woocommerce-gateway-stripe'
 					)
 				);
@@ -79,7 +79,7 @@ export const AccountKeysConnectionStatus = ( { formRef } ) => {
 			) {
 				dispatch( 'core/notices' ).createErrorNotice(
 					__(
-						'Only test account keys should be entered.',
+						'Only a test account should be connected.',
 						'woocommerce-gateway-stripe'
 					)
 				);

client/settings/payment-settings/banner-illustration-re-connect.svg

@@ -1,3 +1,4 @@
+/* global wc_stripe_settings_params */
 import { __ } from '@wordpress/i18n';
 import { React, useContext, useState } from 'react';
 import { ExternalLink } from '@wordpress/components';
@@ -13,6 +14,7 @@ import './style.scss';
 import LoadableAccountSection from 'wcstripe/settings/loadable-account-section';
 import PromotionalBannerSection from 'wcstripe/settings/payment-settings/promotional-banner-section';
 import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
+import { useAccount } from 'wcstripe/data/account';
 
 const GeneralSettingsDescription = () => (
 	<>
@@ -75,6 +77,11 @@ const PaymentSettingsPanel = () => {
 		true
 	);
 	const { isUpeEnabled, setIsUpeEnabled } = useContext( UpeToggleContext );
+	const { data } = useAccount();
+	const isTestModeEnabled = Boolean( data.testmode );
+	const oauthConnected = isTestModeEnabled
+		? data?.oauth_connections?.test
+		: data?.oauth_connections?.live;
 
 	const handleModalDismiss = () => {
 		setModalType( '' );
@@ -102,6 +109,13 @@ const PaymentSettingsPanel = () => {
 								}
 								isUpeEnabled={ isUpeEnabled }
 								setIsUpeEnabled={ setIsUpeEnabled }
+								isConnectedViaOAuth={ oauthConnected }
+								oauthUrl={
+									wc_stripe_settings_params.stripe_oauth_url
+								}
+								testOauthUrl={
+									wc_stripe_settings_params.stripe_test_oauth_url
+								}
 							/>
 						</LoadableAccountSection>
 					</LoadableSettingsSection>