New contexts for StoreNoticesContainer and notice grouping

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

@@ -26,8 +26,15 @@ export enum responseTypes {
 }
 
 export enum noticeContexts {
-	PAYMENTS = 'wc/payment-area',
-	EXPRESS_PAYMENTS = 'wc/express-payment-area',
+	CART = 'wc/cart',
+	CHECKOUT = 'wc/checkout',
+	PAYMENTS = 'wc/checkout/payments',
+	EXPRESS_PAYMENTS = 'wc/checkout/express-payments',
+	CONTACT_INFORMATION = 'wc/checkout/contact-information',
+	SHIPPING_ADDRESS = 'wc/checkout/shipping-address',
+	BILLING_ADDRESS = 'wc/checkout/billing-address',
+	SHIPPING_METHODS = 'wc/checkout/shipping-methods',
+	CHECKOUT_ACTIONS = 'wc/checkout/checkout-actions',
 }
 
 export interface ResponseType extends Record< string, unknown > {

assets/js/base/context/hooks/cart/use-store-cart-coupons.ts

@@ -3,12 +3,10 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	CART_STORE_KEY as storeKey,
-	VALIDATION_STORE_KEY,
-} from '@woocommerce/block-data';
+import { CART_STORE_KEY, VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import type { StoreCartCoupon } from '@woocommerce/types';
+import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
@@ -19,9 +17,6 @@ import { useStoreCart } from './use-store-cart';
  * This is a custom hook for loading the Store API /cart/coupons endpoint and an
  * action for adding a coupon _to_ the cart.
  * See also: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/src/RestApi/StoreApi
- *
- * @return {StoreCartCoupon} An object exposing data and actions from/for the
- * store api /cart/coupons endpoint.
  */
 export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	const { cartCoupons, cartIsLoading } = useStoreCart();
@@ -35,7 +30,7 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	}: Pick< StoreCartCoupon, 'isApplyingCoupon' | 'isRemovingCoupon' > =
 		useSelect(
 			( select ) => {
-				const store = select( storeKey );
+				const store = select( CART_STORE_KEY );
 
 				return {
 					isApplyingCoupon: store.isApplyingCoupon(),
@@ -46,12 +41,19 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 		);
 
 	const { applyCoupon, removeCoupon, receiveApplyingCoupon } =
-		useDispatch( storeKey );
+		useDispatch( CART_STORE_KEY );
 
 	const applyCouponWithNotices = ( couponCode: string ) => {
 		applyCoupon( couponCode )
 			.then( ( result ) => {
-				if ( result === true ) {
+				if (
+					result === true &&
+					__experimentalApplyCheckoutFilter( {
+						filterName: 'showApplyCouponNotice',
+						defaultValue: true,
+						arg: { couponCode, context },
+					} )
+				) {
 					createNotice(
 						'info',
 						sprintf(
@@ -85,7 +87,14 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	const removeCouponWithNotices = ( couponCode: string ) => {
 		removeCoupon( couponCode )
 			.then( ( result ) => {
-				if ( result === true ) {
+				if (
+					result === true &&
+					__experimentalApplyCheckoutFilter( {
+						filterName: 'showRemoveCouponNotice',
+						defaultValue: true,
+						arg: { couponCode, context },
+					} )
+				) {
 					createNotice(
 						'info',
 						sprintf(

assets/js/base/context/hooks/index.js

@@ -8,7 +8,6 @@ export * from './use-store-products';
 export * from './use-store-add-to-cart';
 export * from './use-customer-data';
 export * from './use-checkout-address';
-export * from './use-checkout-notices';
 export * from './use-checkout-submit';
 export * from './use-checkout-extension-data';
 export * from './use-validation';

assets/js/base/context/providers/cart-checkout/checkout-events/index.tsx

@@ -24,9 +24,8 @@ import {
  * Internal dependencies
  */
 import { useEventEmitters, reducer as emitReducer } from './event-emit';
-import type { emitterCallback } from '../../../event-emit';
+import { emitterCallback, noticeContexts } from '../../../event-emit';
 import { useStoreEvents } from '../../../hooks/use-store-events';
-import { useCheckoutNotices } from '../../../hooks/use-checkout-notices';
 import {
 	getExpressPaymentMethods,
 	getPaymentMethods,
@@ -134,11 +133,29 @@ export const CheckoutEventsProvider = ( {
 	}
 
 	const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
-	const { createErrorNotice } = useDispatch( 'core/notices' );
-
 	const { dispatchCheckoutEvent } = useStoreEvents();
 	const { checkoutNotices, paymentNotices, expressPaymentNotices } =
-		useCheckoutNotices();
+		useSelect( ( select ) => {
+			const { getNotices } = select( 'core/notices' );
+			const checkoutContexts = Object.values( noticeContexts ).filter(
+				( context ) =>
+					context !== noticeContexts.PAYMENTS &&
+					context !== noticeContexts.EXPRESS_PAYMENTS
+			);
+			const allCheckoutNotices = checkoutContexts.reduce(
+				( acc, context ) => {
+					return [ ...acc, ...getNotices( context ) ];
+				},
+				[]
+			);
+			return {
+				checkoutNotices: allCheckoutNotices,
+				paymentNotices: getNotices( noticeContexts.PAYMENTS ),
+				expressPaymentNotices: getNotices(
+					noticeContexts.EXPRESS_PAYMENTS
+				),
+			};
+		}, [] );
 
 	const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
 	const currentObservers = useRef( observers );
@@ -186,7 +203,6 @@ export const CheckoutEventsProvider = ( {
 	}, [
 		isCheckoutBeforeProcessing,
 		setValidationErrors,
-		createErrorNotice,
 		__internalEmitValidateEvent,
 	] );
 
@@ -224,7 +240,6 @@ export const CheckoutEventsProvider = ( {
 		isCheckoutBeforeProcessing,
 		previousStatus,
 		previousHasError,
-		createErrorNotice,
 		checkoutNotices,
 		expressPaymentNotices,
 		paymentNotices,