@plusscommunities/pluss-feature-builder-web-d 1.0.2-beta.7 → 1.0.2-beta.9

package/src/components/Fields.jsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { CheckBox, Text, Button } from "./index.js";
+import { Text, Button } from "./index.js";
 import { BaseFieldConfig } from "./BaseFieldConfig.jsx";
 import { iconImports } from "./iconImports.js";
 import styles from "./Fields.module.css";
@@ -130,7 +130,6 @@ export const Field = (props) => {
 	);
 };
 
-// Padlock icon component for base fields
 const PadlockIcon = () => {
 	const icon = iconImports.lock;
 	return (
@@ -140,39 +139,6 @@ const PadlockIcon = () => {
 	);
 };
 
-// Field type icon component
-const FieldTypeIcon = ({ type }) => {
-	const getIconForType = (type) => {
-		switch (type) {
-			case "title":
-				return iconImports.heading;
-			case "text":
-				return iconImports.pen;
-			case "description":
-				return iconImports.alignLeft;
-			case "image":
-				return iconImports.image;
-			case "feature-image":
-				return iconImports.camera;
-
-			case "cta":
-				return iconImports.link;
-			case "file":
-				return iconImports.file;
-			default:
-				return iconImports.cog;
-		}
-	};
-
-	const icon = getIconForType(type);
-
-	return (
-		<span className={styles.fieldTypeIcon}>
-			<FontAwesomeIcon icon={icon} />
-		</span>
-	);
-};
-
 // Helper function to get display text for field types
 const getFieldTypeDisplay = (type) => {
 	switch (type) {
@@ -188,7 +154,6 @@ const getFieldTypeDisplay = (type) => {
 			return "Gallery";
 		case "feature-image":
 			return "Feature Image";
-
 		case "cta":
 			return "Action Button";
 		case "file":
@@ -207,23 +172,22 @@ const TitleField = (props) => {
 		showWarnings,
 		id,
 	} = props;
-	const { placeholder, label, isRequired, helpText } = props.values;
+	const { placeholder, label, helpText } = props.values;
 
 	return (
 		<BaseFieldConfig
 			label={label}
 			placeholder={placeholder}
 			helpText={helpText}
-			isRequired={true} // Title fields are always required
+			isRequired={true}
 			setLabel={setLabel}
-			setPlaceholder={() => {}}
+			setPlaceholder={setPlaceholder}
 			setHelpText={setHelpText}
-			toggleIsRequired={() => {}} // Disable toggling - title fields are always required
+			toggleIsRequired={() => {}}
 			stepErrors={stepErrors}
 			showWarnings={showWarnings}
 			id={id}
 			fieldType="title"
-			id={id} // Fix: pass the field ID
 		/>
 	);
 };
@@ -235,25 +199,25 @@ const TextField = (props) => {
 		setHelpText,
 		stepErrors,
 		showWarnings,
+		toggleIsRequired,
 		id,
 	} = props;
-	const { placeholder, label, isRequired, helpText } = props.values;
+	const { placeholder, label, helpText, isRequired } = props.values;
 
 	return (
 		<BaseFieldConfig
 			label={label}
 			placeholder={placeholder}
 			helpText={helpText}
-			isRequired={true} // Text fields are always required
+			isRequired={isRequired}
 			setLabel={setLabel}
-			setPlaceholder={() => {}}
+			setPlaceholder={setPlaceholder}
 			setHelpText={setHelpText}
-			toggleIsRequired={() => {}} // Disable toggling - text fields are always required
+			toggleIsRequired={toggleIsRequired}
 			stepErrors={stepErrors}
 			showWarnings={showWarnings}
 			id={id}
 			fieldType="text"
-			id={id} // Fix: pass the field ID
 		/>
 	);
 };
@@ -267,7 +231,7 @@ const DescriptionField = (props) => {
 		stepErrors,
 		showWarnings,
 		setUseAsSummary,
-		id, // Get ID from root props
+		id,
 	} = props;
 	const { placeholder, label, isRequired, helpText, useAsSummary } =
 		props.values;
@@ -279,7 +243,7 @@ const DescriptionField = (props) => {
 			helpText={helpText}
 			isRequired={isRequired}
 			setLabel={setLabel}
-			setPlaceholder={() => {}}
+			setPlaceholder={setPlaceholder}
 			setHelpText={setHelpText}
 			toggleIsRequired={toggleIsRequired}
 			stepErrors={stepErrors}
@@ -301,7 +265,7 @@ const ImageField = (props) => {
 		toggleAllowCaption,
 		stepErrors,
 		showWarnings,
-		id, // Get ID from root props
+		id,
 	} = props;
 	const { label, isRequired, placeholder, allowCaption, helpText } =
 		props.values;
@@ -321,20 +285,14 @@ const ImageField = (props) => {
 			toggleAllowCaption={toggleAllowCaption}
 			stepErrors={stepErrors}
 			showWarnings={showWarnings}
-			id={id} // Fix: pass the field ID
+			id={id}
 			fieldType="image"
 		/>
 	);
 };
 
 const FeatureImageField = (props) => {
-	const {
-		setLabel,
-		setHelpText,
-		stepErrors,
-		showWarnings,
-		id, // Get ID from root props
-	} = props;
+	const { setLabel, setHelpText, stepErrors, showWarnings, id } = props;
 	const { label, placeholder, helpText } = props.values;
 
 	return (
@@ -342,14 +300,14 @@ const FeatureImageField = (props) => {
 			label={label}
 			placeholder={placeholder}
 			helpText={helpText}
-			isRequired={true} // Feature image fields are always required
+			isRequired={true}
 			setLabel={setLabel}
 			setPlaceholder={() => {}}
 			setHelpText={setHelpText}
-			toggleIsRequired={() => {}} // Disable toggling - feature image fields are always required
+			toggleIsRequired={() => {}}
 			stepErrors={stepErrors}
 			showWarnings={showWarnings}
-			id={id} // Fix: pass the field ID
+			id={id}
 			fieldType="feature-image"
 			customLabel="Label"
 		/>
@@ -367,7 +325,7 @@ const GalleryField = (props) => {
 		setAllowedTypes,
 		stepErrors,
 		showWarnings,
-		id, // Get ID from root props
+		id,
 	} = props;
 	const {
 		label,
@@ -415,9 +373,9 @@ const CTAField = (props) => {
 		setPlaceholder,
 		stepErrors,
 		showWarnings,
+		id,
 	} = props;
 	const { label, isRequired, helpText, placeholder } = props.values;
-	const { id } = props; // Get ID from root props
 
 	return (
 		<BaseFieldConfig
@@ -426,21 +384,26 @@ const CTAField = (props) => {
 			helpText={helpText}
 			isRequired={isRequired}
 			setLabel={setLabel}
-			setPlaceholder={() => {}}
+			setPlaceholder={setPlaceholder}
 			setHelpText={setHelpText}
 			toggleIsRequired={toggleIsRequired}
 			stepErrors={stepErrors}
 			showWarnings={showWarnings}
-			id={id} // Fix: pass the field ID
+			id={id}
 			fieldType="cta"
 		/>
 	);
 };
 
 const FileField = (props) => {
-	const { toggleIsRequired, setLabel, setHelpText, stepErrors, showWarnings } =
-		props;
-	const { id } = props; // Get ID from root props
+	const {
+		toggleIsRequired,
+		setLabel,
+		setHelpText,
+		stepErrors,
+		showWarnings,
+		id,
+	} = props;
 	const { label, isRequired, helpText } = props.values;
 
 	return (

package/src/components/ListingEditor.jsx

@@ -168,8 +168,8 @@ const ListingEditor = ({ mode = "create", listingId, onSuccess, onCancel }) => {
 
 		// formData always has structure { fields: {...} } after our fixes
 		const submissionData = isEditMode
-			? { id: listingId, fields: formData.fields }
-			: { fields: formData.fields };
+			? { id: listingId, fields: formData.fields, site: auth.site }
+			: { fields: formData.fields, site: auth.site };
 
 		const actionPromise = dispatch(
 			isEditMode ? editListing(submissionData) : createListing(submissionData),

package/src/components/SidebarLayout.jsx

@@ -84,7 +84,7 @@ const SideBarInner = (props) => {
 
 	// Build sidebar items based on mode
 	const buildSidebarItems = () => {
-		const isWizardMode = mode === "create" || mode === "edit";
+		const isWizardMode = mode === "create";
 
 		return steps.map((step, index) => {
 			const isCompleted = selectIsStepComplete(step.key);
@@ -109,8 +109,8 @@ const SideBarInner = (props) => {
 				isFontAwesome: true,
 				// Enhanced completion indicator
 				completed: isCompleted,
-				// Disable all navigation in wizard mode
-				disabled: isWizardMode || (mode === "create" && !isAccessible),
+				// Disable all navigation in create mode, otherwise respect accessibility
+				disabled: mode === "create" || !isAccessible,
 			};
 
 			return itemProps;
@@ -137,7 +137,7 @@ const SideBarInner = (props) => {
 
 	// Add effect to manually attach click handlers since HubSidebar might not use onclick properly
 	useEffect(() => {
-		const isWizardMode = mode === "create" || mode === "edit";
+		const isWizardMode = mode === "create";
 
 		const attachClickHandlers = () => {
 			const stepsWithUrls = [

package/src/components/listing/ListingFileInput.jsx

@@ -14,27 +14,26 @@ const ListingFileInput = ({
 	errorMessage,
 	disabled = false,
 }) => {
-	const fileInputRef = useRef(null);
-	const [internalFiles, setInternalFiles] = useState([]);
+	const [inputs, setInputs] = useState([{ id: 0, fileUrl: null }]);
+	const nextIdRef = useRef(1);
 
-	// Normalize file data to enhanced structure - always handle as multiple files
+	// Initialize inputs from value prop - map each existing file to an input
 	useEffect(() => {
 		if (value) {
+			let fileData = [];
+
 			// Handle multiple files - could be array of URLs or array of file objects
 			if (Array.isArray(value)) {
-				const normalizedFiles = value
+				fileData = value
 					.map((file) => {
 						if (typeof file === "string") {
-							// Backward compatibility: array of URLs
 							const fileName = file.split("/").pop() || "Unknown File";
 							return {
 								url: file,
-								name: fileName.replace(/\.[^/.]+$/, ""), // Remove extension
+								name: fileName.replace(/\.[^/.]+$/, ""),
 								originalName: fileName,
-								uploading: false,
 							};
 						} else if (file && typeof file === "object" && file.url) {
-							// Enhanced structure
 							return {
 								url: file.url,
 								name: file.name || file.originalName || "Unknown File",
@@ -42,27 +41,22 @@ const ListingFileInput = ({
 									file.originalName ||
 									file.url.split("/").pop() ||
 									"Unknown File",
-								uploading: false,
 							};
 						}
 						return null;
 					})
 					.filter(Boolean);
-				setInternalFiles(normalizedFiles);
 			} else {
-				// Handle single file values - normalize to array
+				// Handle single file values
 				let singleFile = null;
 				if (typeof value === "string") {
-					// Backward compatibility: single URL
 					const fileName = value.split("/").pop() || "Unknown File";
 					singleFile = {
 						url: value,
 						name: fileName.replace(/\.[^/.]+$/, ""),
 						originalName: fileName,
-						uploading: false,
 					};
 				} else if (value && typeof value === "object" && value.url) {
-					// Enhanced structure - preserve empty name if explicitly set
 					singleFile = {
 						url: value.url,
 						name:
@@ -73,60 +67,104 @@ const ListingFileInput = ({
 							value.originalName ||
 							value.url.split("/").pop() ||
 							"Unknown File",
-						uploading: false,
 					};
 				}
-				setInternalFiles(singleFile ? [singleFile] : []);
+				fileData = singleFile ? [singleFile] : [];
 			}
+
+			// Create inputs for each existing file
+			const existingInputs = fileData.map((file, index) => ({
+				id: index,
+				fileUrl: file.url,
+				name: file.name,
+				originalName: file.originalName,
+			}));
+			// Add one empty input at the end
+			nextIdRef.current = fileData.length;
+			setInputs([...existingInputs, { id: nextIdRef.current, fileUrl: null }]);
+			nextIdRef.current++;
 		} else {
-			setInternalFiles([]);
+			setInputs([{ id: 0, fileUrl: null }]);
 		}
 	}, [value]);
 
 	// Handle new file upload from FileInput component
-	const handleFileUpload = (uploadedUrl) => {
-		// Handle case where uploadedUrl might be undefined
+	const handleFileUpload = (inputId, uploadedUrl) => {
 		if (!uploadedUrl) {
 			return;
 		}
 
 		const fileName = uploadedUrl.split("/").pop() || "Unknown File";
-		const newFile = {
-			url: uploadedUrl,
-			name: "", // Start with empty name as requested
-			originalName: fileName,
-			uploading: false,
-		};
-
-		// Always add new file to existing array for multiple file support
-		const updatedFiles = [...internalFiles, newFile];
-		setInternalFiles(updatedFiles);
-		notifyParent(updatedFiles);
+
+		// Find the input that triggered this upload and update it
+		setInputs((prevInputs) => {
+			const updatedInputs = prevInputs.map((input) => {
+				if (input.id === inputId) {
+					return {
+						...input,
+						fileUrl: uploadedUrl,
+						name: "",
+						originalName: fileName,
+					};
+				}
+				return input;
+			});
+
+			// Add a new empty input for the next upload
+			updatedInputs.push({ id: nextIdRef.current, fileUrl: null });
+			nextIdRef.current++;
+
+			return updatedInputs;
+		});
 	};
 
 	// Handle file name change
 	const handleNameChange = (url, newName) => {
-		const updatedFiles = internalFiles.map((file) =>
-			file.url === url ? { ...file, name: newName } : file,
+		setInputs((prevInputs) =>
+			prevInputs.map((input) =>
+				input.fileUrl === url ? { ...input, name: newName } : input,
+			),
 		);
-		setInternalFiles(updatedFiles);
-		notifyParent(updatedFiles);
 	};
 
 	// Handle file removal
 	const handleFileRemove = (url) => {
-		const updatedFiles = internalFiles.filter((file) => file.url !== url);
-		setInternalFiles(updatedFiles);
-		notifyParent(updatedFiles);
+		setInputs((prevInputs) => {
+			return prevInputs.map((input) => {
+				if (input.fileUrl === url) {
+					return { ...input, fileUrl: null };
+				}
+				return input;
+			});
+		});
 	};
 
-	// Notify parent component of changes
-	const notifyParent = (files) => {
-		if (onChange) {
-			// Always return array of files for multiple file support
+	// Get all uploaded files from inputs
+	const getUploadedFiles = () => {
+		return inputs
+			.filter((input) => input.fileUrl !== null)
+			.map((input) => ({
+				url: input.fileUrl,
+				name: input.name,
+				originalName: input.originalName,
+			}));
+	};
+
+	// Track previous uploaded files to prevent infinite loops
+	const prevFilesRef = useRef([]);
+
+	// Sync with parent when uploaded files actually change
+	useEffect(() => {
+		const files = getUploadedFiles();
+		const currentUrls = files.map((f) => f.url).join(",");
+		const prevUrls = prevFilesRef.current.map((f) => f.url).join(",");
+
+		// Only call onChange if the file list actually changed
+		if (currentUrls !== prevUrls && onChange) {
+			prevFilesRef.current = files;
 			onChange(field.id, files);
 		}
-	};
+	}, [inputs]);
 
 	// Define acceptable file types for documents and common formats
 	const acceptTypes = {
@@ -145,7 +183,11 @@ const ListingFileInput = ({
 		"image/png": [".png"],
 	};
 
-	// Always show drop zone regardless of existing files
+	// Get the last empty input (the one to show)
+	const emptyInput = inputs.find((input) => input.fileUrl === null);
+
+	// Get uploaded files for display
+	const uploadedFiles = getUploadedFiles();
 
 	return (
 		<div className={styles.listingFileInput}>
@@ -169,25 +211,26 @@ const ListingFileInput = ({
 				)}
 			</Text>
 
-			{/* Drop zone */}
+			{/* Drop zone - always show exactly one empty input */}
 			<div
 				className={`${styles.listingFileInput__dropZone} ${showError ? styles["listingFileInput__dropZone--error"] : ""}`}
 			>
-				<FileInput
-					ref={fileInputRef}
-					className="imageInputOuter-single"
-					refreshCallback={handleFileUpload}
-					hasDefault={null}
-					accept={acceptTypes}
-					multiple={false} // Always handle one file at a time in the upload callback
-					disabled={disabled}
-				/>
+				{emptyInput && (
+					<FileInput
+						key={emptyInput.id}
+						refreshCallback={(url) => handleFileUpload(emptyInput.id, url)}
+						hasDefault={null}
+						accept={acceptTypes}
+						multiple={false}
+						disabled={disabled}
+					/>
+				)}
 			</div>
 
 			{/* File list */}
-			{internalFiles.length > 0 && (
+			{uploadedFiles.length > 0 && (
 				<div className={styles.listingFileInput__fileList}>
-					{internalFiles.map((file) => (
+					{uploadedFiles.map((file) => (
 						<FileListItem
 							key={file.url}
 							file={file}
@@ -199,31 +242,6 @@ const ListingFileInput = ({
 				</div>
 			)}
 
-			{/* Add more files button - always show when files exist */}
-			{internalFiles.length > 0 && (
-				<div>
-					<FileInput
-						ref={fileInputRef}
-						className="imageInputOuter-single"
-						refreshCallback={handleFileUpload}
-						hasDefault={null}
-						accept={acceptTypes}
-						multiple={false}
-						disabled={disabled}
-						customButton={
-							<Button
-								buttonType="secondary"
-								className={styles.listingFileInput__addMoreButton}
-								disabled={disabled}
-							>
-								<FontAwesomeIcon icon={iconImports.plus} />
-								Add More Files
-							</Button>
-						}
-					/>
-				</div>
-			)}
-
 			{showError && errorMessage && (
 				<Text
 					type="help"

package/src/components/listing/ListingFileInput.module.css

@@ -38,9 +38,7 @@
 	display: flex;
 	align-items: center;
 	gap: 0.75rem;
-	padding: 0.75rem;
 	background-color: var(--bg-white);
-	margin-bottom: 0.5rem;
 	transition: all var(--transition-base) ease-in-out;
 }
 
@@ -50,9 +48,8 @@
 
 .fileListItem__icon {
 	color: var(--text-bluegrey);
-	font-size: var(--font-size-base);
+	font-size: 2rem;
 	flex-shrink: 0;
-	width: 1.5rem;
 	text-align: center;
 }
 

package/src/components/listing/ListingGalleryInput.module.css

@@ -3,6 +3,7 @@
 /* Gallery container styles */
 .galleryContainer {
 	margin-top: 0.75rem;
+	max-width: 200px;
 }
 
 /* Error border wrapper */
@@ -20,7 +21,7 @@
 
 .imageGrid {
 	display: grid;
-	grid-template-columns: repeat(var(--columns, 4), 1fr);
+	grid-template-columns: repeat(4, 160px);
 	gap: 1rem;
 	margin-top: 0.5rem;
 }

package/src/reducers/featureBuilderReducer.js

@@ -86,7 +86,7 @@ const DEFAULT_NEW_FIELD = {
 		allowCaption: false, // Default to not allowing captions for image fields
 		useAsSummary: false, // Default to not using as summary for description fields
 		minImages: 1, // Gallery-specific default
-		maxImages: 10, // Gallery-specific default
+		maxImages: 16, // Gallery-specific default
 		maxFileSize: "5MB", // Gallery-specific default
 		allowedTypes: [], // Gallery-specific default
 	},
@@ -138,7 +138,7 @@ function createNewField(id, type = "text", existingFields = []) {
 			baseField.values.label = "Image Gallery";
 			baseField.values.helpText = "Upload multiple images to create a gallery";
 			baseField.values.minImages = 1;
-			baseField.values.maxImages = 10;
+			baseField.values.maxImages = 16;
 			baseField.values.maxFileSize = "5MB";
 			baseField.values.allowedTypes = ["image/jpeg", "image/png", "image/webp"];
 			const {
@@ -277,8 +277,11 @@ const formReducer = (state = INITIAL_FORM_STATE, action) => {
 	switch (type) {
 		case formActionTypes.SET_INITIAL_VALUES: {
 			// The actual definition data is in payload.featureDefinition.definition
-			const definitionWrapper = (payload && payload.featureDefinition) || payload;
-			const definition = (definitionWrapper && definitionWrapper.definition) || definitionWrapper;
+			const definitionWrapper =
+				(payload && payload.featureDefinition) || payload;
+			const definition =
+				(definitionWrapper && definitionWrapper.definition) ||
+				definitionWrapper;
 
 			// Validate and map definition data to form state structure
 			const mappedValues = {
@@ -513,8 +516,11 @@ const definitionReducer = (state = INITIAL_STATE.definition, action) => {
 				const featureDefinitionWrapper =
 					(data && data.featureDefinition) || data;
 				definition =
-					(featureDefinitionWrapper && featureDefinitionWrapper.definition) || featureDefinitionWrapper;
-				definitionId = (featureDefinitionWrapper && featureDefinitionWrapper.id) || values.featureId;
+					(featureDefinitionWrapper && featureDefinitionWrapper.definition) ||
+					featureDefinitionWrapper;
+				definitionId =
+					(featureDefinitionWrapper && featureDefinitionWrapper.id) ||
+					values.featureId;
 
 				// Ensure fields array exists and preserves order property
 				if (definition?.fields) {