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

package/src/screens/MaintenanceUserPicker.js

@@ -1,45 +1,26 @@
 import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import _ from "lodash";
 import {
 	TouchableOpacity,
 	View,
 	ScrollView,
-	Text,
 	TextInput,
+	Keyboard,
 } from "react-native";
 import { connect } from "react-redux";
 import { Icon } from "@rneui/themed";
 import { Services } from "../feature.config";
-import { Components, Colours, Fonts } from "../core.config";
+import { Components, Colours } from "../core.config";
 
 class MaintenanceUserPicker extends Component {
 	state = {
 		currentUser: null,
 		searchText: "",
-		filteredUsers: [],
 	};
 
 	UNSAFE_componentWillMount() {
-		this.setState({
-			currentUser: this.props.currentUser,
-			filteredUsers: this.props.users || [],
-		});
-	}
-
-	UNSAFE_componentWillReceiveProps(nextProps) {
-		if (nextProps.users !== this.props.users) {
-			this.setState({
-				filteredUsers: this.getFilteredUsers(
-					this.state.searchText,
-					nextProps.users,
-				),
-			});
-		}
-		if (nextProps.currentUser !== this.props.currentUser) {
-			this.setState({
-				currentUser: nextProps.currentUser,
-			});
-		}
+		this.setState({ currentUser: this.props.currentUser });
 	}
 
 	onPressBack() {
@@ -47,6 +28,7 @@ class MaintenanceUserPicker extends Component {
 	}
 
 	onUserPress(user) {
+		Keyboard.dismiss();
 		this.props.onSelectUser(user);
 		this.setState({ currentUser: user });
 		setTimeout(() => {
@@ -55,94 +37,48 @@ class MaintenanceUserPicker extends Component {
 	}
 
 	onChangeSearch = (text) => {
-		this.setState({
-			searchText: text,
-			filteredUsers: this.getFilteredUsers(text),
-		});
+		this.setState({ searchText: text });
 	};
 
-	getFilteredUsers = (searchText, users) => {
-		const usersList = users || this.props.users || [];
-
-		if (!searchText || searchText.length === 0) {
-			return usersList;
-		}
-
-		if (!usersList || usersList.length === 0) {
-			return [];
-		}
-
-		return usersList.filter((user) => {
-			const displayName = user.displayName || "";
-			const unit = user.unit || "";
-			const searchLower = searchText.toLowerCase();
-
-			return (
-				displayName.toLowerCase().includes(searchLower) ||
-				unit.toLowerCase().includes(searchLower)
-			);
+	getFilteredUsers = () => {
+		const { searchText } = this.state;
+		const { users } = this.props;
+		if (!users) return [];
+		if (!searchText || searchText.length === 0) return users;
+		const searchLower = searchText.toLowerCase();
+		return users.filter((user) => {
+			const displayName = (user.displayName || "").toLowerCase();
+			const unit = (user.unit || "").toLowerCase();
+			return displayName.includes(searchLower) || unit.includes(searchLower);
 		});
 	};
 
-	renderSearch = () => {
-		return (
-			<View style={styles.searchContainer}>
-				<Fonts.PlIcon name="nav-search" style={styles.searchIcon} />
-				<TextInput
-					placeholder="Search by name or unit"
-					autoCorrect={false}
-					placeholderTextColor={"rgba(60, 60, 80, .1)"}
-					onChangeText={this.onChangeSearch}
-					value={this.state.searchText}
-					style={styles.searchText}
-					underlineColorAndroid={"rgba(0,0,0,0)"}
-					returnKeyType="search"
-				/>
-				{this.state.searchText.length > 0 && (
-					<TouchableOpacity
-						onPress={() => this.onChangeSearch("")}
-						style={styles.clearButton}
-					>
-						<Icon
-							name="times-circle"
-							type="font-awesome"
-							iconStyle={styles.clearIcon}
-						/>
-					</TouchableOpacity>
-				)}
-			</View>
-		);
-	};
-
 	renderMain() {
 		if (_.isEmpty(this.props.users)) {
 			return (
-				<View style={{ marginTop: 16 }}>
+				<View style={{ marginTop: 8 }}>
 					<Components.Spinner />
 				</View>
 			);
 		}
 
-		return (
-			<Components.FormCard style={{ marginTop: 16 }}>
-				{this.renderOptions()}
-			</Components.FormCard>
-		);
-	}
-
-	renderOptions() {
-		const users = this.state.filteredUsers;
-
-		if (users.length === 0 && this.state.searchText.length > 0) {
+		const filteredUsers = this.getFilteredUsers();
+		if (filteredUsers.length === 0 && this.state.searchText.length > 0) {
 			return (
 				<View style={styles.noResultsContainer}>
-					<Text style={styles.noResultsText}>
-						No users found matching "{this.state.searchText}"
-					</Text>
+					<Text style={styles.noResultsText}>No users found</Text>
 				</View>
 			);
 		}
 
+		return (
+			<Components.FormCard style={{ marginTop: 8 }}>
+				{this.renderOptions(filteredUsers)}
+			</Components.FormCard>
+		);
+	}
+
+	renderOptions(users) {
 		return users.map((user, index) => {
 			return (
 				<TouchableOpacity
@@ -180,6 +116,36 @@ class MaintenanceUserPicker extends Component {
 		});
 	}
 
+	renderSearch() {
+		return (
+			<View style={styles.searchContainer}>
+				<Icon name="search" type="font-awesome" iconStyle={styles.searchIcon} />
+				<TextInput
+					placeholder="Search by name or address"
+					autoCorrect={false}
+					placeholderTextColor={Colours.TEXT_MID_ALPHA50}
+					onChangeText={this.onChangeSearch}
+					value={this.state.searchText}
+					style={styles.searchText}
+					underlineColorAndroid={Colours.COLOUR_TRANSPARENT}
+					returnKeyType="search"
+				/>
+				{this.state.searchText.length > 0 && (
+					<TouchableOpacity
+						onPress={() => this.onChangeSearch("")}
+						style={styles.clearButton}
+					>
+						<Icon
+							name="times-circle"
+							type="font-awesome"
+							iconStyle={styles.clearIcon}
+						/>
+					</TouchableOpacity>
+				)}
+			</View>
+		);
+	}
+
 	render() {
 		return (
 			<View style={styles.container}>
@@ -189,7 +155,13 @@ class MaintenanceUserPicker extends Component {
 					text="Select user"
 				/>
 				{this.renderSearch()}
-				<ScrollView style={{ flex: 1 }}>{this.renderMain()}</ScrollView>
+				<ScrollView
+					style={{ flex: 1 }}
+					keyboardShouldPersistTaps="handled"
+					keyboardDismissMode="on-drag"
+				>
+					{this.renderMain()}
+				</ScrollView>
 			</View>
 		);
 	}
@@ -201,17 +173,6 @@ const styles = {
 		position: "relative",
 		backgroundColor: "#f0f0f5",
 	},
-	row: {
-		flexDirection: "row",
-		alignItems: "center",
-		minHeight: 22,
-	},
-	text: {
-		flex: 1,
-		fontFamily: "sf-regular",
-		fontSize: 14,
-		color: Colours.TEXT_DARK,
-	},
 	rowContainer: {
 		flexDirection: "row",
 		justifyContent: "space-between",
@@ -229,32 +190,34 @@ const styles = {
 	searchContainer: {
 		flexDirection: "row",
 		alignItems: "center",
-		paddingHorizontal: 16,
-		paddingVertical: 12,
+		marginHorizontal: 15,
+		marginTop: 10,
+		marginBottom: 0,
 		backgroundColor: "#fff",
-		borderBottomWidth: 1,
-		borderBottomColor: "#f0f0f5",
+		borderRadius: 8,
+		paddingHorizontal: 12,
+		paddingVertical: 8,
 	},
 	searchIcon: {
-		fontSize: 20,
+		fontSize: 16,
 		marginRight: 10,
-		color: "rgba(90, 90, 110, .5)",
+		color: Colours.TEXT_MID_ALPHA50,
 	},
 	searchText: {
 		flex: 1,
 		fontSize: 16,
 		fontFamily: "sf-regular",
 		color: Colours.TEXT_DARK,
+		padding: 0,
 	},
 	clearButton: {
-		padding: 8,
+		padding: 4,
 	},
 	clearIcon: {
-		fontSize: 18,
-		color: "rgba(90, 90, 110, .5)",
+		fontSize: 16,
+		color: Colours.TEXT_MID_ALPHA50,
 	},
 	noResultsContainer: {
-		flex: 1,
 		alignItems: "center",
 		justifyContent: "center",
 		paddingVertical: 40,

package/src/screens/RequestDetail.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import {
 	ScrollView,
 	View,
 	StyleSheet,
-	Text,
 	KeyboardAvoidingView,
 	TouchableOpacity,
 	ImageBackground,
@@ -40,6 +40,7 @@ class RequestDetail extends Component {
 			showStatusPopup: false,
 			showPriorityPopup: false,
 			loading: false,
+			loadError: false,
 			showFullscreenVideo: false,
 			currentVideoUrl: "",
 			galleryOpen: false,
@@ -54,6 +55,7 @@ class RequestDetail extends Component {
 		this.scrollView = React.createRef();
 		this.commentReply = React.createRef();
 		this.commentSection = React.createRef();
+		this.imagePopup = React.createRef();
 	}
 
 	componentDidMount() {
@@ -66,26 +68,45 @@ class RequestDetail extends Component {
 	}
 
 	getJob = async () => {
-		this.setState({ loading: true }, async () => {
+		this.setState({ loading: true, loadError: false }, async () => {
+			// Timeout fallback: if API doesn't respond in 15s, show error
+			const timeoutId = setTimeout(() => {
+				if (this.state.loading) {
+					this.setState({ loading: false, loadError: true });
+				}
+			}, 15000);
+
 			try {
 				const res = await maintenanceActions.getJob(
 					this.props.job.site,
 					this.props.job.id,
 				);
 				// console.log('getJob', JSON.stringify(res.data, null, 2));
-				this.props.jobAdded(res.data);
-				this.updateJobState(res.data);
-				// Refresh external sync data when job is refreshed
-				this.getExternalSync();
+				clearTimeout(timeoutId);
+				if (!this.state.loadError) {
+					this.props.jobAdded(res.data);
+					this.updateJobState(res.data);
+					// Refresh external sync data when job is refreshed
+					this.getExternalSync();
+				}
 			} catch (error) {
+				clearTimeout(timeoutId);
 				console.log("getJob error", error.toString());
-				// check for 403 or 404 error
-				if (error.response.status === 403 || error.response.status === 404) {
+				// Log full error details for debugging
+				console.log("getJob error details:", {
+					message: error.message,
+					code: error.code,
+					responseStatus: error.response?.status,
+					responseData: error.response?.data,
+				});
+				// check for 403 or 404 error (use optional chaining to prevent crash)
+				if (error.response?.status === 403 || error.response?.status === 404) {
 					this.setState({
 						forbidden: true,
 					});
+				} else {
+					this.setState({ loadError: true });
 				}
-				console.log("getJob error", error);
 			} finally {
 				this.setState({ loading: false });
 			}
@@ -157,7 +178,6 @@ class RequestDetail extends Component {
 				const res = await maintenanceActions.editJob(updated, user.site);
 				// console.log('markSeen updated');
 				this.props.jobAdded(res.data.job);
-				this.getJob();
 				this.setState({ loading: false, seen: true });
 			} catch (error) {
 				console.log("markSeen error", error);
@@ -319,6 +339,14 @@ class RequestDetail extends Component {
 		});
 	};
 
+	openGallery(galleryImages, index) {
+		this.setState({
+			galleryOpen: true,
+			galleryImages,
+		});
+		this.imagePopup.current.scrollTo(index);
+	}
+
 	hasPermission = () => {
 		const { job } = this.state;
 		const { permissions } = this.props.user;
@@ -339,14 +367,6 @@ class RequestDetail extends Component {
 		});
 	};
 
-	openGallery(galleryImages, index) {
-		this.setState({
-			galleryOpen: true,
-			galleryImages,
-		});
-		this.refs.imagePopup.scrollTo(index);
-	}
-
 	closeGallery() {
 		this.setState({
 			galleryOpen: false,
@@ -400,13 +420,16 @@ class RequestDetail extends Component {
 				<View style={styles.jobTitleContainer}>
 					{job.jobId ? (
 						<Text
+							maxFontSizeMultiplier={1.5}
 							style={[
 								styles.jobIdText,
 								{ color: this.props.colourBrandingMain },
 							]}
 						>{`${values.textEntityName} #${job.jobId}`}</Text>
 					) : null}
-					<Text style={styles.jobTitleText}>{job.title}</Text>
+					<Text style={styles.jobTitleText} maxFontSizeMultiplier={1.4}>
+						{job.title}
+					</Text>
 					<View style={styles.jobTypeSeenContainer}>
 						<View
 							style={[
@@ -453,7 +476,9 @@ class RequestDetail extends Component {
 
 					{job.lastActivityUnix && (
 						<View style={styles.textSectionInner}>
-							<Text style={styles.textSectionLabel}>Last Updated On</Text>
+							<Text style={styles.textSectionLabel} maxFontSizeMultiplier={1.5}>
+								Last Updated On
+							</Text>
 							<View style={styles.textSectionTextContainer}>
 								<Text style={styles.textSectionText}>
 									{moment(job.lastActivityUnix).format("ddd D MMMM, h:mm A")}
@@ -478,7 +503,9 @@ class RequestDetail extends Component {
 				<View style={styles.jobInfoContainer}>
 					<View style={styles.jobStatusExpectedContainer}>
 						<View style={styles.jobStatusOuterContainer}>
-							<Text style={styles.jobStatusHeading}>STATUS</Text>
+							<Text style={styles.jobStatusHeading} maxFontSizeMultiplier={1.5}>
+								STATUS
+							</Text>
 							<TouchableOpacity
 								onPress={canEdit ? this.onOpenStatusPicker : null}
 							>
@@ -488,7 +515,12 @@ class RequestDetail extends Component {
 										{ backgroundColor: statusOption.color },
 									]}
 								>
-									<Text style={styles.jobStatusText}>{statusOption?.text}</Text>
+									<Text
+										style={styles.jobStatusText}
+										maxFontSizeMultiplier={1.4}
+									>
+										{statusOption?.text}
+									</Text>
 								</View>
 							</TouchableOpacity>
 						</View>
@@ -656,7 +688,7 @@ class RequestDetail extends Component {
 				visible={this.state.galleryOpen}
 				images={this.state.galleryImages}
 				onClose={this.closeGallery.bind(this)}
-				ref="imagePopup"
+				ref={this.imagePopup}
 			/>
 		);
 	}
@@ -770,7 +802,7 @@ class RequestDetail extends Component {
 			switch (field.type) {
 				case "date":
 					return (
-						<Text style={styles.customText}>
+						<Text style={styles.customText} maxFontSizeMultiplier={1.5}>
 							{field.answer
 								? moment(field.answer, "YYYY-MM-DD").format("DD MMM YYYY")
 								: ""}
@@ -778,7 +810,7 @@ class RequestDetail extends Component {
 					);
 				case "time":
 					return (
-						<Text style={styles.customText}>
+						<Text style={styles.customText} maxFontSizeMultiplier={1.5}>
 							{field.answer
 								? moment(field.answer, "HH:mm").format("h:mm a")
 								: ""}
@@ -786,11 +818,13 @@ class RequestDetail extends Component {
 					);
 				case "yn":
 					return (
-						<Text style={styles.customText}>{field.answer ? "Yes" : "No"}</Text>
+						<Text style={styles.customText} maxFontSizeMultiplier={1.5}>
+							{field.answer ? "Yes" : "No"}
+						</Text>
 					);
 				case "checkbox":
 					return (
-						<Text style={styles.customText}>
+						<Text style={styles.customText} maxFontSizeMultiplier={1.5}>
 							{field.answer && Array.isArray(field.answer)
 								? field.answer.join(", ")
 								: ""}
@@ -809,7 +843,11 @@ class RequestDetail extends Component {
 						</View>
 					);
 				default:
-					return <Text style={styles.customText}>{field.answer}</Text>;
+					return (
+						<Text style={styles.customText} maxFontSizeMultiplier={1.5}>
+							{field.answer}
+						</Text>
+					);
 			}
 		};
 
@@ -823,7 +861,9 @@ class RequestDetail extends Component {
 				return null;
 			return (
 				<View key={index}>
-					<Text style={styles.customLabel}>{field.label}</Text>
+					<Text style={styles.customLabel} maxFontSizeMultiplier={1.5}>
+						{field.label}
+					</Text>
 					{renderAnswer(field)}
 				</View>
 			);
@@ -851,14 +891,21 @@ class RequestDetail extends Component {
 							<>
 								{this.renderImage(job.images, job.image)}
 								{!_.isEmpty(job.description) && (
-									<Text numberOfLines={10} style={styles.jobDescriptionText}>
+									<Text
+										style={styles.jobDescriptionText}
+										maxFontSizeMultiplier={1.5}
+									>
 										{job.description}
 									</Text>
 								)}
 							</>
 						) : null}
-						<Text style={styles.locationLabel}>Address</Text>
-						<Text style={styles.locationText}>{job.room}</Text>
+						<Text style={styles.locationLabel} maxFontSizeMultiplier={1.5}>
+							Address
+						</Text>
+						<Text style={styles.locationText} maxFontSizeMultiplier={1.5}>
+							{job.room}
+						</Text>
 						{!hasCustomFields && job.isHome ? (
 							<View style={styles.detailsSection}>
 								<Text style={styles.locationLabel}>Must be home</Text>
@@ -964,6 +1011,14 @@ class RequestDetail extends Component {
 		if (this.state.forbidden) {
 			return <Components.Forbidden />;
 		}
+		if (this.state.loadError) {
+			return (
+				<Components.Forbidden
+					title="Something went wrong"
+					description="Failed to load this request. Please check your connection and try again."
+				/>
+			);
+		}
 		return (
 			<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
 				<Components.Header
@@ -995,6 +1050,7 @@ class RequestDetail extends Component {
 					onCancel={this.onCloseDatePicker}
 					mode={this.state.popUpType}
 					headerTextIOS={`Pick a ${this.state.popUpType}`}
+					date={new Date()}
 				/>
 			</KeyboardAvoidingView>
 		);

package/src/screens/RequestNotes.js

@@ -1,8 +1,8 @@
 import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import {
 	ScrollView,
 	View,
-	Text,
 	TouchableOpacity,
 	Modal,
 	KeyboardAvoidingView,
@@ -18,7 +18,7 @@ import _ from "lodash";
 import moment from "moment";
 import { jobAdded } from "../actions";
 import { maintenanceActions } from "../apis";
-import { getBottomSpace } from "react-native-iphone-x-helper";
+import { withSafeAreaInsets } from "react-native-safe-area-context";
 import { Services } from "../feature.config";
 import { Components, Colours, Helper } from "../core.config";
 import { values } from "../values.config";
@@ -724,9 +724,7 @@ class RequestNotes extends Component {
 						style={styles.scrollContainer}
 						contentContainerStyle={styles.innerContainer}
 					>
-						<Components.TextStyle type="pageHeading">
-							Add Staff Note
-						</Components.TextStyle>
+						<Components.Text type="pageHeading">Add Staff Note</Components.Text>
 						<Components.GenericInputSection
 							label="Content"
 							placeholder="Insert your notes here..."
@@ -754,13 +752,20 @@ class RequestNotes extends Component {
 									this.renderAttachment(a, i),
 								)
 							) : (
-								<Components.TextStyle type="body" style={styles.attachmentInfo}>
+								<Components.Text type="body" style={styles.attachmentInfo}>
 									PDFs can only be attached to notes from the Community Manager.
-								</Components.TextStyle>
+								</Components.Text>
 							)}
 						</Components.GenericInputSection>
 					</ScrollView>
-					<View style={styles.popupFooter}>{this.renderFooterContent()}</View>
+					<View
+						style={[
+							styles.popupFooter,
+							{ paddingBottom: (this.props.insets?.bottom ?? 0) + 16 },
+						]}
+					>
+						{this.renderFooterContent()}
+					</View>
 					{this.renderVideoPlayerPopup()}
 				</KeyboardAvoidingView>
 			</Modal>
@@ -805,7 +810,7 @@ const styles = {
 	},
 	popupFooter: {
 		paddingHorizontal: 16,
-		paddingBottom: getBottomSpace() + 16,
+		paddingBottom: 16, // bottom inset added dynamically
 	},
 	noteContainer: {
 		...Helper.getShadowStyle(),
@@ -955,4 +960,6 @@ const mapStateToProps = (state) => {
 	};
 };
 
-export default connect(mapStateToProps, { jobAdded })(RequestNotes);
+export default connect(mapStateToProps, { jobAdded })(
+	withSafeAreaInsets(RequestNotes),
+);