diff --git a/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/index.js b/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/index.js
new file mode 100644
index 00000000000..0e2a6182dad
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/index.js
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Notice } from 'wordpress-components';
+import { useStoreNoticesContext } from '@woocommerce/base-context/store-notices-context';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const getWooClassName = ( { status = 'default' } ) => {
+ switch ( status ) {
+ case 'error':
+ return 'woocommerce-message woocommerce-error';
+ case 'success':
+ return 'woocommerce-message woocommerce-success';
+ case 'info':
+ case 'warning':
+ return 'woocommerce-message woocommerce-info';
+ }
+ return '';
+};
+
+const StoreNoticesContainer = ( { className, notices } ) => {
+ const { removeNotice } = useStoreNoticesContext();
+ const wrapperClass = classnames( className, 'wc-block-components-notices' );
+
+ return (
+
+ { notices.map( ( props ) => (
+ {
+ if ( props.isDismissible ) {
+ removeNotice( props.id );
+ }
+ } }
+ >
+ { props.content }
+
+ ) ) }
+
+ );
+};
+
+StoreNoticesContainer.propTypes = {
+ className: PropTypes.string,
+ notices: PropTypes.array,
+};
+
+export default StoreNoticesContainer;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/style.scss
new file mode 100644
index 00000000000..31de746887c
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/store-notices-container/style.scss
@@ -0,0 +1,26 @@
+.wc-block-components-notices {
+ display: block;
+ margin-bottom: 2em;
+ .wc-block-components-notices__notice {
+ margin: 0;
+ .components-notice__content {
+ display: inline-block;
+ }
+ .components-notice__dismiss {
+ background: transparent none;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ outline: 0;
+ color: #fff;
+ float: right;
+ svg {
+ fill: #fff;
+ vertical-align: text-top;
+ }
+ }
+ }
+ .wc-block-components-notices__notice + .wc-block-components-notices__notice {
+ margin-top: 1em;
+ }
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/store-notices-context.js b/plugins/woocommerce-blocks/assets/js/base/context/store-notices-context.js
new file mode 100644
index 00000000000..860d3ee4306
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/store-notices-context.js
@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { createContext, useContext, useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import StoreNoticesContainer from '@woocommerce/base-components/store-notices-container';
+
+const StoreNoticesContext = createContext( {
+ notices: [],
+ createNotice: () => void null,
+ removeNotice: () => void null,
+ context: 'wc/core',
+} );
+
+export const useStoreNoticesContext = () => {
+ return useContext( StoreNoticesContext );
+};
+
+/**
+ * Provides an interface for blocks to add notices to the frontend UI.
+ *
+ * Statuses map to https://github.com/WordPress/gutenberg/tree/master/packages/components/src/notice
+ * - Default (no status)
+ * - Error
+ * - Warning
+ * - Info
+ * - Success
+ */
+const StoreNoticesProvider = ( {
+ children,
+ className = '',
+ createNoticeContainer = true,
+ context = 'wc/core',
+} ) => {
+ const { createNotice, removeNotice } = useDispatch( 'core/notices' );
+
+ const createNoticeWithContext = useCallback(
+ ( status = 'default', content = '', options = {} ) => {
+ createNotice( status, content, {
+ ...options,
+ context: options.context || context,
+ } );
+ },
+ [ createNotice, context ]
+ );
+
+ const removeNoticeWithContext = useCallback(
+ ( id ) => {
+ removeNotice( id, context );
+ },
+ [ createNotice, context ]
+ );
+
+ const { notices } = useSelect(
+ ( select ) => {
+ return {
+ notices: select( 'core/notices' ).getNotices( context ),
+ };
+ },
+ [ context ]
+ );
+
+ const contextValue = {
+ notices,
+ createNotice: createNoticeWithContext,
+ removeNotice: removeNoticeWithContext,
+ context,
+ };
+
+ return (
+
+ { createNoticeContainer && (
+
+ ) }
+ { children }
+
+ );
+};
+
+StoreNoticesProvider.propTypes = {
+ className: PropTypes.string,
+ createNoticeContainer: PropTypes.bool,
+ children: PropTypes.node,
+ context: PropTypes.string,
+};
+
+export default StoreNoticesProvider;
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/index.js b/plugins/woocommerce-blocks/assets/js/base/hooks/index.js
index 63c2e42b535..eb2820eabac 100644
--- a/plugins/woocommerce-blocks/assets/js/base/hooks/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/index.js
@@ -4,6 +4,7 @@ export * from './use-store-cart';
export * from './use-store-cart-coupons';
export * from './use-store-cart-item';
export * from './use-store-products';
+export * from './use-store-notices';
export * from './use-collection';
export * from './use-collection-header';
export * from './use-collection-data';
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-store-cart-coupons.js b/plugins/woocommerce-blocks/assets/js/base/hooks/use-store-cart-coupons.js
index 80b6b6a53c6..e44fd499b3e 100644
--- a/plugins/woocommerce-blocks/assets/js/base/hooks/use-store-cart-coupons.js
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-store-cart-coupons.js
@@ -3,8 +3,10 @@
/**
* External dependencies
*/
+import { __, sprintf } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
+import { useStoreNotices } from '@woocommerce/base-hooks';
/**
* Internal dependencies
@@ -21,20 +23,80 @@ import { useStoreCart } from './use-store-cart';
*/
export const useStoreCartCoupons = () => {
const { cartCoupons, cartIsLoading } = useStoreCart();
+ const {
+ addErrorNotice,
+ addSuccessNotice,
+ addInfoNotice,
+ } = useStoreNotices();
- const results = useSelect( ( select, { dispatch } ) => {
- const store = select( storeKey );
- const isApplyingCoupon = store.isApplyingCoupon();
- const isRemovingCoupon = store.isRemovingCoupon();
- const { applyCoupon, removeCoupon } = dispatch( storeKey );
+ const results = useSelect(
+ ( select, { dispatch } ) => {
+ const store = select( storeKey );
+ const isApplyingCoupon = store.isApplyingCoupon();
+ const isRemovingCoupon = store.isRemovingCoupon();
+ const { applyCoupon, removeCoupon } = dispatch( storeKey );
- return {
- applyCoupon,
- removeCoupon,
- isApplyingCoupon,
- isRemovingCoupon,
- };
- }, [] );
+ const applyCouponWithNotices = ( couponCode ) => {
+ applyCoupon( couponCode )
+ .then( ( result ) => {
+ if ( result === true ) {
+ addSuccessNotice(
+ sprintf(
+ // translators: %s coupon code.
+ __(
+ 'Coupon code "%s" has been applied to your cart',
+ 'woo-gutenberg-products-block'
+ ),
+ couponCode
+ ),
+ {
+ id: 'coupon-form',
+ }
+ );
+ }
+ } )
+ .catch( ( error ) => {
+ addErrorNotice( error.message, {
+ id: 'coupon-form',
+ } );
+ } );
+ };
+
+ const removeCouponWithNotices = ( couponCode ) => {
+ removeCoupon( couponCode )
+ .then( ( result ) => {
+ if ( result === true ) {
+ addInfoNotice(
+ sprintf(
+ // translators: %s coupon code.
+ __(
+ 'Coupon code "%s" has been removed from your cart',
+ 'woo-gutenberg-products-block'
+ ),
+ couponCode
+ ),
+ {
+ id: 'coupon-form',
+ }
+ );
+ }
+ } )
+ .catch( ( error ) => {
+ addErrorNotice( error.message, {
+ id: 'coupon-form',
+ } );
+ } );
+ };
+
+ return {
+ applyCoupon: applyCouponWithNotices,
+ removeCoupon: removeCouponWithNotices,
+ isApplyingCoupon,
+ isRemovingCoupon,
+ };
+ },
+ [ addErrorNotice, addSuccessNotice, addInfoNotice ]
+ );
return {
appliedCoupons: cartCoupons,
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-store-notices.js b/plugins/woocommerce-blocks/assets/js/base/hooks/use-store-notices.js
new file mode 100644
index 00000000000..922fd7d1dba
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-store-notices.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { useStoreNoticesContext } from '@woocommerce/base-context/store-notices-context';
+import { useMemo } from '@wordpress/element';
+
+export const useStoreNotices = () => {
+ const { notices, createNotice, removeNotice } = useStoreNoticesContext();
+
+ const noticesApi = useMemo(
+ () => ( {
+ addDefaultNotice: ( text, noticeProps = {} ) =>
+ void createNotice( 'default', text, {
+ ...noticeProps,
+ } ),
+ addErrorNotice: ( text, noticeProps = {} ) =>
+ void createNotice( 'error', text, {
+ ...noticeProps,
+ } ),
+ addWarningNotice: ( text, noticeProps = {} ) =>
+ void createNotice( 'warning', text, {
+ ...noticeProps,
+ } ),
+ addInfoNotice: ( text, noticeProps = {} ) =>
+ void createNotice( 'info', text, {
+ ...noticeProps,
+ } ),
+ addSuccessNotice: ( text, noticeProps = {} ) =>
+ void createNotice( 'success', text, {
+ ...noticeProps,
+ } ),
+ removeNotices: ( type = null ) => {
+ notices.map( ( notice ) => {
+ if ( type === null || notice.status === type ) {
+ removeNotice( notice.id );
+ }
+ return true;
+ } );
+ },
+ } ),
+ [ createNotice ]
+ );
+
+ return {
+ notices,
+ ...noticesApi,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js
index 769888851b2..712a3ddfd21 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js
@@ -5,6 +5,8 @@ import { withRestApiHydration } from '@woocommerce/block-hocs';
import { useStoreCart } from '@woocommerce/base-hooks';
import { RawHTML } from '@wordpress/element';
import LoadingMask from '@woocommerce/base-components/loading-mask';
+import StoreNoticesProvider from '@woocommerce/base-context/store-notices-context';
+
/**
* Internal dependencies
*/
@@ -23,21 +25,11 @@ const CartFrontend = ( {
cartItems,
cartTotals,
cartIsLoading,
- cartErrors,
cartCoupons,
} = useStoreCart();
return (
- <>
-
- { // @todo This is a placeholder for error messages - this needs refactoring.
- cartErrors &&
- cartErrors.map( ( error = {}, i ) => (
-
- { error.message }
-
- ) ) }
-