@plusscommunities/pluss-maintenance-app-forms 8.0.17 → 8.0.18

package/src/components/FilterPopupMenu.js

@@ -6,12 +6,11 @@ import {
 	Modal,
 	ScrollView,
 	Dimensions,
+	Platform,
 } from "react-native";
-import {
-	SafeAreaProvider,
-	SafeAreaView,
-} from "react-native-safe-area-context";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
+import { withSafeAreaInsets } from "react-native-safe-area-context";
 import _ from "lodash";
 import { maintenanceActions } from "../apis";
 import { Colours, Helper } from "../core.config";
@@ -162,9 +161,16 @@ class FilterPopupMenu extends Component {
 
 	renderCancel() {
 		const { colourBrandingMain, cancelText } = this.props;
+		const bottom =
+			Platform.OS === "android" ? (this.props.insets?.bottom ?? 0) : 0;
 		return (
 			<TouchableOpacity onPress={this.onDone}>
-				<View style={styles.cancelContainer}>
+				<View
+					style={[
+						styles.cancelContainer,
+						bottom > 0 && { paddingBottom: 16 + bottom },
+					]}
+				>
 					<Text style={[styles.cancelText, { color: colourBrandingMain }]}>
 						{cancelText || "Done"}
 					</Text>
@@ -357,4 +363,7 @@ const mapStateToProps = (state) => {
 	};
 };
 
-export default connect(mapStateToProps, {})(FilterPopupMenu);
+export default connect(
+	mapStateToProps,
+	{},
+)(withSafeAreaInsets(FilterPopupMenu));

package/src/components/MaintenanceList.js

@@ -1,6 +1,12 @@
 import React, { Component } from "react";
 import { Text } from "@plusscommunities/pluss-core-app/components";
-import { View, StyleSheet, FlatList, TouchableOpacity, Animated } from "react-native";
+import {
+	View,
+	StyleSheet,
+	FlatList,
+	TouchableOpacity,
+	Animated,
+} from "react-native";
 import _ from "lodash";
 import { connect } from "react-redux";
 import { maintenanceActions } from "../apis";
@@ -62,7 +68,9 @@ class MaintenanceList extends Component {
 		const incompleteStatuses = statusTypes
 			.filter((s) => s.category !== "Completed")
 			.map((s) => s.text);
-		return incompleteStatuses.length > 0 ? incompleteStatuses.join(",") : status;
+		return incompleteStatuses.length > 0
+			? incompleteStatuses.join(",")
+			: status;
 	};
 
 	refresh = (overrideFilters) => {
@@ -443,10 +451,7 @@ class MaintenanceList extends Component {
 
 		return (
 			<Animated.View
-				style={[
-					styles.filterOverlay,
-					{ opacity: this._overlayOpacity },
-				]}
+				style={[styles.filterOverlay, { opacity: this._overlayOpacity }]}
 				pointerEvents="none"
 			>
 				<View style={styles.filterOverlayInner}>

package/src/screens/RequestDetail.js

@@ -420,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={[
@@ -473,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")}
@@ -498,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}
 							>
@@ -508,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>
@@ -790,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")
 								: ""}
@@ -798,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")
 								: ""}
@@ -806,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(", ")
 								: ""}
@@ -829,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>
+					);
 			}
 		};
 
@@ -843,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>
 			);
@@ -871,14 +891,21 @@ class RequestDetail extends Component {
 							<>
 								{this.renderImage(job.images, job.image)}
 								{!_.isEmpty(job.description) && (
-									<Text 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>

package/src/screens/RequestNotes.js

@@ -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";
@@ -758,7 +758,14 @@ class RequestNotes extends Component {
 							)}
 						</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>
@@ -803,7 +810,7 @@ const styles = {
 	},
 	popupFooter: {
 		paddingHorizontal: 16,
-		paddingBottom: getBottomSpace() + 16,
+		paddingBottom: 16, // bottom inset added dynamically
 	},
 	noteContainer: {
 		...Helper.getShadowStyle(),
@@ -953,4 +960,6 @@ const mapStateToProps = (state) => {
 	};
 };
 
-export default connect(mapStateToProps, { jobAdded })(RequestNotes);
+export default connect(mapStateToProps, { jobAdded })(
+	withSafeAreaInsets(RequestNotes),
+);

package/src/screens/ServiceRequest.js

@@ -572,9 +572,10 @@ class MaintenanceRequest extends Component {
 			return field;
 		});
 
-		const userID = this.state.canCreateOnBehalf && this.state.selectedUser
-			? (this.state.selectedUser.userId || this.state.selectedUser.Id)
-			: this.props.uid;
+		const userID =
+			this.state.canCreateOnBehalf && this.state.selectedUser
+				? this.state.selectedUser.userId || this.state.selectedUser.Id
+				: this.props.uid;
 
 		maintenanceActions
 			.sendMaintenanceRequest(