From 021c5215d23e7b34037157060da4131246316e06 Mon Sep 17 00:00:00 2001
From: Nadir Seghir <nadir.seghir@gmail.com>
Date: Thu, 9 Feb 2023 14:21:07 +0100
Subject: [PATCH] support context as array in StoreNotice

---
 assets/js/blocks/products/all-products/block.js   |  2 +-
 .../block-client-apis/notices.md                  | 15 ---------------
 .../store-notices-container/store-notices.tsx     | 12 ++++++------
 3 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/assets/js/blocks/products/all-products/block.js b/assets/js/blocks/products/all-products/block.js
index 8c29b503b57..26e92ca63a9 100644
--- a/assets/js/blocks/products/all-products/block.js
+++ b/assets/js/blocks/products/all-products/block.js
@@ -37,7 +37,7 @@ class Block extends Component {
 				parentName="woocommerce/all-products"
 				parentClassName="wc-block-grid"
 			>
-				<StoreNoticesContainer contexts={ [ 'wc/all-products' ] } />
+				<StoreNoticesContainer context={ 'wc/all-products' } />
 				<ProductListContainer
 					attributes={ attributes }
 					urlParameterSuffix={ urlParameterSuffix }
diff --git a/docs/internal-developers/block-client-apis/notices.md b/docs/internal-developers/block-client-apis/notices.md
index 1758001fd30..da71886523e 100644
--- a/docs/internal-developers/block-client-apis/notices.md
+++ b/docs/internal-developers/block-client-apis/notices.md
@@ -5,7 +5,6 @@
 -   [Notices in WooCommerce Blocks](#notices-in-woocommerce-blocks)
     -   [`StoreNoticesContainer`](#storenoticescontainer)
 -   [Snackbar notices in WooCommerce Blocks](#snackbar-notices-in-woocommerce-blocks)
-    -   [`SnackbarNoticesContainer`](#snackbarnoticescontainer)
 
 ## Notices in WooCommerce Blocks
 
@@ -74,17 +73,3 @@ dispatch( 'core/notices' ).createNotice(
 	'snackbar-notice-id'
 );
 ```
-
-### `SnackbarNoticesContainer`
-
-To display snackbar notices, use the `SnackbarNoticesContainer` component. This component is rendered with the Cart and Checkout blocks, so there is no need to add another. The context it displays notices for is `default`. If, for some reason you do need to show snackbar messages for a different context, you can render this component again and pass the context as a prop to the component.
-
-```jsx
-import { SnackbarNoticesContainer } from '@woocommerce/base-components/snackbar-notices-container';
-
-const AlternativeSnackbarNotices = () => {
-	return (
-		<SnackbarNoticesContainer context="wc/alternative-snackbar-notices" />
-	);
-};
-```
diff --git a/packages/checkout/components/store-notices-container/store-notices.tsx b/packages/checkout/components/store-notices-container/store-notices.tsx
index ffab8455674..ccb865079d2 100644
--- a/packages/checkout/components/store-notices-container/store-notices.tsx
+++ b/packages/checkout/components/store-notices-container/store-notices.tsx
@@ -17,11 +17,11 @@ import { getClassNameFromStatus } from './utils';
 import type { StoreNotice } from './types';
 
 const StoreNotices = ( {
-	contexts,
+	context,
 	className,
 	notices,
 }: {
-	contexts: string[];
+	context: string | string[];
 	className: string;
 	notices: StoreNotice[];
 } ): JSX.Element => {
@@ -64,14 +64,14 @@ const StoreNotices = ( {
 			} );
 		}
 	}, [ noticeIds, previousNoticeIds, ref ] );
-
 	// Register the container context with the parent.
 	useEffect( () => {
-		contexts.map( ( context ) => registerContainer( context ) );
+		const contexts = Array.isArray( context ) ? context : [ context ];
+		contexts.map( ( _context ) => registerContainer( _context ) );
 		return () => {
-			contexts.map( ( context ) => unregisterContainer( context ) );
+			contexts.map( ( _context ) => unregisterContainer( _context ) );
 		};
-	}, [ contexts, registerContainer, unregisterContainer ] );
+	}, [ context, registerContainer, unregisterContainer ] );
 
 	// Group notices by whether or not they are dismissible. Dismissible notices can be grouped.
 	const dismissibleNotices = notices.filter(