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

package/src/components/WidgetSmall.js

@@ -1,23 +1,20 @@
-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 { 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 { 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 WidgetSmall extends Component {
 	constructor(props) {
@@ -42,22 +39,34 @@ class WidgetSmall extends Component {
 		if (featureDefinition?.title || featureDefinition?.displayName) {
 			return featureDefinition.title || featureDefinition.displayName;
 		}
-		return values.featureName || "Features";
+		return values.featureName || 'Features';
 	};
 
 	getEmptyStateText = () => {
-		const { options } = this.props;
+		const { options, featureDefinition } = this.props;
 		if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
-		return values.labels.emptyState;
+
+		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,156 +75,65 @@ class WidgetSmall 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();
 		});
 	};
 
-	onPressAll = () => {
-		Services.navigation.navigate(values.screens.featureList, {
-			options: this.props.options,
-		});
-	};
-
-	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.cardContainer}
-				onPress={() => this.onListingPress(listing)}
-			>
-				<View style={styles.borderContainer}>
-					{imageSource ? (
-						<Image
-							source={imageSource}
-							style={styles.cardImage}
-							resizeMode="cover"
-						/>
-					) : (
-						<View style={[styles.cardImage, styles.placeholderImage]}>
-							<FontAwesome name="image" size={24} color={Colours.TEXT_LIGHT} />
-						</View>
-					)}
-					<Text style={styles.cardTitle} numberOfLines={1}>
-						{title}
-					</Text>
-					{summary && (
-						<Text style={styles.cardSummary} numberOfLines={1}>
-							{summary}
-						</Text>
-					)}
-				</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={180} />
+				</View>
+			);
 		}
 
+		// Show empty state if no listings are available
 		if (_.isEmpty(listings)) {
-			if (this.state.loading) {
-				return (
-					<View style={styles.loadingPadding}>
-						<Components.LoadingStateWidget height={180} />
-					</View>
-				);
-			}
-			return null;
+			return (
+				<View style={styles.emptyPadding}>
+					<Components.EmptyStateWidget title={this.getTitle()} height={120} />
+				</View>
+			);
 		}
 
-		// Show first 3 listings with peeking indicator
-		const listingsToShow = listings.slice(0, values.widget.maxItems);
+		const layoutType = featureDefinition.layout?.type || 'condensed';
+		const LayoutComponent = this.getLayoutComponent(layoutType);
+		const title = this.getTitle();
 
 		return (
-			<ScrollView
-				horizontal
-				contentContainerStyle={{
-					paddingLeft: SPACING.XS + 2,
-					paddingRight: SPACING.SM,
-				}}
-				showsHorizontalScrollIndicator={false}
-			>
-				{listingsToShow.map((listing) => this.renderListingCard(listing))}
-				{listings.length > values.widget.maxItems && (
-					<TouchableOpacity
-						style={[styles.cardContainer, styles.viewMoreCard]}
-						onPress={this.onPressAll}
-					>
-						<View style={[styles.borderContainer, styles.viewMoreContainer]}>
-							<Text style={styles.viewMoreText}>View all</Text>
-							<Text style={styles.viewMoreCount}>{listings.length} items</Text>
-						</View>
-					</TouchableOpacity>
-				)}
-			</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>
-						<Components.InlineButton
-							onPress={this.onPressAll}
-							color={colourBrandingMain}
-							touchableStyle={{ paddingTop: SPACING.XS + 2 }}
-							textStyle={{ color: "#fff" }}
-						>
-							{values.labels.viewAll}
-						</Components.InlineButton>
-					</View>
+					<Text style={styles.sectionTitle}>{this.getTitle()}</Text>
 				</View>
-				{content}
+				{this.renderContent()}
 			</View>
 		);
 	}
@@ -223,7 +141,7 @@ class WidgetSmall extends Component {
 
 const styles = StyleSheet.create({
 	sectionContainer: {
-		backgroundColor: "#fff",
+		backgroundColor: '#fff',
 		paddingTop: SPACING.MD,
 	},
 	sectionPadding: {
@@ -233,98 +151,29 @@ const styles = StyleSheet.create({
 	loadingPadding: {
 		paddingHorizontal: SPACING.MD,
 	},
-	sectionHeading: {
-		marginBottom: SPACING.XS,
-		flexDirection: "row",
-		alignContent: "flex-start",
-		justifyContent: "space-between",
+	emptyPadding: {
+		paddingHorizontal: SPACING.MD,
 	},
 	sectionTitle: {
-		fontFamily: "sf-bold",
+		fontFamily: 'sf-bold',
 		fontSize: 24,
-		color: "#000",
-	},
-	// Listing card styles
-	cardContainer: {
-		marginRight: SPACING.SM + 4,
-		width: values.widget.itemMaxWidth,
-	},
-	borderContainer: {
-		borderRadius: SPACING.SM,
-		backgroundColor: "#fff",
-		shadowColor: "#000",
-		shadowOffset: {
-			width: 0,
-			height: 2,
-		},
-		shadowOpacity: 0.1,
-		shadowRadius: 3.84,
-		elevation: 4,
-		padding: SPACING.SM,
-		margin: SPACING.SM,
-		minHeight: values.widget.itemMinWidth,
-	},
-	cardImage: {
-		width: 88,
-		height: 88,
-		borderRadius: 44,
-		backgroundColor: "#f0f0f0",
-		alignSelf: "center",
-		marginBottom: SPACING.XS,
-	},
-	placeholderImage: {
-		justifyContent: "center",
-		alignItems: "center",
-		backgroundColor: "#f0f0f0",
-	},
-	cardTitle: {
-		fontFamily: "sf-semibold",
-		fontSize: 14,
-		color: "#000",
-		textAlign: "center",
-		marginBottom: 4,
-	},
-	cardSummary: {
-		fontFamily: "sf-regular",
-		fontSize: 12,
-		color: "#666",
-		textAlign: "center",
-	},
-	// View more card
-	viewMoreCard: {
-		justifyContent: "center",
-	},
-	viewMoreContainer: {
-		justifyContent: "center",
-		alignItems: "center",
-		minHeight: values.widget.itemMinWidth,
-	},
-	viewMoreText: {
-		fontFamily: "sf-semibold",
-		fontSize: 14,
-		color: Colours.TEXT_DARK || "#000",
-	},
-	viewMoreCount: {
-		fontFamily: "sf-regular",
-		fontSize: 12,
-		color: "#666",
-		marginTop: 2,
+		color: '#000',
 	},
 });
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
 	const { user, notifications } = state;
+	const listings = selectListings(state);
+	const featureDefinition = selectFeatureDefinition(state);
 
 	return {
 		colourBrandingMain: getMainBrandingColourFromState(state),
-		listings: selectListings(state),
-		featureDefinition: selectFeatureDefinition(state),
+		listings: listings,
+		featureDefinition: featureDefinition,
 		site: user.site,
 		dataUpdated: notifications.dataUpdated[values.notificationKey],
 		strings: state.strings?.config || {},
 	};
 };
 
-export default connect(mapStateToProps, null, null, { forwardRef: true })(
-	WidgetSmall,
-);
+export default connect(mapStateToProps, null, null, { forwardRef: true })(WidgetSmall);

package/src/feature.config.js

@@ -121,7 +121,8 @@ const FeatureConfig = {
 
 	afterStoreInit: (dispatch, getState) => {
 		// Get the site from state (guaranteed to be available due to polling)
-		const site = getState().user?.site;
+		const state = getState();
+		const site = state?.user?.site;
 
 		if (site) {
 			// Show loading state before fetching