Show validation errors on eligibility check

src/components/Shared/ValidationErrorsInfoDialog.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+
+export class ValidationErrorsInfoDialog extends React.Component {
+
+    state = {
+      open: this.props.open,
+    }
+  
+    componentWillReceiveProps(newProps){
+      this.setState({open: newProps.open});
+    }
+  
+    handleOpen = () => {
+      this.setState({ open: true });
+    };
+  
+    handleClose = () => {
+      this.setState({ open: false });
+      this.props.onDismiss();
+    };
+  
+    render() {
+  
+      const actions = [
+        <FlatButton
+          label="Dismiss"
+          primary={true}
+          keyboardFocused={true}
+          onClick={this.handleClose}
+        />,
+      ];
+  
+      return (
+        <div>
+          <Dialog
+            title="Erors"
+            actions={actions}
+            modal={this.props.modal ? this.props.modal : false}
+            open={this.state.open}
+            onRequestClose={this.handleClose}
+            overlayStyle={{backgroundColor: 'transparent'}}
+          >
+            {this.props.errorMessages.map(errorMessage => {
+              return (
+                <div>
+                  <a>{errorMessage.message}</a>
+                  <br/>
+                </div>
+              );
+            })}
+          </Dialog>
+        </div>
+      );
+    }
+  }
+
+  module.exports = ValidationErrorsInfoDialog;

src/routes/app/routes/forms/routes/steppers/components/VerticalNonLinear.js

@@ -30,6 +30,7 @@ import Close from 'material-ui/svg-icons/navigation/close'
 import CommunicationCall from 'material-ui/svg-icons/communication/call'
 import Message from 'material-ui/svg-icons/communication/message'
 import Instance from '../../../../../../../components/Connection';
+import ValidationErrorsInfoDialog from '../../../../../../../components/Shared/ValidationErrorsInfoDialog';
 import Checkbox from 'material-ui/Checkbox';
 import Popover from 'material-ui/Popover';
 
@@ -41,60 +42,6 @@ const roundingTime = 1000 * 60 * 5; //5 minutes
 
 DateTimeFormat = global.Intl.DateTimeFormat;
 
-export class ValidationErrorsInfoDialog extends React.Component {
-
-  state = {
-    open: this.props.open,
-  }
-
-  componentWillReceiveProps(newProps){
-    this.setState({open: newProps.open});
-  }
-
-  handleOpen = () => {
-    this.setState({ open: true });
-  };
-
-  handleClose = () => {
-    this.setState({ open: false });
-    this.props.onDismiss();
-  };
-
-  render() {
-
-    const actions = [
-      <FlatButton
-        label="Dismiss"
-        primary={true}
-        keyboardFocused={true}
-        onClick={this.handleClose}
-      />,
-    ];
-
-    return (
-      <div>
-        <Dialog
-          title="Erors"
-          actions={actions}
-          modal={false}
-          open={this.state.open}
-          onRequestClose={this.handleClose}
-          overlayStyle={{backgroundColor: 'transparent'}}
-        >
-          {this.props.errorMessages.map(errorMessage => {
-            return (
-              <div>
-                <a>{errorMessage.message}</a>
-                <br/>
-              </div>
-            );
-          })}
-        </Dialog>
-      </div>
-    );
-  }
-}
-
 
 export class DialogExampleSimple extends React.Component {
   state = {

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

@@ -14,6 +14,7 @@ import RaisedButton from 'material-ui/RaisedButton';
 import SelectField from 'material-ui/SelectField';
 import Checkbox from 'material-ui/Checkbox';
 import Instance from '../../../../../../../components/Connection';
+import ValidationErrorsInfoDialog from '../../../../../../../components/Shared/ValidationErrorsInfoDialog';
 
 class SignUp extends React.Component {
   constructor(props) {
@@ -34,7 +35,9 @@ class SignUp extends React.Component {
     gender: null,
     agreedTerms: false,
     validated: false,
-    memberType:"S"
+    memberType:"S",
+    showValidationErrors: false,
+    validationErrors:[]
   }
 
   componentDidMount = () => {
@@ -58,7 +61,10 @@ class SignUp extends React.Component {
       "member": this.state.member,
       "email": this.state.email,
       "phonenumber": this.state.phonenumber,
-      "birthdate": this.state.birthdate.toISOString()
+      "birthdate": this.state.birthdate.toISOString(),
+      "consent" : this.state.agreedTerms,
+      "type": this.state.memberType
+
       // "eligibility": {
       //   "tracking_id": "1234567",
       //   "payer": {
@@ -99,9 +105,14 @@ class SignUp extends React.Component {
       //   alert('NO benefits found for this member');
       // }
     }).catch(function (err) {
-      console.log('Error to get eligibility: ', err);
+      if (err.response.status === 422){
-      alert('NO benefits found for this member');
+        //Unprocessable Entity (validation failed)
-      this.handleRequestClose();
+        state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:err.response.data.data}))
+      }else{
+        console.log('Error to get eligibility: ', err);
+        alert('NO benefits found for this member');
+        this.handleRequestClose();
+      }
     });
   }
 
@@ -173,10 +184,15 @@ class SignUp extends React.Component {
     this.setState(Object.assign(this.state, { validated: validated }));
   }
 
+  handleValidationErrosDialogDismiss(){
+    this.setState(Object.assign(this.state, {showValidationErrors:false}));
+  }
+
   render() {
     return (
       <form className="">
         <fieldset>
+          <ValidationErrorsInfoDialog open = {this.state.showValidationErrors} errorMessages = {this.state.validationErrors} modal={true} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
           <div className="form-group">
             <TextField
               floatingLabelText="First Name"