Scroll to on error message (#279)

Scroll to error message on every submit action of registration page

VAN-478

src/register/RegistrationFailure.jsx

@@ -10,11 +10,13 @@ import messages from './messages';
 import { windowScrollTo } from '../data/utils';
 
 const RegistrationFailureMessage = (props) => {
-  const { context, errorCode, intl } = props;
+  const {
+    context, errorCode, failureCount, intl,
+  } = props;
 
   useEffect(() => {
     windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
-  }, [errorCode]);
+  }, [errorCode, failureCount]);
 
   let errorMessage;
   switch (errorCode) {
@@ -50,6 +52,7 @@ RegistrationFailureMessage.propTypes = {
     provider: PropTypes.string,
   }),
   errorCode: PropTypes.string.isRequired,
+  failureCount: PropTypes.number.isRequired,
   intl: intlShape.isRequired,
 };
 

src/register/RegistrationPage.jsx

@@ -67,6 +67,7 @@ class RegistrationPage extends React.Component {
         country: '',
       },
       errorCode: null,
+      failureCount: 0,
       institutionLogin: false,
       optionalFields,
       optionalFieldsState: {},
@@ -179,7 +180,10 @@ class RegistrationPage extends React.Component {
     });
 
     if (!this.isFormValid(errors)) {
-      this.setState({ errorCode: FORM_SUBMISSION_ERROR });
+      this.setState(prevState => ({
+        errorCode: FORM_SUBMISSION_ERROR,
+        failureCount: prevState.failureCount + 1,
+      }));
       return;
     }
 
@@ -378,7 +382,11 @@ class RegistrationPage extends React.Component {
         />
         <div className="mw-xs mt-3">
           {this.state.errorCode ? (
-            <RegistrationFailure errorCode={this.state.errorCode} context={{ provider: currentProvider }} />
+            <RegistrationFailure
+              errorCode={this.state.errorCode}
+              failureCount={this.state.failureCount}
+              context={{ provider: currentProvider }}
+            />
           ) : null}
           {currentProvider && (
             <>

src/register/tests/RegistrationPage.test.jsx

@@ -192,8 +192,10 @@ describe('RegistrationPage', () => {
       expect(registrationPage.find('div[feedback-for="country"]').text()).toEqual(emptyFieldValidation.country);
 
       const alertBanner = 'We couldn\'t create your account.Please check your responses and try again.';
+      registrationPage.find('RegistrationPage').setState({ failureCount: 1 });
 
       expect(registrationPage.find('#validation-errors').first().text()).toEqual(alertBanner);
+      expect(registrationPage.find('RegistrationPage').state('failureCount')).toEqual(1);
     });
 
     it('should update errors for frontend validations', () => {