Merge branch 'develop' into fix/woopay-theme-support-from-classic-che…

…ckout

changelog.txt

@@ -20,7 +20,6 @@
 * Fix - Fix uncaught error on the block based Cart page when WooPayments is disabled.
 * Fix - Fix WooPay checkboxes while signed in.
 * Fix - If a payment method fails to be created in the frontend during checkout, forward the errors to the server so it can be recorded in an order.
-* Fix - Migrate to Docker Compose V2 for test runner environment setup scripts
 * Fix - Reverts changes related to Direct Checkout that broke the PayPal extension.
 * Fix - Translate hardcoded strings on the Connect page
 * Update - refactor: separate BNPL methods from settings list
@@ -32,6 +31,7 @@
 * Dev - Match the Node version in nvm with the minimum version in package.json.
 * Dev - Remove unnecessary console.warn statements added in #9121.
 * Dev - Update bundle size checker workflow to support node v20
+* Dev - Migrate to Docker Compose V2 for test runner environment setup scripts
 
 = 8.0.2 - 2024-08-07 =
 * Fix - Add opt-in checks to prevent blocking customers using other payment methods.

changelog/as-fix-max-height-allowed

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Ensure 55px is the maximum height for Apple Pay button.

changelog/chore-disable-custom-checkout-field-detection

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Disables custom checkout field detection due to compatibility issues and false positives.

changelog/dev-correct-docker-compose-v2-changelog-entry

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Placeholder changelog entry - making a correction to previous changelog entry 'Fix - Migrate to Docker Compose V2 for test runner environment setup scripts'
+
+

changelog/dev-fix-e2e-scripts

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Fix some aspects of the e2e tests scripts.
+
+

changelog/fix-catch-clipboard-navigator-undefined-error-in-http

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Disables testing instructions clipboard button on HTTP sites when navigator.clipboard is undefined.

changelog/fix-ece-shortcode-get-shipping-rates

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix shipping rates retrieval method for shortcode cart/checkout.

changelog/fix-remove-apple-pay-admin-notice-for-live-account

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Remove obsolete ApplePay warning on wp-admin for test sites.

changelog/fix-send-blog-timezone-to-woopay

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Send blog timezone to WooPay.
+
+

changelog/fix-testing-instructions-dark-theme-support

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix: testing instructions dark theme support

changelog/fix-woopay-themeing-on-email-flow

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Pass appearance data when initiating WooPay via the email input flow

changelog/update-jetpack-packages

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Update Jetpack packages to the latest versions

client/checkout/blocks/payment-elements.js

@@ -90,6 +90,7 @@ const PaymentElements = ( { api, ...props } ) => {
 					errorMessage={ errorMessage }
 					fingerprint={ fingerprint }
 					onLoadError={ setPaymentProcessorLoadErrorMessage }
+					theme={ appearance?.theme }
 					{ ...props }
 				/>
 			</Elements>

client/checkout/blocks/payment-processor.js

@@ -12,6 +12,7 @@ import {
 } from '@woocommerce/blocks-registry';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from 'react';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -64,6 +65,7 @@ const PaymentProcessor = ( {
 	shouldSavePayment,
 	fingerprint,
 	onLoadError = noop,
+	theme,
 } ) => {
 	const stripe = useStripe();
 	const elements = useElements();
@@ -267,7 +269,9 @@ const PaymentProcessor = ( {
 		<>
 			{ isTestMode && (
 				<p
-					className="content"
+					className={ classNames( 'content', {
+						[ `theme--${ theme }` ]: theme,
+					} ) }
 					dangerouslySetInnerHTML={ {
 						__html: testingInstructions,
 					} }

client/checkout/classic/payment-processing.js

@@ -214,13 +214,20 @@ async function createStripePaymentElement(
 ) {
 	const amount = Number( getUPEConfig( 'cartTotal' ) );
 	const paymentMethodTypes = getPaymentMethodTypes( paymentMethodType );
+	const appearance = await initializeAppearance( api, elementsLocation );
+	document
+		.querySelector(
+			`.wcpay-upe-element[data-payment-method-type="${ paymentMethodType }"]`
+		)
+		?.closest( '.wc_payment_method' )
+		?.classList.add( `theme--${ appearance.theme || 'stripe' }` );
 	const options = {
 		mode: amount < 1 ? 'setup' : 'payment',
 		currency: getUPEConfig( 'currency' ).toLowerCase(),
 		amount: amount,
 		paymentMethodCreation: 'manual',
 		paymentMethodTypes: paymentMethodTypes,
-		appearance: await initializeAppearance( api, elementsLocation ),
+		appearance,
 		fonts: getFontRulesFromPage(),
 	};
 

client/checkout/style.scss

@@ -7,7 +7,8 @@
 	vertical-align: middle;
 	border-radius: 0;
 	border: none !important;
-	background-color: transparent;
+	// some themes might override the color on all `button`s - whose selector has higher specificity and our class selector.
+	background-color: transparent !important;
 	padding: 3px;
 
 	i {
@@ -26,4 +27,10 @@
 	&:active i {
 		transform: scale( 0.9 );
 	}
+
+	.theme--night & {
+		i {
+			filter: invert( 100% ) hue-rotate( 180deg );
+		}
+	}
 }

client/checkout/utils/copy-test-number.js

@@ -9,28 +9,38 @@ document.addEventListener(
 		const copyNumberButton = event.target?.closest(
 			'.js-woopayments-copy-test-number'
 		);
-		if ( copyNumberButton ) {
-			event.preventDefault();
-			const number = copyNumberButton.parentElement.querySelector(
-				'.js-woopayments-test-number'
-			).innerText;
-			navigator.clipboard.writeText( number );
+		if ( ! copyNumberButton ) {
+			return;
+		}
+
+		event.preventDefault();
+		const number = copyNumberButton.parentElement.querySelector(
+			'.js-woopayments-test-number'
+		).innerText;
 
-			window.wp?.data
-				?.dispatch( 'core/notices' )
-				?.createInfoNotice(
-					__(
-						'Test number copied to your clipboard!',
-						'woocommerce-payments'
-					),
-					{
-						// the unique `id` prevents the JS from creating multiple notices with the same text before they're dismissed.
-						id: 'woopayments/test-number-copied',
-						type: 'snackbar',
-						context: 'wc/checkout/payments',
-					}
-				);
+		if ( ! navigator.clipboard ) {
+			prompt(
+				__( 'Copy the test number:', 'woocommerce-payments' ),
+				number
+			);
+			return;
 		}
+		navigator.clipboard.writeText( number );
+
+		window.wp?.data
+			?.dispatch( 'core/notices' )
+			?.createInfoNotice(
+				__(
+					'Test number copied to your clipboard!',
+					'woocommerce-payments'
+				),
+				{
+					// the unique `id` prevents the JS from creating multiple notices with the same text before they're dismissed.
+					id: 'woopayments/test-number-copied',
+					type: 'snackbar',
+					context: 'wc/checkout/payments',
+				}
+			);
 	},
 	false
 );

client/checkout/woopay/email-input-iframe.js

@@ -6,8 +6,10 @@ import { getConfig } from 'wcpay/utils/checkout';
 import { recordUserEvent, getTracksIdentity } from 'tracks';
 import request from '../utils/request';
 import { buildAjaxURL } from 'utils/express-checkout';
+import { getAppearance } from 'checkout/upe-styles';
 import {
 	getTargetElement,
+	getAppearanceType,
 	validateEmail,
 	appendRedirectionParams,
 	shouldSkipWooPay,
@@ -177,6 +179,7 @@ export const handleWooPayEmailInput = async (
 	iframe.addEventListener( 'load', () => {
 		// Set the initial value.
 		iframeHeaderValue = true;
+		const appearanceType = getAppearanceType();
 
 		if ( getConfig( 'isWoopayFirstPartyAuthEnabled' ) ) {
 			request(
@@ -186,6 +189,9 @@ export const handleWooPayEmailInput = async (
 					order_id: getConfig( 'order_id' ),
 					key: getConfig( 'key' ),
 					billing_email: getConfig( 'billing_email' ),
+					appearance: getConfig( 'isWooPayGlobalThemeSupportEnabled' )
+						? getAppearance( appearanceType )
+						: null,
 				}
 			).then( ( response ) => {
 				if ( response?.data?.session ) {

client/data/settings/hooks.js

@@ -491,11 +491,6 @@ export const useWooPayShowIncompatibilityNotice = () =>
 		select( STORE_NAME ).getShowWooPayIncompatibilityNotice()
 	);
 
-export const useExpressCheckoutShowIncompatibilityNotice = () =>
-	useSelect( ( select ) =>
-		select( STORE_NAME ).getShowExpressCheckoutIncompatibilityNotice()
-	);
-
 export const useStripeBilling = () => {
 	const { updateIsStripeBillingEnabled } = useDispatch( STORE_NAME );
 

client/data/settings/selectors.js

@@ -253,13 +253,6 @@ export const getShowWooPayIncompatibilityNotice = ( state ) => {
 	return getSettings( state ).show_woopay_incompatibility_notice || false;
 };
 
-export const getShowExpressCheckoutIncompatibilityNotice = ( state ) => {
-	return (
-		getSettings( state ).show_express_checkout_incompatibility_notice ||
-		false
-	);
-};
-
 export const getIsStripeBillingEnabled = ( state ) => {
 	return getSettings( state ).is_stripe_billing_enabled || false;
 };

client/express-checkout/blocks/components/express-checkout-component.js

@@ -40,7 +40,11 @@ const adjustButtonHeights = ( buttonOptions, expressPaymentMethod ) => {
 	// Apple Pay has a nearly imperceptible height difference. We increase it by 1px here.
 	if ( buttonOptions.buttonTheme.applePay === 'black' ) {
 		if ( expressPaymentMethod === 'applePay' ) {
-			buttonOptions.buttonHeight = buttonOptions.buttonHeight + 0.4;
+			// The maximum allowed size is 55px.
+			buttonOptions.buttonHeight = Math.min(
+				buttonOptions.buttonHeight + 0.4,
+				55
+			);
 		}
 	}
 

client/express-checkout/blocks/components/express-checkout-container.js

@@ -27,9 +27,11 @@ const ExpressCheckoutContainer = ( props ) => {
 	};
 
 	return (
-		<Elements stripe={ stripePromise } options={ options }>
-			<ExpressCheckoutComponent { ...props } />
-		</Elements>
+		<div style={ { minHeight: '40px' } }>
+			<Elements stripe={ stripePromise } options={ options }>
+				<ExpressCheckoutComponent { ...props } />
+			</Elements>
+		</div>
 	);
 };
 

client/express-checkout/index.js

@@ -210,10 +210,7 @@ jQuery( ( $ ) => {
 				}
 
 				return options.displayItems
-					.filter(
-						( i ) =>
-							i.label === __( 'Shipping', 'woocommerce-payments' )
-					)
+					.filter( ( i ) => i.key === 'total_shipping' )
 					.map( ( i ) => ( {
 						id: `rate-${ i.label }`,
 						amount: i.amount,
@@ -228,7 +225,7 @@ jQuery( ( $ ) => {
 			// Relying on what's provided in the cart response seems safest since it should always include a valid shipping
 			// rate if one is required and available.
 			// If no shipping rate is found we can't render the button so we just exit.
-			if ( options.requestShipping && ! shippingRates ) {
+			if ( options.requestShipping && ! shippingRates.length ) {
 				return;
 			}
 

client/settings/express-checkout-settings/payment-request-settings.js

@@ -14,9 +14,7 @@ import GeneralPaymentRequestButtonSettings from './general-payment-request-butto
 import {
 	usePaymentRequestEnabledSettings,
 	usePaymentRequestLocations,
-	useExpressCheckoutShowIncompatibilityNotice,
 } from 'wcpay/data';
-import { ExpressCheckoutIncompatibilityNotice } from 'wcpay/settings/settings-warnings/incompatibility-notice';
 
 const PaymentRequestSettings = ( { section } ) => {
 	const [
@@ -42,15 +40,10 @@ const PaymentRequestSettings = ( { section } ) => {
 		}
 	};
 
-	const showIncompatibilityNotice = useExpressCheckoutShowIncompatibilityNotice();
-
 	return (
 		<Card>
 			{ section === 'enable' && (
 				<CardBody>
-					{ showIncompatibilityNotice && (
-						<ExpressCheckoutIncompatibilityNotice />
-					) }
 					<CheckboxControl
 						checked={ isPaymentRequestEnabled }
 						onChange={ updateIsPaymentRequestEnabled }

client/settings/express-checkout-settings/test/index.js

@@ -34,9 +34,6 @@ jest.mock( '../../../data', () => ( {
 		.fn()
 		.mockReturnValue( [ [ true, true, true ], jest.fn() ] ),
 	useWooPayShowIncompatibilityNotice: jest.fn().mockReturnValue( false ),
-	useExpressCheckoutShowIncompatibilityNotice: jest
-		.fn()
-		.mockReturnValue( false ),
 } ) );
 
 jest.mock( '@wordpress/data', () => ( {

client/settings/express-checkout-settings/test/payment-request-settings.test.js

@@ -18,7 +18,6 @@ import {
 	usePaymentRequestButtonSize,
 	usePaymentRequestButtonTheme,
 	useWooPayEnabledSettings,
-	useExpressCheckoutShowIncompatibilityNotice,
 } from '../../../data';
 
 jest.mock( '../../../data', () => ( {
@@ -29,7 +28,6 @@ jest.mock( '../../../data', () => ( {
 	usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'small' ] ),
 	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
 	useWooPayEnabledSettings: jest.fn(),
-	useExpressCheckoutShowIncompatibilityNotice: jest.fn(),
 	useWooPayShowIncompatibilityNotice: jest.fn().mockReturnValue( false ),
 	useWooPayGlobalThemeSupportEnabledSettings: jest
 		.fn()
@@ -260,28 +258,4 @@ describe( 'PaymentRequestSettings', () => {
 			updatePaymentRequestLocationsHandler
 		).toHaveBeenLastCalledWith( [ 'checkout', 'product' ] );
 	} );
-
-	it( 'triggers the hooks when the enable setting is being interacted with', () => {
-		useExpressCheckoutShowIncompatibilityNotice.mockReturnValue( true );
-
-		render( <PaymentRequestSettings section="enable" /> );
-
-		expect(
-			screen.queryByText(
-				'Your custom checkout fields may not be compatible with these payment methods.'
-			)
-		).toBeInTheDocument();
-	} );
-
-	it( 'triggers the hooks when the enable setting is being interacted with', () => {
-		useExpressCheckoutShowIncompatibilityNotice.mockReturnValue( false );
-
-		render( <PaymentRequestSettings section="enable" /> );
-
-		expect(
-			screen.queryByText(
-				'Your custom checkout fields may not be compatible with these payment methods.'
-			)
-		).not.toBeInTheDocument();
-	} );
 } );