Merge branch 'develop' into add/8203-payout-failure-notice

Automattic · Feb 28, 2025 · 39110ab · 39110ab
2 parents c942d2b + 4af3a1f
commit 39110ab
Show file tree

Hide file tree

Showing 40 changed files with 739 additions and 416 deletions.
diff --git a/changelog/chore-port-express-checkout-changes-to-tokenized-ece b/changelog/chore-port-express-checkout-changes-to-tokenized-ece
@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: chore: port express checkout changes to tokenized ECE
+
+
diff --git a/changelog/feat-google-pay-test-mode-live-account-compatibility-notice b/changelog/feat-google-pay-test-mode-live-account-compatibility-notice
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+feat: add compatibility notice for Google Pay with live mode accounts.
diff --git a/changelog/fix-pmme-on-cart-block b/changelog/fix-pmme-on-cart-block
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Init PMME container in cart block so that it can be dynamically rendered once the requirements are met.
diff --git a/changelog/fix-style-extraction-in-editor b/changelog/fix-style-extraction-in-editor
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Properly extract styles when using the site editor.
diff --git a/changelog/fix-wc9.7-ece-script-dependencies b/changelog/fix-wc9.7-ece-script-dependencies
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix: GooglePay/ApplePay script dependencies with WooCommerce 9.7
diff --git a/...tor/test/add-payment-methods-task.test.js → ..._tests__/add-payment-methods-task.test.js b/...tor/test/add-payment-methods-task.test.js → ..._tests__/add-payment-methods-task.test.js
diff --git a/.../currency-information-for-methods.test.js → .../currency-information-for-methods.test.js b/.../currency-information-for-methods.test.js → .../currency-information-for-methods.test.js
diff --git a/...selector/test/setup-complete-task.test.js → ...tor/__tests__/setup-complete-task.test.js b/...selector/test/setup-complete-task.test.js → ...tor/__tests__/setup-complete-task.test.js
@@ -10,6 +10,7 @@ import WizardTaskContext from '../../wizard/task/context';
 import SetupComplete from '../setup-complete-task';
 import WizardContext from '../../wizard/wrapper/context';
 import { useEnabledPaymentMethodIds } from '../../../data';
+import WCPaySettingsContext from 'wcpay/settings/wcpay-settings-context';
 
 jest.mock( '@wordpress/data', () => ( {
 	useDispatch: jest.fn().mockReturnValue( { updateOptions: jest.fn() } ),
@@ -18,16 +19,24 @@ jest.mock( '../../../data', () => ( {
 	useEnabledPaymentMethodIds: jest.fn(),
 } ) );
 
+const renderWithSettingsProvider = ( ui ) =>
+	render(
+		<WCPaySettingsContext.Provider value={ global.wcpaySettings }>
+			{ ui }
+		</WCPaySettingsContext.Provider>
+	);
+
 describe( 'SetupComplete', () => {
 	beforeEach( () => {
 		useEnabledPaymentMethodIds.mockReturnValue( [
 			[ 'card', 'bancontact', 'eps', 'ideal', 'p24', 'sepa_debit' ],
 			() => null,
 		] );
+		global.wcpaySettings = { featureFlags: { multiCurrency: true } };
 	} );
 
 	it( 'renders setup complete messaging when context value is undefined', () => {
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider value={ { completedTasks: {} } }>
 				<WizardTaskContext.Provider value={ { isActive: true } }>
 					<SetupComplete />
@@ -41,9 +50,11 @@ describe( 'SetupComplete', () => {
 	} );
 
 	it( 'renders setup complete messaging when context value is `true`', () => {
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
-				value={ { completedTasks: { 'add-payment-methods': true } } }
+				value={ {
+					completedTasks: { 'add-payment-methods': true },
+				} }
 			>
 				<WizardTaskContext.Provider value={ { isActive: true } }>
 					<SetupComplete />
@@ -57,7 +68,7 @@ describe( 'SetupComplete', () => {
 	} );
 
 	it( 'renders setup complete messaging when context value says that methods have not changed', () => {
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
 				value={ {
 					completedTasks: {
@@ -90,7 +101,7 @@ describe( 'SetupComplete', () => {
 			[ 'card', 'ideal' ],
 			() => null,
 		] );
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
 				value={ {
 					completedTasks: {
@@ -123,7 +134,7 @@ describe( 'SetupComplete', () => {
 			[ 'card', 'ideal' ],
 			() => null,
 		] );
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
 				value={ {
 					completedTasks: {
@@ -156,7 +167,7 @@ describe( 'SetupComplete', () => {
 			[ 'card', ...additionalMethods ],
 			() => null,
 		] );
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
 				value={ {
 					completedTasks: {

diff --git a/client/cart/blocks/index.js b/client/cart/blocks/index.js
@@ -2,26 +2,10 @@
  * Internal dependencies
  */
 import { renderBNPLCartMessaging } from './product-details';
-import { getUPEConfig } from 'wcpay/utils/checkout';
 
 const { registerPlugin } = window.wp.plugins;
 
-const paymentMethods = getUPEConfig( 'paymentMethodsConfig' ) || {};
-
-const BNPL_PAYMENT_METHODS = {
-	AFFIRM: 'affirm',
-	AFTERPAY: 'afterpay_clearpay',
-	KLARNA: 'klarna',
-};
-
-const bnplPaymentMethods = Object.values( BNPL_PAYMENT_METHODS ).filter(
-	( method ) => method in paymentMethods
-);
-
-if ( bnplPaymentMethods.length ) {
-	// Register BNPL site messaging on the cart block.
-	registerPlugin( 'bnpl-site-messaging', {
-		render: renderBNPLCartMessaging,
-		scope: 'woocommerce-checkout',
-	} );
-}
+registerPlugin( 'bnpl-site-messaging', {
+	render: renderBNPLCartMessaging,
+	scope: 'woocommerce-checkout',
+} );
diff --git a/client/checkout/blocks/payment-elements.js b/client/checkout/blocks/payment-elements.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useEffect, useState, RawHTML } from '@wordpress/element';
+import { useEffect, useState, RawHTML, useRef } from '@wordpress/element';
 import { Elements } from '@stripe/react-stripe-js';
 // eslint-disable-next-line import/no-unresolved
 import { StoreNotice } from '@woocommerce/blocks-checkout';
@@ -20,6 +20,7 @@ import { getPaymentMethodTypes } from 'wcpay/checkout/utils/upe';
 
 const PaymentElements = ( { api, ...props } ) => {
 	const stripeForUPE = useStripeForUPE( api, props.paymentMethodId );
+	const containerRef = useRef( null );
 
 	const [ errorMessage, setErrorMessage ] = useState( null );
 	const [
@@ -29,16 +30,27 @@ const PaymentElements = ( { api, ...props } ) => {
 	const [ appearance, setAppearance ] = useState(
 		getUPEConfig( 'wcBlocksUPEAppearance' )
 	);
-	const [ fontRules ] = useState( getFontRulesFromPage() );
+	const [ fontRules, setFontRules ] = useState( [] );
+
 	const [ fingerprint, fingerprintErrorMessage ] = useFingerprint();
 	const amount = Number( getUPEConfig( 'cartTotal' ) );
 	const currency = getUPEConfig( 'currency' ).toLowerCase();
 	const paymentMethodTypes = getPaymentMethodTypes( props.paymentMethodId );
 
 	useEffect( () => {
 		async function generateUPEAppearance() {
+			if ( ! containerRef.current ) {
+				return;
+			}
+			setFontRules(
+				getFontRulesFromPage( containerRef.current.ownerDocument )
+			);
 			// Generate UPE input styles.
-			let upeAppearance = getAppearance( 'blocks_checkout', false );
+			let upeAppearance = getAppearance(
+				'blocks_checkout',
+				false,
+				containerRef.current.ownerDocument
+			);
 			upeAppearance = await api.saveUPEAppearance(
 				upeAppearance,
 				'blocks_checkout'
@@ -61,46 +73,48 @@ const PaymentElements = ( { api, ...props } ) => {
 		props.paymentMethodId,
 	] );
 
-	if ( ! stripeForUPE ) {
-		return <LoadableBlock isLoading numLines={ 3 }></LoadableBlock>;
-	}
-
 	return (
-		<LoadableBlock isLoading={ ! appearance } numLines={ 3 }>
-			<Elements
-				stripe={ stripeForUPE }
-				options={ {
-					mode: amount < 1 ? 'setup' : 'payment',
-					amount: amount,
-					currency: currency,
-					paymentMethodCreation: 'manual',
-					paymentMethodTypes: paymentMethodTypes,
-					appearance: appearance,
-					fonts: fontRules,
-				} }
+		<>
+			<LoadableBlock
+				isLoading={ ! appearance || ! stripeForUPE }
+				numLines={ 3 }
 			>
-				{ paymentProcessorLoadErrorMessage?.error?.message && (
-					<div className="wc-block-components-notices">
-						<StoreNotice status="error" isDismissible={ false }>
-							<RawHTML>
-								{
-									paymentProcessorLoadErrorMessage.error
-										.message
-								}
-							</RawHTML>
-						</StoreNotice>
-					</div>
-				) }
-				<PaymentProcessor
-					api={ api }
-					errorMessage={ errorMessage }
-					fingerprint={ fingerprint }
-					onLoadError={ setPaymentProcessorLoadErrorMessage }
-					theme={ appearance?.theme }
-					{ ...props }
-				/>
-			</Elements>
-		</LoadableBlock>
+				<Elements
+					stripe={ stripeForUPE }
+					options={ {
+						mode: amount < 1 ? 'setup' : 'payment',
+						amount: amount,
+						currency: currency,
+						paymentMethodCreation: 'manual',
+						paymentMethodTypes: paymentMethodTypes,
+						appearance: appearance,
+						fonts: fontRules,
+					} }
+				>
+					{ paymentProcessorLoadErrorMessage?.error?.message && (
+						<div className="wc-block-components-notices">
+							<StoreNotice status="error" isDismissible={ false }>
+								<RawHTML>
+									{
+										paymentProcessorLoadErrorMessage.error
+											.message
+									}
+								</RawHTML>
+							</StoreNotice>
+						</div>
+					) }
+					<PaymentProcessor
+						api={ api }
+						errorMessage={ errorMessage }
+						fingerprint={ fingerprint }
+						onLoadError={ setPaymentProcessorLoadErrorMessage }
+						theme={ appearance?.theme }
+						{ ...props }
+					/>
+				</Elements>
+			</LoadableBlock>
+			<div ref={ containerRef } />
+		</>
 	);
 };
 

diff --git a/client/checkout/blocks/payment-method-label.js b/client/checkout/blocks/payment-method-label.js
@@ -15,7 +15,7 @@ import { useStripeForUPE } from 'wcpay/hooks/use-stripe-async';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 import { __ } from '@wordpress/i18n';
 import './style.scss';
-import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { getAppearance, getFontRulesFromPage } from 'wcpay/checkout/upe-styles';
 
 const paymentMethods = [
@@ -78,6 +78,7 @@ const PaymentMethodMessageWrapper = ( {
 };
 
 export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
+	const containerRef = useRef( null );
 	const cartData = wp.data.select( 'wc/store/cart' ).getCartData();
 	const isTestMode = getUPEConfig( 'testMode' );
 	const [ appearance, setAppearance ] = useState(
@@ -88,7 +89,7 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 		getUPEConfig( 'wcBlocksUPEAppearanceTheme' )
 	);
 
-	const fontRules = useMemo( () => getFontRulesFromPage(), [] );
+	const [ fontRules, setFontRules ] = useState( [] );
 
 	// Stripe expects the amount to be sent as the minor unit of 2 digits.
 	const amount = parseInt(
@@ -107,8 +108,18 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 
 	useEffect( () => {
 		async function generateUPEAppearance() {
+			if ( ! containerRef.current ) {
+				return;
+			}
+			setFontRules(
+				getFontRulesFromPage( containerRef.current.ownerDocument )
+			);
 			// Generate UPE input styles.
-			let upeAppearance = getAppearance( 'blocks_checkout', false );
+			let upeAppearance = getAppearance(
+				'blocks_checkout',
+				false,
+				containerRef.current.ownerDocument
+			);
 			upeAppearance = await api.saveUPEAppearance(
 				upeAppearance,
 				'blocks_checkout'
@@ -130,7 +141,7 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 
 	return (
 		<>
-			<div className="payment-method-label">
+			<div ref={ containerRef } className="payment-method-label">
 				<span className="payment-method-label__label">{ title }</span>
 				{ isTestMode && (
 					<span className="test-mode badge">