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 } 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..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,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
{ children }
; + return ( +
+ + { children } +
+ ); }; export default FilledMiniCartContentsBlock; diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss index 7b8a1d60557..cc4f664cf48 100644 --- 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; +}