Remove useStoreNotices and interact directly with data store instead (

#6159)

* Make useStoreNotices interact directly with the store

* Get/set error notices directly in store in paymentMethodDataContext

* Add hasNoticesOfType util

* Remove useStoreNotices and interact directly with data store

* Create/remove notices directly in store

* Remove tests for useStoreNotices

* Add tests for notices util

* Use setIsSuppressed from useStoreNoticesContext

* remove useStoreNotices hook

* Update context typedef to define only isSuppressed and setIsSuppressed

* Remove all values from StoreNoticesContext besides setIsSuppressed

* Wrap Cart and Checkout blocks in StoreNoticesProvider (for isSuppressed)

* Make StoreNoticesContainer a named export

This is required so we can import it from @wooommerce/base-context

* Change addErrorNotice to createErrorNotice to match store action

* Remove unnecessary StoreNoticeProviders and pass only context to container

* Accept a context in StoreNoticesContainer

* Pass relevant context to StoreNoticesContainer

* Add function to remove notices by status

* Prevent checkout from breaking when removing notices during processing

* Prevent TS error about not included path

* Add StoreNoticesContainer to single product block

* Add StoreNoticesContainer to All Products Block

* Ensure errors are shown when using All Products & Single Product Blocks

* Add a context arg to removeNoticesByStatus

* Use correct contexts for all products and single product block

* Update tests to reflect new context argument

* Re-add missing block file for order-summary

* Remove block file for order-summary

* Send context to useStoreCartCoupons to show errors correctly

assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js

@@ -76,7 +76,9 @@ const AddToCartButton = () => {
 			isProcessing={ isProcessing }
 			isDone={ addedToCart }
 			onClick={ () => {
-				dispatchActions.submitForm();
+				dispatchActions.submitForm(
+					`woocommerce/single-product/${ product?.id || 0 }`
+				);
 				dispatchStoreEvent( 'cart-add-item', {
 					product,
 					listName: parentName,

assets/js/atomic/blocks/product-elements/button/block.js

@@ -104,7 +104,10 @@ const AddToCartButton = ( {
 		is_in_stock: isInStock,
 	} = product;
 	const { dispatchStoreEvent } = useStoreEvents();
-	const { cartQuantity, addingToCart, addToCart } = useStoreAddToCart( id );
+	const { cartQuantity, addingToCart, addToCart } = useStoreAddToCart(
+		id,
+		`woocommerce/single-product/${ id || 0 }`
+	);
 
 	const addedToCart = Number.isFinite( cartQuantity ) && cartQuantity > 0;
 	const allowAddToCart = ! hasOptions && isPurchasable && isInStock;

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

@@ -4,7 +4,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import type { StoreCartCoupon } from '@woocommerce/types';
@@ -15,7 +15,6 @@ import type { StoreCartCoupon } from '@woocommerce/types';
 import { useStoreCart } from './use-store-cart';
 import { useStoreSnackbarNotices } from '../use-store-snackbar-notices';
 import { useValidationContext } from '../../providers/validation';
-import { useStoreNotices } from '../use-store-notices';
 
 /**
  * This is a custom hook for loading the Store API /cart/coupons endpoint and an
@@ -25,9 +24,9 @@ import { useStoreNotices } from '../use-store-notices';
  * @return {StoreCartCoupon} An object exposing data and actions from/for the
  * store api /cart/coupons endpoint.
  */
-export const useStoreCartCoupons = (): StoreCartCoupon => {
+export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
 	const { cartCoupons, cartIsLoading } = useStoreCart();
-	const { addErrorNotice } = useStoreNotices();
+	const { createErrorNotice } = useDispatch( 'core/notices' );
 	const { addSnackbarNotice } = useStoreSnackbarNotices();
 	const { setValidationErrors } = useValidationContext();
 
@@ -100,8 +99,9 @@ export const useStoreCartCoupons = (): StoreCartCoupon => {
 						}
 					} )
 					.catch( ( error ) => {
-						addErrorNotice( error.message, {
+						createErrorNotice( error.message, {
 							id: 'coupon-form',
+							context,
 						} );
 						// Finished handling the coupon.
 						receiveApplyingCoupon( '' );
@@ -115,7 +115,7 @@ export const useStoreCartCoupons = (): StoreCartCoupon => {
 				isRemovingCoupon,
 			};
 		},
-		[ addErrorNotice, addSnackbarNotice ]
+		[ createErrorNotice, addSnackbarNotice ]
 	);
 
 	return {

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

@@ -2,7 +2,6 @@ export * from './cart';
 export * from './collections';
 export * from './shipping';
 export * from './payment-methods';
-export * from './use-store-notices';
 export * from './use-store-events';
 export * from './use-query-state';
 export * from './use-store-products';

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

@@ -11,7 +11,6 @@ import type { CartItem } from '@woocommerce/types';
  * Internal dependencies
  */
 import { useStoreCart } from './cart/use-store-cart';
-import { useStoreNotices } from './use-store-notices';
 
 /**
  * @typedef {import('@woocommerce/type-defs/hooks').StoreCartItemAddToCart} StoreCartItemAddToCart
@@ -52,7 +51,7 @@ const getQuantityFromCartItems = (
 export const useStoreAddToCart = ( productId: number ): StoreAddToCart => {
 	const { addItemToCart } = useDispatch( storeKey );
 	const { cartItems, cartIsLoading } = useStoreCart();
-	const { addErrorNotice, removeNotice } = useStoreNotices();
+	const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
 
 	const [ addingToCart, setAddingToCart ] = useState( false );
 	const currentCartItemQuantity = useRef(
@@ -66,9 +65,9 @@ export const useStoreAddToCart = ( productId: number ): StoreAddToCart => {
 				removeNotice( 'add-to-cart' );
 			} )
 			.catch( ( error ) => {
-				addErrorNotice( decodeEntities( error.message ), {
-					context: 'wc/all-products',
+				createErrorNotice( decodeEntities( error.message ), {
 					id: 'add-to-cart',
+					context: 'wc/all-products',
 					isDismissible: true,
 				} );
 			} )

assets/js/base/context/providers/add-to-cart-form/form-state/index.js

@@ -14,7 +14,7 @@ import {
 	productIsPurchasable,
 	productSupportsAddToCartForm,
 } from '@woocommerce/base-utils';
-
+import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
@@ -29,8 +29,8 @@ import {
 	reducer as emitReducer,
 } from './event-emit';
 import { useValidationContext } from '../../validation';
-import { useStoreNotices } from '../../../hooks/use-store-notices';
 import { useEmitResponse } from '../../../hooks/use-emit-response';
+import { removeNoticesByStatus } from '../../../../../utils/notices';
 
 /**
  * @typedef {import('@woocommerce/type-defs/add-to-cart-form').AddToCartFormDispatchActions} AddToCartFormDispatchActions
@@ -99,7 +99,7 @@ export const AddToCartFormStateContextProvider = ( {
 	);
 	const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
 	const currentObservers = useShallowEqual( observers );
-	const { addErrorNotice, removeNotices } = useStoreNotices();
+	const { createErrorNotice } = useDispatch( 'core/notices' );
 	const { setValidationErrors } = useValidationContext();
 	const {
 		isSuccessResponse,
@@ -167,7 +167,7 @@ export const AddToCartFormStateContextProvider = ( {
 		const status = addToCartFormState.status;
 
 		if ( status === STATUS.BEFORE_PROCESSING ) {
-			removeNotices( 'error' );
+			removeNoticesByStatus( 'error', 'wc/add-to-cart' );
 			emitEvent(
 				currentObservers,
 				EMIT_TYPES.ADD_TO_CART_BEFORE_PROCESSING,
@@ -178,7 +178,10 @@ export const AddToCartFormStateContextProvider = ( {
 						response.forEach(
 							( { errorMessage, validationErrors } ) => {
 								if ( errorMessage ) {
-									addErrorNotice( errorMessage );
+									createErrorNotice(
+										errorMessage,
+										'wc/add-to-cart'
+									);
 								}
 								if ( validationErrors ) {
 									setValidationErrors( validationErrors );
@@ -195,10 +198,10 @@ export const AddToCartFormStateContextProvider = ( {
 	}, [
 		addToCartFormState.status,
 		setValidationErrors,
-		addErrorNotice,
-		removeNotices,
+		createErrorNotice,
 		dispatch,
 		currentObservers,
+		product?.id,
 	] );
 
 	/**
@@ -227,7 +230,7 @@ export const AddToCartFormStateContextProvider = ( {
 							? { context: messageContext }
 							: undefined;
 						handled = true;
-						addErrorNotice( message, errorOptions );
+						createErrorNotice( message, errorOptions );
 					}
 				} );
 				return handled;
@@ -248,8 +251,11 @@ export const AddToCartFormStateContextProvider = ( {
 								'Something went wrong. Please contact us to get assistance.',
 								'woo-gutenberg-products-block'
 							);
-						addErrorNotice( message, {
+						createErrorNotice( message, {
 							id: 'add-to-cart',
+							context: `woocommerce/single-product/${
+								product?.id || 0
+							}`,
 						} );
 					}
 					dispatch( actions.setIdle() );
@@ -277,11 +283,12 @@ export const AddToCartFormStateContextProvider = ( {
 		addToCartFormState.hasError,
 		addToCartFormState.processingResponse,
 		dispatchActions,
-		addErrorNotice,
+		createErrorNotice,
 		isErrorResponse,
 		isFailResponse,
 		isSuccessResponse,
 		currentObservers,
+		product?.id,
 	] );
 
 	const supportsFormElements = productSupportsAddToCartForm( product );