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

package/src/screens/ServiceRequest.js

@@ -12,13 +12,16 @@ import {
   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;
 
@@ -55,8 +58,20 @@ class MaintenanceRequest extends Component {
       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() {
@@ -74,9 +89,62 @@ class MaintenanceRequest extends Component {
     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 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,
@@ -84,24 +152,27 @@ class MaintenanceRequest extends Component {
       allowRetry: true,
     });
 
-    this.setState({ images });
+    this.setImages(imagesUpdate, imageFieldId);
   };
 
   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);
   };
 
   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;
@@ -109,12 +180,14 @@ class MaintenanceRequest extends Component {
         img.allowRetry = true;
       }
     });
-    this.setState({ images }, () => this.waitForThumbnails());
+
+    this.setImages(imagesUpdate, imageFieldId, () => this.waitForThumbnails());
   };
 
   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 = '';
@@ -122,12 +195,13 @@ class MaintenanceRequest extends Component {
       }
     });
 
-    this.setState({ images });
+    this.setImages(imagesUpdate, imageFieldId);
   };
 
   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),
@@ -135,7 +209,7 @@ class MaintenanceRequest extends Component {
       thumbNailUrl: Helper.getThumb300(uri),
     });
 
-    this.setState({ images });
+    this.setImages(imagesUpdate, imageFieldId);
   };
 
   onPressBack() {
@@ -143,7 +217,7 @@ class MaintenanceRequest extends Component {
   }
 
   onPressType() {
-    Services.navigation.navigate('jobTypePicker', {
+    Services.navigation.navigate(values.screenJobTypePicker, {
       currentType: this.state.type,
       types: this.state.types,
       onSelectType: this.pickType.bind(this),
@@ -159,24 +233,69 @@ class MaintenanceRequest extends Component {
   }
 
   onConfirmationReset() {
-    this.setState({
-      confirmationToShow: false,
-      title: '',
-      description: '',
-      times: '',
-      isHome: false,
-      uploadingImage: false,
-      images: [
-        {
-          add: true,
-        },
-      ],
-      submitting: false,
-      success: false,
-      fail: false,
-    });
+    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() {
     const self = this;
     maintenanceActions
@@ -190,21 +309,29 @@ class MaintenanceRequest extends Component {
       .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,
+      customFields: selected.hasCustomFields && selected.customFields.length > 0 ? _.cloneDeep(selected.customFields) : [],
+    });
   }
 
-  pickType(type) {
-    this.setState({ type });
+  getDefaultJob() {
+    const { types, jobId } = this.state;
+    if (types.length !== 0 && jobId == null) {
+      const defaultType = types[0];
+      this.pickType(defaultType.typeName);
+    }
   }
 
-  showUploadMenu = () => {
+  showUploadMenu = fieldId => {
     Keyboard.dismiss();
     if (this.state.uploadingImage || this.state.submitting) {
       return;
     }
+    if (fieldId) this.setState({ imageFieldId: fieldId });
     this.imageUploader.showUploadMenu();
   };
 
@@ -221,10 +348,13 @@ class MaintenanceRequest extends Component {
       this.scrollContainer.scrollTo({ 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
@@ -241,6 +371,7 @@ class MaintenanceRequest extends Component {
         Helper.getSite(this.props.site),
         this.state.isHome,
         this.state.times,
+        updatedCustomFields,
       )
       .then(res => {
         if (res.data.success) {
@@ -269,45 +400,98 @@ class MaintenanceRequest extends Component {
   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);
     }
   };
 
+  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() {
-    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: { message: 'No internet connection detected' } });
       }
       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) {
+    if (title.length === 0 || !roomNumber || roomNumber.length === 0) {
+      console.log('submitRequest - error', { title, roomNumber });
       this.setState({ showError: true });
       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();
   }
 
+  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 images = [];
+      const { imageFieldId } = this.state;
+      const imagesList = this.getImages(imageFieldId);
+      const imagesUpdate = [];
       await Promise.all(
-        this.state.images.map(image => {
+        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;
@@ -318,20 +502,20 @@ class MaintenanceRequest extends Component {
           });
         }),
       );
-      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);
   };
 
-  removeImage = index => {
-    const images = [...this.state.images];
-    images.splice(index, 1);
+  removeImage = (index, fieldId) => {
+    const imagesUpdate = this.getImages(fieldId);
+    imagesUpdate.splice(index, 1);
 
-    this.setState({ images });
+    this.setImages(imagesUpdate, fieldId);
   };
 
   toggleFullscreenVideo = url => {
@@ -360,16 +544,17 @@ class MaintenanceRequest extends Component {
     );
   }
 
-  renderImage(item, index) {
+  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}>
+        <TouchableOpacity activeOpacity={0.8} onPress={() => this.showUploadMenu(fieldId)}>
           <View
             style={[
               styles.imageContainer,
-              this.state.images.length > 1 && styles.imageContainerNotEmpty,
+              imagesList.length > 1 && styles.imageContainerNotEmpty,
               index % 3 === 0 && { marginLeft: 0 },
               index > 2 && { marginTop: 8 },
             ]}
@@ -385,7 +570,7 @@ class MaintenanceRequest extends Component {
       <View
         style={[
           styles.imageContainer,
-          this.state.images.length > 1 && styles.imageContainerNotEmpty,
+          imagesList.length > 1 && styles.imageContainerNotEmpty,
           index % 3 === 0 && { marginLeft: 0 },
           index > 2 && { marginTop: 8 },
         ]}
@@ -404,7 +589,7 @@ class MaintenanceRequest extends Component {
                 </TouchableOpacity>
               </View>
             )}
-            <TouchableOpacity style={styles.removeImage} onPress={this.removeImage.bind(this, index)}>
+            <TouchableOpacity style={styles.removeImage} onPress={() => this.removeImage(index, fieldId)}>
               <Icon name="remove" type="font-awesome" iconStyle={styles.imageControlIcon} style={styles.removeImage} />
             </TouchableOpacity>
           </ImageBackground>
@@ -421,15 +606,16 @@ class MaintenanceRequest extends Component {
     );
   }
 
-  renderImageList() {
+  renderImageList(fieldId = null) {
+    const imagesList = this.getImages(fieldId);
     return (
       <View style={styles.imageSection}>
-        <View style={[styles.imageListContainer, this.state.images.length < 2 && styles.imageListContainerEmpty]}>
+        <View style={[styles.imageListContainer, imagesList.length < 2 && styles.imageListContainerEmpty]}>
           <FlatList
             keyboardShouldPersistTaps="always"
             enableEmptySections
-            data={this.state.images}
-            renderItem={({ item, index }) => this.renderImage(item, index)}
+            data={imagesList}
+            renderItem={({ item, index }) => this.renderImage(item, index, fieldId)}
             keyExtractor={(item, index) => index}
             numColumns={3}
           />
@@ -438,7 +624,181 @@ class MaintenanceRequest extends Component {
     );
   }
 
+  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 } = this.state;
+    const hasCustomFields = customFields && customFields.length > 0;
+
     return (
       <View style={{ flex: 1 }}>
         <ScrollView keyboardShouldPersistTaps="always" style={{ flex: 1 }} ref={ref => (this.scrollContainer = ref)}>
@@ -481,7 +841,7 @@ class MaintenanceRequest extends Component {
                 }}
                 required
                 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)}
               />
             </Components.FormCard>
             <Components.FormCard
@@ -499,81 +859,87 @@ class MaintenanceRequest extends Component {
                 </View>
               </TouchableOpacity>
             </Components.FormCard>
-            <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()}
+            {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>
@@ -607,6 +973,8 @@ class MaintenanceRequest extends Component {
   }
 
   render() {
+    const { submitting, success, isDateTimePickerVisible, popUpType } = this.state;
+
     return (
       <KeyboardAvoidingView behavior={Platform.OS === 'ios' && 'padding'} style={styles.viewContainer}>
         {this.renderUploadMenu()}
@@ -614,8 +982,8 @@ class MaintenanceRequest extends Component {
           <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
           />
@@ -623,6 +991,13 @@ class MaintenanceRequest extends Component {
         </View>
         {this.renderRegisterConfirmation()}
         {this.renderVideoPlayerPopup()}
+        <DateTimePicker
+          isVisible={isDateTimePickerVisible}
+          onConfirm={this.onDateSelected}
+          onCancel={() => this.setState({ isDateTimePickerVisible: false })}
+          mode={popUpType}
+          headerTextIOS={`Pick a ${popUpType}`}
+        />
       </KeyboardAvoidingView>
     );
   }
@@ -725,6 +1100,72 @@ const styles = {
     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 => {
@@ -740,6 +1181,7 @@ const mapStateToProps = state => {
     unit,
     phoneNumber,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    strings: state.strings?.config || {},
   };
 };