@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.0 → 1.0.2-beta.10

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.jsx

@@ -186,7 +186,10 @@ const ListingGalleryInput = ({
 						>
 							{images.map((image, index) => {
 								return (
-									<div key={`image-${index}`} className={galleryStyles.imageItem}>
+									<div
+										key={`image-${index}`}
+										className={galleryStyles.imageItem}
+									>
 										<img
 											src={image}
 											alt={`Gallery item ${index + 1}`}

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/hooks/useFeatureDefinitionLoader.js

@@ -3,8 +3,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { fetchFeatureDefinitions } from "../actions/featureDefinitionsIndex";
 import {
 	selectDefinition,
-	selectDefinitionIsLoading,
 	selectDefinitionError,
+	selectDefinitionIsLoading,
+	selectDefinitionMode,
 } from "../selectors/featureBuilderSelectors";
 
 /**
@@ -35,9 +36,12 @@ export const useFeatureDefinitionLoader = (options = {}) => {
 	const definition = useSelector(selectDefinition);
 	const isLoading = useSelector(selectDefinitionIsLoading);
 	const error = useSelector(selectDefinitionError);
+	const mode = useSelector(selectDefinitionMode);
 
 	// Determine if we need to load the definition
-	const shouldLoadDefinition = !definition || forceReload;
+	// Only load if: definition is missing AND mode is not yet set (meaning we haven't tried to fetch yet)
+	// OR forceReload is true
+	const shouldLoadDefinition = (!definition && !mode) || forceReload;
 
 	// Function to manually reload definition
 	const reloadDefinition = () => {

package/src/index.js

@@ -18,12 +18,12 @@ export const Reducers = (() => {
 export const Screens = (() => {
 	const screens = {};
 
-	screens["FormOverviewStep"] = FormOverviewStep;
-	screens["FormFieldsStep"] = FormFieldsStep;
-	screens["FormLayoutStep"] = FormLayoutStep;
-	screens["ListingScreen"] = ListingScreen;
-	screens["CreateListingPage"] = CreateListingPage;
-	screens["EditListingPage"] = EditListingPage;
+	screens[values.screenFormOverviewStep] = FormOverviewStep;
+	screens[values.screenFormFieldsStep] = FormFieldsStep;
+	screens[values.screenFormLayoutStep] = FormLayoutStep;
+	screens[values.screenListingScreen] = ListingScreen;
+	screens[values.pageCreateListing] = CreateListingPage;
+	screens[values.pageEditListing] = EditListingPage;
 	return screens;
 })();
 

package/src/reducers/featureBuilderReducer.js

@@ -23,6 +23,7 @@
  */
 // Import action types from existing files
 import { actionsTypes as formActionTypes } from "../actions/formActions";
+const { SUBMIT_FORM_SUCCESS } = formActionTypes;
 import {
 	FETCH_FEATURES_REQUEST,
 	FETCH_FEATURES_SUCCESS,
@@ -86,7 +87,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 +139,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 {
@@ -278,27 +279,23 @@ const formReducer = (state = INITIAL_FORM_STATE, action) => {
 		case formActionTypes.SET_INITIAL_VALUES: {
 			// The actual definition data is in payload.featureDefinition.definition
 			const definitionWrapper =
-				payload && payload.featureDefinition
-					? payload.featureDefinition
-					: payload;
+				(payload && payload.featureDefinition) || payload;
 			const definition =
-				definitionWrapper && definitionWrapper.definition
-					? definitionWrapper.definition
-					: definitionWrapper;
+				(definitionWrapper && definitionWrapper.definition) ||
+				definitionWrapper;
 
 			// Validate and map definition data to form state structure
 			const mappedValues = {
-				title: (definition && definition.title) || "",
-				icon: (definition && definition.icon) || "star",
-				displayName: (definition && definition.displayName) || "",
-				layout: (definition && definition.layout) || {
+				title: definition?.title || "",
+				icon: definition?.icon || "star",
+				displayName: definition?.displayName || "",
+				layout: definition?.layout || {
 					gridIcon: undefined,
 					type: "round",
 				},
-				fields:
-					definition && Array.isArray(definition.fields)
-						? definition.fields
-						: state.fields,
+				fields: Array.isArray(definition?.fields)
+					? definition.fields
+					: state.fields,
 			};
 
 			const newState = {
@@ -518,17 +515,16 @@ const definitionReducer = (state = INITIAL_STATE.definition, action) => {
 				// Extract from API response for edit mode
 				// Handle nested structure: data.featureDefinition.definition
 				const featureDefinitionWrapper =
-					data && data.featureDefinition ? data.featureDefinition : data;
+					(data && data.featureDefinition) || data;
 				definition =
-					featureDefinitionWrapper && featureDefinitionWrapper.definition
-						? featureDefinitionWrapper.definition
-						: featureDefinitionWrapper;
+					(featureDefinitionWrapper && featureDefinitionWrapper.definition) ||
+					featureDefinitionWrapper;
 				definitionId =
 					(featureDefinitionWrapper && featureDefinitionWrapper.id) ||
 					values.featureId;
 
 				// Ensure fields array exists and preserves order property
-				if (definition && definition.fields) {
+				if (definition?.fields) {
 					// Create a new array to ensure we preserve all field properties including order
 					definition.fields = definition.fields.map((field) => ({
 						...field,
@@ -566,7 +562,7 @@ const definitionReducer = (state = INITIAL_STATE.definition, action) => {
 					definition: payload, // Optimistically update with new definition
 					mode: "edit", // Switch to edit mode immediately
 				},
-				id: payload && payload.id,
+				id: payload?.id,
 				error: null,
 			};
 

package/src/screens/Form.module.css

@@ -426,6 +426,11 @@
 	cursor: pointer;
 	transition: all 0.2s ease;
 	background-color: transparent;
+	opacity: 0.6;
+}
+
+.layoutOption:hover {
+	opacity: 1;
 }
 
 .layoutOptionImage {
@@ -439,10 +444,14 @@
 }
 
 .layoutOption.selected .layoutOptionImage {
-	border-color: var(--border-line-grey, #dbddf1);
+	border-color: var(--colour-purple, #6e79c5);
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
+.layoutOption.selected {
+	opacity: 1;
+}
+
 .layoutOptionImg {
 	width: 100%;
 	height: 100%;
@@ -451,6 +460,7 @@
 
 .layoutOptionContent {
 	max-width: 250px;
+	margin-bottom: 0.5rem;
 }
 
 .layoutOptionTitle {