Mini Cart block - added notice support (#7234)

* Mini Cart block - added notice support #6941 Mini Cart block - added notice support * set isDismissible to true * address feedback * improve layout * fix style and update close button label * fix UI when the admin bar is visible * Split out dismissible notices * fix css Co-authored-by: Mike Jolley <[email protected]>
woocommerce · Dec 22, 2022 · 448d3f6 · 448d3f6
1 parent e078e0d
commit 448d3f6
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 10 deletions.
diff --git 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/...ks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/...ks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
@@ -1,8 +1,13 @@
 /**
  * External dependencies
  */
+import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
+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 +17,31 @@ 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: false,
+				id: error.code,
+				context: 'wc/cart',
+			} );
+		} );
+	}, [ createErrorNotice, cartItemErrors ] );
 
 	if ( cartItems.length === 0 ) {
 		return null;
 	}
 
-	return <div className={ className }>{ children }</div>;
+	return (
+		<div className={ className }>
+			<StoreNoticesContainer context="wc/cart" />
+			{ children }
+		</div>
+	);
 };
 
 export default FilledMiniCartContentsBlock;
diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
@@ -43,23 +43,44 @@
 .wc-block-mini-cart__drawer {
 	font-size: 1rem;
 
+	.components-modal__content .components-modal__header .components-button {
+		padding: unset;
+		margin: unset;
+	}
+
+	.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;
+			}
+		}
+	}
+
 	.components-modal__content {
 		padding: 0;
 		position: relative;
 	}
 
 	.components-modal__header {
+		position: relative;
+		height: calc($gap-largest + $gap);
 		position: absolute;
 		top: $gap-largest;
-		right: $gap;
+		right: $gap-smallest;
+
 
 		button {
-			color: inherit;
-			z-index: 9999;
+			margin: 0;
+			right: 0;
+			transform: translateY(-50%);
 		}
 
 		svg {
 			fill: currentColor;
+			display: block;
 		}
 	}
 }
@@ -76,7 +97,7 @@
 
 .wp-block-woocommerce-empty-mini-cart-contents-block,
 .wp-block-woocommerce-filled-mini-cart-contents-block {
-	height: 100%;
+	height: 100vh;
 	display: flex;
 	flex-direction: column;
 }
@@ -182,3 +203,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;
+}