@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.0

package/src/components/listing/ListingImageInput.jsx

@@ -0,0 +1,153 @@
+import React, { useRef, useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ImageInput, Text, GenericInput } from "../../components";
+import { iconImports } from "../../components/iconImports.js";
+import styles from "./ListingField.module.css";
+
+const ListingImageInput = ({
+	field,
+	value,
+	onChange,
+	showError,
+	errorMessage,
+	disabled = false,
+}) => {
+	const imageInputRef = useRef(null);
+	const [imageUrl, setImageUrl] = useState("");
+	const [caption, setCaption] = useState("");
+
+	// Initialize state from value prop (handle backward compatibility)
+	useEffect(() => {
+		if (value) {
+			if (typeof value === "object" && value !== null) {
+				// New format: { url: "image-url", caption: "caption text" }
+				setImageUrl(value.url || "");
+				setCaption(value.caption || "");
+			} else {
+				// Legacy format: simple string URL
+				setImageUrl(value);
+				setCaption("");
+			}
+		} else {
+			setImageUrl("");
+			setCaption("");
+		}
+	}, [value]);
+
+	const handleImageChange = (imageData) => {
+		// Handle different data structures from ImageInput
+		let newImageUrl = imageData;
+
+		// If imageData is an object (from feature library), extract the URL
+		if (typeof imageData === "object" && imageData !== null) {
+			newImageUrl =
+				imageData.url ||
+				imageData.src ||
+				imageData.imageUrl ||
+				JSON.stringify(imageData);
+		}
+
+		setImageUrl(newImageUrl);
+		updateValue(newImageUrl, caption);
+	};
+
+	const handleCaptionChange = (newCaption) => {
+		setCaption(newCaption);
+		updateValue(imageUrl, newCaption);
+	};
+
+	const updateValue = (url, captionText) => {
+		// If captions are enabled, store as object, otherwise as string for backward compatibility
+		if (field.values.allowCaption) {
+			onChange(field.id, { url, caption: captionText });
+		} else {
+			onChange(field.id, url);
+		}
+	};
+
+	return (
+		<div>
+			{/* Field header with icon and description */}
+			<div className={styles.listingField__header}>
+				<div className={styles.listingField__icon}>
+					<FontAwesomeIcon icon={iconImports.image} />
+				</div>
+				<div className={styles.listingField__content}>
+					<h3 className={styles.listingField__title}>Image</h3>
+					<p className={styles.listingField__description}>
+						Upload a single photo or image to accompany your content
+					</p>
+				</div>
+			</div>
+
+			<Text type="formLabel" style={{ display: "block", marginBottom: "8px" }}>
+				{field.values.label}
+				{field.values.isRequired && (
+					<span className={styles.requiredAsterisk}>*</span>
+				)}
+			</Text>
+			<div style={{ marginTop: "12px" }}>
+				<div
+					style={{
+						border: showError ? "1px solid var(--colour-error)" : "none",
+						borderRadius: "4px",
+						padding: showError ? "0.1rem" : "0",
+						backgroundColor: showError
+							? "var(--colour-error-light, rgba(220, 53, 69, 0.05))"
+							: "transparent",
+					}}
+				>
+					<ImageInput
+						ref={imageInputRef}
+						containerStyle={{ width: 293, height: 168 }}
+						className="imageInputOuter-single"
+						refreshCallback={handleImageChange}
+						hasDefault={imageUrl}
+						disabled={disabled}
+					/>
+				</div>
+				{showError && errorMessage && (
+					<Text
+						type="help"
+						style={{
+							color: "var(--colour-red)",
+							marginTop: "0.2rem",
+							display: "block",
+						}}
+					>
+						{errorMessage}
+					</Text>
+				)}
+			</div>
+
+			{/* Caption input field - only show if captions are enabled for this field type */}
+			{field.values.allowCaption && (
+				<div style={{ marginTop: "12px" }}>
+					<GenericInput
+						type="text"
+						value={caption}
+						placeholder="Add a caption for this image (optional)"
+						label="Image Caption"
+						onChange={(e) => handleCaptionChange(e.target.value)}
+						alwaysShowLabel
+					/>
+				</div>
+			)}
+
+			{field.values.helpText && (
+				<Text
+					type="help"
+					style={{
+						color: "var(--text-bluegrey)",
+						marginTop: "8px",
+						display: "block",
+					}}
+				>
+					{field.values.helpText}
+				</Text>
+			)}
+		</div>
+	);
+};
+
+export default ListingImageInput;

package/src/components/listing/ListingTextInput.jsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { GenericInput, Text } from "../index.js";
+import { iconImports } from "../iconImports.js";
+import styles from "./ListingField.module.css";
+
+const ListingTextInput = ({
+	field,
+	value,
+	onChange,
+	showError,
+	errorMessage,
+}) => {
+	const { label, placeholder, isRequired, helpText } = field.values;
+
+	const handleChange = (e) => {
+		onChange(field.id, e.target.value);
+	};
+
+	const isValid = () => {
+		if (isRequired) {
+			const isEmpty =
+				!value || (typeof value === "string" && value.trim() === "");
+			return !isEmpty;
+		}
+		return true;
+	};
+
+	const displayLabel = (
+		<>
+			{label}
+			{isRequired && <span className={styles.requiredAsterisk}>*</span>}
+		</>
+	);
+
+	return (
+		<>
+			{/* Field header with icon and description */}
+			<div className={styles.listingField__header}>
+				<div className={styles.listingField__icon}>
+					<FontAwesomeIcon icon={iconImports.pen} />
+				</div>
+				<div className={styles.listingField__content}>
+					<h3 className={styles.listingField__title}>Title</h3>
+					<p className={styles.listingField__description}>
+						The main title for you listing
+					</p>
+				</div>
+			</div>
+
+			<GenericInput
+				type="text"
+				label={displayLabel}
+				placeholder={placeholder || ""}
+				value={value || ""}
+				onChange={handleChange}
+				isRequired={isRequired}
+				showError={!!showError}
+				errorMessage={errorMessage}
+				isValid={isValid()}
+				alwaysShowLabel
+			/>
+			{helpText && (
+				<div style={{ marginTop: "8px", color: "#6c7a90", fontSize: "14px" }}>
+					{helpText}
+				</div>
+			)}
+		</>
+	);
+};
+
+export default ListingTextInput;

package/src/feature.config.js

@@ -0,0 +1,130 @@
+// import * as PlussCore from '../../pluss-core/src';
+import * as PlussCore from "@plusscommunities/pluss-core-web";
+import { values } from "./values.config";
+import { selectHasDefinition } from "./selectors/featureBuilderSelectors";
+
+export { PlussCore };
+
+const FeatureConfig = {
+	key: values.featureKey,
+	singularName: values.singularName,
+	description: values.description,
+	emptyText: values.emptyText,
+	widgetOptions: [],
+	hiddenFromFeaturePicker: (state) => {
+		// Hide feature builder from picker if no definitions exist
+		// This prevents users from adding feature builder when there are no feature definitions configured
+		return !selectHasDefinition(state);
+	},
+
+	addUrl: values.routeFormOverviewStep,
+	baseUrl: values.featureKeyRoute,
+	addPermission: values.permissionFeatureBuilderDefinition,
+	activities: [],
+	permissions: [
+		{
+			displayName: values.textPermissionFeatureBuilderDefinition,
+			key: values.permissionFeatureBuilderDefinition,
+			hq: true,
+		},
+		{
+			displayName: values.textPermissionFeatureBuilderContent,
+			key: values.permissionFeatureBuilderContent,
+			hq: false,
+		},
+	],
+	menu: [
+		{
+			// HQ-only definition navitem
+			key: values.menuKey,
+			order: 16,
+			text: "Build Your Feature",
+			icon: values.defaultIcon,
+			isFontAwesome: true,
+			url: values.routeFormOverviewStep,
+			visibleExps: {
+				type: "and",
+				exps: [
+					{
+						type: "master",
+						value: false,
+					},
+					{
+						type: "hq",
+						value: true,
+					},
+				],
+			},
+		},
+		{
+			order: values.menuOrder,
+			text: "",
+			icon: values.menuIcon,
+			isFontAwesome: values.menuIsFontAwesome,
+			url: values.featureKeyRoute + "/listing",
+			countProps: null,
+			visibleExps: {
+				type: "and",
+				exps: [
+					{ type: "feature", value: values.featureKey },
+					{ type: "permission", value: values.permissionFeatureBuilderContent },
+				],
+			},
+		},
+	],
+	routes: [
+		{
+			path: values.routeFormOverviewStep,
+			component: values.screenFormOverviewStep,
+			exact: false, // Changed from exact:true to allow internal navigation
+		},
+		{
+			path: values.routeFormFieldsStep,
+			component: values.screenFormFieldsStep,
+			exact: false,
+		},
+		{
+			path: values.routeFormLayoutStep,
+			component: values.screenFormLayoutStep,
+			exact: false,
+		},
+		{
+			path: values.routeListingScreen,
+			component: values.screenListingScreen,
+			exact: true,
+		},
+
+		{
+			path: values.routeCreateListing,
+			component: values.pageCreateListing,
+			exact: false,
+		},
+		{
+			path: values.routeEditListing,
+			component: values.pageEditListing,
+			exact: false,
+		},
+	],
+	env: {
+		baseStage: "",
+		baseAPIUrl: "",
+		baseUploadsUrl: "",
+		uploadBucket: "",
+		colourBrandingMain: "",
+		colourBrandingOff: "",
+		colourBrandingApp: "",
+		defaultProfileImage: "",
+		utcOffset: "",
+		hasAvailableNews: false,
+		newsHaveTags: true,
+		defaultAllowComments: true,
+		makeApiKey: "",
+		logo: "",
+		clientName: "",
+	},
+	init: (environment) => {
+		FeatureConfig.env = environment;
+		PlussCore.Config.init(environment);
+	},
+};
+export default FeatureConfig;

package/src/helper/index.js

@@ -0,0 +1,135 @@
+import { PlussCore } from "../feature.config";
+
+const { Helper } = PlussCore;
+
+/**
+ * Validates if a string is a valid email format
+ *
+ * @param {string} email - Email address to validate
+ * @returns {boolean} True if valid email format, false otherwise
+ *
+ * @example
+ * // Returns true
+ * isEmail('user@example.com');
+ * // Returns false
+ * isEmail('invalid-email');
+ */
+export const isEmail = Helper.isEmail;
+
+/**
+ * Gets the plural form of a word based on count
+ *
+ * @param {number} count - Number to determine plural form
+ * @returns {string} Plural form of the word
+ *
+ * @example
+ * // Returns 'item'
+ * getPluralS(1);
+ * // Returns 'items'
+ * getPluralS(2);
+ */
+export const getPluralS = Helper.getPluralS;
+
+/**
+ * Parses URL parameters from a URL string
+ *
+ * @param {string} url - URL string to parse
+ * @returns {Object} Object containing URL parameters as key-value pairs
+ *
+ * @example
+ * // Returns { id: '123', tab: 'profile' }
+ * getUrlParams('/users?id=123&tab=profile');
+ */
+export const getUrlParams = Helper.getUrlParams;
+
+/**
+ * Safely reads and parses URL parameters
+ *
+ * @param {URLSearchParams} params - URL search parameters
+ * @returns {Object} Safely parsed parameters object
+ */
+export const safeReadParams = Helper.safeReadParams;
+
+/**
+ * Generates a 300x300 thumbnail URL
+ *
+ * @param {string} url - Original image URL
+ * @returns {string} Thumbnail URL with 300x300 dimensions
+ */
+export const getThumb300 = Helper.getThumb300;
+
+/**
+ * Gets 1400x0 size dimensions
+ *
+ * @param {string} url - Image URL to analyze
+ * @returns {Object} Object containing width and height
+ */
+export const get1400 = Helper.get1400;
+
+/**
+ * Converts time date pickers to UTC timestamps
+ *
+ * @param {Array} pickers - Array of time date picker objects
+ * @returns {Object} UTC timestamp conversion result
+ */
+export const getUTCFromTimeDatePickers = Helper.getUTCFromTimeDatePickers;
+
+/**
+ * Gets pluralization options for different languages
+ *
+ * @returns {Object} Pluralization configuration object
+ */
+export const getPluralOptions = Helper.getPluralOptions;
+
+/**
+ * Checks if a URL contains video content
+ *
+ * @param {string} url - URL to check
+ * @returns {boolean} True if contains video content
+ */
+export const isVideo = Helper.isVideo;
+
+/**
+ * Extracts filename from a URL or file path
+ *
+ * @param {string} path - Path or URL to extract filename from
+ * @returns {string} Filename without extension and path
+ *
+ * @example
+ * // Returns 'document'
+ * getFileName('/path/to/document.pdf');
+ */
+export const getFileName = Helper.getFileName;
+
+/**
+ * Gets site name from user roles array
+ *
+ * @param {Array} roles - Array of user role objects
+ * @returns {string} Site name derived from roles
+ */
+export const getSiteNameFromRoles = Helper.getSiteNameFromRoles;
+
+/**
+ * Filters string to only alphanumeric characters
+ *
+ * @param {string} str - String to filter
+ * @returns {string} Filtered string containing only alphanumeric characters
+ */
+export const onlyAlphanumeric = Helper.onlyAlphanumeric;
+
+/**
+ * Stores data in browser's localStorage
+ *
+ * @param {string} key - Storage key
+ * @param {*} value - Value to store
+ * @returns {boolean} True if successfully stored
+ */
+export const setLocalStorage = Helper.setLocalStorage;
+
+/**
+ * Reads and parses JSON data from localStorage
+ *
+ * @param {string} key - Storage key to read from
+ * @returns {Object|null} Parsed JSON object or null if not found
+ */
+export const readJSONFromStorage = Helper.readJSONFromStorage;

package/src/hooks/useFeatureDefinitionLoader.js

@@ -0,0 +1,62 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchFeatureDefinitions } from "../actions/featureDefinitionsIndex";
+import {
+	selectDefinition,
+	selectDefinitionIsLoading,
+	selectDefinitionError,
+} from "../selectors/featureBuilderSelectors";
+
+/**
+ * Custom hook to handle loading feature definition in any step
+ * Ensures definition is loaded and provides loading/error states
+ * Triggers definition fetch when needed (e.g., on component mount or refresh)
+ *
+ * @param {Object} options - Configuration options
+ * @param {boolean} [options.forceReload=false] - Force reload even if definition exists
+ * @returns {Object} Loading state and error information
+ * @returns {boolean} returns.isLoading - Whether definition is currently loading
+ * @returns {Error|null} returns.error - Any error that occurred during loading
+ * @returns {Object|null} returns.definition - The loaded definition (if available)
+ * @returns {Function} returns.reloadDefinition - Function to manually reload definition
+ *
+ * @example
+ * const { isLoading, error, definition, reloadDefinition } = useFeatureDefinitionLoader();
+ *
+ * @example
+ * // Force reload on mount
+ * const { isLoading, error, definition } = useFeatureDefinitionLoader({ forceReload: true });
+ */
+export const useFeatureDefinitionLoader = (options = {}) => {
+	const { forceReload = false } = options;
+	const dispatch = useDispatch();
+
+	// Selectors for definition state
+	const definition = useSelector(selectDefinition);
+	const isLoading = useSelector(selectDefinitionIsLoading);
+	const error = useSelector(selectDefinitionError);
+
+	// Determine if we need to load the definition
+	const shouldLoadDefinition = !definition || forceReload;
+
+	// Function to manually reload definition
+	const reloadDefinition = () => {
+		dispatch(fetchFeatureDefinitions());
+	};
+
+	// Load definition when needed
+	useEffect(() => {
+		if (shouldLoadDefinition && !isLoading) {
+			dispatch(fetchFeatureDefinitions());
+		}
+	}, [shouldLoadDefinition, isLoading, dispatch]);
+
+	return {
+		isLoading,
+		error,
+		definition,
+		reloadDefinition,
+	};
+};
+
+export default useFeatureDefinitionLoader;

package/src/index.js

@@ -0,0 +1,38 @@
+import { FormOverviewStep } from "./screens/FormOverviewStep.jsx";
+import { FormFieldsStep } from "./screens/FormFieldsStep.jsx";
+import { FormLayoutStep } from "./screens/FormLayoutStep.jsx";
+import { featureBuilderReducer } from "./reducers/featureBuilderReducer.js";
+
+import ListingScreen from "./screens/ListingScreen.jsx";
+import CreateListingPage from "./pages/CreateListingPage.jsx";
+import EditListingPage from "./pages/EditListingPage.jsx";
+import { values } from "./values.config.js";
+import { fetchFeatureDefinitions } from "./actions/featureDefinitionsIndex";
+
+export const Reducers = (() => {
+	const reducers = {};
+	reducers[values.reducerKey] = featureBuilderReducer;
+	return reducers;
+})();
+
+export const Screens = (() => {
+	const screens = {};
+
+	screens["FormOverviewStep"] = FormOverviewStep;
+	screens["FormFieldsStep"] = FormFieldsStep;
+	screens["FormLayoutStep"] = FormLayoutStep;
+	screens["ListingScreen"] = ListingScreen;
+	screens["CreateListingPage"] = CreateListingPage;
+	screens["EditListingPage"] = EditListingPage;
+	return screens;
+})();
+
+export { default as Config } from "./feature.config.js";
+export { default as ViewWidget } from "./components/ViewWidget.js"; // View on the feature selector - widget size
+export { default as ViewFull } from "./components/ViewFull.js"; // View view on the feature selector - full size
+export { default as PreviewWidget } from "./components/PreviewWidget.js"; // Preview on the phone - widget size
+export { default as PreviewFull } from "./components/PreviewFull.js"; // Preview on the phone - full size
+export { default as PreviewGrid } from "./components/PreviewGrid.js"; // Preview on the phone - grid mode
+
+// Extension startup action for feature definition fetching
+export const getStartupAction = () => fetchFeatureDefinitions();

package/src/pages/CreateListingPage.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import ListingEditor from "../components/ListingEditor.jsx";
+import { ListingSuccessPopup } from "../components/ListingSuccessPopup.jsx";
+import { fetchFeatureDefinitions } from "../actions/featureDefinitionsIndex.js";
+import { values } from "../values.config.js";
+
+const CreateListingPage = ({ history }) => {
+	const dispatch = useDispatch();
+	const [showSuccessPopup, setShowSuccessPopup] = React.useState(false);
+	const [createdListingId, setCreatedListingId] = React.useState(null);
+
+	// Fetch feature definitions only for create mode
+	React.useEffect(() => {
+		dispatch(fetchFeatureDefinitions());
+	}, [dispatch]);
+
+	const handleSuccess = (listingId) => {
+		setCreatedListingId(listingId);
+		setShowSuccessPopup(true);
+	};
+
+	const handleSuccessPopupClose = () => {
+		setShowSuccessPopup(false);
+		history.push(values.routeListingScreen);
+	};
+
+	const handleCancel = () => {
+		history.push(values.routeListingScreen);
+	};
+
+	return (
+		<>
+			<ListingEditor
+				mode="create"
+				onSuccess={handleSuccess}
+				onCancel={handleCancel}
+			/>
+			<ListingSuccessPopup
+				isOpen={showSuccessPopup}
+				onClose={handleSuccessPopupClose}
+				mode="create"
+				listingId={createdListingId}
+			/>
+		</>
+	);
+};
+
+export default CreateListingPage;