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

package/dist/module/screens/ServiceRequest.js

@@ -0,0 +1,1243 @@
+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;
+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 {
+        imageFieldId
+      } = this.state;
+      const imagesUpdate = this.getImages(imageFieldId);
+      imagesUpdate.splice(imagesUpdate.length - 1, 0, {
+        uploading: true,
+        uploadProgress: '0%',
+        uploadUri,
+        imageUri,
+        allowRetry: true
+      });
+      this.setImages(imagesUpdate, imageFieldId);
+    });
+    _defineProperty(this, "onUploadProgress", progress => {
+      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.setImages(imagesUpdate, imageFieldId);
+    });
+    _defineProperty(this, "onUploadSuccess", 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.thumbNailExists = false;
+          img.thumbNailUrl = Helper.getThumb300(img.url);
+          img.allowRetry = true;
+        }
+      });
+      this.setImages(imagesUpdate, imageFieldId, () => this.waitForThumbnails());
+    });
+    _defineProperty(this, "onUploadFailed", uploadUri => {
+      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.setImages(imagesUpdate, imageFieldId);
+    });
+    _defineProperty(this, "onLibrarySelected", uri => {
+      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.setImages(imagesUpdate, imageFieldId);
+    });
+    _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 () => {
+      this.setState({
+        submitting: true
+      });
+      let description = this.state.description;
+      if (this.state.isHome) {
+        description = description + `. --  Times Available: ${this.state.times}`;
+      }
+      setTimeout(() => {
+        this.scrollContainer.scrollTo({
+          y: 0
+        });
+      }, 100);
+      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, updatedCustomFields).then(res => {
+        if (res.data.success) {
+          this.refreshRequest(res.data.searchResult);
+          if (this.props.onSubmissionSuccess) this.props.onSubmissionSuccess(res.data);
+          this.setState({
+            submitting: false,
+            success: true,
+            confirmationToShow: true
+          });
+        } else {
+          this.setState({
+            submitting: false
+          });
+        }
+      }).catch(err => {
+        console.log('maintenance submission fail.');
+        console.log(err);
+        this.setState({
+          submitting: false
+        });
+      });
+    });
+    _defineProperty(this, "refreshRequest", async id => {
+      try {
+        const job = await maintenanceActions.getJob(Helper.getSite(this.props.site), id);
+        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 {
+          imageFieldId
+        } = this.state;
+        const imagesList = this.getImages(imageFieldId);
+        const imagesUpdate = [];
+        await Promise.all(imagesList.map(image => {
+          return new Promise(async resolve => {
+            const newImage = {
+              ...image
+            };
+            imagesUpdate.push(newImage);
+            if (newImage.url && !newImage.thumbNailExists) {
+              newImage.uploading = false;
+              newImage.allowRetry = false;
+              newImage.thumbNailExists = await Helper.imageExists(newImage.thumbNailUrl);
+              resolve(newImage.thumbNailExists);
+            }
+            resolve(true);
+          });
+        }));
+        const thumbnailsExist = imagesUpdate.every(image => !image.url || image.thumbNailExists);
+        if (thumbnailsExist) {
+          clearInterval(this.checkThumb);
+          this.checkThumb = null;
+          this.setImages(imagesUpdate, imageFieldId);
+        }
+      }, 2000);
+    });
+    _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 = '';
+      this.setState({
+        showFullscreenVideo: url.length > 0,
+        currentVideoUrl: url
+      });
+    });
+    this.state = {
+      submitting: false,
+      success: false,
+      fail: false,
+      error: null,
+      showError: false,
+      loadingTypes: values.forceCustomFields,
+      userName: '',
+      roomNumber: '',
+      phone: '',
+      title: '',
+      description: '',
+      times: '',
+      type: 'General',
+      uploadingImage: false,
+      images: [{
+        add: true
+      }],
+      showFullscreenVideo: false,
+      currentVideoUrl: '',
+      isHome: false,
+      types: [],
+      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') {
+      this.setState({
+        userName: this.props.displayName,
+        roomNumber: this.props.unit,
+        phone: !_.isEmpty(this.props.phoneNumber) ? this.props.phoneNumber : ''
+      });
+    }
+    this.getJobTypes();
+  }
+  componentWillUnmount() {
+    clearInterval(this.checkThumb);
+  }
+  onPressBack() {
+    Services.navigation.goBack();
+  }
+  onPressType() {
+    Services.navigation.navigate(values.screenJobTypePicker, {
+      currentType: this.state.type,
+      types: this.state.types,
+      onSelectType: this.pickType.bind(this)
+    });
+  }
+  onCloseConfirmationPopup() {
+    this.setState({
+      confirmationToShow: false
+    });
+    Services.navigation.goBack();
+    this.props.onBack && this.props.onBack();
+  }
+  onConfirmationReset() {
+    this.setState({
+      confirmationToShow: false,
+      title: '',
+      description: '',
+      times: '',
+      isHome: false,
+      uploadingImage: false,
+      images: [{
+        add: true
+      }],
+      submitting: false,
+      success: false,
+      fail: false,
+      customFields: [],
+      customFieldImages: {},
+      isDateTimePickerVisible: false,
+      popUpType: 'date',
+      dateFieldId: null,
+      imageFieldId: null
+    }, () => this.pickType(this.state.type));
+  }
+  getJobTypes() {
+    maintenanceActions.getJobTypes(Helper.getSite(this.props.site)).then(res => {
+      this.setState({
+        types: res.data
+      });
+      console.log(res.data);
+      this.getDefaultJob();
+    }).catch(() => {});
+  }
+  pickType(type) {
+    const {
+      types
+    } = this.state;
+    const selected = types.find(t => t.typeName === type) || {};
+    if (values.forceCustomFields && !selected.hasCustomFields) {
+      console.log(selected);
+      this.setState({
+        type,
+        customFields: [],
+        noType: true
+      });
+      return;
+    }
+    this.setState({
+      type,
+      customFields: selected.hasCustomFields && selected.customFields.length > 0 ? _.cloneDeep(selected.customFields) : [],
+      loadingTypes: false
+    });
+  }
+  getDefaultJob() {
+    const {
+      types,
+      jobId
+    } = this.state;
+    if (types.length !== 0 && jobId == null) {
+      const defaultType = types[0];
+      this.pickType(defaultType.typeName);
+    }
+  }
+  submitRequest() {
+    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: {
+            message: 'No internet connection detected'
+          }
+        });
+      }
+      return;
+    }
+    if (uploadingImage) return;
+    this.setState({
+      error: null,
+      showError: false
+    });
+    if (title.length === 0 || !roomNumber || roomNumber.length === 0) {
+      console.log('submitRequest - error', {
+        title,
+        roomNumber
+      });
+      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() {
+    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,
+      size: {
+        width: 1400
+      },
+      quality: 0.8,
+      fileName: 'serviceImage',
+      popupTitle: 'Upload Image',
+      userId: this.props.uid,
+      allowsEditing: false,
+      multiple: true,
+      hideLibrary: true
+    });
+  }
+  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(fieldId)
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles.imageContainer, imagesList.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
+          marginLeft: 0
+        }, index > 2 && {
+          marginTop: 8
+        }]
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.imageCircle
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "camera",
+        type: "font-awesome",
+        iconStyle: styles.addImageIcon
+      }))));
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.imageContainer, imagesList.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
+        marginLeft: 0
+      }, index > 2 && {
+        marginTop: 8
+      }]
+    }, item.uploading ? /*#__PURE__*/React.createElement(Components.ImageUploadProgress, {
+      uploader: this.imageUploader,
+      image: item,
+      color: this.props.colourBrandingMain
+    }) : /*#__PURE__*/React.createElement(ImageBackground, {
+      style: styles.imageBackground,
+      source: Helper.getImageSource(item.thumbNailExists ? item.thumbNailUrl : item.url)
+    }, isVideoUrl && /*#__PURE__*/React.createElement(View, {
+      style: styles.imagePlayContainer
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.toggleFullscreenVideo.bind(this, item.url)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "play",
+      type: "font-awesome",
+      iconStyle: styles.imageControlIcon
+    }))), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.removeImage,
+      onPress: () => this.removeImage(index, fieldId)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "remove",
+      type: "font-awesome",
+      iconStyle: styles.imageControlIcon,
+      style: styles.removeImage
+    }))));
+  }
+  renderSuccess() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        padding: 16,
+        flex: 1,
+        backgroundColor: '#fff'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.requestSuccess
+    }, "Your request has been submitted. Thank you."));
+  }
+  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",
+      enableEmptySections: true,
+      data: imagesList,
+      renderItem: ({
+        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,
+      loadingTypes
+    } = this.state;
+    const hasCustomFields = customFields && customFields.length > 0;
+    if (loadingTypes) {
+      return /*#__PURE__*/React.createElement(Components.Spinner, null);
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(ScrollView, {
+      keyboardShouldPersistTaps: "always",
+      style: {
+        flex: 1
+      },
+      ref: ref => this.scrollContainer = ref
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        paddingBottom: 2
+      }
+    }, /*#__PURE__*/React.createElement(Components.LoadingIndicator, {
+      visible: this.state.submitting
+    }), this.state.error && /*#__PURE__*/React.createElement(Text, {
+      style: styles.errorText
+    }, this.state.error), /*#__PURE__*/React.createElement(Components.FormCard, {
+      style: {
+        marginTop: 16
+      }
+    }, /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Name',
+      placeholder: 'Enter your name',
+      textValue: this.state.userName,
+      onChangeText: userName => this.setState({
+        userName
+      }),
+      editable: this.props.userType === 'KIOSK' && this.state.submitting === false,
+      isValid: () => {
+        return this.state.userName.length > 1;
+      },
+      required: true,
+      errorText: "Please enter your name.",
+      showError: this.state.showError && this.state.userName.length < 2,
+      hasUnderline: true
+    }), /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      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'
+    }), /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Address',
+      placeholder: 'Enter your address',
+      textValue: this.state.roomNumber,
+      onChangeText: roomNumber => this.setState({
+        roomNumber
+      }),
+      editable: this.state.submitting === false,
+      hasUnderline: true,
+      isValid: () => {
+        return this.state.roomNumber && this.state.roomNumber.length > 1;
+      },
+      required: true,
+      errorText: "Please provide your address.",
+      showError: this.state.showError && (!this.state.roomNumber || this.state.roomNumber.length < 2)
+    })), /*#__PURE__*/React.createElement(Components.FormCard, {
+      style: {
+        marginTop: 16,
+        paddingHorizontal: 24,
+        paddingVertical: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.sectionTitle
+    }, Config.env.strings.JOB_TYPE), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.onPressType.bind(this)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.sectionTitle, {
+        color: this.props.colourBrandingMain,
+        marginRight: 16
+      }]
+    }, this.state.type), /*#__PURE__*/React.createElement(Icon, {
+      name: "angle-right",
+      type: "font-awesome",
+      iconStyle: [styles.sectionTitle, {
+        fontSize: 20,
+        color: this.props.colourBrandingMain
+      }]
+    })))), hasCustomFields ? this.renderCustomFields() : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Components.FormCard, {
+      style: {
+        marginTop: 16
+      }
+    }, /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Title',
+      placeholder: 'Enter a title for your request',
+      textValue: this.state.title,
+      onChangeText: title => this.setState({
+        title
+      }),
+      editable: this.state.submitting === false,
+      hasUnderline: true,
+      isValid: () => {
+        return this.state.title.length > 1;
+      },
+      required: true,
+      errorText: "Please provide a title.",
+      showError: this.state.showError && this.state.title.length < 2,
+      autoCorrect: true,
+      multiline: true,
+      autoGrow: true
+    }), /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Description',
+      placeholder: 'Describe your request here in detail',
+      textValue: this.state.description,
+      onChangeText: description => this.setState({
+        description
+      }),
+      editable: this.state.submitting === false,
+      hasUnderline: true,
+      autoCorrect: true,
+      multiline: true,
+      autoGrow: true
+    })), /*#__PURE__*/React.createElement(Components.FormCard, {
+      style: {
+        marginTop: 16,
+        paddingHorizontal: 24
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width: '100%',
+        paddingVertical: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        position: 'relative'
+      }, this.state.isHome && {
+        borderBottomWidth: 1,
+        borderBottomColor: Colours.LINEGREY
+      }]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.sectionTitle
+    }, Config.env.strings.MAINTENANCE_HOME), /*#__PURE__*/React.createElement(Switch, {
+      value: this.state.isHome,
+      disabled: this.state.submitting,
+      onValueChange: value => this.setState({
+        isHome: value
+      }),
+      trackColor: {
+        false: '#ddd',
+        true: this.props.colourBrandingMain
+      },
+      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.',
+      textValue: this.state.times,
+      onChangeText: times => this.setState({
+        times
+      }),
+      editable: this.state.submitting === false,
+      hasUnderline: true,
+      isValid: () => {
+        return this.state.times.length > 1;
+      },
+      required: true,
+      errorText: "Please provide available times.",
+      showError: this.state.showError && this.state.isHome && this.state.times.length < 2,
+      minHeight: 40,
+      autoCorrect: true,
+      multiline: true,
+      autoGrow: true
+    })), this.renderImageList()))));
+  }
+  renderRegisterConfirmation() {
+    return /*#__PURE__*/React.createElement(Components.ConfirmationPopup, {
+      confirmText: `${values.textEntityName} submitted`,
+      repeatText: 'Submit another',
+      visible: this.state.confirmationToShow,
+      onClose: this.onCloseConfirmationPopup.bind(this),
+      onPressAction: this.onConfirmationReset.bind(this)
+    });
+  }
+  renderVideoPlayerPopup() {
+    const {
+      showFullscreenVideo,
+      currentVideoUrl
+    } = this.state;
+    if (!currentVideoUrl) return;
+    return /*#__PURE__*/React.createElement(Components.VideoPopup, {
+      uri: currentVideoUrl,
+      visible: showFullscreenVideo,
+      showFullscreenButton: false,
+      onClose: this.toggleFullscreenVideo
+    });
+  }
+  renderNoType() {
+    if (!this.state.noType) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Components.WarningPopup, {
+      confirmText: 'No forms are available',
+      infoText: 'Check back later for forms.',
+      visible: this.state.noType,
+      onClose: this.onPressBack.bind(this),
+      padHorizontal: true
+    });
+  }
+  render() {
+    const {
+      submitting,
+      success,
+      isDateTimePickerVisible,
+      popUpType
+    } = this.state;
+    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+      behavior: Platform.OS === 'ios' && 'padding',
+      style: styles.viewContainer
+    }, this.renderUploadMenu(), /*#__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',
+      onPressRight: this.submitRequest.bind(this),
+      absoluteRight: true
+    }), this.renderForm()), this.renderRegisterConfirmation(), this.renderVideoPlayerPopup(), this.renderNoType(), /*#__PURE__*/React.createElement(DateTimePicker, {
+      isVisible: isDateTimePickerVisible,
+      onConfirm: this.onDateSelected,
+      onCancel: () => this.setState({
+        isDateTimePickerVisible: false
+      }),
+      mode: popUpType,
+      headerTextIOS: `Pick a ${popUpType}`
+    }));
+  }
+}
+const styles = {
+  viewContainer: {
+    flex: 1,
+    backgroundColor: '#fff'
+  },
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: '#f0f0f5'
+  },
+  errorText: {
+    fontFamily: 'sf-regular',
+    color: Colours.COLOUR_TANGERINE,
+    fontSize: 16
+  },
+  requestSuccess: {
+    fontFamily: 'sf-regular',
+    color: Colours.TEXT_DARK,
+    fontSize: 17,
+    textAlign: 'center'
+  },
+  sectionTitle: {
+    fontFamily: 'sf-regular',
+    fontSize: 17,
+    color: Colours.TEXT_DARK
+  },
+  imageListContainer: {
+    marginTop: 8,
+    padding: 8,
+    flexDirection: 'row',
+    backgroundColor: Colours.BOXGREY,
+    minHeight: 106
+  },
+  imageListContainerEmpty: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  imageContainer: {
+    width: PHOTO_SIZE,
+    height: PHOTO_SIZE,
+    borderStyle: 'dashed',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colours.LINEGREY,
+    borderRadius: 4,
+    marginLeft: 8
+  },
+  imageContainerNotEmpty: {
+    borderWidth: 1,
+    borderColor: Colours.LINEGREY,
+    backgroundColor: '#fff',
+    borderStyle: 'dashed'
+  },
+  imageBackground: {
+    flex: 1,
+    height: '100%',
+    width: '100%',
+    borderRadius: 4
+  },
+  imageCircle: {
+    width: 90,
+    height: 90,
+    borderRadius: 45,
+    backgroundColor: Colours.PINKISH_GREY,
+    justifyContent: 'center'
+  },
+  addImageIcon: {
+    color: '#fff',
+    fontSize: 32
+  },
+  imagePlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  imageControlIcon: {
+    color: '#fff',
+    fontSize: 20,
+    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowOffset: {
+      width: 2,
+      height: 2
+    }
+  },
+  removeImage: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 4,
+    width: 40,
+    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
+  } = state;
+  const {
+    displayName,
+    profilePic,
+    uid,
+    site,
+    unit,
+    phoneNumber
+  } = user;
+  return {
+    connected: connection.connected,
+    userType: user.type,
+    displayName,
+    profilePic,
+    uid,
+    site,
+    unit,
+    phoneNumber,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    strings: ((_state$strings = state.strings) === null || _state$strings === void 0 ? void 0 : _state$strings.config) || {}
+  };
+};
+export default connect(mapStateToProps, {
+  jobAdded
+})(MaintenanceRequest);
+//# sourceMappingURL=ServiceRequest.js.map