fix: remove validation which comes from backend after clicking registration button

VAN-1716

src/register/RegistrationPage.jsx

@@ -30,6 +30,7 @@ import {
 import ConfigurableRegistrationForm from './ConfigurableRegistrationForm';
 import {
   backupRegistrationFormBegin,
+  clearRegistertionBackendError,
   clearUsernameSuggestions,
   fetchRealtimeValidations,
   registerNewUser,
@@ -58,6 +59,7 @@ const RegistrationPage = (props) => {
     intl,
     institutionLogin,
     optionalFields,
+    registrationError,
     registrationErrorCode,
     registrationResult,
     shouldBackupState,
@@ -72,6 +74,7 @@ const RegistrationPage = (props) => {
     getRegistrationDataFromBackend,
     userPipelineDataLoaded,
     validateFromBackend,
+    clearBackendError,
   } = props;
 
   const countryList = useMemo(() => getCountryList(getLocale()), []);
@@ -357,7 +360,10 @@ const RegistrationPage = (props) => {
   const handleOnChange = (event) => {
     const { name } = event.target;
     let value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
-
+    if (registrationError[name]) {
+      clearBackendError(name);
+      setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
+    }
     if (name === 'username') {
       if (value.length > 30) {
         return;
@@ -387,6 +393,7 @@ const RegistrationPage = (props) => {
   const handleOnFocus = (event) => {
     const { name, value } = event.target;
     setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
+    clearBackendError(name);
     // Since we are removing the form errors from the focused field, we will
     // need to rerun the validation for focused field on form submission.
     setFocusedField(name);
@@ -594,6 +601,7 @@ const mapStateToProps = state => {
     backendCountryCode: registerPageState.backendCountryCode,
     backendValidations: validationsSelector(state),
     fieldDescriptions: fieldDescriptionSelector(state),
+    registrationError: registerPageState.registrationError,
     optionalFields: optionalFieldsSelector(state),
     registrationErrorCode: registrationErrorSelector(state),
     registrationResult: registerPageState.registrationResult,
@@ -707,5 +715,6 @@ export default connect(
     validateFromBackend: fetchRealtimeValidations,
     registerNewUser,
     setUserPipelineDetailsLoaded: setUserPipelineDataLoaded,
+    clearBackendError: clearRegistertionBackendError,
   },
 )(injectIntl(RegistrationPage));

src/register/data/actions.js

@@ -4,6 +4,7 @@ export const BACKUP_REGISTRATION_DATA = new AsyncActionType('REGISTRATION', 'BAC
 export const REGISTER_FORM_VALIDATIONS = new AsyncActionType('REGISTRATION', 'GET_FORM_VALIDATIONS');
 export const REGISTER_NEW_USER = new AsyncActionType('REGISTRATION', 'REGISTER_NEW_USER');
 export const REGISTER_CLEAR_USERNAME_SUGGESTIONS = 'REGISTRATION_CLEAR_USERNAME_SUGGESTIONS';
+export const REGISTERATION_CLEAR_BACKEND_ERROR = 'REGISTERATION_CLEAR_BACKEND_ERROR';
 export const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';
 export const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';
 
@@ -61,6 +62,11 @@ export const clearUsernameSuggestions = () => ({
   type: REGISTER_CLEAR_USERNAME_SUGGESTIONS,
 });
 
+export const clearRegistertionBackendError = (fieldName) => ({
+  type: REGISTERATION_CLEAR_BACKEND_ERROR,
+  payload: fieldName,
+});
+
 export const setCountryFromThirdPartyAuthContext = (countryCode) => ({
   type: REGISTER_SET_COUNTRY_CODE,
   payload: { countryCode },

src/register/data/reducers.js

@@ -8,6 +8,7 @@ import {
   REGISTER_FORM_VALIDATIONS,
   REGISTER_NEW_USER,
   REGISTER_SET_COUNTRY_CODE, REGISTER_SET_USER_PIPELINE_DATA_LOADED,
+  REGISTERATION_CLEAR_BACKEND_ERROR,
 } from './actions';
 
 export const defaultState = {
@@ -72,6 +73,14 @@ const reducer = (state = defaultState, action) => {
         usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
       };
     }
+    case REGISTERATION_CLEAR_BACKEND_ERROR: {
+      const registrationErrorTemp = state.registrationError;
+      delete registrationErrorTemp[action.payload];
+      return {
+        ...state,
+        registrationError: { ...registrationErrorTemp },
+      };
+    }
     case REGISTER_FORM_VALIDATIONS.SUCCESS: {
       const { usernameSuggestions, ...validationWithoutUsernameSuggestions } = action.payload.validations;
       return {

src/register/data/tests/reducers.test.js

@@ -1,3 +1,5 @@
+import { getConfig } from '@edx/frontend-platform';
+
 import { DEFAULT_STATE } from '../../../data/constants';
 import {
   BACKUP_REGISTRATION_DATA,
@@ -5,6 +7,7 @@ import {
   REGISTER_FORM_VALIDATIONS,
   REGISTER_NEW_USER,
   REGISTER_SET_COUNTRY_CODE,
+  REGISTERATION_CLEAR_BACKEND_ERROR,
 } from '../actions';
 import reducer from '../reducers';
 
@@ -102,6 +105,22 @@ describe('Registration Reducer Tests', () => {
     expect(reducer(state, action)).toEqual(state);
   });
 
+  it('should reset email error field data on focus of email field', () => {
+    const state = {
+      ...defaultState,
+      registrationError: { email: `This email is already associated with an existing or previous ${ getConfig().SITE_NAME } account` },
+    };
+    const action = {
+      type: REGISTERATION_CLEAR_BACKEND_ERROR,
+      payload: 'email',
+    };
+
+    expect(reducer(state, action)).toEqual({
+      ...state,
+      registrationError: {},
+    });
+  });
+
   it('should set country code', () => {
     const countryCode = 'PK';
 

src/register/tests/RegistrationPage.test.jsx

@@ -959,6 +959,25 @@ describe('RegistrationPage', () => {
       expect(registrationPage.find('div[feedback-for="country"]').exists()).toBeFalsy();
     });
 
+    it('should clear the registation validation error on change event on field focused', () => {
+      store = mockStore({
+        ...initialState,
+        register: {
+          ...initialState.register,
+          registrationError: {
+            errorCode: 'duplicate-email',
+            email: [{ userMessage: `This email is already associated with an existing or previous ${ getConfig().SITE_NAME } account` }],
+          },
+        },
+      });
+
+      store.dispatch = jest.fn(store.dispatch);
+      const clearBackendError = jest.fn();
+      const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} {...clearBackendError} />));
+      registrationPage.find('input#email').simulate('change', { target: { value: 'a@gmail.com', name: 'email' } });
+      expect(registrationPage.find('div[feedback-for="email"]').exists()).toBeFalsy();
+    });
+
     it('should set country in component state when form is translated using browser translations', () => {
       getLocale.mockImplementation(() => ('en-us'));