Merge branch 'trunk' into 9110/product-listing-with-gallery

assets/js/atomic/blocks/product-elements/price/block.tsx

@@ -41,9 +41,11 @@ interface PriceProps {
 
 export const Block = ( props: Props ): JSX.Element | null => {
 	const { className, textAlign, isDescendentOfSingleProductTemplate } = props;
-	const { parentClassName } = useInnerBlockLayoutContext();
+	const { parentName, parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 
+	const isDescendentOfAllProductsBlock =
+		parentName === 'woocommerce/all-products';
 	const colorProps = useColorProps( props );
 	const spacingProps = useSpacingProps( props );
 	const typographyProps = useTypographyProps( props );
@@ -59,9 +61,17 @@ export const Block = ( props: Props ): JSX.Element | null => {
 	);
 
 	if ( ! product.id && ! isDescendentOfSingleProductTemplate ) {
-		return (
+		const productPriceComponent = (
 			<ProductPrice align={ textAlign } className={ wrapperClassName } />
 		);
+		if ( isDescendentOfAllProductsBlock ) {
+			return (
+				<div className="wp-block-woocommerce-product-price">
+					{ productPriceComponent }
+				</div>
+			);
+		}
+		return productPriceComponent;
 	}
 
 	const style = {
@@ -83,7 +93,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		[ `${ parentClassName }__product-price__value--on-sale` ]: isOnSale,
 	} );
 
-	return (
+	const productPriceComponent = (
 		<ProductPrice
 			align={ textAlign }
 			className={ wrapperClassName }
@@ -112,6 +122,14 @@ export const Block = ( props: Props ): JSX.Element | null => {
 			spacingStyle={ spacingStyle }
 		/>
 	);
+	if ( isDescendentOfAllProductsBlock ) {
+		return (
+			<div className="wp-block-woocommerce-product-price">
+				{ productPriceComponent }
+			</div>
+		);
+	}
+	return productPriceComponent;
 };
 
 export default ( props: Props ) => {

assets/js/atomic/blocks/product-elements/price/supports.ts

@@ -27,7 +27,8 @@ export const supports = {
 			__experimentalSkipSerialization: true,
 			__experimentalLetterSpacing: true,
 		},
-		__experimentalSelector: '.wc-block-components-product-price',
+		__experimentalSelector:
+			'.wp-block-woocommerce-product-price .wc-block-components-product-price',
 	} ),
 	...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
 		spacing: {

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

@@ -45,13 +45,15 @@ const Block = ( {
 		setShippingAddress,
 		setBillingAddress,
 		shippingAddress,
+		billingAddress,
 		setShippingPhone,
 		useShippingAsBilling,
 		setUseShippingAsBilling,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
 	const { isEditor } = useEditorContext();
 
+	const { email } = billingAddress;
 	// This is used to track whether the "Use shipping as billing" checkbox was checked on first load and if we synced
 	// the shipping address to the billing address if it was. This is not used on further toggles of the checkbox.
 	const [ addressesSynced, setAddressesSynced ] = useState( false );
@@ -65,20 +67,25 @@ const Block = ( {
 
 	// Run this on first render to ensure addresses sync if needed, there is no need to re-run this when toggling the
 	// checkbox.
-	useEffect( () => {
-		if ( addressesSynced ) {
-			return;
-		}
-		if ( useShippingAsBilling ) {
-			setBillingAddress( shippingAddress );
-		}
-		setAddressesSynced( true );
-	}, [
-		addressesSynced,
-		setBillingAddress,
-		shippingAddress,
-		useShippingAsBilling,
-	] );
+	useEffect(
+		() => {
+			if ( addressesSynced ) {
+				return;
+			}
+			if ( useShippingAsBilling ) {
+				setBillingAddress( { ...shippingAddress, email } );
+			}
+			setAddressesSynced( true );
+		},
+		// Skip the `email` dependency since we don't want to re-run if that changes, but we do want to sync it on first render.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[
+			addressesSynced,
+			setBillingAddress,
+			shippingAddress,
+			useShippingAsBilling,
+		]
+	);
 
 	const addressFieldsConfig = useMemo( () => {
 		return {
@@ -111,7 +118,7 @@ const Block = ( {
 					onChange={ ( values: Partial< ShippingAddress > ) => {
 						setShippingAddress( values );
 						if ( useShippingAsBilling ) {
-							setBillingAddress( values );
+							setBillingAddress( { ...values, email } );
 						}
 						dispatchCheckoutEvent( 'set-shipping-address' );
 					} }

assets/js/data/cart/test/notify-quantity-changes.ts

@@ -3,15 +3,17 @@
  */
 import { dispatch, select } from '@wordpress/data';
 import { previewCart } from '@woocommerce/resource-previews';
-import { klona } from 'klona/json';
-import { Cart, CartResponse } from '@woocommerce/types';
+import { Cart } from '@woocommerce/types';
 import { camelCaseKeys } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies
  */
 import { notifyQuantityChanges } from '../notify-quantity-changes';
 
+// Deep clone an object to avoid mutating it later.
+const cloneObject = ( obj ) => JSON.parse( JSON.stringify( obj ) );
+
 jest.mock( '@wordpress/data' );
 
 const mockedCreateInfoNotice = jest.fn();
@@ -35,12 +37,8 @@ select.mockImplementation( () => {
  * Clones the preview cart and turns it into a `Cart`.
  */
 const getFreshCarts = (): { oldCart: Cart; newCart: Cart } => {
-	const oldCart = camelCaseKeys(
-		klona< CartResponse >( previewCart )
-	) as Cart;
-	const newCart = camelCaseKeys(
-		klona< CartResponse >( previewCart )
-	) as Cart;
+	const oldCart = camelCaseKeys( cloneObject( previewCart ) ) as Cart;
+	const newCart = camelCaseKeys( cloneObject( previewCart ) ) as Cart;
 	return { oldCart, newCart };
 };
 

assets/js/data/utils/update-state.ts

@@ -1,33 +1,37 @@
 /**
- * External dependencies
+ * Utility for updating nested state in the path that changed.
  */
-import { klona } from 'klona/json';
+function updateNested< T >( // The state being updated
+	state: T,
+	// The path being updated
+	path: string[],
+	// The value to update for the path
+	value: unknown,
+	// The current index in the path
+	index = 0
+): T {
+	const key = path[ index ] as keyof T;
+	if ( index === path.length - 1 ) {
+		return { ...state, [ key ]: value };
+	}
+
+	const nextState = state[ key ] || {};
+	return {
+		...state,
+		[ key ]: updateNested( nextState, path, value, index + 1 ),
+	} as T;
+}
 
 /**
  * Utility for updating state and only cloning objects in the path that changed.
  */
-export default function updateState< Type extends Record< string, unknown > >(
+export default function updateState< T >(
 	// The state being updated
-	state: Type,
+	state: T,
 	// The path being updated
-	path: Array< keyof Type >,
+	path: string[],
 	// The value to update for the path
 	value: unknown
-): Type {
-	const newState = klona( state ) as Type;
-
-	let current: Record< string, unknown > = newState;
-	for ( let i = 0; i < path.length; i++ ) {
-		const key = path[ i ] as string;
-
-		if ( i === path.length - 1 ) {
-			current[ key ] = value;
-		} else {
-			current[ key ] = current[ key ] || {};
-		}
-
-		current = current[ key ] as Record< string, unknown >;
-	}
-
-	return newState;
+): T {
+	return updateNested( state, path, value );
 }