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

package/src/components/WidgetGrid.js

@@ -0,0 +1,181 @@
+import React, { Component } from "react";
+import {
+	Text,
+	View,
+	StyleSheet,
+	TouchableOpacity,
+	Dimensions,
+} from "react-native";
+import { connect } from "react-redux";
+import _ from "lodash";
+import { Services } from "../feature.config";
+import { Components } from "../core.config";
+import { values } from "../values.config";
+import { selectActiveFeatureDefinitions } from "../reducers/featureBuilderReducer";
+import { getTargetFeatureDefinition } from "../utils/featureSelectors";
+import { SPACING } from "../js/spacing";
+import { getMainBrandingColourFromState } from "../js";
+// Import SVGIcon directly from main app since extension has import issues
+// Using a different approach - we'll use a simple text representation for now
+// import { SVGIcon } from '../../../../../src/components/common';
+
+class WidgetGrid extends Component {
+	constructor(props) {
+		super(props);
+		this.state = { loading: false };
+	}
+
+	componentDidMount() {
+		this.refresh();
+	}
+
+	componentDidUpdate(prevProps) {
+		if (!prevProps.dataUpdated && this.props.dataUpdated) {
+			this.refresh();
+		}
+	}
+
+	refresh = () => {
+		this.onLoadingChanged(true, async () => {
+			try {
+				const { initializeFeatureBuilder } = await import(
+					"../actions/featureBuilderActions"
+				);
+				await initializeFeatureBuilder()(
+					this.props.dispatch,
+					() => this.props.getState,
+				);
+			} catch (error) {
+				// Silently handle refresh errors
+			} finally {
+				this.onLoadingChanged(false);
+			}
+		});
+	};
+
+	onLoadingChanged = (loading, callback) => {
+		this.setState({ loading }, () => {
+			if (this.props.onLoadingChanged)
+				this.props.onLoadingChanged(this.state.loading);
+			if (callback) callback();
+		});
+	};
+
+	onPress = () => {
+		Services.navigation.navigate(values.screens.featureList, {
+			options: this.props.options,
+		});
+	};
+
+	render() {
+		const { colourBrandingMain, featureDefinitions, targetFeatureDefinition } =
+			this.props;
+
+		// Always show the card, even when loading or no features, with a loading state
+		const icon = "settings"; // Use a valid icon instead of 'cog'
+		// Use the feature definition title if available, otherwise fall back to default
+		const title =
+			targetFeatureDefinition?.title ||
+			targetFeatureDefinition?.displayName ||
+			values.featureName ||
+			"Feature Builder";
+
+		const isLoading = this.state.loading;
+		const featureCount = featureDefinitions?.length || 0;
+
+		return (
+			<TouchableOpacity onPress={this.onPress} style={[styles.container]}>
+				<View
+					style={[
+						styles.button,
+						{
+							backgroundColor:
+								colourBrandingMain || values.colors.defaultBrandMain,
+						},
+					]}
+				>
+					<View style={styles.buttonTitleSection}>
+						<Text
+							style={[styles.buttonTitle, styles.buttonTitleLarge]}
+							numberOfLines={2}
+						>
+							{isLoading ? "Loading..." : title}
+						</Text>
+						<Text style={styles.subtitleText}>
+							{isLoading
+								? "Please wait..."
+								: `${featureCount} Feature${featureCount !== 1 ? "s" : ""} Available`}
+						</Text>
+					</View>
+					<View style={styles.iconContainer}>
+						<Text style={styles.iconText}>⚙</Text>
+					</View>
+				</View>
+			</TouchableOpacity>
+		);
+	}
+}
+
+const mapStateToProps = (state) => {
+	const { user, notifications } = state;
+
+	const targetFeatureDefinition = getTargetFeatureDefinition(state);
+
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+		featureDefinitions: selectActiveFeatureDefinitions(state),
+		targetFeatureDefinition,
+		site: user.site,
+		dataUpdated: notifications.dataUpdated[values.notificationKey],
+		strings: state.strings?.config || {},
+	};
+};
+
+const styles = StyleSheet.create({
+	container: {
+		marginHorizontal: SPACING.SM,
+		marginVertical: SPACING.SM,
+	},
+	button: {
+		borderRadius: SPACING.SM,
+		padding: SPACING.MD,
+		minHeight: 120,
+		justifyContent: "space-between",
+		alignItems: "flex-start",
+		flexDirection: "row",
+	},
+	buttonTitleSection: {
+		flex: 1,
+		marginRight: SPACING.MD,
+		justifyContent: "center",
+	},
+	buttonTitle: {
+		color: "#fff",
+		fontSize: 16,
+		fontWeight: "600",
+	},
+	buttonTitleLarge: {
+		fontSize: 18,
+	},
+	subtitleText: {
+		color: "rgba(255, 255, 255, 0.8)",
+		fontSize: 12,
+		marginTop: SPACING.XS,
+	},
+	iconContainer: {
+		width: 50,
+		height: 50,
+		borderRadius: 25,
+		backgroundColor: "rgba(255, 255, 255, 0.2)",
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	iconText: {
+		fontSize: 24,
+		color: "#fff",
+	},
+});
+
+export default connect(mapStateToProps, null, null, { forwardRef: true })(
+	WidgetGrid,
+);

package/src/components/WidgetLarge.js

@@ -0,0 +1,305 @@
+import React, { Component } from "react";
+import {
+	Text,
+	View,
+	ScrollView,
+	StyleSheet,
+	TouchableOpacity,
+	Image,
+} from "react-native";
+import { connect } from "react-redux";
+import _ from "lodash";
+import { Icon } from "react-native-elements";
+import { Services } from "../feature.config";
+import { Components, Colours } from "../core.config";
+import { values } from "../values.config";
+import { selectListings, selectFeatureDefinition } from "../reducers/featureBuilderReducer";
+import { SPACING } from "../js/spacing";
+import { getMainBrandingColourFromState } from "../js";
+import { getSummaryFieldValue } from "../js/helpers";
+
+class WidgetLarge extends Component {
+	constructor(props) {
+		super(props);
+		this.state = { loading: false };
+	}
+
+	componentDidMount() {
+		this.refresh();
+	}
+
+	componentDidUpdate(prevProps) {
+		if (!prevProps.dataUpdated && this.props.dataUpdated) {
+			this.refresh();
+		}
+	}
+
+	getTitle = () => {
+		const { options, featureDefinition } = this.props;
+		if (options && !_.isEmpty(options.Title)) return options.Title;
+		// Use feature definition title
+		if (
+			featureDefinition?.title ||
+			featureDefinition?.displayName
+		) {
+			return (
+				featureDefinition.title || featureDefinition.displayName
+			);
+		}
+		return values.featureName || "Custom Features";
+	};
+
+	getEmptyStateText = () => {
+		const { options } = this.props;
+		if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
+		return "No custom features available";
+	};
+
+	refresh = () => {
+		this.onLoadingChanged(true, async () => {
+			try {
+				const { initializeFeatureBuilder } = await import(
+					"../actions/featureBuilderActions"
+				);
+				await initializeFeatureBuilder()(
+					this.props.dispatch,
+					() => this.props.getState,
+				);
+			} finally {
+				this.onLoadingChanged(false);
+			}
+		});
+	};
+
+	onLoadingChanged = (loading, callback) => {
+		this.setState({ 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) => {
+		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]}>
+							<Icon
+								name="image"
+								type="font-awesome"
+								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}>
+					<Icon
+						name="chevron-right"
+						type="font-awesome"
+						size={14}
+						color={Colours.TEXT_LIGHT}
+					/>
+				</View>
+			</TouchableOpacity>
+		);
+	};
+
+	renderContent() {
+		const { listings } = this.props;
+
+		// Don't render widget if no listings are available (and not loading)
+		if (_.isEmpty(listings) && !this.state.loading) {
+			return null;
+		}
+
+		if (_.isEmpty(listings)) {
+			if (this.state.loading) {
+				return (
+					<View style={styles.loadingPadding}>
+						<Components.LoadingStateWidget height={300} />
+					</View>
+				);
+			}
+			return null;
+		}
+
+		return (
+			<ScrollView
+				contentContainerStyle={styles.featuresContainer}
+				showsVerticalScrollIndicator={false}
+			>
+				{listings.map((listing) => this.renderListingCard(listing))}
+			</ScrollView>
+		);
+	}
+
+	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>
+				</View>
+				{content}
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	sectionContainer: {
+		backgroundColor: "#fff",
+		flex: 1,
+	},
+	sectionPadding: {
+		paddingHorizontal: SPACING.MD,
+		paddingBottom: SPACING.XS + 2,
+		paddingTop: SPACING.MD,
+	},
+	loadingPadding: {
+		paddingHorizontal: SPACING.MD,
+	},
+	sectionHeading: {
+		marginBottom: SPACING.MD,
+	},
+	sectionTitle: {
+		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,
+	},
+});
+
+const mapStateToProps = (state) => {
+	const { user, notifications } = state;
+
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+		listings: selectListings(state),
+		featureDefinition: selectFeatureDefinition(state),
+		site: user.site,
+		dataUpdated: notifications.dataUpdated[values.notificationKey],
+		strings: state.strings?.config || {},
+	};
+};
+
+export default connect(mapStateToProps, null, null, { forwardRef: true })(
+	WidgetLarge,
+);