From d1c4b20160413fb70094f7086b6b0febc7dfa4ad Mon Sep 17 00:00:00 2001 From: ahtesham-quraish Date: Fri, 10 Mar 2023 16:40:04 +0500 Subject: [PATCH] fix: remove validation which comes from backend after clicking registration button VAN-1716 --- src/register/RegistrationPage.jsx | 11 ++++++++++- src/register/data/actions.js | 6 ++++++ src/register/data/reducers.js | 9 +++++++++ src/register/data/tests/reducers.test.js | 19 +++++++++++++++++++ src/register/tests/RegistrationPage.test.jsx | 19 +++++++++++++++++++ 5 files changed, 63 insertions(+), 1 deletion(-) diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index d82e999b..429c545e 100644 --- a/src/register/RegistrationPage.jsx +++ b/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)); diff --git a/src/register/data/actions.js b/src/register/data/actions.js index 84e06d9c..ce7a4bff 100644 --- a/src/register/data/actions.js +++ b/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 }, diff --git a/src/register/data/reducers.js b/src/register/data/reducers.js index cfaa94c0..bbd3a7ea 100644 --- a/src/register/data/reducers.js +++ b/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 { diff --git a/src/register/data/tests/reducers.test.js b/src/register/data/tests/reducers.test.js index 5e22760f..518cbd40 100644 --- a/src/register/data/tests/reducers.test.js +++ b/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'; diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx index cdf9fbab..b88e0d3e 100644 --- a/src/register/tests/RegistrationPage.test.jsx +++ b/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()); + 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'));