@plusscommunities/pluss-maintenance-app-forms 6.0.8-beta.0

package/dist/module/screens/RequestDetail.js

@@ -0,0 +1,980 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Component } from 'react';
+import { ScrollView, View, StyleSheet, Text, KeyboardAvoidingView, TouchableOpacity, ImageBackground, Platform } from 'react-native';
+import DateTimePicker from 'react-native-modal-datetime-picker';
+import { Icon } from 'react-native-elements';
+import _ from 'lodash';
+import moment from 'moment';
+import { connect } from 'react-redux';
+import { maintenanceActions } from '../apis';
+import { jobAdded } from '../actions';
+import StatusSelectorPopup from '../components/StatusSelectorPopup';
+import { jobStatusOptions, getJobStatusProps } from '../helper';
+import { Services } from '../feature.config';
+import { Colours, Helper, Components, Config } from '../core.config';
+import { values } from '../values.config';
+class RequestDetail extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "getJob", async () => {
+      console.log('getting job');
+      this.setState({
+        loading: true
+      }, async () => {
+        try {
+          const res = await maintenanceActions.getJob(this.props.job.site, this.props.job.id);
+          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
+          });
+        }
+      });
+    });
+    _defineProperty(this, "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);
+      }
+    });
+    _defineProperty(this, "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
+          });
+        }
+      });
+    });
+    _defineProperty(this, "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
+          });
+        }
+      });
+    });
+    _defineProperty(this, "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
+          });
+        }
+      });
+    });
+    _defineProperty(this, "onPressBack", () => {
+      Services.navigation.goBack();
+    });
+    _defineProperty(this, "onOpenStatusPicker", () => {
+      this.setState({
+        showStatusPopup: true
+      });
+    });
+    _defineProperty(this, "onCloseStatusPopup", () => {
+      this.setState({
+        showStatusPopup: false
+      });
+    });
+    _defineProperty(this, "onSelectStatus", status => {
+      this.setState({
+        status,
+        showStatusPopup: false
+      }, () => {
+        this.updateJobStatus();
+      });
+    });
+    _defineProperty(this, "openStaffNotes", () => {
+      Services.navigation.navigate(values.screenRequestNotes, {
+        job: this.state.job,
+        onChange: this.getJob
+      });
+    });
+    _defineProperty(this, "onOpenDatePicker", () => {
+      this.setState({
+        popUpType: 'date',
+        isDateTimePickerVisible: true
+      });
+    });
+    _defineProperty(this, "onCloseDatePicker", () => {
+      this.setState({
+        isDateTimePickerVisible: false
+      });
+    });
+    _defineProperty(this, "onDateSelected", date => {
+      if (this.state.popUpType === 'date') {
+        date = moment(date);
+        this.setState({
+          expectedDate: date,
+          expectedDateText: date.format('DD/MM/YYYY'),
+          isDateTimePickerVisible: false
+        }, () => {
+          this.updateJob();
+        });
+      }
+    });
+    _defineProperty(this, "onToggleDetails", () => {
+      this.setState({
+        showMore: !this.state.showMore
+      });
+    });
+    _defineProperty(this, "onLeaveMessage", () => {
+      this.setState({
+        showMessages: true
+      });
+    });
+    _defineProperty(this, "onCommentsLoaded", count => {
+      if (count > 0) {
+        this.setState({
+          showMessages: true
+        });
+      }
+    });
+    _defineProperty(this, "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
+          });
+        }
+      });
+    });
+    _defineProperty(this, "hasPermission", () => {
+      const {
+        job
+      } = this.state;
+      const {
+        permissions
+      } = this.props.user;
+      if (_.includes(permissions, values.permissionMaintenanceTracking)) {
+        return true;
+      }
+      if (_.includes(permissions, values.permissionMaintenanceAssign)) {
+        return job.AssigneeId === this.props.user.Id;
+      }
+      return false;
+    });
+    _defineProperty(this, "toggleFullscreenVideo", url => {
+      if (typeof url !== 'string') url = '';
+      this.setState({
+        showFullscreenVideo: url.length > 0,
+        currentVideoUrl: url
+      });
+    });
+    _defineProperty(this, "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
+      });
+    });
+    _defineProperty(this, "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
+          });
+        }
+      });
+    });
+    this.state = {
+      job: {},
+      isDateTimePickerVisible: false,
+      popUpType: '',
+      status: '',
+      expectedDate: null,
+      expectedDateText: '',
+      seen: false,
+      showMore: true,
+      showStatusPopup: false,
+      loading: false,
+      showFullscreenVideo: false,
+      currentVideoUrl: '',
+      galleryOpen: false,
+      galleryImages: [],
+      showMessages: false,
+      assignees: []
+    };
+    this.scrollView = /*#__PURE__*/React.createRef();
+    this.commentReply = /*#__PURE__*/React.createRef();
+    this.commentSection = /*#__PURE__*/React.createRef();
+  }
+  componentDidMount() {
+    this.getJob();
+    this.updateJobState(this.props.job);
+    this.getAssignees();
+  }
+  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();
+    });
+  }
+  openGallery(galleryImages, index) {
+    this.setState({
+      galleryOpen: true,
+      galleryImages
+    });
+    this.refs.imagePopup.scrollTo(index);
+  }
+  closeGallery() {
+    this.setState({
+      galleryOpen: false
+    });
+  }
+  renderLoading() {
+    return /*#__PURE__*/React.createElement(Components.LoadingIndicator, {
+      visible: this.state.loading
+    });
+  }
+  renderTop() {
+    const {
+      status,
+      job
+    } = this.state;
+    const {
+      statusText,
+      statusColor
+    } = getJobStatusProps(status);
+    const canEdit = this.hasPermission();
+    const showSeen = !status || status === jobStatusOptions[0].name;
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        ...Helper.getShadowStyle()
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.jobTitleContainer
+    }, job.jobId ? /*#__PURE__*/React.createElement(Text, {
+      style: [styles.jobIdText, {
+        color: this.props.colourBrandingMain
+      }]
+    }, `${values.textEntityName} #${job.jobId}`) : null, /*#__PURE__*/React.createElement(Text, {
+      style: styles.jobTitleText
+    }, job.title), /*#__PURE__*/React.createElement(View, {
+      style: styles.jobTypeSeenContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.jobTypeContainer, {
+        backgroundColor: Colours.hexToRGBAstring(this.props.colourBrandingMain, 0.2)
+      }]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.jobTypeText, {
+        color: this.props.colourBrandingMain
+      }],
+      numberOfLines: 2
+    }, job.type)), showSeen && this.state.seen && /*#__PURE__*/React.createElement(View, {
+      style: styles.jobSeenContainer
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "check",
+      type: "font-awesome",
+      iconStyle: [styles.jobSeenIcon, {
+        color: this.props.colourBrandingMain
+      }]
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: [styles.jobSeenText, {
+        color: this.props.colourBrandingMain
+      }]
+    }, "Seen"))), job.lastActivityUnix && /*#__PURE__*/React.createElement(View, {
+      style: styles.textSectionInner
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.textSectionLabel
+    }, "Last Updated On"), /*#__PURE__*/React.createElement(View, {
+      style: styles.textSectionTextContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.textSectionText
+    }, moment(job.lastActivityUnix).format('ddd D MMMM, h:mm A'))))), /*#__PURE__*/React.createElement(View, {
+      style: styles.jobStatusExpectedContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.jobStatusOuterContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.jobStatusHeading
+    }, "STATUS"), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: canEdit ? this.onOpenStatusPicker : null
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.jobStatusContainer, {
+        backgroundColor: statusColor
+      }]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.jobStatusText
+    }, statusText)))), this.hasPermission() && /*#__PURE__*/React.createElement(View, {
+      style: styles.jobStatusOuterContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.jobStatusHeading
+    }, "STAFF NOTES"), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.openStaffNotes
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.jobStatusContainer, {
+        backgroundColor: this.props.colourBrandingMain
+      }]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "pencil-square-o",
+      type: "font-awesome",
+      iconStyle: styles.jobStatusIcon
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.jobStatusText
+    }, "Notes (", (job.Notes || []).length, ")"))))));
+  }
+  renderPlayableImageUrl(images, index, containerStyle, showMore) {
+    const url = images[index || 0];
+    const thumbUrl = Helper.getThumb300(url);
+    if (Helper.isVideo(url)) {
+      return /*#__PURE__*/React.createElement(ImageBackground, {
+        style: [{
+          flex: 1
+        }, containerStyle],
+        source: {
+          uri: thumbUrl
+        }
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.imagePlayContainer
+      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+        onPress: this.toggleFullscreenVideo.bind(this, url)
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "play",
+        type: "font-awesome",
+        iconStyle: styles.imageControlIcon
+      }))));
+    }
+    const imageUrl = Helper.get1400(url);
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: containerStyle,
+      onPress: this.openGallery.bind(this, images, index || 0)
+    }, /*#__PURE__*/React.createElement(ImageBackground, {
+      style: styles.imageContainer,
+      source: {
+        uri: imageUrl
+      }
+    }, showMore && /*#__PURE__*/React.createElement(Text, {
+      style: styles.plusImages
+    }, "+", this.state.job.images.length - 2)));
+  }
+  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 /*#__PURE__*/React.createElement(View, {
+          style: styles.sideBySideImages
+        }, this.renderPlayableImage(images, 0, styles.sideBySideImageContainer), this.renderPlayableImage(images, 1, styles.sideBySideImageContainer, images.length > 2));
+      } else {
+        return /*#__PURE__*/React.createElement(View, {
+          style: styles.singleImageContainer
+        }, this.renderPlayableImage(images, 0));
+      }
+    } else if (!_.isNil(image)) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.singleImageContainer
+      }, this.renderPlayableImageUrl([image], 0));
+    }
+    return null;
+  }
+  renderImagePopup() {
+    return /*#__PURE__*/React.createElement(Components.ImagePopup, {
+      visible: this.state.galleryOpen,
+      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 = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
+      style: styles.locationLabel
+    }, "Assigned To"), /*#__PURE__*/React.createElement(View, null, job.Assignee && /*#__PURE__*/React.createElement(View, {
+      style: styles.profileContainer
+    }, /*#__PURE__*/React.createElement(Components.ProfilePic, {
+      ProfilePic: job.Assignee.profilePic,
+      Diameter: 40
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.nameContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.nameText
+    }, job.Assignee.displayName)))));
+    if (this.hasPermission()) {
+      return /*#__PURE__*/React.createElement(Components.FormCardSectionOptionLauncher, {
+        onPress: this.onOpenAssigneePicker,
+        title: "Assigned To",
+        value: job.Assignee ? job.Assignee.displayName : 'Unassigned',
+        textStyle: styles.detailsText,
+        sectionStyle: styles.detailsSection
+      }, content);
+    }
+    return content;
+  }
+  renderCustomFields() {
+    const {
+      job
+    } = this.state;
+    const {
+      customFields
+    } = job;
+    const renderAnswer = field => {
+      switch (field.type) {
+        case 'date':
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer ? moment(field.answer, 'YYYY-MM-DD').format('DD MMM YYYY') : '');
+        case 'time':
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer ? moment(field.answer, 'HH:mm').format('h:mm a') : '');
+        case 'yn':
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer ? 'Yes' : 'No');
+        case 'checkbox':
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer && Array.isArray(field.answer) ? field.answer.join(', ') : '');
+        case 'image':
+          return /*#__PURE__*/React.createElement(View, {
+            style: {
+              marginTop: 8
+            }
+          }, this.renderImage(field.answer));
+        default:
+          return /*#__PURE__*/React.createElement(Text, {
+            style: styles.customText
+          }, field.answer);
+      }
+    };
+    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 /*#__PURE__*/React.createElement(View, {
+        key: index
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.customLabel
+      }, field.label), renderAnswer(field));
+    });
+  }
+  rendeDetails() {
+    const {
+      job
+    } = this.state;
+    const {
+      customFields
+    } = job;
+    const hasCustomFields = customFields && customFields.length > 0;
+    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Components.FormCardSectionOptionLauncher, {
+      onPress: this.onToggleDetails,
+      title: "Details",
+      icon: this.state.showMore ? 'angle-up' : 'angle-down',
+      textStyle: styles.detailsText,
+      sectionStyle: styles.detailsSection
+    }), this.state.showMore && /*#__PURE__*/React.createElement(View, null, hasCustomFields ? this.renderCustomFields() : null, !hasCustomFields ? /*#__PURE__*/React.createElement(React.Fragment, null, this.renderImage(job.images, job.image), !_.isEmpty(job.description) && /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 10,
+      style: styles.jobDescriptionText
+    }, job.description)) : null, /*#__PURE__*/React.createElement(Text, {
+      style: styles.locationLabel
+    }, "Address"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.locationText
+    }, job.room), !hasCustomFields && job.isHome ? /*#__PURE__*/React.createElement(View, {
+      style: styles.detailsSection
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.locationLabel
+    }, "Must be home"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.locationText
+    }, job.homeText)) : null, /*#__PURE__*/React.createElement(Text, {
+      style: styles.requesterLabel
+    }, "Submitted By"), /*#__PURE__*/React.createElement(View, {
+      style: styles.profileContainer
+    }, /*#__PURE__*/React.createElement(Components.ProfilePic, {
+      ProfilePic: job.userProfilePic,
+      Diameter: 40
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.nameContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.nameText
+    }, job.userName), !_.isEmpty(job.phone) && /*#__PURE__*/React.createElement(Text, {
+      style: styles.phoneText
+    }, job.phone)))));
+  }
+  renderMessages() {
+    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Components.CommentSection, {
+      ref: this.commentSection,
+      commentReply: this.commentReply,
+      scrollView: this.scrollView,
+      adminPermission: values.permissionMaintenanceTracking,
+      entityType: values.featureKey,
+      entityId: this.props.job.id,
+      entityName: this.props.job.title,
+      site: this.state.job.site || this.state.job.location,
+      live: true,
+      refreshFrequency: 10000,
+      placeHolder: '',
+      style: {
+        flex: 1,
+        paddingHorizontal: 0,
+        paddingTop: 16
+      },
+      onCommentsLoaded: this.onCommentsLoaded,
+      onCommentAdded: this.onCommentAdded,
+      hideAddComment: true,
+      disableFlag: true
+    }), !this.state.showMessages && /*#__PURE__*/React.createElement(Components.InlineButton, {
+      onPress: this.onLeaveMessage,
+      color: this.props.colourBrandingMain,
+      touchableStyle: {
+        marginTop: 10
+      },
+      style: {
+        height: 36
+      },
+      textStyle: {
+        color: '#fff'
+      },
+      fullWidth: true
+    }, "Leave Message"));
+  }
+  renderMessagesReply() {
+    if (!this.state.showMessages) return null;
+    return /*#__PURE__*/React.createElement(Components.CommentReply, {
+      ref: this.commentReply,
+      commentSection: this.commentSection,
+      scrollView: this.scrollView,
+      entityType: values.featureKey,
+      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 /*#__PURE__*/React.createElement(StatusSelectorPopup, {
+      onClose: this.onCloseStatusPopup,
+      onSelect: this.onSelectStatus
+    });
+  }
+  render() {
+    if (this.state.forbidden) {
+      return /*#__PURE__*/React.createElement(Components.Forbidden, null);
+    }
+    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+      behavior: Platform.OS === 'ios' && 'padding',
+      style: styles.container
+    }, /*#__PURE__*/React.createElement(Components.Header, {
+      leftIcon: "angle-left",
+      onPressLeft: this.onPressBack,
+      text: Config.env.strings.MAINTENANCE_REQUEST_DETAILS
+    }), this.renderLoading(), /*#__PURE__*/React.createElement(ScrollView, {
+      ref: this.scrollView,
+      contentContainerStyle: {
+        paddingBottom: 26
+      },
+      style: {
+        height: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.innerContainer
+    }, this.renderTop(), this.renderAssignee(), this.rendeDetails(), this.renderMessages())), this.renderMessagesReply(), this.renderStatusPopup(), this.renderImagePopup(), /*#__PURE__*/React.createElement(DateTimePicker, {
+      isVisible: this.state.isDateTimePickerVisible,
+      onConfirm: this.onDateSelected,
+      onCancel: this.onCloseDatePicker,
+      mode: this.state.popUpType,
+      headerTextIOS: `Pick a ${this.state.popUpType}`
+    }));
+  }
+}
+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
+  },
+  jobStatusExpectedContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    borderTopWidth: 1,
+    borderTopColor: Colours.LINEGREY,
+    paddingVertical: 14,
+    paddingHorizontal: 12
+  },
+  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'
+  },
+  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
+  },
+  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 => {
+  return {
+    user: state.user,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    jobs: state[values.reducerKey].jobs
+  };
+};
+export default connect(mapStateToProps, {
+  jobAdded
+})(RequestDetail);
+//# sourceMappingURL=RequestDetail.js.map