Remove Notices context
This commit is contained in:
parent
28659ee653
commit
b927fcfe80
|
@ -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 (
|
||||
|
|
|
@ -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 : (
|
||||
<div className={ wrapperClass }>
|
||||
{ regularNotices.map( ( props ) => (
|
||||
<Notice
|
||||
|
|
|
@ -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,
|
||||
};
|
|
@ -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
|
||||
*
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue