Feature: Multi-lingual Support

.eslintrc.js

@@ -38,6 +38,7 @@ module.exports = {
 	},
 	globals: {
 		getComputedStyle: 'readonly',
+		navigator: 'readonly',
 	},
 	rules: {
 		'@wordpress/i18n-text-domain': [

changelog.txt

@@ -1,5 +1,9 @@
 *** Google for WooCommerce Changelog ***
 
+= Unreleased =
+* Migrate Merchant Center reporting to the Merchant API
+* The `gla_merchant_query_response` filter is removed as part of dropping the Content API report layer.
+
 = 3.7.3 - 2026-07-08 =
 * Add - Added update notification when plugin version 3.8.0 is available
 

js/src/components/app-searchable-select-control/index.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import SearchableSelectControl from '../searchable-select-control';
+import './index.scss';
+
+/**
+ * Wrapper around SearchableSelectControl to apply consistent styling across the app.
+ */
+const AppSearchableSelectControl = ( props ) => {
+	const { className, ...rest } = props;
+
+	return (
+		<SearchableSelectControl
+			className={ classNames(
+				'gla-app-searchable-select-control',
+				className
+			) }
+			{ ...rest }
+		/>
+	);
+};
+
+export default AppSearchableSelectControl;

js/src/components/app-searchable-select-control/index.scss

@@ -0,0 +1,66 @@
+.gla-app-searchable-select-control {
+
+	.gla-searchable-select-control__label {
+		color: $gray-900;
+		font-size: $gla-font-smallest;
+		font-weight: 500;
+		line-height: 1.4;
+		text-transform: uppercase;
+	}
+
+	.gla-searchable-select-control__input {
+		position: relative;
+
+		&::after {
+			background-color: currentcolor;
+			content: "";
+			display: block;
+			height: 1.5rem;
+			mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nd2hpdGUnIGQ9J00xNS45OSAxMC44OSAxMiAxNC4zbC0zLjk5LTMuNDJMOSA5Ljc1bDMgMi41OCAzLjAxLTIuNTh6Jy8+PC9zdmc+);
+			mask-position: center;
+			mask-repeat: no-repeat;
+			mask-size: contain;
+			pointer-events: none;
+			position: absolute;
+			right: 8px;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 1.5rem;
+		}
+	}
+
+	.woocommerce-select-control .components-base-control {
+		border-color: $gray-600;
+		border-radius: 2px;
+		padding: 4px 44px 4px 8px; // 44px right padding for the chevron icon.
+	}
+
+	.woocommerce-select-control .woocommerce-select-control__listbox {
+		border: 1.5px solid var(--wp-admin-theme-color, #3858e9);
+		border-radius: 2px;
+		box-shadow: none;
+		top: calc(100% + 8px);
+	}
+
+	.gla-searchable-select-control__helper-text {
+		font-style: normal;
+		color: $gray-700;
+	}
+
+	.woocommerce-select-control__option {
+		font-size: $gla-font-base;
+		font-weight: 400;
+		height: unset;
+		line-height: $gla-line-height-medium;
+		min-height: unset;
+		padding: 6px 12px;
+	}
+
+	.woocommerce-select-control__control-icon {
+		display: none;
+	}
+
+	.woocommerce-select-control .components-base-control .woocommerce-select-control__control-input {
+		min-height: 26px;
+	}
+}

js/src/components/countries-time-input/index.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { Flex, FlexBlock } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useAdaptiveFormInputProps } from '~/components/adaptive-form';
+import MinMaxShippingTimes from './min-max-shipping-times';
+import './index.scss';
+
+/**
+ * Input component for the estimated flat shipping time (min and max days) applied to all target countries.
+ */
+const CountriesTimeInput = () => {
+	const { value: time, onChange: onMinTimeChange } =
+		useAdaptiveFormInputProps( 'flat_shipping_min_time' );
+	const { value: maxTime, onChange: onMaxTimeChange } =
+		useAdaptiveFormInputProps( 'flat_shipping_max_time' );
+
+	const handleBlur = ( numberValue, field ) => {
+		if ( field === 'time' ) {
+			if ( time !== numberValue ) {
+				onMinTimeChange( numberValue );
+			}
+		} else if ( field === 'maxTime' && maxTime !== numberValue ) {
+			onMaxTimeChange( numberValue );
+		}
+	};
+
+	const handleIncrement = ( numberValue, field ) => {
+		if ( field === 'time' ) {
+			onMinTimeChange( numberValue );
+		} else if ( field === 'maxTime' ) {
+			onMaxTimeChange( numberValue );
+		}
+	};
+
+	return (
+		<Flex className="gla-countries-time-input-container">
+			<FlexBlock>
+				<MinMaxShippingTimes
+					time={ time }
+					maxTime={ maxTime }
+					handleBlur={ handleBlur }
+					handleIncrement={ handleIncrement }
+				/>
+			</FlexBlock>
+		</Flex>
+	);
+};
+
+export default CountriesTimeInput;

js/src/components/countries-time-input/index.scss

@@ -0,0 +1,3 @@
+.gla-countries-time-input-container {
+	max-width: $gla-width-medium-large;
+}

js/src/components/countries-time-input/index.test.js

@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import CountriesTimeInput from './';
+import { useAdaptiveFormInputProps } from '~/components/adaptive-form';
+
+jest.mock( '~/components/adaptive-form', () => ( {
+	useAdaptiveFormInputProps: jest.fn(),
+} ) );
+
+function setupMocks( { time = 1, maxTime = 32 } = {} ) {
+	const onMinTimeChange = jest.fn();
+	const onMaxTimeChange = jest.fn();
+
+	useAdaptiveFormInputProps.mockImplementation( ( key ) => {
+		if ( key === 'flat_shipping_min_time' ) {
+			return { value: time, onChange: onMinTimeChange };
+		}
+		return { value: maxTime, onChange: onMaxTimeChange };
+	} );
+
+	return { onMinTimeChange, onMaxTimeChange };
+}
+
+describe( 'CountriesTimeInput', () => {
+	it( 'renders two inputs with values from form context', () => {
+		setupMocks( { time: 3, maxTime: 7 } );
+
+		const { getAllByRole } = render( <CountriesTimeInput /> );
+		const inputs = getAllByRole( 'textbox' );
+
+		expect( inputs ).toHaveLength( 2 );
+		expect( inputs[ 0 ] ).toHaveValue( '3' );
+		expect( inputs[ 1 ] ).toHaveValue( '7' );
+	} );
+
+	it( 'shows an empty input for time value of 0 (Same Day placeholder)', () => {
+		setupMocks( { time: 0, maxTime: 5 } );
+
+		const { getAllByRole } = render( <CountriesTimeInput /> );
+		const [ minInput ] = getAllByRole( 'textbox' );
+
+		expect( minInput ).toHaveValue( '' );
+	} );
+
+	describe( 'handleBlur', () => {
+		it( 'calls onMinTimeChange with the new value when min input blurs with a different value', () => {
+			const { onMinTimeChange } = setupMocks( { time: 1 } );
+			const { getAllByRole } = render( <CountriesTimeInput /> );
+			const [ minInput ] = getAllByRole( 'textbox' );
+
+			fireEvent.blur( minInput, { target: { value: '5' } } );
+
+			expect( onMinTimeChange ).toHaveBeenCalledTimes( 1 );
+			expect( onMinTimeChange ).toHaveBeenCalledWith( 5 );
+		} );
+
+		it( 'does not call onMinTimeChange when min input blurs with the same value', () => {
+			const { onMinTimeChange } = setupMocks( { time: 1 } );
+			const { getAllByRole } = render( <CountriesTimeInput /> );
+			const [ minInput ] = getAllByRole( 'textbox' );
+
+			fireEvent.blur( minInput, { target: { value: '1' } } );
+
+			expect( onMinTimeChange ).not.toHaveBeenCalled();
+		} );
+
+		it( 'calls onMaxTimeChange with the new value when max input blurs with a different value', () => {
+			const { onMaxTimeChange } = setupMocks( { maxTime: 32 } );
+			const { getAllByRole } = render( <CountriesTimeInput /> );
+			const [ , maxInput ] = getAllByRole( 'textbox' );
+
+			fireEvent.blur( maxInput, { target: { value: '10' } } );
+
+			expect( onMaxTimeChange ).toHaveBeenCalledTimes( 1 );
+			expect( onMaxTimeChange ).toHaveBeenCalledWith( 10 );
+		} );
+
+		it( 'does not call onMaxTimeChange when max input blurs with the same value', () => {
+			const { onMaxTimeChange } = setupMocks( { maxTime: 32 } );
+			const { getAllByRole } = render( <CountriesTimeInput /> );
+			const [ , maxInput ] = getAllByRole( 'textbox' );
+
+			fireEvent.blur( maxInput, { target: { value: '32' } } );
+
+			expect( onMaxTimeChange ).not.toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'handleIncrement (stepper buttons)', () => {
+		it( 'calls onMinTimeChange when the min increment button is pressed', async () => {
+			const { onMinTimeChange } = setupMocks( { time: 1 } );
+			const { getAllByRole } = render( <CountriesTimeInput /> );
+			const incrementButtons = getAllByRole( 'button', {
+				name: 'Increment',
+			} );
+
+			fireEvent.mouseDown( incrementButtons[ 0 ] );
+
+			await waitFor( () => {
+				expect( onMinTimeChange ).toHaveBeenCalledTimes( 1 );
+			} );
+			expect( onMinTimeChange ).toHaveBeenCalledWith( 2 );
+		} );
+
+		it( 'calls onMaxTimeChange when the max increment button is pressed', async () => {
+			const { onMaxTimeChange } = setupMocks( { maxTime: 32 } );
+			const { getAllByRole } = render( <CountriesTimeInput /> );
+			const incrementButtons = getAllByRole( 'button', {
+				name: 'Increment',
+			} );
+
+			fireEvent.mouseDown( incrementButtons[ 1 ] );
+
+			await waitFor( () => {
+				expect( onMaxTimeChange ).toHaveBeenCalledTimes( 1 );
+			} );
+			expect( onMaxTimeChange ).toHaveBeenCalledWith( 33 );
+		} );
+
+		it( 'calls onMinTimeChange when the min decrement button is pressed', async () => {
+			const { onMinTimeChange } = setupMocks( { time: 3 } );
+			const { getAllByRole } = render( <CountriesTimeInput /> );
+			const decrementButtons = getAllByRole( 'button', {
+				name: 'Decrement',
+			} );
+
+			fireEvent.mouseDown( decrementButtons[ 0 ] );
+
+			await waitFor( () => {
+				expect( onMinTimeChange ).toHaveBeenCalledTimes( 1 );
+			} );
+			expect( onMinTimeChange ).toHaveBeenCalledWith( 2 );
+		} );
+
+		it( 'calls onMaxTimeChange when the max decrement button is pressed', async () => {
+			const { onMaxTimeChange } = setupMocks( { maxTime: 32 } );
+			const { getAllByRole } = render( <CountriesTimeInput /> );
+			const decrementButtons = getAllByRole( 'button', {
+				name: 'Decrement',
+			} );
+
+			fireEvent.mouseDown( decrementButtons[ 1 ] );
+
+			await waitFor( () => {
+				expect( onMaxTimeChange ).toHaveBeenCalledTimes( 1 );
+			} );
+			expect( onMaxTimeChange ).toHaveBeenCalledWith( 31 );
+		} );
+	} );
+} );

js/src/components/free-listings/configure-product-listings/shipping-time-setup/time-stepper/index.scss → js/src/components/countries-time-input/time-stepper/index.scss

@@ -1,6 +1,7 @@
 .gla-countries-time-stepper {
 	width: $gla-width-smaller;
+
 	.gla-countries-time-suffix {
-		margin-right: $grid-unit-05;
+		margin-inline-end: $grid-unit-05;
 	}
 }

js/src/components/free-listings/configure-product-listings/__snapshots__/checkErrors.test.js.snap

@@ -8,27 +8,23 @@ exports[`checkErrors Audience When the audience location option is an invalid va
 
 exports[`checkErrors Offer free shipping With flat shipping rate option When there are some non-free shipping rates, and offer free shipping is checked, and there is no minimum order amount for non-free shipping rates, should not pass 1`] = `"Please enter minimum order for free shipping."`;
 
-exports[`checkErrors Shipping rates For flat type When there are any selected countries with shipping rates not set, should not pass 1`] = `"Please specify estimated shipping rates for all the countries, and the rate cannot be less than 0."`;
+exports[`checkErrors Shipping rates For flat type When flat_shipping_rate is a negative number, should not pass 1`] = `"Please specify an estimated shipping rate."`;
 
-exports[`checkErrors Shipping rates For flat type When there are any shipping rates is < 0, should not pass 1`] = `"Please specify estimated shipping rates for all the countries, and the rate cannot be less than 0."`;
+exports[`checkErrors Shipping rates For flat type When flat_shipping_rate is undefined, should not pass 1`] = `"Please specify an estimated shipping rate."`;
 
 exports[`checkErrors Shipping rates When the type of shipping rate is an invalid value or missing, should not pass 1`] = `"Please select a shipping rate option."`;
 
 exports[`checkErrors Shipping rates When the type of shipping rate is an invalid value or missing, should not pass 2`] = `"Please select a shipping rate option."`;
 
 exports[`checkErrors Shipping rates When the type of shipping rate is an invalid value or missing, should not pass 3`] = `"Please select a shipping rate option."`;
 
-exports[`checkErrors Shipping times For flat type When minimum max_time is < 0, should not pass 1`] = `"The minimum shipping time must not be more than the maximum shipping time."`;
+exports[`checkErrors Shipping times For flat type When flat_shipping_max_time is null or undefined, should not pass 1`] = `"Please specify an estimated maximum shipping time."`;
 
-exports[`checkErrors Shipping times For flat type When minimum times is < 0, should not pass 1`] = `"Please specify estimated shipping times for all the countries, and the time cannot be less than 0."`;
+exports[`checkErrors Shipping times For flat type When flat_shipping_min_time > flat_shipping_max_time, should not pass 1`] = `"The minimum shipping time must not be more than the maximum shipping time."`;
 
-exports[`checkErrors Shipping times For flat type When there are any selected countries' shipping times is not set, should not pass 1`] = `"Please specify estimated shipping times for all the countries, and the time cannot be less than 0."`;
+exports[`checkErrors Shipping times For flat type When flat_shipping_min_time is null or undefined, should not pass 1`] = `"Please specify an estimated minimum shipping time."`;
 
-exports[`checkErrors Shipping times For flat type When there are any shipping times are < 0, should not pass 1`] = `"Please specify estimated shipping times for all the countries, and the time cannot be less than 0."`;
-
-exports[`checkErrors Shipping times For flat type shouldnt pass if min or max time is null 1`] = `"The minimum shipping time must not be more than the maximum shipping time."`;
-
-exports[`checkErrors Shipping times For flat type shouldnt pass if min time is bigger than max time 1`] = `"The minimum shipping time must not be more than the maximum shipping time."`;
+exports[`checkErrors Shipping times For flat type When flat_shipping_min_time or flat_shipping_max_time is < 0, should not pass 1`] = `"The shipping time cannot be less than 0."`;
 
 exports[`checkErrors Shipping times When the type of shipping time is an invalid value or missing, should not pass 1`] = `"Please select a shipping time option."`;