diff --git a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/payment-methods/payment-method-data-context.js b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/payment-methods/payment-method-data-context.js index 5901a7640be..3fc12db1377 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/payment-methods/payment-method-data-context.js +++ b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/payment-methods/payment-method-data-context.js @@ -140,7 +140,10 @@ export const PaymentMethodDataProvider = ( { children } ) => { id: 'wc-express-payment-error', } ); } else { - removeNotice( 'wc-express-payment-error' ); + removeNotice( + 'wc-express-payment-error', + 'wc/express-payment-area' + ); } }; // ensure observers are always current. @@ -274,6 +277,7 @@ export const PaymentMethodDataProvider = ( { children } ) => { // allows for other observers that return true for continuing through // to the next observer (or bailing if there's a problem). if ( currentStatus.isProcessing ) { + removeNotice( 'wc-payment-error', noticeContexts.PAYMENTS ); emitEventWithAbort( currentObservers.current, EMIT_TYPES.PAYMENT_PROCESSING, @@ -287,6 +291,7 @@ export const PaymentMethodDataProvider = ( { children } ) => { ); } else if ( isFailResponse( response ) ) { addErrorNotice( response?.message, { + id: 'wc-payment-error', context: response?.messageContext || noticeContexts.PAYMENTS, } ); @@ -297,6 +302,7 @@ export const PaymentMethodDataProvider = ( { children } ) => { ); } else if ( isErrorResponse( response ) ) { addErrorNotice( response?.message, { + id: 'wc-payment-error', context: response?.messageContext || noticeContexts.PAYMENTS, } ); @@ -309,7 +315,7 @@ export const PaymentMethodDataProvider = ( { children } ) => { } } ); } - }, [ currentStatus, setValidationErrors, setPaymentStatus ] ); + }, [ currentStatus.isProcessing, setValidationErrors, setPaymentStatus ] ); /** * @type {PaymentMethodDataContext} diff --git a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/validation/index.js b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/validation/index.js index 2258dc3100c..9dc18ec3b3c 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/validation/index.js +++ b/plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/validation/index.js @@ -1,7 +1,12 @@ /** * External dependencies */ -import { createContext, useContext, useState } from '@wordpress/element'; +import { + createContext, + useCallback, + useContext, + useState, +} from '@wordpress/element'; import { omit, pickBy } from 'lodash'; /** @@ -71,22 +76,25 @@ export const ValidationContextProvider = ( { children } ) => { * validation error is for and values are the * validation error message displayed to the user. */ - const setValidationErrors = ( newErrors ) => { - if ( ! newErrors ) { - return; - } - // all values must be a string. - newErrors = pickBy( - newErrors, - ( { message } ) => typeof message === 'string' - ); - if ( Object.values( newErrors ).length > 0 ) { - updateValidationErrors( ( prevErrors ) => ( { - ...prevErrors, - ...newErrors, - } ) ); - } - }; + const setValidationErrors = useCallback( + ( newErrors ) => { + if ( ! newErrors ) { + return; + } + // all values must be a string. + newErrors = pickBy( + newErrors, + ( { message } ) => typeof message === 'string' + ); + if ( Object.values( newErrors ).length > 0 ) { + updateValidationErrors( ( prevErrors ) => ( { + ...prevErrors, + ...newErrors, + } ) ); + } + }, + [ updateValidationErrors ] + ); const updateValidationError = ( property, newError ) => { updateValidationErrors( ( prevErrors ) => { 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 index 082770a2f42..32ed625f9fc 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/store-notices-context.js +++ b/plugins/woocommerce-blocks/assets/js/base/context/store-notices-context.js @@ -13,7 +13,7 @@ const StoreNoticesContext = createContext( { notices: [], createNotice: ( status, text, props ) => void { status, text, props }, createSnackBarNotice: () => void null, - removeNotice: ( id ) => void id, + removeNotice: ( id, ctxt ) => void { id, ctxt }, context: 'wc/core', } ); @@ -50,8 +50,8 @@ export const StoreNoticesProvider = ( { ); const removeNoticeWithContext = useCallback( - ( id ) => { - removeNotice( id, context ); + ( id, ctxt = context ) => { + removeNotice( id, ctxt ); }, [ createNotice, context ] );