@plusscommunities/pluss-maintenance-app 8.0.8 → 8.0.9-beta.0

package/src/screens/RequestDetail.js

@@ -1,468 +1,395 @@
-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 'react-native-elements';
+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,
-			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}>
+  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,
+      externalSync: null,
+      loadingExternalSync: false,
+    };
+
+    this.scrollView = React.createRef();
+    this.commentReply = React.createRef();
+    this.commentSection = 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}>
@@ -475,894 +402,745 @@ 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;
-	}
-
-	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>
-		);
-	}
+        </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="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={Platform.OS === 'ios' && '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}`}
+        />
+      </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",
-	},
-	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,
-	},
+  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);