@plusscommunities/pluss-maintenance-web 1.0.23 → 1.0.27-beta.0

package/dist/index.esm.js

@@ -9,13 +9,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
 import _ from 'lodash';
 import moment from 'moment';
 import FontAwesome from 'react-fontawesome';
 import * as PlussCore from '@plusscommunities/pluss-core-web';
 import Cookies from 'js-cookie';
 import { Table, MenuItem, DropdownButton } from 'react-bootstrap';
-import { withRouter } from 'react-router';
 import { Link } from 'react-router-dom';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import Textarea from 'react-textarea-autosize';
@@ -277,13 +277,14 @@ var maintenanceActions = {
 var Helper$3 = PlussCore.Helper,
     Session$5 = PlussCore.Session;
 var reactionActions = {
-  addComment: function addComment(entityId, entityType, entityName, site, comment, image) {
+  addComment: function addComment(entityId, entityType, entityName, site, comment, image, parentId) {
     var data = {
       entityId: entityId,
       entityType: entityType,
       entityName: entityName,
       site: site,
-      comment: comment
+      comment: comment,
+      parentId: parentId
     };
 
     if (!_.isEmpty(image)) {
@@ -424,8 +425,7 @@ var StatusTypes = {
 function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var Session$4 = PlussCore.Session,
-    Components$4 = PlussCore.Components;
+var Session$4 = PlussCore.Session;
 
 var JobList = /*#__PURE__*/function (_Component) {
   _inherits(JobList, _Component);
@@ -533,10 +533,6 @@ var JobList = /*#__PURE__*/function (_Component) {
       };
     }());
 
-    _defineProperty(_assertThisInitialized(_this), "onOpenJobTypes", function () {
-      _this.props.history.push('/requestTypes');
-    });
-
     _this.state = {
       showCompleted: false,
       sortColumn: 'createdUnix',
@@ -676,27 +672,6 @@ var JobList = /*#__PURE__*/function (_Component) {
         }
       }, "Example might be; Fix my light bulb, hand rail is broken, or please send flowers to Mum."));
     }
-  }, {
-    key: "renderButtons",
-    value: function renderButtons() {
-      if (!Session$4.validateAccess(this.props.auth.site, 'maintenanceTypes', this.props.auth)) return null;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex-reverse"
-      }, /*#__PURE__*/React.createElement(Components$4.Button, {
-        inline: true,
-        buttonType: "primaryAction",
-        onClick: this.onOpenJobTypes,
-        isActive: true
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "flex flex-row flex-center"
-      }, /*#__PURE__*/React.createElement(Components$4.SVGIcon, {
-        colour: '#fff',
-        icon: "maintenance2",
-        height: "17px"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "marginLeft-10"
-      }, "Request Types"))));
-    }
   }, {
     key: "renderContent",
     value: function renderContent() {
@@ -768,7 +743,9 @@ var JobList = /*#__PURE__*/function (_Component) {
         style: {
           minWidth: '100%'
         }
-      }, this.renderButtons(), this.renderContent());
+      }, this.renderContent(), /*#__PURE__*/React.createElement("div", {
+        className: "hub_tidioPadding"
+      }));
     }
   }]);
 
@@ -792,1308 +769,1235 @@ var JobList$1 = connect(mapStateToProps$4, {
 function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct$9() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var Components$3 = PlussCore.Components,
-    Session$3 = PlussCore.Session;
+var Session$3 = PlussCore.Session,
+    Components$3 = PlussCore.Components,
+    Helper$2 = PlussCore.Helper;
 
-var RequestsHub = /*#__PURE__*/function (_Component) {
-  _inherits(RequestsHub, _Component);
+var JobTypes = /*#__PURE__*/function (_Component) {
+  _inherits(JobTypes, _Component);
 
-  var _super = _createSuper$9(RequestsHub);
+  var _super = _createSuper$9(JobTypes);
 
-  function RequestsHub(props) {
+  function JobTypes(props) {
     var _this;
 
-    _classCallCheck(this, RequestsHub);
+    _classCallCheck(this, JobTypes);
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "setData", function () {
-      var allList = [];
+    _defineProperty(_assertThisInitialized(_this), "getJobTypes", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var res;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return maintenanceActions.getJobTypes(_this.props.auth.site);
 
-      _this.state.allList.forEach(function (ev) {
-        if (ev != null && !ev.Deleted) allList.push(ev);
-      });
+            case 3:
+              res = _context.sent;
+              if (res.data != null) _this.props.jobTypesLoaded(res.data);
+              _context.next = 10;
+              break;
 
-      var upcoming = _.filter(allList, function (ev) {
-        if (!ev) return false;
-        if (ev.status && ev.status === 'Completed') return false;
-        return true;
-      });
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              console.error('getJobTypes', _context.t0);
 
-      var completed = _.filter(allList, function (ev) {
-        if (!ev) return false;
-        if (ev.status && ev.status === 'Completed') return true;
-        return false;
-      }); // console.log('setData', upcoming, completed);
+            case 10:
+              _context.prev = 10;
 
+              _this.setState({
+                loading: false
+              });
 
-      _this.setState({
-        allList: allList,
-        upcoming: upcoming,
-        completed: completed
-      });
+              return _context.finish(10);
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7, 10, 13]]);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "sortByCol", function (col) {
+      if (_this.state.sortColumn === col) {
+        _this.setState({
+          sortDesc: !_this.state.sortDesc
+        });
+      } else {
+        _this.setState({
+          sortColumn: col,
+          sortDesc: false
+        });
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getData", function () {
-      var auth = _this.props.auth;
+    _defineProperty(_assertThisInitialized(_this), "validateEmail", function () {
+      var jobTypeEmail = _this.state.jobTypeEmail;
+      return !_.isEmpty(jobTypeEmail) && Helper$2.isEmail(jobTypeEmail);
+    });
 
-      _this.setState({
-        loadingAll: true
-      }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var res;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+    _defineProperty(_assertThisInitialized(_this), "isJobTypeValid", function () {
+      var _this$state = _this.state,
+          jobTypeName = _this$state.jobTypeName,
+          jobTypeDescription = _this$state.jobTypeDescription;
+      if (_.isEmpty(jobTypeName)) return false;
+      if (!_this.validateEmail()) return false;
+      if (_.isEmpty(jobTypeDescription)) return false;
+      return true;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onRemoveJobType", /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ev) {
+        var index, newJobTypes;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context2.prev = _context2.next) {
               case 0:
-                _context.prev = 0;
-                _context.next = 3;
-                return maintenanceActions.getJobs(auth.site);
+                if (window.confirm("Are you sure you want to delete ".concat(ev.typeName, "?"))) {
+                  _context2.next = 2;
+                  break;
+                }
 
-              case 3:
-                res = _context.sent;
+                return _context2.abrupt("return");
 
-                // console.log('getData', res.data);
-                _this.setState({
-                  loadingAll: false
+              case 2:
+                _context2.prev = 2;
+                _context2.next = 5;
+                return maintenanceActions.deleteJobType(_this.props.auth.site, ev.id);
+
+              case 5:
+                index = _.findIndex(_this.state.jobList, function (job) {
+                  return job != null && job.id === ev.id;
                 });
 
-                if (res.data != null && !_.isEmpty(res.data) && res.data[0].site === auth.site) {
-                  _this.props.jobsLoaded(res.data);
+                if (index > -1) {
+                  newJobTypes = _toConsumableArray(_this.state.jobList);
+                  newJobTypes[index].Deleted = true;
+
+                  _this.props.jobTypesLoaded(newJobTypes);
                 }
 
-                _context.next = 12;
+                _context2.next = 13;
                 break;
 
-              case 8:
-                _context.prev = 8;
-                _context.t0 = _context["catch"](0);
-                console.error('getData', _context.t0);
-
-                _this.setState({
-                  loadingAll: false
-                });
+              case 9:
+                _context2.prev = 9;
+                _context2.t0 = _context2["catch"](2);
+                console.error('onRemoveJobType', _context2.t0);
+                alert('Something went wrong with the request. Please try again.');
 
-              case 12:
+              case 13:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
           }
-        }, _callee, null, [[0, 8]]);
-      })));
-    });
+        }, _callee2, null, [[2, 9]]);
+      }));
 
-    _defineProperty(_assertThisInitialized(_this), "onAddNew", function () {
-      var auth = _this.props.auth;
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
 
-      if (Session$3.validateAccess(auth.site, 'maintenanceTracking', auth)) {
-        _this.props.history.push("/requestsHub/job");
-      }
-    });
+    _defineProperty(_assertThisInitialized(_this), "onShowJobType", function () {
+      var job = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
-    _defineProperty(_assertThisInitialized(_this), "canAddNew", function (isClass) {
-      var auth = _this.props.auth;
-      if (Session$3.validateAccess(auth.site, 'maintenanceTracking', auth)) return isClass ? '' : true;
-      return isClass ? ' hub-sideContent-topButton--hide' : false;
+      _this.setState({
+        showJobType: true,
+        jobTypeId: job ? job.id : null,
+        jobTypeName: job ? job.typeName : '',
+        jobTypeEmail: job ? job.email : '',
+        jobTypeDescription: job ? job.description : '',
+        jobTypeLevel: job ? job.level : 1
+      });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSideBarSectionColour", function (id) {
-      return _this.state.selectedSection === id ? {
-        backgroundColor: '#fff'
-      } : {};
-    });
+    _defineProperty(_assertThisInitialized(_this), "onHideJobType", function () {
+      if (_this.state.submitting) return;
 
-    _defineProperty(_assertThisInitialized(_this), "renderStats", function (stat, loading) {
-      return loading ? /*#__PURE__*/React.createElement(FontAwesome, {
-        style: styles$4.spinner,
-        name: "spinner fa-pulse fa-fw"
-      }) : stat;
+      _this.setState({
+        showWarnings: false,
+        showJobType: false,
+        jobTypeId: null,
+        jobTypeName: '',
+        jobTypeEmail: '',
+        jobTypeDescription: '',
+        jobTypeLevel: 1
+      });
     });
 
-    _this.state = {
-      selectedSection: 'upcoming',
-      location: '',
-      loadingAll: false,
-      loadingSubmissions: false,
-      submissionEntries: [],
-      allList: [],
-      completed: [],
-      upcoming: [],
-      now: moment.utc(),
-      onlyFuture: true,
-      search: ''
-    };
-    return _this;
-  }
+    _defineProperty(_assertThisInitialized(_this), "onHandleChange", function (event) {
+      var stateChange = {};
+      stateChange[event.target.getAttribute('id')] = event.target.value;
 
-  _createClass(RequestsHub, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.updateProps(this.props);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.getData();
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (!_.isEqual(this.props.jobs, nextProps.jobs)) this.updateProps(nextProps);
-    }
-  }, {
-    key: "updateProps",
-    value: function updateProps(props) {
-      this.setState({
-        allList: props.jobs
-      }, this.setData);
-    }
-  }, {
-    key: "renderLeftBar",
-    value: function renderLeftBar() {
-      var _this2 = this;
+      _this.setState(stateChange);
+    });
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: "hub-sideContent"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "hub-sideContent-topButton"
-      }), /*#__PURE__*/React.createElement("div", {
-        style: {
-          paddingLeft: 15,
-          width: '100%'
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "fontMedium fontSize-32 text-dark",
-        style: styles$4.sideBarTitleSection
-      }, "Maintenance requests"), /*#__PURE__*/React.createElement("div", {
-        onClick: function onClick() {
-          _this2.setState({
-            selectedSection: 'completed'
-          });
-        },
-        className: "sideBarSection",
-        style: this.getSideBarSectionColour('completed')
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "fontMedium fontSize-36 text-dark",
-        style: {
-          lineHeight: '50px'
-        }
-      }, this.renderStats(this.state.completed.length, this.state.loadingAll)), /*#__PURE__*/React.createElement("div", {
-        className: "fontRegular fontSize-16 text-light lineHeight-22"
-      }, "Complete")), /*#__PURE__*/React.createElement("div", {
-        onClick: function onClick() {
-          _this2.setState({
-            selectedSection: 'upcoming'
-          });
-        },
-        className: "sideBarSection",
-        style: this.getSideBarSectionColour('upcoming')
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "fontMedium fontSize-36 text-dark",
-        style: {
-          lineHeight: '50px'
-        }
-      }, this.renderStats(this.state.upcoming.length, this.state.loadingAll)), /*#__PURE__*/React.createElement("div", {
-        className: "fontRegular fontSize-16 text-light lineHeight-22"
-      }, "Incomplete"))));
-    }
-  }, {
-    key: "renderRight",
-    value: function renderRight() {
-      return /*#__PURE__*/React.createElement(JobList$1, {
-        source: this.state.selectedSection === 'completed' ? this.state.completed : this.state.upcoming
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "hub-wrapperContainer"
-      }, this.renderLeftBar(), /*#__PURE__*/React.createElement("div", {
-        className: "hub-headerContentWrapper"
-      }, /*#__PURE__*/React.createElement(Components$3.Header, null, this.canAddNew() && /*#__PURE__*/React.createElement(Components$3.AddButton, {
-        onClick: this.onAddNew,
-        text: "NEW REQUEST"
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "hub-contentWrapper"
-      }, this.renderRight())));
-    }
-  }]);
-
-  return RequestsHub;
-}(Component);
-
-var styles$4 = {
-  sideBarTitleSection: {
-    lineHeight: '40px',
-    marginTop: 30,
-    marginBottom: 30,
-    paddingLeft: 24,
-    paddingRight: 24
-  },
-  sideBarSection: {
-    weight: '100%',
-    minWidth: 200,
-    padding: 32,
-    paddingLeft: 24,
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center'
-  },
-  spinner: {
-    fontSize: 32,
-    color: FeatureConfig.env.colourBrandingOff
-  }
-};
-
-var mapStateToProps$3 = function mapStateToProps(state) {
-  var jobs = state.maintenance.jobs;
-  var auth = state.auth;
-  return {
-    jobs: jobs,
-    auth: auth
-  };
-};
-
-var RequestsHub$1 = connect(mapStateToProps$3, {
-  jobsLoaded: jobsLoaded
-})(RequestsHub);
-
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+    _defineProperty(_assertThisInitialized(_this), "onSave", function () {
+      var site = _this.props.auth.site;
+      var _this$state2 = _this.state,
+          submitting = _this$state2.submitting,
+          jobTypeId = _this$state2.jobTypeId,
+          jobTypeName = _this$state2.jobTypeName,
+          jobTypeEmail = _this$state2.jobTypeEmail,
+          jobTypeDescription = _this$state2.jobTypeDescription,
+          jobTypeLevel = _this$state2.jobTypeLevel;
+      if (submitting) return;
 
-function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var Apis = PlussCore.Apis,
-    Helper$2 = PlussCore.Helper,
-    Session$2 = PlussCore.Session,
-    Colours = PlussCore.Colours,
-    Components$2 = PlussCore.Components;
+      if (!_this.isJobTypeValid()) {
+        _this.setState({
+          showWarnings: true
+        });
 
-var Job = /*#__PURE__*/function (_Component) {
-  _inherits(Job, _Component);
+        return;
+      }
 
-  var _super = _createSuper$8(Job);
+      _this.setState({
+        submitting: true
+      }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.prev = 0;
 
-  function Job(props) {
-    var _this;
+                if (!jobTypeId) {
+                  _context3.next = 6;
+                  break;
+                }
 
-    _classCallCheck(this, Job);
+                _context3.next = 4;
+                return maintenanceActions.editJobType(site, jobTypeId, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel);
 
-    _this = _super.call(this, props);
+              case 4:
+                _context3.next = 8;
+                break;
 
-    _defineProperty(_assertThisInitialized(_this), "getJob", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var res;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return maintenanceActions.getJob(_this.props.auth.site, _this.state.jobId);
+              case 6:
+                _context3.next = 8;
+                return maintenanceActions.addJobType(site, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel);
 
-            case 3:
-              res = _context.sent;
+              case 8:
+                _this.props.jobTypesUpdate(site);
 
-              _this.setState({
-                updating: false
-              });
+                _this.setState({
+                  submitting: false
+                }, _this.onHideJobType);
 
-              res.data.location = res.data.site;
+                _context3.next = 17;
+                break;
 
-              _this.setJob(res.data);
+              case 12:
+                _context3.prev = 12;
+                _context3.t0 = _context3["catch"](0);
+                console.error('onSave', _context3.t0);
 
-              _context.next = 12;
-              break;
+                _this.setState({
+                  submitting: false
+                });
 
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](0);
-              console.error('getJob', _context.t0);
+                alert('Something went wrong with the request. Please try again.');
 
-            case 12:
-            case "end":
-              return _context.stop();
+              case 17:
+              case "end":
+                return _context3.stop();
+            }
           }
-        }
-      }, _callee, null, [[0, 9]]);
-    })));
-
-    _defineProperty(_assertThisInitialized(_this), "setJob", function (job) {
-      job.typeIcon = job.type === 'General' ? 'wrench' : 'tree';
-      job.typeColour = job.type === 'General' ? '#666' : 'green';
-
-      if (_.isEmpty(job.lastActivity)) {
-        job.lastActivity = '-- --';
-        job.noActivity = true;
-      }
-
-      if (_.isEmpty(job.status)) {
-        job.status = 'Unassigned';
-        job.notStatus = true;
-      }
-
-      if (_.isEmpty(job.audience)) {
-        job.audience = [{
-          displayName: 'Unassigned',
-          isEmpty: true
-        }];
-      }
-
-      var needToMarkSeen = false;
+        }, _callee3, null, [[0, 12]]);
+      })));
+    });
 
-      if (!job.seen) {
-        job.seen = true;
-        needToMarkSeen = true;
-      }
+    _this.state = {
+      jobList: [],
+      showCompleted: false,
+      sortColumn: 'name',
+      sortDesc: false,
+      loading: true,
+      showJobType: false,
+      jobTypeId: null,
+      jobTypeName: '',
+      jobTypeEmail: '',
+      jobTypeDescription: '',
+      jobTypeLevel: 1,
+      showWarnings: false,
+      submitting: false
+    };
+    return _this;
+  }
 
-      _this.setState({
-        job: job
-      }, function () {
-        if (needToMarkSeen) _this.markSeen();
+  _createClass(JobTypes, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      this.updateProps(this.props);
+      Session$3.checkLoggedIn(this, this.props.auth);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.getJobTypes();
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      this.updateProps(nextProps);
+    }
+  }, {
+    key: "updateProps",
+    value: function updateProps(props) {
+      this.setState({
+        jobList: props.jobtypes
       });
+    }
+  }, {
+    key: "renderList",
+    value: function renderList() {
+      var _this2 = this;
 
-      _this.props.jobsLoaded([job]);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "editJob", function () {});
+      var source = _.sortBy(this.state.jobList, this.state.sortColumn);
 
-    _defineProperty(_assertThisInitialized(_this), "isReadyToSaveNote", function () {
-      var _this$state = _this.state,
-          noteAttachments = _this$state.noteAttachments,
-          noteInput = _this$state.noteInput;
-      if (_.some(noteAttachments, function (n) {
-        return n.Uploading;
-      })) return false;
-      return !_.isEmpty(noteInput) || !_.isEmpty(noteAttachments);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onOpenAddNote", function () {
-      _this.setState({
-        addNoteOpen: true,
-        editingNote: null
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onCloseAddNote", function () {
-      var newState = {
-        addNoteOpen: false,
-        editingNote: null
-      };
-
-      if (!!_this.state.editingNote) {
-        newState.noteInput = '';
-        newState.noteAttachments = [];
-      }
-
-      _this.setState(newState);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onOpenNoteMenu", function (index) {
-      if (_this.state.noteMenuOpen === index) {
-        _this.setState({
-          noteMenuOpen: null
-        });
-      } else {
-        _this.setState({
-          noteMenuOpen: index
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onHandlePDFFileChange", function (event) {
-      var file = event.target.files[0];
-      if (!file || _this.state.uploadingNoteAttachment) return;
-
-      var noteAttachments = _toConsumableArray(_this.state.noteAttachments);
-
-      var newAttachment = {
-        Uploading: true,
-        Title: file.name
-      };
-      noteAttachments.push(newAttachment);
-
-      _this.setState({
-        noteAttachments: noteAttachments
+      if (this.state.sortDesc) source.reverse();
+      source = _.filter(source, function (ev) {
+        if (!ev) return false;
+        if (ev.Deleted) return false;
+        return true;
       });
+      return source.map(function (ev, index) {
+        if (ev != null) {
+          return /*#__PURE__*/React.createElement("tr", {
+            key: index
+          }, /*#__PURE__*/React.createElement("td", {
+            className: "table-TitleColumn"
+          }, /*#__PURE__*/React.createElement("a", {
+            onClick: function onClick() {
+              return _this2.onShowJobType(ev);
+            }
+          }, ev.typeName)), /*#__PURE__*/React.createElement("td", null, ev.description), /*#__PURE__*/React.createElement("td", null, ev.email), /*#__PURE__*/React.createElement("td", {
+            className: "table-options"
+          }, /*#__PURE__*/React.createElement("div", {
+            style: {
+              display: 'flex',
+              alignItems: 'center'
+            }
+          }, Session$3.validateAccess(_this2.props.auth.site, 'maintenanceTypes', _this2.props.auth) && /*#__PURE__*/React.createElement("a", {
+            onClick: function onClick() {
+              return _this2.onShowJobType(ev);
+            }
+          }, /*#__PURE__*/React.createElement(FontAwesome, {
+            style: {
+              fontSize: 20,
+              padding: 5,
+              marginLeft: 12,
+              cursor: 'pointer'
+            },
+            name: "pencil"
+          })), Session$3.validateAccess(_this2.props.auth.site, 'maintenanceTypes', _this2.props.auth) && /*#__PURE__*/React.createElement("a", {
+            onClick: function onClick() {
+              return _this2.onRemoveJobType(ev);
+            }
+          }, /*#__PURE__*/React.createElement(FontAwesome, {
+            style: {
+              fontSize: 20,
+              padding: 5,
+              marginLeft: 8,
+              cursor: 'pointer'
+            },
+            name: "minus-circle"
+          })))));
+        }
 
-      Apis.fileActions.uploadMediaAsync(file, file.name).then(function (fileRes) {
-        newAttachment.Source = fileRes;
-        newAttachment.Uploading = false;
-
-        _this.setState({
-          noteAttachments: _toConsumableArray(_this.state.noteAttachments)
-        });
-      }).catch(function (uploadErrorRes) {
-        console.log(uploadErrorRes);
-        newAttachment.Uploading = false;
-
-        _this.setState({
-          noteAttachments: _toConsumableArray(_this.state.noteAttachments)
-        });
+        return null;
       });
-      event.target.value = '';
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onRemoveAttachment", function (a) {
-      var index = _this.state.noteAttachments.indexOf(a);
+    }
+  }, {
+    key: "renderView",
+    value: function renderView() {
+      var _this3 = this;
 
-      if (index > -1) {
-        var newAttachments = _toConsumableArray(_this.state.noteAttachments);
+      return /*#__PURE__*/React.createElement(Table, {
+        className: "plussTable",
+        striped: true,
+        bordered: true,
+        condensed: true,
+        hover: true,
+        style: {
+          minWidth: '100%'
+        }
+      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return _this3.sortByCol('name');
+        }
+      }, "Request type"), /*#__PURE__*/React.createElement("th", {
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return _this3.sortByCol('name');
+        }
+      }, "Type Description"), /*#__PURE__*/React.createElement("th", {
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return _this3.sortByCol('email');
+        }
+      }, "Email"), /*#__PURE__*/React.createElement("th", {
+        style: {
+          width: 70
+        }
+      }))), /*#__PURE__*/React.createElement("tbody", null, this.renderList()));
+    }
+  }, {
+    key: "renderEmpty",
+    value: function renderEmpty() {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginTop: 32
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "emptyState"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-32",
+        style: {
+          maxWidth: 500,
+          textAlign: 'center'
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "fontRegular fontSize-13"
+      }, "Please add the many categories of request types that exist in your village which work alongside the Maintenance area.")), /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-8 fontRegular fontSize-13",
+        style: {
+          maxWidth: 500,
+          textAlign: 'center'
+        }
+      }, "Examples might be; OH&S, Electrical, General. Remember to add a description too."));
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      if (_.isEmpty(this.state.jobList)) return this.renderEmpty();
+      return this.renderView();
+    }
+  }, {
+    key: "renderJobTypes",
+    value: function renderJobTypes() {
+      var _this4 = this;
 
-        newAttachments.splice(index, 1);
+      var _this$state3 = this.state,
+          jobList = _this$state3.jobList,
+          loading = _this$state3.loading;
 
-        _this.setState({
-          noteAttachments: newAttachments
-        });
+      if (jobList.length === 0 && loading) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            minWidth: '100%'
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "padding-60 paddingVertical-40",
+          style: {
+            textAlign: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(FontAwesome, {
+          style: {
+            fontSize: 30,
+            color: FeatureConfig.env.colourBrandingOff
+          },
+          name: "spinner fa-pulse fa-fw"
+        })));
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onConfirmAddNote", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var res;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (_this.isReadyToSaveNote()) {
-                _context2.next = 2;
-                break;
-              }
-
-              return _context2.abrupt("return");
 
-            case 2:
-              _context2.prev = 2;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          minWidth: '100%'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "marginBottom-32"
+      }, /*#__PURE__*/React.createElement(Components$3.AddButton, {
+        onClick: function onClick() {
+          return _this4.onShowJobType();
+        },
+        text: "NEW REQUEST TYPE"
+      })), this.renderContent());
+    }
+  }, {
+    key: "renderNewUserTypePopup",
+    value: function renderNewUserTypePopup() {
+      var _this5 = this;
 
-              _this.setState({
-                submittingNote: true
-              });
+      var _this$state4 = this.state,
+          submitting = _this$state4.submitting,
+          showJobType = _this$state4.showJobType,
+          jobTypeId = _this$state4.jobTypeId,
+          showWarnings = _this$state4.showWarnings,
+          jobTypeName = _this$state4.jobTypeName,
+          jobTypeEmail = _this$state4.jobTypeEmail,
+          jobTypeDescription = _this$state4.jobTypeDescription;
+      if (!showJobType) return null;
+      return /*#__PURE__*/React.createElement(Components$3.Popup, {
+        maxWidth: 800,
+        hasPadding: true,
+        buttons: [{
+          type: 'primaryAction',
+          onClick: this.onSave,
+          isActive: !submitting && this.isJobTypeValid(),
+          text: submitting ? 'Saving...' : 'Save',
+          className: 'popupButton'
+        }, {
+          type: 'outlinedAction',
+          onClick: this.onHideJobType,
+          isActive: !submitting,
+          text: 'Cancel',
+          className: 'popupButton'
+        }],
+        onClose: this.onHideJobType,
+        title: jobTypeId ? 'Edit Request Type' : 'Create New Request Type'
+      }, /*#__PURE__*/React.createElement(Components$3.GenericInput, {
+        id: "jobTypeName",
+        type: "text",
+        label: "Request type title",
+        placeholder: "Request type title",
+        value: jobTypeName,
+        onChange: this.onHandleChange,
+        isRequired: true,
+        isValid: function isValid() {
+          return !_.isEmpty(jobTypeName);
+        },
+        showError: function showError() {
+          return showWarnings && _.isEmpty(jobTypeName);
+        },
+        alwaysShowLabel: true
+      }), /*#__PURE__*/React.createElement(Components$3.GenericInput, {
+        id: "jobTypeEmail",
+        type: "text",
+        label: "Email",
+        placeholder: "Request email",
+        help: "This is the email address that'll receive service requests of this type",
+        value: jobTypeEmail,
+        onChange: this.onHandleChange,
+        isRequired: true,
+        isValid: this.validateEmail,
+        showError: function showError() {
+          return showWarnings && !_this5.validateEmail();
+        },
+        alwaysShowLabel: true
+      }), /*#__PURE__*/React.createElement(Components$3.GenericInput, {
+        id: "jobTypeDescription",
+        type: "text",
+        label: "Description",
+        placeholder: "Add a description. ",
+        help: "This description will be visible to the people to help them select the correct request type.",
+        value: jobTypeDescription,
+        onChange: this.onHandleChange,
+        isRequired: true,
+        isValid: function isValid() {
+          return !_.isEmpty(jobTypeDescription);
+        },
+        showError: function showError() {
+          return showWarnings && _.isEmpty(jobTypeDescription);
+        },
+        alwaysShowLabel: true
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          minWidth: '100%'
+        }
+      }, /*#__PURE__*/React.createElement("div", null, this.renderJobTypes()), this.renderNewUserTypePopup(), /*#__PURE__*/React.createElement("div", {
+        className: "hub_tidioPadding"
+      }));
+    }
+  }]);
 
-              _context2.next = 6;
-              return _this.state.editingNote ? maintenanceActions.editNote(_this.state.jobId, _this.state.editingNote, _this.state.noteInput, _this.state.noteAttachments.map(function (a) {
-                return {
-                  Title: a.Title,
-                  Source: a.Source
-                };
-              })) : maintenanceActions.addNote(_this.state.jobId, _this.state.noteInput, _this.state.noteAttachments.map(function (a) {
-                return {
-                  Title: a.Title,
-                  Source: a.Source
-                };
-              }));
+  return JobTypes;
+}(Component);
 
-            case 6:
-              res = _context2.sent;
+var mapStateToProps$3 = function mapStateToProps(state) {
+  var jobtypes = state.maintenance.jobtypes;
+  var auth = state.auth;
+  return {
+    jobtypes: jobtypes,
+    auth: auth
+  };
+};
 
-              _this.setState({
-                job: res.data.job,
-                submittingNote: false,
-                addNoteOpen: false,
-                noteInput: '',
-                noteAttachments: [],
-                editingNote: null
-              }, function () {
-                _this.props.jobsLoaded([_this.state.job]);
-              });
+var JobTypes$1 = connect(mapStateToProps$3, {
+  jobTypesLoaded: jobTypesLoaded,
+  jobTypesUpdate: jobTypesUpdate
+})(withRouter(JobTypes));
 
-              _context2.next = 13;
-              break;
+function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-            case 10:
-              _context2.prev = 10;
-              _context2.t0 = _context2["catch"](2);
-              console.error('onConfirmAddNote', _context2.t0);
+function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var Components$2 = PlussCore.Components,
+    Session$2 = PlussCore.Session;
 
-            case 13:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, null, [[2, 10]]);
-    })));
+var RequestsHub = /*#__PURE__*/function (_Component) {
+  _inherits(RequestsHub, _Component);
 
-    _defineProperty(_assertThisInitialized(_this), "onDeleteNote", function (n) {
-      if (!window.confirm('Are you sure you want to delete that note?')) {
-        _this.setState({
-          noteMenuOpen: null
-        });
+  var _super = _createSuper$8(RequestsHub);
 
-        return;
-      }
+  function RequestsHub(props) {
+    var _this;
 
-      maintenanceActions.deleteNote(_this.state.jobId, n.Id);
+    _classCallCheck(this, RequestsHub);
 
-      var newNotes = _.filter(_this.state.job.Notes, function (note) {
-        return note.Id !== n.Id;
-      });
+    _this = _super.call(this, props);
 
-      var newJob = _objectSpread$3({}, _this.state.job);
+    _defineProperty(_assertThisInitialized(_this), "setData", function () {
+      var allList = [];
 
-      newJob.Notes = newNotes;
+      _this.state.allList.forEach(function (ev) {
+        if (ev != null && !ev.Deleted) allList.push(ev);
+      });
 
-      _this.setState({
-        job: newJob,
-        noteMenuOpen: null
+      var upcoming = _.filter(allList, function (ev) {
+        if (!ev) return false;
+        if (ev.status && ev.status === 'Completed') return false;
+        return true;
       });
-    });
 
-    _defineProperty(_assertThisInitialized(_this), "onOpenEditNote", function (n) {
+      var completed = _.filter(allList, function (ev) {
+        if (!ev) return false;
+        if (ev.status && ev.status === 'Completed') return true;
+        return false;
+      }); // console.log('setData', upcoming, completed);
+
+
       _this.setState({
-        noteAttachments: n.Attachments || [],
-        noteInput: n.Note || '',
-        addNoteOpen: true,
-        editingNote: n.Id,
-        noteMenuOpen: null
+        allList: allList,
+        upcoming: upcoming,
+        completed: completed
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "markSeen", function () {
-      var job = _this.state.job;
-      var auth = _this.props.auth; // Must have maintenance permission and not the requester
-
-      if (!Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) return;
-      if (auth.user.Id === job.userID) return;
+    _defineProperty(_assertThisInitialized(_this), "getData", function () {
+      var auth = _this.props.auth;
 
       _this.setState({
-        updating: true
-      }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-        var update;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        loadingAll: true
+      }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var res;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context.prev = _context.next) {
               case 0:
-                _context3.prev = 0;
-                update = {
-                  id: job.id,
-                  seen: true,
-                  status: job.status || 'Unassigned'
-                };
-                _context3.next = 4;
-                return maintenanceActions.editJob(update, auth.site);
+                _context.prev = 0;
+                _context.next = 3;
+                return maintenanceActions.getJobs(auth.site);
 
-              case 4:
-                _context3.next = 11;
+              case 3:
+                res = _context.sent;
+
+                // console.log('getData', res.data);
+                _this.setState({
+                  loadingAll: false
+                });
+
+                if (res.data != null && !_.isEmpty(res.data) && res.data[0].site === auth.site) {
+                  _this.props.jobsLoaded(res.data);
+                }
+
+                _context.next = 12;
                 break;
 
-              case 6:
-                _context3.prev = 6;
-                _context3.t0 = _context3["catch"](0);
+              case 8:
+                _context.prev = 8;
+                _context.t0 = _context["catch"](0);
+                console.error('getData', _context.t0);
 
                 _this.setState({
-                  updating: false
+                  loadingAll: false
                 });
 
-                console.log('markSeen error', _context3.t0);
-                alert('Something went wrong with the request. Please try again.');
-
-              case 11:
+              case 12:
               case "end":
-                return _context3.stop();
+                return _context.stop();
             }
           }
-        }, _callee3, null, [[0, 6]]);
+        }, _callee, null, [[0, 8]]);
       })));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getComments", function () {
-      reactionActions.getComments(_this.state.jobId, 'maintenancerequest', 0).then(function (res) {
-        _this.setState({
-          comments: res.data
-        });
-      });
+    _defineProperty(_assertThisInitialized(_this), "onAddNew", function () {
+      var auth = _this.props.auth;
+
+      if (Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) {
+        _this.props.history.push("/requestsHub/job");
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onAddComment", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-      var _this$state2, commentInput, jobId, job, comments, res;
-
-      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              _this$state2 = _this.state, commentInput = _this$state2.commentInput, jobId = _this$state2.jobId, job = _this$state2.job, comments = _this$state2.comments;
-              _context4.prev = 1;
-
-              _this.setState({
-                commentInput: ''
-              });
-
-              _context4.next = 5;
-              return reactionActions.addComment(jobId, 'maintenancerequest', job.title, job.site, commentInput);
-
-            case 5:
-              res = _context4.sent;
-
-              _this.setState({
-                comments: [].concat(_toConsumableArray(comments), [res.data])
-              });
-
-              _context4.next = 12;
-              break;
-
-            case 9:
-              _context4.prev = 9;
-              _context4.t0 = _context4["catch"](1);
-              console.error('onAddComment', _context4.t0);
-
-            case 12:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4, null, [[1, 9]]);
-    })));
-
-    _defineProperty(_assertThisInitialized(_this), "onHandleChange", function (event) {
-      var stateChange = {};
-      stateChange[event.target.getAttribute('id')] = event.target.value;
-
-      _this.setState(stateChange);
+    _defineProperty(_assertThisInitialized(_this), "canAddNew", function (isClass) {
+      var auth = _this.props.auth;
+      if (Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) return isClass ? '' : true;
+      return isClass ? ' hub-sideContent-topButton--hide' : false;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onToggleStatusChanger", function () {
-      _this.setState({
-        statusChangerOpen: !_this.state.statusChangerOpen
-      });
+    _defineProperty(_assertThisInitialized(_this), "getSideBarSectionColour", function (id) {
+      return _this.state.selectedSection === id ? {
+        backgroundColor: '#fff'
+      } : {};
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onSelectStatus", /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(status) {
-        var res;
-        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-          while (1) {
-            switch (_context5.prev = _context5.next) {
-              case 0:
-                _this.setState({
-                  job: _objectSpread$3(_objectSpread$3({}, _this.state.job), {}, {
-                    status: status
-                  }),
-                  statusChangerOpen: false
-                });
-
-                _context5.prev = 1;
-                _context5.next = 4;
-                return maintenanceActions.editJobStatus(_this.state.job.id, status);
-
-              case 4:
-                res = _context5.sent;
-
-                _this.setState({
-                  job: res.data.job
-                }, function () {
-                  _this.props.jobsLoaded([_this.state.job]);
-                });
-
-                _context5.next = 11;
-                break;
-
-              case 8:
-                _context5.prev = 8;
-                _context5.t0 = _context5["catch"](1);
-                console.error('onSelectStatus', _context5.t0);
-
-              case 11:
-              case "end":
-                return _context5.stop();
-            }
-          }
-        }, _callee5, null, [[1, 8]]);
-      }));
-
-      return function (_x) {
-        return _ref5.apply(this, arguments);
-      };
-    }());
+    _defineProperty(_assertThisInitialized(_this), "renderStats", function (stat, loading) {
+      return loading ? /*#__PURE__*/React.createElement(FontAwesome, {
+        style: styles$4.spinner,
+        name: "spinner fa-pulse fa-fw"
+      }) : stat;
+    });
 
     _this.state = {
-      jobId: Helper$2.safeReadParams(props, 'jobId') ? props.match.params.jobId : null,
-      job: null,
-      showingSelector: false,
-      updating: false,
-      comments: [],
-      commentInput: '',
-      loadingComments: false,
-      statusChangerOpen: false,
-      addNoteOpen: false,
-      noteAttachments: [],
-      noteInput: ''
+      selectedSection: 'all',
+      location: '',
+      loadingAll: false,
+      loadingSubmissions: false,
+      submissionEntries: [],
+      allList: [],
+      completed: [],
+      upcoming: [],
+      now: moment.utc(),
+      onlyFuture: true,
+      search: ''
     };
     return _this;
   }
 
-  _createClass(Job, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      Session$2.checkLoggedIn(this, this.props.auth);
+  _createClass(RequestsHub, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      this.updateProps(this.props);
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.state.jobId) {
-        this.getJob();
-        this.getComments();
-      }
+      this.getData();
     }
   }, {
-    key: "renderStatusLabel",
-    value: function renderStatusLabel() {
-      if (!this.state.job.status) return null;
-      var auth = this.props.auth;
-
-      if (Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "statusLabel pointer",
-          onClick: this.onToggleStatusChanger,
-          style: {
-            backgroundColor: StatusTypes[this.state.job.status].color
-          }
-        }, /*#__PURE__*/React.createElement("span", {
-          className: "statusLabel_text"
-        }, StatusTypes[this.state.job.status].text), this.renderStatusChanger());
-      }
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: "statusLabel",
-        style: {
-          backgroundColor: StatusTypes[this.state.job.status].color
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "statusLabel_text"
-      }, StatusTypes[this.state.job.status].text));
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (!_.isEqual(this.props.jobs, nextProps.jobs)) this.updateProps(nextProps);
     }
   }, {
-    key: "renderNotesButton",
-    value: function renderNotesButton() {
-      var auth = this.props.auth;
-      if (!Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) return null;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "statusLabel pointer",
-        onClick: this.onOpenAddNote,
-        style: {
-          backgroundColor: FeatureConfig.env.colourBrandingMain,
-          marginLeft: 8
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "statusLabel_text"
-      }, "Add Note"));
+    key: "updateProps",
+    value: function updateProps(props) {
+      this.setState({
+        allList: props.jobs
+      }, this.setData);
     }
   }, {
-    key: "renderStatusChanger",
-    value: function renderStatusChanger() {
+    key: "renderLeftBar",
+    value: function renderLeftBar() {
       var _this2 = this;
 
-      if (!this.state.statusChangerOpen) return null;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "statusChanger statusChanger-maintenance"
-      }, Object.keys(StatusTypes).map(function (statusKey) {
-        return /*#__PURE__*/React.createElement("div", {
-          key: statusKey,
-          className: "statusLabel",
+      var sectionItems = [];
+
+      if (this.canAddNew()) {
+        sectionItems.push({
+          type: 'newButton',
+          text: 'New Request',
+          onClick: this.onAddNew
+        });
+      }
+
+      sectionItems.push({
+        type: 'navItem',
+        text: 'View Requests',
+        icon: 'eye',
+        isFontAwesome: true,
+        selected: this.state.selectedSection === 'all',
+        onClick: function onClick() {
+          _this2.setState({
+            selectedSection: 'all'
+          });
+        }
+      });
+
+      if (Session$2.validateAccess(this.props.auth.site, 'maintenanceTypes', this.props.auth)) {
+        sectionItems.push({
+          type: 'navItem',
+          text: 'Request Types',
+          // icon: 'maintenance2',
+          // isSVG: true,
+          selected: this.state.selectedSection === 'requestTypes',
           onClick: function onClick() {
-            return _this2.onSelectStatus(statusKey);
-          },
-          style: {
-            backgroundColor: StatusTypes[statusKey].color
+            _this2.setState({
+              selectedSection: 'requestTypes'
+            });
           }
-        }, /*#__PURE__*/React.createElement("span", {
-          className: "statusLabel_text"
-        }, StatusTypes[statusKey].text));
-      }));
+        });
+      }
+
+      return /*#__PURE__*/React.createElement(Components$2.HubSidebar, {
+        sections: [{
+          title: 'Requests',
+          items: sectionItems
+        }]
+      });
     }
   }, {
-    key: "renderComment",
-    value: function renderComment(c) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: c.Id,
-        className: "comment"
-      }, /*#__PURE__*/React.createElement("p", {
-        className: "comment_text"
-      }, Helper$2.toParagraphed(c.Comment)), /*#__PURE__*/React.createElement("div", {
-        className: "comment_bottom"
-      }, /*#__PURE__*/React.createElement(Components$2.ProfilePic, {
-        className: "comment_profilePic",
-        size: 25,
-        image: c.User.profilePic
-      }), /*#__PURE__*/React.createElement("p", {
-        className: "comment_name"
-      }, c.User.displayName), /*#__PURE__*/React.createElement("p", {
-        className: "comment_time"
-      }, moment.utc(c.Timestamp).local().format('D MMM YYYY • h:mma'))));
+    key: "renderRight",
+    value: function renderRight() {
+      if (this.state.selectedSection === 'requestTypes') {
+        return /*#__PURE__*/React.createElement(JobTypes$1, null);
+      }
+
+      return /*#__PURE__*/React.createElement(JobList$1, {
+        source: this.state.allList
+      });
     }
   }, {
-    key: "renderCommentSection",
-    value: function renderCommentSection() {
-      var _this3 = this;
-
-      if (this.state.loadingComments) return null;
+    key: "render",
+    value: function render() {
       return /*#__PURE__*/React.createElement("div", {
-        className: "padding-60 paddingLeft-20"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "newTopBar paddingLeft-40"
-      }, /*#__PURE__*/React.createElement(Components$2.Text, {
-        type: "formTitleSmall",
-        className: "marginBottom-16"
-      }, "Comments"), /*#__PURE__*/React.createElement("div", {
-        className: "commentSection"
-      }, this.state.comments.map(function (c) {
-        return _this3.renderComment(c);
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "commentReply"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "commentReply_button".concat(!_.isEmpty(this.state.commentInput) ? ' commentReply_button-active' : ''),
-        onClick: this.onAddComment
-      }, /*#__PURE__*/React.createElement(FontAwesome, {
-        className: "commentReply_icon",
-        name: "paper-plane-o"
-      })), /*#__PURE__*/React.createElement(Textarea, {
-        id: "commentInput",
-        placeholder: "Reply here...",
-        type: "text",
-        className: "commentReply_input",
-        value: this.state.commentInput,
-        onChange: function onChange(e) {
-          return _this3.onHandleChange(e);
-        }
-      }))));
-    }
-  }, {
-    key: "renderInner",
-    value: function renderInner() {
-      if (this.state.job == null) return null;
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          paddingBottom: 40
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "padding-60 paddingVertical-40 bottomDivideBorder relative"
-      }, /*#__PURE__*/React.createElement(Components$2.Text, {
-        type: "formTitleLarge",
-        className: "marginBottom-24"
-      }, this.state.job.title || 'Request'), /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-16"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'fieldLabel'
-      }, "Request date"), /*#__PURE__*/React.createElement("div", {
-        className: 'fontRegular fontSize-16 text-dark marginTop-5'
-      }, moment.utc(this.state.job.createdTime).local().format('D MMM YY'))), /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-16"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'fieldLabel'
-      }, "Type"), /*#__PURE__*/React.createElement("div", {
-        className: 'fontRegular fontSize-16 text-dark marginTop-5'
-      }, this.state.job.type)), /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-16"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'fieldLabel'
-      }, "Location"), /*#__PURE__*/React.createElement("div", {
-        className: 'fontRegular fontSize-16 text-dark marginTop-5'
-      }, this.state.job.room)), /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-16"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'fieldLabel'
-      }, "Description ", this.state.job.image ? '- (image supplied)' : ''), /*#__PURE__*/React.createElement("div", {
-        className: 'fontRegular fontSize-16 text-dark marginTop-5'
-      }, this.state.job.description))), /*#__PURE__*/React.createElement("div", {
-        className: "padding-60 paddingVertical-40 bottomDivideBorder"
-      }, /*#__PURE__*/React.createElement(Components$2.Text, {
-        type: "formTitleSmall",
-        className: "marginBottom-16"
-      }, "Contact Details"), /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-16"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'fieldLabel'
-      }, "Name"), /*#__PURE__*/React.createElement("div", {
-        className: 'fontRegular fontSize-16 text-dark marginTop-5'
-      }, this.state.job.userName)), /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-16"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'fieldLabel'
-      }, "Contact number"), /*#__PURE__*/React.createElement("div", {
-        className: 'fontRegular fontSize-16 text-dark marginTop-5'
-      }, _.isEmpty(this.state.job.phone) ? 'No phone provided' : this.state.job.phone)), /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-16"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'fieldLabel'
-      }, "Should person be home?"), /*#__PURE__*/React.createElement("div", {
-        className: 'fontRegular fontSize-16 text-dark marginTop-5'
-      }, this.state.job.isHome ? 'Yes' : 'No')), this.state.job.isHome && this.state.job.homeText && /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-16"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'fieldLabel'
-      }, "When"), /*#__PURE__*/React.createElement("div", {
-        className: 'fontRegular fontSize-16 text-dark marginTop-5'
-      }, this.state.job.homeText))), (this.state.job.image || this.state.job.images) && /*#__PURE__*/React.createElement("div", {
-        className: "padding-60 paddingVertical-40 bottomDivideBorder"
-      }, /*#__PURE__*/React.createElement(Components$2.Text, {
-        type: "formTitleSmall",
-        className: "marginBottom-16"
-      }, "Image"), /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginTop: 16,
-          height: 180,
-          width: 260,
-          borderRadius: 4,
-          border: '1px solid #aaa',
-          backgroundColor: '#ddd',
-          backgroundImage: "url(".concat(this.state.job.thumbnail, ")"),
-          backgroundPosition: 'center'
-        }
-      })), this.renderCommentSection());
+        className: "hub-wrapperContainer"
+      }, this.renderLeftBar(), /*#__PURE__*/React.createElement("div", {
+        className: "hub-headerContentWrapper"
+      }, /*#__PURE__*/React.createElement(Components$2.Header, null), /*#__PURE__*/React.createElement("div", {
+        className: "hub-contentWrapper"
+      }, this.renderRight())));
     }
-  }, {
-    key: "renderHistoryEntry",
-    value: function renderHistoryEntry(e, i) {
-      var job = this.state.job;
-      var entryToUse = e || {
-        timestamp: job.createdTime,
-        status: 'Unassigned',
-        user: {
-          displayName: job.userName,
-          id: job.userID,
-          profilePic: job.userProfilePic
+  }]);
+
+  return RequestsHub;
+}(Component);
+
+var styles$4 = {
+  sideBarTitleSection: {
+    lineHeight: '40px',
+    marginTop: 30,
+    marginBottom: 30,
+    paddingLeft: 24,
+    paddingRight: 24
+  },
+  sideBarSection: {
+    weight: '100%',
+    minWidth: 200,
+    padding: 32,
+    paddingLeft: 24,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center'
+  },
+  spinner: {
+    fontSize: 32,
+    color: FeatureConfig.env.colourBrandingOff
+  }
+};
+
+var mapStateToProps$2 = function mapStateToProps(state) {
+  var jobs = state.maintenance.jobs;
+  var auth = state.auth;
+  return {
+    jobs: jobs,
+    auth: auth
+  };
+};
+
+var RequestsHub$1 = connect(mapStateToProps$2, {
+  jobsLoaded: jobsLoaded
+})(withRouter(RequestsHub));
+
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var Apis = PlussCore.Apis,
+    Helper$1 = PlussCore.Helper,
+    Session$1 = PlussCore.Session,
+    Colours = PlussCore.Colours,
+    Components$1 = PlussCore.Components;
+
+var Job = /*#__PURE__*/function (_Component) {
+  _inherits(Job, _Component);
+
+  var _super = _createSuper$7(Job);
+
+  function Job(props) {
+    var _this;
+
+    _classCallCheck(this, Job);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "getJob", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var res;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return maintenanceActions.getJob(_this.props.auth.site, _this.state.jobId);
+
+            case 3:
+              res = _context.sent;
+
+              _this.setState({
+                updating: false
+              });
+
+              res.data.location = res.data.site;
+
+              _this.setJob(res.data);
+
+              _context.next = 12;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](0);
+              console.error('getJob', _context.t0);
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
         }
+      }, _callee, null, [[0, 9]]);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "setJob", function (job) {
+      job.typeIcon = job.type === 'General' ? 'wrench' : 'tree';
+      job.typeColour = job.type === 'General' ? '#666' : 'green';
+
+      if (_.isEmpty(job.lastActivity)) {
+        job.lastActivity = '-- --';
+        job.noActivity = true;
+      }
+
+      if (_.isEmpty(job.status)) {
+        job.status = 'Unassigned';
+        job.notStatus = true;
+      }
+
+      if (_.isEmpty(job.audience)) {
+        job.audience = [{
+          displayName: 'Unassigned',
+          isEmpty: true
+        }];
+      }
+
+      var needToMarkSeen = false;
+
+      if (!job.seen) {
+        job.seen = true;
+        needToMarkSeen = true;
+      }
+
+      _this.setState({
+        job: job
+      }, function () {
+        if (needToMarkSeen) _this.markSeen();
+      });
+
+      _this.props.jobsLoaded([job]);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "editJob", function () {});
+
+    _defineProperty(_assertThisInitialized(_this), "isReadyToSaveNote", function () {
+      var _this$state = _this.state,
+          noteAttachments = _this$state.noteAttachments,
+          noteInput = _this$state.noteInput;
+      if (_.some(noteAttachments, function (n) {
+        return n.Uploading;
+      })) return false;
+      return !_.isEmpty(noteInput) || !_.isEmpty(noteAttachments);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onOpenAddNote", function () {
+      _this.setState({
+        addNoteOpen: true,
+        editingNote: null
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onCloseAddNote", function () {
+      var newState = {
+        addNoteOpen: false,
+        editingNote: null
       };
-      return /*#__PURE__*/React.createElement("div", {
-        className: "ticketHistoryEntry",
-        key: i
-      }, /*#__PURE__*/React.createElement("p", {
-        className: "ticketHistoryEntry_timestamp"
-      }, moment.utc(entryToUse.timestamp).local().format('D MMM YYYY h:mma')), /*#__PURE__*/React.createElement("div", {
-        className: "statusLabel statusLabel-large statusLabel-full",
-        style: {
-          backgroundColor: StatusTypes[entryToUse.status].color
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "statusLabel_text"
-      }, e ? "Marked as ".concat(StatusTypes[entryToUse.status].text) : 'Job opened')));
-    }
-  }, {
-    key: "renderNote",
-    value: function renderNote(note, index) {
-      var _this4 = this;
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: "ticketHistoryEntry",
-        key: index
-      }, /*#__PURE__*/React.createElement("p", {
-        className: "ticketHistoryEntry_timestamp"
-      }, moment.utc(note.Timestamp).local().format('D MMM YYYY h:mma')), /*#__PURE__*/React.createElement("div", {
-        className: "statusLabel statusLabel-large statusLabel-full",
-        style: {
-          backgroundColor: '#6e79c5'
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "statusLabel_text"
-      }, "Staff Notes")), /*#__PURE__*/React.createElement("div", {
-        className: "maintenanceNote"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "maintenanceNote_top"
-      }, this.props.auth && this.props.auth.user && this.props.auth.user.Id === note.User.id && /*#__PURE__*/React.createElement(Components$2.SVGIcon, {
-        colour: Colours.COLOUR_DUSK_LIGHT,
-        icon: "more15",
-        className: "maintenanceNote_moreIcon",
-        onClick: function onClick() {
-          return _this4.onOpenNoteMenu(index);
-        }
-      }), /*#__PURE__*/React.createElement("p", {
-        className: "maintenanceNote_name"
-      }, note.User.displayName), this.state.noteMenuOpen === index && /*#__PURE__*/React.createElement(Components$2.MoreMenu, {
-        options: [{
-          key: 'edit',
-          text: 'Edit',
-          onPress: function onPress() {
-            return _this4.onOpenEditNote(note);
-          }
-        }, {
-          key: 'delete',
-          text: 'Delete',
-          onPress: function onPress() {
-            return _this4.onDeleteNote(note);
-          }
-        }]
-      })), /*#__PURE__*/React.createElement("p", {
-        className: "maintenanceNote_text"
-      }, Helper$2.toParagraphed(note.Note)), note.Attachments.map(function (a, i) {
-        return _this4.renderAttachment(a, i);
-      })));
-    }
-  }, {
-    key: "renderOverview",
-    value: function renderOverview() {
-      var _this5 = this;
+      if (!!_this.state.editingNote) {
+        newState.noteInput = '';
+        newState.noteAttachments = [];
+      }
+
+      _this.setState(newState);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onOpenNoteMenu", function (index) {
+      if (_this.state.noteMenuOpen === index) {
+        _this.setState({
+          noteMenuOpen: null
+        });
+      } else {
+        _this.setState({
+          noteMenuOpen: index
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onHandlePDFFileChange", function (event) {
+      var file = event.target.files[0];
+      if (!file || _this.state.uploadingNoteAttachment) return;
+
+      var noteAttachments = _toConsumableArray(_this.state.noteAttachments);
+
+      var newAttachment = {
+        Uploading: true,
+        Title: file.name
+      };
+      noteAttachments.push(newAttachment);
+
+      _this.setState({
+        noteAttachments: noteAttachments
+      });
+
+      Apis.fileActions.uploadMediaAsync(file, file.name).then(function (fileRes) {
+        newAttachment.Source = fileRes;
+        newAttachment.Uploading = false;
+
+        _this.setState({
+          noteAttachments: _toConsumableArray(_this.state.noteAttachments)
+        });
+      }).catch(function (uploadErrorRes) {
+        console.log(uploadErrorRes);
+        newAttachment.Uploading = false;
+
+        _this.setState({
+          noteAttachments: _toConsumableArray(_this.state.noteAttachments)
+        });
+      });
+      event.target.value = '';
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onRemoveAttachment", function (a) {
+      var index = _this.state.noteAttachments.indexOf(a);
+
+      if (index > -1) {
+        var newAttachments = _toConsumableArray(_this.state.noteAttachments);
+
+        newAttachments.splice(index, 1);
+
+        _this.setState({
+          noteAttachments: newAttachments
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onConfirmAddNote", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var res;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (_this.isReadyToSaveNote()) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 2:
+              _context2.prev = 2;
+
+              _this.setState({
+                submittingNote: true
+              });
+
+              _context2.next = 6;
+              return _this.state.editingNote ? maintenanceActions.editNote(_this.state.jobId, _this.state.editingNote, _this.state.noteInput, _this.state.noteAttachments.map(function (a) {
+                return {
+                  Title: a.Title,
+                  Source: a.Source
+                };
+              })) : maintenanceActions.addNote(_this.state.jobId, _this.state.noteInput, _this.state.noteAttachments.map(function (a) {
+                return {
+                  Title: a.Title,
+                  Source: a.Source
+                };
+              }));
 
-      var job = this.state.job;
-      if (!job || !job.history) return null;
+            case 6:
+              res = _context2.sent;
 
-      var source = _.sortBy([].concat(_toConsumableArray(job.history.map(function (e) {
-        return _objectSpread$3(_objectSpread$3({}, e), {}, {
-          EntryType: 'status'
-        });
-      })), _toConsumableArray((job.Notes || []).map(function (e) {
-        return _objectSpread$3(_objectSpread$3({}, e), {}, {
-          timestamp: e.Timestamp,
-          EntryType: 'note'
-        });
-      }))), 'timestamp');
+              _this.setState({
+                job: res.data.job,
+                submittingNote: false,
+                addNoteOpen: false,
+                noteInput: '',
+                noteAttachments: [],
+                editingNote: null
+              }, function () {
+                _this.props.jobsLoaded([_this.state.job]);
+              });
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: "padding-32 paddingVertical-40 bottomDivideBorder relative"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "newTopBar clearfix flex flex-reverse"
-      }, this.renderNotesButton(), this.renderStatusLabel(), /*#__PURE__*/React.createElement(Components$2.Text, {
-        type: "formTitleSmall",
-        className: "flex-1"
-      }, "Status History")), this.renderHistoryEntry(null, -1), _.map(source, function (e, i) {
-        switch (e.EntryType) {
-          case 'status':
-            return _this5.renderHistoryEntry(e, i);
+              _context2.next = 13;
+              break;
 
-          case 'note':
-            return _this5.renderNote(e, i);
-        }
-      }));
-    }
-  }, {
-    key: "renderButtons",
-    value: function renderButtons() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components$2.Button, {
-        inline: true,
-        buttonType: "tertiary",
-        onClick: function onClick() {
-          window.history.back();
-        },
-        isActive: true,
-        style: {
-          marginRight: 16
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](2);
+              console.error('onConfirmAddNote', _context2.t0);
+
+            case 13:
+            case "end":
+              return _context2.stop();
+          }
         }
-      }, "Back"), Session$2.validateAccess(this.props.auth.site, 'maintenanceTracking', this.props.auth) && !_.isEmpty(this.state.job) && /*#__PURE__*/React.createElement(Link, {
-        to: "/requestsHub/job/".concat(this.state.jobId)
-      }, /*#__PURE__*/React.createElement(Components$2.Button, {
-        inline: true,
-        style: {
-          marginRight: 25
-        },
-        buttonType: "outlined",
-        isActive: true,
-        onClick: this.editJob
-      }, "Edit Details")));
-    }
-  }, {
-    key: "renderAttachment",
-    value: function renderAttachment(attachment, index, onRemove) {
-      if (!attachment) return null;
-      return /*#__PURE__*/React.createElement(Components$2.Attachment, {
-        key: index,
-        uploading: attachment.Uploading,
-        source: attachment.Source,
-        title: attachment.Title,
-        onRemove: onRemove ? function () {
-          return onRemove(attachment);
-        } : undefined
-      });
-    }
-  }, {
-    key: "renderAddNotePopup",
-    value: function renderAddNotePopup() {
-      var _this6 = this;
+      }, _callee2, null, [[2, 10]]);
+    })));
 
-      if (!this.state.addNoteOpen) return null;
+    _defineProperty(_assertThisInitialized(_this), "onDeleteNote", function (n) {
+      if (!window.confirm('Are you sure you want to delete that note?')) {
+        _this.setState({
+          noteMenuOpen: null
+        });
 
-      if (this.state.submittingNote) {
-        return /*#__PURE__*/React.createElement(Components$2.Popup, {
-          title: "Saving Note",
-          maxWidth: 600,
-          hasPadding: true
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "flex flex-center-row"
-        }, /*#__PURE__*/React.createElement(FontAwesome, {
-          className: "spinner",
-          name: "spinner fa-pulse fa-fw"
-        })));
+        return;
       }
 
-      return /*#__PURE__*/React.createElement(Components$2.Popup, {
-        title: "".concat(this.state.editingNote ? 'Edit' : 'Add', " Note"),
-        onClose: this.onCloseAddNote,
-        maxWidth: 600,
-        hasPadding: true,
-        buttons: [{
-          type: 'primary',
-          onClick: this.onConfirmAddNote,
-          isActive: this.isReadyToSaveNote(),
-          text: 'Save'
-        }, {
-          type: 'tertiary',
-          onClick: this.onCloseAddNote,
-          isActive: true,
-          text: 'Cancel'
-        }]
-      }, /*#__PURE__*/React.createElement(Components$2.GenericInput, {
-        id: "noteInput",
-        type: "textarea",
-        componentClass: "textarea",
-        value: this.state.noteInput,
-        placeholder: "Enter note",
-        onChange: function onChange(e) {
-          return _this6.onHandleChange(e);
-        },
-        inputStyle: {
-          width: 400
-        }
-      }), /*#__PURE__*/React.createElement(Components$2.Text, {
-        type: "h5"
-      }, "Attachments"), this.state.noteAttachments.map(function (a, i) {
-        return _this6.renderAttachment(a, i, _this6.onRemoveAttachment);
-      }), /*#__PURE__*/React.createElement("input", {
-        ref: function ref(input) {
-          return _this6.attachmentInput = input;
-        },
-        id: "attachmentInput",
-        type: "file",
-        className: "fileInput",
-        onChange: function onChange(e) {
-          return _this6.onHandlePDFFileChange(e);
-        },
-        accept: "application/pdf"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "iconTextButton",
-        onClick: function onClick() {
-          _this6.attachmentInput.click();
-        }
-      }, /*#__PURE__*/React.createElement(FontAwesome, {
-        className: "iconTextButton_icon",
-        name: "paperclip"
-      }), /*#__PURE__*/React.createElement("p", {
-        className: "iconTextButton_text"
-      }, "Add Attachment")));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(Components$2.OverlayPage, null, this.renderAddNotePopup(), /*#__PURE__*/React.createElement(Components$2.OverlayPageContents, null, /*#__PURE__*/React.createElement(Components$2.OverlayPageSection, {
-        className: "pageSectionWrapper--newPopup"
-      }, this.renderInner()), /*#__PURE__*/React.createElement(Components$2.OverlayPageSection, {
-        className: "pageSectionWrapper--newPopupSide pageSectionWrapper--newPopupSide-fixedWidth"
-      }, this.renderOverview())), /*#__PURE__*/React.createElement(Components$2.OverlayPageBottomButtons, null, this.renderButtons()));
-    }
-  }]);
-
-  return Job;
-}(Component);
+      maintenanceActions.deleteNote(_this.state.jobId, n.Id);
 
-var mapStateToProps$2 = function mapStateToProps(state) {
-  var auth = state.auth;
-  return {
-    auth: auth
-  };
-};
+      var newNotes = _.filter(_this.state.job.Notes, function (note) {
+        return note.Id !== n.Id;
+      });
 
-var Job$1 = connect(mapStateToProps$2, {
-  jobsLoaded: jobsLoaded
-})(withRouter(Job));
+      var newJob = _objectSpread$3({}, _this.state.job);
 
-function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+      newJob.Notes = newNotes;
 
-function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var Actions = PlussCore.Actions,
-    Components$1 = PlussCore.Components,
-    Helper$1 = PlussCore.Helper,
-    Session$1 = PlussCore.Session;
+      _this.setState({
+        job: newJob,
+        noteMenuOpen: null
+      });
+    });
 
-var AddJob = /*#__PURE__*/function (_Component) {
-  _inherits(AddJob, _Component);
+    _defineProperty(_assertThisInitialized(_this), "onOpenEditNote", function (n) {
+      _this.setState({
+        noteAttachments: n.Attachments || [],
+        noteInput: n.Note || '',
+        addNoteOpen: true,
+        editingNote: n.Id,
+        noteMenuOpen: null
+      });
+    });
 
-  var _super = _createSuper$7(AddJob);
+    _defineProperty(_assertThisInitialized(_this), "markSeen", function () {
+      var job = _this.state.job;
+      var auth = _this.props.auth; // Must have maintenance permission and not the requester
 
-  function AddJob(props) {
-    var _this;
+      if (!Session$1.validateAccess(auth.site, 'maintenanceTracking', auth)) return;
+      if (auth.user.Id === job.userID) return;
 
-    _classCallCheck(this, AddJob);
+      _this.setState({
+        updating: true
+      }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var update;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.prev = 0;
+                update = {
+                  id: job.id,
+                  seen: true,
+                  status: job.status || 'Unassigned'
+                };
+                _context3.next = 4;
+                return maintenanceActions.editJob(update, auth.site);
 
-    _this = _super.call(this, props);
+              case 4:
+                _context3.next = 11;
+                break;
 
-    _defineProperty(_assertThisInitialized(_this), "getJob", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var res;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return maintenanceActions.getJob(_this.props.auth.site, _this.state.jobId);
+              case 6:
+                _context3.prev = 6;
+                _context3.t0 = _context3["catch"](0);
 
-            case 3:
-              res = _context.sent;
-              res.data.location = res.data.site;
+                _this.setState({
+                  updating: false
+                });
 
-              _this.setState(res.data);
+                console.log('markSeen error', _context3.t0);
+                alert('Something went wrong with the request. Please try again.');
 
-              _context.next = 11;
-              break;
+              case 11:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, null, [[0, 6]]);
+      })));
+    });
 
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](0);
-              console.error('getJob', _context.t0);
+    _defineProperty(_assertThisInitialized(_this), "getComments", function () {
+      reactionActions.getComments(_this.state.jobId, 'maintenancerequest', 0).then(function (res) {
+        _this.setState({
+          comments: res.data
+        });
+      });
+    });
 
-            case 11:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 8]]);
-    })));
+    _defineProperty(_assertThisInitialized(_this), "onAddComment", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      var _this$state2, commentInput, jobId, job, comments, res;
 
-    _defineProperty(_assertThisInitialized(_this), "getJobTypes", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var res;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context2.prev = 0;
-              _context2.next = 3;
-              return maintenanceActions.getJobTypes(_this.props.auth.site);
-
-            case 3:
-              res = _context2.sent;
+              _this$state2 = _this.state, commentInput = _this$state2.commentInput, jobId = _this$state2.jobId, job = _this$state2.job, comments = _this$state2.comments;
+              _context4.prev = 1;
 
               _this.setState({
-                types: res.data
+                commentInput: ''
               });
 
-              _this.getDefaultJob();
+              _context4.next = 5;
+              return reactionActions.addComment(jobId, 'maintenancerequest', job.title, job.site, commentInput);
 
-              _context2.next = 11;
+            case 5:
+              res = _context4.sent;
+
+              _this.setState({
+                comments: [].concat(_toConsumableArray(comments), [res.data])
+              });
+
+              _context4.next = 12;
               break;
 
-            case 8:
-              _context2.prev = 8;
-              _context2.t0 = _context2["catch"](0);
-              console.error('getJobTypes', _context2.t0);
+            case 9:
+              _context4.prev = 9;
+              _context4.t0 = _context4["catch"](1);
+              console.error('onAddComment', _context4.t0);
 
-            case 11:
+            case 12:
             case "end":
-              return _context2.stop();
+              return _context4.stop();
           }
         }
-      }, _callee2, null, [[0, 8]]);
+      }, _callee4, null, [[1, 9]]);
     })));
 
-    _defineProperty(_assertThisInitialized(_this), "getDefaultJob", function () {
-      if (_this.state.types.length !== 0 && _this.state.jobId == null) {
-        _this.setState({
-          type: _this.state.types[0].typeName
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onSelectType", function (key, e) {
-      _this.setState({
-        type: key
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "onHandleChange", function (event) {
       var stateChange = {};
       stateChange[event.target.getAttribute('id')] = event.target.value;
@@ -2101,348 +2005,534 @@ var AddJob = /*#__PURE__*/function (_Component) {
       _this.setState(stateChange);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onSave", function () {
+    _defineProperty(_assertThisInitialized(_this), "onToggleStatusChanger", function () {
       _this.setState({
-        showWarnings: false
+        statusChangerOpen: !_this.state.statusChangerOpen
       });
+    });
 
-      if (!_this.validateForm()) {
-        _this.setState({
-          showWarnings: true
-        });
-
-        return;
-      }
-
-      if (_this.state.updating) return;
+    _defineProperty(_assertThisInitialized(_this), "onSelectStatus", /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(status) {
+        var res;
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                _this.setState({
+                  job: _objectSpread$3(_objectSpread$3({}, _this.state.job), {}, {
+                    status: status
+                  }),
+                  statusChangerOpen: false
+                });
 
-      _this.setState({
-        updating: true
-      });
+                _context5.prev = 1;
+                _context5.next = 4;
+                return maintenanceActions.editJobStatus(_this.state.job.id, status);
 
-      var job = {
-        id: _this.state.id,
-        userID: _this.state.userID,
-        userName: _this.state.userName,
-        room: _this.state.room,
-        phone: _this.state.phone,
-        location: _this.state.location,
-        title: _this.state.title,
-        description: _this.state.description,
-        isHome: _this.state.isHome,
-        homeText: _this.state.homeText,
-        type: _this.state.type,
-        date: null,
-        image: _this.state.image
-      };
+              case 4:
+                res = _context5.sent;
 
-      if (_this.state.id != null) {
-        maintenanceActions.editJob(job, _this.props.auth.site).then(function (res) {
-          _this.setState({
-            success: true,
-            updating: false
-          });
+                _this.setState({
+                  job: res.data.job
+                }, function () {
+                  _this.props.jobsLoaded([_this.state.job]);
+                });
 
-          _this.props.jobsLoaded([job]);
-        }).catch(function (res) {
-          _this.setState({
-            updating: false
-          });
+                _context5.next = 11;
+                break;
 
-          alert('Something went wrong with the request. Please try again.');
-        });
-      } else {
-        // Create New Job
-        job.userID = 'undefined';
-        maintenanceActions.createJob(job).then(function (res) {
-          _this.setState({
-            success: true,
-            updating: false
-          });
+              case 8:
+                _context5.prev = 8;
+                _context5.t0 = _context5["catch"](1);
+                console.error('onSelectStatus', _context5.t0);
 
-          _this.props.jobsUpdate(_this.props.auth.site);
-        }).catch(function (res) {
-          _this.setState({
-            updating: false
-          });
+              case 11:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5, null, [[1, 8]]);
+      }));
 
-          alert('Something went wrong with the request. Please try again.');
-        });
-      }
-    });
+      return function (_x) {
+        return _ref5.apply(this, arguments);
+      };
+    }());
 
     _this.state = {
-      jobId: Helper$1.safeReadParams(_this.props, 'jobId') ? _this.props.match.params.jobId : null,
+      jobId: Helper$1.safeReadParams(props, 'jobId') ? props.match.params.jobId : null,
       job: null,
       showingSelector: false,
       updating: false,
-      connected: false,
-      types: [],
-      id: null,
-      userID: '',
-      userName: '',
-      room: '',
-      phone: '',
-      location: _this.props.auth.site,
-      title: '',
-      description: '',
-      isHome: false,
-      homeText: '',
-      type: 'General',
-      image: null,
-      thumbnail: null,
-      showWarnings: false,
-      success: false
+      comments: [],
+      commentInput: '',
+      loadingComments: false,
+      statusChangerOpen: false,
+      addNoteOpen: false,
+      noteAttachments: [],
+      noteInput: ''
     };
     return _this;
   }
 
-  _createClass(AddJob, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
+  _createClass(Job, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       Session$1.checkLoggedIn(this, this.props.auth);
     }
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.getJobTypes();
-      if (this.state.jobId) this.getJob();
-      this.props.addRecentlyCreated('maintenance');
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.state.jobId) {
+        this.getJob();
+        this.getComments();
+      }
+    }
+  }, {
+    key: "renderStatusLabel",
+    value: function renderStatusLabel() {
+      if (!this.state.job.status) return null;
+      var auth = this.props.auth;
+
+      if (Session$1.validateAccess(auth.site, 'maintenanceTracking', auth)) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "statusLabel pointer",
+          onClick: this.onToggleStatusChanger,
+          style: {
+            backgroundColor: StatusTypes[this.state.job.status].color
+          }
+        }, /*#__PURE__*/React.createElement("span", {
+          className: "statusLabel_text"
+        }, StatusTypes[this.state.job.status].text), this.renderStatusChanger());
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statusLabel",
+        style: {
+          backgroundColor: StatusTypes[this.state.job.status].color
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "statusLabel_text"
+      }, StatusTypes[this.state.job.status].text));
+    }
+  }, {
+    key: "renderNotesButton",
+    value: function renderNotesButton() {
+      var auth = this.props.auth;
+      if (!Session$1.validateAccess(auth.site, 'maintenanceTracking', auth)) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statusLabel pointer",
+        onClick: this.onOpenAddNote,
+        style: {
+          backgroundColor: FeatureConfig.env.colourBrandingMain,
+          marginLeft: 8
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "statusLabel_text"
+      }, "Add Note"));
     }
   }, {
-    key: "renderTypeOptions",
-    value: function renderTypeOptions() {
+    key: "renderStatusChanger",
+    value: function renderStatusChanger() {
       var _this2 = this;
 
-      var source = this.state.types;
-      return source.map(function (ev) {
-        if (ev != null) {
-          return /*#__PURE__*/React.createElement(MenuItem, {
-            key: ev.typeName,
-            eventKey: ev.typeName,
-            active: _this2.state.type === ev.typeName
-          }, ev.typeName);
-        }
+      if (!this.state.statusChangerOpen) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statusChanger statusChanger-maintenance"
+      }, Object.keys(StatusTypes).map(function (statusKey) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: statusKey,
+          className: "statusLabel",
+          onClick: function onClick() {
+            return _this2.onSelectStatus(statusKey);
+          },
+          style: {
+            backgroundColor: StatusTypes[statusKey].color
+          }
+        }, /*#__PURE__*/React.createElement("span", {
+          className: "statusLabel_text"
+        }, StatusTypes[statusKey].text));
+      }));
+    }
+  }, {
+    key: "renderComment",
+    value: function renderComment(c) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: c.Id,
+        className: "comment"
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "comment_text"
+      }, Helper$1.toParagraphed(c.Comment)), /*#__PURE__*/React.createElement("div", {
+        className: "comment_bottom"
+      }, /*#__PURE__*/React.createElement(Components$1.ProfilePic, {
+        className: "comment_profilePic",
+        size: 25,
+        image: c.User.profilePic
+      }), /*#__PURE__*/React.createElement("p", {
+        className: "comment_name"
+      }, c.User.displayName), /*#__PURE__*/React.createElement("p", {
+        className: "comment_time"
+      }, moment.utc(c.Timestamp).local().format('D MMM YYYY • h:mma'))));
+    }
+  }, {
+    key: "renderCommentSection",
+    value: function renderCommentSection() {
+      var _this3 = this;
 
-        return null;
-      });
+      if (this.state.loadingComments) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "padding-60 paddingLeft-20"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "newTopBar paddingLeft-40"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "formTitleSmall",
+        className: "marginBottom-16"
+      }, "Comments"), /*#__PURE__*/React.createElement("div", {
+        className: "commentSection"
+      }, this.state.comments.map(function (c) {
+        return _this3.renderComment(c);
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "commentReply"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "commentReply_button".concat(!_.isEmpty(this.state.commentInput) ? ' commentReply_button-active' : ''),
+        onClick: this.onAddComment
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
+        className: "commentReply_icon",
+        name: "paper-plane-o"
+      })), /*#__PURE__*/React.createElement(Textarea, {
+        id: "commentInput",
+        placeholder: "Reply here...",
+        type: "text",
+        className: "commentReply_input",
+        value: this.state.commentInput,
+        onChange: function onChange(e) {
+          return _this3.onHandleChange(e);
+        }
+      }))));
     }
   }, {
-    key: "renderSuccess",
-    value: function renderSuccess() {
-      if (!this.state.success) return null;
-      return /*#__PURE__*/React.createElement(Components$1.SuccessPopup, {
-        text: "Maintenance request has been ".concat(this.state.id != null ? 'edited' : 'added'),
-        buttons: [{
-          type: 'outlined',
-          onClick: function onClick() {
-            window.history.back();
-          },
-          text: "Back to Maintenance"
+    key: "renderInner",
+    value: function renderInner() {
+      if (this.state.job == null) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          paddingBottom: 40
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "padding-60 paddingVertical-40 bottomDivideBorder relative"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "formTitleLarge",
+        className: "marginBottom-24"
+      }, this.state.job.title || 'Request'), /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-16"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'fieldLabel'
+      }, "Request date"), /*#__PURE__*/React.createElement("div", {
+        className: 'fontRegular fontSize-16 text-dark marginTop-5'
+      }, moment.utc(this.state.job.createdTime).local().format('D MMM YY'))), /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-16"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'fieldLabel'
+      }, "Type"), /*#__PURE__*/React.createElement("div", {
+        className: 'fontRegular fontSize-16 text-dark marginTop-5'
+      }, this.state.job.type)), /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-16"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'fieldLabel'
+      }, "Location"), /*#__PURE__*/React.createElement("div", {
+        className: 'fontRegular fontSize-16 text-dark marginTop-5'
+      }, this.state.job.room)), /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-16"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'fieldLabel'
+      }, "Description ", this.state.job.image ? '- (image supplied)' : ''), /*#__PURE__*/React.createElement("div", {
+        className: 'fontRegular fontSize-16 text-dark marginTop-5'
+      }, this.state.job.description))), /*#__PURE__*/React.createElement("div", {
+        className: "padding-60 paddingVertical-40 bottomDivideBorder"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "formTitleSmall",
+        className: "marginBottom-16"
+      }, "Contact Details"), /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-16"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'fieldLabel'
+      }, "Name"), /*#__PURE__*/React.createElement("div", {
+        className: 'fontRegular fontSize-16 text-dark marginTop-5'
+      }, this.state.job.userName)), /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-16"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'fieldLabel'
+      }, "Contact number"), /*#__PURE__*/React.createElement("div", {
+        className: 'fontRegular fontSize-16 text-dark marginTop-5'
+      }, _.isEmpty(this.state.job.phone) ? 'No phone provided' : this.state.job.phone)), /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-16"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'fieldLabel'
+      }, "Should person be home?"), /*#__PURE__*/React.createElement("div", {
+        className: 'fontRegular fontSize-16 text-dark marginTop-5'
+      }, this.state.job.isHome ? 'Yes' : 'No')), this.state.job.isHome && this.state.job.homeText && /*#__PURE__*/React.createElement("div", {
+        className: "marginTop-16"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'fieldLabel'
+      }, "When"), /*#__PURE__*/React.createElement("div", {
+        className: 'fontRegular fontSize-16 text-dark marginTop-5'
+      }, this.state.job.homeText))), (this.state.job.image || this.state.job.images) && /*#__PURE__*/React.createElement("div", {
+        className: "padding-60 paddingVertical-40 bottomDivideBorder"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "formTitleSmall",
+        className: "marginBottom-16"
+      }, "Image"), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginTop: 16,
+          height: 180,
+          width: 260,
+          borderRadius: 4,
+          border: '1px solid #aaa',
+          backgroundColor: '#ddd',
+          backgroundImage: "url(".concat(this.state.job.thumbnail, ")"),
+          backgroundPosition: 'center'
+        }
+      })), this.renderCommentSection());
+    }
+  }, {
+    key: "renderHistoryEntry",
+    value: function renderHistoryEntry(e, i) {
+      var job = this.state.job;
+      var entryToUse = e || {
+        timestamp: job.createdTime,
+        status: 'Unassigned',
+        user: {
+          displayName: job.userName,
+          id: job.userID,
+          profilePic: job.userProfilePic
+        }
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: "ticketHistoryEntry",
+        key: i
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "ticketHistoryEntry_timestamp"
+      }, moment.utc(entryToUse.timestamp).local().format('D MMM YYYY h:mma')), /*#__PURE__*/React.createElement("div", {
+        className: "statusLabel statusLabel-large statusLabel-full",
+        style: {
+          backgroundColor: StatusTypes[entryToUse.status].color
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "statusLabel_text"
+      }, e ? "Marked as ".concat(StatusTypes[entryToUse.status].text) : 'Job opened')));
+    }
+  }, {
+    key: "renderNote",
+    value: function renderNote(note, index) {
+      var _this4 = this;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "ticketHistoryEntry",
+        key: index
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "ticketHistoryEntry_timestamp"
+      }, moment.utc(note.Timestamp).local().format('D MMM YYYY h:mma')), /*#__PURE__*/React.createElement("div", {
+        className: "statusLabel statusLabel-large statusLabel-full",
+        style: {
+          backgroundColor: '#6e79c5'
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "statusLabel_text"
+      }, "Staff Notes")), /*#__PURE__*/React.createElement("div", {
+        className: "maintenanceNote"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "maintenanceNote_top"
+      }, this.props.auth && this.props.auth.user && this.props.auth.user.Id === note.User.id && /*#__PURE__*/React.createElement(Components$1.SVGIcon, {
+        colour: Colours.COLOUR_DUSK_LIGHT,
+        icon: "more15",
+        className: "maintenanceNote_moreIcon",
+        onClick: function onClick() {
+          return _this4.onOpenNoteMenu(index);
+        }
+      }), /*#__PURE__*/React.createElement("p", {
+        className: "maintenanceNote_name"
+      }, note.User.displayName), this.state.noteMenuOpen === index && /*#__PURE__*/React.createElement(Components$1.MoreMenu, {
+        options: [{
+          key: 'edit',
+          text: 'Edit',
+          onPress: function onPress() {
+            return _this4.onOpenEditNote(note);
+          }
+        }, {
+          key: 'delete',
+          text: 'Delete',
+          onPress: function onPress() {
+            return _this4.onDeleteNote(note);
+          }
         }]
-      });
-    }
-  }, {
-    key: "validateForm",
-    value: function validateForm() {
-      if (_.isEmpty(this.state.userName)) return false;
-      if (_.isEmpty(this.state.room)) return false;
-      if (_.isEmpty(this.state.title)) return false;
-      if (this.state.isHome && _.isEmpty(this.state.homeText)) return false;
-      return true;
+      })), /*#__PURE__*/React.createElement("p", {
+        className: "maintenanceNote_text"
+      }, Helper$1.toParagraphed(note.Note)), note.Attachments.map(function (a, i) {
+        return _this4.renderAttachment(a, i);
+      })));
     }
   }, {
-    key: "renderSubmit",
-    value: function renderSubmit() {
-      var _this3 = this;
+    key: "renderOverview",
+    value: function renderOverview() {
+      var _this5 = this;
 
-      if (this.state.updating) {
-        return /*#__PURE__*/React.createElement(Components$1.Button, {
-          buttonType: "secondary"
-        }, "Saving...");
-      }
+      var job = this.state.job;
+      if (!job || !job.history) return null;
+
+      var source = _.sortBy([].concat(_toConsumableArray(job.history.map(function (e) {
+        return _objectSpread$3(_objectSpread$3({}, e), {}, {
+          EntryType: 'status'
+        });
+      })), _toConsumableArray((job.Notes || []).map(function (e) {
+        return _objectSpread$3(_objectSpread$3({}, e), {}, {
+          timestamp: e.Timestamp,
+          EntryType: 'note'
+        });
+      }))), 'timestamp');
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "padding-32 paddingVertical-40 bottomDivideBorder relative"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "newTopBar clearfix flex flex-reverse"
+      }, this.renderNotesButton(), this.renderStatusLabel(), /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "formTitleSmall",
+        className: "flex-1"
+      }, "Status History")), this.renderHistoryEntry(null, -1), _.map(source, function (e, i) {
+        switch (e.EntryType) {
+          case 'status':
+            return _this5.renderHistoryEntry(e, i);
 
+          case 'note':
+            return _this5.renderNote(e, i);
+        }
+      }));
+    }
+  }, {
+    key: "renderButtons",
+    value: function renderButtons() {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components$1.Button, {
         inline: true,
         buttonType: "tertiary",
         onClick: function onClick() {
-          return _this3.props.history.push('/requestsHub');
+          window.history.back();
         },
         isActive: true,
         style: {
           marginRight: 16
         }
-      }, "Cancel"), /*#__PURE__*/React.createElement(Components$1.Button, {
+      }, "Back"), Session$1.validateAccess(this.props.auth.site, 'maintenanceTracking', this.props.auth) && !_.isEmpty(this.state.job) && /*#__PURE__*/React.createElement(Link, {
+        to: "/requestsHub/job/".concat(this.state.jobId)
+      }, /*#__PURE__*/React.createElement(Components$1.Button, {
         inline: true,
-        buttonType: "primary",
-        onClick: this.onSave,
-        isActive: this.validateForm()
-      }, "Save"));
+        style: {
+          marginRight: 25
+        },
+        buttonType: "outlined",
+        isActive: true,
+        onClick: this.editJob
+      }, "Edit Details")));
     }
   }, {
-    key: "renderMain",
-    value: function renderMain() {
-      var _this4 = this;
+    key: "renderAttachment",
+    value: function renderAttachment(attachment, index, onRemove) {
+      if (!attachment) return null;
+      return /*#__PURE__*/React.createElement(Components$1.Attachment, {
+        key: index,
+        uploading: attachment.Uploading,
+        source: attachment.Source,
+        title: attachment.Title,
+        onRemove: onRemove ? function () {
+          return onRemove(attachment);
+        } : undefined
+      });
+    }
+  }, {
+    key: "renderAddNotePopup",
+    value: function renderAddNotePopup() {
+      var _this6 = this;
 
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginBottom: 15
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "padding-60 paddingVertical-40 bottomDivideBorder"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
-        type: "formTitleLarge",
-        className: "marginBottom-24"
-      }, this.state.infoId == null ? 'New' : 'Edit', " Request"), /*#__PURE__*/React.createElement(Components$1.GenericInput, {
-        id: "userName",
-        type: "text",
-        label: "Name",
-        placeholder: "Insert name here",
-        value: this.state.userName,
-        onChange: function onChange(e) {
-          return _this4.onHandleChange(e);
-        },
-        isRequired: true,
-        alwaysShowLabel: true,
-        isValid: function isValid() {
-          return !_.isEmpty(_this4.state.userName);
-        },
-        showError: function showError() {
-          return _this4.state.showWarnings && _.isEmpty(_this4.state.userName);
-        }
-      }), /*#__PURE__*/React.createElement(Components$1.GenericInput, {
-        id: "room",
-        type: "text",
-        label: "Location",
-        placeholder: "Insert address here",
-        value: this.state.room,
-        onChange: function onChange(e) {
-          return _this4.onHandleChange(e);
-        },
-        isRequired: true,
-        alwaysShowLabel: true,
-        isValid: function isValid() {
-          return !_.isEmpty(_this4.state.room);
-        },
-        showError: function showError() {
-          return _this4.state.showWarnings && _.isEmpty(_this4.state.room);
-        }
-      }), /*#__PURE__*/React.createElement(Components$1.GenericInput, {
-        id: "phone",
-        type: "text",
-        label: "Contact number",
-        placeholder: "04XX XXX XXX",
-        value: this.state.phone // showError={this.state.showWarnings && !this.validateImage()}
-        ,
-        onChange: function onChange(e) {
-          return _this4.onHandleChange(e);
-        },
-        alwaysShowLabel: true
-      }), /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginBottom: 15
-        }
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
-        type: "formLabel"
-      }, "Job Type"), /*#__PURE__*/React.createElement(DropdownButton, {
-        style: {
-          minWidth: 80
-        },
-        bsStyle: "default",
-        title: this.state.type,
-        id: "typeSelect",
-        onSelect: this.onSelectType
-      }, this.renderTypeOptions())), /*#__PURE__*/React.createElement(Components$1.GenericInput, {
-        id: "title",
-        label: "Title for the work required",
-        type: "textarea",
-        placeholder: "Title for the work required",
-        value: this.state.title,
-        onChange: function onChange(e) {
-          return _this4.onHandleChange(e);
-        },
-        inputStyle: {
-          height: 80
-        },
-        isRequired: true,
-        isValid: function isValid() {
-          return !_.isEmpty(_this4.state.title);
-        },
-        showError: function showError() {
-          return _this4.state.showWarnings && _.isEmpty(_this4.state.title);
-        },
-        alwaysShowLabel: true
-      }), /*#__PURE__*/React.createElement(Components$1.GenericInput, {
-        id: "description",
-        label: "Description of work required",
-        type: "textarea",
-        placeholder: "Description of work required",
-        value: this.state.description,
-        onChange: function onChange(e) {
-          return _this4.onHandleChange(e);
-        },
-        inputStyle: {
-          height: 80
-        },
-        alwaysShowLabel: true
-      }), /*#__PURE__*/React.createElement(Components$1.RadioButton, {
-        label: "Person must be home during work?",
-        isActive: this.state.isHome,
-        options: [{
-          Label: 'No',
-          Value: false,
-          onChange: function onChange() {
-            return _this4.setState({
-              isHome: false
-            });
-          }
+      if (!this.state.addNoteOpen) return null;
+
+      if (this.state.submittingNote) {
+        return /*#__PURE__*/React.createElement(Components$1.Popup, {
+          title: "Saving Note",
+          maxWidth: 600,
+          hasPadding: true
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "flex flex-center-row"
+        }, /*#__PURE__*/React.createElement(FontAwesome, {
+          className: "spinner",
+          name: "spinner fa-pulse fa-fw"
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement(Components$1.Popup, {
+        title: "".concat(this.state.editingNote ? 'Edit' : 'Add', " Note"),
+        onClose: this.onCloseAddNote,
+        maxWidth: 600,
+        hasPadding: true,
+        buttons: [{
+          type: 'primary',
+          onClick: this.onConfirmAddNote,
+          isActive: this.isReadyToSaveNote(),
+          text: 'Save'
         }, {
-          Label: 'Yes',
-          Value: true,
-          onChange: function onChange() {
-            return _this4.setState({
-              isHome: true
-            });
-          }
+          type: 'tertiary',
+          onClick: this.onCloseAddNote,
+          isActive: true,
+          text: 'Cancel'
         }]
-      }), this.state.isHome && /*#__PURE__*/React.createElement(Components$1.GenericInput, {
-        style: {
-          marginTop: 16
-        },
-        label: "Description of person's available times",
-        id: "homeText",
+      }, /*#__PURE__*/React.createElement(Components$1.GenericInput, {
+        id: "noteInput",
         type: "textarea",
-        placeholder: "Description of person's available times",
-        value: this.state.homeText,
+        componentClass: "textarea",
+        value: this.state.noteInput,
+        placeholder: "Enter note",
         onChange: function onChange(e) {
-          return _this4.onHandleChange(e);
-        },
-        inputStyle: {
-          height: 80
+          return _this6.onHandleChange(e);
         },
-        isRequired: true,
-        isValid: function isValid() {
-          return !_.isEmpty(_this4.state.homeText);
+        inputStyle: {
+          width: 400
+        }
+      }), /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "h5"
+      }, "Attachments"), this.state.noteAttachments.map(function (a, i) {
+        return _this6.renderAttachment(a, i, _this6.onRemoveAttachment);
+      }), /*#__PURE__*/React.createElement("input", {
+        ref: function ref(input) {
+          return _this6.attachmentInput = input;
         },
-        showError: function showError() {
-          return _this4.state.showWarnings && _.isEmpty(_this4.state.homeText);
+        id: "attachmentInput",
+        type: "file",
+        className: "fileInput",
+        onChange: function onChange(e) {
+          return _this6.onHandlePDFFileChange(e);
         },
-        alwaysShowLabel: true
-      })));
+        accept: "application/pdf"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "iconTextButton",
+        onClick: function onClick() {
+          _this6.attachmentInput.click();
+        }
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
+        className: "iconTextButton_icon",
+        name: "paperclip"
+      }), /*#__PURE__*/React.createElement("p", {
+        className: "iconTextButton_text"
+      }, "Add Attachment")));
     }
   }, {
     key: "render",
     value: function render() {
-      var success = this.state.success;
-      return /*#__PURE__*/React.createElement(Components$1.OverlayPage, null, /*#__PURE__*/React.createElement(Components$1.OverlayPageContents, {
-        noBottomButtons: success
-      }, /*#__PURE__*/React.createElement(Components$1.OverlayPageSection, {
+      return /*#__PURE__*/React.createElement(Components$1.OverlayPage, null, this.renderAddNotePopup(), /*#__PURE__*/React.createElement(Components$1.OverlayPageContents, null, /*#__PURE__*/React.createElement(Components$1.OverlayPageSection, {
         className: "pageSectionWrapper--newPopup"
-      }, /*#__PURE__*/React.createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React.createElement(Components$1.OverlayPageBottomButtons, null, this.renderSubmit()));
+      }, this.renderInner()), /*#__PURE__*/React.createElement(Components$1.OverlayPageSection, {
+        className: "pageSectionWrapper--newPopupSide pageSectionWrapper--newPopupSide-fixedWidth"
+      }, this.renderOverview())), /*#__PURE__*/React.createElement(Components$1.OverlayPageBottomButtons, null, this.renderButtons()));
     }
   }]);
 
-  return AddJob;
+  return Job;
 }(Component);
 
 var mapStateToProps$1 = function mapStateToProps(state) {
@@ -2452,32 +2542,31 @@ var mapStateToProps$1 = function mapStateToProps(state) {
   };
 };
 
-var AddJob$1 = connect(mapStateToProps$1, {
-  jobsUpdate: jobsUpdate,
-  jobsLoaded: jobsLoaded,
-  addRecentlyCreated: Actions.addRecentlyCreated
-})(withRouter(AddJob));
+var Job$1 = connect(mapStateToProps$1, {
+  jobsLoaded: jobsLoaded
+})(withRouter(Job));
 
 function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct$6() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var Session = PlussCore.Session,
+var Actions = PlussCore.Actions,
     Components = PlussCore.Components,
-    Helper = PlussCore.Helper;
+    Helper = PlussCore.Helper,
+    Session = PlussCore.Session;
 
-var JobTypes = /*#__PURE__*/function (_Component) {
-  _inherits(JobTypes, _Component);
+var AddJob = /*#__PURE__*/function (_Component) {
+  _inherits(AddJob, _Component);
 
-  var _super = _createSuper$6(JobTypes);
+  var _super = _createSuper$6(AddJob);
 
-  function JobTypes(props) {
+  function AddJob(props) {
     var _this;
 
-    _classCallCheck(this, JobTypes);
+    _classCallCheck(this, AddJob);
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "getJobTypes", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    _defineProperty(_assertThisInitialized(_this), "getJob", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var res;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -2485,141 +2574,76 @@ var JobTypes = /*#__PURE__*/function (_Component) {
             case 0:
               _context.prev = 0;
               _context.next = 3;
-              return maintenanceActions.getJobTypes(_this.props.auth.site);
+              return maintenanceActions.getJob(_this.props.auth.site, _this.state.jobId);
 
             case 3:
               res = _context.sent;
-              if (res.data != null) _this.props.jobTypesLoaded(res.data);
-              _context.next = 10;
-              break;
-
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
-              console.error('getJobTypes', _context.t0);
+              res.data.location = res.data.site;
 
-            case 10:
-              _context.prev = 10;
+              _this.setState(res.data);
 
-              _this.setState({
-                loading: false
-              });
+              _context.next = 11;
+              break;
 
-              return _context.finish(10);
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](0);
+              console.error('getJob', _context.t0);
 
-            case 13:
+            case 11:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 7, 10, 13]]);
+      }, _callee, null, [[0, 8]]);
     })));
 
-    _defineProperty(_assertThisInitialized(_this), "sortByCol", function (col) {
-      if (_this.state.sortColumn === col) {
-        _this.setState({
-          sortDesc: !_this.state.sortDesc
-        });
-      } else {
-        _this.setState({
-          sortColumn: col,
-          sortDesc: false
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "validateEmail", function () {
-      var jobTypeEmail = _this.state.jobTypeEmail;
-      return !_.isEmpty(jobTypeEmail) && Helper.isEmail(jobTypeEmail);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "isJobTypeValid", function () {
-      var _this$state = _this.state,
-          jobTypeName = _this$state.jobTypeName,
-          jobTypeDescription = _this$state.jobTypeDescription;
-      if (_.isEmpty(jobTypeName)) return false;
-      if (!_this.validateEmail()) return false;
-      if (_.isEmpty(jobTypeDescription)) return false;
-      return true;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onRemoveJobType", /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ev) {
-        var index, newJobTypes;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                if (window.confirm("Are you sure you want to delete ".concat(ev.typeName, "?"))) {
-                  _context2.next = 2;
-                  break;
-                }
-
-                return _context2.abrupt("return");
-
-              case 2:
-                _context2.prev = 2;
-                _context2.next = 5;
-                return maintenanceActions.deleteJobType(_this.props.auth.site, ev.id);
+    _defineProperty(_assertThisInitialized(_this), "getJobTypes", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var res;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return maintenanceActions.getJobTypes(_this.props.auth.site);
 
-              case 5:
-                index = _.findIndex(_this.state.jobList, function (job) {
-                  return job != null && job.id === ev.id;
-                });
+            case 3:
+              res = _context2.sent;
 
-                if (index > -1) {
-                  newJobTypes = _toConsumableArray(_this.state.jobList);
-                  newJobTypes[index].Deleted = true;
+              _this.setState({
+                types: res.data
+              });
 
-                  _this.props.jobTypesLoaded(newJobTypes);
-                }
+              _this.getDefaultJob();
 
-                _context2.next = 13;
-                break;
+              _context2.next = 11;
+              break;
 
-              case 9:
-                _context2.prev = 9;
-                _context2.t0 = _context2["catch"](2);
-                console.error('onRemoveJobType', _context2.t0);
-                alert('Something went wrong with the request. Please try again.');
+            case 8:
+              _context2.prev = 8;
+              _context2.t0 = _context2["catch"](0);
+              console.error('getJobTypes', _context2.t0);
 
-              case 13:
-              case "end":
-                return _context2.stop();
-            }
+            case 11:
+            case "end":
+              return _context2.stop();
           }
-        }, _callee2, null, [[2, 9]]);
-      }));
-
-      return function (_x) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
-
-    _defineProperty(_assertThisInitialized(_this), "onShowJobType", function () {
-      var job = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        }
+      }, _callee2, null, [[0, 8]]);
+    })));
 
-      _this.setState({
-        showJobType: true,
-        jobTypeId: job ? job.id : null,
-        jobTypeName: job ? job.typeName : '',
-        jobTypeEmail: job ? job.email : '',
-        jobTypeDescription: job ? job.description : '',
-        jobTypeLevel: job ? job.level : 1
-      });
+    _defineProperty(_assertThisInitialized(_this), "getDefaultJob", function () {
+      if (_this.state.types.length !== 0 && _this.state.jobId == null) {
+        _this.setState({
+          type: _this.state.types[0].typeName
+        });
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onHideJobType", function () {
-      if (_this.state.submitting) return;
-
+    _defineProperty(_assertThisInitialized(_this), "onSelectType", function (key, e) {
       _this.setState({
-        showWarnings: false,
-        showJobType: false,
-        jobTypeId: null,
-        jobTypeName: '',
-        jobTypeEmail: '',
-        jobTypeDescription: '',
-        jobTypeLevel: 1
+        type: key
       });
     });
 
@@ -2631,17 +2655,11 @@ var JobTypes = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onSave", function () {
-      var site = _this.props.auth.site;
-      var _this$state2 = _this.state,
-          submitting = _this$state2.submitting,
-          jobTypeId = _this$state2.jobTypeId,
-          jobTypeName = _this$state2.jobTypeName,
-          jobTypeEmail = _this$state2.jobTypeEmail,
-          jobTypeDescription = _this$state2.jobTypeDescription,
-          jobTypeLevel = _this$state2.jobTypeLevel;
-      if (submitting) return;
+      _this.setState({
+        showWarnings: false
+      });
 
-      if (!_this.isJobTypeValid()) {
+      if (!_this.validateForm()) {
         _this.setState({
           showWarnings: true
         });
@@ -2649,391 +2667,349 @@ var JobTypes = /*#__PURE__*/function (_Component) {
         return;
       }
 
-      _this.setState({
-        submitting: true
-      }, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                _context3.prev = 0;
-
-                if (!jobTypeId) {
-                  _context3.next = 6;
-                  break;
-                }
-
-                _context3.next = 4;
-                return maintenanceActions.editJobType(site, jobTypeId, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel);
-
-              case 4:
-                _context3.next = 8;
-                break;
-
-              case 6:
-                _context3.next = 8;
-                return maintenanceActions.addJobType(site, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel);
+      if (_this.state.updating) return;
 
-              case 8:
-                _this.props.jobTypesUpdate(site);
+      _this.setState({
+        updating: true
+      });
 
-                _this.setState({
-                  submitting: false
-                }, _this.onHideJobType);
+      var job = {
+        id: _this.state.id,
+        userID: _this.state.userID,
+        userName: _this.state.userName,
+        room: _this.state.room,
+        phone: _this.state.phone,
+        location: _this.state.location,
+        title: _this.state.title,
+        description: _this.state.description,
+        isHome: _this.state.isHome,
+        homeText: _this.state.homeText,
+        type: _this.state.type,
+        date: null,
+        image: _this.state.image
+      };
 
-                _context3.next = 17;
-                break;
+      if (_this.state.id != null) {
+        maintenanceActions.editJob(job, _this.props.auth.site).then(function (res) {
+          _this.setState({
+            success: true,
+            updating: false
+          });
 
-              case 12:
-                _context3.prev = 12;
-                _context3.t0 = _context3["catch"](0);
-                console.error('onSave', _context3.t0);
+          _this.props.jobsLoaded([job]);
+        }).catch(function (res) {
+          _this.setState({
+            updating: false
+          });
 
-                _this.setState({
-                  submitting: false
-                });
+          alert('Something went wrong with the request. Please try again.');
+        });
+      } else {
+        // Create New Job
+        job.userID = 'undefined';
+        maintenanceActions.createJob(job).then(function (res) {
+          _this.setState({
+            success: true,
+            updating: false
+          });
 
-                alert('Something went wrong with the request. Please try again.');
+          _this.props.jobsUpdate(_this.props.auth.site);
+        }).catch(function (res) {
+          _this.setState({
+            updating: false
+          });
 
-              case 17:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee3, null, [[0, 12]]);
-      })));
+          alert('Something went wrong with the request. Please try again.');
+        });
+      }
     });
 
     _this.state = {
-      jobList: [],
-      showCompleted: false,
-      sortColumn: 'name',
-      sortDesc: false,
-      loading: true,
-      showJobType: false,
-      jobTypeId: null,
-      jobTypeName: '',
-      jobTypeEmail: '',
-      jobTypeDescription: '',
-      jobTypeLevel: 1,
+      jobId: Helper.safeReadParams(_this.props, 'jobId') ? _this.props.match.params.jobId : null,
+      job: null,
+      showingSelector: false,
+      updating: false,
+      connected: false,
+      types: [],
+      id: null,
+      userID: '',
+      userName: '',
+      room: '',
+      phone: '',
+      location: _this.props.auth.site,
+      title: '',
+      description: '',
+      isHome: false,
+      homeText: '',
+      type: 'General',
+      image: null,
+      thumbnail: null,
       showWarnings: false,
-      submitting: false
+      success: false
     };
     return _this;
   }
 
-  _createClass(JobTypes, [{
-    key: "componentWillMount",
-    value: function componentWillMount() {
-      this.updateProps(this.props);
+  _createClass(AddJob, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
       Session.checkLoggedIn(this, this.props.auth);
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.getJobTypes();
+      if (this.state.jobId) this.getJob();
+      this.props.addRecentlyCreated('maintenance');
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      this.updateProps(nextProps);
-    }
-  }, {
-    key: "updateProps",
-    value: function updateProps(props) {
-      this.setState({
-        jobList: props.jobtypes
-      });
-    }
-  }, {
-    key: "renderList",
-    value: function renderList() {
+    key: "renderTypeOptions",
+    value: function renderTypeOptions() {
       var _this2 = this;
 
-      var source = _.sortBy(this.state.jobList, this.state.sortColumn);
-
-      if (this.state.sortDesc) source.reverse();
-      source = _.filter(source, function (ev) {
-        if (!ev) return false;
-        if (ev.Deleted) return false;
-        return true;
-      });
-      return source.map(function (ev, index) {
+      var source = this.state.types;
+      return source.map(function (ev) {
         if (ev != null) {
-          return /*#__PURE__*/React.createElement("tr", {
-            key: index
-          }, /*#__PURE__*/React.createElement("td", {
-            className: "table-TitleColumn"
-          }, /*#__PURE__*/React.createElement("a", {
-            onClick: function onClick() {
-              return _this2.onShowJobType(ev);
-            }
-          }, ev.typeName)), /*#__PURE__*/React.createElement("td", null, ev.description), /*#__PURE__*/React.createElement("td", null, ev.email), /*#__PURE__*/React.createElement("td", {
-            className: "table-options"
-          }, /*#__PURE__*/React.createElement("div", {
-            style: {
-              display: 'flex',
-              alignItems: 'center'
-            }
-          }, Session.validateAccess(_this2.props.auth.site, 'maintenanceTypes', _this2.props.auth) && /*#__PURE__*/React.createElement("a", {
-            onClick: function onClick() {
-              return _this2.onShowJobType(ev);
-            }
-          }, /*#__PURE__*/React.createElement(FontAwesome, {
-            style: {
-              fontSize: 20,
-              padding: 5,
-              marginLeft: 12,
-              cursor: 'pointer'
-            },
-            name: "pencil"
-          })), Session.validateAccess(_this2.props.auth.site, 'maintenanceTypes', _this2.props.auth) && /*#__PURE__*/React.createElement("a", {
-            onClick: function onClick() {
-              return _this2.onRemoveJobType(ev);
-            }
-          }, /*#__PURE__*/React.createElement(FontAwesome, {
-            style: {
-              fontSize: 20,
-              padding: 5,
-              marginLeft: 8,
-              cursor: 'pointer'
-            },
-            name: "minus-circle"
-          })))));
+          return /*#__PURE__*/React.createElement(MenuItem, {
+            key: ev.typeName,
+            eventKey: ev.typeName,
+            active: _this2.state.type === ev.typeName
+          }, ev.typeName);
         }
 
         return null;
       });
     }
   }, {
-    key: "renderView",
-    value: function renderView() {
-      var _this3 = this;
-
-      return /*#__PURE__*/React.createElement(Table, {
-        className: "plussTable",
-        striped: true,
-        bordered: true,
-        condensed: true,
-        hover: true,
-        style: {
-          minWidth: '100%'
-        }
-      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
-        style: {
-          cursor: 'pointer'
-        },
-        onClick: function onClick() {
-          return _this3.sortByCol('name');
-        }
-      }, "Request type"), /*#__PURE__*/React.createElement("th", {
-        style: {
-          cursor: 'pointer'
-        },
-        onClick: function onClick() {
-          return _this3.sortByCol('name');
-        }
-      }, "Type Description"), /*#__PURE__*/React.createElement("th", {
-        style: {
-          cursor: 'pointer'
-        },
-        onClick: function onClick() {
-          return _this3.sortByCol('email');
-        }
-      }, "Email"), /*#__PURE__*/React.createElement("th", {
-        style: {
-          width: 70
-        }
-      }))), /*#__PURE__*/React.createElement("tbody", null, this.renderList()));
-    }
-  }, {
-    key: "renderEmpty",
-    value: function renderEmpty() {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-          marginTop: 32
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "emptyState"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-32",
-        style: {
-          maxWidth: 500,
-          textAlign: 'center'
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "fontRegular fontSize-13"
-      }, "Please add the many categories of request types that exist in your village which work alongside the Maintenance area.")), /*#__PURE__*/React.createElement("div", {
-        className: "marginTop-8 fontRegular fontSize-13",
-        style: {
-          maxWidth: 500,
-          textAlign: 'center'
-        }
-      }, "Examples might be; OH&S, Electrical, General. Remember to add a description too."));
+    key: "renderSuccess",
+    value: function renderSuccess() {
+      if (!this.state.success) return null;
+      return /*#__PURE__*/React.createElement(Components.SuccessPopup, {
+        text: "Maintenance request has been ".concat(this.state.id != null ? 'edited' : 'added'),
+        buttons: [{
+          type: 'outlined',
+          onClick: function onClick() {
+            window.history.back();
+          },
+          text: "Back to Maintenance"
+        }]
+      });
     }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      if (_.isEmpty(this.state.jobList)) return this.renderEmpty();
-      return this.renderView();
+  }, {
+    key: "validateForm",
+    value: function validateForm() {
+      if (_.isEmpty(this.state.userName)) return false;
+      if (_.isEmpty(this.state.room)) return false;
+      if (_.isEmpty(this.state.title)) return false;
+      if (this.state.isHome && _.isEmpty(this.state.homeText)) return false;
+      return true;
     }
   }, {
-    key: "renderJobTypes",
-    value: function renderJobTypes() {
-      var _this4 = this;
-
-      var _this$state3 = this.state,
-          jobList = _this$state3.jobList,
-          loading = _this$state3.loading;
+    key: "renderSubmit",
+    value: function renderSubmit() {
+      var _this3 = this;
 
-      if (jobList.length === 0 && loading) {
-        return /*#__PURE__*/React.createElement("div", {
-          style: {
-            minWidth: '100%'
-          }
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "padding-60 paddingVertical-40",
-          style: {
-            textAlign: 'center'
-          }
-        }, /*#__PURE__*/React.createElement(FontAwesome, {
-          style: {
-            fontSize: 30,
-            color: FeatureConfig.env.colourBrandingOff
-          },
-          name: "spinner fa-pulse fa-fw"
-        })));
+      if (this.state.updating) {
+        return /*#__PURE__*/React.createElement(Components.Button, {
+          buttonType: "secondary"
+        }, "Saving...");
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          minWidth: '100%'
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "flex flex-row flex-center flex-between marginBottom-32"
-      }, /*#__PURE__*/React.createElement(Components.PageTitle, null, "Request Types"), /*#__PURE__*/React.createElement(Components.AddButton, {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components.Button, {
+        inline: true,
+        buttonType: "tertiary",
         onClick: function onClick() {
-          return _this4.onShowJobType();
+          return _this3.props.history.push('/requestsHub');
         },
-        text: "NEW REQUEST TYPE"
-      })), this.renderContent());
+        isActive: true,
+        style: {
+          marginRight: 16
+        }
+      }, "Cancel"), /*#__PURE__*/React.createElement(Components.Button, {
+        inline: true,
+        buttonType: "primary",
+        onClick: this.onSave,
+        isActive: this.validateForm()
+      }, "Save"));
     }
   }, {
-    key: "renderNewUserTypePopup",
-    value: function renderNewUserTypePopup() {
-      var _this5 = this;
+    key: "renderMain",
+    value: function renderMain() {
+      var _this4 = this;
 
-      var _this$state4 = this.state,
-          submitting = _this$state4.submitting,
-          showJobType = _this$state4.showJobType,
-          jobTypeId = _this$state4.jobTypeId,
-          showWarnings = _this$state4.showWarnings,
-          jobTypeName = _this$state4.jobTypeName,
-          jobTypeEmail = _this$state4.jobTypeEmail,
-          jobTypeDescription = _this$state4.jobTypeDescription;
-      if (!showJobType) return null;
-      return /*#__PURE__*/React.createElement(Components.Popup, {
-        maxWidth: 800,
-        hasPadding: true,
-        buttons: [{
-          type: 'primaryAction',
-          onClick: this.onSave,
-          isActive: !submitting && this.isJobTypeValid(),
-          text: submitting ? 'Saving...' : 'Save',
-          className: 'popupButton'
-        }, {
-          type: 'outlinedAction',
-          onClick: this.onHideJobType,
-          isActive: !submitting,
-          text: 'Cancel',
-          className: 'popupButton'
-        }],
-        onClose: this.onHideJobType,
-        title: jobTypeId ? 'Edit Request Type' : 'Create New Request Type'
-      }, /*#__PURE__*/React.createElement(Components.GenericInput, {
-        id: "jobTypeName",
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 15
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "padding-60 paddingVertical-40 bottomDivideBorder"
+      }, /*#__PURE__*/React.createElement(Components.Text, {
+        type: "formTitleLarge",
+        className: "marginBottom-24"
+      }, this.state.infoId == null ? 'New' : 'Edit', " Request"), /*#__PURE__*/React.createElement(Components.GenericInput, {
+        id: "userName",
         type: "text",
-        label: "Request type title",
-        placeholder: "Request type title",
-        value: jobTypeName,
-        onChange: this.onHandleChange,
+        label: "Name",
+        placeholder: "Insert name here",
+        value: this.state.userName,
+        onChange: function onChange(e) {
+          return _this4.onHandleChange(e);
+        },
         isRequired: true,
+        alwaysShowLabel: true,
         isValid: function isValid() {
-          return !_.isEmpty(jobTypeName);
+          return !_.isEmpty(_this4.state.userName);
         },
         showError: function showError() {
-          return showWarnings && _.isEmpty(jobTypeName);
+          return _this4.state.showWarnings && _.isEmpty(_this4.state.userName);
+        }
+      }), /*#__PURE__*/React.createElement(Components.GenericInput, {
+        id: "room",
+        type: "text",
+        label: "Location",
+        placeholder: "Insert address here",
+        value: this.state.room,
+        onChange: function onChange(e) {
+          return _this4.onHandleChange(e);
         },
-        alwaysShowLabel: true
+        isRequired: true,
+        alwaysShowLabel: true,
+        isValid: function isValid() {
+          return !_.isEmpty(_this4.state.room);
+        },
+        showError: function showError() {
+          return _this4.state.showWarnings && _.isEmpty(_this4.state.room);
+        }
       }), /*#__PURE__*/React.createElement(Components.GenericInput, {
-        id: "jobTypeEmail",
+        id: "phone",
         type: "text",
-        label: "Email",
-        placeholder: "Request email",
-        help: "This is the email address that'll receive service requests of this type",
-        value: jobTypeEmail,
-        onChange: this.onHandleChange,
+        label: "Contact number",
+        placeholder: "04XX XXX XXX",
+        value: this.state.phone // showError={this.state.showWarnings && !this.validateImage()}
+        ,
+        onChange: function onChange(e) {
+          return _this4.onHandleChange(e);
+        },
+        alwaysShowLabel: true
+      }), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 15
+        }
+      }, /*#__PURE__*/React.createElement(Components.Text, {
+        type: "formLabel"
+      }, "Job Type"), /*#__PURE__*/React.createElement(DropdownButton, {
+        style: {
+          minWidth: 80
+        },
+        bsStyle: "default",
+        title: this.state.type,
+        id: "typeSelect",
+        onSelect: this.onSelectType
+      }, this.renderTypeOptions())), /*#__PURE__*/React.createElement(Components.GenericInput, {
+        id: "title",
+        label: "Title for the work required",
+        type: "textarea",
+        placeholder: "Title for the work required",
+        value: this.state.title,
+        onChange: function onChange(e) {
+          return _this4.onHandleChange(e);
+        },
+        inputStyle: {
+          height: 80
+        },
         isRequired: true,
-        isValid: this.validateEmail,
+        isValid: function isValid() {
+          return !_.isEmpty(_this4.state.title);
+        },
         showError: function showError() {
-          return showWarnings && !_this5.validateEmail();
+          return _this4.state.showWarnings && _.isEmpty(_this4.state.title);
         },
         alwaysShowLabel: true
       }), /*#__PURE__*/React.createElement(Components.GenericInput, {
-        id: "jobTypeDescription",
-        type: "text",
-        label: "Description",
-        placeholder: "Add a description. ",
-        help: "This description will be visible to the people to help them select the correct request type.",
-        value: jobTypeDescription,
-        onChange: this.onHandleChange,
+        id: "description",
+        label: "Description of work required",
+        type: "textarea",
+        placeholder: "Description of work required",
+        value: this.state.description,
+        onChange: function onChange(e) {
+          return _this4.onHandleChange(e);
+        },
+        inputStyle: {
+          height: 80
+        },
+        alwaysShowLabel: true
+      }), /*#__PURE__*/React.createElement(Components.RadioButton, {
+        label: "Person must be home during work?",
+        isActive: this.state.isHome,
+        options: [{
+          Label: 'No',
+          Value: false,
+          onChange: function onChange() {
+            return _this4.setState({
+              isHome: false
+            });
+          }
+        }, {
+          Label: 'Yes',
+          Value: true,
+          onChange: function onChange() {
+            return _this4.setState({
+              isHome: true
+            });
+          }
+        }]
+      }), this.state.isHome && /*#__PURE__*/React.createElement(Components.GenericInput, {
+        style: {
+          marginTop: 16
+        },
+        label: "Description of person's available times",
+        id: "homeText",
+        type: "textarea",
+        placeholder: "Description of person's available times",
+        value: this.state.homeText,
+        onChange: function onChange(e) {
+          return _this4.onHandleChange(e);
+        },
+        inputStyle: {
+          height: 80
+        },
         isRequired: true,
         isValid: function isValid() {
-          return !_.isEmpty(jobTypeDescription);
+          return !_.isEmpty(_this4.state.homeText);
         },
         showError: function showError() {
-          return showWarnings && _.isEmpty(jobTypeDescription);
+          return _this4.state.showWarnings && _.isEmpty(_this4.state.homeText);
         },
         alwaysShowLabel: true
-      }));
+      })));
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "hub-wrapperContainer"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "hub-headerContentWrapper"
-      }, /*#__PURE__*/React.createElement(Components.Header, null), /*#__PURE__*/React.createElement("div", {
-        className: "hub-contentWrapper",
-        style: {
-          position: 'relative'
-        }
-      }, this.renderJobTypes()), this.renderNewUserTypePopup()));
+      var success = this.state.success;
+      return /*#__PURE__*/React.createElement(Components.OverlayPage, null, /*#__PURE__*/React.createElement(Components.OverlayPageContents, {
+        noBottomButtons: success
+      }, /*#__PURE__*/React.createElement(Components.OverlayPageSection, {
+        className: "pageSectionWrapper--newPopup"
+      }, /*#__PURE__*/React.createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React.createElement(Components.OverlayPageBottomButtons, null, this.renderSubmit()));
     }
   }]);
 
-  return JobTypes;
+  return AddJob;
 }(Component);
 
 var mapStateToProps = function mapStateToProps(state) {
-  var jobtypes = state.maintenance.jobtypes;
   var auth = state.auth;
   return {
-    jobtypes: jobtypes,
     auth: auth
   };
 };
 
-var JobTypes$1 = connect(mapStateToProps, {
-  jobTypesLoaded: jobTypesLoaded,
-  jobTypesUpdate: jobTypesUpdate
-})(withRouter(JobTypes));
+var AddJob$1 = connect(mapStateToProps, {
+  jobsUpdate: jobsUpdate,
+  jobsLoaded: jobsLoaded,
+  addRecentlyCreated: Actions.addRecentlyCreated
+})(withRouter(AddJob));
 
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -3428,8 +3404,7 @@ var Reducers = {
 var Screens = {
   RequestsHub: RequestsHub$1,
   Job: Job$1,
-  AddJob: AddJob$1,
-  JobTypes: JobTypes$1
+  AddJob: AddJob$1
 };
 
 export { ActivityText, FeatureConfig as Config, PreviewFull, PreviewGrid, PreviewWidget, Reducers, Screens, ViewFull, ViewWidget };