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

package/src/screens/ServiceRequest.js

@@ -0,0 +1,1219 @@
+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);
+    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);
+  }
+
+  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);
+  };
+
+  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);
+  };
+
+  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);
+  };
+
+  onOpenDatePicker = (field, fieldId) => {
+    Keyboard.dismiss();
+    this.setState({ dateFieldId: fieldId, popUpType: field.type, isDateTimePickerVisible: true });
+  };
+
+  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);
+  };
+
+  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);
+  };
+
+  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);
+  };
+
+  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);
+  };
+
+  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());
+  };
+
+  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);
+  };
+
+  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);
+  };
+
+  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),
+    );
+  }
+
+  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;
+  };
+
+  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);
+    }
+  }
+
+  showUploadMenu = fieldId => {
+    Keyboard.dismiss();
+    if (this.state.uploadingImage || this.state.submitting) {
+      return;
+    }
+    if (fieldId) this.setState({ imageFieldId: fieldId });
+    this.imageUploader.showUploadMenu();
+  };
+
+  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,
+        });
+      });
+  };
+
+  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);
+    }
+  };
+
+  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;
+    });
+  };
+
+  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();
+  }
+
+  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;
+  };
+
+  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);
+  };
+
+  getImageUrls = (fieldId = null) => {
+    const imagesList = this.getImages(fieldId);
+    return _.filter(imagesList, img => {
+      return !img.uploading && !img.add;
+    }).map(img => {
+      return img.url;
+    });
+  };
+
+  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);
+  };
+
+  removeImage = (index, fieldId) => {
+    const imagesUpdate = this.getImages(fieldId);
+    imagesUpdate.splice(index, 1);
+
+    this.setImages(imagesUpdate, fieldId);
+  };
+
+  toggleFullscreenVideo = url => {
+    if (typeof url !== 'string') url = '';
+    this.setState({ showFullscreenVideo: url.length > 0, currentVideoUrl: url });
+  };
+
+  renderUploadMenu() {
+    return (
+      <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
+        hideLibrary
+      />
+    );
+  }
+
+  renderImage(item, index, fieldId = null) {
+    const isVideoUrl = Helper.isVideo(item.url);
+    const imagesList = this.getImages(fieldId);
+
+    if (item.add) {
+      return (
+        <TouchableOpacity activeOpacity={0.8} onPress={() => this.showUploadMenu(fieldId)}>
+          <View
+            style={[
+              styles.imageContainer,
+              imagesList.length > 1 && styles.imageContainerNotEmpty,
+              index % 3 === 0 && { marginLeft: 0 },
+              index > 2 && { marginTop: 8 },
+            ]}
+          >
+            <View style={styles.imageCircle}>
+              <Icon name="camera" type="font-awesome" iconStyle={styles.addImageIcon} />
+            </View>
+          </View>
+        </TouchableOpacity>
+      );
+    }
+    return (
+      <View
+        style={[
+          styles.imageContainer,
+          imagesList.length > 1 && styles.imageContainerNotEmpty,
+          index % 3 === 0 && { marginLeft: 0 },
+          index > 2 && { marginTop: 8 },
+        ]}
+      >
+        {item.uploading ? (
+          <Components.ImageUploadProgress uploader={this.imageUploader} image={item} color={this.props.colourBrandingMain} />
+        ) : (
+          <ImageBackground
+            style={styles.imageBackground}
+            source={Helper.getImageSource(item.thumbNailExists ? item.thumbNailUrl : item.url)}
+          >
+            {isVideoUrl && (
+              <View style={styles.imagePlayContainer}>
+                <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, item.url)}>
+                  <Icon name="play" type="font-awesome" iconStyle={styles.imageControlIcon} />
+                </TouchableOpacity>
+              </View>
+            )}
+            <TouchableOpacity style={styles.removeImage} onPress={() => this.removeImage(index, fieldId)}>
+              <Icon name="remove" type="font-awesome" iconStyle={styles.imageControlIcon} style={styles.removeImage} />
+            </TouchableOpacity>
+          </ImageBackground>
+        )}
+      </View>
+    );
+  }
+
+  renderSuccess() {
+    return (
+      <View style={{ padding: 16, flex: 1, backgroundColor: '#fff' }}>
+        <Text style={styles.requestSuccess}>Your request has been submitted. Thank you.</Text>
+      </View>
+    );
+  }
+
+  renderImageList(fieldId = null) {
+    const imagesList = this.getImages(fieldId);
+    return (
+      <View style={styles.imageSection}>
+        <View style={[styles.imageListContainer, imagesList.length < 2 && styles.imageListContainerEmpty]}>
+          <FlatList
+            keyboardShouldPersistTaps="always"
+            enableEmptySections
+            data={imagesList}
+            renderItem={({ item, index }) => this.renderImage(item, index, fieldId)}
+            keyExtractor={(item, index) => index}
+            numColumns={3}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  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 (
+      <Components.GenericInputSection
+        key={fieldId}
+        label={field.label}
+        sectionStyle={sectionStyle}
+        isValid={() => this.isFieldValid(field, fieldId)}
+        required={field.mandatory}
+        showError={this.state.showError}
+        errorText={errorText}
+      >
+        <View style={styles.dateContainer}>
+          <TouchableOpacity style={styles.dateFieldButton} onPress={() => this.onOpenDatePicker(field, fieldId)}>
+            <View style={styles.dateFieldContainer}>
+              <Text style={styles.dateText}>{displayText || placeHolder}</Text>
+              <Icon type="font-awesome" name={icon} iconStyle={styles.dateIcon} />
+            </View>
+          </TouchableOpacity>
+          {displayText ? (
+            <TouchableOpacity style={styles.dateClearButton} onPress={() => this.onClearDate(fieldId)}>
+              <Icon type="font-awesome" name="times" iconStyle={styles.removeIcon} />
+            </TouchableOpacity>
+          ) : null}
+        </View>
+      </Components.GenericInputSection>
+    );
+  }
+
+  renderField(field, fieldId) {
+    const sectionStyle = { marginTop: fieldId === 0 ? 24 : 0, marginBottom: 24 };
+    switch (field.type) {
+      case 'yn':
+        return (
+          <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 (
+          <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 (
+          <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 (
+                <TouchableOpacity
+                  onPress={() => this.onChangeCheckboxAnswer(fieldId, o)}
+                  key={i}
+                  style={styles.multiChoiceOption}
+                  hitSlop={{ top: 8, left: 8, bottom: 8, right: 8 }}
+                >
+                  {isActive ? (
+                    <Components.TickIcon style={styles.tick} size={20} color={this.props.colourBrandingMain} />
+                  ) : (
+                    <View style={styles.unticked} />
+                  )}
+                  <Text style={styles.multiChoiceText}>{o}</Text>
+                </TouchableOpacity>
+              );
+            })}
+          </Components.GenericInputSection>
+        );
+      case 'text':
+      case 'email':
+      case 'phone':
+        return (
+          <Components.GenericInputSection
+            key={fieldId}
+            label={field.label}
+            placeholder={field.placeHolder}
+            value={field.answer}
+            onChangeText={val => this.onChangeAnswer(fieldId, val)}
+            editable
+            squaredCorners
+            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 (
+          <Text key={fieldId} style={[styles.staticTitle, { color: this.props.colourBrandingMain }, sectionStyle]}>
+            {field.label}
+          </Text>
+        );
+      case 'staticText':
+        return (
+          <View key={fieldId} style={[styles.staticText, sectionStyle]}>
+            {Helper.toParagraphed(field.label, styles.staticText)}
+          </View>
+        );
+      case 'date':
+      case 'time':
+        return this.renderDateField(field, fieldId, sectionStyle);
+      case 'image':
+        return (
+          <Components.GenericInputSection
+            key={fieldId}
+            label={field.label}
+            sectionStyle={sectionStyle}
+            isValid={() => this.isFieldValid(field, fieldId)}
+            required={field.mandatory}
+            showError={this.state.showError}
+          >
+            {this.renderImageList(fieldId)}
+          </Components.GenericInputSection>
+        );
+      default:
+        return null;
+    }
+  }
+
+  renderCustomFields() {
+    const { customFields } = this.state;
+    if (!customFields || customFields.length === 0) return null;
+
+    return (
+      <Components.FormCard style={{ marginTop: 16 }}>{customFields.map((field, i) => this.renderField(field, i))}</Components.FormCard>
+    );
+  }
+
+  renderForm() {
+    const { customFields, loadingTypes } = this.state;
+    const hasCustomFields = customFields && customFields.length > 0;
+
+    if (loadingTypes) {
+      return <Components.Spinner />;
+    }
+
+    return (
+      <View style={{ flex: 1 }}>
+        <ScrollView keyboardShouldPersistTaps="always" style={{ flex: 1 }} ref={ref => (this.scrollContainer = ref)}>
+          <View style={{ paddingBottom: 2 }}>
+            <Components.LoadingIndicator visible={this.state.submitting} />
+            {this.state.error && <Text style={styles.errorText}>{this.state.error}</Text>}
+            <Components.FormCard style={{ marginTop: 16 }}>
+              <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
+                errorText="Please enter your name."
+                showError={this.state.showError && this.state.userName.length < 2}
+                hasUnderline
+              />
+              <Components.FormCardSection
+                label={'Contact number'}
+                placeholder={'Enter phone number'}
+                textValue={this.state.phone}
+                onChangeText={phone => this.setState({ phone })}
+                editable={this.state.submitting === false}
+                hasUnderline
+                keyboardType={'phone-pad'}
+              />
+              <Components.FormCardSection
+                label={'Address'}
+                placeholder={'Enter your address'}
+                textValue={this.state.roomNumber}
+                onChangeText={roomNumber => this.setState({ roomNumber })}
+                editable={this.state.submitting === false}
+                hasUnderline
+                isValid={() => {
+                  return this.state.roomNumber && this.state.roomNumber.length > 1;
+                }}
+                required
+                errorText="Please provide your address."
+                showError={this.state.showError && (!this.state.roomNumber || this.state.roomNumber.length < 2)}
+              />
+            </Components.FormCard>
+            <Components.FormCard
+              style={{ marginTop: 16, paddingHorizontal: 24, paddingVertical: 16, flexDirection: 'row', justifyContent: 'space-between' }}
+            >
+              <Text style={styles.sectionTitle}>{Config.env.strings.JOB_TYPE}</Text>
+              <TouchableOpacity onPress={this.onPressType.bind(this)}>
+                <View style={{ flexDirection: 'row' }}>
+                  <Text style={[styles.sectionTitle, { color: this.props.colourBrandingMain, marginRight: 16 }]}>{this.state.type}</Text>
+                  <Icon
+                    name="angle-right"
+                    type="font-awesome"
+                    iconStyle={[styles.sectionTitle, { fontSize: 20, color: this.props.colourBrandingMain }]}
+                  />
+                </View>
+              </TouchableOpacity>
+            </Components.FormCard>
+            {hasCustomFields ? (
+              this.renderCustomFields()
+            ) : (
+              <>
+                <Components.FormCard style={{ marginTop: 16 }}>
+                  <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
+                    isValid={() => {
+                      return this.state.title.length > 1;
+                    }}
+                    required
+                    errorText="Please provide a title."
+                    showError={this.state.showError && this.state.title.length < 2}
+                    autoCorrect
+                    multiline
+                    autoGrow
+                  />
+                  <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
+                    autoCorrect
+                    multiline
+                    autoGrow
+                  />
+                </Components.FormCard>
+                <Components.FormCard style={{ marginTop: 16, paddingHorizontal: 24 }}>
+                  <View
+                    style={[
+                      {
+                        width: '100%',
+                        paddingVertical: 16,
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        position: 'relative',
+                      },
+                      this.state.isHome && { borderBottomWidth: 1, borderBottomColor: Colours.LINEGREY },
+                    ]}
+                  >
+                    <Text style={styles.sectionTitle}>{Config.env.strings.MAINTENANCE_HOME}</Text>
+                    <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}
+                    />
+                  </View>
+                  {this.state.isHome && (
+                    <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
+                      isValid={() => {
+                        return this.state.times.length > 1;
+                      }}
+                      required
+                      errorText="Please provide available times."
+                      showError={this.state.showError && this.state.isHome && this.state.times.length < 2}
+                      minHeight={40}
+                      autoCorrect
+                      multiline
+                      autoGrow
+                    />
+                  )}
+                </Components.FormCard>
+                {this.renderImageList()}
+              </>
+            )}
+          </View>
+        </ScrollView>
+      </View>
+    );
+  }
+
+  renderRegisterConfirmation() {
+    return (
+      <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 (
+      <Components.VideoPopup
+        uri={currentVideoUrl}
+        visible={showFullscreenVideo}
+        showFullscreenButton={false}
+        onClose={this.toggleFullscreenVideo}
+      />
+    );
+  }
+
+  renderNoType() {
+    if (!this.state.noType) {
+      return null;
+    }
+    return (
+      <Components.WarningPopup
+        confirmText={'No forms are available'}
+        infoText={'Check back later for forms.'}
+        visible={this.state.noType}
+        onClose={this.onPressBack.bind(this)}
+        padHorizontal
+      />
+    );
+  }
+
+  render() {
+    const { submitting, success, isDateTimePickerVisible, popUpType } = this.state;
+
+    return (
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' && 'padding'} style={styles.viewContainer}>
+        {this.renderUploadMenu()}
+        <View style={styles.container}>
+          <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
+          />
+          {this.renderForm()}
+        </View>
+        {this.renderRegisterConfirmation()}
+        {this.renderVideoPlayerPopup()}
+        {this.renderNoType()}
+        <DateTimePicker
+          isVisible={isDateTimePickerVisible}
+          onConfirm={this.onDateSelected}
+          onCancel={() => this.setState({ isDateTimePickerVisible: false })}
+          mode={popUpType}
+          headerTextIOS={`Pick a ${popUpType}`}
+        />
+      </KeyboardAvoidingView>
+    );
+  }
+}
+
+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 => {
+  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?.config || {},
+  };
+};
+
+export default connect(mapStateToProps, { jobAdded })(MaintenanceRequest);