diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-processor.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-processor.js index af0051da060..932b9184516 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-processor.js +++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-processor.js @@ -33,7 +33,6 @@ import { useCheckoutEventsContext } from './checkout-events'; import { useShippingDataContext } from './shipping'; import { useCustomerDataContext } from './customer'; import { useStoreCart } from '../../hooks/cart/use-store-cart'; -import { useStoreNoticesContext } from '../store-notices'; /** * CheckoutProcessor component. @@ -71,7 +70,6 @@ const CheckoutProcessor = () => { const { shippingErrorStatus } = useShippingDataContext(); const { billingAddress, shippingAddress } = useCustomerDataContext(); const { cartNeedsPayment, cartNeedsShipping, receiveCart } = useStoreCart(); - const { setIsSuppressed } = useStoreNoticesContext(); const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' ); const { @@ -118,11 +116,6 @@ const CheckoutProcessor = () => { ( currentPaymentStatus.isSuccessful || ! cartNeedsPayment ) && checkoutIsProcessing; - // If express payment method is active, let's suppress notices - useEffect( () => { - setIsSuppressed( isExpressPaymentMethodActive ); - }, [ isExpressPaymentMethodActive, setIsSuppressed ] ); - // Determine if checkout has an error. useEffect( () => { if ( diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/store-notices/components/store-notices-container.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/store-notices/components/store-notices-container.js index 7703c637d67..f186dc1496a 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/providers/store-notices/components/store-notices-container.js +++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/store-notices/components/store-notices-container.js @@ -2,15 +2,16 @@ * External dependencies */ import PropTypes from 'prop-types'; -import { useDispatch, useSelect } from '@wordpress/data'; import classnames from 'classnames'; import { Notice } from 'wordpress-components'; import { sanitize } from 'dompurify'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { PAYMENT_METHOD_DATA_STORE_KEY } from '@woocommerce/block-data'; + /** * Internal dependencies */ import './style.scss'; -import { useStoreNoticesContext } from '../context'; const ALLOWED_TAGS = [ 'a', 'b', 'em', 'i', 'strong', 'p', 'br' ]; const ALLOWED_ATTR = [ 'target', 'href', 'rel', 'name', 'download' ]; @@ -39,7 +40,9 @@ export const StoreNoticesContainer = ( { context = 'default', additionalNotices = [], } ) => { - const { isSuppressed } = useStoreNoticesContext(); + const isExpressPaymentMethodActive = useSelect( ( select ) => + select( PAYMENT_METHOD_DATA_STORE_KEY ).isExpressPaymentMethodActive() + ); const { notices } = useSelect( ( select ) => { const store = select( 'core/notices' ); @@ -58,7 +61,8 @@ export const StoreNoticesContainer = ( { const wrapperClass = classnames( className, 'wc-block-components-notices' ); - return isSuppressed ? null : ( + // We suppress the notices when the express payment method is active + return isExpressPaymentMethodActive ? null : (
{ regularNotices.map( ( props ) => ( void { val }, - isSuppressed: false, -} ); - -/** - * Returns the notices context values. - * - * @return {NoticeContext} The notice context value from the notice context. - */ -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 - * - * @param {Object} props Incoming props for the component. - * @param {JSX.Element} props.children The Elements wrapped by this component. - */ -export const StoreNoticesProvider = ( { children } ) => { - const [ isSuppressed, setIsSuppressed ] = useState( false ); - - const contextValue = { - setIsSuppressed, - isSuppressed, - }; - - return ( - - { children } - - ); -}; - -StoreNoticesProvider.propTypes = { - children: PropTypes.node, -}; diff --git a/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.js index 188ca6f7bce..87efc3ab816 100644 --- a/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.js +++ b/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.js @@ -213,13 +213,6 @@ * @property {string} id The id of the notice. */ -/** - * @typedef NoticeContext - * - * @property {function(boolean):void} setIsSuppressed Consumers can use this setter to suppress notices. - * @property {boolean} isSuppressed Whether notices should be hidden/suppressed. - */ - /** * @typedef {Object} ContainerWidthContext * diff --git a/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.ts b/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.ts index 7e1a47cd043..a2968ef6a94 100644 --- a/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.ts +++ b/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.ts @@ -18,8 +18,3 @@ export enum SHIPPING_ERROR_TYPES { INVALID_ADDRESS = 'invalid_address', UNKNOWN = 'unknown_error', } - -export type NoticeContext = { - setIsSuppressed: ( val: boolean ) => undefined; - isSuppressed: boolean; -};