From 54b044bd8e7f67c7ecc4faa533e439b1ab0692f7 Mon Sep 17 00:00:00 2001
From: Mubbshar Anwar <78487564+mubbsharanwar@users.noreply.github.com>
Date: Mon, 17 May 2021 13:52:59 +0500
Subject: [PATCH] Scroll to on error message (#279)

Scroll to error message on every submit action of registration page

VAN-478
---
 src/register/RegistrationFailure.jsx         |  7 +++++--
 src/register/RegistrationPage.jsx            | 12 ++++++++++--
 src/register/tests/RegistrationPage.test.jsx |  2 ++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/register/RegistrationFailure.jsx b/src/register/RegistrationFailure.jsx
index daf10c3c..88710572 100644
--- a/src/register/RegistrationFailure.jsx
+++ b/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,
 };
 
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index cdc14a8c..332e5d9a 100644
--- a/src/register/RegistrationPage.jsx
+++ b/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 && (
             <>
diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx
index 630b7c11..fae8fe21 100644
--- a/src/register/tests/RegistrationPage.test.jsx
+++ b/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', () => {