Merge branch 'trunk' into fix/animation-dialog

assets/js/blocks/checkout/address-wrapper/index.tsx

@@ -1,12 +1,17 @@
 /**
  * External dependencies
  */
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 
+/**
+ * Wrapper for address fields which handles the edit/preview transition. Form fields are always rendered so that
+ * validation can occur.
+ */
 export const AddressWrapper = ( {
 	isEditing = false,
 	addressCard,
@@ -16,25 +21,22 @@ export const AddressWrapper = ( {
 	addressCard: () => JSX.Element;
 	addressForm: () => JSX.Element;
 } ): JSX.Element | null => {
+	const wrapperClasses = classnames(
+		'wc-block-components-address-address-wrapper',
+		{
+			'is-editing': isEditing,
+		}
+	);
+
 	return (
-		<TransitionGroup className="address-fade-transition-wrapper">
-			{ ! isEditing && (
-				<CSSTransition
-					timeout={ 300 }
-					classNames="address-fade-transition"
-				>
-					{ addressCard() }
-				</CSSTransition>
-			) }
-			{ isEditing && (
-				<CSSTransition
-					timeout={ 300 }
-					classNames="address-fade-transition"
-				>
-					{ addressForm() }
-				</CSSTransition>
-			) }
-		</TransitionGroup>
+		<div className={ wrapperClasses }>
+			<div className="wc-block-components-address-card-wrapper">
+				{ addressCard() }
+			</div>
+			<div className="wc-block-components-address-form-wrapper">
+				{ addressForm() }
+			</div>
+		</div>
 	);
 };
 

assets/js/blocks/checkout/address-wrapper/style.scss

@@ -1,25 +1,32 @@
-.address-fade-transition-wrapper {
+.wc-block-components-address-address-wrapper {
 	position: relative;
-}
-.address-fade-transition-enter {
-	opacity: 0;
-}
-.address-fade-transition-enter-active {
-	opacity: 1;
-	transition: opacity 300ms ease-in;
-}
-.address-fade-transition-enter-done {
-	opacity: 1;
-}
-.address-fade-transition-exit {
-	opacity: 1;
-	position: absolute;
-	top: 0;
-}
-.address-fade-transition-exit-active {
-	opacity: 0;
-	transition: opacity 300ms ease-out;
-}
-.address-fade-transition-done {
-	opacity: 0;
+
+	.wc-block-components-address-card-wrapper,
+	.wc-block-components-address-form-wrapper {
+		transition: all 300ms ease-in-out;
+		width: 100%;
+	}
+
+	&.is-editing {
+		.wc-block-components-address-form-wrapper {
+			opacity: 1;
+		}
+		.wc-block-components-address-card-wrapper {
+			opacity: 0;
+			visibility: hidden;
+			position: absolute;
+			top: 0;
+		}
+	}
+
+	&:not(.is-editing) {
+		.wc-block-components-address-form-wrapper {
+			opacity: 0;
+			visibility: hidden;
+			height: 0;
+		}
+		.wc-block-components-address-card-wrapper {
+			opacity: 1;
+		}
+	}
 }

assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx

@@ -80,10 +80,6 @@ const Block = ( {
 	const noticeContext = useBillingAsShipping
 		? [ noticeContexts.BILLING_ADDRESS, noticeContexts.SHIPPING_ADDRESS ]
 		: [ noticeContexts.BILLING_ADDRESS ];
-	const hasAddress = !! (
-		billingAddress.address_1 &&
-		( billingAddress.first_name || billingAddress.last_name )
-	);
 
 	return (
 		<>
@@ -93,7 +89,6 @@ const Block = ( {
 					addressFieldsConfig={ addressFieldsConfig }
 					showPhoneField={ showPhoneField }
 					requirePhoneField={ requirePhoneField }
-					hasAddress={ hasAddress }
 					forceEditing={ forceEditing }
 				/>
 			</WrapperComponent>

assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx

@@ -1,14 +1,16 @@
 /**
  * External dependencies
  */
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useEffect } from '@wordpress/element';
 import { AddressForm } from '@woocommerce/base-components/cart-checkout';
 import { useCheckoutAddress, useStoreEvents } from '@woocommerce/base-context';
 import type {
 	BillingAddress,
 	AddressField,
 	AddressFields,
 } from '@woocommerce/settings';
+import { useSelect } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -21,13 +23,11 @@ const CustomerAddress = ( {
 	addressFieldsConfig,
 	showPhoneField,
 	requirePhoneField,
-	hasAddress,
 	forceEditing = false,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
 	showPhoneField: boolean;
 	requirePhoneField: boolean;
-	hasAddress: boolean;
 	forceEditing?: boolean;
 } ) => {
 	const {
@@ -40,8 +40,34 @@ const CustomerAddress = ( {
 		useBillingAsShipping,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
-
+	const hasAddress = !! (
+		billingAddress.address_1 &&
+		( billingAddress.first_name || billingAddress.last_name )
+	);
 	const [ editing, setEditing ] = useState( ! hasAddress || forceEditing );
+
+	// Forces editing state if store has errors.
+	const { hasValidationErrors, invalidProps } = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return {
+			hasValidationErrors: store.hasValidationErrors(),
+			invalidProps: Object.keys( billingAddress )
+				.filter( ( key ) => {
+					return (
+						store.getValidationError( 'billing_' + key ) !==
+						undefined
+					);
+				} )
+				.filter( Boolean ),
+		};
+	} );
+
+	useEffect( () => {
+		if ( invalidProps.length > 0 && editing === false ) {
+			setEditing( true );
+		}
+	}, [ editing, hasValidationErrors, invalidProps.length ] );
+
 	const addressFieldKeys = Object.keys(
 		defaultAddressFields
 	) as ( keyof AddressFields )[];

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -104,7 +104,6 @@ const Block = ( {
 					addressFieldsConfig={ addressFieldsConfig }
 					showPhoneField={ showPhoneField }
 					requirePhoneField={ requirePhoneField }
-					hasAddress={ hasAddress }
 				/>
 			</WrapperComponent>
 			{ hasAddress && (

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx

@@ -1,14 +1,16 @@
 /**
  * External dependencies
  */
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useEffect } from '@wordpress/element';
 import { AddressForm } from '@woocommerce/base-components/cart-checkout';
 import { useCheckoutAddress, useStoreEvents } from '@woocommerce/base-context';
 import type {
 	ShippingAddress,
 	AddressField,
 	AddressFields,
 } from '@woocommerce/settings';
+import { useSelect } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -21,12 +23,10 @@ const CustomerAddress = ( {
 	addressFieldsConfig,
 	showPhoneField,
 	requirePhoneField,
-	hasAddress,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
 	showPhoneField: boolean;
 	requirePhoneField: boolean;
-	hasAddress: boolean;
 } ) => {
 	const {
 		defaultAddressFields,
@@ -37,8 +37,34 @@ const CustomerAddress = ( {
 		useShippingAsBilling,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
-
+	const hasAddress = !! (
+		shippingAddress.address_1 &&
+		( shippingAddress.first_name || shippingAddress.last_name )
+	);
 	const [ editing, setEditing ] = useState( ! hasAddress );
+
+	// Forces editing state if store has errors.
+	const { hasValidationErrors, invalidProps } = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return {
+			hasValidationErrors: store.hasValidationErrors(),
+			invalidProps: Object.keys( shippingAddress )
+				.filter( ( key ) => {
+					return (
+						store.getValidationError( 'shipping_' + key ) !==
+						undefined
+					);
+				} )
+				.filter( Boolean ),
+		};
+	} );
+
+	useEffect( () => {
+		if ( invalidProps.length > 0 && editing === false ) {
+			setEditing( true );
+		}
+	}, [ editing, hasValidationErrors, invalidProps.length ] );
+
 	const addressFieldKeys = Object.keys(
 		defaultAddressFields
 	) as ( keyof AddressFields )[];

assets/js/blocks/migration-products-to-product-collection/migration-from-product-collection-to-products.ts

@@ -17,11 +17,13 @@ import {
 import type {
 	TransformBlock,
 	IsBlockType,
-	ProductGridLayout,
-	ProductGridLayoutTypes,
 	PostTemplateLayout,
 	PostTemplateLayoutTypes,
 } from './types';
+import {
+	LayoutOptions,
+	ProductCollectionDisplayLayout,
+} from '../product-collection/types';
 
 const VARIATION_NAME = 'woocommerce/product-query';
 
@@ -77,9 +79,7 @@ const isPostSummary: IsBlockType = ( { name, attributes } ) =>
 	attributes.__woocommerceNamespace ===
 		'woocommerce/product-collection/product-summary';
 
-const mapLayoutType = (
-	type: ProductGridLayoutTypes
-): PostTemplateLayoutTypes => {
+const mapLayoutType = ( type: LayoutOptions ): PostTemplateLayoutTypes => {
 	if ( type === 'flex' ) {
 		return 'grid';
 	}
@@ -90,7 +90,7 @@ const mapLayoutType = (
 };
 
 const mapLayoutPropertiesFromProductCollectionToPostTemplate = (
-	layout: ProductGridLayout
+	layout: ProductCollectionDisplayLayout
 ): PostTemplateLayout => {
 	const { type, columns } = layout;
 
@@ -103,15 +103,15 @@ const mapLayoutPropertiesFromProductCollectionToPostTemplate = (
 const transformProductTemplate: TransformBlock = (
 	block,
 	innerBlocks,
-	displayLayout?: ProductGridLayout
+	displayLayout?: ProductCollectionDisplayLayout
 ) => {
 	return createBlock(
 		'core/post-template',
 		{
 			className: 'products-block-post-template',
 			layout: postTemplateHasSupportForGridView
 				? mapLayoutPropertiesFromProductCollectionToPostTemplate(
-						displayLayout as ProductGridLayout
+						displayLayout as ProductCollectionDisplayLayout
 				  )
 				: undefined,
 			__woocommerceNamespace:
@@ -150,7 +150,7 @@ const transformPostSummary: TransformBlock = ( block, innerBlocks ) => {
 
 const mapInnerBlocks = (
 	innerBlocks: BlockInstance[],
-	displayLayout?: ProductGridLayout
+	displayLayout?: ProductCollectionDisplayLayout
 ): BlockInstance[] => {
 	const mappedInnerBlocks = innerBlocks.map( ( innerBlock ) => {
 		const { name, attributes } = innerBlock;

assets/js/blocks/migration-products-to-product-collection/migration-from-products-to-product-collection.ts

@@ -22,11 +22,14 @@ import {
 import type {
 	TransformBlock,
 	IsBlockType,
-	ProductGridLayout,
-	ProductGridLayoutTypes,
 	PostTemplateLayout,
 	PostTemplateLayoutTypes,
 } from './types';
+import { DEFAULT_ATTRIBUTES } from '../product-collection/constants';
+import {
+	LayoutOptions,
+	ProductCollectionDisplayLayout,
+} from '../product-collection/types';
 
 const mapAttributes = ( attributes: Record< string, unknown > ) => {
 	const { query, namespace, ...restAttributes } = attributes;
@@ -106,21 +109,23 @@ const transformPostSummary: TransformBlock = ( block, innerBlocks ) => {
 	);
 };
 
-const mapLayoutType = (
-	type: PostTemplateLayoutTypes
-): ProductGridLayoutTypes => {
+const mapLayoutType = ( type: PostTemplateLayoutTypes ): LayoutOptions => {
 	if ( type === 'grid' ) {
-		return 'flex';
+		return LayoutOptions.GRID;
 	}
 	if ( type === 'default' ) {
-		return 'list';
+		return LayoutOptions.STACK;
 	}
-	return 'flex';
+	return LayoutOptions.GRID;
 };
 
 const mapLayoutPropertiesFromPostTemplateToProductCollection = (
 	layout: PostTemplateLayout
-): ProductGridLayout => {
+): ProductCollectionDisplayLayout => {
+	if ( layout === undefined ) {
+		return DEFAULT_ATTRIBUTES.displayLayout as ProductCollectionDisplayLayout;
+	}
+
 	const { type, columnCount } = layout;
 
 	return {
@@ -132,7 +137,7 @@ const mapLayoutPropertiesFromPostTemplateToProductCollection = (
 const getLayoutAttribute = (
 	attributes,
 	innerBlocks: BlockInstance[]
-): ProductGridLayout => {
+): ProductCollectionDisplayLayout => {
 	// Starting from GB 16, it's not Query Loop that keeps the layout, but the Post Template block.
 	// We need to account for that and in that case, move the layout properties
 	// from Post Template to Product Collection.