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 { 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 (
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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.
|
* @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
|
||||||
*
|
*
|
||||||
|
|
|
@ -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;
|
|
||||||
};
|
|
||||||
|
|
Loading…
Reference in New Issue