@plusscommunities/pluss-maintenance-app 8.0.6 → 8.0.7-beta.0

package/dist/module/screens/RequestDetail.js

@@ -1,21 +1,21 @@
 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 '@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';
+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 "@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);
@@ -28,15 +28,17 @@ class RequestDetail extends Component {
           // 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
@@ -52,7 +54,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", () => {
@@ -74,7 +101,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');
@@ -85,7 +112,7 @@ class RequestDetail extends Component {
             seen: true
           });
         } catch (error) {
-          console.log('markSeen error', error);
+          console.log("markSeen error", error);
           this.setState({
             loading: false
           });
@@ -113,7 +140,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
@@ -130,7 +157,7 @@ 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
@@ -147,7 +174,7 @@ class RequestDetail extends Component {
           this.props.jobAdded(res.data.job);
           this.getJob();
         } catch (error) {
-          console.log('updateJobPriority error', error);
+          console.log("updateJobPriority error", error);
         } finally {
           this.setState({
             loading: false
@@ -204,7 +231,7 @@ class RequestDetail extends Component {
     });
     _defineProperty(this, "onOpenDatePicker", () => {
       this.setState({
-        popUpType: 'date',
+        popUpType: "date",
         isDateTimePickerVisible: true
       });
     });
@@ -214,11 +241,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();
@@ -252,7 +279,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
@@ -276,7 +303,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
@@ -289,10 +316,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
       });
     });
@@ -301,12 +328,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
@@ -317,23 +344,25 @@ class RequestDetail extends Component {
     this.state = {
       job: {},
       isDateTimePickerVisible: false,
-      popUpType: '',
-      status: '',
-      priority: '',
+      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: [],
-      selectedPDF: null
+      selectedPDF: null,
+      externalSync: null,
+      loadingExternalSync: false
     };
     this.scrollView = /*#__PURE__*/React.createRef();
     this.commentReply = /*#__PURE__*/React.createRef();
@@ -346,6 +375,7 @@ class RequestDetail extends Component {
     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;
@@ -359,7 +389,7 @@ 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, () => {
@@ -371,7 +401,7 @@ class RequestDetail extends Component {
       galleryOpen: true,
       galleryImages
     });
-    this.imagePopup.current.scrollTo(index);
+    this.refs.imagePopup.scrollTo(index);
   }
   closeGallery() {
     this.setState({
@@ -391,7 +421,7 @@ class RequestDetail extends Component {
     const statusOption = getJobStatus(status, this.props);
     const priority = getJobPriority(job.priority);
     const canEdit = this.hasPermission();
-    const isStaff = this.props.user.category === 'staff';
+    const isStaff = this.props.user.category === "staff";
     const showSeen = !status || status === getJobStatus(null, this.props).text;
     return /*#__PURE__*/React.createElement(View, {
       style: {
@@ -436,7 +466,7 @@ 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
@@ -558,7 +588,7 @@ class RequestDetail extends Component {
           style: styles.documentTypeText
         }, document.ext)), /*#__PURE__*/React.createElement(Text, {
           style: styles.documentText
-        }, `${document.name}${document.uploading ? ` - ${document.uploadProgress}` : ''}`));
+        }, `${document.name}${document.uploading ? ` - ${document.uploadProgress}` : ""}`));
       });
     }
     return null;
@@ -603,13 +633,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
@@ -619,27 +692,27 @@ 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: styles.customImage
           }, this.renderImage(field.answer));
-        case 'document':
+        case "document":
           return /*#__PURE__*/React.createElement(View, {
             style: styles.customDocument
           }, this.renderDocument(field.answer));
@@ -650,8 +723,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, {
@@ -670,7 +743,7 @@ 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, {
@@ -699,7 +772,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, {
@@ -713,7 +786,7 @@ class RequestDetail extends Component {
       site: this.state.job.site || this.state.job.location,
       live: true,
       refreshFrequency: 10000,
-      placeHolder: '',
+      placeHolder: "",
       style: {
         flex: 1,
         paddingHorizontal: 0,
@@ -733,7 +806,7 @@ class RequestDetail extends Component {
         height: 36
       },
       textStyle: {
-        color: '#fff'
+        color: "#fff"
       },
       fullWidth: true
     }, "Leave Message"));
@@ -771,7 +844,7 @@ class RequestDetail extends Component {
       return /*#__PURE__*/React.createElement(Components.Forbidden, null);
     }
     return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
-      behavior: 'padding',
+      behavior: "padding",
       style: styles.container
     }, /*#__PURE__*/React.createElement(Components.Header, {
       leftIcon: "angle-left",
@@ -783,7 +856,7 @@ class RequestDetail extends Component {
         paddingBottom: 26
       },
       style: {
-        height: '100%'
+        height: "100%"
       }
     }, /*#__PURE__*/React.createElement(View, {
       style: styles.innerContainer
@@ -800,7 +873,7 @@ class RequestDetail extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff'
+    backgroundColor: "#fff"
   },
   innerContainer: {
     paddingTop: 23,
@@ -811,49 +884,49 @@ 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
   },
@@ -864,60 +937,60 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12
   },
   jobStatusExpectedContainer: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between'
+    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
   },
@@ -928,55 +1001,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
@@ -984,64 +1057,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
@@ -1052,12 +1125,12 @@ 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
@@ -1071,41 +1144,83 @@ const styles = StyleSheet.create({
   },
   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',
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
     paddingVertical: 4
   },
   documentTypeContainer: {
     width: 50,
     height: 60,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     borderRadius: 5,
     marginRight: 8
   },
   documentTypeText: {
-    color: '#fff',
-    fontFamily: 'sf-semibold',
-    textAlign: 'center'
+    color: "#fff",
+    fontFamily: "sf-semibold",
+    textAlign: "center"
   },
   documentText: {
     flex: 1,
-    fontFamily: 'sf-semibold',
+    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: '#65686D'
+    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 => {