@plusscommunities/pluss-maintenance-app-forms 6.0.10 → 6.0.11-auth.0

package/dist/module/screens/RequestDetail.js

@@ -1,20 +1,22 @@
 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 _ from 'lodash';
-import moment from 'moment';
-import { connect } from 'react-redux';
-import { maintenanceActions } from '../apis';
-import { jobAdded } from '../actions';
-import StatusSelectorPopup from '../components/StatusSelectorPopup';
-import { jobStatusOptions, getJobStatusProps } from '../helper';
-import { Services } from '../feature.config';
-import { Colours, Helper, Components, Config } from '../core.config';
-import { values } from '../values.config';
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import { ScrollView, View, StyleSheet, KeyboardAvoidingView, TouchableOpacity, ImageBackground, Platform } from "react-native";
+import DateTimePicker from "react-native-modal-datetime-picker";
+import { Icon } from "@rneui/themed";
+import _ from "lodash";
+import moment from "moment";
+import { connect } from "react-redux";
+import { maintenanceActions } from "../apis";
+import { jobAdded, jobStatusesUpdate, jobHideSeenUpdate } from "../actions";
+import StatusSelectorPopup from "../components/StatusSelectorPopup";
+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);
@@ -24,17 +26,20 @@ class RequestDetail extends Component {
       }, 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);
+          // Refresh external sync data when job is refreshed
+          this.getExternalSync();
         } catch (error) {
-          console.log('getJob error', error.toString());
+          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);
+          console.log("getJob error", error);
         } finally {
           this.setState({
             loading: false
@@ -50,7 +55,32 @@ class RequestDetail extends Component {
           assignees: res.data.Users
         });
       } catch (error) {
-        console.log('getAssignees error', error);
+        console.log("getAssignees error", error);
+      }
+    });
+    _defineProperty(this, "getExternalSync", async () => {
+      var _this$props$job;
+      // Only fetch if user has maintenance tracking permission
+      if (!this.hasPermission()) return;
+      if (!((_this$props$job = this.props.job) !== null && _this$props$job !== void 0 && _this$props$job.id)) return;
+      try {
+        this.setState({
+          loadingExternalSync: true
+        });
+        const res = await maintenanceActions.getExternalSync(this.props.job.id);
+        this.setState({
+          externalSync: res.data,
+          loadingExternalSync: false
+        });
+      } catch (error) {
+        var _error$response;
+        // 404 is expected if no sync - don't show error
+        if (((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) !== 404) {
+          console.log("getExternalSync error", error);
+        }
+        this.setState({
+          loadingExternalSync: false
+        });
       }
     });
     _defineProperty(this, "markSeen", () => {
@@ -72,7 +102,7 @@ class RequestDetail extends Component {
           const updated = {
             id: job.id,
             seen: true,
-            status: job.status || 'Unassigned'
+            status: job.status || "Unassigned"
           };
           const res = await maintenanceActions.editJob(updated, user.site);
           // console.log('markSeen updated');
@@ -83,7 +113,7 @@ class RequestDetail extends Component {
             seen: true
           });
         } catch (error) {
-          console.log('markSeen error', error);
+          console.log("markSeen error", error);
           this.setState({
             loading: false
           });
@@ -111,7 +141,7 @@ class RequestDetail extends Component {
           this.props.jobAdded(res.data.job);
           this.getJob();
         } catch (error) {
-          console.log('updateJob error', error);
+          console.log("updateJob error", error);
         } finally {
           this.setState({
             loading: false
@@ -128,7 +158,24 @@ class RequestDetail extends Component {
           this.props.jobAdded(res.data.job);
           this.getJob();
         } catch (error) {
-          console.log('updateJobStatus error', error);
+          console.log("updateJobStatus error", error);
+        } finally {
+          this.setState({
+            loading: false
+          });
+        }
+      });
+    });
+    _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
@@ -150,6 +197,7 @@ class RequestDetail extends Component {
       });
     });
     _defineProperty(this, "onSelectStatus", status => {
+      if (this.state.loading) return;
       this.setState({
         status,
         showStatusPopup: false
@@ -157,6 +205,25 @@ 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,
@@ -165,7 +232,7 @@ class RequestDetail extends Component {
     });
     _defineProperty(this, "onOpenDatePicker", () => {
       this.setState({
-        popUpType: 'date',
+        popUpType: "date",
         isDateTimePickerVisible: true
       });
     });
@@ -175,11 +242,11 @@ class RequestDetail extends Component {
       });
     });
     _defineProperty(this, "onDateSelected", date => {
-      if (this.state.popUpType === 'date') {
+      if (this.state.popUpType === "date") {
         date = moment(date);
         this.setState({
           expectedDate: date,
-          expectedDateText: date.format('DD/MM/YYYY'),
+          expectedDateText: date.format("DD/MM/YYYY"),
           isDateTimePickerVisible: false
         }, () => {
           this.updateJob();
@@ -213,7 +280,7 @@ class RequestDetail extends Component {
           this.props.jobAdded(job.data);
           this.getJob();
         } catch (error) {
-          console.log('onCommentAdded error', error);
+          console.log("onCommentAdded error", error);
         } finally {
           this.setState({
             loading: false
@@ -237,7 +304,7 @@ class RequestDetail extends Component {
       return false;
     });
     _defineProperty(this, "toggleFullscreenVideo", url => {
-      if (typeof url !== 'string') url = '';
+      if (typeof url !== "string") url = "";
       this.setState({
         showFullscreenVideo: url.length > 0,
         currentVideoUrl: url
@@ -250,10 +317,10 @@ class RequestDetail extends Component {
           name: a.displayName
         };
       });
-      Services.navigation.navigate('optionSelector', {
+      Services.navigation.navigate("optionSelector", {
         options,
         selection: this.state.job.AssigneeId,
-        title: 'Assign request',
+        title: "Assign request",
         onSelect: this.onSelectAssignee
       });
     });
@@ -262,12 +329,12 @@ class RequestDetail extends Component {
         loading: true
       }, async () => {
         try {
-          console.log('onSelectAssignee', this.props.job.id, assignee.key);
+          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);
+          console.log("onSelectAssignee error", error);
         } finally {
           this.setState({
             loading: false
@@ -278,29 +345,38 @@ class RequestDetail extends Component {
     this.state = {
       job: {},
       isDateTimePickerVisible: false,
-      popUpType: '',
-      status: '',
+      popUpType: "",
+      status: "",
+      priority: "",
       expectedDate: null,
-      expectedDateText: '',
+      expectedDateText: "",
       seen: false,
       showMore: true,
       showStatusPopup: false,
+      showPriorityPopup: false,
       loading: false,
       showFullscreenVideo: false,
-      currentVideoUrl: '',
+      currentVideoUrl: "",
       galleryOpen: false,
       galleryImages: [],
       showMessages: false,
-      assignees: []
+      assignees: [],
+      selectedPDF: null,
+      externalSync: null,
+      loadingExternalSync: false
     };
     this.scrollView = /*#__PURE__*/React.createRef();
     this.commentReply = /*#__PURE__*/React.createRef();
     this.commentSection = /*#__PURE__*/React.createRef();
+    this.imagePopup = /*#__PURE__*/React.createRef();
   }
   componentDidMount() {
+    this.props.jobStatusesUpdate(this.props.job.site);
+    this.props.jobHideSeenUpdate(this.props.job.site);
     this.getJob();
     this.updateJobState(this.props.job);
     this.getAssignees();
+    this.getExternalSync();
   }
   updateJobState(defaultJob) {
     const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || defaultJob;
@@ -314,13 +390,20 @@ class RequestDetail extends Component {
     };
     if (job.expectedDate) {
       newState.expectedDate = moment(job.expectedDate);
-      newState.expectedDateText = newState.expectedDate.format('DD/MM/YYYY');
+      newState.expectedDateText = newState.expectedDate.format("DD/MM/YYYY");
     }
     if (job.seen) newState.seen = job.seen;
     this.setState(newState, () => {
       this.markSeen();
     });
   }
+  openGallery(galleryImages, index) {
+    this.setState({
+      galleryOpen: true,
+      galleryImages
+    });
+    this.imagePopup.current.scrollTo(index);
+  }
   openGallery(galleryImages, index) {
     this.setState({
       galleryOpen: true,
@@ -343,12 +426,11 @@ 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()
@@ -372,7 +454,7 @@ class RequestDetail extends Component {
         color: this.props.colourBrandingMain
       }],
       numberOfLines: 2
-    }, job.type)), showSeen && this.state.seen && /*#__PURE__*/React.createElement(View, {
+    }, job.type)), !this.props.hideSeen && showSeen && this.state.seen && /*#__PURE__*/React.createElement(View, {
       style: styles.jobSeenContainer
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "check",
@@ -392,7 +474,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, {
+    }, moment(job.lastActivityUnix).format("ddd D MMMM, h:mm A"))))), /*#__PURE__*/React.createElement(View, {
+      style: styles.jobInfoContainer
+    }, /*#__PURE__*/React.createElement(View, {
       style: styles.jobStatusExpectedContainer
     }, /*#__PURE__*/React.createElement(View, {
       style: styles.jobStatusOuterContainer
@@ -402,11 +486,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(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
@@ -422,7 +506,19 @@ 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(images, index, containerStyle, showMore) {
     const url = images[index || 0];
@@ -479,12 +575,49 @@ class RequestDetail extends Component {
     }
     return null;
   }
+  renderDocument(documents) {
+    const {
+      colourBrandingMain
+    } = this.props;
+    if (!_.isNil(documents) && !_.isEmpty(documents)) {
+      return documents.map((document, index) => {
+        return /*#__PURE__*/React.createElement(TouchableOpacity, {
+          key: index,
+          style: styles.documentContainer,
+          onPress: () => this.setState({
+            selectedPDF: document
+          })
+        }, /*#__PURE__*/React.createElement(View, {
+          style: {
+            ...styles.documentTypeContainer,
+            backgroundColor: colourBrandingMain
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          style: styles.documentTypeText
+        }, document.ext)), /*#__PURE__*/React.createElement(Text, {
+          style: styles.documentText
+        }, `${document.name}${document.uploading ? ` - ${document.uploadProgress}` : ""}`));
+      });
+    }
+    return null;
+  }
   renderImagePopup() {
     return /*#__PURE__*/React.createElement(Components.ImagePopup, {
       visible: this.state.galleryOpen,
       images: this.state.galleryImages,
       onClose: this.closeGallery.bind(this),
-      ref: "imagePopup"
+      ref: this.imagePopup
+    });
+  }
+  renderDocumentPopup() {
+    if (_.isEmpty(this.state.selectedPDF)) return null;
+    return /*#__PURE__*/React.createElement(Components.PDFPopup, {
+      source: this.state.selectedPDF.url,
+      onClose: () => this.setState({
+        selectedPDF: null
+      }),
+      title: this.state.selectedPDF.name,
+      pdfCount: 1
     });
   }
   renderAssignee() {
@@ -508,13 +641,56 @@ class RequestDetail extends Component {
       return /*#__PURE__*/React.createElement(Components.FormCardSectionOptionLauncher, {
         onPress: this.onOpenAssigneePicker,
         title: "Assigned To",
-        value: job.Assignee ? job.Assignee.displayName : 'Unassigned',
+        value: job.Assignee ? job.Assignee.displayName : "Unassigned",
         textStyle: styles.detailsText,
         sectionStyle: styles.detailsSection
       }, content);
     }
     return content;
   }
+  renderExternalSync() {
+    const {
+      externalSync,
+      loadingExternalSync
+    } = this.state;
+
+    // Only show if user has permission and external sync data exists
+    if (!this.hasPermission()) return null;
+    if (!externalSync || loadingExternalSync) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.externalSyncContainer, Helper.getShadowStyle()]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.externalSyncHeader
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.externalSyncTitle
+    }, "External Sync"), /*#__PURE__*/React.createElement(Icon, {
+      name: "sync",
+      type: "material",
+      iconStyle: [styles.externalSyncIcon, {
+        color: this.props.colourBrandingMain
+      }]
+    })), /*#__PURE__*/React.createElement(View, {
+      style: styles.externalSyncContent
+    }, externalSync.systemType && /*#__PURE__*/React.createElement(View, {
+      style: styles.externalSyncRow
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.externalSyncLabel
+    }, "System:"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.externalSyncValue
+    }, externalSync.systemType)), externalSync.externalId && /*#__PURE__*/React.createElement(View, {
+      style: styles.externalSyncRow
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.externalSyncLabel
+    }, "External ID:"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.externalSyncValue
+    }, externalSync.externalId)), externalSync.syncedAt && /*#__PURE__*/React.createElement(View, {
+      style: styles.externalSyncRow
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.externalSyncLabel
+    }, "Synced:"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.externalSyncValue
+    }, moment(externalSync.syncedAt).format("D MMM YYYY h:mma")))));
+  }
   renderCustomFields() {
     const {
       job
@@ -524,28 +700,30 @@ class RequestDetail extends Component {
     } = job;
     const renderAnswer = field => {
       switch (field.type) {
-        case 'date':
+        case "date":
           return /*#__PURE__*/React.createElement(Text, {
             style: styles.customText
-          }, field.answer ? moment(field.answer, 'YYYY-MM-DD').format('DD MMM YYYY') : '');
-        case 'time':
+          }, 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':
+          }, 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':
+          }, 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':
+          }, field.answer && Array.isArray(field.answer) ? field.answer.join(", ") : "");
+        case "image":
           return /*#__PURE__*/React.createElement(View, {
-            style: {
-              marginTop: 8
-            }
+            style: styles.customImage
           }, this.renderImage(field.answer));
+        case "document":
+          return /*#__PURE__*/React.createElement(View, {
+            style: styles.customDocument
+          }, this.renderDocument(field.answer));
         default:
           return /*#__PURE__*/React.createElement(Text, {
             style: styles.customText
@@ -553,8 +731,8 @@ class RequestDetail extends Component {
       }
     };
     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;
+      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, {
@@ -573,11 +751,10 @@ class RequestDetail extends Component {
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Components.FormCardSectionOptionLauncher, {
       onPress: this.onToggleDetails,
       title: "Details",
-      icon: this.state.showMore ? 'angle-up' : 'angle-down',
+      icon: this.state.showMore ? "angle-up" : "angle-down",
       textStyle: styles.detailsText,
       sectionStyle: styles.detailsSection
     }), 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)) : null, /*#__PURE__*/React.createElement(Text, {
       style: styles.locationLabel
@@ -602,7 +779,7 @@ class RequestDetail extends Component {
       style: styles.nameText
     }, job.userName), !_.isEmpty(job.phone) && /*#__PURE__*/React.createElement(Text, {
       style: styles.phoneText
-    }, job.phone)))));
+    }, job.phone))), this.renderExternalSync()));
   }
   renderMessages() {
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Components.CommentSection, {
@@ -610,13 +787,13 @@ 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,
       live: true,
       refreshFrequency: 10000,
-      placeHolder: '',
+      placeHolder: "",
       style: {
         flex: 1,
         paddingHorizontal: 0,
@@ -636,7 +813,7 @@ class RequestDetail extends Component {
         height: 36
       },
       textStyle: {
-        color: '#fff'
+        color: "#fff"
       },
       fullWidth: true
     }, "Leave Message"));
@@ -647,7 +824,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
@@ -662,12 +839,19 @@ 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',
+      behavior: "padding",
       style: styles.container
     }, /*#__PURE__*/React.createElement(Components.Header, {
       leftIcon: "angle-left",
@@ -679,23 +863,24 @@ class RequestDetail extends Component {
         paddingBottom: 26
       },
       style: {
-        height: '100%'
+        height: "100%"
       }
     }, /*#__PURE__*/React.createElement(View, {
       style: styles.innerContainer
-    }, this.renderTop(), this.renderAssignee(), 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(), this.renderDocumentPopup(), /*#__PURE__*/React.createElement(DateTimePicker, {
       isVisible: this.state.isDateTimePickerVisible,
       onConfirm: this.onDateSelected,
       onCancel: this.onCloseDatePicker,
       mode: this.state.popUpType,
-      headerTextIOS: `Pick a ${this.state.popUpType}`
+      headerTextIOS: `Pick a ${this.state.popUpType}`,
+      date: new Date()
     }));
   }
 }
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff'
+    backgroundColor: "#fff"
   },
   innerContainer: {
     paddingTop: 23,
@@ -706,108 +891,113 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12
   },
   jobIdText: {
-    fontFamily: 'sf-medium',
+    fontFamily: "sf-medium",
     fontSize: 12,
     marginBottom: 4
   },
   jobTitleText: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 20,
     color: Colours.TEXT_DARKEST,
     marginBottom: 8
   },
   jobTypeSeenContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: "row",
+    alignItems: "center"
   },
   jobTypeContainer: {
     padding: 4,
     minWidth: 80,
     maxWidth: 140,
     borderRadius: 4,
-    justifyContent: 'center'
+    justifyContent: "center"
   },
   jobTypeText: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 12,
-    textAlign: 'center',
-    maxWidth: '100%'
+    textAlign: "center",
+    maxWidth: "100%"
   },
   jobSeenContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     marginLeft: 10
   },
   jobSeenIcon: {
     fontSize: 12
   },
   jobSeenText: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 12,
     marginLeft: 4
   },
   jobStatusDateText: {
     marginTop: 8,
-    fontFamily: 'sf-medium',
+    fontFamily: "sf-medium",
     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,
   },
   jobStatusHeading: {
-    fontFamily: 'sf-bold',
+    fontFamily: "sf-bold",
     fontSize: 11,
     letterSpacing: 0.8,
     color: Colours.TEXT_DARK,
     marginBottom: 6
   },
   jobStatusContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     width: 120,
     height: 30,
     paddingHorizontal: 8,
     borderRadius: 4
   },
   jobStatusIcon: {
-    color: '#fff',
+    color: "#fff",
     fontSize: 14,
     marginRight: 8
   },
   jobStatusText: {
-    color: '#fff',
-    textAlign: 'center',
-    fontFamily: 'sf-semibold',
+    color: "#fff",
+    textAlign: "center",
+    fontFamily: "sf-semibold",
     fontSize: 13,
     flex: 1,
-    textAlign: 'center'
+    textAlign: "center"
+  },
+  jobPriorityOuterContainer: {
+    marginTop: 12
   },
   jobExpectedDateContainer: {
     backgroundColor: Colours.BOXGREY,
-    flexDirection: 'row',
+    flexDirection: "row",
     width: 115,
     height: 30,
     borderRadius: 4,
-    alignItems: 'center',
+    alignItems: "center",
     paddingLeft: 8
   },
   jobExpectedDate: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     fontSize: 13,
     color: Colours.hexToRGBAstring(Colours.TEXT_DARKEST, 0.5)
   },
   detailsText: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 16,
     color: Colours.TEXT_DARKEST
   },
@@ -818,55 +1008,55 @@ const styles = StyleSheet.create({
   },
   sideBySideImages: {
     flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    flexDirection: "row",
+    justifyContent: "space-between",
     marginBottom: 16
   },
   sideBySideImageContainer: {
-    backgroundColor: '#fff',
-    width: '48%',
+    backgroundColor: "#fff",
+    width: "48%",
     height: 150,
     borderRadius: 2,
-    overflow: 'hidden'
+    overflow: "hidden"
   },
   singleImageContainer: {
-    backgroundColor: '#fff',
-    width: '100%',
+    backgroundColor: "#fff",
+    width: "100%",
     height: 150,
     flex: 1,
     borderRadius: 2,
-    overflow: 'hidden',
+    overflow: "hidden",
     marginBottom: 16
   },
   imageContainer: {
     height: 150,
-    width: 'auto',
-    justifyContent: 'center'
+    width: "auto",
+    justifyContent: "center"
   },
   imagePlayContainer: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    alignItems: 'center',
-    justifyContent: 'center'
+    alignItems: "center",
+    justifyContent: "center"
   },
   imageControlIcon: {
-    color: '#fff',
+    color: "#fff",
     fontSize: 30,
-    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowColor: "rgba(0,0,0,0.3)",
     textShadowOffset: {
       width: 2,
       height: 2
     }
   },
   plusImages: {
-    fontFamily: 'sf-bold',
+    fontFamily: "sf-bold",
     fontSize: 32,
-    textAlign: 'center',
-    color: '#fff',
-    textShadowColor: 'rgba(0, 0, 0, 0.5)',
+    textAlign: "center",
+    color: "#fff",
+    textShadowColor: "rgba(0, 0, 0, 0.5)",
     textShadowOffset: {
       width: 0,
       height: 2
@@ -874,64 +1064,64 @@ const styles = StyleSheet.create({
     textShadowRadius: 8
   },
   jobDescriptionText: {
-    fontFamily: 'sf-medium',
+    fontFamily: "sf-medium",
     fontSize: 14,
     color: Colours.TEXT_LIGHT,
     paddingBottom: 16
   },
   locationLabel: {
-    fontFamily: 'sf-bold',
+    fontFamily: "sf-bold",
     fontSize: 14,
     color: Colours.TEXT_DARKEST
   },
   locationText: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     fontSize: 16,
     color: Colours.TEXT_DARKEST,
     paddingVertical: 8
   },
   requesterLabel: {
-    fontFamily: 'sf-bold',
+    fontFamily: "sf-bold",
     fontSize: 14,
     color: Colours.TEXT_DARKEST,
     paddingVertical: 10
   },
   profileContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: "row",
+    alignItems: "center"
   },
   nameContainer: {
     marginLeft: 18
   },
   nameText: {
-    fontSize: 'sf-semibold',
+    fontSize: "sf-semibold",
     fontSize: 14,
     color: Colours.TEXT_DARKEST,
     marginBottom: 4
   },
   phoneText: {
-    fontSize: 'sf-medium',
+    fontSize: "sf-medium",
     fontSize: 14,
     color: Colours.TEXT_LIGHT
   },
   textSectionInner: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
     marginTop: 8
   },
   textSectionLabel: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 12,
     lineHeight: 24,
     color: Colours.TEXT_DARKEST
   },
   textSectionTextContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: "row",
+    alignItems: "center"
   },
   textSectionText: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     fontSize: 13,
     lineHeight: 24,
     color: Colours.TEXT_LIGHT
@@ -942,38 +1132,116 @@ const styles = StyleSheet.create({
     lineHeight: 24
   },
   customLabel: {
-    fontFamily: 'sf-bold',
+    fontFamily: "sf-bold",
     fontSize: 14,
     color: Colours.TEXT_DARKEST
   },
   customText: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     fontSize: 16,
     color: Colours.TEXT_DARKEST,
     paddingVertical: 8
   },
+  customImage: {
+    marginTop: 8
+  },
+  customDocument: {
+    marginTop: 8,
+    marginBottom: 16
+  },
   customStaticTitle: {
     fontSize: 20,
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     color: Colours.TEXT_DARKEST,
     marginBottom: 10
   },
   customStaticText: {
     fontSize: 17,
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     color: Colours.TEXT_DARKEST,
     lineHeight: 24,
     marginBottom: 10
+  },
+  documentContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 4
+  },
+  documentTypeContainer: {
+    width: 50,
+    height: 60,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 5,
+    marginRight: 8
+  },
+  documentTypeText: {
+    color: "#fff",
+    fontFamily: "sf-semibold",
+    textAlign: "center"
+  },
+  documentText: {
+    flex: 1,
+    fontFamily: "sf-semibold",
+    fontSize: 16,
+    color: "#65686D"
+  },
+  externalSyncContainer: {
+    backgroundColor: "#fff",
+    marginTop: 16,
+    borderRadius: 8,
+    padding: 16
+  },
+  externalSyncHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: Colours.LINEGREY
+  },
+  externalSyncTitle: {
+    fontFamily: "sf-semibold",
+    fontSize: 16,
+    color: Colours.TEXT_DARKEST
+  },
+  externalSyncIcon: {
+    fontSize: 20
+  },
+  externalSyncContent: {
+    paddingTop: 4
+  },
+  externalSyncRow: {
+    flexDirection: "row",
+    marginBottom: 10
+  },
+  externalSyncLabel: {
+    fontFamily: "sf-semibold",
+    fontSize: 14,
+    color: Colours.TEXT_DARK,
+    width: 100
+  },
+  externalSyncValue: {
+    fontFamily: "sf-regular",
+    fontSize: 14,
+    color: Colours.TEXT_DARKEST,
+    flex: 1
   }
 });
 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