@plusscommunities/pluss-maintenance-app-forms 7.0.20-auth.0 → 7.0.21

package/src/screens/ServiceRequest.js

@@ -1,1555 +1,1784 @@
-import React, { Component } from 'react';
+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 '@rneui/themed';
-import _ from 'lodash';
-import moment from 'moment';
-import { connect } from 'react-redux';
-import { jobAdded } from '../actions';
-import { maintenanceActions, userActions } from '../apis';
-import { Services } from '../feature.config';
-import { Components, Colours, Helper, Config } from '../core.config';
-import { values } from '../values.config';
-
-const PHOTO_SIZE = (Dimensions.get('window').width - 64) / 3;
+	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 "@rneui/themed";
+import _ from "lodash";
+import moment from "moment";
+import { connect } from "react-redux";
+import { jobAdded } from "../actions";
+import { maintenanceActions, userActions } from "../apis";
+import { Services } from "../feature.config";
+import { Components, Colours, Helper, Config } from "../core.config";
+import { values } from "../values.config";
+
+const PHOTO_SIZE = (Dimensions.get("window").width - 64) / 3;
 
 class MaintenanceRequest extends Component {
-  constructor(props) {
-    super(props);
-    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: {},
-      customFieldDocuments: {},
-      isDateTimePickerVisible: false,
-      popUpType: 'date',
-      dateFieldId: null,
-      imageFieldId: null,
-
-      // PC-1255: On-behalf request fields
-      canCreateOnBehalf: false,
-      selectedUser: null,
-      users: [],
-    };
-    this.checkThumb = null;
-    this.keyboardTypes = {
-      phone: 'phone-pad',
-      email: 'email-address',
-      text: 'default',
-    };
-  }
-
-  componentDidMount() {
-    this.checkUserPermissions();
-    this.getJobTypes();
-  }
-
-  checkUserPermissions = async () => {
-    // PC-1255: Check if user has userManagement permission
-    const hasUserManagement = this.props.permissions?.includes('userManagement') || false;
-
-    if (hasUserManagement) {
-      this.setState({ canCreateOnBehalf: true });
-      // Load site users for picker
-      await this.loadSiteUsers();
-    } else {
-      // Default to logged-in user for non-staff or staff without permission
-      this.setDefaultUser();
-    }
-  };
-
-  loadSiteUsers = async () => {
-    try {
-      const response = await userActions.getSiteUsers(this.props.site);
-      // PC-1255: Load all users (not just residents) to match web admin behavior
-      const users = _.sortBy(response.data.Items || [], u => (u.displayName || '').toLowerCase());
-      this.setState({ users });
-    } catch (error) {
-      console.log('Error loading site users:', error);
-      // Fall back to default user if loading fails
-      this.setDefaultUser();
-    }
-  };
-
-  setDefaultUser = () => {
-    if (this.props.userType !== 'KIOSK') {
-      const defaultUser = {
-        userId: this.props.uid,
-        displayName: this.props.displayName,
-        profilePic: this.props.profilePic,
-      };
-      this.setState({
-        selectedUser: defaultUser,
-        userName: this.props.displayName,
-        roomNumber: this.props.unit,
-        phone: !_.isEmpty(this.props.phoneNumber) ? this.props.phoneNumber : '',
-      });
-    }
-  };
-
-  componentWillUnmount() {
-    clearInterval(this.checkThumb);
-  }
-
-  onChangeName = userName => {
-    const update = { userName };
-    if (!this.state.customFields || !_.some(this.state.customFields, 'isTitle')) {
-      update.title = userName;
-    }
-    this.setState(update);
-  };
-
-  // PC-1255: Handle user picker navigation
-  onPressUser = () => {
-    const { users, selectedUser } = this.state;
-    if (!users || users.length === 0) return;
-
-    Services.navigation.navigate(values.screenUserPicker, {
-      currentUser: selectedUser,
-      users,
-      onSelectUser: this.onSelectUser.bind(this),
-    });
-  };
-
-  // PC-1255: Handle user selection and auto-populate contact details
-  onSelectUser = async user => {
-    const update = {
-      selectedUser: user,
-      userName: user.displayName,
-    };
-
-    // PC-1255: Try to fetch full user details for auto-population
-    try {
-      // getSiteUsers returns 'Id', but fetchUser expects 'userId'
-      const userId = user.userId || user.Id;
-      const response = await userActions.fetchUser(this.props.site, userId);
-      if (response.data && response.data.user) {
-        const userDetails = response.data.user;
-        if (userDetails.phoneNumber) {
-          update.phone = userDetails.phoneNumber;
-        }
-        if (userDetails.unit) {
-          update.roomNumber = userDetails.unit;
-        }
-      }
-    } catch (error) {
-      // Permission denied (403) or other error - continue without auto-population
-      // User can still manually enter contact details
-      console.log('Could not fetch user details for auto-population:', error);
-    }
-
-    this.setState(update);
-  };
-
-  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);
-  };
-
-  onUploadStartedImage = (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);
-  };
-
-  onUploadProgressImage = 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);
-  };
-
-  onUploadSuccessImage = async (uri, uploadUri) => {
-    const { imageFieldId } = this.state;
-    const imagesUpdate = this.getImages(imageFieldId);
-    imagesUpdate.map(img => {
-      if (img.uploadUri === uploadUri && img.uploading) {
-        img.url = uri.replace('/general/', '/general1400/');
-        img.thumbNailExists = false;
-        img.thumbNailUrl = Helper.getThumb300(img.url);
-        img.allowRetry = true;
-      }
-    });
-
-    this.setImages(imagesUpdate, imageFieldId, () => this.waitForThumbnails());
-  };
-
-  onUploadFailedImage = 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);
-  };
-
-  onUploadStartedDocument = (uploadUri, documentUri, documentName, documentExt, documentFieldId) => {
-    const documentsUpdate = this.getDocuments(documentFieldId);
-    documentsUpdate.splice(documentsUpdate.length - 1, 0, {
-      uploading: true,
-      uploadProgress: '0%',
-      uploadUri,
-      documentUri,
-      documentName,
-      documentExt,
-      allowRetry: true,
-    });
-
-    this.setDocuments(documentsUpdate, documentFieldId);
-  };
-
-  onUploadProgressDocument = (progress, documentFieldId) => {
-    const documentsUpdate = this.getDocuments(documentFieldId);
-    documentsUpdate.map(doc => {
-      if (doc.uploadUri === progress.uri) {
-        doc.uploadProgress = progress.percentage;
-        doc.uploading = true;
-        doc.allowRetry = true;
-      }
-    });
-
-    this.setDocuments(documentsUpdate, documentFieldId);
-  };
-
-  onUploadSuccessDocument = async (uri, uploadUri, documentFieldId) => {
-    const documentsUpdate = this.getDocuments(documentFieldId);
-    documentsUpdate.map(doc => {
-      if (doc.uploadUri === uploadUri && doc.uploading) {
-        doc.uploading = false;
-        doc.uploadProgress = '100%';
-        doc.url = uri;
-        doc.allowRetry = true;
-      }
-    });
-
-    this.setDocuments(documentsUpdate, documentFieldId);
-  };
-
-  onUploadFailedDocument = (uploadUri, documentFieldId) => {
-    const documentsUpdate = this.getDocuments(documentFieldId);
-    documentsUpdate.map(doc => {
-      if (doc.uploadUri === uploadUri) {
-        doc.uploading = true; // Requried for retry
-        doc.uploadProgress = '';
-        doc.allowRetry = true;
-      }
-    });
-
-    this.setDocuments(documentsUpdate, documentFieldId);
-  };
-
-  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: {},
-        customFieldDocuments: {},
-        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 checkMandatory = () => {
-      if (!mandatory) return true;
-      switch (type) {
-        case 'yn':
-          return _.isBoolean(answer);
-        case 'image':
-          const imagesList = this.getImageUrls(fieldId);
-          return imagesList.length > 0;
-        case 'document':
-          const documentsList = this.getDocumentAnswers(fieldId);
-          return documentsList.length > 0;
-        case 'checkbox':
-          return _.isArray(answer) && answer.length > 0;
-        default:
-          return !_.isNil(answer) && !_.isEmpty(answer);
-      }
-    };
-    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,
-        });
-        this.getDefaultJob();
-      })
-      .catch(() => {});
-  }
-
-  pickType(type) {
-    const { types } = this.state;
-    const selected = types.find(t => t.typeName === type) || {};
-    if (values.forceCustomFields && !selected.hasCustomFields) {
-      this.setState({
-        type,
-        customFields: [],
-        noType: true,
-      });
-      return;
-    }
-    const update = {
-      type,
-      customFields: selected.hasCustomFields && selected.customFields.length > 0 ? _.cloneDeep(selected.customFields) : [],
-      loadingTypes: false,
-    };
-
-    if (!_.isEmpty(update.customFields) && !_.some(update.customFields, 'isTitle')) {
-      update.title = this.state.userName;
-    }
-
-    this.setState(update);
-  }
-
-  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);
-      if (field.type === 'document') field.answer = this.getDocumentAnswers(fieldId);
-      return field;
-    });
-
-    maintenanceActions
-      .sendMaintenanceRequest(
-        this.props.uid,
-        this.state.userName,
-        this.state.phone,
-        this.state.roomNumber,
-        this.state.title,
-        description,
-        null,
-        this.state.type,
-        images,
-        Helper.getSite(this.props.site),
-        this.state.isHome,
-        this.state.times,
-        updatedCustomFields,
-      )
-      .then(res => {
-        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 });
-
-    // PC-1255: Validate user selection for on-behalf requests
-    if (this.state.canCreateOnBehalf && !this.state.selectedUser) {
-      console.log('submitRequest - no user selected for on-behalf request');
-      this.setState({ showError: true });
-      return;
-    }
-
-    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);
-  };
-
-  getDocuments = fieldId => {
-    const { customFieldDocuments } = this.state;
-    const documentsList = _.cloneDeep(customFieldDocuments[fieldId]) || [];
-    return documentsList;
-  };
-
-  setDocuments = (documentsList, fieldId) => {
-    let update = {};
-    const customFieldDocuments = _.cloneDeep(this.state.customFieldDocuments);
-    customFieldDocuments[fieldId] = documentsList;
-    update = { customFieldDocuments };
-    this.setState(update);
-  };
-
-  getDocumentAnswers = fieldId => {
-    const documentsList = this.getDocuments(fieldId);
-    return _.filter(documentsList, doc => {
-      return !doc.uploading && doc.url;
-    }).map(doc => {
-      return {
-        name: doc.documentName,
-        ext: doc.documentExt,
-        url: doc.url,
-      };
-    });
-  };
-
-  removeDocument = (index, fieldId) => {
-    const documentsUpdate = this.getDocuments(fieldId);
-    documentsUpdate.splice(index, 1);
-
-    this.setDocuments(documentsUpdate, fieldId);
-  };
-
-  toggleFullscreenVideo = url => {
-    if (typeof url !== 'string') url = '';
-    this.setState({ showFullscreenVideo: url.length > 0, currentVideoUrl: url });
-  };
-
-  renderImageUploader() {
-    return (
-      <Components.ImageUploader
-        ref={ref => (this.imageUploader = ref)}
-        onUploadStarted={this.onUploadStartedImage}
-        onUploadSuccess={this.onUploadSuccessImage}
-        onUploadFailed={this.onUploadFailedImage}
-        onUploadProgress={this.onUploadProgressImage}
-        onLibrarySelected={this.onLibrarySelectedImage}
-        size={{ width: 1400 }}
-        quality={0.8}
-        fileName={'serviceImage'}
-        popupTitle={'Upload Image'}
-        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>
-    );
-  }
-
-  renderDocument(item, index, fieldId) {
-    const { colourBrandingMain } = this.props;
-    return (
-      <View key={index} style={styles.documentContainer}>
-        <View style={{ ...styles.documentTypeContainer, backgroundColor: colourBrandingMain }}>
-          <Text style={styles.documentTypeText}>{item.documentExt}</Text>
-        </View>
-        <Text style={styles.documentText}>{`${item.documentName}${item.uploading ? ` - ${item.uploadProgress}` : ''}`}</Text>
-        {!item.uploading && (
-          <TouchableOpacity style={styles.removeDocumentButton} onPress={() => this.removeDocument(index, fieldId)}>
-            <Icon name="remove" type="font-awesome" iconStyle={{ ...styles.removeDocumentIcon, color: colourBrandingMain }} />
-          </TouchableOpacity>
-        )}
-      </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.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>
-    );
-  }
-
-  // renderDocumentList(fieldId) {
-  //   const documentsList = this.getDocuments(fieldId);
-  //   return (
-  //     <View style={styles.documentListContainer}>
-  //       {documentsList.length > 0 ? documentsList.map((document, index) => this.renderDocument(document, index, fieldId)) : null}
-  //       <Components.DocumentUploader
-  //         buttonTitle="Add Files"
-  //         allowedTypes={['application/pdf']}
-  //         onUploadStarted={(uploadUri, uri, name, ext) => this.onUploadStartedDocument(uploadUri, uri, name, ext, fieldId)}
-  //         onUploadProgress={progress => this.onUploadProgressDocument(progress, fieldId)}
-  //         onUploadSuccess={(uri, uploadUri) => this.onUploadSuccessDocument(uri, uploadUri, fieldId)}
-  //         onUploadFailed={uploadUri => this.onUploadFailedDocument(uploadUri, fieldId)}
-  //         fileName="serviceDocument"
-  //         userId={this.props.uid}
-  //         disabled={false}
-  //         multiple
-  //       />
-  //     </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>
-        );
-      // case 'document':
-      //   return (
-      //     <Components.GenericInputSection
-      //       key={fieldId}
-      //       label={field.label}
-      //       sectionStyle={sectionStyle}
-      //       isValid={() => this.isFieldValid(field, fieldId)}
-      //       required={field.mandatory}
-      //       showError={this.state.showError}
-      //     >
-      //       {this.renderDocumentList(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 }}>
-              {/* PC-1255: User picker for on-behalf requests */}
-              {this.state.canCreateOnBehalf && (
-                <Components.FormCardSection
-                  label={'Select User'}
-                  textValue={this.state.selectedUser?.displayName}
-                  hasContent
-                  hasUnderline
-                  required
-                  errorText="Please select a user."
-                  showError={this.state.showError && !this.state.selectedUser}
-                  sectionStyle={{ borderBottomWidth: 1, borderBottomColor: Colours.LINEGREY }}
-                >
-                  <TouchableOpacity onPress={this.onPressUser}>
-                    <View style={styles.userPickerContainer}>
-                      <View style={styles.profileContainer}>
-                        <Components.ProfilePic ProfilePic={this.state.selectedUser?.profilePic} Diameter={30} />
-                        <Text style={styles.nameText}>{this.state.selectedUser?.displayName || 'Select User'}</Text>
-                      </View>
-                      <Icon
-                        name="angle-right"
-                        type="font-awesome"
-                        iconStyle={[styles.sectionTitle, { fontSize: 20, color: this.props.colourBrandingMain }]}
-                      />
-                    </View>
-                  </TouchableOpacity>
-                </Components.FormCardSection>
-              )}
-              {/* PC-1255: Hide Name field when creating on behalf - name comes from selected user */}
-              {!this.state.canCreateOnBehalf && (
-                <Components.FormCardSection
-                  label={'Name'}
-                  placeholder={'Enter your name'}
-                  textValue={this.state.userName}
-                  onChangeText={userName => this.onChangeName(userName)}
-                  editable={this.props.userType === 'KIOSK' && this.state.submitting === false}
-                  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}>{values.textJobType}</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={'padding'} style={styles.viewContainer}>
-        {this.renderImageUploader()}
-        <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>
-    );
-  }
+	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: {},
+			customFieldDocuments: {},
+			isDateTimePickerVisible: false,
+			popUpType: "date",
+			dateFieldId: null,
+			imageFieldId: null,
+
+			// PC-1255: On-behalf request fields
+			canCreateOnBehalf: false,
+			selectedUser: null,
+			users: [],
+		};
+		this.checkThumb = null;
+		this.keyboardTypes = {
+			phone: "phone-pad",
+			email: "email-address",
+			text: "default",
+		};
+	}
+
+	componentDidMount() {
+		this.checkUserPermissions();
+		this.getJobTypes();
+	}
+
+	checkUserPermissions = async () => {
+		// PC-1255: Check if user has userManagement permission
+		const hasUserManagement =
+			this.props.permissions?.includes("userManagement") || false;
+
+		if (hasUserManagement) {
+			this.setState({ canCreateOnBehalf: true });
+			// Load site users for picker
+			await this.loadSiteUsers();
+		} else {
+			// Default to logged-in user for non-staff or staff without permission
+			this.setDefaultUser();
+		}
+	};
+
+	loadSiteUsers = async () => {
+		try {
+			const response = await userActions.getSiteUsers(this.props.site);
+
+			let items = response.data.Items || [];
+			if (this.props.optionOnlyForResidents) {
+				items = _.filter(items, (u) => u.category === "resident");
+			}
+
+			const users = _.sortBy(items, (u) => (u.displayName || "").toLowerCase());
+			this.setState({ users });
+		} catch (error) {
+			console.log("Error loading site users:", error);
+			// Fall back to default user if loading fails
+			this.setDefaultUser();
+		}
+	};
+
+	setDefaultUser = () => {
+		if (this.props.userType !== "KIOSK") {
+			const defaultUser = {
+				userId: this.props.uid,
+				displayName: this.props.displayName,
+				profilePic: this.props.profilePic,
+			};
+			this.setState({
+				selectedUser: defaultUser,
+				userName: this.props.displayName,
+				roomNumber: this.props.unit,
+				phone: !_.isEmpty(this.props.phoneNumber) ? this.props.phoneNumber : "",
+			});
+		}
+	};
+
+	componentWillUnmount() {
+		clearInterval(this.checkThumb);
+	}
+
+	onChangeName = (userName) => {
+		const update = { userName };
+		if (
+			!this.state.customFields ||
+			!_.some(this.state.customFields, "isTitle")
+		) {
+			update.title = userName;
+		}
+		this.setState(update);
+	};
+
+	// PC-1255: Handle user picker navigation
+	onPressUser = () => {
+		const { users, selectedUser } = this.state;
+		if (!users || users.length === 0) return;
+
+		Services.navigation.navigate(values.screenUserPicker, {
+			currentUser: selectedUser,
+			users,
+			onSelectUser: this.onSelectUser.bind(this),
+		});
+	};
+
+	// PC-1255: Handle user selection and auto-populate contact details
+	onSelectUser = async (user) => {
+		const update = {
+			selectedUser: user,
+			userName: user.displayName,
+		};
+
+		// PC-1255: Try to fetch full user details for auto-population
+		try {
+			// getSiteUsers returns 'Id', but fetchUser expects 'userId'
+			const userId = user.userId || user.Id;
+			const response = await userActions.fetchUser(this.props.site, userId);
+			if (response.data && response.data.user) {
+				const userDetails = response.data.user;
+				if (userDetails.phoneNumber) {
+					update.phone = userDetails.phoneNumber;
+				}
+				if (userDetails.unit) {
+					update.roomNumber = userDetails.unit;
+				}
+				if (
+					!this.state.customFields ||
+					!_.some(this.state.customFields, "isTitle")
+				) {
+					update.title = userDetails.displayName || null;
+				}
+			}
+		} catch (error) {
+			// Permission denied (403) or other error - continue without auto-population
+			// User can still manually enter contact details
+			console.log("Could not fetch user details for auto-population:", error);
+		} finally {
+			// In any case, we still need a title. Inform the user to set one form field as a title.
+			if (!state.title && !update.title) {
+				update.title =
+					"[Missing title - Set one of the form field as title in the community manager]";
+			}
+		}
+		this.setState(update);
+	};
+
+	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);
+	};
+
+	onUploadStartedImage = (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);
+	};
+
+	onUploadProgressImage = (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);
+	};
+
+	onUploadSuccessImage = async (uri, uploadUri) => {
+		const { imageFieldId } = this.state;
+		const imagesUpdate = this.getImages(imageFieldId);
+		imagesUpdate.map((img) => {
+			if (img.uploadUri === uploadUri && img.uploading) {
+				img.url = uri.replace("/general/", "/general1400/");
+				img.thumbNailExists = false;
+				img.thumbNailUrl = Helper.getThumb300(img.url);
+				img.allowRetry = true;
+			}
+		});
+
+		this.setImages(imagesUpdate, imageFieldId, () => this.waitForThumbnails());
+	};
+
+	onUploadFailedImage = (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);
+	};
+
+	onUploadStartedDocument = (
+		uploadUri,
+		documentUri,
+		documentName,
+		documentExt,
+		documentFieldId,
+	) => {
+		const documentsUpdate = this.getDocuments(documentFieldId);
+		documentsUpdate.splice(documentsUpdate.length - 1, 0, {
+			uploading: true,
+			uploadProgress: "0%",
+			uploadUri,
+			documentUri,
+			documentName,
+			documentExt,
+			allowRetry: true,
+		});
+
+		this.setDocuments(documentsUpdate, documentFieldId);
+	};
+
+	onUploadProgressDocument = (progress, documentFieldId) => {
+		const documentsUpdate = this.getDocuments(documentFieldId);
+		documentsUpdate.map((doc) => {
+			if (doc.uploadUri === progress.uri) {
+				doc.uploadProgress = progress.percentage;
+				doc.uploading = true;
+				doc.allowRetry = true;
+			}
+		});
+
+		this.setDocuments(documentsUpdate, documentFieldId);
+	};
+
+	onUploadSuccessDocument = async (uri, uploadUri, documentFieldId) => {
+		const documentsUpdate = this.getDocuments(documentFieldId);
+		documentsUpdate.map((doc) => {
+			if (doc.uploadUri === uploadUri && doc.uploading) {
+				doc.uploading = false;
+				doc.uploadProgress = "100%";
+				doc.url = uri;
+				doc.allowRetry = true;
+			}
+		});
+
+		this.setDocuments(documentsUpdate, documentFieldId);
+	};
+
+	onUploadFailedDocument = (uploadUri, documentFieldId) => {
+		const documentsUpdate = this.getDocuments(documentFieldId);
+		documentsUpdate.map((doc) => {
+			if (doc.uploadUri === uploadUri) {
+				doc.uploading = true; // Requried for retry
+				doc.uploadProgress = "";
+				doc.allowRetry = true;
+			}
+		});
+
+		this.setDocuments(documentsUpdate, documentFieldId);
+	};
+
+	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: {},
+				customFieldDocuments: {},
+				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 checkMandatory = () => {
+			if (!mandatory) return true;
+			switch (type) {
+				case "yn":
+					return _.isBoolean(answer);
+				case "image":
+					const imagesList = this.getImageUrls(fieldId);
+					return imagesList.length > 0;
+				case "document":
+					const documentsList = this.getDocumentAnswers(fieldId);
+					return documentsList.length > 0;
+				case "checkbox":
+					return _.isArray(answer) && answer.length > 0;
+				default:
+					return !_.isNil(answer) && !_.isEmpty(answer);
+			}
+		};
+		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,
+				});
+				this.getDefaultJob();
+			})
+			.catch(() => {});
+	}
+
+	pickType(type) {
+		const { types } = this.state;
+		const selected = types.find((t) => t.typeName === type) || {};
+		if (values.forceCustomFields && !selected.hasCustomFields) {
+			this.setState({
+				type,
+				customFields: [],
+				noType: true,
+			});
+			return;
+		}
+		const update = {
+			type,
+			customFields:
+				selected.hasCustomFields && selected.customFields.length > 0
+					? _.cloneDeep(selected.customFields)
+					: [],
+			loadingTypes: false,
+		};
+
+		if (
+			!_.isEmpty(update.customFields) &&
+			!_.some(update.customFields, "isTitle")
+		) {
+			update.title = this.state.userName;
+		}
+
+		this.setState(update);
+	}
+
+	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);
+			if (field.type === "document")
+				field.answer = this.getDocumentAnswers(fieldId);
+			return field;
+		});
+
+		maintenanceActions
+			.sendMaintenanceRequest(
+				this.props.uid,
+				this.state.userName,
+				this.state.phone,
+				this.state.roomNumber,
+				this.state.title,
+				description,
+				null,
+				this.state.type,
+				images,
+				Helper.getSite(this.props.site),
+				this.state.isHome,
+				this.state.times,
+				updatedCustomFields,
+			)
+			.then((res) => {
+				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 });
+
+		// PC-1255: Validate user selection for on-behalf requests
+		if (this.state.canCreateOnBehalf && !this.state.selectedUser) {
+			console.log("submitRequest - no user selected for on-behalf request");
+			this.setState({ showError: true });
+			return;
+		}
+
+		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);
+	};
+
+	getDocuments = (fieldId) => {
+		const { customFieldDocuments } = this.state;
+		const documentsList = _.cloneDeep(customFieldDocuments[fieldId]) || [];
+		return documentsList;
+	};
+
+	setDocuments = (documentsList, fieldId) => {
+		let update = {};
+		const customFieldDocuments = _.cloneDeep(this.state.customFieldDocuments);
+		customFieldDocuments[fieldId] = documentsList;
+		update = { customFieldDocuments };
+		this.setState(update);
+	};
+
+	getDocumentAnswers = (fieldId) => {
+		const documentsList = this.getDocuments(fieldId);
+		return _.filter(documentsList, (doc) => {
+			return !doc.uploading && doc.url;
+		}).map((doc) => {
+			return {
+				name: doc.documentName,
+				ext: doc.documentExt,
+				url: doc.url,
+			};
+		});
+	};
+
+	removeDocument = (index, fieldId) => {
+		const documentsUpdate = this.getDocuments(fieldId);
+		documentsUpdate.splice(index, 1);
+
+		this.setDocuments(documentsUpdate, fieldId);
+	};
+
+	toggleFullscreenVideo = (url) => {
+		if (typeof url !== "string") url = "";
+		this.setState({
+			showFullscreenVideo: url.length > 0,
+			currentVideoUrl: url,
+		});
+	};
+
+	renderImageUploader() {
+		return (
+			<Components.ImageUploader
+				ref={(ref) => (this.imageUploader = ref)}
+				onUploadStarted={this.onUploadStartedImage}
+				onUploadSuccess={this.onUploadSuccessImage}
+				onUploadFailed={this.onUploadFailedImage}
+				onUploadProgress={this.onUploadProgressImage}
+				onLibrarySelected={this.onLibrarySelectedImage}
+				size={{ width: 1400 }}
+				quality={0.8}
+				fileName={"serviceImage"}
+				popupTitle={"Upload Image"}
+				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>
+		);
+	}
+
+	renderDocument(item, index, fieldId) {
+		const { colourBrandingMain } = this.props;
+		return (
+			<View key={index} style={styles.documentContainer}>
+				<View
+					style={{
+						...styles.documentTypeContainer,
+						backgroundColor: colourBrandingMain,
+					}}
+				>
+					<Text style={styles.documentTypeText}>{item.documentExt}</Text>
+				</View>
+				<Text
+					style={styles.documentText}
+				>{`${item.documentName}${item.uploading ? ` - ${item.uploadProgress}` : ""}`}</Text>
+				{!item.uploading && (
+					<TouchableOpacity
+						style={styles.removeDocumentButton}
+						onPress={() => this.removeDocument(index, fieldId)}
+					>
+						<Icon
+							name="remove"
+							type="font-awesome"
+							iconStyle={{
+								...styles.removeDocumentIcon,
+								color: colourBrandingMain,
+							}}
+						/>
+					</TouchableOpacity>
+				)}
+			</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.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>
+		);
+	}
+
+	// renderDocumentList(fieldId) {
+	//   const documentsList = this.getDocuments(fieldId);
+	//   return (
+	//     <View style={styles.documentListContainer}>
+	//       {documentsList.length > 0 ? documentsList.map((document, index) => this.renderDocument(document, index, fieldId)) : null}
+	//       <Components.DocumentUploader
+	//         buttonTitle="Add Files"
+	//         allowedTypes={['application/pdf']}
+	//         onUploadStarted={(uploadUri, uri, name, ext) => this.onUploadStartedDocument(uploadUri, uri, name, ext, fieldId)}
+	//         onUploadProgress={progress => this.onUploadProgressDocument(progress, fieldId)}
+	//         onUploadSuccess={(uri, uploadUri) => this.onUploadSuccessDocument(uri, uploadUri, fieldId)}
+	//         onUploadFailed={uploadUri => this.onUploadFailedDocument(uploadUri, fieldId)}
+	//         fileName="serviceDocument"
+	//         userId={this.props.uid}
+	//         disabled={false}
+	//         multiple
+	//       />
+	//     </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>
+				);
+			// case 'document':
+			//   return (
+			//     <Components.GenericInputSection
+			//       key={fieldId}
+			//       label={field.label}
+			//       sectionStyle={sectionStyle}
+			//       isValid={() => this.isFieldValid(field, fieldId)}
+			//       required={field.mandatory}
+			//       showError={this.state.showError}
+			//     >
+			//       {this.renderDocumentList(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 }}>
+							{/* PC-1255: User picker for on-behalf requests */}
+							{this.state.canCreateOnBehalf && (
+								<Components.FormCardSection
+									label={"Select User"}
+									textValue={this.state.selectedUser?.displayName}
+									hasContent
+									hasUnderline
+									required
+									errorText="Please select a user."
+									showError={this.state.showError && !this.state.selectedUser}
+									sectionStyle={{
+										borderBottomWidth: 1,
+										borderBottomColor: Colours.LINEGREY,
+									}}
+								>
+									<TouchableOpacity onPress={this.onPressUser}>
+										<View style={styles.userPickerContainer}>
+											<View style={styles.profileContainer}>
+												<Components.ProfilePic
+													ProfilePic={this.state.selectedUser?.profilePic}
+													Diameter={30}
+												/>
+												<Text style={styles.nameText}>
+													{this.state.selectedUser?.displayName ||
+														"Select User"}
+												</Text>
+											</View>
+											<Icon
+												name="angle-right"
+												type="font-awesome"
+												iconStyle={[
+													styles.sectionTitle,
+													{
+														fontSize: 20,
+														color: this.props.colourBrandingMain,
+													},
+												]}
+											/>
+										</View>
+									</TouchableOpacity>
+								</Components.FormCardSection>
+							)}
+							{/* PC-1255: Hide Name field when creating on behalf - name comes from selected user */}
+							{!this.state.canCreateOnBehalf && (
+								<Components.FormCardSection
+									label={"Name"}
+									placeholder={"Enter your name"}
+									textValue={this.state.userName}
+									onChangeText={(userName) => this.onChangeName(userName)}
+									editable={
+										this.props.userType === "KIOSK" &&
+										this.state.submitting === false
+									}
+									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}>{values.textJobType}</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={"padding"} style={styles.viewContainer}>
+				{this.renderImageUploader()}
+				<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',
-  },
-  documentListContainer: {
-    marginTop: 8,
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-  },
-  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,
-  },
-  documentContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 4,
-  },
-  documentTypeContainer: {
-    width: 50,
-    height: 60,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 5,
-    marginRight: 8,
-  },
-  documentTypeText: {
-    color: '#fff',
-    fontFamily: 'sf-semibold',
-    textAlign: 'center',
-  },
-  documentText: {
-    flex: 1,
-    fontFamily: 'sf-semibold',
-    fontSize: 16,
-    color: '#65686D',
-  },
-  removeDocumentButton: {
-    padding: 4,
-    width: 40,
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: 8,
-  },
-  removeDocumentIcon: {
-    fontSize: 24,
-  },
-  // PC-1255: User picker styles
-  userPickerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  profileContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  nameText: {
-    fontFamily: 'sf-medium',
-    fontSize: 16,
-    color: Colours.TEXT_DARK,
-    marginLeft: 8,
-  },
+	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",
+	},
+	documentListContainer: {
+		marginTop: 8,
+		flexDirection: "column",
+		alignItems: "flex-start",
+	},
+	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,
+	},
+	documentContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		paddingVertical: 4,
+	},
+	documentTypeContainer: {
+		width: 50,
+		height: 60,
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 5,
+		marginRight: 8,
+	},
+	documentTypeText: {
+		color: "#fff",
+		fontFamily: "sf-semibold",
+		textAlign: "center",
+	},
+	documentText: {
+		flex: 1,
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		color: "#65686D",
+	},
+	removeDocumentButton: {
+		padding: 4,
+		width: 40,
+		height: 40,
+		alignItems: "center",
+		justifyContent: "center",
+		marginLeft: 8,
+	},
+	removeDocumentIcon: {
+		fontSize: 24,
+	},
+	// PC-1255: User picker styles
+	userPickerContainer: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+	},
+	profileContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	nameText: {
+		fontFamily: "sf-medium",
+		fontSize: 16,
+		color: Colours.TEXT_DARK,
+		marginLeft: 8,
+	},
 };
 
-const mapStateToProps = state => {
-  const { user, connection } = state;
-  const { displayName, profilePic, uid, site, unit, phoneNumber, permissions } = user;
-  return {
-    connected: connection.connected,
-    userType: user.type,
-    displayName,
-    profilePic,
-    uid,
-    site,
-    unit,
-    phoneNumber,
-    permissions,
-    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-    strings: state.strings?.config || {},
-  };
+const mapStateToProps = (state) => {
+	const { user, connection } = state;
+	const { displayName, profilePic, uid, site, unit, phoneNumber, permissions } =
+		user;
+	return {
+		connected: connection.connected,
+		userType: user.type,
+		displayName,
+		profilePic,
+		uid,
+		site,
+		unit,
+		phoneNumber,
+		permissions,
+		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+		strings: state.strings?.config || {},
+		optionOnlyForResidents: Helper.getSiteSettingFromState(
+			state,
+			values.optionOnlyForResidents,
+		),
+	};
 };
 
 export default connect(mapStateToProps, { jobAdded })(MaintenanceRequest);