@plusscommunities/pluss-maintenance-app 6.0.21-beta.0 → 6.0.22-beta.0

package/src/screens/ServiceRequest.js

@@ -1,1792 +1,1611 @@
-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 "react-native-elements";
-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 'react-native-elements';
+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;
-				}
-				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={Platform.OS === "ios" && "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);
+      // 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;
+        }
+        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 (!this.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={Platform.OS === 'ios' && '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 || {},
+  };
 };
 
 export default connect(mapStateToProps, { jobAdded })(MaintenanceRequest);