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

package/src/screens/RequestDetail.js

@@ -1,373 +1,468 @@
-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);
-
-    this.state = {
-      job: {},
-      isDateTimePickerVisible: false,
-      popUpType: '',
-      status: '',
-      priority: '',
-      expectedDate: null,
-      expectedDateText: '',
-      seen: false,
-      showMore: true,
-      showStatusPopup: false,
-      showPriorityPopup: false,
-      loading: false,
-      showFullscreenVideo: false,
-      currentVideoUrl: '',
-      galleryOpen: false,
-      galleryImages: [],
-      showMessages: false,
-      assignees: [],
-      selectedPDF: null,
-    };
-
-    this.scrollView = React.createRef();
-    this.commentReply = React.createRef();
-    this.commentSection = React.createRef();
-    this.imagePopup = 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();
-  }
-
-  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 });
-      }
-    });
-  };
-
-  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);
-    }
-  };
-
-  updateJobState(defaultJob) {
-    const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || defaultJob;
-    if (!job) {
-      this.getJob();
-      return;
-    }
-    const newState = { job, status: job.status };
-    if (job.expectedDate) {
-      newState.expectedDate = moment(job.expectedDate);
-      newState.expectedDateText = newState.expectedDate.format('DD/MM/YYYY');
-    }
-    if (job.seen) newState.seen = job.seen;
-    this.setState(newState, () => {
-      this.markSeen();
-    });
-  }
-
-  markSeen = () => {
-    const { user } = this.props;
-    const { job } = this.state;
-    // Must have maintenance permission and not the requester
-    // console.log('markSeen check', job.userID, user.Id);
-    if (job.seen === true) return;
-    if (!this.hasPermission()) return;
-    if (user.Id === job.userID) return;
-
-    this.setState({ loading: true }, async () => {
-      try {
-        const updated = { id: job.id, seen: true, status: job.status || 'Unassigned' };
-        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 });
-      } catch (error) {
-        console.log('markSeen error', error);
-        this.setState({ loading: false });
-      }
-    });
-  };
-
-  updateJob = () => {
-    this.setState({ loading: true }, async () => {
-      const { user } = this.props;
-      const { job } = this.state;
-      try {
-        const updated = { id: job.id };
-        if (this.state.expectedDate) {
-          updated.expectedDate = moment(this.state.expectedDate)
-            .utc()
-            .toISOString();
-        }
-        const res = await maintenanceActions.editJob(updated, user.site);
-        this.props.jobAdded(res.data.job);
-        this.getJob();
-      } catch (error) {
-        console.log('updateJob error', error);
-      } finally {
-        this.setState({ loading: false });
-      }
-    });
-  };
-
-  updateJobStatus = () => {
-    this.setState({ loading: true }, async () => {
-      try {
-        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 {
-        this.setState({ loading: false });
-      }
-    });
-  };
-
-  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 });
-      }
-    });
-  };
-
-  onPressBack = () => {
-    Services.navigation.goBack();
-  };
-
-  onOpenStatusPicker = () => {
-    this.setState({ showStatusPopup: true });
-  };
-
-  onCloseStatusPopup = () => {
-    this.setState({ showStatusPopup: false });
-  };
-
-  onSelectStatus = status => {
-    if (this.state.loading) return;
-    this.setState({ status, showStatusPopup: false }, () => {
-      this.updateJobStatus();
-    });
-  };
-
-  onOpenPriorityPicker = () => {
-    this.setState({ showPriorityPopup: true });
-  };
-
-  onClosePriorityPopup = () => {
-    this.setState({ showPriorityPopup: false });
-  };
-
-  onSelectPriority = priority => {
-    if (this.state.loading) return;
-    this.setState({ priority, showPriorityPopup: false }, () => {
-      this.updateJobPriority();
-    });
-  };
-
-  openStaffNotes = () => {
-    Services.navigation.navigate(values.screenRequestNotes, { job: this.state.job, onChange: this.getJob });
-  };
-
-  onOpenDatePicker = () => {
-    this.setState({ popUpType: 'date', isDateTimePickerVisible: true });
-  };
-
-  onCloseDatePicker = () => {
-    this.setState({ isDateTimePickerVisible: false });
-  };
-
-  onDateSelected = date => {
-    if (this.state.popUpType === 'date') {
-      date = moment(date);
-      this.setState(
-        {
-          expectedDate: date,
-          expectedDateText: date.format('DD/MM/YYYY'),
-          isDateTimePickerVisible: false,
-        },
-        () => {
-          this.updateJob();
-        },
-      );
-    }
-  };
-
-  onToggleDetails = () => {
-    this.setState({ showMore: !this.state.showMore });
-  };
-
-  onLeaveMessage = () => {
-    this.setState({ showMessages: true });
-  };
-
-  onCommentsLoaded = count => {
-    if (count > 0) {
-      this.setState({ showMessages: true });
-    }
-  };
-
-  onCommentAdded = () => {
-    this.setState({ loading: true }, async () => {
-      try {
-        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 {
-        this.setState({ loading: false });
-      }
-    });
-  };
-
-  hasPermission = () => {
-    const { job } = this.state;
-    const { permissions } = this.props.user;
-    if (_.includes(permissions, values.permissionMaintenanceTracking)) {
-      return true;
-    }
-    if (_.includes(permissions, values.permissionMaintenanceAssignment)) {
-      return job.AssigneeId === this.props.user.Id;
-    }
-    return false;
-  };
-
-  toggleFullscreenVideo = url => {
-    if (typeof url !== 'string') url = '';
-    this.setState({ showFullscreenVideo: url.length > 0, currentVideoUrl: url });
-  };
-
-  openGallery(galleryImages, index) {
-    this.setState({
-      galleryOpen: true,
-      galleryImages,
-    });
-    this.imagePopup.current.scrollTo(index);
-  }
-
-  closeGallery() {
-    this.setState({
-      galleryOpen: false,
-    });
-  }
-
-  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,
-    });
-  };
-
-  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 });
-      }
-    });
-  };
-
-  renderLoading() {
-    return <Components.LoadingIndicator visible={this.state.loading} />;
-  }
-
-  renderTop() {
-    const { status, job } = this.state;
-    const statusOption = getJobStatus(status, this.props);
-    const priority = getJobPriority(job.priority);
-    const canEdit = this.hasPermission();
-    const isStaff = this.props.user.category === 'staff';
-    const showSeen = !status || status === getJobStatus(null, this.props).text;
-
-    return (
-      <View style={{ ...Helper.getShadowStyle() }}>
-        <View style={styles.jobTitleContainer}>
-          {job.jobId ? (
-            <Text style={[styles.jobIdText, { color: this.props.colourBrandingMain }]}>{`${values.textEntityName} #${job.jobId}`}</Text>
-          ) : null}
-          <Text style={styles.jobTitleText}>{job.title}</Text>
-          <View style={styles.jobTypeSeenContainer}>
-            <View style={[styles.jobTypeContainer, { backgroundColor: Colours.hexToRGBAstring(this.props.colourBrandingMain, 0.2) }]}>
-              <Text style={[styles.jobTypeText, { color: this.props.colourBrandingMain }]} numberOfLines={2}>
-                {job.type}
-              </Text>
-            </View>
-            {!this.props.hideSeen && showSeen && this.state.seen && (
-              <View style={styles.jobSeenContainer}>
-                <Icon name="check" type="font-awesome" iconStyle={[styles.jobSeenIcon, { color: this.props.colourBrandingMain }]} />
-                <Text style={[styles.jobSeenText, { color: this.props.colourBrandingMain }]}>Seen</Text>
-              </View>
-            )}
-          </View>
+	constructor(props) {
+		super(props);
 
-          {job.lastActivityUnix && (
-            <View style={styles.textSectionInner}>
-              <Text style={styles.textSectionLabel}>Last Updated On</Text>
-              <View style={styles.textSectionTextContainer}>
-                <Text style={styles.textSectionText}>{moment(job.lastActivityUnix).format('ddd D MMMM, h:mm A')}</Text>
-              </View>
-            </View>
-          )}
-          {/* <View style={styles.textSectionInner}>
+		this.state = {
+			job: {},
+			isDateTimePickerVisible: false,
+			popUpType: "",
+			status: "",
+			priority: "",
+			expectedDate: null,
+			expectedDateText: "",
+			seen: false,
+			showMore: true,
+			showStatusPopup: false,
+			showPriorityPopup: false,
+			loading: false,
+			showFullscreenVideo: false,
+			currentVideoUrl: "",
+			galleryOpen: false,
+			galleryImages: [],
+			showMessages: false,
+			assignees: [],
+			selectedPDF: null,
+			externalSync: null,
+			loadingExternalSync: false,
+		};
+
+		this.scrollView = React.createRef();
+		this.commentReply = React.createRef();
+		this.commentSection = React.createRef();
+		this.imagePopup = 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();
+	}
+
+	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);
+				// Refresh external sync data when job is refreshed
+				this.getExternalSync();
+			} 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 });
+			}
+		});
+	};
+
+	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);
+		}
+	};
+
+	getExternalSync = async () => {
+		// Only fetch if user has maintenance tracking permission
+		if (!this.hasPermission()) return;
+		if (!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) {
+			// 404 is expected if no sync - don't show error
+			if (error.response?.status !== 404) {
+				console.log("getExternalSync error", error);
+			}
+			this.setState({ loadingExternalSync: false });
+		}
+	};
+
+	updateJobState(defaultJob) {
+		const job =
+			_.find(this.props.jobs, (j) => j.id === this.props.job.id) || defaultJob;
+		if (!job) {
+			this.getJob();
+			return;
+		}
+		const newState = { job, status: job.status };
+		if (job.expectedDate) {
+			newState.expectedDate = moment(job.expectedDate);
+			newState.expectedDateText = newState.expectedDate.format("DD/MM/YYYY");
+		}
+		if (job.seen) newState.seen = job.seen;
+		this.setState(newState, () => {
+			this.markSeen();
+		});
+	}
+
+	markSeen = () => {
+		const { user } = this.props;
+		const { job } = this.state;
+		// Must have maintenance permission and not the requester
+		// console.log('markSeen check', job.userID, user.Id);
+		if (job.seen === true) return;
+		if (!this.hasPermission()) return;
+		if (user.Id === job.userID) return;
+
+		this.setState({ loading: true }, async () => {
+			try {
+				const updated = {
+					id: job.id,
+					seen: true,
+					status: job.status || "Unassigned",
+				};
+				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 });
+			} catch (error) {
+				console.log("markSeen error", error);
+				this.setState({ loading: false });
+			}
+		});
+	};
+
+	updateJob = () => {
+		this.setState({ loading: true }, async () => {
+			const { user } = this.props;
+			const { job } = this.state;
+			try {
+				const updated = { id: job.id };
+				if (this.state.expectedDate) {
+					updated.expectedDate = moment(this.state.expectedDate)
+						.utc()
+						.toISOString();
+				}
+				const res = await maintenanceActions.editJob(updated, user.site);
+				this.props.jobAdded(res.data.job);
+				this.getJob();
+			} catch (error) {
+				console.log("updateJob error", error);
+			} finally {
+				this.setState({ loading: false });
+			}
+		});
+	};
+
+	updateJobStatus = () => {
+		this.setState({ loading: true }, async () => {
+			try {
+				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 {
+				this.setState({ loading: false });
+			}
+		});
+	};
+
+	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 });
+			}
+		});
+	};
+
+	onPressBack = () => {
+		Services.navigation.goBack();
+	};
+
+	onOpenStatusPicker = () => {
+		this.setState({ showStatusPopup: true });
+	};
+
+	onCloseStatusPopup = () => {
+		this.setState({ showStatusPopup: false });
+	};
+
+	onSelectStatus = (status) => {
+		if (this.state.loading) return;
+		this.setState({ status, showStatusPopup: false }, () => {
+			this.updateJobStatus();
+		});
+	};
+
+	onOpenPriorityPicker = () => {
+		this.setState({ showPriorityPopup: true });
+	};
+
+	onClosePriorityPopup = () => {
+		this.setState({ showPriorityPopup: false });
+	};
+
+	onSelectPriority = (priority) => {
+		if (this.state.loading) return;
+		this.setState({ priority, showPriorityPopup: false }, () => {
+			this.updateJobPriority();
+		});
+	};
+
+	openStaffNotes = () => {
+		Services.navigation.navigate(values.screenRequestNotes, {
+			job: this.state.job,
+			onChange: this.getJob,
+		});
+	};
+
+	onOpenDatePicker = () => {
+		this.setState({ popUpType: "date", isDateTimePickerVisible: true });
+	};
+
+	onCloseDatePicker = () => {
+		this.setState({ isDateTimePickerVisible: false });
+	};
+
+	onDateSelected = (date) => {
+		if (this.state.popUpType === "date") {
+			date = moment(date);
+			this.setState(
+				{
+					expectedDate: date,
+					expectedDateText: date.format("DD/MM/YYYY"),
+					isDateTimePickerVisible: false,
+				},
+				() => {
+					this.updateJob();
+				},
+			);
+		}
+	};
+
+	onToggleDetails = () => {
+		this.setState({ showMore: !this.state.showMore });
+	};
+
+	onLeaveMessage = () => {
+		this.setState({ showMessages: true });
+	};
+
+	onCommentsLoaded = (count) => {
+		if (count > 0) {
+			this.setState({ showMessages: true });
+		}
+	};
+
+	onCommentAdded = () => {
+		this.setState({ loading: true }, async () => {
+			try {
+				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 {
+				this.setState({ loading: false });
+			}
+		});
+	};
+
+	hasPermission = () => {
+		const { job } = this.state;
+		const { permissions } = this.props.user;
+		if (_.includes(permissions, values.permissionMaintenanceTracking)) {
+			return true;
+		}
+		if (_.includes(permissions, values.permissionMaintenanceAssignment)) {
+			return job.AssigneeId === this.props.user.Id;
+		}
+		return false;
+	};
+
+	toggleFullscreenVideo = (url) => {
+		if (typeof url !== "string") url = "";
+		this.setState({
+			showFullscreenVideo: url.length > 0,
+			currentVideoUrl: url,
+		});
+	};
+
+	openGallery(galleryImages, index) {
+		this.setState({
+			galleryOpen: true,
+			galleryImages,
+		});
+		this.refs.imagePopup.scrollTo(index);
+	}
+
+	closeGallery() {
+		this.setState({
+			galleryOpen: false,
+		});
+	}
+
+	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,
+		});
+	};
+
+	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 });
+			}
+		});
+	};
+
+	renderLoading() {
+		return <Components.LoadingIndicator visible={this.state.loading} />;
+	}
+
+	renderTop() {
+		const { status, job } = this.state;
+		const statusOption = getJobStatus(status, this.props);
+		const priority = getJobPriority(job.priority);
+		const canEdit = this.hasPermission();
+		const isStaff = this.props.user.category === "staff";
+		const showSeen = !status || status === getJobStatus(null, this.props).text;
+
+		return (
+			<View style={{ ...Helper.getShadowStyle() }}>
+				<View style={styles.jobTitleContainer}>
+					{job.jobId ? (
+						<Text
+							style={[
+								styles.jobIdText,
+								{ color: this.props.colourBrandingMain },
+							]}
+						>{`${values.textEntityName} #${job.jobId}`}</Text>
+					) : null}
+					<Text style={styles.jobTitleText}>{job.title}</Text>
+					<View style={styles.jobTypeSeenContainer}>
+						<View
+							style={[
+								styles.jobTypeContainer,
+								{
+									backgroundColor: Colours.hexToRGBAstring(
+										this.props.colourBrandingMain,
+										0.2,
+									),
+								},
+							]}
+						>
+							<Text
+								style={[
+									styles.jobTypeText,
+									{ color: this.props.colourBrandingMain },
+								]}
+								numberOfLines={2}
+							>
+								{job.type}
+							</Text>
+						</View>
+						{!this.props.hideSeen && showSeen && this.state.seen && (
+							<View style={styles.jobSeenContainer}>
+								<Icon
+									name="check"
+									type="font-awesome"
+									iconStyle={[
+										styles.jobSeenIcon,
+										{ color: this.props.colourBrandingMain },
+									]}
+								/>
+								<Text
+									style={[
+										styles.jobSeenText,
+										{ color: this.props.colourBrandingMain },
+									]}
+								>
+									Seen
+								</Text>
+							</View>
+						)}
+					</View>
+
+					{job.lastActivityUnix && (
+						<View style={styles.textSectionInner}>
+							<Text style={styles.textSectionLabel}>Last Updated On</Text>
+							<View style={styles.textSectionTextContainer}>
+								<Text style={styles.textSectionText}>
+									{moment(job.lastActivityUnix).format("ddd D MMMM, h:mm A")}
+								</Text>
+							</View>
+						</View>
+					)}
+					{/* <View style={styles.textSectionInner}>
             <Text style={styles.textSectionLabel}>Expected Date</Text>
             <TouchableOpacity onPress={this.onOpenDatePicker}>
               <View style={styles.textSectionTextContainer}>
@@ -380,666 +475,894 @@ class RequestDetail extends Component {
               </View>
             </TouchableOpacity>
           </View> */}
-        </View>
-        <View style={styles.jobInfoContainer}>
-          <View style={styles.jobStatusExpectedContainer}>
-            <View style={styles.jobStatusOuterContainer}>
-              <Text style={styles.jobStatusHeading}>STATUS</Text>
-              <TouchableOpacity onPress={canEdit ? this.onOpenStatusPicker : null}>
-                <View style={[styles.jobStatusContainer, { backgroundColor: statusOption.color }]}>
-                  <Text style={styles.jobStatusText}>{statusOption?.text}</Text>
-                </View>
-              </TouchableOpacity>
-            </View>
-            {this.hasPermission() && (
-              <View style={styles.jobStatusOuterContainer}>
-                <Text style={styles.jobStatusHeading}>STAFF NOTES</Text>
-                <TouchableOpacity onPress={this.openStaffNotes}>
-                  <View style={[styles.jobStatusContainer, { backgroundColor: this.props.colourBrandingMain }]}>
-                    <Icon name="pencil-square-o" type="font-awesome" iconStyle={styles.jobStatusIcon} />
-                    <Text style={styles.jobStatusText}>Notes ({(job.Notes || []).length})</Text>
-                  </View>
-                </TouchableOpacity>
-              </View>
-            )}
-          </View>
-          {isStaff && (
-            <View style={styles.jobPriorityOuterContainer}>
-              <Text style={styles.jobStatusHeading}>PRIORITY</Text>
-              <TouchableOpacity onPress={canEdit ? this.onOpenPriorityPicker : null}>
-                <View style={[styles.jobStatusContainer, { backgroundColor: priority.color }]}>
-                  <Text style={styles.jobStatusText}>{priority.label}</Text>
-                </View>
-              </TouchableOpacity>
-            </View>
-          )}
-        </View>
-      </View>
-    );
-  }
-
-  renderPlayableImageUrl(images, index, containerStyle, showMore) {
-    const url = images[index || 0];
-    const thumbUrl = Helper.getThumb300(url);
-
-    if (Helper.isVideo(url)) {
-      return (
-        <ImageBackground style={[{ flex: 1 }, containerStyle]} source={{ uri: thumbUrl }}>
-          <View style={styles.imagePlayContainer}>
-            <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, url)}>
-              <Icon name="play" type="font-awesome" iconStyle={styles.imageControlIcon} />
-            </TouchableOpacity>
-          </View>
-        </ImageBackground>
-      );
-    }
-
-    const imageUrl = Helper.get1400(url);
-    return (
-      <TouchableOpacity style={containerStyle} onPress={this.openGallery.bind(this, images, index || 0)}>
-        <ImageBackground style={styles.imageContainer} source={{ uri: imageUrl }}>
-          {showMore && <Text style={styles.plusImages}>+{this.state.job.images.length - 2}</Text>}
-        </ImageBackground>
-      </TouchableOpacity>
-    );
-  }
-
-  renderPlayableImage(images, index, containerStyle, showMore) {
-    return this.renderPlayableImageUrl(images, index, containerStyle, showMore);
-  }
-
-  renderImage(images, image = null) {
-    if (!_.isNil(images) && !_.isEmpty(images)) {
-      if (images.length >= 2) {
-        return (
-          <View style={styles.sideBySideImages}>
-            {this.renderPlayableImage(images, 0, styles.sideBySideImageContainer)}
-            {this.renderPlayableImage(images, 1, styles.sideBySideImageContainer, images.length > 2)}
-          </View>
-        );
-      } else {
-        return <View style={styles.singleImageContainer}>{this.renderPlayableImage(images, 0)}</View>;
-      }
-    } else if (!_.isNil(image)) {
-      return <View style={styles.singleImageContainer}>{this.renderPlayableImageUrl([image], 0)}</View>;
-    }
-    return null;
-  }
-
-  renderDocument(documents) {
-    const { colourBrandingMain } = this.props;
-
-    if (!_.isNil(documents) && !_.isEmpty(documents)) {
-      return documents.map((document, index) => {
-        return (
-          <TouchableOpacity key={index} style={styles.documentContainer} onPress={() => this.setState({ selectedPDF: document })}>
-            <View style={{ ...styles.documentTypeContainer, backgroundColor: colourBrandingMain }}>
-              <Text style={styles.documentTypeText}>{document.ext}</Text>
-            </View>
-            <Text style={styles.documentText}>{`${document.name}${document.uploading ? ` - ${document.uploadProgress}` : ''}`}</Text>
-          </TouchableOpacity>
-        );
-      });
-    }
-    return null;
-  }
-
-  renderImagePopup() {
-    return (
-      <Components.ImagePopup
-        visible={this.state.galleryOpen}
-        images={this.state.galleryImages}
-        onClose={this.closeGallery.bind(this)}
-        ref={this.imagePopup}
-      />
-    );
-  }
-
-  renderDocumentPopup() {
-    if (_.isEmpty(this.state.selectedPDF)) return null;
-    return (
-      <Components.PDFPopup
-        source={this.state.selectedPDF.url}
-        onClose={() => this.setState({ selectedPDF: null })}
-        title={this.state.selectedPDF.name}
-        pdfCount={1}
-      />
-    );
-  }
-
-  renderAssignee() {
-    const { job } = this.state;
-    if (!this.hasPermission() && !job.Assignee) return null;
-
-    const content = (
-      <View>
-        <Text style={styles.locationLabel}>Assigned To</Text>
-        <View>
-          {job.Assignee && (
-            <View style={styles.profileContainer}>
-              <Components.ProfilePic ProfilePic={job.Assignee.profilePic} Diameter={40} />
-              <View style={styles.nameContainer}>
-                <Text style={styles.nameText}>{job.Assignee.displayName}</Text>
-              </View>
-            </View>
-          )}
-        </View>
-      </View>
-    );
-
-    if (this.hasPermission()) {
-      return (
-        <Components.FormCardSectionOptionLauncher
-          onPress={this.onOpenAssigneePicker}
-          title="Assigned To"
-          value={job.Assignee ? job.Assignee.displayName : 'Unassigned'}
-          textStyle={styles.detailsText}
-          sectionStyle={styles.detailsSection}
-        >
-          {content}
-        </Components.FormCardSectionOptionLauncher>
-      );
-    }
-    return content;
-  }
-
-  renderCustomFields() {
-    const { job } = this.state;
-    const { customFields } = job;
-
-    const renderAnswer = field => {
-      switch (field.type) {
-        case 'date':
-          return <Text style={styles.customText}>{field.answer ? moment(field.answer, 'YYYY-MM-DD').format('DD MMM YYYY') : ''}</Text>;
-        case 'time':
-          return <Text style={styles.customText}>{field.answer ? moment(field.answer, 'HH:mm').format('h:mm a') : ''}</Text>;
-        case 'yn':
-          return <Text style={styles.customText}>{field.answer ? 'Yes' : 'No'}</Text>;
-        case 'checkbox':
-          return <Text style={styles.customText}>{field.answer && Array.isArray(field.answer) ? field.answer.join(', ') : ''}</Text>;
-        case 'image':
-          return <View style={styles.customImage}>{this.renderImage(field.answer)}</View>;
-        case 'document':
-          return <View style={styles.customDocument}>{this.renderDocument(field.answer)}</View>;
-        default:
-          return <Text style={styles.customText}>{field.answer}</Text>;
-      }
-    };
-
-    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 (
-        <View key={index}>
-          <Text style={styles.customLabel}>{field.label}</Text>
-          {renderAnswer(field)}
-        </View>
-      );
-    });
-  }
-
-  rendeDetails() {
-    const { job } = this.state;
-    const { customFields } = job;
-    const hasCustomFields = customFields && customFields.length > 0;
-
-    return (
-      <View>
-        <Components.FormCardSectionOptionLauncher
-          onPress={this.onToggleDetails}
-          title="Details"
-          icon={this.state.showMore ? 'angle-up' : 'angle-down'}
-          textStyle={styles.detailsText}
-          sectionStyle={styles.detailsSection}
-        />
-        {this.state.showMore && (
-          <View>
-            {hasCustomFields ? this.renderCustomFields() : null}
-            {!hasCustomFields ? (
-              <>
-                {this.renderImage(job.images, job.image)}
-                {!_.isEmpty(job.description) && (
-                  <Text numberOfLines={10} style={styles.jobDescriptionText}>
-                    {job.description}
-                  </Text>
-                )}
-              </>
-            ) : null}
-            <Text style={styles.locationLabel}>Address</Text>
-            <Text style={styles.locationText}>{job.room}</Text>
-            {!hasCustomFields && job.isHome ? (
-              <View style={styles.detailsSection}>
-                <Text style={styles.locationLabel}>Must be home</Text>
-                <Text style={styles.locationText}>{job.homeText}</Text>
-              </View>
-            ) : null}
-            <Text style={styles.requesterLabel}>Submitted By</Text>
-            <View style={styles.profileContainer}>
-              <Components.ProfilePic ProfilePic={job.userProfilePic} Diameter={40} />
-              <View style={styles.nameContainer}>
-                <Text style={styles.nameText}>{job.userName}</Text>
-                {!_.isEmpty(job.phone) && <Text style={styles.phoneText}>{job.phone}</Text>}
-              </View>
-            </View>
-          </View>
-        )}
-      </View>
-    );
-  }
-
-  renderMessages() {
-    return (
-      <View>
-        <Components.CommentSection
-          ref={this.commentSection}
-          commentReply={this.commentReply}
-          scrollView={this.scrollView}
-          adminPermission={values.permissionMaintenanceTracking}
-          entityType={values.commentKey}
-          entityId={this.props.job.id}
-          entityName={this.props.job.title}
-          site={this.state.job.site || this.state.job.location}
-          live
-          refreshFrequency={10000}
-          placeHolder={''}
-          style={{ flex: 1, paddingHorizontal: 0, paddingTop: 16 }}
-          onCommentsLoaded={this.onCommentsLoaded}
-          onCommentAdded={this.onCommentAdded}
-          hideAddComment
-          disableFlag
-        />
-        {!this.state.showMessages && (
-          <Components.InlineButton
-            onPress={this.onLeaveMessage}
-            color={this.props.colourBrandingMain}
-            touchableStyle={{ marginTop: 10 }}
-            style={{ height: 36 }}
-            textStyle={{ color: '#fff' }}
-            fullWidth
-          >
-            Leave Message
-          </Components.InlineButton>
-        )}
-      </View>
-    );
-  }
-
-  renderMessagesReply() {
-    if (!this.state.showMessages) return null;
-
-    return (
-      <Components.CommentReply
-        ref={this.commentReply}
-        commentSection={this.commentSection}
-        scrollView={this.scrollView}
-        entityType={values.commentKey}
-        entityId={this.props.job.id}
-        entityName={this.props.job.title}
-        site={this.state.job.site || this.state.job.location}
-        // noScroll={true}
-        // style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}
-      />
-    );
-  }
-
-  renderStatusPopup() {
-    if (!this.state.showStatusPopup) return null;
-    return <StatusSelectorPopup onClose={this.onCloseStatusPopup} onSelect={this.onSelectStatus} />;
-  }
-
-  renderPriorityPopup() {
-    if (!this.state.showPriorityPopup) return null;
-    return <PrioritySelectorPopup onClose={this.onClosePriorityPopup} onSelect={this.onSelectPriority} />;
-  }
-
-  render() {
-    if (this.state.forbidden) {
-      return <Components.Forbidden />;
-    }
-    return (
-      <KeyboardAvoidingView behavior={'padding'} style={styles.container}>
-        <Components.Header leftIcon="angle-left" onPressLeft={this.onPressBack} text={Config.env.strings.MAINTENANCE_REQUEST_DETAILS} />
-        {this.renderLoading()}
-        <ScrollView ref={this.scrollView} contentContainerStyle={{ paddingBottom: 26 }} style={{ height: '100%' }}>
-          <View style={styles.innerContainer}>
-            {this.renderTop()}
-            {this.renderAssignee()}
-            {this.rendeDetails()}
-            {this.renderMessages()}
-          </View>
-        </ScrollView>
-        {this.renderMessagesReply()}
-        {this.renderStatusPopup()}
-        {this.renderPriorityPopup()}
-        {this.renderImagePopup()}
-        {this.renderDocumentPopup()}
-        <DateTimePicker
-          isVisible={this.state.isDateTimePickerVisible}
-          onConfirm={this.onDateSelected}
-          onCancel={this.onCloseDatePicker}
-          mode={this.state.popUpType}
-          headerTextIOS={`Pick a ${this.state.popUpType}`}
-          date={new Date()}
-        />
-      </KeyboardAvoidingView>
-    );
-  }
+				</View>
+				<View style={styles.jobInfoContainer}>
+					<View style={styles.jobStatusExpectedContainer}>
+						<View style={styles.jobStatusOuterContainer}>
+							<Text style={styles.jobStatusHeading}>STATUS</Text>
+							<TouchableOpacity
+								onPress={canEdit ? this.onOpenStatusPicker : null}
+							>
+								<View
+									style={[
+										styles.jobStatusContainer,
+										{ backgroundColor: statusOption.color },
+									]}
+								>
+									<Text style={styles.jobStatusText}>{statusOption?.text}</Text>
+								</View>
+							</TouchableOpacity>
+						</View>
+						{this.hasPermission() && (
+							<View style={styles.jobStatusOuterContainer}>
+								<Text style={styles.jobStatusHeading}>STAFF NOTES</Text>
+								<TouchableOpacity onPress={this.openStaffNotes}>
+									<View
+										style={[
+											styles.jobStatusContainer,
+											{ backgroundColor: this.props.colourBrandingMain },
+										]}
+									>
+										<Icon
+											name="pencil-square-o"
+											type="font-awesome"
+											iconStyle={styles.jobStatusIcon}
+										/>
+										<Text style={styles.jobStatusText}>
+											Notes ({(job.Notes || []).length})
+										</Text>
+									</View>
+								</TouchableOpacity>
+							</View>
+						)}
+					</View>
+					{isStaff && (
+						<View style={styles.jobPriorityOuterContainer}>
+							<Text style={styles.jobStatusHeading}>PRIORITY</Text>
+							<TouchableOpacity
+								onPress={canEdit ? this.onOpenPriorityPicker : null}
+							>
+								<View
+									style={[
+										styles.jobStatusContainer,
+										{ backgroundColor: priority.color },
+									]}
+								>
+									<Text style={styles.jobStatusText}>{priority.label}</Text>
+								</View>
+							</TouchableOpacity>
+						</View>
+					)}
+				</View>
+			</View>
+		);
+	}
+
+	renderPlayableImageUrl(images, index, containerStyle, showMore) {
+		const url = images[index || 0];
+		const thumbUrl = Helper.getThumb300(url);
+
+		if (Helper.isVideo(url)) {
+			return (
+				<ImageBackground
+					style={[{ flex: 1 }, containerStyle]}
+					source={{ uri: thumbUrl }}
+				>
+					<View style={styles.imagePlayContainer}>
+						<TouchableOpacity
+							onPress={this.toggleFullscreenVideo.bind(this, url)}
+						>
+							<Icon
+								name="play"
+								type="font-awesome"
+								iconStyle={styles.imageControlIcon}
+							/>
+						</TouchableOpacity>
+					</View>
+				</ImageBackground>
+			);
+		}
+
+		const imageUrl = Helper.get1400(url);
+		return (
+			<TouchableOpacity
+				style={containerStyle}
+				onPress={this.openGallery.bind(this, images, index || 0)}
+			>
+				<ImageBackground
+					style={styles.imageContainer}
+					source={{ uri: imageUrl }}
+				>
+					{showMore && (
+						<Text style={styles.plusImages}>
+							+{this.state.job.images.length - 2}
+						</Text>
+					)}
+				</ImageBackground>
+			</TouchableOpacity>
+		);
+	}
+
+	renderPlayableImage(images, index, containerStyle, showMore) {
+		return this.renderPlayableImageUrl(images, index, containerStyle, showMore);
+	}
+
+	renderImage(images, image = null) {
+		if (!_.isNil(images) && !_.isEmpty(images)) {
+			if (images.length >= 2) {
+				return (
+					<View style={styles.sideBySideImages}>
+						{this.renderPlayableImage(
+							images,
+							0,
+							styles.sideBySideImageContainer,
+						)}
+						{this.renderPlayableImage(
+							images,
+							1,
+							styles.sideBySideImageContainer,
+							images.length > 2,
+						)}
+					</View>
+				);
+			} else {
+				return (
+					<View style={styles.singleImageContainer}>
+						{this.renderPlayableImage(images, 0)}
+					</View>
+				);
+			}
+		} else if (!_.isNil(image)) {
+			return (
+				<View style={styles.singleImageContainer}>
+					{this.renderPlayableImageUrl([image], 0)}
+				</View>
+			);
+		}
+		return null;
+	}
+
+	renderDocument(documents) {
+		const { colourBrandingMain } = this.props;
+
+		if (!_.isNil(documents) && !_.isEmpty(documents)) {
+			return documents.map((document, index) => {
+				return (
+					<TouchableOpacity
+						key={index}
+						style={styles.documentContainer}
+						onPress={() => this.setState({ selectedPDF: document })}
+					>
+						<View
+							style={{
+								...styles.documentTypeContainer,
+								backgroundColor: colourBrandingMain,
+							}}
+						>
+							<Text style={styles.documentTypeText}>{document.ext}</Text>
+						</View>
+						<Text
+							style={styles.documentText}
+						>{`${document.name}${document.uploading ? ` - ${document.uploadProgress}` : ""}`}</Text>
+					</TouchableOpacity>
+				);
+			});
+		}
+		return null;
+	}
+
+	renderImagePopup() {
+		return (
+			<Components.ImagePopup
+				visible={this.state.galleryOpen}
+				images={this.state.galleryImages}
+				onClose={this.closeGallery.bind(this)}
+				ref={this.imagePopup}
+			/>
+		);
+	}
+
+	renderDocumentPopup() {
+		if (_.isEmpty(this.state.selectedPDF)) return null;
+		return (
+			<Components.PDFPopup
+				source={this.state.selectedPDF.url}
+				onClose={() => this.setState({ selectedPDF: null })}
+				title={this.state.selectedPDF.name}
+				pdfCount={1}
+			/>
+		);
+	}
+
+	renderAssignee() {
+		const { job } = this.state;
+		if (!this.hasPermission() && !job.Assignee) return null;
+
+		const content = (
+			<View>
+				<Text style={styles.locationLabel}>Assigned To</Text>
+				<View>
+					{job.Assignee && (
+						<View style={styles.profileContainer}>
+							<Components.ProfilePic
+								ProfilePic={job.Assignee.profilePic}
+								Diameter={40}
+							/>
+							<View style={styles.nameContainer}>
+								<Text style={styles.nameText}>{job.Assignee.displayName}</Text>
+							</View>
+						</View>
+					)}
+				</View>
+			</View>
+		);
+
+		if (this.hasPermission()) {
+			return (
+				<Components.FormCardSectionOptionLauncher
+					onPress={this.onOpenAssigneePicker}
+					title="Assigned To"
+					value={job.Assignee ? job.Assignee.displayName : "Unassigned"}
+					textStyle={styles.detailsText}
+					sectionStyle={styles.detailsSection}
+				>
+					{content}
+				</Components.FormCardSectionOptionLauncher>
+			);
+		}
+		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 (
+			<View style={[styles.externalSyncContainer, Helper.getShadowStyle()]}>
+				<View style={styles.externalSyncHeader}>
+					<Text style={styles.externalSyncTitle}>External Sync</Text>
+					<Icon
+						name="sync"
+						type="material"
+						iconStyle={[
+							styles.externalSyncIcon,
+							{ color: this.props.colourBrandingMain },
+						]}
+					/>
+				</View>
+				<View style={styles.externalSyncContent}>
+					{externalSync.systemType && (
+						<View style={styles.externalSyncRow}>
+							<Text style={styles.externalSyncLabel}>System:</Text>
+							<Text style={styles.externalSyncValue}>
+								{externalSync.systemType}
+							</Text>
+						</View>
+					)}
+					{externalSync.externalId && (
+						<View style={styles.externalSyncRow}>
+							<Text style={styles.externalSyncLabel}>External ID:</Text>
+							<Text style={styles.externalSyncValue}>
+								{externalSync.externalId}
+							</Text>
+						</View>
+					)}
+					{externalSync.syncedAt && (
+						<View style={styles.externalSyncRow}>
+							<Text style={styles.externalSyncLabel}>Synced:</Text>
+							<Text style={styles.externalSyncValue}>
+								{moment(externalSync.syncedAt).format("D MMM YYYY h:mma")}
+							</Text>
+						</View>
+					)}
+				</View>
+			</View>
+		);
+	}
+
+	renderCustomFields() {
+		const { job } = this.state;
+		const { customFields } = job;
+
+		const renderAnswer = (field) => {
+			switch (field.type) {
+				case "date":
+					return (
+						<Text style={styles.customText}>
+							{field.answer
+								? moment(field.answer, "YYYY-MM-DD").format("DD MMM YYYY")
+								: ""}
+						</Text>
+					);
+				case "time":
+					return (
+						<Text style={styles.customText}>
+							{field.answer
+								? moment(field.answer, "HH:mm").format("h:mm a")
+								: ""}
+						</Text>
+					);
+				case "yn":
+					return (
+						<Text style={styles.customText}>{field.answer ? "Yes" : "No"}</Text>
+					);
+				case "checkbox":
+					return (
+						<Text style={styles.customText}>
+							{field.answer && Array.isArray(field.answer)
+								? field.answer.join(", ")
+								: ""}
+						</Text>
+					);
+				case "image":
+					return (
+						<View style={styles.customImage}>
+							{this.renderImage(field.answer)}
+						</View>
+					);
+				case "document":
+					return (
+						<View style={styles.customDocument}>
+							{this.renderDocument(field.answer)}
+						</View>
+					);
+				default:
+					return <Text style={styles.customText}>{field.answer}</Text>;
+			}
+		};
+
+		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 (
+				<View key={index}>
+					<Text style={styles.customLabel}>{field.label}</Text>
+					{renderAnswer(field)}
+				</View>
+			);
+		});
+	}
+
+	rendeDetails() {
+		const { job } = this.state;
+		const { customFields } = job;
+		const hasCustomFields = customFields && customFields.length > 0;
+
+		return (
+			<View>
+				<Components.FormCardSectionOptionLauncher
+					onPress={this.onToggleDetails}
+					title="Details"
+					icon={this.state.showMore ? "angle-up" : "angle-down"}
+					textStyle={styles.detailsText}
+					sectionStyle={styles.detailsSection}
+				/>
+				{this.state.showMore && (
+					<View>
+						{hasCustomFields ? this.renderCustomFields() : null}
+						{!hasCustomFields ? (
+							<>
+								{this.renderImage(job.images, job.image)}
+								{!_.isEmpty(job.description) && (
+									<Text numberOfLines={10} style={styles.jobDescriptionText}>
+										{job.description}
+									</Text>
+								)}
+							</>
+						) : null}
+						<Text style={styles.locationLabel}>Address</Text>
+						<Text style={styles.locationText}>{job.room}</Text>
+						{!hasCustomFields && job.isHome ? (
+							<View style={styles.detailsSection}>
+								<Text style={styles.locationLabel}>Must be home</Text>
+								<Text style={styles.locationText}>{job.homeText}</Text>
+							</View>
+						) : null}
+						<Text style={styles.requesterLabel}>Submitted By</Text>
+						<View style={styles.profileContainer}>
+							<Components.ProfilePic
+								ProfilePic={job.userProfilePic}
+								Diameter={40}
+							/>
+							<View style={styles.nameContainer}>
+								<Text style={styles.nameText}>{job.userName}</Text>
+								{!_.isEmpty(job.phone) && (
+									<Text style={styles.phoneText}>{job.phone}</Text>
+								)}
+							</View>
+						</View>
+						{this.renderExternalSync()}
+					</View>
+				)}
+			</View>
+		);
+	}
+
+	renderMessages() {
+		return (
+			<View>
+				<Components.CommentSection
+					ref={this.commentSection}
+					commentReply={this.commentReply}
+					scrollView={this.scrollView}
+					adminPermission={values.permissionMaintenanceTracking}
+					entityType={values.commentKey}
+					entityId={this.props.job.id}
+					entityName={this.props.job.title}
+					site={this.state.job.site || this.state.job.location}
+					live
+					refreshFrequency={10000}
+					placeHolder={""}
+					style={{ flex: 1, paddingHorizontal: 0, paddingTop: 16 }}
+					onCommentsLoaded={this.onCommentsLoaded}
+					onCommentAdded={this.onCommentAdded}
+					hideAddComment
+					disableFlag
+				/>
+				{!this.state.showMessages && (
+					<Components.InlineButton
+						onPress={this.onLeaveMessage}
+						color={this.props.colourBrandingMain}
+						touchableStyle={{ marginTop: 10 }}
+						style={{ height: 36 }}
+						textStyle={{ color: "#fff" }}
+						fullWidth
+					>
+						Leave Message
+					</Components.InlineButton>
+				)}
+			</View>
+		);
+	}
+
+	renderMessagesReply() {
+		if (!this.state.showMessages) return null;
+
+		return (
+			<Components.CommentReply
+				ref={this.commentReply}
+				commentSection={this.commentSection}
+				scrollView={this.scrollView}
+				entityType={values.commentKey}
+				entityId={this.props.job.id}
+				entityName={this.props.job.title}
+				site={this.state.job.site || this.state.job.location}
+				// noScroll={true}
+				// style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}
+			/>
+		);
+	}
+
+	renderStatusPopup() {
+		if (!this.state.showStatusPopup) return null;
+		return (
+			<StatusSelectorPopup
+				onClose={this.onCloseStatusPopup}
+				onSelect={this.onSelectStatus}
+			/>
+		);
+	}
+
+	renderPriorityPopup() {
+		if (!this.state.showPriorityPopup) return null;
+		return (
+			<PrioritySelectorPopup
+				onClose={this.onClosePriorityPopup}
+				onSelect={this.onSelectPriority}
+			/>
+		);
+	}
+
+	render() {
+		if (this.state.forbidden) {
+			return <Components.Forbidden />;
+		}
+		return (
+			<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
+				<Components.Header
+					leftIcon="angle-left"
+					onPressLeft={this.onPressBack}
+					text={Config.env.strings.MAINTENANCE_REQUEST_DETAILS}
+				/>
+				{this.renderLoading()}
+				<ScrollView
+					ref={this.scrollView}
+					contentContainerStyle={{ paddingBottom: 26 }}
+					style={{ height: "100%" }}
+				>
+					<View style={styles.innerContainer}>
+						{this.renderTop()}
+						{this.renderAssignee()}
+						{this.rendeDetails()}
+						{this.renderMessages()}
+					</View>
+				</ScrollView>
+				{this.renderMessagesReply()}
+				{this.renderStatusPopup()}
+				{this.renderPriorityPopup()}
+				{this.renderImagePopup()}
+				{this.renderDocumentPopup()}
+				<DateTimePicker
+					isVisible={this.state.isDateTimePickerVisible}
+					onConfirm={this.onDateSelected}
+					onCancel={this.onCloseDatePicker}
+					mode={this.state.popUpType}
+					headerTextIOS={`Pick a ${this.state.popUpType}`}
+					date={new Date()}
+				/>
+			</KeyboardAvoidingView>
+		);
+	}
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  innerContainer: {
-    paddingTop: 23,
-    paddingHorizontal: 16,
-  },
-  jobTitleContainer: {
-    paddingVertical: 14,
-    paddingHorizontal: 12,
-  },
-  jobIdText: {
-    fontFamily: 'sf-medium',
-    fontSize: 12,
-    marginBottom: 4,
-  },
-  jobTitleText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 20,
-    color: Colours.TEXT_DARKEST,
-    marginBottom: 8,
-  },
-  jobTypeSeenContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  jobTypeContainer: {
-    padding: 4,
-    minWidth: 80,
-    maxWidth: 140,
-    borderRadius: 4,
-    justifyContent: 'center',
-  },
-  jobTypeText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 12,
-    textAlign: 'center',
-    maxWidth: '100%',
-  },
-  jobSeenContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginLeft: 10,
-  },
-  jobSeenIcon: {
-    fontSize: 12,
-  },
-  jobSeenText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 12,
-    marginLeft: 4,
-  },
-  jobStatusDateText: {
-    marginTop: 8,
-    fontFamily: 'sf-medium',
-    fontSize: 13,
-    color: Colours.TEXT_LIGHT,
-  },
-  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',
-    fontSize: 11,
-    letterSpacing: 0.8,
-    color: Colours.TEXT_DARK,
-    marginBottom: 6,
-  },
-  jobStatusContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: 120,
-    height: 30,
-    paddingHorizontal: 8,
-    borderRadius: 4,
-  },
-  jobStatusIcon: {
-    color: '#fff',
-    fontSize: 14,
-    marginRight: 8,
-  },
-  jobStatusText: {
-    color: '#fff',
-    textAlign: 'center',
-    fontFamily: 'sf-semibold',
-    fontSize: 13,
-    flex: 1,
-    textAlign: 'center',
-  },
-  jobPriorityOuterContainer: {
-    marginTop: 12,
-  },
-  jobExpectedDateContainer: {
-    backgroundColor: Colours.BOXGREY,
-    flexDirection: 'row',
-    width: 115,
-    height: 30,
-    borderRadius: 4,
-    alignItems: 'center',
-    paddingLeft: 8,
-  },
-  jobExpectedDate: {
-    fontFamily: 'sf-regular',
-    fontSize: 13,
-    color: Colours.hexToRGBAstring(Colours.TEXT_DARKEST, 0.5),
-  },
-  detailsText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 16,
-    color: Colours.TEXT_DARKEST,
-  },
-  detailsSection: {
-    marginTop: 8,
-    paddingHorizontal: 0,
-    paddingBottom: 12,
-  },
-  sideBySideImages: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-  },
-  sideBySideImageContainer: {
-    backgroundColor: '#fff',
-    width: '48%',
-    height: 150,
-    borderRadius: 2,
-    overflow: 'hidden',
-  },
-  singleImageContainer: {
-    backgroundColor: '#fff',
-    width: '100%',
-    height: 150,
-    flex: 1,
-    borderRadius: 2,
-    overflow: 'hidden',
-    marginBottom: 16,
-  },
-  imageContainer: {
-    height: 150,
-    width: 'auto',
-    justifyContent: 'center',
-  },
-  imagePlayContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  imageControlIcon: {
-    color: '#fff',
-    fontSize: 30,
-    textShadowColor: 'rgba(0,0,0,0.3)',
-    textShadowOffset: { width: 2, height: 2 },
-  },
-  plusImages: {
-    fontFamily: 'sf-bold',
-    fontSize: 32,
-    textAlign: 'center',
-    color: '#fff',
-    textShadowColor: 'rgba(0, 0, 0, 0.5)',
-    textShadowOffset: { width: 0, height: 2 },
-    textShadowRadius: 8,
-  },
-  jobDescriptionText: {
-    fontFamily: 'sf-medium',
-    fontSize: 14,
-    color: Colours.TEXT_LIGHT,
-    paddingBottom: 16,
-  },
-  locationLabel: {
-    fontFamily: 'sf-bold',
-    fontSize: 14,
-    color: Colours.TEXT_DARKEST,
-  },
-  locationText: {
-    fontFamily: 'sf-regular',
-    fontSize: 16,
-    color: Colours.TEXT_DARKEST,
-    paddingVertical: 8,
-  },
-  requesterLabel: {
-    fontFamily: 'sf-bold',
-    fontSize: 14,
-    color: Colours.TEXT_DARKEST,
-    paddingVertical: 10,
-  },
-  profileContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  nameContainer: {
-    marginLeft: 18,
-  },
-  nameText: {
-    fontSize: 'sf-semibold',
-    fontSize: 14,
-    color: Colours.TEXT_DARKEST,
-    marginBottom: 4,
-  },
-  phoneText: {
-    fontSize: 'sf-medium',
-    fontSize: 14,
-    color: Colours.TEXT_LIGHT,
-  },
-  textSectionInner: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 8,
-  },
-  textSectionLabel: {
-    fontFamily: 'sf-semibold',
-    fontSize: 12,
-    lineHeight: 24,
-    color: Colours.TEXT_DARKEST,
-  },
-  textSectionTextContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  textSectionText: {
-    fontFamily: 'sf-regular',
-    fontSize: 13,
-    lineHeight: 24,
-    color: Colours.TEXT_LIGHT,
-  },
-  textSectionAngleRight: {
-    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,
-  },
-  customImage: {
-    marginTop: 8,
-  },
-  customDocument: {
-    marginTop: 8,
-    marginBottom: 16,
-  },
-  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,
-  },
-  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',
-  },
+	container: {
+		flex: 1,
+		backgroundColor: "#fff",
+	},
+	innerContainer: {
+		paddingTop: 23,
+		paddingHorizontal: 16,
+	},
+	jobTitleContainer: {
+		paddingVertical: 14,
+		paddingHorizontal: 12,
+	},
+	jobIdText: {
+		fontFamily: "sf-medium",
+		fontSize: 12,
+		marginBottom: 4,
+	},
+	jobTitleText: {
+		fontFamily: "sf-semibold",
+		fontSize: 20,
+		color: Colours.TEXT_DARKEST,
+		marginBottom: 8,
+	},
+	jobTypeSeenContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	jobTypeContainer: {
+		padding: 4,
+		minWidth: 80,
+		maxWidth: 140,
+		borderRadius: 4,
+		justifyContent: "center",
+	},
+	jobTypeText: {
+		fontFamily: "sf-semibold",
+		fontSize: 12,
+		textAlign: "center",
+		maxWidth: "100%",
+	},
+	jobSeenContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		marginLeft: 10,
+	},
+	jobSeenIcon: {
+		fontSize: 12,
+	},
+	jobSeenText: {
+		fontFamily: "sf-semibold",
+		fontSize: 12,
+		marginLeft: 4,
+	},
+	jobStatusDateText: {
+		marginTop: 8,
+		fontFamily: "sf-medium",
+		fontSize: 13,
+		color: Colours.TEXT_LIGHT,
+	},
+	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",
+		fontSize: 11,
+		letterSpacing: 0.8,
+		color: Colours.TEXT_DARK,
+		marginBottom: 6,
+	},
+	jobStatusContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		width: 120,
+		height: 30,
+		paddingHorizontal: 8,
+		borderRadius: 4,
+	},
+	jobStatusIcon: {
+		color: "#fff",
+		fontSize: 14,
+		marginRight: 8,
+	},
+	jobStatusText: {
+		color: "#fff",
+		textAlign: "center",
+		fontFamily: "sf-semibold",
+		fontSize: 13,
+		flex: 1,
+		textAlign: "center",
+	},
+	jobPriorityOuterContainer: {
+		marginTop: 12,
+	},
+	jobExpectedDateContainer: {
+		backgroundColor: Colours.BOXGREY,
+		flexDirection: "row",
+		width: 115,
+		height: 30,
+		borderRadius: 4,
+		alignItems: "center",
+		paddingLeft: 8,
+	},
+	jobExpectedDate: {
+		fontFamily: "sf-regular",
+		fontSize: 13,
+		color: Colours.hexToRGBAstring(Colours.TEXT_DARKEST, 0.5),
+	},
+	detailsText: {
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		color: Colours.TEXT_DARKEST,
+	},
+	detailsSection: {
+		marginTop: 8,
+		paddingHorizontal: 0,
+		paddingBottom: 12,
+	},
+	sideBySideImages: {
+		flex: 1,
+		flexDirection: "row",
+		justifyContent: "space-between",
+		marginBottom: 16,
+	},
+	sideBySideImageContainer: {
+		backgroundColor: "#fff",
+		width: "48%",
+		height: 150,
+		borderRadius: 2,
+		overflow: "hidden",
+	},
+	singleImageContainer: {
+		backgroundColor: "#fff",
+		width: "100%",
+		height: 150,
+		flex: 1,
+		borderRadius: 2,
+		overflow: "hidden",
+		marginBottom: 16,
+	},
+	imageContainer: {
+		height: 150,
+		width: "auto",
+		justifyContent: "center",
+	},
+	imagePlayContainer: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	imageControlIcon: {
+		color: "#fff",
+		fontSize: 30,
+		textShadowColor: "rgba(0,0,0,0.3)",
+		textShadowOffset: { width: 2, height: 2 },
+	},
+	plusImages: {
+		fontFamily: "sf-bold",
+		fontSize: 32,
+		textAlign: "center",
+		color: "#fff",
+		textShadowColor: "rgba(0, 0, 0, 0.5)",
+		textShadowOffset: { width: 0, height: 2 },
+		textShadowRadius: 8,
+	},
+	jobDescriptionText: {
+		fontFamily: "sf-medium",
+		fontSize: 14,
+		color: Colours.TEXT_LIGHT,
+		paddingBottom: 16,
+	},
+	locationLabel: {
+		fontFamily: "sf-bold",
+		fontSize: 14,
+		color: Colours.TEXT_DARKEST,
+	},
+	locationText: {
+		fontFamily: "sf-regular",
+		fontSize: 16,
+		color: Colours.TEXT_DARKEST,
+		paddingVertical: 8,
+	},
+	requesterLabel: {
+		fontFamily: "sf-bold",
+		fontSize: 14,
+		color: Colours.TEXT_DARKEST,
+		paddingVertical: 10,
+	},
+	profileContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	nameContainer: {
+		marginLeft: 18,
+	},
+	nameText: {
+		fontSize: "sf-semibold",
+		fontSize: 14,
+		color: Colours.TEXT_DARKEST,
+		marginBottom: 4,
+	},
+	phoneText: {
+		fontSize: "sf-medium",
+		fontSize: 14,
+		color: Colours.TEXT_LIGHT,
+	},
+	textSectionInner: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+		marginTop: 8,
+	},
+	textSectionLabel: {
+		fontFamily: "sf-semibold",
+		fontSize: 12,
+		lineHeight: 24,
+		color: Colours.TEXT_DARKEST,
+	},
+	textSectionTextContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	textSectionText: {
+		fontFamily: "sf-regular",
+		fontSize: 13,
+		lineHeight: 24,
+		color: Colours.TEXT_LIGHT,
+	},
+	textSectionAngleRight: {
+		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,
+	},
+	customImage: {
+		marginTop: 8,
+	},
+	customDocument: {
+		marginTop: 8,
+		marginBottom: 16,
+	},
+	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,
+	},
+	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,
-    statusTypes: state[values.reducerKey].jobstatuses,
-    hideSeen: state[values.reducerKey].hideSeen,
-  };
+const mapStateToProps = (state) => {
+	return {
+		user: state.user,
+		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+		jobs: state[values.reducerKey].jobs,
+		statusTypes: state[values.reducerKey].jobstatuses,
+		hideSeen: state[values.reducerKey].hideSeen,
+	};
 };
 
-export default connect(mapStateToProps, { jobAdded, jobStatusesUpdate, jobHideSeenUpdate })(RequestDetail);
+export default connect(mapStateToProps, {
+	jobAdded,
+	jobStatusesUpdate,
+	jobHideSeenUpdate,
+})(RequestDetail);