Add clearValidationErrors action to validation data store (#7601)

* Add clearValidationErrors to validation data store actions

* Add reducer case for CLEAR_VALIDATION_ERRORS

* Add tests for CLEAR_VALIDATION_ERRORS

* Add documentation for clearValidationErrors

* Deprecate clearAllValidationErrors in actions.ts

* Remove CLEAR_VALIDATION_ERRORS action and reducer case

* Update reducer test for clearAllValidationErrors

* Make error message in test describe the test better

* Update reducer to handle CLEAR_VALIDATION_ERRORS with no error passed

* Update documentation for validation data store

* Remove unnecessary linebreaks in documentation

Author: opr

assets/js/data/validation/action-types.ts

@@ -1,7 +1,7 @@
 export const ACTION_TYPES = {
 	SET_VALIDATION_ERRORS: 'SET_VALIDATION_ERRORS',
-	CLEAR_ALL_VALIDATION_ERRORS: 'CLEAR_ALL_VALIDATION_ERRORS',
 	CLEAR_VALIDATION_ERROR: 'CLEAR_VALIDATION_ERROR',
+	CLEAR_VALIDATION_ERRORS: 'CLEAR_VALIDATION_ERRORS',
 	HIDE_VALIDATION_ERROR: 'HIDE_VALIDATION_ERROR',
 	SHOW_VALIDATION_ERROR: 'SHOW_VALIDATION_ERROR',
 	SHOW_ALL_VALIDATION_ERRORS: 'SHOW_ALL_VALIDATION_ERRORS',

assets/js/data/validation/actions.ts

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
 /**
  * Internal dependencies
  */
@@ -12,10 +17,29 @@ export const setValidationErrors = (
 	errors,
 } );
 
-export const clearAllValidationErrors = () => ( {
-	type: types.CLEAR_ALL_VALIDATION_ERRORS,
+/**
+ * Clears validation errors for the given ids.
+ *
+ * @param  errors Array of error ids to clear.
+ */
+export const clearValidationErrors = ( errors?: string[] | undefined ) => ( {
+	type: types.CLEAR_VALIDATION_ERRORS,
+	errors,
 } );
 
+export const clearAllValidationErrors = () => {
+	deprecated( 'clearAllValidationErrors', {
+		version: '9.0.0',
+		alternative: 'clearValidationErrors',
+		plugin: 'WooCommerce Blocks',
+		link: 'https://github.com/woocommerce/woocommerce-blocks/pull/7601',
+		hint: 'Calling `clearValidationErrors` with no arguments will clear all validation errors.',
+	} );
+
+	// Return clearValidationErrors which will clear all errors by defaults if no error ids are passed.
+	return clearValidationErrors();
+};
+
 export const clearValidationError = ( error: string ) => ( {
 	type: types.CLEAR_VALIDATION_ERROR,
 	error,
@@ -39,6 +63,7 @@ export type ValidationAction = ReturnOrGeneratorYieldUnion<
 	| typeof setValidationErrors
 	| typeof clearAllValidationErrors
 	| typeof clearValidationError
+	| typeof clearValidationErrors
 	| typeof hideValidationError
 	| typeof showValidationError
 	| typeof showAllValidationErrors

assets/js/data/validation/reducers.ts

@@ -33,8 +33,6 @@ const reducer: Reducer< Record< string, FieldValidationStatus > > = (
 				return state;
 			}
 			return { ...state, ...action.errors };
-		case types.CLEAR_ALL_VALIDATION_ERRORS:
-			return {};
 
 		case types.CLEAR_VALIDATION_ERROR:
 			if (
@@ -45,6 +43,20 @@ const reducer: Reducer< Record< string, FieldValidationStatus > > = (
 			}
 			delete newState[ action.error ];
 			return newState;
+		case types.CLEAR_VALIDATION_ERRORS:
+			const { errors } = action;
+			if ( typeof errors === 'undefined' ) {
+				return {};
+			}
+			if ( ! Array.isArray( errors ) ) {
+				return newState;
+			}
+			errors.forEach( ( error ) => {
+				if ( newState.hasOwnProperty( error ) ) {
+					delete newState[ error ];
+				}
+			} );
+			return newState;
 		case types.HIDE_VALIDATION_ERROR:
 			if (
 				! isString( action.error ) ||

assets/js/data/validation/test/reducers.ts

@@ -129,7 +129,8 @@ describe( 'Validation reducer', () => {
 			},
 		};
 		const clearAllErrors: ValidationAction = {
-			type: types.CLEAR_ALL_VALIDATION_ERRORS,
+			type: types.CLEAR_VALIDATION_ERRORS,
+			errors: undefined,
 		};
 		const nextState = reducer( state, clearAllErrors );
 		expect( nextState ).toEqual( {} );
@@ -155,6 +156,26 @@ describe( 'Validation reducer', () => {
 		expect( nextState ).toHaveProperty( 'testError' );
 	} );
 
+	it( 'Clears multiple validation errors', () => {
+		const state: Record< string, FieldValidationStatus > = {
+			existingError: {
+				message: 'This is an existing error message',
+				hidden: false,
+			},
+			testError: {
+				message: 'This is error should also be removed',
+				hidden: false,
+			},
+		};
+		const clearError: ValidationAction = {
+			type: types.CLEAR_VALIDATION_ERRORS,
+			errors: [ 'existingError', 'testError' ],
+		};
+		const nextState = reducer( state, clearError );
+		expect( nextState ).not.toHaveProperty( 'existingError' );
+		expect( nextState ).not.toHaveProperty( 'testError' );
+	} );
+
 	it( 'Hides a single validation error', () => {
 		const state: Record< string, FieldValidationStatus > = {
 			existingError: {

docs/third-party-developers/extensibility/data-store/validation.md

@@ -9,7 +9,7 @@
     -   [hasValidationErrors](#hasvalidationerrors)
 -   [Actions](#actions)
     -   [clearValidationError](#clearvalidationerror)
-    -   [clearAllValidationErrors](#clearallvalidationerrors)
+    -   [clearValidationErrors](#clearvalidationerrors)
     -   [setValidationErrors](#setvalidationerrors)
     -   [hideValidationError](#hidevalidationerror)
     -   [showValidationError](#showvalidationerror)
@@ -19,9 +19,7 @@
 
 The validation data store provides a way to show errors for fields in the Cart or Checkout blocks.
 
-The data in the store should be a single object, the keys of which are the _error IDs_ and values are the data
-associated with that error message. The values in the object should contain _message_ and _hidden_. The _message_
-is the error message to display and _hidden_ is a boolean indicating whether the error should be shown or not.
+The data in the store should be a single object, the keys of which are the _error IDs_ and values are the data associated with that error message. The values in the object should contain _message_ and _hidden_. The _message_ is the error message to display and _hidden_ is a boolean indicating whether the error should be shown or not.
 
 An example of how the data should be structured:
 
@@ -38,9 +36,7 @@ An example of how the data should be structured:
 }
 ```
 
-When the checkout process begins, it will check if this data store has any entries, and if so, it will stop the checkout
-process from proceeding. It will also show any errors that are hidden. Setting an error to hidden will not clear it from
-the data store!
+When the checkout process begins, it will check if this data store has any entries, and if so, it will stop the checkout process from proceeding. It will also show any errors that are hidden. Setting an error to hidden will not clear it from the data store!
 
 ## Selectors
 
@@ -66,9 +62,7 @@ const billingFirstNameError = store.getValidationError( 'billing-first-name' );
 
 ### getValidationErrorId
 
-Gets a validation error ID for use in HTML which can be used as a CSS selector, or to reference an error message.
-This will return the error ID prefixed with `validate-error-`, unless the validation error has `hidden` set to true, or
-the validation error does not exist in the store.
+Gets a validation error ID for use in HTML which can be used as a CSS selector, or to reference an error message. This will return the error ID prefixed with `validate-error-`, unless the validation error has `hidden` set to true, or the validation error does not exist in the store.
 
 #### _Parameters_
 
@@ -103,19 +97,37 @@ const store = dispatch( 'wc/store/validation' );
 store.clearValidationError( 'billing-first-name' );
 ```
 
-### clearAllValidationErrors
+### clearValidationErrors
 
-Clears all validation errors.
+Clears multiple validation errors at once. If no error IDs are passed, all validation errors will be cleared.
+
+#### _Parameters_
+
+- _errors_ `string[] | undefined` - The error IDs to clear validation errors for. This can be undefined, and if it is, all validation errors will be cleared.
+
+#### Example
+
+1. This will clear only the validation errors passed in the array.
+
+```js
+const store = dispatch( 'wc/store/validation' );
+store.clearValidationErrors( [ 'billing-first-name', 'billing-last-name', 'terms-and-conditions' ] );
+```
+
+2. This will clear all validation errors.
+
+```js
+const store = dispatch( 'wc/store/validation' );
+store.clearValidationErrors();
+```
 
 ### setValidationErrors
 
 #### _Parameters_
 
--   _errors_ `object`: An object containing new validation errors, the keys of the object are the validation error IDs,
-and the values should be objects containing _message_ (`string`) and _hidden_ `boolean`.
+-   _errors_ `object`: An object containing new validation errors, the keys of the object are the validation error IDs, and the values should be objects containing _message_ (`string`) and _hidden_ `boolean`.
 
-Sets the validation errors. The entries in _errors_ will be _added_ to the list of validation errors. Any entries that
-already exist in the list will be _updated_ with the new values.
+Sets the validation errors. The entries in _errors_ will be _added_ to the list of validation errors. Any entries that already exist in the list will be _updated_ with the new values.
 
 #### Example
 
@@ -135,15 +147,6 @@ setValidationErrors( {
 } );
 ```
 
-#### Example
-
-```js
-const { dispatch } = wp.data;
-const { clearAllValidationErrors } = dispatch( 'wc/store/validation' );
-
-clearAllValidationErrors();
-```
-
 ### hideValidationError
 
 Hides a validation error by setting the `hidden` property to `true`. This will _not_ clear it from the data store!