replace form validation messages with dialog

src/components/Shared/ValidationErrorsInfoDialog.js

@@ -46,12 +46,14 @@ export class ValidationErrorsInfoDialog extends React.Component {
           overlayStyle={{ backgroundColor: 'transparent' }}
         >
           {this.props.errorMessages.map(errorMessage => {
-            return (
+            const oneValidationMessage = (<span><a>{errorMessage.message}</a><br /></span>);
-              <div>
+            const oneValidationMessageWithTab = (<span><li style={{ marginLeft: 2 + "em" }}>{errorMessage.message}</li></span>);
-                <a>{errorMessage.message}</a>
+
-                <br />
+            if (errorMessage.field_name === "password-tab") {
-              </div>
+              return oneValidationMessageWithTab;
-            );
+            } else {
+              return oneValidationMessage;
+            }
           })}
         </Dialog>
       </div>

src/routes/app/routes/pages/routes/eligibility/components/eligibility.js

@@ -37,8 +37,7 @@ class SignUp extends React.Component {
     validated: false,
     memberType:"S",
     showValidationErrors: false,
-    validationErrors:[],
+    validationErrors:[]
-    draggableDialog:false
   }
 
   componentDidMount = () => {
@@ -64,8 +63,7 @@ class SignUp extends React.Component {
       "phonenumber": this.state.phonenumber,
       "birthdate": this.state.birthdate.toISOString(),
       "consent" : this.state.agreedTerms,
-      "type": this.state.memberType,
+      "type": this.state.memberType
-      "useruuid": "1234567"
 
       // "eligibility": {
       //   "tracking_id": "1234567",
@@ -107,26 +105,13 @@ class SignUp extends React.Component {
       //   alert('NO benefits found for this member');
       // }
     }).catch(function (err) {
-      switch(err.response.status){
+      if (err.response.status === 422){
-        case 403:
+        //Unprocessable Entity (validation failed)
-          //Forbidden (not eligible)
+        state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:err.response.data.data}))
-          console.log(err.response.data);
+      }else{
-          let messageArray = [
+        console.log('Error to get eligibility: ', err);
-            {
+        alert('NO benefits found for this member');
-              message:err.response.data.message
+        this.handleRequestClose();
-            }
-          ]
-          state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:messageArray, draggableDialog:false}))
-          break;
-        case 422:
-          //Unprocessable Entity (validation failed)
-          state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:err.response.data.data, draggableDialog:true}))
-          break;
-        
-        default:
-          console.log('Error to get eligibility: ', err);
-          alert('NO benefits found for this member');
-          this.handleRequestClose();
       }
     });
   }
@@ -207,7 +192,7 @@ class SignUp extends React.Component {
     return (
       <form className="">
         <fieldset>
-          <ValidationErrorsInfoDialog open = {this.state.showValidationErrors} errorMessages = {this.state.validationErrors} draggable={this.state.draggableDialog} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
+          <ValidationErrorsInfoDialog open = {this.state.showValidationErrors} errorMessages = {this.state.validationErrors} modal={true} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
           <div className="form-group">
             <TextField
               floatingLabelText="First Name"

src/routes/selfRegister/components/SignUp.js

@@ -17,6 +17,8 @@ import Toggle from 'material-ui/Toggle';
 import Snackbar from 'material-ui/Snackbar';
 import Instance from '../../../components/Connection';
 
+import ValidationErrorsInfoDialog from '../../../components/Shared/ValidationErrorsInfoDialog';
+
 class SignUp extends React.Component {
   constructor(props) {
     super(props);
@@ -144,29 +146,13 @@ class SignUp extends React.Component {
     });
   }
 
-  handleDismiss() {
+  handleValidationErrosDialogDismiss() {
-    this.setState(Object.assign(this.state, { showErrorMessage: false }));
+    this.setState(Object.assign(this.state, {
+      showValidationErrors: false
+    }));
   }
 
   render() {
-    let validationErrors = null;
-    if (this.state.showValidationErrors) {
-      validationErrors = (
-        <ul>
-          {this.state.validationErrors.map(errorMessage => {
-            const oneValidationMessage = (<li>{errorMessage.message}</li>);
-            const oneValidationMessageWithTab = (<span><li style={{ marginLeft: 2 + "em" }}>{errorMessage.message}</li></span>);
-
-            if (errorMessage.field_name === "password-tab") {
-              return oneValidationMessageWithTab;
-            } else {
-              return oneValidationMessage;
-            }
-          })}
-        </ul>
-      );
-    }
-
     return (
       <div className="body-inner">
 
@@ -245,10 +231,7 @@ class SignUp extends React.Component {
                 <div className="form-group">
                   <p className="text-small">By clicking on sign up, you agree to <a href="javascript:;"><i>terms</i></a> and <a href="javascript:;"><i>privacy policy</i></a></p>
                 </div>
-                <div className="divider" />
+                <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />
-                <div className="form-group">
-                  {validationErrors}
-                </div>
               </fieldset>
             </form>
           </div>