support context as array in StoreNotice

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 }

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" />
-	);
-};
-```

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(