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

package/src/components/ListingEditor.jsx

@@ -0,0 +1,406 @@
+import React, { useState, Fragment } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { PlussCore } from "../feature.config";
+import { capitalizeTextWithFallback } from "../utils/textUtils";
+import ListingForm from "../components/listing/ListingForm.jsx";
+import ToastContainer from "./ToastContainer.jsx";
+import styles from "./ListingEditor.module.css";
+import {
+	OverlayPage,
+	OverlayPageContents,
+	OverlayPageBottomButtons,
+	OverlayPageSection,
+	Text,
+	Button,
+	SkeletonLoader,
+	LoadingState,
+} from "../components";
+import {
+	selectDefinition,
+	selectDefinitionIsLoading,
+	selectListingsIsLoading,
+	selectDefinitionError,
+	selectHasDefinition,
+	selectFormDisplayName,
+	selectListingById,
+} from "../selectors/featureBuilderSelectors";
+import {
+	createListing,
+	editListing,
+	fetchSingleListing,
+} from "../actions/listingActions";
+import { fetchFeatureDefinitions } from "../actions/featureDefinitionsIndex.js";
+import { values } from "../values.config.js";
+
+
+const ListingEditor = ({ mode = "create", listingId, onSuccess, onCancel }) => {
+	const isEditMode = mode === "edit";
+	const dispatch = useDispatch();
+	const auth = useSelector((state) => state.auth);
+	const featureDefinition = useSelector(selectDefinition);
+	const displayName =
+		useSelector(selectFormDisplayName) || featureDefinition?.displayName;
+	const isLoading = useSelector(selectDefinitionIsLoading);
+	const listingsIsLoading = useSelector(selectListingsIsLoading);
+	const error = useSelector(selectDefinitionError);
+	const hasDefinition = useSelector(selectHasDefinition);
+	const listing = useSelector(selectListingById(listingId));
+
+	const [isSubmitting, setIsSubmitting] = React.useState(false);
+	const [formData, setFormData] = React.useState({ fields: {} });
+	const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
+	const [formErrors, setFormErrors] = React.useState({});
+	const [showErrors, setShowErrors] = React.useState(false);
+	const [formErrorMessage, setFormErrorMessage] = React.useState(null);
+	const [toasts, setToasts] = React.useState([]);
+	const formRef = React.useRef(null);
+
+	// Toast management functions
+	const addToast = (type, message) => {
+		const id = Date.now();
+		setToasts((prev) => [...prev, { id, type, message, isVisible: true }]);
+	};
+
+	const removeToast = (id) => {
+		setToasts((prev) => prev.filter((toast) => toast.id !== id));
+	};
+
+	// Fetch listing data in edit mode
+	React.useEffect(() => {
+		if (isEditMode && listingId) {
+			// Check if listing data already exists in Redux store
+			if (!listing) {
+				dispatch(fetchSingleListing(listingId));
+			}
+		}
+	}, [dispatch, isEditMode, listingId, listing]);
+
+	// Pre-fill form data in edit mode
+	React.useEffect(() => {
+		if (isEditMode && listing) {
+			// Always use listing.fields for consistency - never use the entire listing object
+			const fields = listing.fields || {};
+			setFormData({ fields });
+		}
+	}, [isEditMode, listing]);
+
+	const handleSubmit = (listingData) => {
+		// listingData is expected to have the structure { fields: { fieldId: value, ... } }
+		// After our fixes, form should always send { fields: {...} } structure
+		if (!listingData || !listingData.fields) {
+			return;
+		}
+
+		const newFormData = { fields: listingData.fields };
+
+		setFormData(newFormData);
+		setHasUnsavedChanges(true);
+		// Clear errors when form data is updated
+		setFormErrors({});
+		setShowErrors(false);
+		setFormErrorMessage(null);
+	};
+
+	const handleSave = () => {
+		// Validate form - formData should always have structure { fields: {...} }
+		if (!formData || !formData.fields) {
+			setFormErrorMessage("Form data is invalid. Please try again.");
+			addToast("error", "Form data is invalid. Please try again.");
+			return;
+		}
+		setFormErrorMessage(null); // Clear previous error when validation passes
+
+		const formFields = formData.fields;
+		const errors = {};
+
+		// Check all fields to collect all missing required fields
+		featureDefinition.fields.forEach((field) => {
+			// Use field.values.isRequired consistently (not field.isMandatory)
+			if (field.values?.isRequired) {
+				const fieldValue = formFields[field.id];
+				let isEmpty = false;
+
+				// Handle different field types based on their value structure
+				if (field.type === "cta") {
+					// CTA fields have object structure { label: "...", url: "..." }
+					if (!fieldValue || typeof fieldValue !== "object") {
+						isEmpty = true;
+					} else {
+						// Check if both label and url are provided and non-empty
+						const hasLabel =
+							fieldValue.label && fieldValue.label.trim().length > 0;
+						const hasUrl = fieldValue.url && fieldValue.url.trim().length > 0;
+						isEmpty = !hasLabel || !hasUrl;
+					}
+				} else if (field.type === "file") {
+					// File fields can be arrays (multiple files) or objects (single file)
+					if (!fieldValue) {
+						isEmpty = true;
+					} else if (Array.isArray(fieldValue)) {
+						isEmpty = fieldValue.length === 0;
+					} else if (typeof fieldValue === "object") {
+						isEmpty = Object.keys(fieldValue).length === 0;
+					} else {
+						isEmpty =
+							typeof fieldValue === "string" && fieldValue.trim() === "";
+					}
+				} else {
+					// Handle string values for other field types
+					isEmpty =
+						!fieldValue ||
+						(typeof fieldValue === "string" && fieldValue.trim() === "");
+				}
+
+				if (isEmpty) {
+					errors[field.id] = `${field.values?.label || field.id} is required`;
+				}
+			}
+		});
+
+		const isValid = Object.keys(errors).length === 0;
+
+		if (!isValid) {
+			setFormErrors(errors);
+			setShowErrors(true);
+			return;
+		}
+
+		setIsSubmitting(true);
+
+		// formData always has structure { fields: {...} } after our fixes
+		const submissionData = isEditMode
+			? { id: listingId, fields: formData.fields }
+			: { fields: formData.fields };
+
+		const actionPromise = dispatch(
+			isEditMode ? editListing(submissionData) : createListing(submissionData),
+		);
+
+		actionPromise
+			.then((result) => {
+				setIsSubmitting(false);
+				setHasUnsavedChanges(false);
+
+				// Call onSuccess callback with listing ID if available
+				if (onSuccess) {
+					const createdId = result?.data?.id || listingId;
+					onSuccess(createdId);
+				}
+			})
+			.catch((error) => {
+				const errorMessage = `Failed to ${
+					isEditMode ? "update" : "create"
+				} listing. Please try again.`;
+				addToast("error", errorMessage);
+				setIsSubmitting(false);
+			});
+	};
+
+	const handleClose = () => {
+		if (hasUnsavedChanges && onCancel) {
+			if (
+				window.confirm(
+					"You have unsaved changes. Are you sure you want to leave?",
+				)
+			) {
+				onCancel();
+			}
+		} else if (onCancel) {
+			onCancel();
+		}
+	};
+
+	// Check for content management permission
+	if (
+		!PlussCore.Session.validateAccess(
+			auth.site,
+			values.permissionFeatureBuilderContent,
+			auth,
+		)
+	) {
+		return (
+			<OverlayPage onClose={handleClose}>
+				<OverlayPageContents>
+					<OverlayPageSection className="pageSectionWrapper--newPopup1000">
+						<div className={`padding-20 ${styles.centered}`}>
+							<Text type="h2">Access Restricted</Text>
+							<Text type="body">
+								You don't have permission to {isEditMode ? "edit" : "create"}{" "}
+								feature content.
+							</Text>
+							<Text type="body">
+								Please contact your administrator if you need access.
+							</Text>
+						</div>
+					</OverlayPageSection>
+				</OverlayPageContents>
+				<OverlayPageBottomButtons>
+					<Button buttonType="secondary" onClick={handleClose}>
+						Close
+					</Button>
+				</OverlayPageBottomButtons>
+			</OverlayPage>
+		);
+	}
+
+	// Show loading state only when fetching initial feature definition
+	// Don't show skeleton when creating new listings since we have the definition in the store
+	if (!hasDefinition && isLoading) {
+		return (
+			<OverlayPage onClose={handleClose}>
+				<OverlayPageContents>
+					<OverlayPageSection className="pageSectionWrapper--newPopup1000">
+						<div className="padding-20">
+							<SkeletonLoader type="form-input" count={4} />
+						</div>
+					</OverlayPageSection>
+				</OverlayPageContents>
+				<OverlayPageBottomButtons>
+					<SkeletonLoader type="button" count={2} />
+				</OverlayPageBottomButtons>
+			</OverlayPage>
+		);
+	}
+
+	if (error) {
+		return (
+			<OverlayPage onClose={handleClose}>
+				<OverlayPageContents>
+					<OverlayPageSection className="pageSectionWrapper--newPopup1000">
+						<div className={`padding-20 ${styles.centered}`}>
+							<Text type="body">Error loading data: {error}</Text>
+						</div>
+					</OverlayPageSection>
+				</OverlayPageContents>
+				<OverlayPageBottomButtons>
+					<Button
+						buttonType="primary"
+						onClick={() => {
+							dispatch(fetchFeatureDefinitions());
+							if (isEditMode && listingId) {
+								dispatch(fetchSingleListing(listingId));
+							}
+						}}
+					>
+						Retry
+					</Button>
+					<Button buttonType="secondary" onClick={handleClose}>
+						Close
+					</Button>
+				</OverlayPageBottomButtons>
+			</OverlayPage>
+		);
+	}
+
+	if (!hasDefinition) {
+		return (
+			<OverlayPage onClose={handleClose}>
+				<OverlayPageContents>
+					<OverlayPageSection className="pageSectionWrapper--newPopup1000">
+						<div className={`padding-20 ${styles.centered}`}>
+							<Text type="h2">No Feature Definition</Text>
+							<Text type="body">
+								No feature definition exists. Please create a feature definition
+								first.
+							</Text>
+						</div>
+					</OverlayPageSection>
+				</OverlayPageContents>
+				<OverlayPageBottomButtons>
+					<Button buttonType="secondary" onClick={handleClose}>
+						Close
+					</Button>
+				</OverlayPageBottomButtons>
+			</OverlayPage>
+		);
+	}
+
+	return (
+		<Fragment>
+			<OverlayPage onClose={handleClose}>
+				<OverlayPageContents>
+					<OverlayPageSection className="pageSectionWrapper--newPopup">
+						<Text type="formTitleLarge" className="marginBottom-16">
+							{isEditMode
+								? `Edit ${capitalizeTextWithFallback(displayName, values.singularName)} listing`
+								: `Create new ${capitalizeTextWithFallback(displayName, "listing")}`}
+						</Text>
+
+						{/* Form Section */}
+						<div ref={formRef}>
+							{isEditMode && !listing && listingsIsLoading ? (
+								<div
+									className={`padding-20 ${styles.centered} ${styles.loadingContainer}`}
+								>
+									<LoadingState message="Loading listing..." />
+								</div>
+							) : isEditMode && !listing ? (
+								<div
+									className={`padding-20 ${styles.centered} ${styles.loadingContainer}`}
+								>
+									<Text type="body">
+										Listing not found or has been deleted.
+									</Text>
+									<Button
+										buttonType="secondary"
+										onClick={handleClose}
+										className={styles.backButton}
+									>
+										Go Back
+									</Button>
+								</div>
+							) : (
+								<ListingForm
+									featureDefinition={featureDefinition}
+									onSubmit={handleSubmit}
+									mode={isEditMode ? "edit" : "create"}
+									initialData={
+										isEditMode && listing
+											? { fields: listing.fields || {} }
+											: undefined
+									}
+									onChange={() => setHasUnsavedChanges(true)}
+									disabled={isSubmitting}
+									hideSubmitButton={true}
+									formData={formData.fields}
+									setFormData={(fields) => setFormData({ fields })}
+									formErrors={formErrors}
+									showErrors={showErrors}
+									formErrorMessage={formErrorMessage}
+								/>
+							)}
+						</div>
+					</OverlayPageSection>
+				</OverlayPageContents>
+
+				<OverlayPageBottomButtons>
+					<Button
+						buttonType="secondary"
+						onClick={handleClose}
+						disabled={isSubmitting}
+						className="marginRight-16"
+					>
+						Cancel
+					</Button>
+					<Button
+						buttonType="primary"
+						onClick={handleSave}
+						disabled={isSubmitting}
+						isActive
+					>
+						{isSubmitting
+							? isEditMode
+								? "Saving..."
+								: "Creating..."
+							: isEditMode
+								? "Save Changes"
+								: "Create Listing"}
+					</Button>
+				</OverlayPageBottomButtons>
+			</OverlayPage>
+			<ToastContainer toasts={toasts} onDismiss={removeToast} />
+		</Fragment>
+	);
+};
+
+export default ListingEditor;

package/src/components/ListingEditor.module.css

@@ -0,0 +1,14 @@
+/* Centered content */
+.centered {
+	text-align: center;
+}
+
+/* Loading container */
+.loadingContainer {
+	padding: 60px 20px;
+}
+
+/* Back button margin */
+.backButton {
+	margin-top: 16px;
+}

package/src/components/ListingSuccessPopup.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+const { Components } = PlussCore;
+const { Popup } = Components;
+
+const ListingSuccessPopup = ({ isOpen, onClose, mode, listingId }) => {
+	if (!isOpen) {
+		return null;
+	}
+
+	const isCreateMode = mode === "create";
+	const title = isCreateMode ? "Listing Created" : "Listing Updated";
+	const subtitle = isCreateMode
+		? "Your listing has been created and is now available."
+		: "Your changes have been saved and are now reflected.";
+
+	const buttons = [
+		{
+			type: "primary",
+			text: "View All Listings",
+			onClick: onClose,
+			isActive: true,
+		},
+	];
+
+	// Add "Create Another" button for create mode
+	if (isCreateMode) {
+		buttons.unshift({
+			type: "secondary",
+			text: "Create Another",
+			onClick: () => {
+				// Navigate to create new listing
+				onClose(); // Close the popup first
+				window.location.href = "/feature-builder/listing/create";
+			},
+		});
+	}
+
+	return (
+		<Popup
+			title={title}
+			subtitle={subtitle}
+			onClose={onClose}
+			buttons={buttons}
+			hasPadding
+			minWidth={400}
+			maxWidth={500}
+		></Popup>
+	);
+};
+
+export { ListingSuccessPopup };

package/src/components/LoadingScreen.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import styles from "./LoadingScreen.module.css";
+
+const LoadingScreen = ({
+	message = "Loading...",
+	size = "large",
+	showBackground = true,
+	type = "default", // default, feature-definition, listings, navigation
+}) => {
+	// Get contextual message based on type
+	const getContextualMessage = () => {
+		if (message !== "Loading...") return message;
+
+		switch (type) {
+			case "feature-definition":
+				return "Loading feature definition...";
+			case "listings":
+				return "Loading your listings...";
+			case "navigation":
+				return "Loading next step...";
+			default:
+				return "Loading...";
+		}
+	};
+
+	const sizeClass =
+		size === "small"
+			? styles.small
+			: size === "medium"
+				? styles.medium
+				: styles.large;
+
+	return (
+		<div
+			className={`${styles.loadingScreen} ${showBackground ? styles.withBackground : ""}`}
+		>
+			<div className={styles.loadingContent}>
+				<div className={`${styles.spinnerContainer} ${sizeClass}`}>
+					<FontAwesomeIcon icon={faSpinner} spin className={styles.spinner} />
+				</div>
+				<div className={styles.loadingText}>{getContextualMessage()}</div>
+				{type !== "default" && (
+					<div className={styles.loadingSubtext}>
+						This will only take a moment...
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default LoadingScreen;

package/src/components/LoadingScreen.module.css

@@ -0,0 +1,103 @@
+.loadingScreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 9999;
+	pointer-events: none;
+}
+
+.loadingScreen.withBackground {
+	background: rgba(255, 255, 255, 0.95);
+	backdrop-filter: blur(4px);
+	pointer-events: all;
+}
+
+.loadingContent {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 3rem 2rem;
+	max-width: 400px;
+}
+
+.spinnerContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 1.5rem;
+}
+
+.spinnerContainer.small {
+	width: 32px;
+	height: 32px;
+}
+
+.spinnerContainer.medium {
+	width: 48px;
+	height: 48px;
+}
+
+.spinnerContainer.large {
+	width: 64px;
+	height: 64px;
+}
+
+.spinner {
+	color: var(--colour-branding-main, #4a57b7);
+	width: 100%;
+	height: 100%;
+	font-size: inherit;
+}
+
+.loadingText {
+	font-size: var(--font-size-lg);
+	font-weight: 500;
+	color: var(--text-dark, #181c4a);
+	margin-bottom: 0.5rem;
+	line-height: 1.4;
+}
+
+.loadingSubtext {
+	font-size: var(--font-size-sm);
+	color: var(--text-light, #717b81);
+	margin-top: 0.5rem;
+	line-height: 1.4;
+}
+
+/* Animation for smooth transitions */
+.loadingScreen {
+	opacity: 0;
+	transition: opacity 0.3s ease-in-out;
+}
+
+.loadingScreen.withBackground {
+	opacity: 1;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+	.loadingContent {
+		padding: 2rem 1rem;
+	}
+
+	.loadingText {
+		font-size: var(--font-size-base);
+	}
+
+	.spinnerContainer.large {
+		width: 48px;
+		height: 48px;
+	}
+
+	.spinnerContainer.medium {
+		width: 40px;
+		height: 40px;
+	}
+}

package/src/components/LoadingState.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import FontAwesome from "react-fontawesome";
+import styles from "./LoadingState.module.css";
+
+/**
+ * Loading State component for async operations
+ * Displays a spinning loader with optional message text
+ * Uses FontAwesome spinner with hardcoded pixel sizing to avoid rem scaling issues
+ * Consistent styling with info page loader pattern
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.message - Descriptive message to display alongside the spinner
+ * @param {number} [props.size=48] - Size of the spinner in pixels
+ * @returns {React.ReactElement} Loading state interface with spinner and message
+ *
+ * @example
+ * <LoadingState message="Loading feature data..." />
+ *
+ * @example
+ * <LoadingState
+ *   message="Processing your request..."
+ *   size={64}
+ * />
+ */
+export function LoadingState({ message, size = 48 }) {
+	return (
+		<div className={styles.loadingState}>
+			<FontAwesome
+				style={{
+					fontSize: size,
+					color: "var(--colour-branding-main, #4a57b7)",
+				}}
+				name="spinner fa-pulse fa-fw"
+			/>
+			<p>{message}</p>
+		</div>
+	);
+}
+
+export default LoadingState;

package/src/components/LoadingState.module.css

@@ -0,0 +1,18 @@
+/* LoadingState CSS Module - Based on info page loader pattern */
+
+.loadingState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 2rem;
+	height: 50vh;
+	text-align: center;
+}
+
+.loadingState p {
+	color: var(--text-bluegrey, #6c7a90);
+	font-size: 1.6rem;
+	font-weight: 300;
+	margin-bottom: 0;
+}