Merge release/8.8.0 into trunk

bin/docker-setup.sh

@@ -101,6 +101,12 @@ cli wp option set woocommerce_currency "USD"
 cli wp option set woocommerce_product_type "both"
 cli wp option set woocommerce_allow_tracking "no"
 
+echo "Deactivating Coming Soon mode in WooCommerce..."
+cli wp option set woocommerce_coming_soon "no"
+
+echo "Enabling company field as an optional parameter in checkout form..."
+cli wp option set woocommerce_checkout_company_field "optional"
+
 echo "Importing WooCommerce shop pages..."
 cli wp wc --user=admin tool run install_pages
 

changelog.txt

@@ -1,5 +1,30 @@
 *** WooPayments Changelog ***
 
+= 8.8.0 - 2025-01-15 =
+* Add - Allow transactions filtered by Payment Method.
+* Add - Falback terms and conditions for WooPay.
+* Fix - Broaden billing field queries from form-scoped to document-scoped.
+* Fix - Checkout: Make sure the font size for PMME is smaller than the labels.
+* Fix - Ensure consistent formatting of refund notes with MC.
+* Fix - Fix incompatibility with some bookings plugins.
+* Fix - Fix JS exception when ECE payment fails.
+* Fix - Fix transaction list sorting by payout currency.
+* Fix - Improve the mobile rendering of the Balances box within Payment Overview.
+* Fix - Update currency conversion method for booking products.
+* Fix - Update WordPress.org readme.txt file.
+* Fix - Upgrade `@woocommerce/csv-export` package to v1.10.0 – fixes unnecessary escaping of negative values in CSV exports that was preventing numerical analysis in spreadsheet applications.
+* Fix - Zero dollar subscriptions with zero dollar renewals checkout error.
+* Update - Bump stable tag for 8.7.0.
+* Update - Improve BNPL PMME and icon placement in shortcode checkout.
+* Update - Remove the overlay that announces the rename from deposits to payouts.
+* Update - Replaced the term "VAT" with "Tax" in Documents Listing Page.
+* Update - round to nearest lowest denominator instead of ceiling before applying currency rounding settings.
+* Dev - Add the Playwright Pay for Order spec and remove the equivalent Puppeteer spec.
+* Dev - Add type assertion for disputes CSV export response to ensure type safety and fix TypeScript error.
+* Dev - Update phpunit-watcher dev package version.
+* Dev - Update the PHP version and the Xdebug version used in the E2E testing environment.
+* Dev - Update the Playwright Payment Gateways Confirmation spec and remove the Puppeteer Payment Gateways Confirmation spec.
+
 = 8.7.1 - 2025-01-14 =
 * Fix - Broaden billing field queries from form-scoped to document-scoped
 

client/checkout/api/test/index.test.js

@@ -28,6 +28,7 @@ const mockAppearance = {
 		'.Input': {},
 		'.Input--invalid': {},
 		'.Label': {},
+		'.Label--resting': {},
 		'.Tab': {},
 		'.Tab--selected': {},
 		'.Tab:hover': {},

client/checkout/blocks/index.js

@@ -98,12 +98,13 @@ Object.entries( enabledPaymentMethodsConfig )
 			savedTokenComponent: <SavedTokenHandler api={ api } />,
 			canMakePayment: ( cartData ) => {
 				const billingCountry = cartData.billingAddress.country;
+				const needsPayment = cartData.cart.cartNeedsPayment;
 				const isRestrictedInAnyCountry = !! upeConfig.countries.length;
 				const isAvailableInTheCountry =
 					! isRestrictedInAnyCountry ||
 					upeConfig.countries.includes( billingCountry );
 				// We used to check if stripe was loaded with `getStripeForUPE`, but we can't guarantee it will be loaded synchronously.
-				return isAvailableInTheCountry;
+				return needsPayment && isAvailableInTheCountry;
 			},
 			paymentMethodId: upeMethods[ upeName ],
 			// see .wc-block-checkout__payment-method styles in blocks/style.scss

client/checkout/blocks/payment-method-label.js

@@ -10,8 +10,8 @@ import { useStripeForUPE } from 'wcpay/hooks/use-stripe-async';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 import { __ } from '@wordpress/i18n';
 import './style.scss';
-import { useEffect, useState } from '@wordpress/element';
-import { getAppearance } from 'wcpay/checkout/upe-styles';
+import { useEffect, useMemo, useState } from '@wordpress/element';
+import { getAppearance, getFontRulesFromPage } from 'wcpay/checkout/upe-styles';
 
 const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
 const PaymentMethodMessageWrapper = ( {
@@ -57,6 +57,8 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 		getUPEConfig( 'wcBlocksUPEAppearanceTheme' )
 	);
 
+	const fontRules = useMemo( () => getFontRulesFromPage(), [] );
+
 	// Stripe expects the amount to be sent as the minor unit of 2 digits.
 	const amount = parseInt(
 		normalizeCurrencyToMinorUnit(
@@ -123,6 +125,7 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 					stripe={ stripe }
 					options={ {
 						appearance: appearance,
+						fonts: fontRules,
 					} }
 				>
 					<PaymentMethodMessagingElement

client/checkout/classic/event-handlers.js

@@ -176,13 +176,39 @@ jQuery( function ( $ ) {
 				}
 
 				if ( targetLabel ) {
+					// wrapInner target label in a span.woopayments-inner-label if it's not already
+					let targetLabelInnerSpan = targetLabel.querySelector(
+						'span.woopayments-inner-label'
+					);
+					if ( ! targetLabelInnerSpan ) {
+						const targetLabelInner = targetLabel.innerHTML;
+						targetLabel.innerHTML = '';
+						targetLabelInnerSpan = document.createElement( 'span' );
+						targetLabelInnerSpan.classList.add(
+							'woopayments-inner-label'
+						);
+						targetLabelInnerSpan.innerHTML = targetLabelInner;
+						targetLabel.appendChild( targetLabelInnerSpan );
+					}
+
+					let spacer = targetLabel.querySelector( 'span.spacer' );
+					if ( ! spacer ) {
+						spacer = document.createElement( 'span' );
+						spacer.classList.add( 'spacer' );
+						spacer.innerHTML = ' ';
+						targetLabel.insertBefore(
+							spacer,
+							targetLabelInnerSpan
+						);
+					}
+
 					let container = document.getElementById( containerID );
 					if ( ! container ) {
 						container = document.createElement( 'span' );
 						container.id = containerID;
 						container.dataset.paymentMethodType = method;
 						container.classList.add( 'stripe-pmme-container' );
-						targetLabel.appendChild( container );
+						targetLabelInnerSpan.appendChild( container );
 					}
 
 					const currentCountry =

client/checkout/classic/style.scss

@@ -18,6 +18,7 @@
 	position: relative;
 }
 
+// Stripe Link button styles.
 .wcpay-checkout-email-field button.wcpay-stripelink-modal-trigger {
 	display: none;
 	position: absolute;
@@ -30,66 +31,111 @@
 	border: none;
 }
 
+// Logo styles.
 #payment .payment_methods {
-	li[class*='payment_method_woocommerce_payments'] label img {
-		float: right;
-		border: 0;
-		padding: 0;
-		height: 24px !important;
-		max-height: 24px !important;
+	li[class*='payment_method_woocommerce_payments'] label {
+		display: inline;
+		img {
+			float: right;
+			border: 0;
+			padding: 0;
+			height: 24px !important;
+			max-height: 24px !important;
+		}
 	}
 }
 
-li.wc_payment_method:has( .input-radio:not( :checked )
-		+ label
-		.stripe-pmme-container ) {
+// Payment methods with PMME styles.
+li.wc_payment_method:has( label .stripe-pmme-container ) {
 	display: grid;
-	grid-template-columns: min-content 1fr;
-	grid-template-rows: auto auto;
+	grid-template-columns: max-content 1fr;
+	grid-template-areas: 'li-input li-label'; // List Item grid.
 	align-items: baseline;
 
 	.input-radio {
-		grid-row: 1;
-		grid-column: 1;
+		grid-area: li-input;
 	}
 
-	label {
-		grid-column: 2;
-		grid-row: 1;
-	}
+	> label {
+		grid-area: li-label;
 
-	img {
-		grid-row: 1 / span 2;
-		align-self: center;
-	}
+		display: grid !important;
+		grid-template-columns: max-content 1fr;
+		grid-template-areas: 'label-spacer label-inner'; // Label grid.
 
-	.stripe-pmme-container {
-		width: 100%;
-		grid-column: 1;
-		grid-row-start: 2;
-		pointer-events: none;
-	}
+		> span.spacer {
+			grid-area: label-spacer;
+		}
+
+		> .woopayments-inner-label {
+			grid-area: label-inner;
+			display: grid;
+			grid-template-columns: 1fr max-content;
+			grid-template-areas:
+				'inner-text inner-logo'
+				'inner-pmme inner-logo'; // Inner label grid.
+			align-items: center;
+
+			> img {
+				grid-area: inner-logo;
+				justify-self: right;
+			}
 
-	.payment_box {
-		flex: 0 0 100%;
-		grid-row: 2;
-		grid-column: 1 / span 2;
+			> .stripe-pmme-container {
+				width: 100%;
+				grid-area: inner-pmme;
+				pointer-events: none;
+			}
+		}
 	}
 }
 
+// Hide the PMMe container when the payment method is checked.
 li.wc_payment_method:has( .input-radio:checked
 		+ label
 		.stripe-pmme-container ) {
-	display: block;
-
 	.input-radio:checked {
 		+ label {
 			.stripe-pmme-container {
 				display: none;
 			}
+		}
+	}
+}
+
+// Pseudo-element radio button compatibility.
+// Unfortunately, there is no direct way to detect the existence of pseudo-elements like ::before using CSS selectors,
+// so we use the theme class to add the necessary styles.
+.theme-storefront,
+.theme-twentytwenty,
+.theme-twentytwentyone,
+.theme-twentytwentytwo,
+.theme-twentytwentythree {
+	#payment {
+		.payment_methods {
+			> li.wc_payment_method {
+				// Storefront does not render the input radio button.
+				grid-template-areas: 'li-label'; // List Item grid for Storefront.
+				grid-template-columns: 1fr;
+
+				> input + label {
+					// Storefront uses a label::before for the radio button so we need to adjust the grid.
+					grid-template-areas: 'label-before label-spacer label-inner'; // Label grid for Storefront.
+					grid-template-columns: max-content max-content 1fr;
+				}
+
+				> input + label {
+					&::before {
+						grid-area: label-before;
+					}
+				}
+			}
 
-			img {
-				grid-column: 2;
+			// This makes sure labels that don't have the pmme container are displayed correctly.
+			li[class*='payment_method_woocommerce_payments'] {
+				> input + label {
+					display: block;
+				}
 			}
 		}
 	}