Remove Notices context

This commit is contained in:
Alex Florisca 2022-08-22 15:07:13 +01:00
parent 28659ee653
commit b927fcfe80
5 changed files with 8 additions and 79 deletions

View File

@ -33,7 +33,6 @@ import { useCheckoutEventsContext } from './checkout-events';
import { useShippingDataContext } from './shipping'; import { useShippingDataContext } from './shipping';
import { useCustomerDataContext } from './customer'; import { useCustomerDataContext } from './customer';
import { useStoreCart } from '../../hooks/cart/use-store-cart'; import { useStoreCart } from '../../hooks/cart/use-store-cart';
import { useStoreNoticesContext } from '../store-notices';
/** /**
* CheckoutProcessor component. * CheckoutProcessor component.
@ -71,7 +70,6 @@ const CheckoutProcessor = () => {
const { shippingErrorStatus } = useShippingDataContext(); const { shippingErrorStatus } = useShippingDataContext();
const { billingAddress, shippingAddress } = useCustomerDataContext(); const { billingAddress, shippingAddress } = useCustomerDataContext();
const { cartNeedsPayment, cartNeedsShipping, receiveCart } = useStoreCart(); const { cartNeedsPayment, cartNeedsShipping, receiveCart } = useStoreCart();
const { setIsSuppressed } = useStoreNoticesContext();
const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' ); const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
const { const {
@ -118,11 +116,6 @@ const CheckoutProcessor = () => {
( currentPaymentStatus.isSuccessful || ! cartNeedsPayment ) && ( currentPaymentStatus.isSuccessful || ! cartNeedsPayment ) &&
checkoutIsProcessing; checkoutIsProcessing;
// If express payment method is active, let's suppress notices
useEffect( () => {
setIsSuppressed( isExpressPaymentMethodActive );
}, [ isExpressPaymentMethodActive, setIsSuppressed ] );
// Determine if checkout has an error. // Determine if checkout has an error.
useEffect( () => { useEffect( () => {
if ( if (

View File

@ -2,15 +2,16 @@
* External dependencies * External dependencies
*/ */
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useDispatch, useSelect } from '@wordpress/data';
import classnames from 'classnames'; import classnames from 'classnames';
import { Notice } from 'wordpress-components'; import { Notice } from 'wordpress-components';
import { sanitize } from 'dompurify'; import { sanitize } from 'dompurify';
import { useDispatch, useSelect } from '@wordpress/data';
import { PAYMENT_METHOD_DATA_STORE_KEY } from '@woocommerce/block-data';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import './style.scss'; import './style.scss';
import { useStoreNoticesContext } from '../context';
const ALLOWED_TAGS = [ 'a', 'b', 'em', 'i', 'strong', 'p', 'br' ]; const ALLOWED_TAGS = [ 'a', 'b', 'em', 'i', 'strong', 'p', 'br' ];
const ALLOWED_ATTR = [ 'target', 'href', 'rel', 'name', 'download' ]; const ALLOWED_ATTR = [ 'target', 'href', 'rel', 'name', 'download' ];
@ -39,7 +40,9 @@ export const StoreNoticesContainer = ( {
context = 'default', context = 'default',
additionalNotices = [], additionalNotices = [],
} ) => { } ) => {
const { isSuppressed } = useStoreNoticesContext(); const isExpressPaymentMethodActive = useSelect( ( select ) =>
select( PAYMENT_METHOD_DATA_STORE_KEY ).isExpressPaymentMethodActive()
);
const { notices } = useSelect( ( select ) => { const { notices } = useSelect( ( select ) => {
const store = select( 'core/notices' ); const store = select( 'core/notices' );
@ -58,7 +61,8 @@ export const StoreNoticesContainer = ( {
const wrapperClass = classnames( className, 'wc-block-components-notices' ); 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 : (
<div className={ wrapperClass }> <div className={ wrapperClass }>
{ regularNotices.map( ( props ) => ( { regularNotices.map( ( props ) => (
<Notice <Notice

View File

@ -1,56 +0,0 @@
/**
* External dependencies
*/
import PropTypes from 'prop-types';
import { createContext, useContext, useState } from '@wordpress/element';
/**
* @typedef {import('@woocommerce/type-defs/contexts').NoticeContext} NoticeContext
* @typedef {import('react')} React
*/
const StoreNoticesContext = createContext( {
setIsSuppressed: ( val ) => 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 (
<StoreNoticesContext.Provider value={ contextValue }>
{ children }
</StoreNoticesContext.Provider>
);
};
StoreNoticesProvider.propTypes = {
children: PropTypes.node,
};

View File

@ -213,13 +213,6 @@
* @property {string} id The id of the notice. * @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 * @typedef {Object} ContainerWidthContext
* *

View File

@ -18,8 +18,3 @@ export enum SHIPPING_ERROR_TYPES {
INVALID_ADDRESS = 'invalid_address', INVALID_ADDRESS = 'invalid_address',
UNKNOWN = 'unknown_error', UNKNOWN = 'unknown_error',
} }
export type NoticeContext = {
setIsSuppressed: ( val: boolean ) => undefined;
isSuppressed: boolean;
};