Remove old cart notices before showing new ones (https://github.com/woocommerce/woocommerce-blocks/pull/7363)

* Remove cart notices before showing new ones

* bot: update checkstyle.xml

* Update deps for useEffect

* Remove outdated notices from mini cart

* Add comment to note that this functionality is also present in mini cart

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx

@@ -6,7 +6,7 @@ import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { useEffect } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -22,10 +22,29 @@ const FrontendBlock = ( {
 } ): JSX.Element | null => {
 	const { cartItems, cartIsLoading, cartItemErrors } = useStoreCart();
 	const { hasDarkControls } = useCartBlockContext();
-	const { createErrorNotice } = useDispatch( 'core/notices' );
+	const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
+
+	/*
+	 * The code for removing old notices is also present in the filled-mini-cart-contents-block/frontend.tsx file and
+	 * will take care of removing outdated errors in the Mini Cart block.
+	 */
+	const currentlyDisplayedErrorNoticeCodes = useSelect( ( select ) => {
+		return select( 'core/notices' )
+			.getNotices( 'wc/cart' )
+			.filter(
+				( notice ) =>
+					notice.status === 'error' && notice.type === 'default'
+			)
+			.map( ( notice ) => notice.id );
+	} );
 
-	// Ensures any cart errors listed in the API response get shown.
 	useEffect( () => {
+		// Clear errors out of the store before adding the new ones from the response.
+		currentlyDisplayedErrorNoticeCodes.forEach( ( id ) => {
+			removeNotice( id, 'wc/cart' );
+		} );
+
+		// Ensures any cart errors listed in the API response get shown.
 		cartItemErrors.forEach( ( error ) => {
 			createErrorNotice( decodeEntities( error.message ), {
 				isDismissible: true,
@@ -33,7 +52,12 @@ const FrontendBlock = ( {
 				context: 'wc/cart',
 			} );
 		} );
-	}, [ createErrorNotice, cartItemErrors ] );
+	}, [
+		createErrorNotice,
+		cartItemErrors,
+		currentlyDisplayedErrorNoticeCodes,
+		removeNotice,
+	] );
 
 	if ( cartIsLoading || cartItems.length >= 1 ) {
 		return (

plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx

@@ -4,7 +4,7 @@
 import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -19,10 +19,29 @@ const FilledMiniCartContentsBlock = ( {
 }: FilledMiniCartContentsBlockProps ): JSX.Element | null => {
 	const { cartItems, cartItemErrors } = useStoreCart();
 
-	const { createErrorNotice } = useDispatch( 'core/notices' );
+	const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
+
+	/*
+	 * The code for removing old notices is also present in the filled-cart-block/frontend.tsx file and will take care
+	 * of removing outdated errors in the Cart block.
+	 */
+	const currentlyDisplayedErrorNoticeCodes = useSelect( ( select ) => {
+		return select( 'core/notices' )
+			.getNotices( 'wc/cart' )
+			.filter(
+				( notice ) =>
+					notice.status === 'error' && notice.type === 'default'
+			)
+			.map( ( notice ) => notice.id );
+	} );
 
 	// Ensures any cart errors listed in the API response get shown.
 	useEffect( () => {
+		// Clear errors out of the store before adding the new ones from the response.
+		currentlyDisplayedErrorNoticeCodes.forEach( ( id ) => {
+			removeNotice( id, 'wc/cart' );
+		} );
+
 		cartItemErrors.forEach( ( error ) => {
 			createErrorNotice( decodeEntities( error.message ), {
 				isDismissible: false,
@@ -30,7 +49,12 @@ const FilledMiniCartContentsBlock = ( {
 				context: 'wc/cart',
 			} );
 		} );
-	}, [ createErrorNotice, cartItemErrors ] );
+	}, [
+		createErrorNotice,
+		cartItemErrors,
+		currentlyDisplayedErrorNoticeCodes,
+		removeNotice,
+	] );
 
 	if ( cartItems.length === 0 ) {
 		return null;

plugins/woocommerce-blocks/checkstyle.xml

@@ -2337,6 +2337,9 @@
     Target requires 1 element(s) but source may have fewer." source="TS2322" />
 <error line="113" column="9" severity="error" message="Type &apos;{}[][]&apos; is not assignable to type &apos;readonly Template[]&apos;." source="TS2322" />
 </file>
+<file name="assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx">
+<error line="32" column="42" severity="error" message="Property &apos;type&apos; does not exist on type &apos;Notice&apos;." source="TS2339" />
+</file>
 <file name="assets/js/blocks/cart/inner-blocks/cart-items-block/frontend.tsx">
 <error line="15" column="4" severity="error" message="Type &apos;{ children: Element; className: string; }&apos; is not assignable to type &apos;IntrinsicAttributes &amp; RefAttributes&lt;any&gt;&apos;.
   Property &apos;children&apos; does not exist on type &apos;IntrinsicAttributes &amp; RefAttributes&lt;any&gt;&apos;." source="TS2322" />