@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.4 → 1.0.2-beta.6

package/src/components/IconLoader.jsx

@@ -9,145 +9,145 @@ const { Apis } = PlussCore;
 const { fileActions } = Apis;
 
 const IconLoader = ({
-  value,
-  defaultValue,
-  onChange,
-  onRemove,
-  disableRemove = false,
-  featureId,
+	value,
+	defaultValue,
+	onChange,
+	onRemove,
+	disableRemove = false,
+	featureId,
 }) => {
-  const [isUploading, setIsUploading] = useState(false);
-  const fileInputRef = useRef(null);
-
-  // Determine which icon to show
-  const hasCustomIcon =
-    value && typeof value === "string" && value.startsWith("http");
-  const iconToShow = defaultValue || "star";
-
-  // Generate filename with feature ID
-  const generateFilename = (file, featureId) => {
-    const timestamp = Date.now();
-    const ext = file.name.split(".").pop();
-    return `build-your-feature-${featureId || "new"}-${timestamp}.${ext}`;
-  };
-
-  // Get FontAwesome icon component directly (no async needed)
-  const iconComponent = !hasCustomIcon ? iconImports[iconToShow] : null;
-
-  const handleFileSelect = async (event) => {
-    const file = event.target.files[0];
-    if (!file || isUploading) return;
-
-    // Validate file type - only accept images
-    if (!file.type.startsWith("image/")) {
-      alert("Please upload an image file (JPEG, PNG, GIF, or WebP)");
-      return;
-    }
-
-    setIsUploading(true);
-
-    try {
-      // Compress and upload the image
-      const compressedFile = await fileActions.compressImage(
-        file,
-        1400,
-        0.8,
-        false,
-      );
-
-      const filename = generateFilename(compressedFile, featureId);
-      const url = await fileActions.uploadMediaAsync(compressedFile, filename);
-
-      if (onChange) {
-        onChange(url);
-      }
-    } catch (error) {
-      alert("Failed to upload image. Please try again.");
-    } finally {
-      setIsUploading(false);
-      // Reset file input
-      if (fileInputRef.current) {
-        fileInputRef.current.value = "";
-      }
-    }
-  };
-
-  const handleUploadClick = () => {
-    if (fileInputRef.current && !isUploading) {
-      fileInputRef.current.click();
-    }
-  };
-
-  const handleRemove = () => {
-    if (onRemove && !disableRemove) {
-      onRemove();
-    }
-  };
-
-  // Container will use CSS modules classes
-  // Custom styling through props is deprecated in favor of CSS consistency
-
-  return (
-    <div className={`${styles.iconLoader} ${styles.iconLoader__container}`}>
-      {/* Show the icon/image */}
-      {hasCustomIcon ? (
-        <img
-          src={value}
-          alt="Custom icon"
-          className={styles.iconLoader__image}
-        />
-      ) : (
-        <div className={styles.iconLoader__iconContainer}>
-          {iconComponent ? (
-            <FontAwesomeIcon
-              icon={iconComponent}
-              className={`${styles.iconLoader__icon} ${styles.iconLoader__iconLarge}`}
-            />
-          ) : (
-            <div className={styles.iconLoader__fallbackText}>{iconToShow}</div>
-          )}
-        </div>
-      )}
-
-      {/* Upload/Delete button overlay - only shows on hover */}
-      <div className={styles.iconLoader__buttonOverlay}>
-        {hasCustomIcon ? (
-          <Button
-            buttonType="secondary"
-            isActive
-            onClick={handleRemove}
-            disabled={disableRemove || isUploading}
-            size="small"
-            leftIcon="times"
-            aria-label="Delete icon"
-          >
-            Delete
-          </Button>
-        ) : (
-          <Button
-            buttonType="primary"
-            onClick={() => { }}
-            disabled={isUploading}
-            size="small"
-            leftIcon="upload"
-            loading={isUploading}
-            aria-label="Upload icon"
-          >
-            Upload
-          </Button>
-        )}
-      </div>
-
-      {/* Hidden file input */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/jpeg,image/png,image/gif,image/webp,image/svg"
-        onChange={handleFileSelect}
-        className={styles.iconLoader__hiddenInput}
-      />
-    </div>
-  );
+	const [isUploading, setIsUploading] = useState(false);
+	const fileInputRef = useRef(null);
+
+	// Determine which icon to show
+	const hasCustomIcon =
+		value && typeof value === "string" && value.startsWith("http");
+	const iconToShow = defaultValue || "star";
+
+	// Generate filename with feature ID
+	const generateFilename = (file, featureId) => {
+		const timestamp = Date.now();
+		const ext = file.name.split(".").pop();
+		return `build-your-feature-${featureId || "new"}-${timestamp}.${ext}`;
+	};
+
+	// Get FontAwesome icon component directly (no async needed)
+	const iconComponent = !hasCustomIcon ? iconImports[iconToShow] : null;
+
+	const handleFileSelect = async (event) => {
+		const file = event.target.files[0];
+		if (!file || isUploading) return;
+
+		// Validate file type - only accept images
+		if (!file.type.startsWith("image/")) {
+			alert("Please upload an image file (JPEG, PNG, GIF, or WebP)");
+			return;
+		}
+
+		setIsUploading(true);
+
+		try {
+			// Compress and upload the image
+			const compressedFile = await fileActions.compressImage(
+				file,
+				1400,
+				0.8,
+				false,
+			);
+
+			const filename = generateFilename(compressedFile, featureId);
+			const url = await fileActions.uploadMediaAsync(compressedFile, filename);
+
+			if (onChange) {
+				onChange(url);
+			}
+		} catch (error) {
+			alert("Failed to upload image. Please try again.");
+		} finally {
+			setIsUploading(false);
+			// Reset file input
+			if (fileInputRef.current) {
+				fileInputRef.current.value = "";
+			}
+		}
+	};
+
+	const handleUploadClick = () => {
+		if (fileInputRef.current && !isUploading) {
+			fileInputRef.current.click();
+		}
+	};
+
+	const handleRemove = () => {
+		if (onRemove && !disableRemove) {
+			onRemove();
+		}
+	};
+
+	// Container will use CSS modules classes
+	// Custom styling through props is deprecated in favor of CSS consistency
+
+	return (
+		<div className={`${styles.iconLoader} ${styles.iconLoader__container}`}>
+			{/* Show the icon/image */}
+			{hasCustomIcon ? (
+				<img
+					src={value}
+					alt="Custom icon"
+					className={styles.iconLoader__image}
+				/>
+			) : (
+				<div className={styles.iconLoader__iconContainer}>
+					{iconComponent ? (
+						<FontAwesomeIcon
+							icon={iconComponent}
+							className={`${styles.iconLoader__icon} ${styles.iconLoader__iconLarge}`}
+						/>
+					) : (
+						<div className={styles.iconLoader__fallbackText}>{iconToShow}</div>
+					)}
+				</div>
+			)}
+
+			{/* Upload/Delete button overlay - only shows on hover */}
+			<div className={styles.iconLoader__buttonOverlay}>
+				{hasCustomIcon ? (
+					<Button
+						buttonType="secondary"
+						isActive
+						onClick={handleRemove}
+						disabled={disableRemove || isUploading}
+						size="small"
+						leftIcon="times"
+						aria-label="Delete icon"
+					>
+						Delete
+					</Button>
+				) : (
+					<Button
+						buttonType="primary"
+						onClick={() => {}}
+						disabled={isUploading}
+						size="small"
+						leftIcon="upload"
+						loading={isUploading}
+						aria-label="Upload icon"
+					>
+						Upload
+					</Button>
+				)}
+			</div>
+
+			{/* Hidden file input */}
+			<input
+				ref={fileInputRef}
+				type="file"
+				accept="image/jpeg,image/png,image/gif,image/webp,image/svg"
+				onChange={handleFileSelect}
+				className={styles.iconLoader__hiddenInput}
+			/>
+		</div>
+	);
 };
 
 export default IconLoader;

package/src/components/IconSelector.jsx

@@ -6,7 +6,6 @@ import { allIcons, defaultIcon } from "./iconCategories";
 import { iconImports } from "./iconImports";
 import styles from "./IconSelector.module.css";
 
-
 const IconSelector = ({
 	selectedIcon,
 	onIconSelect,

package/src/components/ListingEditor.jsx

@@ -32,7 +32,6 @@ import {
 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();

package/src/components/SidebarLayout.jsx

@@ -48,8 +48,17 @@ const SideBarInner = (props) => {
 
 	// Define step configuration with dynamic URL based on mode
 	const getStepUrl = (stepKey) => {
-		// Always use /definition/ in the URL since that's how routes are registered
-		return `/feature-builder/definition/${stepKey}`;
+		// Use routes from values.config to support different variants (-a, -b, -c, -d)
+		switch (stepKey) {
+			case "overview":
+				return values.routeFormOverviewStep;
+			case "fields":
+				return values.routeFormFieldsStep;
+			case "layout":
+				return values.routeFormLayoutStep;
+			default:
+				return "";
+		}
 	};
 
 	const steps = [
@@ -75,6 +84,8 @@ const SideBarInner = (props) => {
 
 	// Build sidebar items based on mode
 	const buildSidebarItems = () => {
+		const isWizardMode = mode === "create" || mode === "edit";
+
 		return steps.map((step, index) => {
 			const isCompleted = selectIsStepComplete(step.key);
 			const isAccessible = selectIsStepAccessible(step.key);
@@ -87,17 +98,19 @@ const SideBarInner = (props) => {
 				text: stepText,
 				icon: step.icon,
 				selected: isSelected(step.url),
-				onclick: isAccessible
-					? () => {
-							goTo(step.url);
-							dispatch(goToStep(step.key));
-						}
-					: null,
+				onclick: isWizardMode
+					? null
+					: isAccessible
+						? () => {
+								goTo(step.url);
+								dispatch(goToStep(step.key));
+							}
+						: null,
 				isFontAwesome: true,
 				// Enhanced completion indicator
 				completed: isCompleted,
-				// Allow navigation to completed steps even in create mode
-				disabled: mode === "create" && !isAccessible,
+				// Disable all navigation in wizard mode
+				disabled: isWizardMode || (mode === "create" && !isAccessible),
 			};
 
 			return itemProps;
@@ -124,6 +137,8 @@ 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 attachClickHandlers = () => {
 			const stepsWithUrls = [
 				{ key: "overview", url: getStepUrl("overview") },
@@ -131,19 +146,12 @@ const SideBarInner = (props) => {
 				{ key: "layout", url: getStepUrl("layout") },
 			];
 
-			stepsWithUrls.forEach((step) => {
+			stepsWithUrls.forEach((step, index) => {
 				const navItem = Array.from(
-					document.querySelectorAll(".sideNav-item"),
+					document.querySelectorAll(".hub-wrapperContainer .sideNav-item"),
 				).find(
 					(item) =>
-						item.textContent &&
-						item.textContent.includes(
-							step.key === "overview"
-								? "Feature Overview"
-								: step.key === "fields"
-									? "Configure Fields"
-									: "Choose Layout",
-						),
+						item.textContent && item.textContent.includes(`${index + 1}.`),
 				);
 
 				if (navItem) {
@@ -162,8 +170,12 @@ const SideBarInner = (props) => {
 						},
 					});
 
-					// Add our click handler only if accessible
-					if (isAccessible) {
+					// Check if this is the current step (selected)
+					const isCurrentStep = isSelected(step.url);
+
+					// In wizard mode, don't attach any click handlers
+					// Only attach click handler if not in wizard mode AND accessible
+					if (!isWizardMode && isAccessible) {
 						navItem.onclick = (event) => {
 							event.preventDefault();
 							event.stopPropagation();
@@ -173,9 +185,19 @@ const SideBarInner = (props) => {
 					}
 
 					// Make sure it's styled appropriately
-					navItem.style.cursor = isAccessible ? "pointer" : "not-allowed";
-					navItem.style.pointerEvents = "auto";
-					navItem.style.opacity = isAccessible ? "1" : "0.5";
+					// In wizard mode: block clicks, but keep current step visible
+					navItem.style.pointerEvents = isWizardMode ? "none" : "auto";
+
+					if (isWizardMode) {
+						// Current step: full opacity, not-allowed cursor
+						// Other steps: reduced opacity
+						navItem.style.opacity = isCurrentStep ? "1" : "0.4";
+						navItem.style.cursor = "not-allowed";
+					} else {
+						// Not in wizard mode: normal styling based on accessibility
+						navItem.style.cursor = isAccessible ? "pointer" : "not-allowed";
+						navItem.style.opacity = isAccessible ? "1" : "0.5";
+					}
 				}
 			});
 		};

package/src/components/SidebarLayout.module.css

@@ -58,40 +58,6 @@
 }
 
 /* Enhanced sidebar navigation for progress indication */
-:global(.hub-sideBar) {
-	/* Make sidebar more prominent during creation mode */
-}
-
-:global(.sideNav-item.isCurrent) {
-	background: var(--colour-purple, #6e79c5) !important;
-	color: var(--colour-white, #ffffff) !important;
-	font-weight: 600 !important;
-	border-left: 4px solid var(--colour-branding-dark, #364196) !important;
-}
-
-:global(.sideNav-item.isCurrent) i {
-	color: var(--colour-white, #ffffff) !important;
-}
-
-:global(.sideNav-item.isCompleted) {
-	color: var(--colour-branding-dark, #364196) !important;
-	position: relative;
-}
-
-:global(.sideNav-item.isCompleted::after) {
-	content: "✓";
-	position: absolute;
-	right: 1rem;
-	top: 50%;
-	transform: translateY(-50%);
-	color: var(--colour-branding-dark, #364196);
-	font-weight: bold;
-}
-
-:global(.sideNav-item.isDisabled) {
-	opacity: 0.4;
-	cursor: not-allowed;
-}
 
 /* Enhanced progress section */
 :global(.hub-sideBar-section) {

package/src/components/index.js

@@ -57,5 +57,3 @@ export { default as ToastContainer } from "./ToastContainer.jsx";
 // Gallery components
 export { default as ListingGalleryInput } from "./listing/ListingGalleryInput.jsx";
 export { default as GalleryDisplay } from "./listing/GalleryDisplay.jsx";
-
-

package/src/components/listing/GalleryDisplay.jsx

@@ -4,7 +4,6 @@ import { Text } from "../../components";
 import { iconImports } from "../../components/iconImports.js";
 import styles from "./GalleryDisplay.module.css";
 
-
 export const GalleryDisplay = (props) => {
 	const {
 		images = [],

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/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[values.screenFormOverviewStep] = FormOverviewStep;
-	screens[values.screenFormFieldsStep] = FormFieldsStep;
-	screens[values.screenFormLayoutStep] = FormLayoutStep;
-	screens[values.screenListingScreen] = ListingScreen;
-	screens[values.pageCreateListing] = CreateListingPage;
-	screens[values.pageEditListing] = EditListingPage;
+	screens["FormOverviewStep"] = FormOverviewStep;
+	screens["FormFieldsStep"] = FormFieldsStep;
+	screens["FormLayoutStep"] = FormLayoutStep;
+	screens["ListingScreen"] = ListingScreen;
+	screens["CreateListingPage"] = CreateListingPage;
+	screens["EditListingPage"] = EditListingPage;
 	return screens;
 })();
 

package/src/reducers/featureBuilderReducer.js

@@ -277,28 +277,21 @@ 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.featureDefinition
-					: payload;
-			const definition =
-				definitionWrapper && definitionWrapper.definition
-					? definitionWrapper.definition
-					: definitionWrapper;
+			const definitionWrapper = payload?.featureDefinition ?? payload;
+			const definition = 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 +511,13 @@ 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?.featureDefinition ?? data;
 				definition =
-					featureDefinitionWrapper && featureDefinitionWrapper.definition
-						? featureDefinitionWrapper.definition
-						: featureDefinitionWrapper;
-				definitionId =
-					(featureDefinitionWrapper && featureDefinitionWrapper.id) ||
-					values.featureId;
+					featureDefinitionWrapper?.definition ?? featureDefinitionWrapper;
+				definitionId = 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 +555,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 {