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

package/src/components/FeatureListItem.js

@@ -0,0 +1,198 @@
+import React from "react";
+import { Text, TouchableOpacity, View, StyleSheet, Image } from "react-native";
+import { Icon } from "react-native-elements";
+import _ from "lodash";
+import { Helper, Colours } from "../core.config";
+import { values } from "../values.config";
+
+import FieldRenderer from "./FieldRenderer";
+
+const FeatureListItem = ({
+	listing,
+	onItemPress,
+	colourBrandingMain,
+	style,
+	featureDefinition,
+}) => {
+	const getImageSource = (imageField) => {
+		if (!imageField) return null;
+
+		if (typeof imageField === "string") {
+			return { uri: imageField };
+		}
+
+		if (typeof imageField === "object" && imageField.uri) {
+			return imageField;
+		}
+
+		if (typeof imageField === "object" && imageField.url) {
+			return { uri: imageField.url };
+		}
+
+		return null;
+	};
+
+	const onPress = () => {
+		if (onItemPress) {
+			onItemPress(listing);
+		}
+	};
+
+	// Get data from feature builder fields
+	const title =
+		listing.fields?.[values.mandatoryFields.title] ||
+		values.labels.defaultTitle;
+	const description = listing.fields?.description || "";
+	const imageField = listing.fields?.[values.mandatoryFields.featureImage];
+	const imageSource = getImageSource(imageField);
+
+	// Get field definitions for type-aware rendering
+	const fieldDefinitions = featureDefinition?.fields || [];
+
+	// Use featureDefinitionId to determine the feature type, fallback to featureName
+	const getFeatureType = () => {
+		if (listing.featureDefinitionId) {
+			// Convert kebab-case to title case for display
+			return listing.featureDefinitionId
+				.split("-")
+				.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+				.join(" ");
+		}
+		return values.featureName || "Feature";
+	};
+
+	const featureType = getFeatureType();
+
+	// Render field content based on field definitions
+	const renderFieldContent = () => {
+		// Get non-mandatory fields to render
+		const nonMandatoryFields = fieldDefinitions.filter(
+			(fieldDef) =>
+				fieldDef.id !== values.mandatoryFields.title &&
+				fieldDef.id !== values.mandatoryFields.featureImage,
+		);
+
+		if (nonMandatoryFields.length === 0) {
+			return null;
+		}
+
+		return nonMandatoryFields.map((fieldDef) => {
+			const fieldValue = listing.fields[fieldDef.id];
+			if (!fieldValue) return null;
+
+			return (
+				<View key={fieldDef.id} style={styles.fieldContainer}>
+					<FieldRenderer
+						fieldId={fieldDef.id}
+						fieldValue={fieldValue}
+						fieldDefinition={fieldDef}
+						color={colourBrandingMain}
+					/>
+				</View>
+			);
+		});
+	};
+
+	return (
+		<TouchableOpacity onPress={onPress}>
+			<View style={[styles.container, style]}>
+				<View style={styles.innerContainer}>
+					<View style={styles.textContainer}>
+						<Text style={styles.titleText}>{title}</Text>
+						{!_.isEmpty(description) && (
+							<Text numberOfLines={3} style={styles.descriptionText}>
+								{description}
+							</Text>
+						)}
+						{renderFieldContent()}
+					</View>
+				</View>
+				<View style={styles.imageContainer}>
+					{imageSource ? (
+						<Image
+							source={imageSource}
+							style={styles.image}
+							resizeMode="cover"
+						/>
+					) : (
+						<View style={[styles.image, styles.placeholderImage]}></View>
+					)}
+				</View>
+			</View>
+		</TouchableOpacity>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		marginVertical: 8,
+		paddingHorizontal: 16,
+	},
+	innerContainer: {
+		height: values.dimensions.cardHeight,
+		marginLeft: 50,
+		...Helper.getShadowStyle(),
+		shadowOpacity: 0.25,
+		shadowRadius: 12,
+		elevation: 10,
+	},
+	textContainer: {
+		flex: 1,
+		marginLeft: 60,
+		marginVertical: 15,
+		paddingRight: 15,
+		justifyContent: "space-between",
+	},
+	titleText: {
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		color: Colours.TEXT_DARK,
+	},
+	descriptionText: {
+		fontFamily: "sf-regular",
+		fontSize: 12,
+		color: Colours.TEXT_LIGHT,
+		minHeight: 30,
+	},
+	typeContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	typeIcon: {
+		fontSize: 16,
+		color: Colours.TEXT_DARK,
+		marginRight: 6,
+	},
+	typeText: {
+		fontFamily: "sf-semibold",
+		fontSize: 12,
+		color: "#007AFF", // TODO: Add colour main here
+	},
+	imageContainer: {
+		position: "absolute",
+		top: 0,
+		left: 16,
+		bottom: 0,
+		justifyContent: "center",
+		elevation: 8,
+	},
+	image: {
+		width: values.dimensions.imageSize,
+		height: values.dimensions.imageSize,
+		resizeMode: "cover",
+		borderRadius: values.dimensions.imageBorderRadius,
+	},
+	placeholderImage: {
+		backgroundColor: "#808080",
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	placeholderText: {
+		fontSize: 24,
+	},
+	fieldContainer: {
+		marginTop: 8,
+	},
+});
+
+export default FeatureListItem;

package/src/components/FeatureListScreen.js

@@ -0,0 +1,160 @@
+import React, { Component } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { connect } from "react-redux";
+import { Components, Colours } from "../core.config";
+import { values } from "../values.config";
+import { loadTargetFeature } from "../actions/featureBuilderActions";
+
+// Helper function to title case a string
+const toTitleCase = (str) => {
+	if (!str) return str;
+	return str
+		.toLowerCase()
+		.split(" ")
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join(" ");
+};
+
+// Layouts
+import RoundImageList from "./layouts/RoundImageList";
+import CondensedList from "./layouts/CondensedList";
+import SquareImageList from "./layouts/SquareImageList";
+import FeatureImageList from "./layouts/FeatureImageList";
+
+class FeatureListScreen extends Component {
+	componentDidMount() {
+		// Trigger the fetch sequence
+		this.props.loadTargetFeature();
+	}
+
+	getLayoutComponent = (layoutType) => {
+		switch (layoutType) {
+			case values.layoutTypes.round:
+				return RoundImageList;
+			case values.layoutTypes.square:
+				return SquareImageList;
+			case values.layoutTypes.feature:
+				return FeatureImageList;
+			default:
+				return CondensedList;
+		}
+	};
+
+	render() {
+		const { definition, listings, loading, error, navigation, mainColor } =
+			this.props;
+
+		// 1. Error
+		if (error) {
+			return (
+				<View style={styles.container}>
+					<Components.Header
+						text="Error"
+						leftIcon="angle-left"
+						onPressLeft={() => navigation.goBack()}
+					/>
+					<View style={styles.center}>
+						<Text style={styles.errorText}>{error}</Text>
+						<Components.InlineButton onPress={this.props.loadTargetFeature}>
+							Retry
+						</Components.InlineButton>
+					</View>
+				</View>
+			);
+		}
+
+		// 2. Loading state with header
+		if (loading && !definition) {
+			const title = toTitleCase(values.featureName);
+			return (
+				<View style={styles.container}>
+					<Components.Header
+						text={title}
+						leftIcon="angle-left"
+						onPressLeft={() => navigation.goBack()}
+					/>
+					<Components.LoadingIndicator visible={true} />
+				</View>
+			);
+		}
+
+		// 3. Render List
+		if (definition) {
+			// Since we flattened the data, definition.layout is now available directly
+			const layoutType = definition.layout?.type || "condensed";
+			const LayoutComponent = this.getLayoutComponent(layoutType);
+			const title = toTitleCase(definition.title || values.featureName);
+
+			return (
+				<View style={styles.container}>
+					<Components.Header
+						text={title}
+						leftIcon="angle-left"
+						onPressLeft={() => navigation.goBack()}
+					/>
+
+					<LayoutComponent
+						listings={listings}
+						featureDefinition={definition}
+						colourBrandingMain={mainColor}
+						title={title}
+						onItemPress={(item) => {
+							navigation.navigate(values.screens.featureDetail, {
+								listing: item,
+								featureDefinition: definition,
+								featureTitle: title,
+							});
+						}}
+						refreshing={loading}
+						onRefresh={this.props.loadTargetFeature}
+					/>
+				</View>
+			);
+		}
+
+		// 4. Default empty state - should not reach here if logic is correct
+		return (
+			<View style={styles.container}>
+				<Components.Header
+					text={toTitleCase(values.featureName)}
+					leftIcon="angle-left"
+					onPressLeft={() => navigation.goBack()}
+				/>
+				<View style={styles.center}>
+					<Components.EmptyStateWidget
+						title="Feature not available"
+						height={120}
+					/>
+				</View>
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	container: { flex: 1, backgroundColor: "#fff" },
+	center: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		padding: 20,
+	},
+	errorText: {
+		marginBottom: 10,
+		fontSize: 16,
+		color: "#666",
+		textAlign: "center",
+	},
+});
+
+const mapStateToProps = (state) => ({
+	definition: state[values.reducerKey]?.feature,
+	listings: state[values.reducerKey]?.listings,
+	loading: state[values.reducerKey]?.loading,
+	error: state[values.reducerKey]?.error,
+	mainColor: Colours.getMainBrandingColourFromState(state),
+});
+
+export default connect(mapStateToProps, { loadTargetFeature })(
+	FeatureListScreen,
+);

package/src/components/FieldRenderer.js

@@ -0,0 +1,272 @@
+import React from "react";
+import {
+	Text,
+	View,
+	StyleSheet,
+	TouchableOpacity,
+	Linking,
+} from "react-native";
+import { Icon } from "react-native-elements";
+import { Colours, Components, Helper } from "../core.config";
+import { Attachment, InlineButton } from "./common";
+import {
+	FIELD_TYPES,
+	isCTAField,
+	isImageField,
+	isLinkField,
+} from "../js/FieldTypes";
+import { SPACING } from "../js/spacing";
+
+/**
+ * Smart Field Renderer Component
+ * Renders different field types based on field definition and value
+ */
+const FieldRenderer = ({
+	fieldId,
+	fieldValue,
+	fieldDefinition,
+	onFieldPress,
+	color,
+	style,
+}) => {
+	const fieldType = fieldDefinition?.type;
+	const fieldLabel = fieldDefinition?.values?.label || fieldId;
+
+	const handleLinkPress = (url) => {
+		if (url) {
+			Linking.openURL(url).catch((err) => {
+				// Silently handle URL open errors
+			});
+		}
+	};
+
+	// If no field type, try to infer from value structure
+	if (!fieldType) {
+		if (isCTAField(fieldValue)) {
+			return (
+				<InlineButton
+					large
+					color={color || Colours.BRANDING_MAIN}
+					style={style}
+					onPress={() => fieldValue?.url && handleLinkPress(fieldValue.url)}
+				>
+					{fieldValue?.label || fieldLabel}
+				</InlineButton>
+			);
+		}
+
+		if (isImageField(fieldValue)) {
+			// Handle image fields - typically rendered elsewhere in layouts
+			return null;
+		}
+
+		if (isLinkField(fieldValue)) {
+			return (
+				<TouchableOpacity
+					style={[styles.linkContainer, style]}
+					onPress={() => handleLinkPress(fieldValue)}
+				>
+					<Icon
+						type="font-awesome"
+						name="link"
+						size={16}
+						color={color || Colours.BRANDING_MAIN}
+						style={styles.linkIcon}
+					/>
+					<Text
+						style={[styles.linkText, { color: color || Colours.BRANDING_MAIN }]}
+						numberOfLines={2}
+					>
+						{fieldValue}
+					</Text>
+				</TouchableOpacity>
+			);
+		}
+
+		// Default to text field
+		return (
+			<>
+				<Text style={[styles.text, style]} numberOfLines={3}>
+					{fieldValue}
+				</Text>
+			</>
+		);
+	}
+
+	// Type-based rendering
+	switch (fieldType) {
+		case FIELD_TYPES.CTA:
+			return (
+				<InlineButton
+					large
+					color={color || Colours.BRANDING_MAIN}
+					style={style}
+					onPress={() => fieldValue?.url && handleLinkPress(fieldValue.url)}
+				>
+					{fieldValue?.label || fieldLabel}
+				</InlineButton>
+			);
+
+		case FIELD_TYPES.TITLE:
+		case FIELD_TYPES.TEXT:
+			return (
+				<Text style={[styles.text, styles.titleText, style]} numberOfLines={2}>
+					{fieldValue}
+				</Text>
+			);
+
+		case FIELD_TYPES.DESCRIPTION:
+			return (
+				<Text style={[styles.text, styles.descriptionText, style]}>
+					{fieldValue}
+				</Text>
+			);
+
+		case FIELD_TYPES.EMAIL:
+			return (
+				<TouchableOpacity
+					style={[styles.linkContainer, style]}
+					onPress={() => handleLinkPress(`mailto:${fieldValue}`)}
+				>
+					<Icon
+						type="font-awesome"
+						name="envelope"
+						size={16}
+						color={color || Colours.BRANDING_MAIN}
+						style={styles.linkIcon}
+					/>
+					<Text
+						style={[styles.linkText, { color: color || Colours.BRANDING_MAIN }]}
+						numberOfLines={1}
+					>
+						{fieldValue}
+					</Text>
+				</TouchableOpacity>
+			);
+
+		case FIELD_TYPES.NUMBER:
+			return (
+				<Text style={[styles.text, styles.numberText, style]}>
+					{fieldValue}
+				</Text>
+			);
+
+		case FIELD_TYPES.DATE:
+			return (
+				<View style={[styles.dateContainer, style]}>
+					<Icon
+						type="font-awesome"
+						name="calendar"
+						size={16}
+						color={Colours.TEXT_LIGHT}
+						style={styles.dateIcon}
+					/>
+					<Text style={[styles.text, styles.dateText]}>{fieldValue}</Text>
+				</View>
+			);
+
+		case FIELD_TYPES.IMAGE:
+		case FIELD_TYPES.FEATURE_IMAGE:
+			// Images are typically rendered by the layout components
+			return null;
+
+		case FIELD_TYPES.FILE:
+			// Handle both single file and multiple files (array)
+			const files = Array.isArray(fieldValue) ? fieldValue : [fieldValue];
+			return (
+				<View style={styles.filesContainer}>
+					{files.map((file, index) => {
+						// Skip null/undefined files
+						if (!file) return null;
+
+						return (
+							<Attachment
+								key={index}
+								onPress={() => onFieldPress && onFieldPress(fieldId, file)}
+								title={file?.name || file?.url?.split("/").pop() || "Document"}
+							/>
+						);
+					})}
+				</View>
+			);
+
+		default:
+			return (
+				<Text style={[styles.text, style]} numberOfLines={3}>
+					{fieldValue}
+				</Text>
+			);
+	}
+};
+
+const styles = StyleSheet.create({
+	text: {
+		fontFamily: "sf-regular",
+		fontSize: 16,
+		color: Colours.TEXT_DARK,
+	},
+	titleText: {
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		fontWeight: "600",
+	},
+	descriptionText: {
+		fontFamily: "sf-regular",
+		fontSize: 14,
+		lineHeight: 20,
+		marginVertical: 12,
+	},
+	numberText: {
+		fontFamily: "sf-medium",
+		fontSize: 16,
+		fontWeight: "500",
+	},
+	linkContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingVertical: SPACING.XS,
+	},
+	linkIcon: {
+		marginRight: SPACING.SM,
+	},
+	linkText: {
+		fontFamily: "sf-medium",
+		fontSize: 16,
+		textDecorationLine: "underline",
+	},
+	dateContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingVertical: SPACING.XS,
+	},
+	dateIcon: {
+		marginRight: SPACING.SM,
+	},
+	dateText: {
+		fontFamily: "sf-regular",
+		fontSize: 14,
+		color: Colours.TEXT_LIGHT,
+	},
+	fileContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingVertical: SPACING.XS,
+		backgroundColor: Colours.BACKGROUND_LIGHT,
+		padding: SPACING.SM,
+		borderRadius: SPACING.XS,
+	},
+	fileIcon: {
+		marginRight: SPACING.SM,
+	},
+	fileText: {
+		fontFamily: "sf-medium",
+		fontSize: 14,
+		flex: 1,
+	},
+	// File container for multiple attachments
+	filesContainer: {
+		marginVertical: SPACING.XS,
+	},
+});
+
+export default FieldRenderer;

package/src/components/FileDownload.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { Icon } from "react-native-elements";
+import { Colours } from "../core.config";
+import { SPACING } from "../js/spacing";
+import { TEXT_DARK } from "../core.config";
+
+const FileDownload = ({ file, onPress, color, style }) => {
+	const fileName =
+		file?.name ||
+		(file?.url && file.url.split("?")[0].split("#")[0].split("/").pop()) ||
+		"Document";
+	const downloadColor = color || Colours.BRANDING_MAIN;
+
+	return (
+		<TouchableOpacity
+			style={[styles.container, style]}
+			onPress={() => onPress && onPress(file)}
+		>
+			<View style={styles.extensionIcon}>
+				<Icon
+					name="paperclip"
+					type="font-awesome"
+					size={16}
+					color={downloadColor}
+				/>
+			</View>
+
+			<View style={styles.textContainer}>
+				<Text style={[styles.fileName, { color: TEXT_DARK }]} numberOfLines={1}>
+					{fileName}
+				</Text>
+				<Icon
+					name="download"
+					type="font-awesome"
+					size={16}
+					color={downloadColor}
+				/>
+			</View>
+		</TouchableOpacity>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingVertical: SPACING.SM,
+		paddingRight: SPACING.MD,
+		backgroundColor: "#ffffff",
+		borderRadius: SPACING.XS,
+		marginVertical: SPACING.XS / 2,
+	},
+	extensionIcon: {
+		width: 32,
+		height: 32,
+		borderRadius: SPACING.XS / 2,
+		justifyContent: "center",
+		alignItems: "center",
+		backgroundColor: "#f5f5f5",
+	},
+	textContainer: {
+		flex: 1,
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+	},
+	fileName: {
+		fontFamily: "sf-medium",
+		fontSize: 16,
+		fontWeight: "600",
+		lineHeight: 20,
+		flex: 1,
+		marginRight: SPACING.SM,
+		marginLeft: SPACING.SM,
+	},
+});
+
+export default FileDownload;