show error if member is not eligible

src/components/Shared/ValidationErrorsInfoDialog.js

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

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

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

src/routes/selfRegister/components/SignUp.js

@@ -17,8 +17,6 @@ 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);
@@ -146,13 +144,29 @@ class SignUp extends React.Component {
     });
   }
 
-  handleValidationErrosDialogDismiss() {
+  handleDismiss() {
-    this.setState(Object.assign(this.state, {
+    this.setState(Object.assign(this.state, { showErrorMessage: false }));
-      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">
 
@@ -231,7 +245,10 @@ 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>
-                <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />
+                <div className="divider" />
+                <div className="form-group">
+                  {validationErrors}
+                </div>
               </fieldset>
             </form>
           </div>