Merge branch 'trunk' into fix/shipping-tour

packages/js/product-editor/changelog/add-38097

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix spacing between pricing fields

packages/js/product-editor/src/blocks/schedule-sale/editor.scss

@@ -1,6 +1,21 @@
 .wp-block-woocommerce-product-schedule-sale-fields {
+	margin-bottom: $gap-large;
+
+	.components-toggle-control {
+		margin-bottom: $gap;
+		padding-bottom: $gap-smaller;
+	}
+
 	.components-toggle-control__label {
 		display: flex;
 		align-items: center;
 	}
 }
+
+.wp-block-woocommerce-product-section {
+	> .block-editor-inner-blocks > .block-editor-block-list__layout {
+		> .wp-block.wp-block-woocommerce-product-schedule-sale-fields:not( :first-child ) {
+			margin-top: $gap;
+		}
+	}
+}

packages/js/product-editor/src/components/block-editor/style.scss

@@ -75,6 +75,7 @@
 
 	.wp-block-columns {
 		gap: $gap-large;
+		margin-bottom: 0;
 	}
 
 	.wp-block-woocommerce-product-section {

plugins/woocommerce-admin/client/analytics/report/revenue/table.js

@@ -20,7 +20,6 @@ import {
 	defaultTableDateFormat,
 	getCurrentDates,
 } from '@woocommerce/date';
-import { stringify } from 'qs';
 import { CurrencyContext } from '@woocommerce/currency';
 
 /**
@@ -308,7 +307,7 @@ const formatProps = memoize(
 		[
 			isError,
 			isRequesting,
-			stringify( tableQuery ),
+			new URLSearchParams( tableQuery ).toString(),
 			get( revenueData, [ 'totalResults' ], 0 ),
 			get( revenueData, [ 'data', 'intervals' ], EMPTY_ARRAY ).length,
 		].join( ':' )

plugins/woocommerce-admin/client/analytics/settings/default-date.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { parse, stringify } from 'qs';
 import { DateRangeFilterPicker } from '@woocommerce/components';
 import { useSettings } from '@woocommerce/data';
 import {
@@ -20,11 +19,13 @@ const DefaultDate = ( { value, onChange } ) => {
 		onChange( {
 			target: {
 				name: 'woocommerce_default_date_range',
-				value: stringify( query ),
+				value: new URLSearchParams( query ).toString(),
 			},
 		} );
 	};
-	const query = parse( value.replace( /&/g, '&' ) );
+	const query = Object.fromEntries(
+		new URLSearchParams( value.replace( /&/g, '&' ) )
+	);
 	const { period, compare, before, after } = getDateParamsFromQuery(
 		query,
 		defaultDateRange

plugins/woocommerce-admin/client/embedded-body-layout/embedded-body-layout.tsx

@@ -4,7 +4,6 @@
 import { applyFilters } from '@wordpress/hooks';
 import { useEffect } from '@wordpress/element';
 import { triggerExitPageCesSurvey } from '@woocommerce/customer-effort-score';
-import QueryString, { parse } from 'qs';
 import {
 	LayoutContextProvider,
 	getLayoutContextValue,
@@ -21,10 +20,8 @@ import './style.scss';
 
 type QueryParams = EmbeddedBodyProps;
 
-function isWPPage(
-	params: QueryParams | QueryString.ParsedQs
-): params is QueryParams {
-	return ( params as QueryParams ).page !== undefined;
+function isWPPage( params: URLSearchParams ): boolean {
+	return params.get( 'page' ) !== null;
 }
 
 const EMBEDDED_BODY_COMPONENT_LIST: React.ElementType[] = [
@@ -44,10 +41,10 @@ export const EmbeddedBodyLayout = () => {
 		triggerExitPageCesSurvey();
 	}, [] );
 
-	const query = parse( location.search.substring( 1 ) );
+	const query = new URLSearchParams( location.search );
 	let queryParams: QueryParams = { page: '', tab: '' };
 	if ( isWPPage( query ) ) {
-		queryParams = query;
+		queryParams = Object.fromEntries( query ) as QueryParams;
 	}
 	/**
 	 * Filter an array of body components for WooCommerce non-react pages.

plugins/woocommerce-admin/client/guided-tours/add-product-tour/index.tsx

@@ -5,7 +5,6 @@ import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { TourKit, TourKitTypes } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
-import qs from 'qs';
 
 /**
  * Internal dependencies
@@ -294,7 +293,9 @@ export const ProductTour = () => {
 			recordEvent( 'walkthrough_product_enable_button_click' );
 		} );
 
-		const query = qs.parse( window.location.search.slice( 1 ) );
+		const query = Object.fromEntries(
+			new URLSearchParams( window.location.search )
+		);
 		if ( query && query.tutorial === 'true' ) {
 			const intervalId = waitUntilElementTopNotChange(
 				tourConfig.steps[ 0 ].referenceElements?.desktop || '',

plugins/woocommerce-admin/client/guided-tours/wc-addons-tour/index.tsx

@@ -6,7 +6,6 @@ import { TourKit, TourKitTypes } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useDispatch } from '@wordpress/data';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
-import qs from 'qs';
 
 /**
  * Internal dependencies
@@ -25,8 +24,8 @@ const WCAddonsTour = () => {
 	const defaultAutoScrollBlock: ScrollLogicalPosition = 'center';
 
 	useEffect( () => {
-		const query = qs.parse( window.location.search.slice( 1 ) );
-		if ( query?.tutorial === 'true' ) {
+		const query = new URLSearchParams( location.search );
+		if ( query.get( 'tutorial' ) === 'true' ) {
 			const intervalId = waitUntilElementTopNotChange(
 				steps[ 0 ].referenceElements?.desktop || '',
 				() => {

plugins/woocommerce-admin/client/layout/controller.js

@@ -3,7 +3,6 @@
  */
 import { Suspense, lazy } from '@wordpress/element';
 import { useRef, useEffect } from 'react';
-import { parse, stringify } from 'qs';
 import { find, isEqual, last, omit } from 'lodash';
 import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
@@ -424,18 +423,22 @@ export const Controller = ( { ...props } ) => {
  */
 export function updateLinkHref( item, nextQuery, excludedScreens ) {
 	if ( isWCAdmin( item.href ) ) {
+		// If we accept a full HTMLAnchorElement, then we should be able to use `.search`.
+		// const query = new URLSearchParams( item.search );
+		// but to remain backward compatible, we support any object with `href` property.
 		const search = last( item.href.split( '?' ) );
-		const query = parse( search );
-		const path = query.path || 'homescreen';
+		let query = new URLSearchParams( search );
+		const path = query.get( 'path' ) || 'homescreen';
 		const screen = getScreenFromPath( path );
 
-		const isExcludedScreen = excludedScreens.includes( screen );
+		if ( ! excludedScreens.includes( screen ) ) {
+			query = new URLSearchParams( {
+				...Object.fromEntries( query ),
+				...nextQuery,
+			} );
+		}
 
-		const href =
-			'admin.php?' +
-			stringify(
-				Object.assign( query, isExcludedScreen ? {} : nextQuery )
-			);
+		const href = 'admin.php?' + query.toString();
 
 		// Replace the href so you can see the url on hover.
 		item.href = href;

plugins/woocommerce-admin/client/layout/index.js

@@ -16,7 +16,6 @@ import {
 import { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { get, isFunction, identity, memoize } from 'lodash';
-import { parse } from 'qs';
 import {
 	CustomerEffortScoreModalContainer,
 	triggerExitPageCesSurvey,
@@ -186,15 +185,6 @@ class _Layout extends Component {
 		} );
 	}
 
-	getQuery( searchString ) {
-		if ( ! searchString ) {
-			return {};
-		}
-
-		const search = searchString.substring( 1 );
-		return parse( search );
-	}
-
 	isWCPaySettingsPage() {
 		const { page, section, tab } = getQuery();
 		return (
@@ -208,7 +198,9 @@ class _Layout extends Component {
 		const { isEmbedded, ...restProps } = this.props;
 		const { location, page } = this.props;
 		const { breadcrumbs } = page;
-		const query = this.getQuery( location && location.search );
+		const query = Object.fromEntries(
+			new URLSearchParams( location && location.search )
+		);
 
 		return (
 			<LayoutContextProvider

plugins/woocommerce-admin/client/tasks/fills/appearance.js

@@ -25,11 +25,13 @@ import { WooOnboardingTask } from '@woocommerce/onboarding';
 class Appearance extends Component {
 	constructor( props ) {
 		super( props );
-		const { hasHomepage, hasProducts } = props.task.additionalData;
+		const { hasHomepage, hasProducts, supportCustomLogo } =
+			props.task.additionalData;
 
 		this.stepVisibility = {
 			homepage: ! hasHomepage,
 			import: ! hasProducts,
+			logo: supportCustomLogo,
 		};
 
 		this.state = {
@@ -338,7 +340,7 @@ class Appearance extends Component {
 						</Button>
 					</Fragment>
 				),
-				visible: true,
+				visible: this.stepVisibility.logo,
 			},
 			{
 				key: 'notice',

plugins/woocommerce-admin/client/tasks/fills/steps/location.tsx

@@ -16,7 +16,7 @@ import {
 	getStoreAddressValidator,
 } from '../../../dashboard/components/settings/general/store-address';
 
-type FormValues = {
+export type FormValues = {
 	addressLine1: string;
 	addressLine2: string;
 	countryState: string;
@@ -50,6 +50,12 @@ type StoreLocationProps = {
 	settings?: {
 		[ key: string ]: string;
 	};
+	validate?: ( values: FormValues ) => { [ key: string ]: string };
+};
+
+export const defaultValidate = ( values: FormValues ) => {
+	const validator = getStoreAddressValidator();
+	return validator( values );
 };
 
 const StoreLocation = ( {
@@ -60,6 +66,7 @@ const StoreLocation = ( {
 	updateAndPersistSettingsForGroup,
 	settings,
 	buttonText = __( 'Continue', 'woocommerce' ),
+	validate = defaultValidate,
 }: StoreLocationProps ) => {
 	const { hasFinishedResolution } = useSelect( ( select ) => {
 		const countryStore = select( COUNTRIES_STORE_NAME );
@@ -107,11 +114,6 @@ const StoreLocation = ( {
 		};
 	};
 
-	const validate = ( values: FormValues ) => {
-		const validator = getStoreAddressValidator();
-		return validator( values );
-	};
-
 	if ( isSettingsRequesting || ! hasFinishedResolution ) {
 		return <Spinner />;
 	}

plugins/woocommerce-admin/client/tasks/fills/tax/components/store-location.tsx

@@ -5,13 +5,35 @@ import { SETTINGS_STORE_NAME } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
 import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { getCountryCode } from '~/dashboard/utils';
 import { hasCompleteAddress } from '../utils';
-import { default as StoreLocationForm } from '~/tasks/fills/steps/location';
+import {
+	default as StoreLocationForm,
+	FormValues,
+	defaultValidate,
+} from '~/tasks/fills/steps/location';
+
+const validateLocationForm = ( values: FormValues ) => {
+	const errors = defaultValidate( values );
+
+	if ( ! values.addressLine1.trim().length ) {
+		errors.addressLine1 = __( 'Please enter an address', 'woocommerce' );
+	}
+
+	if ( ! values.postCode.trim().length ) {
+		errors.postCode = __( 'Please enter a post code', 'woocommerce' );
+	}
+
+	if ( ! values.city.trim().length ) {
+		errors.city = __( 'Please enter a city', 'woocommerce' );
+	}
+	return errors;
+};
 
 export const StoreLocation: React.FC< {
 	nextStep: () => void;
@@ -44,7 +66,12 @@ export const StoreLocation: React.FC< {
 
 	return (
 		<StoreLocationForm
+			validate={ validateLocationForm }
 			onComplete={ ( values: { [ key: string ]: string } ) => {
+				if ( ! hasCompleteAddress( generalSettings || {} ) ) {
+					return;
+				}
+
 				const country = getCountryCode( values.countryState );
 				recordEvent( 'tasklist_tax_set_location', {
 					country,