@plusscommunities/pluss-feature-builder-app-d 1.0.1-beta.3

package/src/components/FeatureDetailScreen.js

@@ -0,0 +1,817 @@
+import React, { Component } from "react";
+import { SPACING } from "../js/spacing";
+import {
+	Platform,
+	View,
+	ScrollView,
+	Animated,
+	Dimensions,
+	StatusBar,
+	Text,
+	TouchableOpacity,
+	Linking,
+	StyleSheet,
+	KeyboardAvoidingView,
+	Image,
+} from "react-native";
+import { Icon } from "react-native-elements";
+import { connect } from "react-redux";
+import _ from "lodash";
+import { LinearGradient } from "expo-linear-gradient";
+import { Services } from "../feature.config";
+import {
+	Components,
+	Colours,
+	COLOUR_TRANSPARENT,
+	TEXT_DARK,
+} from "../core.config";
+import { TEXT_MID, LINEGREY } from "../js/Colors";
+import FileDownload from "./FileDownload";
+import { values } from "../values.config";
+import { selectFeatureDefinition } from "../reducers/featureBuilderReducer";
+
+import Constants from "expo-constants";
+import { InlineButton } from "./common";
+import { FIELD_TYPES } from "../js/FieldTypes";
+
+const SCREEN_HEIGHT = Dimensions.get("window").height;
+const CARD_IMAGE_HEIGHT = SCREEN_HEIGHT * 0.3;
+const SCREEN_WIDTH = Dimensions.get("window").width;
+
+// StatusBarHeight function copied to avoid import from outside extension
+const StatusBarHeight = (size) => {
+	return getStatusBarHeight() + size;
+};
+
+const getStatusBarHeight = () => {
+	return Platform.OS === "ios"
+		? Constants.statusBarHeight
+		: StatusBar.currentHeight;
+};
+
+class FeatureDetailScreen extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isHomeTab: false,
+			showImagePopup: false,
+			selectedImageIndex: 0,
+			allImages: [],
+		};
+	}
+
+	componentDidMount() {
+		this.setState({
+			isHomeTab: !Services.navigation.getParentRoute(),
+			allImages: this.collectAllImages(),
+		});
+	}
+
+	componentDidUpdate(prevProps) {
+		// Recalculate allImages when listing or featureDefinition changes
+		if (
+			prevProps.listing !== this.props.listing ||
+			prevProps.featureDefinition !== this.props.featureDefinition
+		) {
+			this.setState({ allImages: this.collectAllImages() });
+		}
+	}
+
+	componentWillUnmount() {
+		if (Platform.OS === "ios") StatusBar.setBarStyle("dark-content");
+	}
+
+	onPressBack = () => {
+		Services.navigation.goBack();
+	};
+
+	/**
+	 * Collect all images from listing fields
+	 */
+	collectAllImages = () => {
+		const { listing, featureDefinition } = this.props;
+		if (!listing || !listing.fields || !featureDefinition) {
+			return [];
+		}
+
+		const allImages = [];
+		const fieldDefinitions = featureDefinition.fields || [];
+
+		// Add primary feature image first
+		const primaryImage = listing.fields[values.mandatoryFields.featureImage];
+		if (primaryImage) {
+			const imageObj = this.normalizeImageField(primaryImage);
+			if (imageObj) {
+				allImages.push({
+					...imageObj,
+					fieldId: values.mandatoryFields.featureImage,
+					fieldLabel: values.labels.featureImage,
+				});
+			}
+		}
+
+		// Add additional image fields
+		fieldDefinitions.forEach((fieldDef) => {
+			if (
+				(fieldDef.type === FIELD_TYPES.IMAGE ||
+					fieldDef.type === FIELD_TYPES.GALLERY) &&
+				fieldDef.id !== values.mandatoryFields.featureImage
+			) {
+				const fieldValue = listing.fields[fieldDef.id];
+
+				if (fieldValue) {
+					if (fieldDef.type === FIELD_TYPES.GALLERY) {
+						// Handle Gallery (Array of images)
+						if (Array.isArray(fieldValue)) {
+							fieldValue.forEach((item) => {
+								const imageObj = this.normalizeImageField(item);
+								if (imageObj) {
+									allImages.push({
+										...imageObj,
+										fieldId: fieldDef.id,
+										fieldLabel: fieldDef.label || fieldDef.id,
+									});
+								}
+							});
+						}
+					} else {
+						// Handle Single Image
+						const imageObj = this.normalizeImageField(fieldValue);
+						if (imageObj) {
+							allImages.push({
+								...imageObj,
+								fieldId: fieldDef.id,
+								fieldLabel: fieldDef.label || fieldDef.id,
+							});
+						}
+					}
+				}
+			}
+		});
+
+		return allImages;
+	};
+
+	/**
+	 * Normalize image field to object format
+	 */
+	normalizeImageField = (imageField) => {
+		if (!imageField) return null;
+
+		if (typeof imageField === "string") {
+			return { uri: imageField, url: imageField };
+		}
+
+		if (typeof imageField === "object") {
+			if (imageField.uri) {
+				return { uri: imageField.uri, url: imageField.uri, ...imageField };
+			}
+			if (imageField.url) {
+				return { uri: imageField.url, url: imageField.url, ...imageField };
+			}
+		}
+
+		return null;
+	};
+
+	/**
+	 * Open image popup with all images
+	 */
+	openImagePopup = (imageIndex = 0) => {
+		const { allImages } = this.state;
+		if (allImages.length > 0) {
+			this.setState({
+				showImagePopup: true,
+				selectedImageIndex: imageIndex,
+			});
+		}
+	};
+
+	/**
+	 * Close image popup
+	 */
+	closeImagePopup = () => {
+		this.setState({
+			showImagePopup: false,
+			selectedImageIndex: 0,
+		});
+	};
+
+	/**
+	 * Process fields: filter out mandatory fields and sort by order
+	 */
+	processFields() {
+		const { listing, featureDefinition } = this.props;
+		if (!listing || !listing.fields || !featureDefinition) {
+			return [];
+		}
+
+		const fieldDefinitions = featureDefinition.fields || [];
+		const excludedFieldIds = new Set([
+			values.mandatoryFields.title,
+			values.mandatoryFields.featureImage,
+		]);
+
+		// Filter and map fields with their definitions
+		const filteredFields = Object.keys(listing.fields)
+			.filter((fieldId) => {
+				if (!fieldId || excludedFieldIds.has(fieldId)) return false;
+				if (listing.fields[fieldId] == null) return false;
+
+				// Only include fields that have definitions
+				const hasDefinition = fieldDefinitions.some((f) => f.id === fieldId);
+				if (!hasDefinition) {
+					return false;
+				}
+				return true;
+			})
+			.map((fieldId) => {
+				const fieldDefinition = fieldDefinitions.find(
+					(fieldDef) => fieldDef.id === fieldId,
+				);
+				return {
+					fieldId,
+					fieldValue: listing.fields[fieldId],
+					fieldDefinition,
+					fieldType: fieldDefinition?.type || FIELD_TYPES.TEXT,
+				};
+			});
+
+		// Sort by order property if available
+		return _.sortBy(
+			filteredFields,
+			(field) => field.fieldDefinition?.order || 999,
+		);
+	}
+
+	/**
+	 * Handle link opening for various field types
+	 */
+	handleLinkPress = (url) => {
+		if (url) {
+			Linking.openURL(url).catch((err) => {
+				// Silently handle URL open errors
+			});
+		}
+	};
+
+	handleFilePress = (file) => {
+		if (file?.url) {
+			Linking.openURL(file.url).catch((err) => {
+				// Silently handle URL open errors
+			});
+		}
+	};
+
+	/**
+	 * Render individual field based on its type
+	 */
+	renderField(fieldDef, fieldValue) {
+		const { colourBrandingMain } = this.props;
+
+		// Defensive: ensure fieldDef is always an object
+		const safeFieldDef = fieldDef || {};
+		const type = safeFieldDef.type || FIELD_TYPES.TEXT;
+		const label = safeFieldDef.label || safeFieldDef.id || "Unknown Field";
+
+		switch (type) {
+			case FIELD_TYPES.CTA: {
+				const btnLabel = fieldValue?.label || label;
+				const btnUrl = fieldValue?.url;
+				return (
+					<View style={styles.ctaContainer}>
+						<InlineButton
+							large
+							color={colourBrandingMain}
+							onPress={() => this.handleLinkPress(btnUrl)}
+						>
+							{btnLabel}
+						</InlineButton>
+					</View>
+				);
+			}
+
+			case FIELD_TYPES.EMAIL:
+				return (
+					<TouchableOpacity
+						style={styles.linkContainer}
+						onPress={() => this.handleLinkPress(`mailto:${fieldValue}`)}
+					>
+						<Icon
+							type="font-awesome"
+							name="envelope"
+							size={16}
+							color={colourBrandingMain}
+							style={styles.fieldIcon}
+						/>
+						<Text style={[styles.linkText, { color: colourBrandingMain }]}>
+							{fieldValue}
+						</Text>
+					</TouchableOpacity>
+				);
+
+			case FIELD_TYPES.DATE:
+				return (
+					<View style={styles.dateContainer}>
+						<Icon
+							type="font-awesome"
+							name="calendar"
+							size={16}
+							color={TEXT_DARK}
+							style={styles.fieldIcon}
+						/>
+						<Text style={styles.bodyText}>{fieldValue}</Text>
+					</View>
+				);
+
+			case FIELD_TYPES.FILE: {
+				// Handle both single file and multiple files (array)
+				const files = Array.isArray(fieldValue) ? fieldValue : [fieldValue];
+				return (
+					<View style={styles.filesContainer}>
+						<Text style={styles.sectionTitle}>{values.labels.attachments}</Text>
+						{files.map((file, index) => {
+							// Skip null/undefined files
+							if (!file) return null;
+
+							return (
+								<FileDownload
+									key={index}
+									file={file}
+									onPress={this.handleFilePress}
+									color={this.props.colourBrandingMain}
+								/>
+							);
+						})}
+					</View>
+				);
+			}
+
+			case FIELD_TYPES.DESCRIPTION:
+				return <Text style={styles.descriptionText}>{fieldValue}</Text>;
+
+			case FIELD_TYPES.IMAGE: {
+				// Render secondary images inline with click handler
+				const imgUri =
+					fieldValue?.url ||
+					fieldValue?.uri ||
+					(typeof fieldValue === "string" ? fieldValue : null);
+				if (!imgUri) return null;
+
+				// Find this image's index for popup
+				const { allImages } = this.state;
+				const imageIndex = allImages.findIndex(
+					(img) => img.uri === imgUri || img.url === imgUri,
+				);
+
+				const caption = fieldValue?.caption;
+
+				return (
+					<TouchableOpacity
+						onPress={() => this.openImagePopup(imageIndex)}
+						activeOpacity={0.8}
+					>
+						<Image
+							source={{ uri: imgUri }}
+							style={styles.inlineImage}
+							resizeMode="cover"
+						/>
+						{caption && <Text style={styles.imageCaption}>{caption}</Text>}
+					</TouchableOpacity>
+				);
+			}
+
+			case FIELD_TYPES.GALLERY: {
+				// Handle Gallery Fields (arrays of images)
+				if (!Array.isArray(fieldValue)) return null;
+
+				return (
+					<View style={{ marginVertical: 16 }}>
+						<View
+							style={{
+								flexDirection: "row",
+								flexWrap: "wrap",
+								marginHorizontal: -4,
+							}}
+						>
+							{fieldValue.map((imgItem, index) => {
+								const imgUri =
+									imgItem?.url ||
+									imgItem?.uri ||
+									(typeof imgItem === "string" ? imgItem : null);
+								if (!imgUri) return null;
+
+								// Find global index for the popup
+								const { allImages } = this.state;
+								const globalIndex = allImages.findIndex(
+									(img) => img.uri === imgUri || img.url === imgUri,
+								);
+
+								return (
+									<TouchableOpacity
+										key={index}
+										onPress={() =>
+											this.openImagePopup(globalIndex !== -1 ? globalIndex : 0)
+										}
+										activeOpacity={0.8}
+										style={{ width: "50%", padding: 4 }} // 2 column grid
+									>
+										<Image
+											source={{ uri: imgUri }}
+											style={[
+												styles.inlineImage,
+												{ height: 150, marginVertical: 0 },
+											]}
+											resizeMode="cover"
+										/>
+									</TouchableOpacity>
+								);
+							})}
+						</View>
+					</View>
+				);
+			}
+
+			case FIELD_TYPES.TITLE:
+				return <Text style={styles.titleText}>{fieldValue}</Text>;
+
+			case FIELD_TYPES.NUMBER:
+				return <Text style={styles.numberText}>{fieldValue}</Text>;
+
+			default:
+				// Default text fallback
+				return (
+					<Text style={styles.bodyText}>
+						{typeof fieldValue === "object"
+							? JSON.stringify(fieldValue)
+							: fieldValue}
+					</Text>
+				);
+		}
+	}
+
+	/**
+	 * Render all fields with proper spacing and structure
+	 */
+	renderFields() {
+		const processedFields = this.processFields();
+
+		return processedFields.map((field, _index) => {
+			return (
+				<View key={field.fieldId} style={styles.fieldContainer}>
+					{field.fieldType !== FIELD_TYPES.CTA &&
+						field.fieldType !== FIELD_TYPES.IMAGE &&
+						field.fieldDefinition?.label && (
+							<Text style={styles.fieldLabel}>
+								{field.fieldDefinition?.label}
+							</Text>
+						)}
+					{this.renderField(field.fieldDefinition, field.fieldValue)}
+				</View>
+			);
+		});
+	}
+
+	getImageSource() {
+		const { listing } = this.props;
+		if (!listing || !listing.fields) {
+			return null;
+		}
+
+		const imageField = listing.fields[values.mandatoryFields.featureImage];
+		if (!imageField) {
+			return null;
+		}
+
+		// Parse the image field value
+		if (typeof imageField === "string") {
+			return imageField;
+		}
+
+		return imageField?.uri || imageField?.url || null;
+	}
+
+	getTitle() {
+		const { listing } = this.props;
+		if (!listing || !listing.fields) {
+			return values.labels.defaultTitle;
+		}
+
+		return (
+			listing.fields[values.mandatoryFields.title] || values.labels.defaultTitle
+		);
+	}
+
+	render() {
+		const { listing } = this.props;
+		const imageSource = this.getImageSource();
+		const title = this.getTitle();
+
+		if (!listing || !listing.fields) {
+			return (
+				<View style={styles.centerContainer}>
+					<Text style={styles.errorText}>Item not found</Text>
+				</View>
+			);
+		}
+
+		return (
+			<KeyboardAvoidingView
+				behavior={Platform.OS === "ios" && "padding"}
+				style={{
+					position: "relative",
+					flex: 1,
+					backgroundColor: Colours.BACKGROUND_WHITE || "#fff",
+				}}
+			>
+				<View style={styles.backButton}>
+					<View style={styles.headerContent}>
+						<Components.BackButton
+							onPress={this.onPressBack}
+							style={{
+								marginLeft: 16,
+							}}
+						/>
+					</View>
+				</View>
+
+				<ScrollView
+					style={{ backgroundColor: Colours.BACKGROUND_WHITE || "#fff" }}
+					keyboardShouldPersistTaps="always"
+					ref={(ref) => {
+						this.scrollView = ref;
+					}}
+				>
+					<View style={[styles.mainHeader]}>
+						{imageSource ? (
+							<TouchableOpacity
+								onPress={() => this.openImagePopup(0)}
+								activeOpacity={0.9}
+							>
+								<Components.AutoOffsetImage
+									uri={imageSource}
+									height={CARD_IMAGE_HEIGHT}
+									width={SCREEN_WIDTH}
+								/>
+							</TouchableOpacity>
+						) : (
+							<View
+								style={[
+									styles.grayPlaceholder,
+									{ height: CARD_IMAGE_HEIGHT, width: SCREEN_WIDTH },
+								]}
+							/>
+						)}
+						<LinearGradient
+							style={styles.gradientOverlay}
+							colors={["rgba(0,0,0,0.7)", COLOUR_TRANSPARENT]}
+							start={{ x: 0, y: 0 }}
+							end={{ x: 0, y: 1 }}
+							locations={[0, 0.5]}
+						/>
+					</View>
+					<View style={{ paddingHorizontal: 16 }}>
+						<View style={styles.titleContainer}>
+							<Text style={styles.eventTitle}>{title}</Text>
+						</View>
+					</View>
+					<View style={{ minHeight: SCREEN_HEIGHT - CARD_IMAGE_HEIGHT - 56 }}>
+						{this.renderFields()}
+					</View>
+				</ScrollView>
+
+				{/* Image Popup */}
+				{this.state.showImagePopup && (
+					<Components.ImagePopup
+						visible={this.state.showImagePopup}
+						images={this.state.allImages}
+						index={this.state.selectedImageIndex}
+						onClose={this.closeImagePopup}
+					/>
+				)}
+			</KeyboardAvoidingView>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	backButton: {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		zIndex: 10,
+		elevation: 10,
+		height: StatusBarHeight(70),
+	},
+	headerContent: {
+		alignSelf: "stretch",
+		flexDirection: "row",
+		flex: 1,
+		paddingTop: StatusBarHeight(12),
+	},
+	image: {
+		backgroundColor: Colours.BACKGROUND_WHITE || "#fff",
+		position: "relative",
+		width: undefined,
+		height: undefined,
+		flex: 1,
+	},
+	mainHeader: {
+		position: "relative",
+		height: CARD_IMAGE_HEIGHT,
+		width: SCREEN_WIDTH,
+	},
+
+	gradientOverlay: {
+		flex: 1,
+	},
+
+	// Field container and spacing
+	fieldContainer: {
+		paddingHorizontal: 16,
+		marginVertical: 12,
+	},
+
+	// Field labels/captions
+	fieldLabel: {
+		fontFamily: "sf-regular",
+		fontSize: 11,
+		color: TEXT_MID,
+		marginBottom: 6,
+		textTransform: "uppercase",
+		letterSpacing: 1.2,
+		alignSelf: "center",
+		textAlign: "center",
+		paddingHorizontal: 8,
+		paddingVertical: 4,
+		backgroundColor: "rgba(0,0,0,0.03)",
+		borderRadius: 12,
+		maxWidth: "80%",
+	},
+
+	// Field type styles
+	bodyText: {
+		fontFamily: "sf-regular",
+		fontSize: 16,
+		color: TEXT_DARK,
+		lineHeight: 22,
+	},
+	titleText: {
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		fontWeight: "600",
+		color: TEXT_DARK,
+	},
+	descriptionText: {
+		fontFamily: "sf-regular",
+		fontSize: 16,
+		color: TEXT_DARK,
+		lineHeight: 24,
+	},
+	numberText: {
+		fontFamily: "sf-medium",
+		fontSize: 16,
+		fontWeight: "500",
+		color: TEXT_DARK,
+	},
+
+	// Link styles
+	linkContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingVertical: 4,
+	},
+	linkText: {
+		fontFamily: "sf-medium",
+		fontSize: 16,
+		textDecorationLine: "underline",
+	},
+
+	// Date styles
+	dateContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingVertical: 4,
+	},
+
+	// Image styles
+	inlineImage: {
+		width: "100%",
+		height: 200,
+		borderRadius: 8,
+		marginVertical: 8,
+	},
+	imageCaption: {
+		fontFamily: "sf-italic",
+		fontSize: 14,
+		fontStyle: "italic",
+		color: TEXT_MID,
+		marginTop: 4,
+		textAlign: "center",
+	},
+
+	// CTA styles
+	ctaContainer: {
+		alignItems: "center",
+		justifyContent: "center",
+		paddingVertical: 8,
+	},
+
+	// Section title styles
+	sectionTitle: {
+		fontFamily: "sf-bold",
+		fontSize: 14,
+		fontWeight: "700",
+		color: TEXT_DARK,
+		marginBottom: SPACING.SM,
+	},
+
+	// Icon styles
+	fieldIcon: {
+		marginRight: 8,
+	},
+
+	// Legacy styles (kept for compatibility)
+	section: {
+		paddingVertical: 16,
+	},
+	divider: {
+		height: 1,
+		backgroundColor: LINEGREY,
+		marginVertical: 8,
+		marginHorizontal: 16,
+	},
+	facilityDetailTitle: {
+		fontFamily: "sf-bold",
+		color: TEXT_DARK,
+		fontSize: 14,
+	},
+	facilityDetailContent: {
+		fontFamily: "sf-regular",
+		color: TEXT_DARK,
+		fontSize: 16,
+		lineHeight: 22,
+	},
+	facilityDetailsContainer: {
+		flex: 1,
+	},
+	facilityDetailsTextContainer: {
+		flex: 1,
+		justifyContent: "center",
+	},
+	facilityDetailContainer: {
+		marginTop: 16,
+		flexDirection: "row",
+	},
+	facilityDetailTitleContainer: {
+		width: 100,
+		marginRight: 10,
+	},
+	titleContainer: {
+		paddingVertical: 16,
+		paddingTop: 20,
+	},
+	eventTitle: {
+		fontFamily: "sf-bold",
+		fontSize: 24,
+		lineHeight: 32,
+		color: TEXT_DARK,
+		backgroundColor: "transparent",
+		flex: 1,
+	},
+	textLink: {
+		fontFamily: "sf-medium",
+		fontSize: 16,
+		lineHeight: 22,
+	},
+	grayPlaceholder: {
+		backgroundColor: LINEGREY,
+	},
+	centerContainer: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		paddingHorizontal: 20,
+	},
+	errorText: {
+		fontSize: 16,
+		color: TEXT_MID,
+		textAlign: "center",
+	},
+	filesContainer: {
+		marginVertical: 8,
+	},
+});
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+		colourBrandingHeader: Colours.getMainBrandingColourFromState(state),
+		featureDefinition: selectFeatureDefinition(state),
+		user: state.user,
+	};
+};
+
+export default connect(mapStateToProps, null, null, { forwardRef: true })(
+	FeatureDetailScreen,
+);