@plusscommunities/pluss-maintenance-app 6.1.1-beta.0 → 7.0.0-auth.0

package/src/screens/RequestDetail.js

@@ -1,14 +1,15 @@
 import React, { Component } from 'react';
 import { ScrollView, View, StyleSheet, Text, KeyboardAvoidingView, TouchableOpacity, ImageBackground, Platform } from 'react-native';
 import DateTimePicker from 'react-native-modal-datetime-picker';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 import _ from 'lodash';
 import moment from 'moment';
 import { connect } from 'react-redux';
-import { generalActions } from '../apis';
-import { jobAdded } from '../actions';
+import { maintenanceActions } from '../apis';
+import { jobAdded, jobStatusesUpdate, jobHideSeenUpdate } from '../actions';
 import StatusSelectorPopup from '../components/StatusSelectorPopup';
-import { jobStatusOptions, getJobStatusProps } from '../helper';
+import PrioritySelectorPopup from '../components/PrioritySelectorPopup';
+import { getJobStatus, getJobPriority } from '../helper';
 import { Services } from '../feature.config';
 import { Colours, Helper, Components, Config } from '../core.config';
 import { values } from '../values.config';
@@ -22,16 +23,20 @@ class RequestDetail extends Component {
       isDateTimePickerVisible: false,
       popUpType: '',
       status: '',
+      priority: '',
       expectedDate: null,
       expectedDateText: '',
       seen: false,
-      showMore: false,
+      showMore: true,
       showStatusPopup: false,
+      showPriorityPopup: false,
       loading: false,
       showFullscreenVideo: false,
       currentVideoUrl: '',
       galleryOpen: false,
+      galleryImages: [],
       showMessages: false,
+      assignees: [],
     };
 
     this.scrollView = React.createRef();
@@ -40,17 +45,51 @@ class RequestDetail extends Component {
   }
 
   componentDidMount() {
-    this.updateJobState();
+    this.props.jobStatusesUpdate(this.props.job.site);
+    this.props.jobHideSeenUpdate(this.props.job.site);
+    this.getJob();
+    this.updateJobState(this.props.job);
+    this.getAssignees();
   }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.jobs !== this.props.jobs) {
-      this.updateJobState();
+  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() {
-    const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || this.props.job;
+  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);
@@ -74,9 +113,10 @@ class RequestDetail extends Component {
     this.setState({ loading: true }, async () => {
       try {
         const updated = { id: job.id, seen: true, status: job.status || 'Unassigned' };
-        const res = await generalActions.editJob(updated, user.site);
+        const res = await maintenanceActions.editJob(updated, user.site);
         // console.log('markSeen updated');
         this.props.jobAdded(res.data.job);
+        this.getJob();
         this.setState({ loading: false, seen: true });
       } catch (error) {
         console.log('markSeen error', error);
@@ -96,8 +136,9 @@ class RequestDetail extends Component {
             .utc()
             .toISOString();
         }
-        const res = await generalActions.editJob(updated, user.site);
+        const res = await maintenanceActions.editJob(updated, user.site);
         this.props.jobAdded(res.data.job);
+        this.getJob();
       } catch (error) {
         console.log('updateJob error', error);
       } finally {
@@ -109,8 +150,9 @@ class RequestDetail extends Component {
   updateJobStatus = () => {
     this.setState({ loading: true }, async () => {
       try {
-        const res = await generalActions.editJobStatus(this.props.job.id, this.state.status);
+        const res = await maintenanceActions.editJobStatus(this.props.job.id, this.state.status);
         this.props.jobAdded(res.data.job);
+        this.getJob();
       } catch (error) {
         console.log('updateJobStatus error', error);
       } finally {
@@ -119,6 +161,20 @@ class RequestDetail extends Component {
     });
   };
 
+  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();
   };
@@ -132,13 +188,29 @@ class RequestDetail extends Component {
   };
 
   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 });
+    Services.navigation.navigate(values.screenRequestNotes, { job: this.state.job, onChange: this.getJob });
   };
 
   onOpenDatePicker = () => {
@@ -182,9 +254,10 @@ class RequestDetail extends Component {
   onCommentAdded = () => {
     this.setState({ loading: true }, async () => {
       try {
-        const job = await generalActions.getJob(this.props.user.site, this.props.job.id);
+        const job = await maintenanceActions.getJob(this.props.user.site, this.props.job.id);
         // console.log('onCommentAdded', job?.data);
         this.props.jobAdded(job.data);
+        this.getJob();
       } catch (error) {
         console.log('onCommentAdded error', error);
       } finally {
@@ -194,8 +267,15 @@ class RequestDetail extends Component {
   };
 
   hasPermission = () => {
+    const { job } = this.state;
     const { permissions } = this.props.user;
-    return _.includes(permissions, values.permissionMaintenanceTracking);
+    if (_.includes(permissions, values.permissionMaintenanceTracking)) {
+      return true;
+    }
+    if (_.includes(permissions, values.permissionMaintenanceAssignment)) {
+      return job.AssigneeId === this.props.user.Id;
+    }
+    return false;
   };
 
   toggleFullscreenVideo = url => {
@@ -203,9 +283,10 @@ class RequestDetail extends Component {
     this.setState({ showFullscreenVideo: url.length > 0, currentVideoUrl: url });
   };
 
-  openGallery(index) {
+  openGallery(galleryImages, index) {
     this.setState({
       galleryOpen: true,
+      galleryImages,
     });
     this.refs.imagePopup.scrollTo(index);
   }
@@ -216,25 +297,59 @@ class RequestDetail extends Component {
     });
   }
 
+  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 { statusText, statusColor } = getJobStatusProps(status);
+    const statusOption = getJobStatus(status, this.props);
+    const priority = getJobPriority(job.priority);
     const canEdit = this.hasPermission();
-    const showSeen = !status || status === jobStatusOptions[0].name;
+    const isStaff = this.props.user.category === 'staff'
+    const showSeen = !status || status === getJobStatus(null, this.props).text;
 
     return (
       <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 }]}>{job.type}</Text>
+              <Text style={[styles.jobTypeText, { color: this.props.colourBrandingMain }]} numberOfLines={2}>
+                {job.type}
+              </Text>
             </View>
-            {showSeen && this.state.seen && (
+            {!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>
@@ -250,7 +365,7 @@ class RequestDetail extends Component {
               </View>
             </View>
           )}
-          <View style={styles.textSectionInner}>
+          {/* <View style={styles.textSectionInner}>
             <Text style={styles.textSectionLabel}>Expected Date</Text>
             <TouchableOpacity onPress={this.onOpenDatePicker}>
               <View style={styles.textSectionTextContainer}>
@@ -262,25 +377,36 @@ class RequestDetail extends Component {
                 />
               </View>
             </TouchableOpacity>
-          </View>
+          </View> */}
         </View>
-        <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: statusColor }]}>
-                <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} />
-                <Text style={styles.jobStatusText}>{statusText}</Text>
+        <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>
-            </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>
+          {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>
@@ -290,7 +416,8 @@ class RequestDetail extends Component {
     );
   }
 
-  renderPlayableImageUrl(url, index, containerStyle, showMore) {
+  renderPlayableImageUrl(images, index, containerStyle, showMore) {
+    const url = images[index || 0];
     const thumbUrl = Helper.getThumb300(url);
 
     if (Helper.isVideo(url)) {
@@ -307,7 +434,7 @@ class RequestDetail extends Component {
 
     const imageUrl = Helper.get1400(url);
     return (
-      <TouchableOpacity style={containerStyle} onPress={this.openGallery.bind(this, index || 0)}>
+      <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>
@@ -315,26 +442,24 @@ class RequestDetail extends Component {
     );
   }
 
-  renderPlayableImage(index, containerStyle, showMore) {
-    const url = this.state.job.images[index];
-    return this.renderPlayableImageUrl(url, index, containerStyle, showMore);
+  renderPlayableImage(images, index, containerStyle, showMore) {
+    return this.renderPlayableImageUrl(images, index, containerStyle, showMore);
   }
 
-  renderImage() {
-    const { job } = this.state;
-    if (!_.isNil(job.images) && !_.isEmpty(job.images)) {
-      if (job.images.length >= 2) {
+  renderImage(images, image = null) {
+    if (!_.isNil(images) && !_.isEmpty(images)) {
+      if (images.length >= 2) {
         return (
           <View style={styles.sideBySideImages}>
-            {this.renderPlayableImage(0, styles.sideBySideImageContainer)}
-            {this.renderPlayableImage(1, styles.sideBySideImageContainer, job.images.length > 2)}
+            {this.renderPlayableImage(images, 0, styles.sideBySideImageContainer)}
+            {this.renderPlayableImage(images, 1, styles.sideBySideImageContainer, images.length > 2)}
           </View>
         );
       } else {
-        return <View style={styles.singleImageContainer}>{this.renderPlayableImage(0)}</View>;
+        return <View style={styles.singleImageContainer}>{this.renderPlayableImage(images, 0)}</View>;
       }
-    } else if (!_.isNil(job.image)) {
-      return <View style={styles.singleImageContainer}>{this.renderPlayableImageUrl(job.image)}</View>;
+    } else if (!_.isNil(image)) {
+      return <View style={styles.singleImageContainer}>{this.renderPlayableImageUrl([image], 0)}</View>;
     }
     return null;
   }
@@ -343,15 +468,86 @@ class RequestDetail extends Component {
     return (
       <Components.ImagePopup
         visible={this.state.galleryOpen}
-        images={this.state.job.images || [this.state.job.image]}
+        images={this.state.galleryImages}
         onClose={this.closeGallery.bind(this)}
         ref="imagePopup"
       />
     );
   }
 
+  renderAssignee() {
+    const { job } = this.state;
+    if (!this.hasPermission() && !job.Assignee) return null;
+
+    const content = (
+      <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={{ marginTop: 8 }}>{this.renderImage(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>
@@ -364,21 +560,26 @@ class RequestDetail extends Component {
         />
         {this.state.showMore && (
           <View>
-            {this.renderImage()}
-            {!_.isEmpty(job.description) && (
-              <Text numberOfLines={10} style={styles.jobDescriptionText}>
-                {job.description}
-              </Text>
-            )}
-            <Text style={styles.locationLabel}>Location</Text>
+            {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>
-            {job.isHome ? (
+            {!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}>Person Requesting</Text>
+            <Text style={styles.requesterLabel}>Submitted By</Text>
             <View style={styles.profileContainer}>
               <Components.ProfilePic ProfilePic={job.userProfilePic} Diameter={40} />
               <View style={styles.nameContainer}>
@@ -400,7 +601,7 @@ class RequestDetail extends Component {
           commentReply={this.commentReply}
           scrollView={this.scrollView}
           adminPermission={values.permissionMaintenanceTracking}
-          entityType={values.featureKey}
+          entityType={values.commentKey}
           entityId={this.props.job.id}
           entityName={this.props.job.title}
           site={this.state.job.site || this.state.job.location}
@@ -437,12 +638,12 @@ class RequestDetail extends Component {
         ref={this.commentReply}
         commentSection={this.commentSection}
         scrollView={this.scrollView}
-        entityType={values.featureKey}
+        entityType={values.commentKey}
         entityId={this.props.job.id}
         entityName={this.props.job.title}
         site={this.state.job.site || this.state.job.location}
-        // noScroll={true}
-        // style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}
+      // noScroll={true}
+      // style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}
       />
     );
   }
@@ -452,7 +653,15 @@ class RequestDetail extends Component {
     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} />
@@ -460,12 +669,14 @@ class RequestDetail extends Component {
         <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()}
         <DateTimePicker
           isVisible={this.state.isDateTimePickerVisible}
@@ -492,6 +703,11 @@ const styles = StyleSheet.create({
     paddingVertical: 14,
     paddingHorizontal: 12,
   },
+  jobIdText: {
+    fontFamily: 'sf-medium',
+    fontSize: 12,
+    marginBottom: 4,
+  },
   jobTitleText: {
     fontFamily: 'sf-semibold',
     fontSize: 20,
@@ -503,8 +719,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   jobTypeContainer: {
-    height: 20,
-    width: 80,
+    padding: 4,
+    minWidth: 80,
+    maxWidth: 140,
     borderRadius: 4,
     justifyContent: 'center',
   },
@@ -512,6 +729,7 @@ const styles = StyleSheet.create({
     fontFamily: 'sf-semibold',
     fontSize: 12,
     textAlign: 'center',
+    maxWidth: '100%',
   },
   jobSeenContainer: {
     flexDirection: 'row',
@@ -532,15 +750,17 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: Colours.TEXT_LIGHT,
   },
-  jobStatusExpectedContainer: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
+  jobInfoContainer: {
     borderTopWidth: 1,
     borderTopColor: Colours.LINEGREY,
     paddingVertical: 14,
     paddingHorizontal: 12,
   },
+  jobStatusExpectedContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
   jobStatusOuterContainer: {
     // marginRight: 50,
   },
@@ -572,6 +792,9 @@ const styles = StyleSheet.create({
     flex: 1,
     textAlign: 'center',
   },
+  jobPriorityOuterContainer: {
+    marginTop: 12,
+  },
   jobExpectedDateContainer: {
     backgroundColor: Colours.BOXGREY,
     flexDirection: 'row',
@@ -715,6 +938,30 @@ const styles = StyleSheet.create({
     marginLeft: 10,
     lineHeight: 24,
   },
+  customLabel: {
+    fontFamily: 'sf-bold',
+    fontSize: 14,
+    color: Colours.TEXT_DARKEST,
+  },
+  customText: {
+    fontFamily: 'sf-regular',
+    fontSize: 16,
+    color: Colours.TEXT_DARKEST,
+    paddingVertical: 8,
+  },
+  customStaticTitle: {
+    fontSize: 20,
+    fontFamily: 'sf-semibold',
+    color: Colours.TEXT_DARKEST,
+    marginBottom: 10,
+  },
+  customStaticText: {
+    fontSize: 17,
+    fontFamily: 'sf-regular',
+    color: Colours.TEXT_DARKEST,
+    lineHeight: 24,
+    marginBottom: 10,
+  },
 });
 
 const mapStateToProps = state => {
@@ -722,7 +969,9 @@ const mapStateToProps = state => {
     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 })(RequestDetail);
+export default connect(mapStateToProps, { jobAdded, jobStatusesUpdate, jobHideSeenUpdate })(RequestDetail);