Upstream sync

src/client.js

@@ -65,6 +65,7 @@ const rootRoute = {
       require('./routes/lockScreen'),
       require('./routes/login'),
       require('./routes/signUp'),
+      require('./routes/selfRegister'),
       require('./routes/fullscreen'),
       require('./routes/ride'),
       require('./routes/ready'),

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);
-      alert('NO benefits found for this member');
-      this.handleRequestClose();
+      if (err.response.status === 422){
+        //Unprocessable Entity (validation failed)
+        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"

src/routes/selfRegister/components/SignUp.js

@@ -0,0 +1,284 @@
+import React from 'react';
+import { browserHistory, Redirect } from 'react-router';
+import APPCONFIG from 'constants/Config';
+import TextField from 'material-ui/TextField';
+import QueueAnim from 'rc-queue-anim';
+
+import AutoComplete from 'material-ui/AutoComplete';
+import MenuItem from 'material-ui/MenuItem';
+import SelectField from 'material-ui/SelectField';
+import { Tabs, Tab } from 'material-ui/Tabs';
+import Slider from 'material-ui/Slider';
+import TimePicker from 'material-ui/TimePicker';
+import DatePicker from 'material-ui/DatePicker';
+import RaisedButton from 'material-ui/RaisedButton';
+
+import Toggle from 'material-ui/Toggle';
+import Snackbar from 'material-ui/Snackbar';
+import Instance from '../../../components/Connection';
+
+class SignUp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+
+    this.state = {
+      "provider_name": "",
+      "provider_npi": "",
+      "name": "",
+      "first": "",
+      "last": "",
+      "gender": "",
+      "member": "",
+      "email": "",
+      "phone_number": "",
+      "pass": "",
+      "birthdate": new Date(),
+      "validated": false,
+      "password_validated": false,
+      "passConfirmation": "",
+      "organizationType": { name: "", key: "provider", desc: "" },
+      showValidationErrors: false,
+      validationErrors: []
+    }
+
+    this.buttonValidated = this.buttonValidated.bind(this);
+    this.handleFirst = this.handleFirst.bind(this);
+    this.handleLast = this.handleLast.bind(this);
+    this.handleEmail = this.handleEmail.bind(this);
+    this.handlePhone = this.handlePhone.bind(this);
+    this.handlePass = this.handlePass.bind(this);
+    this.handleConfirmationPass = this.handleConfirmationPass.bind(this);
+    this.handleProviderName = this.handleProviderName.bind(this);
+    this.handleProviderNPI = this.handleProviderNPI.bind(this);
+    this.clickEvent = this.clickEvent.bind(this);
+  }
+
+  componentDidMount = () => {
+  }
+
+  buttonValidated = () => {
+    let validated = true;
+    if (!this.state.provider_name || this.state.provider_name === null || this.state.provider_name === "") validated = false;
+    if (!this.state.provider_npi || this.state.provider_npi === null || this.state.provider_npi === "") validated = false;
+    if (!this.state.email || this.state.email === null || this.state.email === "") validated = false;
+    if (!this.state.phone_number || this.state.phone_number === null || this.state.phone_number === "") validated = false;
+    if (!this.state.first || this.state.first === null || this.state.first === "") validated = false;
+    if (!this.state.last || this.state.last === null || this.state.last === "") validated = false;
+    if (!this.state.password_validated || !this.state.pass || this.state.pass === null || this.state.pass === "") validated = false;
+
+    this.setState(Object.assign(this.state, { validated: validated }));
+  }
+
+  handleProviderName = (event) => {
+    this.setState(Object.assign(this.state, { provider_name: event.target.value }));
+  };
+
+  handleProviderNPI = (event) => {
+    this.setState(Object.assign(this.state, { provider_npi: event.target.value }));
+  };
+
+  handleFirst = (event) => {
+    this.setState(Object.assign(this.state, { first: event.target.value }));
+  };
+
+  handleLast = (event) => {
+    this.setState(Object.assign(this.state, { last: event.target.value }));
+  };
+
+  handleEmail = (event) => {
+    this.setState(Object.assign(this.state, { email: event.target.value }));
+  };
+
+  handlePhone = (event) => {
+    let phone = event.target.value;
+    if (phone.indexOf("+1") < 0 && phone.length == 10) {
+      phone = "+1" + phone;
+      phone = phone.substring(0, 12);
+    }
+
+    this.setState(Object.assign(this.state, { phone_number: phone }));
+  };
+
+  handlePass = (event) => {
+    this.setState(Object.assign(this.state, { pass: btoa(event.target.value) }));
+    this.setState(Object.assign(this.state, { password_validated: this.state.pass === this.state.passConfirmation }));
+  };
+
+  handleConfirmationPass = (event) => {
+    this.setState(Object.assign(this.state, { passConfirmation: btoa(event.target.value) }));
+    this.setState(Object.assign(this.state, { password_validated: this.state.pass === this.state.passConfirmation }));
+  };
+
+  clickEvent = (event) => {
+    event.preventDefault();
+    const state = this;
+
+    let user = {
+      "provider":
+        {
+          "org_name": this.state.provider_name,
+          "internal_id": this.state.provider_npi
+        },
+      "name": this.state.first + ' ' + this.state.last,
+      "first": this.state.first,
+      "last": this.state.last,
+      "email": this.state.email,
+      "phonenumber": this.state.phone_number,
+      "pass": this.state.pass,
+    };
+
+    Instance.getRawConn().post('/v1/selfregister/', user).then(function (res) {
+      localStorage.removeItem('loggedUser');
+      location.href = '/#/login';
+    }).catch(function (err) {
+      if (err.response.status === 422) {
+        //Unprocessable Entity (validation failed)
+        state.setState(Object.assign(state.state, {
+          showValidationErrors: true,
+          validationErrors: err.response.data.data
+        }));
+      } else {
+        alert('Error to log in: ' + err.message);
+      }
+      console.error(err);
+    });
+  }
+
+  handleDismiss() {
+    this.setState(Object.assign(this.state, { showErrorMessage: 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">
+
+        <div className="card bg-white">
+          <div className="card-content">
+            <section className="logo text-center">
+              <h1><a href="#/">CHMHub®</a></h1>
+            </section>
+
+            <form className="form-horizontal">
+              <fieldset>
+                <div className="form-group">
+                  <TextField
+                    floatingLabelText="Provider Organization Name"
+                    fullWidth
+                    onChange={this.handleProviderName}
+                    onBlur={this.buttonValidated}
+                  />
+                </div>
+                <div className="form-group">
+                  <TextField
+                    floatingLabelText="Provider NPI"
+                    type="number"
+                    onChange={this.handleProviderNPI}
+                    onBlur={this.buttonValidated}
+                  />
+                </div>
+                <div className="form-group">
+                  <TextField
+                    floatingLabelText="First Name"
+                    fullWidth
+                    onChange={this.handleFirst}
+                    onBlur={this.buttonValidated}
+                  />
+                </div>
+                <div className="form-group">
+                  <TextField
+                    floatingLabelText="Last Name"
+                    fullWidth
+                    onChange={this.handleLast}
+                    onBlur={this.buttonValidated}
+                  />
+                </div>
+                <div className="form-group">
+                  <TextField
+                    floatingLabelText="Your Work Email"
+                    type="email"
+                    fullWidth
+                    onChange={this.handleEmail}
+                    onBlur={this.buttonValidated}
+                  />
+                </div>
+                <div className="form-group">
+                  <TextField
+                    floatingLabelText="Your Mobile Phone"
+                    type="telephone"
+                    onChange={this.handlePhone}
+                    onBlur={this.buttonValidated}
+                  />
+                </div>
+                <div className="form-group">
+                  <TextField
+                    floatingLabelText="Choose Password"
+                    type="password"
+                    onChange={this.handlePass}
+                    onBlur={this.buttonValidated}
+                  />
+                  <TextField
+                    floatingLabelText="Verify Password"
+                    type="password"
+                    onChange={this.handleConfirmationPass}
+                    onBlur={this.buttonValidated}
+                  />
+                </div>
+                <div className="divider" />
+                <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" />
+                <div className="form-group">
+                  {validationErrors}
+                </div>
+              </fieldset>
+            </form>
+          </div>
+          <div className="card-action no-border text-right">
+            <a href="#/login" className="color-gray-light">Login</a>
+            <RaisedButton
+              label="Sign up"
+              primary={true}
+              onClick={this.clickEvent}
+              disabled={!this.state.validated}
+            />
+          </div>
+        </div>
+
+      </div>
+    );
+  }
+}
+
+const Page = () => (
+  <div className="page-login">
+    <div className="main-body">
+      <QueueAnim type="bottom" className="ui-animate">
+        <div key="1">
+          <SignUp />
+        </div>
+      </QueueAnim>
+    </div>
+  </div>
+);
+
+module.exports = Page;

src/routes/selfRegister/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+  path: 'selfRegister',
+  getComponent(nextState, cb) {
+    require.ensure([], (require) => {
+      cb(null, require('./components/SignUp'));
+    });
+  }
+};