@plusscommunities/pluss-maintenance-app 6.1.2-beta.0 → 7.0.0-beta.1

package/dist/module/screens/RequestDetail.js

@@ -1,23 +1,60 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { Component } from 'react';
 import { ScrollView, View, StyleSheet, Text, KeyboardAvoidingView, TouchableOpacity, ImageBackground, Platform } from 'react-native';
 import DateTimePicker from 'react-native-modal-datetime-picker';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 import _ from 'lodash';
 import moment from 'moment';
 import { connect } from 'react-redux';
-import { generalActions } from '../apis';
-import { jobAdded } from '../actions';
+import { maintenanceActions } from '../apis';
+import { jobAdded, jobStatusesUpdate, jobHideSeenUpdate } from '../actions';
 import StatusSelectorPopup from '../components/StatusSelectorPopup';
-import { jobStatusOptions, getJobStatusProps } from '../helper';
+import PrioritySelectorPopup from '../components/PrioritySelectorPopup';
+import { getJobStatus, getJobPriority } from '../helper';
 import { Services } from '../feature.config';
 import { Colours, Helper, Components, Config } from '../core.config';
 import { values } from '../values.config';
 class RequestDetail extends Component {
   constructor(props) {
     super(props);
+    _defineProperty(this, "getJob", async () => {
+      this.setState({
+        loading: true
+      }, async () => {
+        try {
+          const res = await maintenanceActions.getJob(this.props.job.site, this.props.job.id);
+          // console.log('getJob', JSON.stringify(res.data, null, 2));
+          this.props.jobAdded(res.data);
+          this.updateJobState(res.data);
+        } catch (error) {
+          console.log('getJob error', error.toString());
+          // check for 403 or 404 error
+          if (error.response.status === 403 || error.response.status === 404) {
+            this.setState({
+              forbidden: true
+            });
+          }
+          console.log('getJob error', error);
+        } finally {
+          this.setState({
+            loading: false
+          });
+        }
+      });
+    });
+    _defineProperty(this, "getAssignees", async () => {
+      if (!this.hasPermission()) return;
+      try {
+        const res = await maintenanceActions.getAssignees(this.props.user.site);
+        this.setState({
+          assignees: res.data.Users
+        });
+      } catch (error) {
+        console.log('getAssignees error', error);
+      }
+    });
     _defineProperty(this, "markSeen", () => {
       const {
         user
@@ -39,9 +76,10 @@ class RequestDetail extends Component {
             seen: true,
             status: job.status || 'Unassigned'
           };
-          const res = await generalActions.editJob(updated, user.site);
+          const res = await maintenanceActions.editJob(updated, user.site);
           // console.log('markSeen updated');
           this.props.jobAdded(res.data.job);
+          this.getJob();
           this.setState({
             loading: false,
             seen: true
@@ -71,8 +109,9 @@ class RequestDetail extends Component {
           if (this.state.expectedDate) {
             updated.expectedDate = moment(this.state.expectedDate).utc().toISOString();
           }
-          const res = await generalActions.editJob(updated, user.site);
+          const res = await maintenanceActions.editJob(updated, user.site);
           this.props.jobAdded(res.data.job);
+          this.getJob();
         } catch (error) {
           console.log('updateJob error', error);
         } finally {
@@ -87,8 +126,9 @@ class RequestDetail extends Component {
         loading: true
       }, async () => {
         try {
-          const res = await generalActions.editJobStatus(this.props.job.id, this.state.status);
+          const res = await maintenanceActions.editJobStatus(this.props.job.id, this.state.status);
           this.props.jobAdded(res.data.job);
+          this.getJob();
         } catch (error) {
           console.log('updateJobStatus error', error);
         } finally {
@@ -98,6 +138,23 @@ class RequestDetail extends Component {
         }
       });
     });
+    _defineProperty(this, "updateJobPriority", () => {
+      this.setState({
+        loading: true
+      }, async () => {
+        try {
+          const res = await maintenanceActions.editJobPriority(this.props.job.id, this.state.priority);
+          this.props.jobAdded(res.data.job);
+          this.getJob();
+        } catch (error) {
+          console.log('updateJobPriority error', error);
+        } finally {
+          this.setState({
+            loading: false
+          });
+        }
+      });
+    });
     _defineProperty(this, "onPressBack", () => {
       Services.navigation.goBack();
     });
@@ -112,6 +169,7 @@ class RequestDetail extends Component {
       });
     });
     _defineProperty(this, "onSelectStatus", status => {
+      if (this.state.loading) return;
       this.setState({
         status,
         showStatusPopup: false
@@ -119,9 +177,29 @@ class RequestDetail extends Component {
         this.updateJobStatus();
       });
     });
+    _defineProperty(this, "onOpenPriorityPicker", () => {
+      this.setState({
+        showPriorityPopup: true
+      });
+    });
+    _defineProperty(this, "onClosePriorityPopup", () => {
+      this.setState({
+        showPriorityPopup: false
+      });
+    });
+    _defineProperty(this, "onSelectPriority", priority => {
+      if (this.state.loading) return;
+      this.setState({
+        priority,
+        showPriorityPopup: false
+      }, () => {
+        this.updateJobPriority();
+      });
+    });
     _defineProperty(this, "openStaffNotes", () => {
       Services.navigation.navigate(values.screenRequestNotes, {
-        job: this.state.job
+        job: this.state.job,
+        onChange: this.getJob
       });
     });
     _defineProperty(this, "onOpenDatePicker", () => {
@@ -169,9 +247,10 @@ class RequestDetail extends Component {
         loading: true
       }, async () => {
         try {
-          const job = await generalActions.getJob(this.props.user.site, this.props.job.id);
+          const job = await maintenanceActions.getJob(this.props.user.site, this.props.job.id);
           // console.log('onCommentAdded', job?.data);
           this.props.jobAdded(job.data);
+          this.getJob();
         } catch (error) {
           console.log('onCommentAdded error', error);
         } finally {
@@ -182,10 +261,19 @@ class RequestDetail extends Component {
       });
     });
     _defineProperty(this, "hasPermission", () => {
+      const {
+        job
+      } = this.state;
       const {
         permissions
       } = this.props.user;
-      return _.includes(permissions, values.permissionMaintenanceTracking);
+      if (_.includes(permissions, values.permissionMaintenanceTracking)) {
+        return true;
+      }
+      if (_.includes(permissions, values.permissionMaintenanceAssignment)) {
+        return job.AssigneeId === this.props.user.Id;
+      }
+      return false;
     });
     _defineProperty(this, "toggleFullscreenVideo", url => {
       if (typeof url !== 'string') url = '';
@@ -194,36 +282,75 @@ class RequestDetail extends Component {
         currentVideoUrl: url
       });
     });
+    _defineProperty(this, "onOpenAssigneePicker", () => {
+      const options = this.state.assignees.map(a => {
+        return {
+          key: a.id,
+          name: a.displayName
+        };
+      });
+      Services.navigation.navigate('optionSelector', {
+        options,
+        selection: this.state.job.AssigneeId,
+        title: 'Assign request',
+        onSelect: this.onSelectAssignee
+      });
+    });
+    _defineProperty(this, "onSelectAssignee", assignee => {
+      this.setState({
+        loading: true
+      }, async () => {
+        try {
+          console.log('onSelectAssignee', this.props.job.id, assignee.key);
+          const res = await maintenanceActions.assignJob(this.props.job.id, assignee.key);
+          this.props.jobAdded(res.data.job);
+          this.getJob();
+        } catch (error) {
+          console.log('onSelectAssignee error', error);
+        } finally {
+          this.setState({
+            loading: false
+          });
+        }
+      });
+    });
     this.state = {
       job: {},
       isDateTimePickerVisible: false,
       popUpType: '',
       status: '',
+      priority: '',
       expectedDate: null,
       expectedDateText: '',
       seen: false,
-      showMore: false,
+      showMore: true,
       showStatusPopup: false,
+      showPriorityPopup: false,
       loading: false,
       showFullscreenVideo: false,
       currentVideoUrl: '',
       galleryOpen: false,
-      showMessages: false
+      galleryImages: [],
+      showMessages: false,
+      assignees: []
     };
     this.scrollView = /*#__PURE__*/React.createRef();
     this.commentReply = /*#__PURE__*/React.createRef();
     this.commentSection = /*#__PURE__*/React.createRef();
   }
   componentDidMount() {
-    this.updateJobState();
+    this.props.jobStatusesUpdate(this.props.job.site);
+    this.props.jobHideSeenUpdate(this.props.job.site);
+    this.getJob();
+    this.updateJobState(this.props.job);
+    this.getAssignees();
   }
-  componentDidUpdate(prevProps) {
-    if (prevProps.jobs !== this.props.jobs) {
-      this.updateJobState();
+  updateJobState(defaultJob) {
+    const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || defaultJob;
+    if (!job) {
+      this.getJob();
+      return;
     }
-  }
-  updateJobState() {
-    const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || this.props.job;
     const newState = {
       job,
       status: job.status
@@ -237,9 +364,10 @@ class RequestDetail extends Component {
       this.markSeen();
     });
   }
-  openGallery(index) {
+  openGallery(galleryImages, index) {
     this.setState({
-      galleryOpen: true
+      galleryOpen: true,
+      galleryImages
     });
     this.refs.imagePopup.scrollTo(index);
   }
@@ -258,19 +386,22 @@ class RequestDetail extends Component {
       status,
       job
     } = this.state;
-    const {
-      statusText,
-      statusColor
-    } = getJobStatusProps(status);
+    const statusOption = getJobStatus(status, this.props);
+    const priority = getJobPriority(job.priority);
     const canEdit = this.hasPermission();
-    const showSeen = !status || status === jobStatusOptions[0].name;
+    const isStaff = this.props.user.category === 'staff';
+    const showSeen = !status || status === getJobStatus(null, this.props).text;
     return /*#__PURE__*/React.createElement(View, {
       style: {
         ...Helper.getShadowStyle()
       }
     }, /*#__PURE__*/React.createElement(View, {
       style: styles.jobTitleContainer
-    }, /*#__PURE__*/React.createElement(Text, {
+    }, job.jobId ? /*#__PURE__*/React.createElement(Text, {
+      style: [styles.jobIdText, {
+        color: this.props.colourBrandingMain
+      }]
+    }, `${values.textEntityName} #${job.jobId}`) : null, /*#__PURE__*/React.createElement(Text, {
       style: styles.jobTitleText
     }, job.title), /*#__PURE__*/React.createElement(View, {
       style: styles.jobTypeSeenContainer
@@ -281,8 +412,9 @@ class RequestDetail extends Component {
     }, /*#__PURE__*/React.createElement(Text, {
       style: [styles.jobTypeText, {
         color: this.props.colourBrandingMain
-      }]
-    }, job.type)), showSeen && this.state.seen && /*#__PURE__*/React.createElement(View, {
+      }],
+      numberOfLines: 2
+    }, job.type)), !this.props.hideSeen && showSeen && this.state.seen && /*#__PURE__*/React.createElement(View, {
       style: styles.jobSeenContainer
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "check",
@@ -302,23 +434,9 @@ class RequestDetail extends Component {
       style: styles.textSectionTextContainer
     }, /*#__PURE__*/React.createElement(Text, {
       style: styles.textSectionText
-    }, moment(job.lastActivityUnix).format('ddd D MMMM, h:mm A')))), /*#__PURE__*/React.createElement(View, {
-      style: styles.textSectionInner
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: styles.textSectionLabel
-    }, "Expected Date"), /*#__PURE__*/React.createElement(TouchableOpacity, {
-      onPress: this.onOpenDatePicker
+    }, moment(job.lastActivityUnix).format('ddd D MMMM, h:mm A'))))), /*#__PURE__*/React.createElement(View, {
+      style: styles.jobInfoContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles.textSectionTextContainer
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: styles.textSectionText
-    }, this.state.expectedDateText || 'Select Date'), /*#__PURE__*/React.createElement(Icon, {
-      name: "angle-right",
-      type: "font-awesome",
-      iconStyle: [styles.textSectionAngleRight, {
-        color: this.props.colourBrandingMain
-      }]
-    }))))), /*#__PURE__*/React.createElement(View, {
       style: styles.jobStatusExpectedContainer
     }, /*#__PURE__*/React.createElement(View, {
       style: styles.jobStatusOuterContainer
@@ -328,15 +446,11 @@ class RequestDetail extends Component {
       onPress: canEdit ? this.onOpenStatusPicker : null
     }, /*#__PURE__*/React.createElement(View, {
       style: [styles.jobStatusContainer, {
-        backgroundColor: statusColor
+        backgroundColor: statusOption.color
       }]
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "wrench",
-      type: "font-awesome",
-      iconStyle: styles.jobStatusIcon
-    }), /*#__PURE__*/React.createElement(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       style: styles.jobStatusText
-    }, statusText)))), this.hasPermission() && /*#__PURE__*/React.createElement(View, {
+    }, statusOption === null || statusOption === void 0 ? void 0 : statusOption.text)))), this.hasPermission() && /*#__PURE__*/React.createElement(View, {
       style: styles.jobStatusOuterContainer
     }, /*#__PURE__*/React.createElement(Text, {
       style: styles.jobStatusHeading
@@ -352,9 +466,22 @@ class RequestDetail extends Component {
       iconStyle: styles.jobStatusIcon
     }), /*#__PURE__*/React.createElement(Text, {
       style: styles.jobStatusText
-    }, "Notes (", (job.Notes || []).length, ")"))))));
+    }, "Notes (", (job.Notes || []).length, ")"))))), isStaff && /*#__PURE__*/React.createElement(View, {
+      style: styles.jobPriorityOuterContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.jobStatusHeading
+    }, "PRIORITY"), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: canEdit ? this.onOpenPriorityPicker : null
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.jobStatusContainer, {
+        backgroundColor: priority.color
+      }]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.jobStatusText
+    }, priority.label))))));
   }
-  renderPlayableImageUrl(url, index, containerStyle, showMore) {
+  renderPlayableImageUrl(images, index, containerStyle, showMore) {
+    const url = images[index || 0];
     const thumbUrl = Helper.getThumb300(url);
     if (Helper.isVideo(url)) {
       return /*#__PURE__*/React.createElement(ImageBackground, {
@@ -377,7 +504,7 @@ class RequestDetail extends Component {
     const imageUrl = Helper.get1400(url);
     return /*#__PURE__*/React.createElement(TouchableOpacity, {
       style: containerStyle,
-      onPress: this.openGallery.bind(this, index || 0)
+      onPress: this.openGallery.bind(this, images, index || 0)
     }, /*#__PURE__*/React.createElement(ImageBackground, {
       style: styles.imageContainer,
       source: {
@@ -387,57 +514,132 @@ class RequestDetail extends Component {
       style: styles.plusImages
     }, "+", this.state.job.images.length - 2)));
   }
-  renderPlayableImage(index, containerStyle, showMore) {
-    const url = this.state.job.images[index];
-    return this.renderPlayableImageUrl(url, index, containerStyle, showMore);
+  renderPlayableImage(images, index, containerStyle, showMore) {
+    return this.renderPlayableImageUrl(images, index, containerStyle, showMore);
   }
-  renderImage() {
-    const {
-      job
-    } = this.state;
-    if (!_.isNil(job.images) && !_.isEmpty(job.images)) {
-      if (job.images.length >= 2) {
+  renderImage(images, image = null) {
+    if (!_.isNil(images) && !_.isEmpty(images)) {
+      if (images.length >= 2) {
         return /*#__PURE__*/React.createElement(View, {
           style: styles.sideBySideImages
-        }, this.renderPlayableImage(0, styles.sideBySideImageContainer), this.renderPlayableImage(1, styles.sideBySideImageContainer, job.images.length > 2));
+        }, this.renderPlayableImage(images, 0, styles.sideBySideImageContainer), this.renderPlayableImage(images, 1, styles.sideBySideImageContainer, images.length > 2));
       } else {
         return /*#__PURE__*/React.createElement(View, {
           style: styles.singleImageContainer
-        }, this.renderPlayableImage(0));
+        }, this.renderPlayableImage(images, 0));
       }
-    } else if (!_.isNil(job.image)) {
+    } else if (!_.isNil(image)) {
       return /*#__PURE__*/React.createElement(View, {
         style: styles.singleImageContainer
-      }, this.renderPlayableImageUrl(job.image));
+      }, this.renderPlayableImageUrl([image], 0));
     }
     return null;
   }
   renderImagePopup() {
     return /*#__PURE__*/React.createElement(Components.ImagePopup, {
       visible: this.state.galleryOpen,
-      images: this.state.job.images || [this.state.job.image],
+      images: this.state.galleryImages,
       onClose: this.closeGallery.bind(this),
       ref: "imagePopup"
     });
   }
+  renderAssignee() {
+    const {
+      job
+    } = this.state;
+    if (!this.hasPermission() && !job.Assignee) return null;
+    const content = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
+      style: styles.locationLabel
+    }, "Assigned To"), /*#__PURE__*/React.createElement(View, null, job.Assignee && /*#__PURE__*/React.createElement(View, {
+      style: styles.profileContainer
+    }, /*#__PURE__*/React.createElement(Components.ProfilePic, {
+      ProfilePic: job.Assignee.profilePic,
+      Diameter: 40
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.nameContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.nameText
+    }, job.Assignee.displayName)))));
+    if (this.hasPermission()) {
+      return /*#__PURE__*/React.createElement(Components.FormCardSectionOptionLauncher, {
+        onPress: this.onOpenAssigneePicker,
+        title: "Assigned To",
+        value: job.Assignee ? job.Assignee.displayName : 'Unassigned',
+        textStyle: styles.detailsText,
+        sectionStyle: styles.detailsSection
+      }, content);
+    }
+    return content;
+  }
+  renderCustomFields() {
+    const {
+      job
+    } = this.state;
+    const {
+      customFields
+    } = job;
+    const renderAnswer = field => {
+      switch (field.type) {
+        case 'date':
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer ? moment(field.answer, 'YYYY-MM-DD').format('DD MMM YYYY') : '');
+        case 'time':
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer ? moment(field.answer, 'HH:mm').format('h:mm a') : '');
+        case 'yn':
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer ? 'Yes' : 'No');
+        case 'checkbox':
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer && Array.isArray(field.answer) ? field.answer.join(', ') : '');
+        case 'image':
+          return /*#__PURE__*/React.createElement(View, {
+            style: {
+              marginTop: 8
+            }
+          }, this.renderImage(field.answer));
+        default:
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer);
+      }
+    };
+    return customFields.map((field, index) => {
+      if (['staticTitle', 'staticText'].includes(field.type)) return null;
+      if (_.isNil(field.answer) || field.answer === '' || Array.isArray(field.answer) && field.answer.length === 0) return null;
+      return /*#__PURE__*/React.createElement(View, {
+        key: index
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.customLabel
+      }, field.label), renderAnswer(field));
+    });
+  }
   rendeDetails() {
     const {
       job
     } = this.state;
+    const {
+      customFields
+    } = job;
+    const hasCustomFields = customFields && customFields.length > 0;
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Components.FormCardSectionOptionLauncher, {
       onPress: this.onToggleDetails,
       title: "Details",
       icon: this.state.showMore ? 'angle-up' : 'angle-down',
       textStyle: styles.detailsText,
       sectionStyle: styles.detailsSection
-    }), this.state.showMore && /*#__PURE__*/React.createElement(View, null, this.renderImage(), !_.isEmpty(job.description) && /*#__PURE__*/React.createElement(Text, {
+    }), this.state.showMore && /*#__PURE__*/React.createElement(View, null, hasCustomFields ? this.renderCustomFields() : null, !hasCustomFields ? /*#__PURE__*/React.createElement(React.Fragment, null, this.renderImage(job.images, job.image), !_.isEmpty(job.description) && /*#__PURE__*/React.createElement(Text, {
       numberOfLines: 10,
       style: styles.jobDescriptionText
-    }, job.description), /*#__PURE__*/React.createElement(Text, {
+    }, job.description)) : null, /*#__PURE__*/React.createElement(Text, {
       style: styles.locationLabel
-    }, "Location"), /*#__PURE__*/React.createElement(Text, {
+    }, "Address"), /*#__PURE__*/React.createElement(Text, {
       style: styles.locationText
-    }, job.room), job.isHome ? /*#__PURE__*/React.createElement(View, {
+    }, job.room), !hasCustomFields && job.isHome ? /*#__PURE__*/React.createElement(View, {
       style: styles.detailsSection
     }, /*#__PURE__*/React.createElement(Text, {
       style: styles.locationLabel
@@ -445,7 +647,7 @@ class RequestDetail extends Component {
       style: styles.locationText
     }, job.homeText)) : null, /*#__PURE__*/React.createElement(Text, {
       style: styles.requesterLabel
-    }, "Person Requesting"), /*#__PURE__*/React.createElement(View, {
+    }, "Submitted By"), /*#__PURE__*/React.createElement(View, {
       style: styles.profileContainer
     }, /*#__PURE__*/React.createElement(Components.ProfilePic, {
       ProfilePic: job.userProfilePic,
@@ -464,7 +666,7 @@ class RequestDetail extends Component {
       commentReply: this.commentReply,
       scrollView: this.scrollView,
       adminPermission: values.permissionMaintenanceTracking,
-      entityType: values.featureKey,
+      entityType: values.commentKey,
       entityId: this.props.job.id,
       entityName: this.props.job.title,
       site: this.state.job.site || this.state.job.location,
@@ -501,7 +703,7 @@ class RequestDetail extends Component {
       ref: this.commentReply,
       commentSection: this.commentSection,
       scrollView: this.scrollView,
-      entityType: values.featureKey,
+      entityType: values.commentKey,
       entityId: this.props.job.id,
       entityName: this.props.job.title,
       site: this.state.job.site || this.state.job.location
@@ -516,7 +718,17 @@ class RequestDetail extends Component {
       onSelect: this.onSelectStatus
     });
   }
+  renderPriorityPopup() {
+    if (!this.state.showPriorityPopup) return null;
+    return /*#__PURE__*/React.createElement(PrioritySelectorPopup, {
+      onClose: this.onClosePriorityPopup,
+      onSelect: this.onSelectPriority
+    });
+  }
   render() {
+    if (this.state.forbidden) {
+      return /*#__PURE__*/React.createElement(Components.Forbidden, null);
+    }
     return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
       behavior: Platform.OS === 'ios' && 'padding',
       style: styles.container
@@ -534,7 +746,7 @@ class RequestDetail extends Component {
       }
     }, /*#__PURE__*/React.createElement(View, {
       style: styles.innerContainer
-    }, this.renderTop(), this.rendeDetails(), this.renderMessages())), this.renderMessagesReply(), this.renderStatusPopup(), this.renderImagePopup(), /*#__PURE__*/React.createElement(DateTimePicker, {
+    }, this.renderTop(), this.renderAssignee(), this.rendeDetails(), this.renderMessages())), this.renderMessagesReply(), this.renderStatusPopup(), this.renderPriorityPopup(), this.renderImagePopup(), /*#__PURE__*/React.createElement(DateTimePicker, {
       isVisible: this.state.isDateTimePickerVisible,
       onConfirm: this.onDateSelected,
       onCancel: this.onCloseDatePicker,
@@ -556,6 +768,11 @@ const styles = StyleSheet.create({
     paddingVertical: 14,
     paddingHorizontal: 12
   },
+  jobIdText: {
+    fontFamily: 'sf-medium',
+    fontSize: 12,
+    marginBottom: 4
+  },
   jobTitleText: {
     fontFamily: 'sf-semibold',
     fontSize: 20,
@@ -567,15 +784,17 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   jobTypeContainer: {
-    height: 20,
-    width: 80,
+    padding: 4,
+    minWidth: 80,
+    maxWidth: 140,
     borderRadius: 4,
     justifyContent: 'center'
   },
   jobTypeText: {
     fontFamily: 'sf-semibold',
     fontSize: 12,
-    textAlign: 'center'
+    textAlign: 'center',
+    maxWidth: '100%'
   },
   jobSeenContainer: {
     flexDirection: 'row',
@@ -596,15 +815,17 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: Colours.TEXT_LIGHT
   },
-  jobStatusExpectedContainer: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
+  jobInfoContainer: {
     borderTopWidth: 1,
     borderTopColor: Colours.LINEGREY,
     paddingVertical: 14,
     paddingHorizontal: 12
   },
+  jobStatusExpectedContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between'
+  },
   jobStatusOuterContainer: {
     // marginRight: 50,
   },
@@ -636,6 +857,9 @@ const styles = StyleSheet.create({
     flex: 1,
     textAlign: 'center'
   },
+  jobPriorityOuterContainer: {
+    marginTop: 12
+  },
   jobExpectedDateContainer: {
     backgroundColor: Colours.BOXGREY,
     flexDirection: 'row',
@@ -784,16 +1008,44 @@ const styles = StyleSheet.create({
     fontSize: 24,
     marginLeft: 10,
     lineHeight: 24
+  },
+  customLabel: {
+    fontFamily: 'sf-bold',
+    fontSize: 14,
+    color: Colours.TEXT_DARKEST
+  },
+  customText: {
+    fontFamily: 'sf-regular',
+    fontSize: 16,
+    color: Colours.TEXT_DARKEST,
+    paddingVertical: 8
+  },
+  customStaticTitle: {
+    fontSize: 20,
+    fontFamily: 'sf-semibold',
+    color: Colours.TEXT_DARKEST,
+    marginBottom: 10
+  },
+  customStaticText: {
+    fontSize: 17,
+    fontFamily: 'sf-regular',
+    color: Colours.TEXT_DARKEST,
+    lineHeight: 24,
+    marginBottom: 10
   }
 });
 const mapStateToProps = state => {
   return {
     user: state.user,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-    jobs: state[values.reducerKey].jobs
+    jobs: state[values.reducerKey].jobs,
+    statusTypes: state[values.reducerKey].jobstatuses,
+    hideSeen: state[values.reducerKey].hideSeen
   };
 };
 export default connect(mapStateToProps, {
-  jobAdded
+  jobAdded,
+  jobStatusesUpdate,
+  jobHideSeenUpdate
 })(RequestDetail);
 //# sourceMappingURL=RequestDetail.js.map