From f9611858c8414fd059726ceb168a55ab1b252432 Mon Sep 17 00:00:00 2001 From: Thomas Roberts Date: Tue, 11 Oct 2022 12:20:41 +0100 Subject: [PATCH 1/5] Remove cart notices before showing new ones --- .../filled-cart-block/frontend.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx index 03ef72c9e34..d16947b48e3 100644 --- a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx +++ b/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,25 @@ const FrontendBlock = ( { } ): JSX.Element | null => { const { cartItems, cartIsLoading, cartItemErrors } = useStoreCart(); const { hasDarkControls } = useCartBlockContext(); - const { createErrorNotice } = useDispatch( 'core/notices' ); + const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' ); + + 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, From 8fe3226b9e028d305766a50b6fd5c39b0880ea25 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 7 Nov 2022 17:08:41 +0000 Subject: [PATCH 2/5] bot: update checkstyle.xml --- checkstyle.xml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/checkstyle.xml b/checkstyle.xml index 309aa9161dd..9374abadfea 100644 --- a/checkstyle.xml +++ b/checkstyle.xml @@ -2337,6 +2337,9 @@ Target requires 1 element(s) but source may have fewer." source="TS2322" /> + + + From 3370d1411f4bfd4f4e338e782db237145bbd6a36 Mon Sep 17 00:00:00 2001 From: Thomas Roberts Date: Thu, 12 Jan 2023 10:40:00 +0000 Subject: [PATCH 3/5] Update deps for useEffect --- .../cart/inner-blocks/filled-cart-block/frontend.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx index d16947b48e3..6692dbcb94c 100644 --- a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx +++ b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx @@ -48,7 +48,12 @@ const FrontendBlock = ( { context: 'wc/cart', } ); } ); - }, [ createErrorNotice, cartItemErrors ] ); + }, [ + createErrorNotice, + cartItemErrors, + currentlyDisplayedErrorNoticeCodes, + removeNotice, + ] ); if ( cartIsLoading || cartItems.length >= 1 ) { return ( From b0a36fc6b156a65721c25d3882562216c53929ae Mon Sep 17 00:00:00 2001 From: Thomas Roberts Date: Thu, 12 Jan 2023 10:40:20 +0000 Subject: [PATCH 4/5] Remove outdated notices from mini cart --- .../frontend.tsx | 30 +++++++++++++++++-- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx index 2b9b52dc92f..2434856fd18 100644 --- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx +++ b/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; From 3f405e8f2f92e7d7390b3952c029edbb554f6e64 Mon Sep 17 00:00:00 2001 From: Thomas Roberts Date: Thu, 12 Jan 2023 10:40:37 +0000 Subject: [PATCH 5/5] Add comment to note that this functionality is also present in mini cart --- .../blocks/cart/inner-blocks/filled-cart-block/frontend.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx index 6692dbcb94c..4dcf59c6cad 100644 --- a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx +++ b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx @@ -24,6 +24,10 @@ const FrontendBlock = ( { const { hasDarkControls } = useCartBlockContext(); 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' )