@plusscommunities/pluss-feature-builder-app-d 8.0.8-beta.0 → 8.0.9

package/src/components/WidgetLarge.js

@@ -1,23 +1,22 @@
-import React, { Component } from "react";
-import {
-	Text,
-	View,
-	ScrollView,
-	StyleSheet,
-	TouchableOpacity,
-	Image,
-} from "react-native";
-import { connect } from "react-redux";
-import _ from "lodash";
-import { FontAwesome } from "@expo/vector-icons";
-import { Services } from "../feature.config";
-import { Components, Colours } from "../core.config";
-import { values } from "../values.config";
-import { selectListings, selectFeatureDefinition } from "../utils/selectors";
-import { SPACING } from "../js/spacing";
-import { getMainBrandingColourFromState } from "../js";
-import { getSummaryFieldValue } from "../js/helpers";
-import { loadTargetFeature } from "../actions/featureBuilderActions";
+import React, { Component } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import { FontAwesome } from '@expo/vector-icons';
+import { Services } from '../feature.config';
+import { Components, Colours } from '../core.config';
+import { values } from '../values.config';
+import { selectListings, selectFeatureDefinition } from '../utils/selectors';
+import { SPACING } from '../js/spacing';
+import { getMainBrandingColourFromState } from '../js';
+import { getSummaryFieldValue } from '../js/helpers';
+import { loadTargetFeature } from '../actions/featureBuilderActions';
+
+// Layouts
+import RoundImageList from './layouts/RoundImageList';
+import CondensedList from './layouts/CondensedList';
+import SquareImageList from './layouts/SquareImageList';
+import FeatureImageList from './layouts/FeatureImageList';
 
 class WidgetLarge extends Component {
 	constructor(props) {
@@ -42,22 +41,34 @@ class WidgetLarge extends Component {
 		if (featureDefinition?.title || featureDefinition?.displayName) {
 			return featureDefinition.title || featureDefinition.displayName;
 		}
-		return values.featureName || "Custom Features";
+		return values.featureName || 'Custom Features';
 	};
 
 	getEmptyStateText = () => {
-		const { options } = this.props;
+		const { options, featureDefinition } = this.props;
 		if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
-		return "No custom features available";
+
+		const featureName = featureDefinition?.title || featureDefinition?.displayName || values.featureName || 'Feature';
+		return `No listings for ${featureName}`;
+	};
+
+	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;
+		}
 	};
 
 	refresh = () => {
 		this.onLoadingChanged(true, async () => {
 			try {
-				await loadTargetFeature()(
-					this.props.dispatch,
-					() => this.props.getState,
-				);
+				await this.props.dispatch(loadTargetFeature());
 			} finally {
 				this.onLoadingChanged(false);
 			}
@@ -66,138 +77,65 @@ class WidgetLarge extends Component {
 
 	onLoadingChanged = (loading, callback) => {
 		this.setState({ loading }, () => {
-			if (this.props.onLoadingChanged)
-				this.props.onLoadingChanged(this.state.loading);
+			if (this.props.onLoadingChanged) this.props.onLoadingChanged(this.state.loading);
 			if (callback) callback();
 		});
 	};
 
-	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;
-	};
-
-	onListingPress = (listing) => {
+	onItemPress = item => {
 		const { featureDefinition } = this.props;
-		const title = this.getTitle();
-		Services.navigation.navigate(values.screens.featureDetail, {
-			listing: listing,
-			featureDefinition: featureDefinition,
-			featureTitle: title,
-		});
-	};
-
-	renderListingCard = (listing) => {
-		const { colourBrandingMain, featureDefinition } = this.props;
-		const title = listing.fields?.[values.mandatoryFields.title] || "Untitled";
-		const summary = getSummaryFieldValue(listing, featureDefinition);
-		const imageField = listing.fields?.[values.mandatoryFields.featureImage];
-		const imageSource = this.getImageSource(imageField);
-
-		return (
-			<TouchableOpacity
-				key={listing.id}
-				style={styles.listItem}
-				onPress={() => this.onListingPress(listing)}
-			>
-				{/* Small circular avatar image */}
-				<View style={styles.avatarContainer}>
-					{imageSource ? (
-						<Image
-							source={imageSource}
-							style={styles.avatar}
-							resizeMode="cover"
-						/>
-					) : (
-						<View style={[styles.avatar, styles.placeholderAvatar]}>
-							<FontAwesome name="image" size={16} color={Colours.TEXT_LIGHT} />
-						</View>
-					)}
-				</View>
-
-				{/* Text content */}
-				<View style={styles.textContainer}>
-					<Text style={styles.titleText} numberOfLines={1}>
-						{title}
-					</Text>
-					{summary && (
-						<Text style={styles.descriptionText} numberOfLines={1}>
-							{summary}
-						</Text>
-					)}
-				</View>
-
-				{/* Chevron icon */}
-				<View style={styles.chevronContainer}>
-					<FontAwesome
-						name="chevron-right"
-						size={14}
-						color={Colours.TEXT_LIGHT}
-					/>
-				</View>
-			</TouchableOpacity>
-		);
+		if (featureDefinition) {
+			Services.navigation.navigate(values.screens.featureDetail, {
+				listing: item,
+				featureDefinition: featureDefinition,
+				featureTitle: featureDefinition.title || featureDefinition.displayName,
+			});
+		}
 	};
 
 	renderContent() {
-		const { listings } = this.props;
+		const { listings, featureDefinition, colourBrandingMain } = this.props;
 
-		// Don't render widget if no listings are available (and not loading)
-		if (_.isEmpty(listings) && !this.state.loading) {
-			return null;
+		// Show loading state if no definition or loading
+		if (!featureDefinition || this.state.loading) {
+			return (
+				<View style={styles.loadingPadding}>
+					<Components.LoadingStateWidget height={300} />
+				</View>
+			);
 		}
 
+		// Show empty state if no listings are available
 		if (_.isEmpty(listings)) {
-			if (this.state.loading) {
-				return (
-					<View style={styles.loadingPadding}>
-						<Components.LoadingStateWidget height={300} />
-					</View>
-				);
-			}
-			return null;
+			return (
+				<View style={styles.emptyPadding}>
+					<Components.EmptyStateWidget title={this.getTitle()} height={120} />
+				</View>
+			);
 		}
 
+		const layoutType = featureDefinition.layout?.type || 'condensed';
+		const LayoutComponent = this.getLayoutComponent(layoutType);
+		const title = this.getTitle();
+
 		return (
-			<ScrollView
-				contentContainerStyle={styles.featuresContainer}
-				showsVerticalScrollIndicator={false}
-			>
-				{listings.map((listing) => this.renderListingCard(listing))}
-			</ScrollView>
+			<LayoutComponent
+				listings={listings}
+				featureDefinition={featureDefinition}
+				colourBrandingMain={colourBrandingMain}
+				title={title}
+				onItemPress={this.onItemPress}
+			/>
 		);
 	}
 
 	render() {
-		const { colourBrandingMain } = this.props;
-
-		const content = this.renderContent();
-		// Don't render widget section if content is null (no features available)
-		if (content === null) {
-			return null;
-		}
-
 		return (
 			<View style={styles.sectionContainer}>
 				<View style={styles.sectionPadding}>
-					<View style={styles.sectionHeading}>
-						<Text style={styles.sectionTitle}>{this.getTitle()}</Text>
-					</View>
+					<Text style={styles.sectionTitle}>{this.getTitle()}</Text>
 				</View>
-				{content}
+				{this.renderContent()}
 			</View>
 		);
 	}
@@ -205,7 +143,7 @@ class WidgetLarge extends Component {
 
 const styles = StyleSheet.create({
 	sectionContainer: {
-		backgroundColor: "#fff",
+		backgroundColor: '#fff',
 		flex: 1,
 	},
 	sectionPadding: {
@@ -216,65 +154,17 @@ const styles = StyleSheet.create({
 	loadingPadding: {
 		paddingHorizontal: SPACING.MD,
 	},
-	sectionHeading: {
-		marginBottom: SPACING.MD,
+	emptyPadding: {
+		paddingHorizontal: SPACING.MD,
 	},
 	sectionTitle: {
-		fontFamily: "sf-bold",
+		fontFamily: 'sf-bold',
 		fontSize: 24,
-		color: "#000",
-	},
-	featuresContainer: {
-		paddingHorizontal: SPACING.MD,
-		paddingBottom: SPACING.MD,
-	},
-	// Listing item styles (similar to CondensedListItem)
-	listItem: {
-		flexDirection: "row",
-		alignItems: "center",
-		paddingHorizontal: 16,
-		paddingVertical: 8,
-		backgroundColor: "#fff",
-	},
-	avatarContainer: {
-		width: 40,
-		height: 40,
-		borderRadius: 20,
-		marginRight: 12,
-	},
-	avatar: {
-		width: 40,
-		height: 40,
-		borderRadius: 20,
-		backgroundColor: Colours.BACKGROUND_LIGHT || "#f0f0f0",
-	},
-	placeholderAvatar: {
-		backgroundColor: Colours.BACKGROUND_LIGHT || "#f0f0f0",
-		justifyContent: "center",
-		alignItems: "center",
-	},
-	textContainer: {
-		flex: 1,
-		justifyContent: "center",
-	},
-	titleText: {
-		fontFamily: "sf-semibold",
-		fontSize: 16,
-		color: Colours.TEXT_DARK || "#333",
-		marginBottom: 2,
-	},
-	descriptionText: {
-		fontFamily: "sf-regular",
-		fontSize: 14,
-		color: Colours.TEXT_LIGHT || "#666",
-		lineHeight: 18,
-	},
-	chevronContainer: {
-		paddingLeft: 8,
+		color: '#000',
 	},
 });
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
 	const { user, notifications } = state;
 
 	return {
@@ -287,6 +177,4 @@ const mapStateToProps = (state) => {
 	};
 };
 
-export default connect(mapStateToProps, null, null, { forwardRef: true })(
-	WidgetLarge,
-);
+export default connect(mapStateToProps, null, null, { forwardRef: true })(WidgetLarge);