A4A: Dismiss checkout errors after leaving checkout

client/a8c-for-agencies/sections/marketplace/billing-dragon-checkout/cart-message-cleanup.ts

@@ -0,0 +1,49 @@
+import { useShoppingCart } from '@automattic/shopping-cart';
+import { useEffect, useRef } from 'react';
+import { getNoticeIdForMessage } from 'calypso/my-sites/checkout/cart/cart-messages';
+import useCartKey from 'calypso/my-sites/checkout/use-cart-key';
+import { useDispatch } from 'calypso/state';
+import { removeNotice } from 'calypso/state/notices/actions';
+
+export default function CartMessageCleanup(): null {
+	const cartKey = useCartKey();
+	const { clearMessages, responseCart } = useShoppingCart( cartKey );
+	const dispatch = useDispatch();
+	const dispatchRef = useRef( dispatch );
+	const noticeIds = useRef( new Set< string >() );
+	const clearMessagesCallbacks = useRef( new Set< typeof clearMessages >() );
+
+	useEffect( () => {
+		dispatchRef.current = dispatch;
+	}, [ dispatch ] );
+
+	useEffect( () => {
+		clearMessagesCallbacks.current.add( clearMessages );
+	}, [ clearMessages ] );
+
+	useEffect( () => {
+		const errors = [
+			...( responseCart.messages?.errors ?? [] ),
+			...( responseCart.messages?.persistent_errors ?? [] ),
+		];
+
+		errors.forEach( ( message ) => noticeIds.current.add( getNoticeIdForMessage( message ) ) );
+	}, [ responseCart.messages ] );
+
+	useEffect( () => {
+		const currentNoticeIds = noticeIds.current;
+		const currentClearMessagesCallbacks = clearMessagesCallbacks.current;
+
+		return () => {
+			currentNoticeIds.forEach( ( noticeId ) => {
+				dispatchRef.current( removeNotice( noticeId ) );
+			} );
+
+			currentClearMessagesCallbacks.forEach( ( clearMessagesCallback ) => {
+				void clearMessagesCallback().catch( () => undefined );
+			} );
+		};
+	}, [] );
+
+	return null;
+}

client/a8c-for-agencies/sections/marketplace/billing-dragon-checkout/index.tsx

@@ -17,6 +17,7 @@ import { getCurrentUserLocale } from 'calypso/state/current-user/selectors';
 import hasLoadedSites from 'calypso/state/selectors/has-loaded-sites';
 import getSite from 'calypso/state/sites/selectors/get-site';
 import { setSelectedSiteId } from 'calypso/state/ui/actions';
+import CartMessageCleanup from './cart-message-cleanup';
 import ClientCheckoutError from './checkout-error';
 import ClientCheckoutPlaceholder from './checkout-placeholder';
 import getSuccessRedirectUrl from './lib/get-success-redirect-url';
@@ -284,6 +285,7 @@ export default function BillingDragonCheckout( {
 			errorMessage={ translate( 'Sorry, there was an error loading the checkout page.' ) }
 		>
 			<CalypsoShoppingCartProvider shouldShowPersistentErrors>
+				<CartMessageCleanup />
 				<StripeHookProvider fetchStripeConfiguration={ getStripeConfiguration } locale={ locale }>
 					<BillingDragonCheckoutContent
 						cartItems={ cartItems }

client/my-sites/checkout/cart/cart-messages.tsx

@@ -188,7 +188,7 @@ function getMessagePrettifier(
 }
 
 // Use this to group messages so that they will replace existing messages with the same id
-function getNoticeIdForMessage( message: ResponseCartMessage ): string {
+export function getNoticeIdForMessage( message: ResponseCartMessage ): string {
 	switch ( message.code ) {
 		case 'coupon-not-found':
 		case 'coupon-removed':