@plusscommunities/pluss-maintenance-app 6.0.5 → 6.0.6-beta.0

package/dist/module/screens/ServiceRequest.js

@@ -3,46 +3,120 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _ from 'lodash';
+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;
 class MaintenanceRequest extends Component {
   constructor(props) {
     super(props);
+    _defineProperty(this, "onChangeAnswer", (fieldId, answer) => {
+      const update = {
+        customFields: _.cloneDeep(this.state.customFields)
+      };
+      const field = update.customFields[fieldId];
+      field.answer = answer;
+      if (field.isTitle) update.title = field.answer;
+      this.setState(update);
+    });
+    _defineProperty(this, "onChangeToggleAnswer", (fieldId, answer) => {
+      const update = {
+        customFields: _.cloneDeep(this.state.customFields)
+      };
+      const field = update.customFields[fieldId];
+      field.answer = field.answer === answer ? undefined : answer;
+      if (field.isTitle) update.title = field.answer;
+      this.setState(update);
+    });
+    _defineProperty(this, "onChangeCheckboxAnswer", (fieldId, answer) => {
+      const update = {
+        customFields: _.cloneDeep(this.state.customFields)
+      };
+      const field = update.customFields[fieldId];
+      field.answer = _.xor(field.answer || [], [answer]);
+      if (field.isTitle) update.title = field.answer.join(', ');
+      this.setState(update);
+    });
+    _defineProperty(this, "onOpenDatePicker", (field, fieldId) => {
+      Keyboard.dismiss();
+      this.setState({
+        dateFieldId: fieldId,
+        popUpType: field.type,
+        isDateTimePickerVisible: true
+      });
+    });
+    _defineProperty(this, "onClearDate", fieldId => {
+      const update = {
+        customFields: _.cloneDeep(this.state.customFields)
+      };
+      const field = update.customFields[fieldId];
+      field.answer = undefined;
+      if (field.isTitle) update.title = field.answer;
+      this.setState(update);
+    });
+    _defineProperty(this, "onDateSelected", date => {
+      const {
+        customFields,
+        dateFieldId,
+        popUpType
+      } = this.state;
+      const update = {
+        customFields: _.cloneDeep(customFields),
+        isDateTimePickerVisible: false,
+        fieldId: null
+      };
+      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');
+      } else {
+        field.answer = dateObj.format('HH:mm');
+        if (field.isTitle) update.title = dateObj.format('h:mm a');
+      }
+      this.setState(update);
+    });
     _defineProperty(this, "onUploadStarted", (uploadUri, imageUri) => {
-      const images = [...this.state.images];
-      images.splice(images.length - 1, 0, {
+      const {
+        imageFieldId
+      } = this.state;
+      const imagesUpdate = this.getImages(imageFieldId);
+      imagesUpdate.splice(imagesUpdate.length - 1, 0, {
         uploading: true,
         uploadProgress: '0%',
         uploadUri,
         imageUri,
         allowRetry: true
       });
-      this.setState({
-        images
-      });
+      this.setImages(imagesUpdate, imageFieldId);
     });
     _defineProperty(this, "onUploadProgress", progress => {
-      const images = [...this.state.images];
-      images.map(img => {
+      const {
+        imageFieldId
+      } = this.state;
+      const imagesUpdate = this.getImages(imageFieldId);
+      imagesUpdate.map(img => {
         if (img.uploadUri === progress.uri) {
           img.uploadProgress = progress.percentage;
           img.uploading = true;
           img.allowRetry = true;
         }
       });
-      this.setState({
-        images
-      });
+      this.setImages(imagesUpdate, imageFieldId);
     });
     _defineProperty(this, "onUploadSuccess", async (uri, uploadUri) => {
-      const images = [...this.state.images];
-      images.map(img => {
+      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.thumbNailExists = false;
@@ -50,41 +124,81 @@ class MaintenanceRequest extends Component {
           img.allowRetry = true;
         }
       });
-      this.setState({
-        images
-      }, () => this.waitForThumbnails());
+      this.setImages(imagesUpdate, imageFieldId, () => this.waitForThumbnails());
     });
     _defineProperty(this, "onUploadFailed", uploadUri => {
-      const images = [...this.state.images];
-      images.map(img => {
+      const {
+        imageFieldId
+      } = this.state;
+      const imagesUpdate = this.getImages(imageFieldId);
+      imagesUpdate.map(img => {
         if (img.uploadUri === uploadUri) {
           img.uploading = true; // Requried for retry
           img.uploadProgress = '';
           img.allowRetry = true;
         }
       });
-      this.setState({
-        images
-      });
+      this.setImages(imagesUpdate, imageFieldId);
     });
     _defineProperty(this, "onLibrarySelected", uri => {
-      const images = [...this.state.images];
-      images.splice(images.length - 1, 0, {
+      const {
+        imageFieldId
+      } = this.state;
+      const imagesUpdate = this.getImages(imageFieldId);
+      imagesUpdate.splice(imagesUpdate.length - 1, 0, {
         uploading: false,
         allowRetry: false,
         url: Helper.get1400(uri),
         thumbNailExists: true,
         thumbNailUrl: Helper.getThumb300(uri)
       });
-      this.setState({
-        images
-      });
+      this.setImages(imagesUpdate, imageFieldId);
     });
-    _defineProperty(this, "showUploadMenu", () => {
+    _defineProperty(this, "isFieldValid", (field, fieldId) => {
+      const {
+        mandatory,
+        type,
+        answer
+      } = field;
+      if (['staticTitle', 'staticText'].includes(type)) return true;
+      const imagesList = type === 'image' ? this.getImageUrls(fieldId) : [];
+      const checkMandatory = () => {
+        if (!mandatory) return true;
+        switch (type) {
+          case 'yn':
+            return _.isBoolean(answer);
+          case 'image':
+            return imagesList.length > 0;
+          case 'checkbox':
+            return _.isArray(answer) && answer.length > 0;
+          default:
+            return !_.isNil(answer) && !_.isEmpty(answer);
+        }
+      };
+      const checkFormat = () => {
+        if (_.isNil(answer) || _.isEmpty(answer)) return true;
+        switch (type) {
+          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();
+          default:
+            return true;
+        }
+      };
+      const valid = checkMandatory() && checkFormat();
+      return valid;
+    });
+    _defineProperty(this, "showUploadMenu", fieldId => {
       Keyboard.dismiss();
       if (this.state.uploadingImage || this.state.submitting) {
         return;
       }
+      if (fieldId) this.setState({
+        imageFieldId: fieldId
+      });
       this.imageUploader.showUploadMenu();
     });
     _defineProperty(this, "submit", async () => {
@@ -100,12 +214,15 @@ class MaintenanceRequest extends Component {
           y: 0
         });
       }, 100);
-      const images = _.filter(this.state.images, img => {
-        return !img.uploading && !img.add;
-      }).map(img => {
-        return img.url;
+      const images = this.getImageUrls();
+
+      // 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);
+        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).then(res => {
+      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 => {
         if (res.data.success) {
           this.refreshRequest(res.data.searchResult);
           if (this.props.onSubmissionSuccess) this.props.onSubmissionSuccess(res.data);
@@ -130,22 +247,71 @@ class MaintenanceRequest extends Component {
     _defineProperty(this, "refreshRequest", async id => {
       try {
         const job = await maintenanceActions.getJob(Helper.getSite(this.props.site), id);
-        // console.log('refreshRequest', job?.data);
         this.props.jobAdded(job.data);
       } catch (error) {
         console.log('refreshRequest error', error);
       }
     });
+    _defineProperty(this, "validateCustomFields", () => {
+      const {
+        customFields
+      } = this.state;
+      if (!customFields || customFields.length === 0) return true;
+      return customFields.every((field, index) => {
+        const isValid = this.isFieldValid(field, index);
+        return isValid;
+      });
+    });
+    _defineProperty(this, "getImages", (fieldId = null) => {
+      const {
+        images,
+        customFieldImages
+      } = this.state;
+      const imagesList = _.cloneDeep(fieldId ? customFieldImages[fieldId] : images);
+      if (!imagesList || !Array.isArray(imagesList) || imagesList.length === 0) {
+        return [{
+          add: true
+        }];
+      }
+      return imagesList;
+    });
+    _defineProperty(this, "setImages", (imagesList, fieldId = null, callback = null) => {
+      let update = {};
+      if (fieldId) {
+        const customFieldImages = _.cloneDeep(this.state.customFieldImages);
+        customFieldImages[fieldId] = imagesList;
+        update = {
+          customFieldImages
+        };
+      } else {
+        update = {
+          images: imagesList
+        };
+      }
+      this.setState(update, callback);
+    });
+    _defineProperty(this, "getImageUrls", (fieldId = null) => {
+      const imagesList = this.getImages(fieldId);
+      return _.filter(imagesList, img => {
+        return !img.uploading && !img.add;
+      }).map(img => {
+        return img.url;
+      });
+    });
     _defineProperty(this, "waitForThumbnails", () => {
       if (this.checkThumb) return;
       this.checkThumb = setInterval(async () => {
-        const images = [];
-        await Promise.all(this.state.images.map(image => {
+        const {
+          imageFieldId
+        } = this.state;
+        const imagesList = this.getImages(imageFieldId);
+        const imagesUpdate = [];
+        await Promise.all(imagesList.map(image => {
           return new Promise(async resolve => {
             const newImage = {
               ...image
             };
-            images.push(newImage);
+            imagesUpdate.push(newImage);
             if (newImage.url && !newImage.thumbNailExists) {
               newImage.uploading = false;
               newImage.allowRetry = false;
@@ -155,22 +321,18 @@ class MaintenanceRequest extends Component {
             resolve(true);
           });
         }));
-        const thumbnailsExist = images.every(image => !image.url || image.thumbNailExists);
+        const thumbnailsExist = imagesUpdate.every(image => !image.url || image.thumbNailExists);
         if (thumbnailsExist) {
           clearInterval(this.checkThumb);
           this.checkThumb = null;
-          this.setState({
-            images
-          });
+          this.setImages(imagesUpdate, imageFieldId);
         }
       }, 2000);
     });
-    _defineProperty(this, "removeImage", index => {
-      const images = [...this.state.images];
-      images.splice(index, 1);
-      this.setState({
-        images
-      });
+    _defineProperty(this, "removeImage", (index, fieldId) => {
+      const imagesUpdate = this.getImages(fieldId);
+      imagesUpdate.splice(index, 1);
+      this.setImages(imagesUpdate, fieldId);
     });
     _defineProperty(this, "toggleFullscreenVideo", url => {
       if (typeof url !== 'string') url = '';
@@ -200,9 +362,20 @@ class MaintenanceRequest extends Component {
       currentVideoUrl: '',
       isHome: false,
       types: [],
-      confirmationToShow: false
+      confirmationToShow: false,
+      customFields: [],
+      customFieldImages: {},
+      isDateTimePickerVisible: false,
+      popUpType: 'date',
+      dateFieldId: null,
+      imageFieldId: null
     };
     this.checkThumb = null;
+    this.keyboardTypes = {
+      phone: 'phone-pad',
+      email: 'email-address',
+      text: 'default'
+    };
   }
   componentDidMount() {
     if (this.props.userType !== 'KIOSK') {
@@ -221,7 +394,7 @@ class MaintenanceRequest extends Component {
     Services.navigation.goBack();
   }
   onPressType() {
-    Services.navigation.navigate('jobTypePicker', {
+    Services.navigation.navigate(values.screenJobTypePicker, {
       currentType: this.state.type,
       types: this.state.types,
       onSelectType: this.pickType.bind(this)
@@ -247,8 +420,14 @@ class MaintenanceRequest extends Component {
       }],
       submitting: false,
       success: false,
-      fail: false
-    });
+      fail: false,
+      customFields: [],
+      customFieldImages: {},
+      isDateTimePickerVisible: false,
+      popUpType: 'date',
+      dateFieldId: null,
+      imageFieldId: null
+    }, () => this.pickType(this.state.type));
   }
   getJobTypes() {
     const self = this;
@@ -259,20 +438,38 @@ class MaintenanceRequest extends Component {
       self.getDefaultJob();
     }).catch(() => {});
   }
-  getDefaultJob() {
-    if (this.state.types.length !== 0 && this.state.jobId == null) {
-      this.setState({
-        type: this.state.types[0].typeName
-      });
-    }
-  }
   pickType(type) {
+    const {
+      types
+    } = this.state;
+    const selected = types.find(t => t.typeName === type) || {};
     this.setState({
-      type
+      type,
+      customFields: selected.hasCustomFields && selected.customFields.length > 0 ? _.cloneDeep(selected.customFields) : []
     });
   }
+  getDefaultJob() {
+    const {
+      types,
+      jobId
+    } = this.state;
+    if (types.length !== 0 && jobId == null) {
+      const defaultType = types[0];
+      this.pickType(defaultType.typeName);
+    }
+  }
   submitRequest() {
-    if (this.state.submitting || !this.props.connected) {
+    const {
+      customFields,
+      submitting,
+      uploadingImage,
+      title,
+      roomNumber,
+      isHome,
+      times
+    } = this.state;
+    const hasCustomFields = customFields && customFields.length > 0;
+    if (submitting || !this.props.connected) {
       if (!this.props.connected) {
         this.setState({
           error: {
@@ -282,25 +479,41 @@ class MaintenanceRequest extends Component {
       }
       return;
     }
-    if (this.state.uploadingImage) {
-      return;
-    }
+    if (uploadingImage) return;
     this.setState({
       error: null,
       showError: false
     });
-    if (this.state.title.length === 0 || !this.state.roomNumber || this.state.roomNumber.length === 0) {
-      this.setState({
-        showError: true
+    if (title.length === 0 || !roomNumber || roomNumber.length === 0) {
+      console.log('submitRequest - error', {
+        title,
+        roomNumber
       });
-      return;
-    }
-    if (this.state.isHome && this.state.times.length < 2) {
       this.setState({
         showError: true
       });
       return;
     }
+    if (hasCustomFields) {
+      if (!this.validateCustomFields()) {
+        console.log('submitRequest - custom fields error');
+        this.setState({
+          showError: true
+        });
+        return;
+      }
+    } else {
+      if (isHome && times.length < 2) {
+        console.log('submitRequest - error', {
+          isHome,
+          times
+        });
+        this.setState({
+          showError: true
+        });
+        return;
+      }
+    }
     this.submit();
   }
   renderUploadMenu() {
@@ -323,14 +536,15 @@ class MaintenanceRequest extends Component {
       hideLibrary: true
     });
   }
-  renderImage(item, index) {
+  renderImage(item, index, fieldId = null) {
     const isVideoUrl = Helper.isVideo(item.url);
+    const imagesList = this.getImages(fieldId);
     if (item.add) {
       return /*#__PURE__*/React.createElement(TouchableOpacity, {
         activeOpacity: 0.8,
-        onPress: this.showUploadMenu
+        onPress: () => this.showUploadMenu(fieldId)
       }, /*#__PURE__*/React.createElement(View, {
-        style: [styles.imageContainer, this.state.images.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
+        style: [styles.imageContainer, imagesList.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
           marginLeft: 0
         }, index > 2 && {
           marginTop: 8
@@ -344,7 +558,7 @@ class MaintenanceRequest extends Component {
       }))));
     }
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles.imageContainer, this.state.images.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
+      style: [styles.imageContainer, imagesList.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
         marginLeft: 0
       }, index > 2 && {
         marginTop: 8
@@ -366,7 +580,7 @@ class MaintenanceRequest extends Component {
       iconStyle: styles.imageControlIcon
     }))), /*#__PURE__*/React.createElement(TouchableOpacity, {
       style: styles.removeImage,
-      onPress: this.removeImage.bind(this, index)
+      onPress: () => this.removeImage(index, fieldId)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "remove",
       type: "font-awesome",
@@ -385,24 +599,196 @@ class MaintenanceRequest extends Component {
       style: styles.requestSuccess
     }, "Your request has been submitted. Thank you."));
   }
-  renderImageList() {
+  renderImageList(fieldId = null) {
+    const imagesList = this.getImages(fieldId);
     return /*#__PURE__*/React.createElement(View, {
       style: styles.imageSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: [styles.imageListContainer, this.state.images.length < 2 && styles.imageListContainerEmpty]
+      style: [styles.imageListContainer, imagesList.length < 2 && styles.imageListContainerEmpty]
     }, /*#__PURE__*/React.createElement(FlatList, {
       keyboardShouldPersistTaps: "always",
       enableEmptySections: true,
-      data: this.state.images,
+      data: imagesList,
       renderItem: ({
         item,
         index
-      }) => this.renderImage(item, index),
+      }) => this.renderImage(item, index, fieldId),
       keyExtractor: (item, index) => index,
       numColumns: 3
     })));
   }
+  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';
+    } else {
+      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,
+      label: field.label,
+      sectionStyle: sectionStyle,
+      isValid: () => this.isFieldValid(field, fieldId),
+      required: field.mandatory,
+      showError: this.state.showError,
+      errorText: errorText
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.dateContainer
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.dateFieldButton,
+      onPress: () => this.onOpenDatePicker(field, fieldId)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.dateFieldContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.dateText
+    }, displayText || placeHolder), /*#__PURE__*/React.createElement(Icon, {
+      type: "font-awesome",
+      name: icon,
+      iconStyle: styles.dateIcon
+    }))), displayText ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.dateClearButton,
+      onPress: () => this.onClearDate(fieldId)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "font-awesome",
+      name: "times",
+      iconStyle: styles.removeIcon
+    })) : null));
+  }
+  renderField(field, fieldId) {
+    const sectionStyle = {
+      marginTop: fieldId === 0 ? 24 : 0,
+      marginBottom: 24
+    };
+    switch (field.type) {
+      case 'yn':
+        return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
+          key: fieldId,
+          label: field.label,
+          sectionStyle: sectionStyle,
+          inputType: "toggle",
+          value: field.answer,
+          onChange: answer => this.onChangeToggleAnswer(fieldId, answer),
+          isValid: () => this.isFieldValid(field, fieldId),
+          showError: this.state.showError,
+          required: field.mandatory
+        });
+      case 'multichoice':
+        return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
+          key: fieldId,
+          label: field.label,
+          sectionStyle: sectionStyle,
+          inputType: "radio",
+          value: field.answer,
+          onChange: answer => this.onChangeToggleAnswer(fieldId, answer),
+          options: field.values.map(o => {
+            return {
+              Label: o,
+              Value: o
+            };
+          }),
+          isValid: () => this.isFieldValid(field, fieldId),
+          showError: this.state.showError,
+          required: field.mandatory
+        });
+      case 'checkbox':
+        return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
+          key: fieldId,
+          label: field.label,
+          sectionStyle: sectionStyle,
+          isValid: () => this.isFieldValid(field, fieldId),
+          showError: this.state.showError,
+          required: field.mandatory
+        }, field.values.map((o, i) => {
+          const isActive = field.answer && _.includes(field.answer, o);
+          return /*#__PURE__*/React.createElement(TouchableOpacity, {
+            onPress: () => this.onChangeCheckboxAnswer(fieldId, o),
+            key: i,
+            style: styles.multiChoiceOption,
+            hitSlop: {
+              top: 8,
+              left: 8,
+              bottom: 8,
+              right: 8
+            }
+          }, isActive ? /*#__PURE__*/React.createElement(Components.TickIcon, {
+            style: styles.tick,
+            size: 20,
+            color: this.props.colourBrandingMain
+          }) : /*#__PURE__*/React.createElement(View, {
+            style: styles.unticked
+          }), /*#__PURE__*/React.createElement(Text, {
+            style: styles.multiChoiceText
+          }, o));
+        }));
+      case 'text':
+      case 'email':
+      case 'phone':
+        return /*#__PURE__*/React.createElement(Components.GenericInputSection, {
+          key: fieldId,
+          label: field.label,
+          placeholder: field.placeHolder,
+          value: field.answer,
+          onChangeText: val => this.onChangeAnswer(fieldId, val),
+          editable: true,
+          squaredCorners: true,
+          isValid: () => this.isFieldValid(field, fieldId),
+          showError: this.state.showError,
+          errorText: field.type === 'email' ? 'Not a valid email' : undefined,
+          required: field.mandatory,
+          sectionStyle: sectionStyle,
+          autoCapitalize: "sentences",
+          keyboardType: this.keyboardTypes[field.type]
+        });
+      case 'staticTitle':
+        return /*#__PURE__*/React.createElement(Text, {
+          key: fieldId,
+          style: [styles.staticTitle, {
+            color: this.props.colourBrandingMain
+          }, sectionStyle]
+        }, field.label);
+      case 'staticText':
+        return /*#__PURE__*/React.createElement(View, {
+          key: fieldId,
+          style: [styles.staticText, sectionStyle]
+        }, Helper.toParagraphed(field.label, styles.staticText));
+      case 'date':
+      case 'time':
+        return this.renderDateField(field, fieldId, sectionStyle);
+      case 'image':
+        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.renderImageList(fieldId));
+      default:
+        return null;
+    }
+  }
+  renderCustomFields() {
+    const {
+      customFields
+    } = this.state;
+    if (!customFields || customFields.length === 0) return null;
+    return /*#__PURE__*/React.createElement(Components.FormCard, {
+      style: {
+        marginTop: 16
+      }
+    }, customFields.map((field, i) => this.renderField(field, i)));
+  }
   renderForm() {
+    const {
+      customFields
+    } = this.state;
+    const hasCustomFields = customFields && customFields.length > 0;
     return /*#__PURE__*/React.createElement(View, {
       style: {
         flex: 1
@@ -464,7 +850,7 @@ class MaintenanceRequest extends Component {
       },
       required: true,
       errorText: "Please provide your address.",
-      showError: this.state.showError && this.state.roomNumber && this.state.roomNumber.length < 2
+      showError: this.state.showError && (!this.state.roomNumber || this.state.roomNumber.length < 2)
     })), /*#__PURE__*/React.createElement(Components.FormCard, {
       style: {
         marginTop: 16,
@@ -493,7 +879,7 @@ class MaintenanceRequest extends Component {
         fontSize: 20,
         color: this.props.colourBrandingMain
       }]
-    })))), /*#__PURE__*/React.createElement(Components.FormCard, {
+    })))), hasCustomFields ? this.renderCustomFields() : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Components.FormCard, {
       style: {
         marginTop: 16
       }
@@ -576,7 +962,7 @@ class MaintenanceRequest extends Component {
       autoCorrect: true,
       multiline: true,
       autoGrow: true
-    })), this.renderImageList())));
+    })), this.renderImageList()))));
   }
   renderRegisterConfirmation() {
     return /*#__PURE__*/React.createElement(Components.ConfirmationPopup, {
@@ -601,6 +987,12 @@ class MaintenanceRequest extends Component {
     });
   }
   render() {
+    const {
+      submitting,
+      success,
+      isDateTimePickerVisible,
+      popUpType
+    } = this.state;
     return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
       behavior: Platform.OS === 'ios' && 'padding',
       style: styles.viewContainer
@@ -609,11 +1001,19 @@ class MaintenanceRequest extends Component {
     }, /*#__PURE__*/React.createElement(Components.Header, {
       leftIcon: "angle-left",
       onPressLeft: this.onPressBack.bind(this),
-      text: Config.env.strings.MAINTENANCE,
-      rightText: this.state.submitting || this.state.success ? null : 'Done',
+      text: this.props.strings[`${values.featureKey}_textFeatureTitle`] || values.textFeatureTitle,
+      rightText: submitting || success ? null : 'Done',
       onPressRight: this.submitRequest.bind(this),
       absoluteRight: true
-    }), this.renderForm()), this.renderRegisterConfirmation(), this.renderVideoPlayerPopup());
+    }), this.renderForm()), this.renderRegisterConfirmation(), this.renderVideoPlayerPopup(), /*#__PURE__*/React.createElement(DateTimePicker, {
+      isVisible: isDateTimePickerVisible,
+      onConfirm: this.onDateSelected,
+      onCancel: () => this.setState({
+        isDateTimePickerVisible: false
+      }),
+      mode: popUpType,
+      headerTextIOS: `Pick a ${popUpType}`
+    }));
   }
 }
 const styles = {
@@ -715,9 +1115,76 @@ const styles = {
     height: 40,
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  staticTitle: {
+    fontSize: 20,
+    fontFamily: 'sf-semibold',
+    color: Colours.TEXT_DARKEST
+  },
+  staticText: {
+    fontSize: 17,
+    fontFamily: 'sf-regular',
+    color: Colours.TEXT_DARKEST,
+    lineHeight: 24
+  },
+  multiChoiceOption: {
+    marginTop: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 20
+  },
+  multiChoiceText: {
+    flex: 1,
+    fontFamily: 'sf-medium',
+    fontSize: 14,
+    color: Colours.TEXT_DARK
+  },
+  tick: {
+    marginRight: 10,
+    borderRadius: 4
+  },
+  unticked: {
+    marginRight: 10,
+    width: 20,
+    height: 20,
+    borderColor: Colours.LINEGREY,
+    borderWidth: 1,
+    borderRadius: 4
+  },
+  dateContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  dateFieldButton: {
+    flex: 1
+  },
+  dateFieldContainer: {
+    flexDirection: 'row',
+    borderRadius: 2,
+    backgroundColor: '#ebeff2',
+    padding: 8,
+    marginTop: 8
+  },
+  dateText: {
+    flex: 1,
+    fontFamily: 'sf-regular',
+    fontSize: 16,
+    color: '#65686D'
+  },
+  dateIcon: {
+    fontSize: 18,
+    color: Colours.TEXT_BLUEGREY
+  },
+  dateClearButton: {
+    paddingLeft: 12
+  },
+  removeIcon: {
+    fontSize: 26,
+    color: Colours.TEXT_BLUEGREY
   }
 };
 const mapStateToProps = state => {
+  var _state$strings;
   const {
     user,
     connection
@@ -739,7 +1206,8 @@ const mapStateToProps = state => {
     site,
     unit,
     phoneNumber,
-    colourBrandingMain: Colours.getMainBrandingColourFromState(state)
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    strings: ((_state$strings = state.strings) === null || _state$strings === void 0 ? void 0 : _state$strings.config) || {}
   };
 };
 export default connect(mapStateToProps, {