Capture notices from hidden block into siblings block

assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx

@@ -91,7 +91,14 @@ const Block = ( {
 
 	return (
 		<AddressFormWrapperComponent>
-			<StoreNoticesContainer context={ noticeContexts.BILLING_ADDRESS } />
+			<StoreNoticesContainer
+				context={ noticeContexts.BILLING_ADDRESS }
+				capturedContexts={
+					useBillingAsShipping
+						? [ noticeContexts.SHIPPING_ADDRESS ]
+						: []
+				}
+			/>
 			<AddressForm
 				id="billing"
 				type="billing"

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -103,6 +103,11 @@ const Block = ( {
 			<AddressFormWrapperComponent>
 				<StoreNoticesContainer
 					context={ noticeContexts.SHIPPING_ADDRESS }
+					capturedContexts={
+						useShippingAsBilling
+							? [ noticeContexts.BILLING_ADDRESS ]
+							: []
+					}
 				/>
 				<AddressForm
 					id="shipping"

packages/checkout/components/store-notices-container/index.tsx

@@ -8,6 +8,7 @@ import {
 } from '@woocommerce/block-data';
 import { getNoticeContexts } from '@woocommerce/base-utils';
 import type { Notice } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,9 +25,19 @@ const formatNotices = ( notices: Notice[], context: string ): StoreNotice[] => {
 	} ) ) as StoreNotice[];
 };
 
+const removeDuplicateNotices = (
+	notice: Notice,
+	noticeIndex: number,
+	noticesArray: Notice[]
+) =>
+	noticesArray.findIndex(
+		( _notice: Notice ) => _notice.content === notice.content
+	) === noticeIndex;
+
 const StoreNoticesContainer = ( {
 	className = '',
 	context,
+	capturedContexts = [],
 	additionalNotices = [],
 }: StoreNoticesContainerProps ): JSX.Element | null => {
 	const { suppressNotices, registeredContainers } = useSelect(
@@ -46,23 +57,31 @@ const StoreNoticesContainer = ( {
 			subContext.includes( context + '/' ) &&
 			! registeredContainers.includes( subContext )
 	);
-
+	const contexts = useMemo(
+		() => [ context, ...capturedContexts ],
+		[ capturedContexts, context ]
+	);
 	// Get notices from the current context and any sub-contexts and append the name of the context to the notice
 	// objects for later reference.
+
 	const notices = useSelect< StoreNotice[] >( ( select ) => {
 		const { getNotices } = select( 'core/notices' );
 
 		return [
 			...unregisteredSubContexts.flatMap( ( subContext: string ) =>
 				formatNotices( getNotices( subContext ), subContext )
 			),
+			...capturedContexts.flatMap( ( capturedNotice: string ) =>
+				formatNotices( getNotices( capturedNotice ), capturedNotice )
+			),
 			...formatNotices(
 				getNotices( context ).concat( additionalNotices ),
 				context
 			),
-		].filter( Boolean ) as StoreNotice[];
+		]
+			.filter( removeDuplicateNotices )
+			.filter( Boolean ) as StoreNotice[];
 	} );
-
 	if ( suppressNotices || ! notices.length ) {
 		return null;
 	}
@@ -71,7 +90,7 @@ const StoreNoticesContainer = ( {
 		<>
 			<StoreNotices
 				className={ className }
-				context={ context }
+				contexts={ contexts }
 				notices={ notices.filter(
 					( notice ) => notice.type === 'default'
 				) }

packages/checkout/components/store-notices-container/store-notices.tsx

@@ -17,11 +17,11 @@ import { getClassNameFromStatus } from './utils';
 import type { StoreNotice } from './types';
 
 const StoreNotices = ( {
-	context,
+	contexts,
 	className,
 	notices,
 }: {
-	context: string;
+	contexts: string[];
 	className: string;
 	notices: StoreNotice[];
 } ): JSX.Element => {
@@ -67,11 +67,11 @@ const StoreNotices = ( {
 
 	// Register the container context with the parent.
 	useEffect( () => {
-		registerContainer( context );
+		contexts.map( ( context ) => registerContainer( context ) );
 		return () => {
-			unregisterContainer( context );
+			contexts.map( ( context ) => unregisterContainer( context ) );
 		};
-	}, [ context, registerContainer, unregisterContainer ] );
+	}, [ contexts, registerContainer, unregisterContainer ] );
 
 	// Group notices by whether or not they are dismissible. Dismissible notices can be grouped.
 	const dismissibleNotices = notices.filter(

packages/checkout/components/store-notices-container/types.ts

@@ -11,6 +11,7 @@ export interface StoreNoticesContainerProps {
 	context: string;
 	// List of additional notices that were added inline and not stored in the `core/notices` store.
 	additionalNotices?: ( NoticeType & NoticeOptions )[];
+	capturedContexts: string[];
 }
 
 export type StoreNotice = NoticeType & NoticeOptions;