From 54cb0ffe29356f1949fefc8d1e0b3cae256b193c Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Mon, 24 Jul 2023 18:34:32 +0200
Subject: [PATCH] show notice when there is an error

---
 .../product-elements/button/frontend.tsx      | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/assets/js/atomic/blocks/product-elements/button/frontend.tsx b/assets/js/atomic/blocks/product-elements/button/frontend.tsx
index c9974a5e158..37caa073076 100644
--- a/assets/js/atomic/blocks/product-elements/button/frontend.tsx
+++ b/assets/js/atomic/blocks/product-elements/button/frontend.tsx
@@ -5,13 +5,15 @@ import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
 import { store } from '@woocommerce/interactivity';
 import { dispatch } from '@wordpress/data';
 import { Cart } from '@woocommerce/type-defs/cart';
-
+import { createRoot } from '@wordpress/element';
+import NoticeBanner from '@woocommerce/base-components/notice-banner';
 type Context = {
 	woocommerce: {
 		isLoading: boolean;
 		addToCartText: string;
 		productId: number;
 		numberOfItems: number;
+		productPermalink: string;
 	};
 };
 
@@ -141,6 +143,28 @@ store( {
 					context.woocommerce.numberOfItems++;
 					context.woocommerce.isLoading = false;
 				} catch ( error ) {
+					const domNode = document.querySelector(
+						'.wc-block-store-notices'
+					);
+
+					const root = createRoot( domNode );
+
+					root.render(
+						<NoticeBanner
+							status="error"
+							onRemove={ () => root.unmount() }
+						>
+							{ error.message }
+						</NoticeBanner>
+					);
+
+					domNode?.scrollIntoView( {
+						behavior: 'smooth',
+						inline: 'nearest',
+					} );
+
+					context.woocommerce.isLoading = false;
+
 					// we don't care about errors blocking execution, but will console.error for troubleshooting.
 					// eslint-disable-next-line no-console
 					console.error( error );