Fix payment method error notices issues (https://github.com/woocommerce/woocommerce-blocks/pull/2352)
* Prevent payment method errors appearing twice. Fixes woocommerce/woocommerce-blocks#2327 * Remove payment method errors on submit. Fixes woocommerce/woocommerce-blocks#2217 * Simplify useEffect dependencies * Pass context name to removeNotice
This commit is contained in:
parent
06d84997e5
commit
2593c711ad
|
@ -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}
|
||||
|
|
|
@ -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 ) => {
|
||||
|
|
|
@ -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 ]
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue