Merge branch 'trunk' into fix/7921-product-query-product-search-resul…

…t-preview

README.md

@@ -62,7 +62,7 @@ The source code is in the `assets/` folder and the compiled code is built into `
 
 ## Getting started with block development
 
-Run through the ["Writing Your First Block Type" tutorial](https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/) for a quick course in block-building.
+Run through the ["Writing Your First Block Type" tutorial](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/) for a quick course in block-building.
 
 For deeper dive, try looking at the [core blocks code,](https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src) or see what [components are available.](https://github.com/WordPress/gutenberg/tree/master/packages/components/src)
 
@@ -73,6 +73,7 @@ Other useful docs to explore:
 -   [`InnerBlocks`](https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md)
 -   [`apiFetch`](https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/packages-api-fetch/)
 -   [`@wordpress/editor`](https://github.com/WordPress/gutenberg/blob/master/packages/editor/README.md)
+-   [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/)
 
 ## Long-term vision
 

assets/js/base/components/cart-checkout/shipping-calculator/address.tsx

@@ -6,7 +6,7 @@ import Button from '@woocommerce/base-components/button';
 import { useState } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import type { ShippingAddress, AddressFields } from '@woocommerce/settings';
-import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { VALIDATION_STORE_KEY, CART_STORE_KEY } from '@woocommerce/block-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -18,22 +18,28 @@ import { AddressForm } from '../address-form';
 interface ShippingCalculatorAddressProps {
 	address: ShippingAddress;
 	onUpdate: ( address: ShippingAddress ) => void;
+	onCancel: () => void;
 	addressFields: Partial< keyof AddressFields >[];
 }
 const ShippingCalculatorAddress = ( {
 	address: initialAddress,
 	onUpdate,
+	onCancel,
 	addressFields,
 }: ShippingCalculatorAddressProps ): JSX.Element => {
 	const [ address, setAddress ] = useState( initialAddress );
 	const { showAllValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
 
-	const { hasValidationErrors } = useSelect( ( select ) => {
-		const store = select( VALIDATION_STORE_KEY );
-		return {
-			hasValidationErrors: store.hasValidationErrors,
-		};
-	} );
+	const { hasValidationErrors, isCustomerDataUpdating } = useSelect(
+		( select ) => {
+			return {
+				hasValidationErrors:
+					select( VALIDATION_STORE_KEY ).hasValidationErrors,
+				isCustomerDataUpdating:
+					select( CART_STORE_KEY ).isCustomerDataUpdating(),
+			};
+		}
+	);
 
 	const validateSubmit = () => {
 		showAllValidationErrors();
@@ -49,10 +55,20 @@ const ShippingCalculatorAddress = ( {
 			/>
 			<Button
 				className="wc-block-components-shipping-calculator-address__button"
-				disabled={ isShallowEqual( address, initialAddress ) }
+				disabled={ isCustomerDataUpdating }
 				onClick={ ( e ) => {
 					e.preventDefault();
+					const addressChanged = ! isShallowEqual(
+						address,
+						initialAddress
+					);
+
+					if ( ! addressChanged ) {
+						return onCancel();
+					}
+
 					const isAddressValid = validateSubmit();
+
 					if ( isAddressValid ) {
 						return onUpdate( address );
 					}

assets/js/base/components/cart-checkout/shipping-calculator/index.tsx

@@ -3,6 +3,10 @@
  */
 import type { ShippingAddress } from '@woocommerce/settings';
 import { useCustomerData } from '@woocommerce/base-context/hooks';
+import { dispatch } from '@wordpress/data';
+import { CART_STORE_KEY, processErrorResponse } from '@woocommerce/block-data';
+import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+import { removeNoticesWithContext } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies
@@ -12,26 +16,44 @@ import './style.scss';
 
 interface ShippingCalculatorProps {
 	onUpdate?: ( newAddress: ShippingAddress ) => void;
+	onCancel?: () => void;
 	addressFields?: Partial< keyof ShippingAddress >[];
 }
 
 const ShippingCalculator = ( {
 	onUpdate = () => {
 		/* Do nothing */
 	},
+	onCancel = () => {
+		/* Do nothing */
+	},
 	addressFields = [ 'country', 'state', 'city', 'postcode' ],
 }: ShippingCalculatorProps ): JSX.Element => {
-	const { shippingAddress, setShippingAddress, setBillingAddress } =
-		useCustomerData();
+	const { shippingAddress } = useCustomerData();
+	const noticeContext = 'wc/cart/shipping-calculator';
 	return (
 		<div className="wc-block-components-shipping-calculator">
+			<StoreNoticesContainer context={ noticeContext } />
 			<ShippingCalculatorAddress
 				address={ shippingAddress }
 				addressFields={ addressFields }
+				onCancel={ onCancel }
 				onUpdate={ ( newAddress ) => {
-					setShippingAddress( newAddress );
-					setBillingAddress( newAddress );
-					onUpdate( newAddress );
+					// Updates the address and waits for the result.
+					dispatch( CART_STORE_KEY )
+						.updateCustomerData(
+							{
+								shipping_address: newAddress,
+							},
+							false
+						)
+						.then( () => {
+							removeNoticesWithContext( noticeContext );
+							onUpdate( newAddress );
+						} )
+						.catch( ( response ) => {
+							processErrorResponse( response, noticeContext );
+						} );
 				} }
 			/>
 		</div>

assets/js/base/components/cart-checkout/totals/shipping/index.tsx

@@ -57,6 +57,8 @@ export const TotalsShipping = ( {
 	} );
 	const totalShippingValue = getTotalShippingValue( values );
 	const hasRates = hasShippingRate( shippingRates ) || totalShippingValue > 0;
+	const showShippingCalculatorForm =
+		showCalculator && isShippingCalculatorOpen;
 	const selectedShippingRates = shippingRates.flatMap(
 		( shippingPackage ) => {
 			return shippingPackage.shipping_rates
@@ -113,20 +115,25 @@ export const TotalsShipping = ( {
 				}
 				currency={ currency }
 			/>
-			{ showCalculator && isShippingCalculatorOpen && (
+			{ showShippingCalculatorForm && (
 				<ShippingCalculator
 					onUpdate={ () => {
 						setIsShippingCalculatorOpen( false );
 					} }
+					onCancel={ () => {
+						setIsShippingCalculatorOpen( false );
+					} }
 				/>
 			) }
-			{ showRateSelector && cartHasCalculatedShipping && (
-				<ShippingRateSelector
-					hasRates={ hasRates }
-					shippingRates={ shippingRates }
-					isLoadingRates={ isLoadingRates }
-				/>
-			) }
+			{ showRateSelector &&
+				cartHasCalculatedShipping &&
+				! showShippingCalculatorForm && (
+					<ShippingRateSelector
+						hasRates={ hasRates }
+						shippingRates={ shippingRates }
+						isLoadingRates={ isLoadingRates }
+					/>
+				) }
 		</div>
 	);
 };

assets/js/base/utils/create-notice.ts

@@ -92,3 +92,12 @@ export const removeAllNotices = () => {
 		} );
 	} );
 };
+
+export const removeNoticesWithContext = ( context: string ) => {
+	const { removeNotice } = dispatch( 'core/notices' );
+	const { getNotices } = select( 'core/notices' );
+
+	getNotices( context ).forEach( ( notice ) => {
+		removeNotice( notice.id, context );
+	} );
+};

assets/js/blocks/store-notices/block.json

@@ -0,0 +1,14 @@
+{
+	"name": "woocommerce/store-notices",
+	"version": "1.0.0",
+	"title": "Store Notices",
+	"description": "Display shopper-facing notifications generated by WooCommerce or extensions.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"multiple": false
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/store-notices/edit.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Notice } from '@wordpress/components';
+
+const Edit = (): JSX.Element => {
+	const blockProps = useBlockProps( {
+		className: 'wc-block-store-notices',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<Notice status="info" isDismissible={ false }>
+				{ __(
+					'Notices added by WooCommerce or extensions will show up here.',
+					'woo-gutenberg-products-block'
+				) }
+			</Notice>
+		</div>
+	);
+};
+
+export default Edit;

assets/js/blocks/store-notices/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { Icon } from '@wordpress/icons';
+import { totals } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ totals }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes: {
+		...metadata.attributes,
+	},
+	edit,
+	save() {
+		return null;
+	},
+} );

assets/js/data/cart/actions.ts

@@ -465,14 +465,15 @@ export const setShippingAddress = (
 ) => ( { type: types.SET_SHIPPING_ADDRESS, shippingAddress } as const );
 
 /**
- * Updates the shipping and/or billing address for the customer and returns an
- * updated cart.
- *
- * @param {BillingAddressShippingAddress} customerData Address data to be updated; can contain both
- *                                                     billing_address and shipping_address.
+ * Updates the shipping and/or billing address for the customer and returns an updated cart.
  */
 export const updateCustomerData =
-	( customerData: Partial< BillingAddressShippingAddress > ) =>
+	(
+		// Address data to be updated; can contain both billing_address and shipping_address.
+		customerData: Partial< BillingAddressShippingAddress >,
+		// If the address is being edited, we don't update the customer data in the store from the response.
+		editing = true
+	) =>
 	async ( { dispatch }: { dispatch: CartDispatchFromMap } ) => {
 		dispatch.updatingCustomerData( true );
 
@@ -483,22 +484,24 @@ export const updateCustomerData =
 				data: customerData,
 				cache: 'no-store',
 			} );
-
-			dispatch.receiveCartContents( response );
+			if ( editing ) {
+				dispatch.receiveCartContents( response );
+			} else {
+				dispatch.receiveCart( response );
+			}
+			dispatch.updatingCustomerData( false );
 		} catch ( error ) {
 			dispatch.receiveError( error );
+			dispatch.updatingCustomerData( false );
 
 			// If updated cart state was returned, also update that.
 			if ( error.data?.cart ) {
 				dispatch.receiveCart( error.data.cart );
 			}
 
-			// rethrow error.
-			throw error;
-		} finally {
-			dispatch.updatingCustomerData( false );
+			return Promise.reject( error );
 		}
-		return true;
+		return Promise.resolve( true );
 	};
 
 export type CartAction = ReturnOrGeneratorYieldUnion<

assets/js/data/utils/index.js

@@ -1,3 +1,3 @@
 export { default as hasInState } from './has-in-state';
 export { default as updateState } from './update-state';
-export { default as processErrorResponse } from './process-error-response';
+export * from './process-error-response';