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

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}

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 ) => {
+	const setValidationErrors = useCallback(
-		if ( ! newErrors ) {
+		( newErrors ) => {
-			return;
+			if ( ! newErrors ) {
-		}
+				return;
-		// all values must be a string.
+			}
-		newErrors = pickBy(
+			// all values must be a string.
-			newErrors,
+			newErrors = pickBy(
-			( { message } ) => typeof message === 'string'
+				newErrors,
-		);
+				( { message } ) => typeof message === 'string'
-		if ( Object.values( newErrors ).length > 0 ) {
+			);
-			updateValidationErrors( ( prevErrors ) => ( {
+			if ( Object.values( newErrors ).length > 0 ) {
-				...prevErrors,
+				updateValidationErrors( ( prevErrors ) => ( {
-				...newErrors,
+					...prevErrors,
-			} ) );
+					...newErrors,
-		}
+				} ) );
-	};
+			}
+		},
+		[ updateValidationErrors ]
+	);
 
 	const updateValidationError = ( property, newError ) => {
 		updateValidationErrors( ( prevErrors ) => {

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 ) => {
+		( id, ctxt = context ) => {
-			removeNotice( id, context );
+			removeNotice( id, ctxt );
 		},
 		[ createNotice, context ]
 	);