From e1b9c323d34af5a6fc026293be95c7eefe8eacf1 Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Tue, 27 Sep 2022 10:44:08 +0200
Subject: [PATCH 1/8] Mini Cart block - added notice support #6941

Mini Cart block - added notice support
---
 .../mini-cart/mini-cart-contents/block.tsx    |  1 +
 .../frontend.tsx                              | 30 +++++++++++++++++--
 .../mini-cart/mini-cart-contents/style.scss   |  9 ++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/style.scss

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
index 658c98c8968..a8c5167167c 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
@@ -6,6 +6,7 @@
  * Internal dependencies
  */
 import './inner-blocks/register-components';
+import './style.scss';
 
 type MiniCartContentsBlockProps = {
 	children: JSX.Element | JSX.Element[];
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
index 1b89e66a37b..44493a0d43b 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
@@ -1,8 +1,14 @@
 /**
  * External dependencies
  */
+import { StoreNoticesContainer } from '@woocommerce/base-context';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
+import { StoreNoticesProvider } from '@woocommerce/base-context/providers';
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+
 type FilledMiniCartContentsBlockProps = {
 	children: JSX.Element;
 	className: string;
@@ -12,13 +18,33 @@ const FilledMiniCartContentsBlock = ( {
 	children,
 	className,
 }: FilledMiniCartContentsBlockProps ): JSX.Element | null => {
-	const { cartItems } = useStoreCart();
+	const { cartItems, cartItemErrors } = useStoreCart();
+
+	const { createErrorNotice } = useDispatch( 'core/notices' );
+
+	// Ensures any cart errors listed in the API response get shown.
+	useEffect( () => {
+		cartItemErrors.forEach( ( error ) => {
+			createErrorNotice( decodeEntities( error.message ), {
+				isDismissible: true,
+				id: error.code,
+				context: 'wc/cart',
+			} );
+		} );
+	}, [ createErrorNotice, cartItemErrors ] );
 
 	if ( cartItems.length === 0 ) {
 		return null;
 	}
 
-	return <div className={ className }>{ children }</div>;
+	return (
+		<div className={ className }>
+			<StoreNoticesProvider>
+				<StoreNoticesContainer context="wc/cart" />
+				{ children }
+			</StoreNoticesProvider>
+		</div>
+	);
 };
 
 export default FilledMiniCartContentsBlock;
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/style.scss b/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
new file mode 100644
index 00000000000..c6da48aa9b5
--- /dev/null
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
@@ -0,0 +1,9 @@
+.wp-block-woocommerce-mini-cart-contents {
+	.wc-block-components-notices {
+		margin: 40px 16px 0;
+
+		button.components-button.components-notice__dismiss.has-icon {
+			display: none;
+		}
+	}
+}

From df7547ded9722cfb5227eb3f62371aa8d66bb60e Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Wed, 28 Sep 2022 11:10:03 +0200
Subject: [PATCH 2/8] set isDismissible to true

---
 assets/js/blocks/mini-cart/mini-cart-contents/block.tsx  | 1 -
 .../filled-mini-cart-contents-block/frontend.tsx         | 2 +-
 assets/js/blocks/mini-cart/mini-cart-contents/style.scss | 9 ---------
 3 files changed, 1 insertion(+), 11 deletions(-)
 delete mode 100644 assets/js/blocks/mini-cart/mini-cart-contents/style.scss

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
index a8c5167167c..658c98c8968 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/block.tsx
@@ -6,7 +6,6 @@
  * Internal dependencies
  */
 import './inner-blocks/register-components';
-import './style.scss';
 
 type MiniCartContentsBlockProps = {
 	children: JSX.Element | JSX.Element[];
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
index 44493a0d43b..9609e3401ba 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
@@ -26,7 +26,7 @@ const FilledMiniCartContentsBlock = ( {
 	useEffect( () => {
 		cartItemErrors.forEach( ( error ) => {
 			createErrorNotice( decodeEntities( error.message ), {
-				isDismissible: true,
+				isDismissible: false,
 				id: error.code,
 				context: 'wc/cart',
 			} );
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/style.scss b/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
deleted file mode 100644
index c6da48aa9b5..00000000000
--- a/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.wp-block-woocommerce-mini-cart-contents {
-	.wc-block-components-notices {
-		margin: 40px 16px 0;
-
-		button.components-button.components-notice__dismiss.has-icon {
-			display: none;
-		}
-	}
-}

From 2d4a9a30e18b1d83c8dad403891229efd210151f Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Wed, 26 Oct 2022 16:26:24 +0200
Subject: [PATCH 3/8] address feedback

---
 .../frontend.tsx                              |  7 ++----
 assets/js/blocks/mini-cart/style.scss         | 25 ++++++++++++++-----
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
index 9609e3401ba..2bbe64588e3 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
@@ -4,7 +4,6 @@
 import { StoreNoticesContainer } from '@woocommerce/base-context';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
-import { StoreNoticesProvider } from '@woocommerce/base-context/providers';
 import { useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -39,10 +38,8 @@ const FilledMiniCartContentsBlock = ( {
 
 	return (
 		<div className={ className }>
-			<StoreNoticesProvider>
-				<StoreNoticesContainer context="wc/cart" />
-				{ children }
-			</StoreNoticesProvider>
+			<StoreNoticesContainer context="wc/cart" />
+			{ children }
 		</div>
 	);
 };
diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
index a9887467521..978e35238dd 100644
--- a/assets/js/blocks/mini-cart/style.scss
+++ b/assets/js/blocks/mini-cart/style.scss
@@ -42,23 +42,36 @@
 .wc-block-mini-cart__drawer {
 	font-size: 1rem;
 
+	.components-modal__content .components-modal__header .components-button {
+		top: 50%;
+		padding: unset;
+		margin: unset;
+	}
+
+	.wc-block-components-notices {
+		padding: 0 16px;
+		margin-bottom: unset;
+	}
+
 	.components-modal__content {
 		padding: 0;
 		position: relative;
 	}
 
 	.components-modal__header {
-		position: absolute;
-		top: $gap-largest;
-		right: $gap;
+		position: relative;
+		height: calc( $gap-largest + $gap );
+
 
 		button {
-			color: inherit;
-			z-index: 9999;
+			margin: 0;
+			right: 0;
+			transform: translateY(-50%);
 		}
 
 		svg {
 			fill: currentColor;
+			display: block;
 		}
 	}
 }
@@ -73,7 +86,7 @@
 
 .wp-block-woocommerce-empty-mini-cart-contents-block,
 .wp-block-woocommerce-filled-mini-cart-contents-block {
-	height: 100%;
+	height: calc(100vh - ($gap-largest + $gap));
 	display: flex;
 	flex-direction: column;
 }

From 09389dd365fa248aa10cd4b362399869bdf9c9b2 Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Fri, 28 Oct 2022 18:41:04 +0200
Subject: [PATCH 4/8] improve layout

---
 assets/js/blocks/mini-cart/style.scss | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
index c8546b34d7b..9ce22cdd1c5 100644
--- a/assets/js/blocks/mini-cart/style.scss
+++ b/assets/js/blocks/mini-cart/style.scss
@@ -43,14 +43,17 @@
 	font-size: 1rem;
 
 	.components-modal__content .components-modal__header .components-button {
-		top: 50%;
 		padding: unset;
 		margin: unset;
 	}
 
 	.wc-block-components-notices {
-		padding: 0 16px;
+		margin: #{$gap} #{$gap-largest} -#{$gap};
 		margin-bottom: unset;
+
+		.wc-block-components-notices__notice {
+			margin-bottom: unset;
+		}
 	}
 
 	.components-modal__content {
@@ -61,6 +64,9 @@
 	.components-modal__header {
 		position: relative;
 		height: calc( $gap-largest + $gap );
+		position: absolute;
+		top: $gap-largest;
+		right: $gap-smallest;
 
 
 		button {
@@ -88,7 +94,7 @@
 
 .wp-block-woocommerce-empty-mini-cart-contents-block,
 .wp-block-woocommerce-filled-mini-cart-contents-block {
-	height: calc(100vh - ($gap-largest + $gap));
+	height: 100vh;
 	display: flex;
 	flex-direction: column;
 }

From 9f3381fa08e36f8460d8c9c6ada760eb82241321 Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Mon, 14 Nov 2022 16:50:35 +0100
Subject: [PATCH 5/8] fix style and update close button label

---
 assets/js/base/components/drawer/index.tsx | 5 +----
 assets/js/blocks/mini-cart/style.scss      | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/assets/js/base/components/drawer/index.tsx b/assets/js/base/components/drawer/index.tsx
index ff4c3cb0586..d0f5f034e39 100644
--- a/assets/js/base/components/drawer/index.tsx
+++ b/assets/js/base/components/drawer/index.tsx
@@ -54,10 +54,7 @@ const Drawer = ( {
 						slideOut,
 				}
 			) }
-			closeButtonLabel={ __(
-				'Close mini cart',
-				'woo-gutenberg-products-block'
-			) }
+			closeButtonLabel={ __( 'Close', 'woo-gutenberg-products-block' ) }
 		>
 			{ children }
 		</Modal>
diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
index bc48f3b43dd..1535da8ee27 100644
--- a/assets/js/blocks/mini-cart/style.scss
+++ b/assets/js/blocks/mini-cart/style.scss
@@ -49,7 +49,7 @@
 	}
 
 	.wc-block-components-notices {
-		margin: #{$gap} #{$gap-largest} -#{$gap};
+		margin: #{$gap} #{$gap-largest} -#{$gap} #{$gap};
 		margin-bottom: unset;
 
 		.wc-block-components-notices__notice {

From c2407145f0db2acafc716934b502369ec50d1121 Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Fri, 9 Dec 2022 15:56:25 +0100
Subject: [PATCH 6/8] fix UI when the admin bar is visible

---
 .../filled-mini-cart-contents-block/frontend.tsx   |  2 +-
 assets/js/blocks/mini-cart/style.scss              | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
index 2bbe64588e3..2b9b52dc92f 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { StoreNoticesContainer } from '@woocommerce/base-context';
+import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 import { useDispatch } from '@wordpress/data';
diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
index 1535da8ee27..c089f5e42fc 100644
--- a/assets/js/blocks/mini-cart/style.scss
+++ b/assets/js/blocks/mini-cart/style.scss
@@ -212,3 +212,17 @@ h2.wc-block-mini-cart__title {
 		}
 	}
 }
+
+.admin-bar .wp-block-woocommerce-mini-cart-contents {
+	margin-top: 32px;
+}
+
+.admin-bar .wp-block-woocommerce-mini-cart-contents,
+.admin-bar .wp-block-woocommerce-empty-mini-cart-contents-block,
+.admin-bar .wp-block-woocommerce-filled-mini-cart-contents-block {
+	height: calc(100vh - 32px);
+}
+
+.admin-bar .wc-block-components-drawer .components-modal__header .components-button {
+	top: 32px;
+}

From 4ecb18f7c4a893592792bbddd6a87c7937082264 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Thu, 22 Dec 2022 10:46:28 +0000
Subject: [PATCH 7/8] Split out dismissible notices

---
 .../store-notices-container/store-notices.tsx | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/checkout/components/store-notices-container/store-notices.tsx b/packages/checkout/components/store-notices-container/store-notices.tsx
index 471c99ffa0a..159c27515f7 100644
--- a/packages/checkout/components/store-notices-container/store-notices.tsx
+++ b/packages/checkout/components/store-notices-container/store-notices.tsx
@@ -72,12 +72,26 @@ const StoreNotices = ( {
 		};
 	}, [ context, registerContainer, unregisterContainer ] );
 
-	// Group notices by status. Do not group notices that are not dismissable.
-	const noticesByStatus = {
-		error: notices.filter( ( { status } ) => status === 'error' ),
-		success: notices.filter( ( { status } ) => status === 'success' ),
-		warning: notices.filter( ( { status } ) => status === 'warning' ),
-		info: notices.filter( ( { status } ) => status === 'info' ),
+	// Group notices by whether or not they are dismissable. Dismissable notices can be grouped.
+	const dismissibleNotices = notices.filter(
+		( { isDismissible } ) => !! isDismissible
+	);
+	const nonDismissibleNotices = notices.filter(
+		( { isDismissible } ) => ! isDismissible
+	);
+
+	// Group dismissibleNotices by status. They will be combined into a single notice.
+	const dismissibleNoticeGroups = {
+		error: dismissibleNotices.filter(
+			( { status } ) => status === 'error'
+		),
+		success: dismissibleNotices.filter(
+			( { status } ) => status === 'success'
+		),
+		warning: dismissibleNotices.filter(
+			( { status } ) => status === 'warning'
+		),
+		info: dismissibleNotices.filter( ( { status } ) => status === 'info' ),
 	};
 
 	return (
@@ -85,7 +99,19 @@ const StoreNotices = ( {
 			ref={ ref }
 			className={ classnames( className, 'wc-block-components-notices' ) }
 		>
-			{ Object.entries( noticesByStatus ).map(
+			{ nonDismissibleNotices.map( ( notice ) => (
+				<Notice
+					key={ notice.id }
+					className={ classnames(
+						'wc-block-components-notices__notice',
+						getClassNameFromStatus( notice.status )
+					) }
+					{ ...notice }
+				>
+					{ sanitizeHTML( decodeEntities( notice.content ) ) }
+				</Notice>
+			) ) }
+			{ Object.entries( dismissibleNoticeGroups ).map(
 				( [ status, noticeGroup ] ) => {
 					if ( ! noticeGroup.length ) {
 						return null;

From 441679268bbcb79bc10b7cc8e1abea6a3113b16c Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Thu, 22 Dec 2022 14:32:15 +0100
Subject: [PATCH 8/8] fix css

---
 assets/js/blocks/mini-cart/style.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
index f3e251eebf1..cc4f664cf48 100644
--- a/assets/js/blocks/mini-cart/style.scss
+++ b/assets/js/blocks/mini-cart/style.scss
@@ -48,12 +48,14 @@
 		margin: unset;
 	}
 
-	.wc-block-components-notices {
-		margin: #{$gap} #{$gap-largest} -#{$gap} #{$gap};
-		margin-bottom: unset;
-
-		.wc-block-components-notices__notice {
+	.wp-block-woocommerce-mini-cart-contents {
+		.wc-block-components-notices {
+			margin: #{$gap} #{$gap-largest} -#{$gap} #{$gap};
 			margin-bottom: unset;
+
+			.wc-block-components-notices__notice {
+				margin-bottom: unset;
+			}
 		}
 	}