integrate draggable dialog package

package.json

@@ -57,8 +57,8 @@
     "react": "^15.5.4",
     "react-cookie": "^2.1.2",
     "react-data-components": "^1.1.1",
+    "react-dialog": "^1.0.2",
     "react-dom": "^15.5.4",
-    "react-draggable": "^3.0.5",
     "react-geosuggest": "^2.5.0",
     "react-geosuggest-sw": "^1.4.13",
     "react-google-maps": "^7.2.0",

src/components/Shared/ValidationErrorsInfoDialog.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import Draggable, { DraggableCore } from 'react-draggable'; // Both at the same time
+import Dialog from 'react-dialog'
+
+import 'react-dialog/css/index.css';
 
 export class ValidationErrorsInfoDialog extends React.Component {
 
@@ -23,7 +24,7 @@ export class ValidationErrorsInfoDialog extends React.Component {
     };
   
     render() {
-  
+
       const actions = [
         <FlatButton
           label="Dismiss"
@@ -34,24 +35,25 @@ export class ValidationErrorsInfoDialog extends React.Component {
       ];
   
       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 className="container">
+            {
+                this.state.open &&
+                <Dialog
+                    title={this.props.title ? this.props.title : 'Error'}
+                    isDraggable={this.props.draggable ? this.props.draggable : false}
+                    buttons={actions}
+                    hasCloseIcon={false}
+                >
+                    {this.props.errorMessages.map(errorMessage => {
+                      return (
+                        <div>
+                          <a>{errorMessage.message}</a>
+                          <br/>
+                        </div>
+                      );})
+                    }
+                </Dialog>
+            }
         </div>
       );
     }

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

@@ -405,8 +405,9 @@ class VerticalNonLinear extends React.Component {
       },
       return_time: new Date(),
       pickupTimeHide: false,
-      showValidationErrors: false,
-      validationErrors: [],
+      showValidationErrors:false,
+      validationErrors:[],
+      draggableDialog: false
     };
   }
 
@@ -524,8 +525,9 @@ class VerticalNonLinear extends React.Component {
           if (error.response.status === 422) {
             //Unprocessable Entity (validation failed)
             self.setState(Object.assign(self.state, {
-              showValidationErrors: true,
-              validationErrors: error.response.data.data
+              showValidationErrors:true,
+              validationErrors:error.response.data.data,
+              draggableDialog:true,
             }));
           }
         });
@@ -896,8 +898,8 @@ class VerticalNonLinear extends React.Component {
           <div className="box-body padding-xs">
 
             <div style={{ maxWidth: 380, margin: 'auto' }}>
-              <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />
-
+            <ValidationErrorsInfoDialog title={'Errors'} open = {this.state.showValidationErrors} draggable={this.state.draggableDialog} errorMessages = {this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
+              
               <Stepper
                 activeStep={this.state.stepIndex}
                 linear={false}

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 = () => {
@@ -107,7 +108,7 @@ class SignUp extends React.Component {
     }).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}))
+        state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:err.response.data.data, draggableDialog:false}))
       }else{
         console.log('Error to get eligibility: ', err);
         alert('NO benefits found for this member');
@@ -192,7 +193,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"