@plusscommunities/pluss-feature-builder-web-d 1.0.7 → 1.0.9-beta.3

package/src/components/ListingEditor.jsx

@@ -1,405 +0,0 @@
-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, site: auth.site }
-			: { fields: formData.fields, site: auth.site };
-
-		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

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

package/src/components/ListingSuccessPopup.jsx

@@ -1,52 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,103 +0,0 @@
-.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

@@ -1,40 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/* 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;
-}