@plusscommunities/pluss-maintenance-app-forms 6.0.10 → 6.0.11-auth.0

package/dist/module/screens/ServiceRequest.js

@@ -1,31 +1,128 @@
 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 { Dimensions, Platform, KeyboardAvoidingView, ScrollView, Text, TouchableOpacity, View, Switch, FlatList, ImageBackground, Keyboard } 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 { jobAdded } from '../actions';
-import { maintenanceActions } from '../apis';
-import { Services } from '../feature.config';
-import { Components, Colours, Helper, Config } from '../core.config';
-import { values } from '../values.config';
-const PHOTO_SIZE = (Dimensions.get('window').width - 64) / 3;
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import { Dimensions, Platform, KeyboardAvoidingView, ScrollView, TouchableOpacity, View, Switch, FlatList, ImageBackground, Keyboard, Alert } 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 { jobAdded } from "../actions";
+import { maintenanceActions, userActions } from "../apis";
+import { Services } from "../feature.config";
+import { Components, Colours, Helper, Config } from "../core.config";
+import { values } from "../values.config";
+const PHOTO_SIZE = (Dimensions.get("window").width - 64) / 3;
 class MaintenanceRequest extends Component {
   constructor(props) {
     super(props);
+    _defineProperty(this, "checkUserPermissions", async () => {
+      var _this$props$permissio;
+      // PC-1255: Check if user has userManagement permission
+      const hasUserManagement = ((_this$props$permissio = this.props.permissions) === null || _this$props$permissio === void 0 ? void 0 : _this$props$permissio.includes("userManagement")) || false;
+      if (hasUserManagement) {
+        this.setState({
+          canCreateOnBehalf: true
+        });
+        // Load site users for picker
+        await this.loadSiteUsers();
+      } else {
+        // Default to logged-in user for non-staff or staff without permission
+        this.setDefaultUser();
+      }
+    });
+    _defineProperty(this, "loadSiteUsers", async () => {
+      try {
+        const response = await userActions.getSiteUsers(this.props.site);
+        let items = response.data.Items || [];
+        if (this.props.optionOnlyForResidents) {
+          items = _.filter(items, u => u.category === "resident");
+        }
+        const users = _.sortBy(response.data.Items || [], u => (u.displayName || "").toLowerCase());
+        this.setState({
+          users
+        });
+      } catch (error) {
+        console.log("Error loading site users:", error);
+        // Fall back to default user if loading fails
+        this.setDefaultUser();
+      }
+    });
+    _defineProperty(this, "setDefaultUser", () => {
+      if (this.props.userType !== "KIOSK") {
+        const defaultUser = {
+          userId: this.props.uid,
+          displayName: this.props.displayName,
+          profilePic: this.props.profilePic
+        };
+        this.setState({
+          selectedUser: defaultUser,
+          userName: this.props.displayName,
+          roomNumber: this.props.unit,
+          phone: !_.isEmpty(this.props.phoneNumber) ? this.props.phoneNumber : ""
+        });
+      }
+    });
     _defineProperty(this, "onChangeName", userName => {
       const update = {
         userName
       };
-      if (!this.state.customFields || !_.some(this.state.customFields, 'isTitle')) {
+      if (!this.state.customFields || !_.some(this.state.customFields, "isTitle")) {
         update.title = userName;
       }
       this.setState(update);
     });
+    // PC-1255: Handle user picker navigation
+    _defineProperty(this, "onPressUser", () => {
+      const {
+        users,
+        selectedUser
+      } = this.state;
+      if (!users || users.length === 0) return;
+      Services.navigation.navigate(values.screenUserPicker, {
+        currentUser: selectedUser,
+        users,
+        onSelectUser: this.onSelectUser.bind(this)
+      });
+    });
+    // PC-1255: Handle user selection and auto-populate contact details
+    _defineProperty(this, "onSelectUser", async user => {
+      const update = {
+        selectedUser: user,
+        userName: user.displayName
+      };
+
+      // PC-1255: Try to fetch full user details for auto-population
+      try {
+        // getSiteUsers returns 'Id', but fetchUser expects 'userId'
+        const userId = user.userId || user.Id;
+        const response = await userActions.fetchUser(this.props.site, userId);
+        if (response.data && response.data.user) {
+          const userDetails = response.data.user;
+          if (userDetails.phoneNumber) {
+            update.phone = userDetails.phoneNumber;
+          }
+          if (userDetails.unit) {
+            update.roomNumber = userDetails.unit;
+          }
+          if (!this.state.customFields || !_.some(this.state.customFields, "isTitle")) {
+            update.title = userDetails.displayName || null;
+          }
+        }
+      } catch (error) {
+        // Permission denied (403) or other error - continue without auto-population
+        // User can still manually enter contact details
+        console.log("Could not fetch user details for auto-population:", error);
+      } finally {
+        // In any case, we still need a title. Inform the user to set one form field as a title.
+        if (!this.state.title && !update.title) {
+          update.title = "[Missing title - Set one of the form field as title in the community manager]";
+        }
+      }
+      this.setState(update);
+    });
     _defineProperty(this, "onChangeAnswer", (fieldId, answer) => {
       const update = {
         customFields: _.cloneDeep(this.state.customFields)
@@ -50,7 +147,7 @@ class MaintenanceRequest extends Component {
       };
       const field = update.customFields[fieldId];
       field.answer = _.xor(field.answer || [], [answer]);
-      if (field.isTitle) update.title = field.answer.join(', ');
+      if (field.isTitle) update.title = field.answer.join(", ");
       this.setState(update);
     });
     _defineProperty(this, "onOpenDatePicker", (field, fieldId) => {
@@ -83,30 +180,30 @@ class MaintenanceRequest extends Component {
       };
       const field = update.customFields[dateFieldId];
       const dateObj = moment(date);
-      if (popUpType === 'date') {
-        field.answer = dateObj.format('YYYY-MM-DD');
-        if (field.isTitle) update.title = dateObj.format('DD MMM YYYY');
+      if (popUpType === "date") {
+        field.answer = dateObj.format("YYYY-MM-DD");
+        if (field.isTitle) update.title = dateObj.format("DD MMM YYYY");
       } else {
-        field.answer = dateObj.format('HH:mm');
-        if (field.isTitle) update.title = dateObj.format('h:mm a');
+        field.answer = dateObj.format("HH:mm");
+        if (field.isTitle) update.title = dateObj.format("h:mm a");
       }
       this.setState(update);
     });
-    _defineProperty(this, "onUploadStarted", (uploadUri, imageUri) => {
+    _defineProperty(this, "onUploadStartedImage", (uploadUri, imageUri) => {
       const {
         imageFieldId
       } = this.state;
       const imagesUpdate = this.getImages(imageFieldId);
       imagesUpdate.splice(imagesUpdate.length - 1, 0, {
         uploading: true,
-        uploadProgress: '0%',
+        uploadProgress: "0%",
         uploadUri,
         imageUri,
         allowRetry: true
       });
       this.setImages(imagesUpdate, imageFieldId);
     });
-    _defineProperty(this, "onUploadProgress", progress => {
+    _defineProperty(this, "onUploadProgressImage", progress => {
       const {
         imageFieldId
       } = this.state;
@@ -120,14 +217,14 @@ class MaintenanceRequest extends Component {
       });
       this.setImages(imagesUpdate, imageFieldId);
     });
-    _defineProperty(this, "onUploadSuccess", async (uri, uploadUri) => {
+    _defineProperty(this, "onUploadSuccessImage", async (uri, uploadUri) => {
       const {
         imageFieldId
       } = this.state;
       const imagesUpdate = this.getImages(imageFieldId);
       imagesUpdate.map(img => {
         if (img.uploadUri === uploadUri && img.uploading) {
-          img.url = uri.replace('/general/', '/general1400/');
+          img.url = uri.replace("/general/", "/general1400/");
           img.thumbNailExists = false;
           img.thumbNailUrl = Helper.getThumb300(img.url);
           img.allowRetry = true;
@@ -135,7 +232,7 @@ class MaintenanceRequest extends Component {
       });
       this.setImages(imagesUpdate, imageFieldId, () => this.waitForThumbnails());
     });
-    _defineProperty(this, "onUploadFailed", uploadUri => {
+    _defineProperty(this, "onUploadFailedImage", uploadUri => {
       const {
         imageFieldId
       } = this.state;
@@ -143,13 +240,13 @@ class MaintenanceRequest extends Component {
       imagesUpdate.map(img => {
         if (img.uploadUri === uploadUri) {
           img.uploading = true; // Requried for retry
-          img.uploadProgress = '';
+          img.uploadProgress = "";
           img.allowRetry = true;
         }
       });
       this.setImages(imagesUpdate, imageFieldId);
     });
-    _defineProperty(this, "onLibrarySelected", uri => {
+    _defineProperty(this, "onLibrarySelectedImage", uri => {
       const {
         imageFieldId
       } = this.state;
@@ -163,22 +260,72 @@ class MaintenanceRequest extends Component {
       });
       this.setImages(imagesUpdate, imageFieldId);
     });
+    _defineProperty(this, "onUploadStartedDocument", (uploadUri, documentUri, documentName, documentExt, documentFieldId) => {
+      const documentsUpdate = this.getDocuments(documentFieldId);
+      documentsUpdate.splice(documentsUpdate.length - 1, 0, {
+        uploading: true,
+        uploadProgress: "0%",
+        uploadUri,
+        documentUri,
+        documentName,
+        documentExt,
+        allowRetry: true
+      });
+      this.setDocuments(documentsUpdate, documentFieldId);
+    });
+    _defineProperty(this, "onUploadProgressDocument", (progress, documentFieldId) => {
+      const documentsUpdate = this.getDocuments(documentFieldId);
+      documentsUpdate.map(doc => {
+        if (doc.uploadUri === progress.uri) {
+          doc.uploadProgress = progress.percentage;
+          doc.uploading = true;
+          doc.allowRetry = true;
+        }
+      });
+      this.setDocuments(documentsUpdate, documentFieldId);
+    });
+    _defineProperty(this, "onUploadSuccessDocument", async (uri, uploadUri, documentFieldId) => {
+      const documentsUpdate = this.getDocuments(documentFieldId);
+      documentsUpdate.map(doc => {
+        if (doc.uploadUri === uploadUri && doc.uploading) {
+          doc.uploading = false;
+          doc.uploadProgress = "100%";
+          doc.url = uri;
+          doc.allowRetry = true;
+        }
+      });
+      this.setDocuments(documentsUpdate, documentFieldId);
+    });
+    _defineProperty(this, "onUploadFailedDocument", (uploadUri, documentFieldId) => {
+      const documentsUpdate = this.getDocuments(documentFieldId);
+      documentsUpdate.map(doc => {
+        if (doc.uploadUri === uploadUri) {
+          doc.uploading = true; // Requried for retry
+          doc.uploadProgress = "";
+          doc.allowRetry = true;
+        }
+      });
+      this.setDocuments(documentsUpdate, documentFieldId);
+    });
     _defineProperty(this, "isFieldValid", (field, fieldId) => {
       const {
         mandatory,
         type,
         answer
       } = field;
-      if (['staticTitle', 'staticText'].includes(type)) return true;
-      const imagesList = type === 'image' ? this.getImageUrls(fieldId) : [];
+      if (["staticTitle", "staticText"].includes(type)) return true;
       const checkMandatory = () => {
         if (!mandatory) return true;
         switch (type) {
-          case 'yn':
+          case "yn":
             return _.isBoolean(answer);
-          case 'image':
+          case "image":
+            const imagesList = this.getImageUrls(fieldId);
             return imagesList.length > 0;
-          case 'checkbox':
+          case "document":
+            const documentsList = this.getDocumentAnswers(fieldId);
+            return documentsList.length > 0;
+          case "checkbox":
             return _.isArray(answer) && answer.length > 0;
           default:
             return !_.isNil(answer) && !_.isEmpty(answer);
@@ -187,12 +334,12 @@ class MaintenanceRequest extends Component {
       const checkFormat = () => {
         if (_.isNil(answer) || _.isEmpty(answer)) return true;
         switch (type) {
-          case 'email':
+          case "email":
             return Helper.isEmail(answer);
-          case 'date':
-            return moment(answer, 'YYYY-MM-DD', true).isValid();
-          case 'time':
-            return moment(answer, 'HH:mm', true).isValid();
+          case "date":
+            return moment(answer, "YYYY-MM-DD", true).isValid();
+          case "time":
+            return moment(answer, "HH:mm", true).isValid();
           default:
             return true;
         }
@@ -228,7 +375,8 @@ class MaintenanceRequest extends Component {
       // Fix custom images field answers
       const customFields = _.cloneDeep(this.state.customFields);
       const updatedCustomFields = customFields.map((field, fieldId) => {
-        if (field.type === 'image') field.answer = this.getImageUrls(fieldId);
+        if (field.type === "image") field.answer = this.getImageUrls(fieldId);
+        if (field.type === "document") field.answer = this.getDocumentAnswers(fieldId);
         return field;
       });
       maintenanceActions.sendMaintenanceRequest(this.props.uid, this.state.userName, this.state.phone, this.state.roomNumber, this.state.title, description, null, this.state.type, images, Helper.getSite(this.props.site), this.state.isHome, this.state.times, updatedCustomFields).then(res => {
@@ -246,7 +394,7 @@ class MaintenanceRequest extends Component {
           });
         }
       }).catch(err => {
-        console.log('maintenance submission fail.');
+        console.log("maintenance submission fail.");
         console.log(err);
         this.setState({
           submitting: false
@@ -258,7 +406,7 @@ class MaintenanceRequest extends Component {
         const job = await maintenanceActions.getJob(Helper.getSite(this.props.site), id);
         this.props.jobAdded(job.data);
       } catch (error) {
-        console.log('refreshRequest error', error);
+        console.log("refreshRequest error", error);
       }
     });
     _defineProperty(this, "validateCustomFields", () => {
@@ -343,8 +491,41 @@ class MaintenanceRequest extends Component {
       imagesUpdate.splice(index, 1);
       this.setImages(imagesUpdate, fieldId);
     });
+    _defineProperty(this, "getDocuments", fieldId => {
+      const {
+        customFieldDocuments
+      } = this.state;
+      const documentsList = _.cloneDeep(customFieldDocuments[fieldId]) || [];
+      return documentsList;
+    });
+    _defineProperty(this, "setDocuments", (documentsList, fieldId) => {
+      let update = {};
+      const customFieldDocuments = _.cloneDeep(this.state.customFieldDocuments);
+      customFieldDocuments[fieldId] = documentsList;
+      update = {
+        customFieldDocuments
+      };
+      this.setState(update);
+    });
+    _defineProperty(this, "getDocumentAnswers", fieldId => {
+      const documentsList = this.getDocuments(fieldId);
+      return _.filter(documentsList, doc => {
+        return !doc.uploading && doc.url;
+      }).map(doc => {
+        return {
+          name: doc.documentName,
+          ext: doc.documentExt,
+          url: doc.url
+        };
+      });
+    });
+    _defineProperty(this, "removeDocument", (index, fieldId) => {
+      const documentsUpdate = this.getDocuments(fieldId);
+      documentsUpdate.splice(index, 1);
+      this.setDocuments(documentsUpdate, fieldId);
+    });
     _defineProperty(this, "toggleFullscreenVideo", url => {
-      if (typeof url !== 'string') url = '';
+      if (typeof url !== "string") url = "";
       this.setState({
         showFullscreenVideo: url.length > 0,
         currentVideoUrl: url
@@ -357,44 +538,43 @@ class MaintenanceRequest extends Component {
       error: null,
       showError: false,
       loadingTypes: values.forceCustomFields,
-      userName: '',
-      roomNumber: '',
-      phone: '',
-      title: '',
-      description: '',
-      times: '',
-      type: 'General',
+      userName: "",
+      roomNumber: "",
+      phone: "",
+      title: "",
+      description: "",
+      times: "",
+      type: "General",
       uploadingImage: false,
       images: [{
         add: true
       }],
       showFullscreenVideo: false,
-      currentVideoUrl: '',
+      currentVideoUrl: "",
       isHome: false,
       types: [],
       confirmationToShow: false,
       customFields: [],
       customFieldImages: {},
+      customFieldDocuments: {},
       isDateTimePickerVisible: false,
-      popUpType: 'date',
+      popUpType: "date",
       dateFieldId: null,
-      imageFieldId: null
+      imageFieldId: null,
+      // PC-1255: On-behalf request fields
+      canCreateOnBehalf: false,
+      selectedUser: null,
+      users: []
     };
     this.checkThumb = null;
     this.keyboardTypes = {
-      phone: 'phone-pad',
-      email: 'email-address',
-      text: 'default'
+      phone: "phone-pad",
+      email: "email-address",
+      text: "default"
     };
   }
   componentDidMount() {
-    if (this.props.userType !== 'KIOSK') {
-      this.setState({
-        userName: this.props.displayName,
-        roomNumber: this.props.unit,
-        phone: !_.isEmpty(this.props.phoneNumber) ? this.props.phoneNumber : ''
-      });
-    }
+    this.checkUserPermissions();
     this.getJobTypes();
   }
   componentWillUnmount() {
@@ -420,9 +600,9 @@ class MaintenanceRequest extends Component {
   onConfirmationReset() {
     this.setState({
       confirmationToShow: false,
-      title: '',
-      description: '',
-      times: '',
+      title: "",
+      description: "",
+      times: "",
       isHome: false,
       uploadingImage: false,
       images: [{
@@ -433,8 +613,9 @@ class MaintenanceRequest extends Component {
       fail: false,
       customFields: [],
       customFieldImages: {},
+      customFieldDocuments: {},
       isDateTimePickerVisible: false,
-      popUpType: 'date',
+      popUpType: "date",
       dateFieldId: null,
       imageFieldId: null
     }, () => this.pickType(this.state.type));
@@ -443,9 +624,9 @@ class MaintenanceRequest extends Component {
     maintenanceActions.getJobTypes(Helper.getSite(this.props.site)).then(res => {
       this.setState({
         types: res.data
+      }, () => {
+        this.getDefaultJob();
       });
-      console.log(res.data);
-      this.getDefaultJob();
     }).catch(() => {});
   }
   pickType(type) {
@@ -454,7 +635,6 @@ class MaintenanceRequest extends Component {
     } = this.state;
     const selected = types.find(t => t.typeName === type) || {};
     if (values.forceCustomFields && !selected.hasCustomFields) {
-      console.log(selected);
       this.setState({
         type,
         customFields: [],
@@ -467,7 +647,7 @@ class MaintenanceRequest extends Component {
       customFields: selected.hasCustomFields && selected.customFields.length > 0 ? _.cloneDeep(selected.customFields) : [],
       loadingTypes: false
     };
-    if (!_.isEmpty(update.customFields) && !_.some(update.customFields, 'isTitle')) {
+    if (!_.isEmpty(update.customFields) && !_.some(update.customFields, "isTitle")) {
       update.title = this.state.userName;
     }
     this.setState(update);
@@ -490,14 +670,15 @@ class MaintenanceRequest extends Component {
       title,
       roomNumber,
       isHome,
-      times
+      customFieldImages
     } = this.state;
     const hasCustomFields = customFields && customFields.length > 0;
+    function showFormErrorAlert() {}
     if (submitting || !this.props.connected) {
       if (!this.props.connected) {
         this.setState({
           error: {
-            message: 'No internet connection detected'
+            message: "No internet connection detected"
           }
         });
       }
@@ -508,11 +689,22 @@ class MaintenanceRequest extends Component {
       error: null,
       showError: false
     });
+
+    // PC-1255: Validate user selection for on-behalf requests
+    if (this.state.canCreateOnBehalf && !this.state.selectedUser) {
+      console.log("submitRequest - no user selected for on-behalf request");
+      Alert.alert("Missing Information", "Please select a user to submit the form on behalf of");
+      this.setState({
+        showError: true
+      });
+      return;
+    }
     if (title.length === 0 || !roomNumber || roomNumber.length === 0) {
-      console.log('submitRequest - error', {
+      console.log("submitRequest - error", {
         title,
         roomNumber
       });
+      Alert.alert("Missing Information", "Please fill out your address details");
       this.setState({
         showError: true
       });
@@ -520,7 +712,8 @@ class MaintenanceRequest extends Component {
     }
     if (hasCustomFields) {
       if (!this.validateCustomFields()) {
-        console.log('submitRequest - custom fields error');
+        console.log("submitRequest - custom fields error");
+        Alert.alert("Invalid Information", "Please review the form for errors and try submitting again.");
         this.setState({
           showError: true
         });
@@ -528,10 +721,11 @@ class MaintenanceRequest extends Component {
       }
     } else {
       if (isHome && times.length < 2) {
-        console.log('submitRequest - error', {
+        console.log("submitRequest - error", {
           isHome,
           times
         });
+        Alert.alert("Invalid Information", "Please review the form for errors and try submitting again.");
         this.setState({
           showError: true
         });
@@ -540,20 +734,20 @@ class MaintenanceRequest extends Component {
     }
     this.submit();
   }
-  renderUploadMenu() {
+  renderImageUploader() {
     return /*#__PURE__*/React.createElement(Components.ImageUploader, {
       ref: ref => this.imageUploader = ref,
-      onUploadStarted: this.onUploadStarted,
-      onUploadSuccess: this.onUploadSuccess,
-      onUploadFailed: this.onUploadFailed,
-      onUploadProgress: this.onUploadProgress,
-      onLibrarySelected: this.onLibrarySelected,
+      onUploadStarted: this.onUploadStartedImage,
+      onUploadSuccess: this.onUploadSuccessImage,
+      onUploadFailed: this.onUploadFailedImage,
+      onUploadProgress: this.onUploadProgressImage,
+      onLibrarySelected: this.onLibrarySelectedImage,
       size: {
         width: 1400
       },
       quality: 0.8,
-      fileName: 'serviceImage',
-      popupTitle: 'Upload Image',
+      fileName: "serviceImage",
+      popupTitle: "Upload Image",
       userId: this.props.uid,
       allowsEditing: false,
       multiple: true,
@@ -612,12 +806,40 @@ class MaintenanceRequest extends Component {
       style: styles.removeImage
     }))));
   }
+  renderDocument(item, index, fieldId) {
+    const {
+      colourBrandingMain
+    } = this.props;
+    return /*#__PURE__*/React.createElement(View, {
+      key: index,
+      style: styles.documentContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        ...styles.documentTypeContainer,
+        backgroundColor: colourBrandingMain
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.documentTypeText
+    }, item.documentExt)), /*#__PURE__*/React.createElement(Text, {
+      style: styles.documentText
+    }, `${item.documentName}${item.uploading ? ` - ${item.uploadProgress}` : ""}`), !item.uploading && /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.removeDocumentButton,
+      onPress: () => this.removeDocument(index, fieldId)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "remove",
+      type: "font-awesome",
+      iconStyle: {
+        ...styles.removeDocumentIcon,
+        color: colourBrandingMain
+      }
+    })));
+  }
   renderSuccess() {
     return /*#__PURE__*/React.createElement(View, {
       style: {
         padding: 16,
         flex: 1,
-        backgroundColor: '#fff'
+        backgroundColor: "#fff"
       }
     }, /*#__PURE__*/React.createElement(Text, {
       style: styles.requestSuccess
@@ -626,8 +848,6 @@ class MaintenanceRequest extends Component {
   renderImageList(fieldId = null) {
     const imagesList = this.getImages(fieldId);
     return /*#__PURE__*/React.createElement(View, {
-      style: styles.imageSection
-    }, /*#__PURE__*/React.createElement(View, {
       style: [styles.imageListContainer, imagesList.length < 2 && styles.imageListContainerEmpty]
     }, /*#__PURE__*/React.createElement(FlatList, {
       keyboardShouldPersistTaps: "always",
@@ -639,20 +859,37 @@ class MaintenanceRequest extends Component {
       }) => this.renderImage(item, index, fieldId),
       keyExtractor: (item, index) => index,
       numColumns: 3
-    })));
+    }));
+  }
+  renderDocumentList(fieldId) {
+    const documentsList = this.getDocuments(fieldId);
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.documentListContainer
+    }, documentsList.length > 0 ? documentsList.map((document, index) => this.renderDocument(document, index, fieldId)) : null, /*#__PURE__*/React.createElement(Components.DocumentUploader, {
+      buttonTitle: "Add Files",
+      allowedTypes: ["application/pdf"],
+      onUploadStarted: (uploadUri, uri, name, ext) => this.onUploadStartedDocument(uploadUri, uri, name, ext, fieldId),
+      onUploadProgress: progress => this.onUploadProgressDocument(progress, fieldId),
+      onUploadSuccess: (uri, uploadUri) => this.onUploadSuccessDocument(uri, uploadUri, fieldId),
+      onUploadFailed: uploadUri => this.onUploadFailedDocument(uploadUri, fieldId),
+      fileName: "serviceDocument",
+      userId: this.props.uid,
+      disabled: false,
+      multiple: true
+    }));
   }
   renderDateField(field, fieldId, sectionStyle) {
     let displayText, placeHolder, icon, errorText;
-    if (field.type === 'date') {
-      displayText = field.answer ? moment(field.answer, 'YYYY-MM-DD').format('DD MMM YYYY') : '';
-      placeHolder = 'dd mmm yyyy';
-      icon = 'calendar';
-      errorText = 'Not a valid date';
+    if (field.type === "date") {
+      displayText = field.answer ? moment(field.answer, "YYYY-MM-DD").format("DD MMM YYYY") : "";
+      placeHolder = "dd mmm yyyy";
+      icon = "calendar";
+      errorText = "Not a valid date";
     } else {
-      displayText = field.answer ? moment(field.answer, 'HH:mm').format('h:mm a') : '';
-      placeHolder = '--:-- --';
-      icon = 'clock-o';
-      errorText = 'Not a valid time';
+      displayText = field.answer ? moment(field.answer, "HH:mm").format("h:mm a") : "";
+      placeHolder = "--:-- --";
+      icon = "clock-o";
+      errorText = "Not a valid time";
     }
     return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
       key: fieldId,
@@ -690,7 +927,7 @@ class MaintenanceRequest extends Component {
       marginBottom: 24
     };
     switch (field.type) {
-      case 'yn':
+      case "yn":
         return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
           key: fieldId,
           label: field.label,
@@ -702,7 +939,7 @@ class MaintenanceRequest extends Component {
           showError: this.state.showError,
           required: field.mandatory
         });
-      case 'multichoice':
+      case "multichoice":
         return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
           key: fieldId,
           label: field.label,
@@ -720,7 +957,7 @@ class MaintenanceRequest extends Component {
           showError: this.state.showError,
           required: field.mandatory
         });
-      case 'checkbox':
+      case "checkbox":
         return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
           key: fieldId,
           label: field.label,
@@ -750,9 +987,9 @@ class MaintenanceRequest extends Component {
             style: styles.multiChoiceText
           }, o));
         }));
-      case 'text':
-      case 'email':
-      case 'phone':
+      case "text":
+      case "email":
+      case "phone":
         return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
           key: fieldId,
           label: field.label,
@@ -763,28 +1000,28 @@ class MaintenanceRequest extends Component {
           squaredCorners: true,
           isValid: () => this.isFieldValid(field, fieldId),
           showError: this.state.showError,
-          errorText: field.type === 'email' ? 'Not a valid email' : undefined,
+          errorText: field.type === "email" ? "Not a valid email" : undefined,
           required: field.mandatory,
           sectionStyle: sectionStyle,
           autoCapitalize: "sentences",
           keyboardType: this.keyboardTypes[field.type]
         });
-      case 'staticTitle':
+      case "staticTitle":
         return /*#__PURE__*/React.createElement(Text, {
           key: fieldId,
           style: [styles.staticTitle, {
             color: this.props.colourBrandingMain
           }, sectionStyle]
         }, field.label);
-      case 'staticText':
+      case "staticText":
         return /*#__PURE__*/React.createElement(View, {
           key: fieldId,
           style: [styles.staticText, sectionStyle]
         }, Helper.toParagraphed(field.label, styles.staticText));
-      case 'date':
-      case 'time':
+      case "date":
+      case "time":
         return this.renderDateField(field, fieldId, sectionStyle);
-      case 'image':
+      case "image":
         return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
           key: fieldId,
           label: field.label,
@@ -793,6 +1030,15 @@ class MaintenanceRequest extends Component {
           required: field.mandatory,
           showError: this.state.showError
         }, this.renderImageList(fieldId));
+      case "document":
+        return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
+          key: fieldId,
+          label: field.label,
+          sectionStyle: sectionStyle,
+          isValid: () => this.isFieldValid(field, fieldId),
+          required: field.mandatory,
+          showError: this.state.showError
+        }, this.renderDocumentList(fieldId));
       default:
         return null;
     }
@@ -809,6 +1055,7 @@ class MaintenanceRequest extends Component {
     }, customFields.map((field, i) => this.renderField(field, i)));
   }
   renderForm() {
+    var _this$state$selectedU, _this$state$selectedU2, _this$state$selectedU3;
     const {
       customFields,
       loadingTypes
@@ -839,12 +1086,42 @@ class MaintenanceRequest extends Component {
       style: {
         marginTop: 16
       }
-    }, /*#__PURE__*/React.createElement(Components.FormCardSection, {
-      label: 'Name',
-      placeholder: 'Enter your name',
+    }, this.state.canCreateOnBehalf && /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: "Select User",
+      textValue: (_this$state$selectedU = this.state.selectedUser) === null || _this$state$selectedU === void 0 ? void 0 : _this$state$selectedU.displayName,
+      hasContent: true,
+      hasUnderline: true,
+      required: true,
+      errorText: "Please select a user.",
+      showError: this.state.showError && !this.state.selectedUser,
+      sectionStyle: {
+        borderBottomWidth: 1,
+        borderBottomColor: Colours.LINEGREY
+      }
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.onPressUser
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.userPickerContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.profileContainer
+    }, /*#__PURE__*/React.createElement(Components.ProfilePic, {
+      ProfilePic: (_this$state$selectedU2 = this.state.selectedUser) === null || _this$state$selectedU2 === void 0 ? void 0 : _this$state$selectedU2.profilePic,
+      Diameter: 30
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.nameText
+    }, ((_this$state$selectedU3 = this.state.selectedUser) === null || _this$state$selectedU3 === void 0 ? void 0 : _this$state$selectedU3.displayName) || "Select User")), /*#__PURE__*/React.createElement(Icon, {
+      name: "angle-right",
+      type: "font-awesome",
+      iconStyle: [styles.sectionTitle, {
+        fontSize: 20,
+        color: this.props.colourBrandingMain
+      }]
+    })))), !this.state.canCreateOnBehalf && /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: "Name",
+      placeholder: "Enter your name",
       textValue: this.state.userName,
       onChangeText: userName => this.onChangeName(userName),
-      editable: this.props.userType === 'KIOSK' && this.state.submitting === false,
+      editable: this.props.userType === "KIOSK" && this.state.submitting === false,
       isValid: () => {
         return this.state.userName.length > 1;
       },
@@ -853,18 +1130,18 @@ class MaintenanceRequest extends Component {
       showError: this.state.showError && this.state.userName.length < 2,
       hasUnderline: true
     }), /*#__PURE__*/React.createElement(Components.FormCardSection, {
-      label: 'Contact number',
-      placeholder: 'Enter phone number',
+      label: "Contact number",
+      placeholder: "Enter phone number",
       textValue: this.state.phone,
       onChangeText: phone => this.setState({
         phone
       }),
       editable: this.state.submitting === false,
       hasUnderline: true,
-      keyboardType: 'phone-pad'
+      keyboardType: "phone-pad"
     }), /*#__PURE__*/React.createElement(Components.FormCardSection, {
-      label: 'Address',
-      placeholder: 'Enter your address',
+      label: "Address",
+      placeholder: "Enter your address",
       textValue: this.state.roomNumber,
       onChangeText: roomNumber => this.setState({
         roomNumber
@@ -882,8 +1159,8 @@ class MaintenanceRequest extends Component {
         marginTop: 16,
         paddingHorizontal: 24,
         paddingVertical: 16,
-        flexDirection: 'row',
-        justifyContent: 'space-between'
+        flexDirection: "row",
+        justifyContent: "space-between"
       }
     }, /*#__PURE__*/React.createElement(Text, {
       style: styles.sectionTitle
@@ -891,7 +1168,7 @@ class MaintenanceRequest extends Component {
       onPress: this.onPressType.bind(this)
     }, /*#__PURE__*/React.createElement(View, {
       style: {
-        flexDirection: 'row'
+        flexDirection: "row"
       }
     }, /*#__PURE__*/React.createElement(Text, {
       style: [styles.sectionTitle, {
@@ -910,8 +1187,8 @@ class MaintenanceRequest extends Component {
         marginTop: 16
       }
     }, /*#__PURE__*/React.createElement(Components.FormCardSection, {
-      label: 'Title',
-      placeholder: 'Enter a title for your request',
+      label: "Title",
+      placeholder: "Enter a title for your request",
       textValue: this.state.title,
       onChangeText: title => this.setState({
         title
@@ -928,8 +1205,8 @@ class MaintenanceRequest extends Component {
       multiline: true,
       autoGrow: true
     }), /*#__PURE__*/React.createElement(Components.FormCardSection, {
-      label: 'Description',
-      placeholder: 'Describe your request here in detail',
+      label: "Description",
+      placeholder: "Describe your request here in detail",
       textValue: this.state.description,
       onChangeText: description => this.setState({
         description
@@ -946,12 +1223,12 @@ class MaintenanceRequest extends Component {
       }
     }, /*#__PURE__*/React.createElement(View, {
       style: [{
-        width: '100%',
+        width: "100%",
         paddingVertical: 16,
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        position: 'relative'
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        position: "relative"
       }, this.state.isHome && {
         borderBottomWidth: 1,
         borderBottomColor: Colours.LINEGREY
@@ -965,13 +1242,13 @@ class MaintenanceRequest extends Component {
         isHome: value
       }),
       trackColor: {
-        false: '#ddd',
+        false: "#ddd",
         true: this.props.colourBrandingMain
       },
-      thumbColor: Platform.OS === 'android' ? '#fff' : null
+      thumbColor: Platform.OS === "android" ? "#fff" : null
     })), this.state.isHome && /*#__PURE__*/React.createElement(Components.FormCardSection, {
-      label: 'Available times',
-      placeholder: 'Describe your available times here in detail.',
+      label: "Available times",
+      placeholder: "Describe your available times here in detail.",
       textValue: this.state.times,
       onChangeText: times => this.setState({
         times
@@ -993,7 +1270,7 @@ class MaintenanceRequest extends Component {
   renderRegisterConfirmation() {
     return /*#__PURE__*/React.createElement(Components.ConfirmationPopup, {
       confirmText: `${values.textEntityName} submitted`,
-      repeatText: 'Submit another',
+      repeatText: "Submit another",
       visible: this.state.confirmationToShow,
       onClose: this.onCloseConfirmationPopup.bind(this),
       onPressAction: this.onConfirmationReset.bind(this)
@@ -1017,8 +1294,8 @@ class MaintenanceRequest extends Component {
       return null;
     }
     return /*#__PURE__*/React.createElement(Components.WarningPopup, {
-      confirmText: 'No forms are available',
-      infoText: 'Check back later for forms.',
+      confirmText: "No forms are available",
+      infoText: "Check back later for forms.",
       visible: this.state.noType,
       onClose: this.onPressBack.bind(this),
       padHorizontal: true
@@ -1032,15 +1309,15 @@ class MaintenanceRequest extends Component {
       popUpType
     } = this.state;
     return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
-      behavior: Platform.OS === 'ios' && 'padding',
+      behavior: "padding",
       style: styles.viewContainer
-    }, this.renderUploadMenu(), /*#__PURE__*/React.createElement(View, {
+    }, this.renderImageUploader(), /*#__PURE__*/React.createElement(View, {
       style: styles.container
     }, /*#__PURE__*/React.createElement(Components.Header, {
       leftIcon: "angle-left",
       onPressLeft: this.onPressBack.bind(this),
       text: this.props.strings[`${values.featureKey}_textFeatureTitle`] || values.textFeatureTitle,
-      rightText: submitting || success ? null : 'Done',
+      rightText: submitting || success ? null : "Done",
       onPressRight: this.submitRequest.bind(this),
       absoluteRight: true
     }), this.renderForm()), this.renderRegisterConfirmation(), this.renderVideoPlayerPopup(), this.renderNoType(), /*#__PURE__*/React.createElement(DateTimePicker, {
@@ -1050,54 +1327,60 @@ class MaintenanceRequest extends Component {
         isDateTimePickerVisible: false
       }),
       mode: popUpType,
-      headerTextIOS: `Pick a ${popUpType}`
+      headerTextIOS: `Pick a ${popUpType}`,
+      date: new Date()
     }));
   }
 }
 const styles = {
   viewContainer: {
     flex: 1,
-    backgroundColor: '#fff'
+    backgroundColor: "#fff"
   },
   container: {
     flex: 1,
-    position: 'relative',
-    backgroundColor: '#f0f0f5'
+    position: "relative",
+    backgroundColor: "#f0f0f5"
   },
   errorText: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     color: Colours.COLOUR_TANGERINE,
     fontSize: 16
   },
   requestSuccess: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     color: Colours.TEXT_DARK,
     fontSize: 17,
-    textAlign: 'center'
+    textAlign: "center"
   },
   sectionTitle: {
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     fontSize: 17,
     color: Colours.TEXT_DARK
   },
   imageListContainer: {
     marginTop: 8,
     padding: 8,
-    flexDirection: 'row',
+    flexDirection: "row",
     backgroundColor: Colours.BOXGREY,
     minHeight: 106
   },
   imageListContainerEmpty: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column'
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column"
+  },
+  documentListContainer: {
+    marginTop: 8,
+    flexDirection: "column",
+    alignItems: "flex-start"
   },
   imageContainer: {
     width: PHOTO_SIZE,
     height: PHOTO_SIZE,
-    borderStyle: 'dashed',
-    justifyContent: 'center',
-    alignItems: 'center',
+    borderStyle: "dashed",
+    justifyContent: "center",
+    alignItems: "center",
     borderWidth: 1,
     borderColor: Colours.LINEGREY,
     borderRadius: 4,
@@ -1106,13 +1389,13 @@ const styles = {
   imageContainerNotEmpty: {
     borderWidth: 1,
     borderColor: Colours.LINEGREY,
-    backgroundColor: '#fff',
-    borderStyle: 'dashed'
+    backgroundColor: "#fff",
+    borderStyle: "dashed"
   },
   imageBackground: {
     flex: 1,
-    height: '100%',
-    width: '100%',
+    height: "100%",
+    width: "100%",
     borderRadius: 4
   },
   imageCircle: {
@@ -1120,60 +1403,60 @@ const styles = {
     height: 90,
     borderRadius: 45,
     backgroundColor: Colours.PINKISH_GREY,
-    justifyContent: 'center'
+    justifyContent: "center"
   },
   addImageIcon: {
-    color: '#fff',
+    color: "#fff",
     fontSize: 32
   },
   imagePlayContainer: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    alignItems: 'center',
-    justifyContent: 'center'
+    alignItems: "center",
+    justifyContent: "center"
   },
   imageControlIcon: {
-    color: '#fff',
+    color: "#fff",
     fontSize: 20,
-    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowColor: "rgba(0,0,0,0.3)",
     textShadowOffset: {
       width: 2,
       height: 2
     }
   },
   removeImage: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     right: 0,
     padding: 4,
     width: 40,
     height: 40,
-    alignItems: 'center',
-    justifyContent: 'center'
+    alignItems: "center",
+    justifyContent: "center"
   },
   staticTitle: {
     fontSize: 20,
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     color: Colours.TEXT_DARKEST
   },
   staticText: {
     fontSize: 17,
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     color: Colours.TEXT_DARKEST,
     lineHeight: 24
   },
   multiChoiceOption: {
     marginTop: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     minHeight: 20
   },
   multiChoiceText: {
     flex: 1,
-    fontFamily: 'sf-medium',
+    fontFamily: "sf-medium",
     fontSize: 14,
     color: Colours.TEXT_DARK
   },
@@ -1190,24 +1473,24 @@ const styles = {
     borderRadius: 4
   },
   dateContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: "row",
+    alignItems: "center"
   },
   dateFieldButton: {
     flex: 1
   },
   dateFieldContainer: {
-    flexDirection: 'row',
+    flexDirection: "row",
     borderRadius: 2,
-    backgroundColor: '#ebeff2',
+    backgroundColor: "#ebeff2",
     padding: 8,
     marginTop: 8
   },
   dateText: {
     flex: 1,
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     fontSize: 16,
-    color: '#65686D'
+    color: "#65686D"
   },
   dateIcon: {
     fontSize: 18,
@@ -1219,6 +1502,58 @@ const styles = {
   removeIcon: {
     fontSize: 26,
     color: Colours.TEXT_BLUEGREY
+  },
+  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"
+  },
+  removeDocumentButton: {
+    padding: 4,
+    width: 40,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 8
+  },
+  removeDocumentIcon: {
+    fontSize: 24
+  },
+  // PC-1255: User picker styles
+  userPickerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  profileContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  nameText: {
+    fontFamily: "sf-medium",
+    fontSize: 16,
+    color: Colours.TEXT_DARK,
+    marginLeft: 8
   }
 };
 const mapStateToProps = state => {
@@ -1233,7 +1568,8 @@ const mapStateToProps = state => {
     uid,
     site,
     unit,
-    phoneNumber
+    phoneNumber,
+    permissions
   } = user;
   return {
     connected: connection.connected,
@@ -1244,8 +1580,10 @@ const mapStateToProps = state => {
     site,
     unit,
     phoneNumber,
+    permissions,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-    strings: ((_state$strings = state.strings) === null || _state$strings === void 0 ? void 0 : _state$strings.config) || {}
+    strings: ((_state$strings = state.strings) === null || _state$strings === void 0 ? void 0 : _state$strings.config) || {},
+    optionOnlyForResidents: Helper.getSiteSettingFromState(state, values.optionOnlyForResidents)
   };
 };
 export default connect(mapStateToProps, {