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

package/src/components/WidgetSmall.js

@@ -0,0 +1,344 @@
+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 WidgetSmall 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 || "Features";
+	};
+
+	getEmptyStateText = () => {
+		const { options } = this.props;
+		if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
+		return values.labels.emptyState;
+	};
+
+	refresh = () => {
+		this.onLoadingChanged(true, async () => {
+			try {
+				// Import actions dynamically to avoid circular dependencies
+				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();
+		});
+	};
+
+	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) => {
+		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]}>
+							<Icon
+								name="image"
+								type="font-awesome"
+								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>
+		);
+	};
+
+	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={180} />
+					</View>
+				);
+			}
+			return null;
+		}
+
+		// Show first 3 listings with peeking indicator
+		const listingsToShow = listings.slice(0, values.widget.maxItems);
+
+		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>
+		);
+	}
+
+	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>
+				</View>
+				{content}
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	sectionContainer: {
+		backgroundColor: "#fff",
+		paddingTop: SPACING.MD,
+	},
+	sectionPadding: {
+		paddingHorizontal: SPACING.MD,
+		paddingBottom: SPACING.XS + 2,
+	},
+	loadingPadding: {
+		paddingHorizontal: SPACING.MD,
+	},
+	sectionHeading: {
+		marginBottom: SPACING.XS,
+		flexDirection: "row",
+		alignContent: "flex-start",
+		justifyContent: "space-between",
+	},
+	sectionTitle: {
+		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,
+		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,
+	},
+});
+
+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 })(
+	WidgetSmall,
+);

package/src/components/common/index.js

@@ -0,0 +1,25 @@
+import { Components } from "../../core.config";
+
+export const InlineButton = Components.InlineButton;
+export const ProfilePic = Components.ProfilePic;
+export const EmptyStateMain = Components.EmptyStateMain;
+export const Spinner = Components.Spinner;
+export const MiddlePopup = Components.MiddlePopup;
+export const BackButton = Components.BackButton;
+export const UserListing = Components.UserListing;
+export const GenericInput = Components.GenericInput;
+export const Toggle = Components.Toggle;
+export const ImageUploader = Components.ImageUploader;
+export const Header = Components.Header;
+export const FormCard = Components.FormCard;
+export const FormCardSection = Components.FormCardSection;
+export const Input = Components.Input;
+export const StickyFooter = Components.StickyFooter;
+export const LoadingIndicator = Components.LoadingIndicator;
+export const ConfirmPopup = Components.ConfirmPopup;
+export const DropDownMenu = Components.DropDownMenu;
+export const DropDownItem = Components.DropDownItem;
+export const PlussChat = Components.PlussChat;
+export const Attachment = Components.Attachment;
+
+// TODO: Add core components as required

package/src/components/layouts/CondensedList.js

@@ -0,0 +1,230 @@
+import React from "react";
+import {
+	View,
+	StyleSheet,
+	FlatList,
+	Text,
+	TouchableOpacity,
+	Image,
+} from "react-native";
+import { Icon } from "react-native-elements";
+import { Components, Colours, Helper } from "../../core.config";
+import { values } from "../../values.config";
+import { getSummaryFieldValue } from "../../js/helpers";
+
+const CondensedListItem = ({
+	listing,
+	onItemPress,
+	colourBrandingMain,
+	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] || "Untitled";
+	const summary = getSummaryFieldValue(listing, featureDefinition);
+	const imageField = listing.fields?.[values.mandatoryFields.featureImage];
+	const imageSource = getImageSource(imageField);
+
+	return (
+		<TouchableOpacity activeOpacity={0.9} onPress={onPress}>
+			<View style={styles.listItem}>
+				{/* 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>
+			</View>
+
+			{/* Divider line */}
+			<View style={styles.divider} />
+		</TouchableOpacity>
+	);
+};
+
+const getEmptyStateMessage = (title) => {
+	const featureName = title || "Feature";
+	return `${featureName} listings will appear here once they're available.\nCome back soon to see what's new!`;
+};
+
+const CondensedList = ({
+	listings,
+	onItemPress,
+	colourBrandingMain,
+	refreshing,
+	onRefresh,
+	featureDefinition,
+	title,
+}) => {
+	const renderListingItem = ({ item: listing }) => {
+		// Get feature definition for this listing
+		const listingFeatureDefinition = featureDefinition;
+
+		return (
+			<CondensedListItem
+				listing={listing}
+				onItemPress={onItemPress}
+				colourBrandingMain={colourBrandingMain}
+				featureDefinition={listingFeatureDefinition}
+			/>
+		);
+	};
+
+	if (!listings || listings.length === 0) {
+		return (
+			<View style={styles.emptyContainer}>
+				<Components.EmptyStateWidget
+					title={getEmptyStateMessage(title)}
+					height={120}
+				/>
+			</View>
+		);
+	}
+
+	if (onRefresh) {
+		return (
+			<View style={styles.container}>
+				<Components.LoadingIndicator visible={refreshing} />
+				<FlatList
+					data={listings}
+					keyExtractor={(item) => item.id}
+					renderItem={renderListingItem}
+					style={styles.scrollContainer}
+					showsVerticalScrollIndicator={false}
+				/>
+			</View>
+		);
+	}
+
+	return (
+		<View style={styles.container}>
+			<FlatList
+				data={listings}
+				keyExtractor={(item) => item.id}
+				renderItem={renderListingItem}
+				showsVerticalScrollIndicator={false}
+			/>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: Colours.BACKGROUND_WHITE || "#fff",
+	},
+	scrollContainer: {
+		flex: 1,
+	},
+	emptyContainer: {
+		paddingVertical: 16,
+	},
+	listItem: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingHorizontal: 16,
+		paddingVertical: 8,
+		backgroundColor: Colours.BACKGROUND_WHITE || "#fff",
+	},
+	avatarContainer: {
+		width: 40,
+		height: 40,
+		borderRadius: 20,
+		marginRight: 12,
+	},
+	avatar: {
+		width: 40,
+		height: 40,
+		borderRadius: 20,
+		backgroundColor: Colours.BACKGROUND_LIGHT,
+	},
+	placeholderAvatar: {
+		backgroundColor: Colours.BACKGROUND_LIGHT,
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	textContainer: {
+		flex: 1,
+		justifyContent: "center",
+	},
+	titleText: {
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		color: Colours.TEXT_DARK,
+		marginBottom: 2,
+	},
+	descriptionText: {
+		fontFamily: "sf-regular",
+		fontSize: 14,
+		color: Colours.TEXT_LIGHT,
+		lineHeight: 18,
+	},
+	chevronContainer: {
+		paddingLeft: 8,
+	},
+	divider: {
+		height: 1,
+		backgroundColor: Colours.LINE_GREY || "#e0e0e0",
+		marginLeft: 0, // Full width border
+	},
+});
+
+export default CondensedList;