Merge branch 'trunk' into merge/#8025-local-pickup-country-state-into…

…-same-field

assets/js/atomic/blocks/index.js

@@ -13,3 +13,4 @@ import './product-elements/category-list';
 import './product-elements/tag-list';
 import './product-elements/stock-indicator';
 import './product-elements/add-to-cart';
+import './product-elements/product-image-gallery';

assets/js/atomic/blocks/product-elements/product-image-gallery/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/product-image-gallery",
+	"version": "1.0.0",
+	"title": "Product Image Gallery",
+	"icon": "gallery",
+	"description": "Display a product's images.",
+	"category": "woocommerce",
+	"supports": {
+		"align": true,
+		"reusable": false
+	},
+	"keywords": [ "WooCommerce" ],
+	"usesContext": [ "postId", "postType", "queryId" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
+import { isEmptyObject } from '@woocommerce/types';
+import { useBlockProps } from '@wordpress/block-editor';
+import { BlockAttributes } from '@wordpress/blocks';
+import { Disabled } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const Placeholder = () => {
+	return (
+		<div className="wc-block-editor-product-gallery">
+			<img
+				src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
+				alt="Placeholder"
+			/>
+			<div className="wc-block-editor-product-gallery__other-images">
+				{ [ ...Array( 4 ).keys() ].map( ( index ) => {
+					return (
+						<img
+							key={ index }
+							src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
+							alt="Placeholder"
+						/>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+};
+
+type Context = {
+	postId: string;
+	postType: string;
+	queryId: string;
+};
+
+interface Props {
+	attributes: BlockAttributes;
+	context: Context;
+}
+
+const Edit = ( { context }: Props ) => {
+	const blockProps = useBlockProps();
+
+	if ( isEmptyObject( context ) ) {
+		return (
+			<div { ...blockProps }>
+				<Disabled>
+					<Placeholder />
+				</Disabled>
+			</div>
+		);
+	}
+	// We have work on this case when we will work on the Single Product block.
+	return '';
+};
+
+export default Edit;

assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss

@@ -0,0 +1,13 @@
+.wc-block-editor-product-gallery {
+	img {
+		width: 500px;
+		height: 500px;
+	}
+	.wc-block-editor-product-gallery__other-images {
+		img {
+			width: 100px;
+			height: 100px;
+			margin: 5px;
+		}
+	}
+}

assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { gallery as icon } from '@wordpress/icons';
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+
+registerBlockSingleProductTemplate( {
+	registerBlockFn: () => {
+		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
+		registerBlockType( metadata, {
+			icon,
+			edit,
+		} );
+	},
+	unregisterBlockFn: () => {
+		unregisterBlockType( metadata.name );
+	},
+	blockName: metadata.name,
+} );

assets/js/atomic/utils/index.js

@@ -2,3 +2,4 @@ export * from './get-block-map';
 export * from './create-blocks-from-template';
 export * from './render-parent-block';
 export * from './render-standalone-blocks';
+export * from './register-block-single-product-template';

assets/js/atomic/utils/register-block-single-product-template.ts

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { subscribe, select } from '@wordpress/data';
+
+export const registerBlockSingleProductTemplate = ( {
+	registerBlockFn,
+	unregisterBlockFn,
+	blockName,
+}: {
+	registerBlockFn: () => void;
+	unregisterBlockFn: () => void;
+	blockName: string;
+} ) => {
+	let currentTemplateId: string | undefined;
+
+	subscribe( () => {
+		const previousTemplateId = currentTemplateId;
+		const store = select( 'core/edit-site' );
+		currentTemplateId = store?.getEditedPostId() as string | undefined;
+
+		if ( previousTemplateId === currentTemplateId ) {
+			return;
+		}
+
+		const parsedTemplate = currentTemplateId?.split( '//' )[ 1 ];
+
+		if ( parsedTemplate === null || parsedTemplate === undefined ) {
+			return;
+		}
+
+		const block = getBlockType( blockName );
+
+		if (
+			block === undefined &&
+			parsedTemplate.includes( 'single-product' )
+		) {
+			registerBlockFn();
+		}
+
+		if ( block !== undefined ) {
+			unregisterBlockFn();
+		}
+	}, 'core/edit-site' );
+};

assets/js/base/components/cart-checkout/address-form/address-form.tsx

@@ -22,10 +22,8 @@ import {
 	ShippingAddress,
 } from '@woocommerce/settings';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	VALIDATION_STORE_KEY,
-	FieldValidationStatus,
-} from '@woocommerce/block-data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { FieldValidationStatus } from '@woocommerce/types';
 
 /**
  * Internal dependencies

assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx

@@ -10,10 +10,7 @@ import {
 	getCurrencyFromPriceResponse,
 	formatPrice,
 } from '@woocommerce/price-format';
-import {
-	__experimentalApplyCheckoutFilter,
-	mustContain,
-} from '@woocommerce/blocks-checkout';
+import { applyCheckoutFilter, mustContain } from '@woocommerce/blocks-checkout';
 import Dinero from 'dinero.js';
 import { getSetting } from '@woocommerce/settings';
 import { useMemo } from '@wordpress/element';
@@ -52,7 +49,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => {
 		extensions,
 	} = cartItem;
 
-	// Prepare props to pass to the __experimentalApplyCheckoutFilter filter.
+	// Prepare props to pass to the applyCheckoutFilter filter.
 	// We need to pluck out receiveCart.
 	// eslint-disable-next-line no-unused-vars
 	const { receiveCart, ...cart } = useStoreCart();
@@ -68,7 +65,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => {
 
 	const priceCurrency = getCurrencyFromPriceResponse( prices );
 
-	const name = __experimentalApplyCheckoutFilter( {
+	const name = applyCheckoutFilter( {
 		filterName: 'itemName',
 		defaultValue: initialName,
 		extensions,
@@ -101,7 +98,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => {
 		amount: lineSubtotal,
 		precision: totalsCurrency.minorUnit,
 	} ).getAmount();
-	const subtotalPriceFormat = __experimentalApplyCheckoutFilter( {
+	const subtotalPriceFormat = applyCheckoutFilter( {
 		filterName: 'subtotalPriceFormat',
 		defaultValue: '<price/>',
 		extensions,
@@ -110,15 +107,15 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => {
 	} );
 
 	// Allow extensions to filter how the price is displayed. Ie: prepending or appending some values.
-	const productPriceFormat = __experimentalApplyCheckoutFilter( {
+	const productPriceFormat = applyCheckoutFilter( {
 		filterName: 'cartItemPrice',
 		defaultValue: '<price/>',
 		extensions,
 		arg,
 		validation: productPriceValidation,
 	} );
 
-	const cartItemClassNameFilter = __experimentalApplyCheckoutFilter( {
+	const cartItemClassNameFilter = applyCheckoutFilter( {
 		filterName: 'cartItemClass',
 		defaultValue: '',
 		extensions,

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

@@ -30,10 +30,9 @@ const ShippingCalculator = ( {
 	addressFields = [ 'country', 'state', 'city', 'postcode' ],
 }: ShippingCalculatorProps ): JSX.Element => {
 	const { shippingAddress } = useCustomerData();
-	const noticeContext = 'wc/cart/shipping-calculator';
 	return (
 		<div className="wc-block-components-shipping-calculator">
-			<StoreNoticesContainer context={ noticeContext } />
+			<StoreNoticesContainer context={ 'wc/cart/shipping-calculator' } />
 			<ShippingCalculatorAddress
 				address={ shippingAddress }
 				addressFields={ addressFields }

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

@@ -92,15 +92,12 @@ export const TotalsCoupon = ( {
 					href="#wc-block-components-totals-coupon__form"
 					className="wc-block-components-totals-coupon-link"
 					aria-label={ __(
-						'Apply a coupon code',
+						'Add a coupon',
 						'woo-gutenberg-products-block'
 					) }
 					onClick={ handleCouponAnchorClick }
 				>
-					{ __(
-						'Apply a coupon code',
-						'woo-gutenberg-products-block'
-					) }
+					{ __( 'Add a coupon', 'woo-gutenberg-products-block' ) }
 				</a>
 			) }
 			<LoadingMask

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

@@ -4,10 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
 import { RemovableChip } from '@woocommerce/base-components/chip';
-import {
-	__experimentalApplyCheckoutFilter,
-	TotalsItem,
-} from '@woocommerce/blocks-checkout';
+import { applyCheckoutFilter, TotalsItem } from '@woocommerce/blocks-checkout';
 import { getSetting } from '@woocommerce/settings';
 import {
 	CartResponseCouponItemWithLabel,
@@ -64,7 +61,7 @@ const TotalsDiscount = ( {
 		? discountValue + discountTaxValue
 		: discountValue;
 
-	const filteredCartCoupons = __experimentalApplyCheckoutFilter( {
+	const filteredCartCoupons = applyCheckoutFilter( {
 		arg: filteredCartCouponsFilterArg,
 		filterName: 'coupons',
 		defaultValue: cartCoupons,

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

@@ -5,10 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import classNames from 'classnames';
 import { createInterpolateElement } from '@wordpress/element';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
-import {
-	__experimentalApplyCheckoutFilter,
-	TotalsItem,
-} from '@woocommerce/blocks-checkout';
+import { applyCheckoutFilter, TotalsItem } from '@woocommerce/blocks-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import {
@@ -60,11 +57,11 @@ const TotalsFooterItem = ( {
 		tax_lines: taxLines,
 	} = values;
 
-	// Prepare props to pass to the __experimentalApplyCheckoutFilter filter.
+	// Prepare props to pass to the applyCheckoutFilter filter.
 	// We need to pluck out receiveCart.
 	// eslint-disable-next-line no-unused-vars
 	const { receiveCart, ...cart } = useStoreCart();
-	const label = __experimentalApplyCheckoutFilter( {
+	const label = applyCheckoutFilter( {
 		filterName: 'totalLabel',
 		defaultValue: __( 'Total', 'woo-gutenberg-products-block' ),
 		extensions: cart.extensions,

assets/js/base/context/event-emit/emitters.ts

@@ -5,8 +5,11 @@ import {
 	getObserversByPriority,
 	isErrorResponse,
 	isFailResponse,
+	ObserverResponse,
+	responseTypes,
 } from './utils';
 import type { EventObserversType } from './types';
+import { isObserverResponse } from '../../../types/type-guards/observers';
 
 /**
  * Emits events on registered observers for the provided type and passes along
@@ -64,13 +67,13 @@ export const emitEventWithAbort = async (
 	observers: EventObserversType,
 	eventType: string,
 	data: unknown
-): Promise< Array< unknown > > => {
-	const observerResponses = [];
+): Promise< ObserverResponse[] > => {
+	const observerResponses: ObserverResponse[] = [];
 	const observersByType = getObserversByPriority( observers, eventType );
 	for ( const observer of observersByType ) {
 		try {
 			const response = await Promise.resolve( observer.callback( data ) );
-			if ( typeof response !== 'object' || response === null ) {
+			if ( ! isObserverResponse( response ) ) {
 				continue;
 			}
 			if ( ! response.hasOwnProperty( 'type' ) ) {
@@ -90,7 +93,7 @@ export const emitEventWithAbort = async (
 			// We don't handle thrown errors but just console.log for troubleshooting.
 			// eslint-disable-next-line no-console
 			console.error( e );
-			observerResponses.push( { type: 'error' } );
+			observerResponses.push( { type: responseTypes.ERROR } );
 			return observerResponses;
 		}
 	}