Merge release/9.6.0 into trunk

Author: dmvrtx

.github/dependabot.yml

@@ -14,7 +14,8 @@ updates:
         - dependency-name: "@woocommerce/*"
       # Reviewers for issues created
       reviewers:
-        - 'Automattic/harmony'
+        - 'Automattic/gamma'
+        - 'Automattic/moltres'
 
     # Enable version updates for composer
     - package-ecosystem: 'composer'
@@ -25,7 +26,8 @@ updates:
         interval: 'weekly'
       # Reviewers for issues created
       reviewers:
-          - 'Automattic/harmony'
+        - 'Automattic/gamma'
+        - 'Automattic/moltres'
 
     # Enable version updates for Docker
     - package-ecosystem: 'docker'
@@ -36,4 +38,5 @@ updates:
           interval: 'weekly'
       # Reviewers for issues created
       reviewers:
-          - 'Automattic/harmony'
+        - 'Automattic/gamma'
+        - 'Automattic/moltres'

changelog.txt

@@ -1,5 +1,36 @@
 *** WooPayments Changelog ***
 
+= 9.6.0 - 2025-07-02 =
+* Add - Add cover letter for the new evidence submission screen for Product Unacceptable chargeback reason
+* Add - Added a URL parameter to allow merchants to access the VAT details modal.
+* Add - Show an admin notice when bundled subscriptions are in use
+* Fix - Add NO VAT description for Norway in tax descriptions
+* Fix - fix: ensure Google Pay/Apple Pay postcode matching for shipping zones works even when the provided postcode is redacted.
+* Fix - Fix a layout shift when uploading evidence for a dispute on the new challenge dispute screen
+* Fix - Fix mobile version of the StepperPanel and make the top navigation clickable.
+* Fix - Fix padding on the recommended document section
+* Fix - Fix payment methods logos width calculation in block editor preview
+* Fix - Fix preselected Payment Methods ignored during account creation via KYC session.
+* Fix - Fix spacing on disputes expandable block
+* Fix - Fix state for the cover letter.
+* Fix - Fix the browser print preview page on the payouts page.
+* Fix - Prevent double stock reduction after (3DS) authentication.
+* Fix - Prevent fatal error on the Pay for Order page upon deleted orders.
+* Update - Change the copy of the cover letter notice.
+* Update - Clicking on the Next button scroll the page position to the top.
+* Update - Evidence submission form for product not received
+* Update - fix: update Google Pay/Apple Pay buttons compatibility when multi-currency functionality is disabled - they'll no longer throw an exception for logged-out customers
+* Update - Refine "Temporarily Suspended" language, statuses and tooltip copy
+* Update - update: add `wcpay_express_checkout_js_params` filter for express checkout JS params.
+* Update - Updates the recomended documents section for the new disputes experience
+* Dev - Add missing arrow icons from the new evidence form
+* Dev - Ensure the submitted state is working as expected
+* Dev - Fix the regexp checking for the loading state of the checkout button to cover changes in latest WooCommerce.
+* Dev - Remove CTA from the new evidence "Evidence saved!" toast.
+* Dev - Revert @woocommerce/onboarding upgrade in PR 10840
+* Dev - Update reviewers for dependabot
+* Dev - Update tested WooCommerce version to 10.0.0
+
 = 9.5.0 - 2025-06-11 =
 * Add - Add specific texts for collecting Norway and New Zealand tax data
 * Add - Add specific texts for collecting Singapore tax data

client/checkout/blocks/payment-methods-logos/payment-methods-logos.tsx

@@ -52,23 +52,57 @@ export const PaymentMethodsLogos: React.FC< PaymentMethodsLogosProps > = ( {
 		buttonRef.current?.focus();
 	}, [] );
 
+	// Try to find the preview iframe in the page editor.
+	const previewFrame = document.querySelector(
+		'iframe[name="editor-canvas"]'
+	);
+
 	useEffect( () => {
 		const updateMaxElements = () => {
+			// Get the actual width based on whether we're in an iframe or not.
+			let width: number;
+
+			if ( previewFrame ) {
+				// Get the width from the iframe's clientWidth.
+				width = previewFrame.clientWidth;
+			} else {
+				width = window.innerWidth;
+			}
+
 			const sortedConfigs = [ ...breakpointConfigs ].sort(
 				( a, b ) => a.breakpoint - b.breakpoint
 			);
 			const config = sortedConfigs.find(
-				( cfg ) => window.innerWidth <= cfg.breakpoint
+				( cfg ) => width <= cfg.breakpoint
 			);
 
 			setMaxShownElements( config ? config.maxElements : maxElements );
 		};
 
+		// Initial update
 		updateMaxElements();
-		window.addEventListener( 'resize', updateMaxElements );
 
+		// Use ResizeObserver if available, otherwise fallback to window resize
+		if ( typeof ResizeObserver !== 'undefined' ) {
+			const resizeObserver = new ResizeObserver( updateMaxElements );
+
+			if ( previewFrame ) {
+				resizeObserver.observe( previewFrame );
+			} else {
+				// Fallback to window resize
+				window.addEventListener( 'resize', updateMaxElements );
+			}
+
+			return () => {
+				resizeObserver.disconnect();
+				window.removeEventListener( 'resize', updateMaxElements );
+			};
+		}
+
+		// Fallback for browsers without ResizeObserver
+		window.addEventListener( 'resize', updateMaxElements );
 		return () => window.removeEventListener( 'resize', updateMaxElements );
-	}, [ breakpointConfigs, maxElements ] );
+	}, [ breakpointConfigs, maxElements, previewFrame ] );
 
 	useEffect( () => {
 		if ( popoverAnchor ) {

client/checkout/blocks/payment-methods-logos/style.scss

@@ -2,11 +2,18 @@
 	> div {
 		display: flex;
 		align-items: center;
+		flex-wrap: nowrap;
+		min-width: 0;
+		max-width: 100%;
+		overflow: hidden;
 
 		img {
 			width: 37px;
 			height: 24px;
 			margin-right: 4px;
+			flex-shrink: 1;
+			min-width: 0;
+			max-width: 100%;
 		}
 	}
 
@@ -20,6 +27,10 @@
 		border-radius: 3px;
 		font-size: 11px;
 		font-weight: 600;
+		white-space: nowrap;
+		flex-shrink: 1;
+		text-overflow: ellipsis;
+		overflow: hidden;
 	}
 }
 

client/components/account-status/index.js

@@ -118,10 +118,6 @@ const AccountStatusDetails = ( props ) => {
 					status={ accountStatus.deposits?.status }
 					interval={ accountStatus.deposits?.interval }
 					accountStatus={ accountStatus.status }
-					poEnabled={ accountStatus.progressiveOnboarding.isEnabled }
-					poComplete={
-						accountStatus.progressiveOnboarding.isComplete
-					}
 					iconSize={ 24 }
 				/>
 			</AccountStatusItem>

client/components/account-status/status-chip.js

@@ -12,7 +12,7 @@ import Chip from 'components/chip';
 import './style.scss';
 
 const StatusChip = ( props ) => {
-	const { accountStatus, poEnabled, poComplete } = props;
+	const { accountStatus } = props;
 
 	let description = __( 'Unknown', 'woocommerce-payments' );
 	let type = 'light';
@@ -27,10 +27,7 @@ const StatusChip = ( props ) => {
 	} else if ( accountStatus === 'restricted_soon' ) {
 		description = __( 'Restricted soon', 'woocommerce-payments' );
 		type = 'warning';
-	} else if (
-		accountStatus === 'pending_verification' ||
-		( poEnabled && ! poComplete && accountStatus === 'restricted' )
-	) {
+	} else if ( accountStatus === 'pending_verification' ) {
 		description = __( 'Pending', 'woocommerce-payments' );
 		type = 'light';
 		tooltip = __(

client/components/deposits-status/index.tsx

@@ -67,7 +67,7 @@ const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( {
 } ) => {
 	const description =
 		/* translators: <a> - suspended accounts FAQ URL */
-		__( 'Temporarily suspended', 'woocommerce-payments' );
+		__( 'Under Review', 'woocommerce-payments' );
 
 	return (
 		<span className={ 'account-status__info__yellow' }>
@@ -85,7 +85,7 @@ const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( {
 						/* translators: 1: WooPayments */
 						__(
 							// eslint-disable-next-line max-len
-							'After the information review, your account was temporarily suspended. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+							'While the account is under review payouts may remain suspended. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
 							'woocommerce-payments'
 						),
 						'WooPayments'
@@ -134,20 +134,16 @@ const DepositsStatus: React.FC< Props > = ( {
 	status,
 	interval,
 	accountStatus,
-	poEnabled,
-	poComplete,
 	iconSize,
 } ) => {
-	const isPoInProgress = poEnabled && ! poComplete;
-
 	if ( status === 'blocked' || accountStatus === 'under_review' ) {
 		return (
 			<DepositsStatusSuspended
 				iconSize={ iconSize }
 				interval={ interval }
 			/>
 		);
-	} else if ( accountStatus === 'pending_verification' || isPoInProgress ) {
+	} else if ( accountStatus === 'pending_verification' ) {
 		return (
 			<DepositsStatusPending
 				iconSize={ iconSize }

client/components/deposits-status/test/__snapshots__/index.js.snap

@@ -18,7 +18,7 @@ exports[`DepositsStatus renders blocked status 1`] = `
         />
       </g>
     </svg>
-    Temporarily suspended
+    Under Review
     <button
       class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
       type="button"
@@ -69,7 +69,7 @@ exports[`DepositsStatus renders blocked status 2`] = `
         />
       </g>
     </svg>
-    Temporarily suspended
+    Under Review
     <button
       class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
       type="button"
@@ -212,7 +212,7 @@ exports[`DepositsStatus renders pending verification status 1`] = `
         />
       </g>
     </svg>
-    Temporarily suspended
+    Under Review
     <button
       class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
       type="button"

client/components/deposits-status/test/index.js

@@ -54,7 +54,7 @@ describe( 'DepositsStatus', () => {
 			}
 		);
 
-		expect( await findByText( /Temporarily suspended/i ) ).toBeVisible();
+		expect( await findByText( /Under Review/i ) ).toBeVisible();
 		expect( depositsStatus ).toMatchSnapshot();
 	} );
 
@@ -67,7 +67,7 @@ describe( 'DepositsStatus', () => {
 			}
 		);
 
-		expect( await findByText( /Temporarily suspended/i ) ).toBeVisible();
+		expect( await findByText( /Under Review/i ) ).toBeVisible();
 		expect( depositsStatus ).toMatchSnapshot();
 	} );
 

client/components/stepper/stepper-panel.tsx

@@ -14,32 +14,55 @@ import clsx from 'clsx';
 interface StepperIndicatorProps {
 	steps: string[];
 	currentStep: number;
+	onStepClick?: ( stepIndex: number ) => void;
 }
 
 export const StepperPanel: React.FC< StepperIndicatorProps > = ( {
 	steps,
 	currentStep,
+	onStepClick,
 } ) => (
 	<div className="stepper-panel">
 		{ steps.map( ( label, idx ) => {
 			const isComplete = idx < currentStep;
 			const isActive = idx === currentStep;
+			const isClickable = typeof onStepClick === 'function';
+
+			const StepLabel = isClickable ? 'button' : 'div';
+
+			const handleClick = () => {
+				if ( isClickable && onStepClick ) {
+					onStepClick( idx );
+				}
+			};
+
 			return (
 				<div
 					key={ label }
 					className={ clsx( 'stepper-step', {
 						active: isActive,
 						complete: isComplete,
+						clickable: isClickable,
 					} ) }
 				>
-					<div className="stepper-circle">
+					<StepLabel
+						className="stepper-circle"
+						onClick={ handleClick }
+						disabled={ ! isClickable }
+					>
 						{ isComplete ? (
 							<Icon icon={ check } size={ 36 } />
 						) : (
 							idx + 1
 						) }
-					</div>
-					<div className="stepper-label">{ label }</div>
+					</StepLabel>
+					<StepLabel
+						className="stepper-label"
+						onClick={ handleClick }
+						disabled={ ! isClickable }
+					>
+						{ label }
+					</StepLabel>
 					{ idx < steps.length - 1 && (
 						<div className="stepper-line" />
 					) }