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

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();
@@ -169,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

@@ -1,32 +1,23 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
 import { withRouter } from "react-router";
-import { HubSidebar, DeleteConfirmationPopup } from "./index.js";
+import { HubSidebar } from "./index.js";
 import {
 	selectWizardMode,
 	selectCurrentStep,
 	selectIsStepComplete,
 	selectIsStepAccessible,
-	selectStepProgress,
 	selectIsEditMode,
 	selectIsCreateMode,
-	selectDefinition,
-	selectDefinitionId,
 } from "../selectors/featureBuilderSelectors";
 import { goToStep } from "../actions/wizardActions";
 import { useDispatch } from "react-redux";
-import { PlussCore } from "../feature.config";
 import { values } from "../values.config";
 import styles from "./SidebarLayout.module.css";
 
-const { Helper, Session } = PlussCore;
-const { getUrl } = Helper;
-const { authedFunction } = Session;
-
 /**
  * Sidebar Layout component for feature builder wizard
  * Provides navigation sidebar with step progression, completion tracking
- * Includes delete functionality for feature definitions
  * Manages step accessibility based on wizard mode and validation state
  *
  * @param {Object} props - Component props
@@ -48,14 +39,6 @@ const SideBarInner = (props) => {
 	const isEditMode = useSelector(selectIsEditMode);
 	const isCreateMode = useSelector(selectIsCreateMode);
 	const currentStep = useSelector(selectCurrentStep);
-	const stepProgress = useSelector(selectStepProgress);
-	const definition = useSelector(selectDefinition);
-	const definitionId = useSelector(selectDefinitionId);
-	const auth = useSelector((state) => state.auth);
-
-	// Delete functionality state
-	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-	const [isDeleting, setIsDeleting] = useState(false);
 
 	const goTo = (url) => history.push(url);
 
@@ -65,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 = [
@@ -92,6 +84,8 @@ const SideBarInner = (props) => {
 
 	// Build sidebar items based on mode
 	const buildSidebarItems = () => {
+		const isWizardMode = mode === "create";
+
 		return steps.map((step, index) => {
 			const isCompleted = selectIsStepComplete(step.key);
 			const isAccessible = selectIsStepAccessible(step.key);
@@ -104,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 create mode, otherwise respect accessibility
+				disabled: mode === "create" || !isAccessible,
 			};
 
 			return itemProps;
@@ -139,36 +135,10 @@ const SideBarInner = (props) => {
 		},
 	];
 
-	// Delete functionality handlers
-	const handleDeleteClick = () => {
-		setShowDeleteConfirm(true);
-	};
-
-	const handleConfirmDelete = async () => {
-		if (!definition) return;
-
-		setIsDeleting(true);
-		try {
-			await authedFunction({
-				method: "POST",
-				url: getUrl("feature-builder", "definition/update/delete"),
-				data: { id: definitionId, site: auth.site },
-			});
-
-			// Redirect to welcome screen after deletion
-			history.push("/feature-builder/definition/overview");
-		} finally {
-			setIsDeleting(false);
-			setShowDeleteConfirm(false);
-		}
-	};
-
-	const handleCancelDelete = () => {
-		setShowDeleteConfirm(false);
-	};
-
 	// Add effect to manually attach click handlers since HubSidebar might not use onclick properly
 	useEffect(() => {
+		const isWizardMode = mode === "create";
+
 		const attachClickHandlers = () => {
 			const stepsWithUrls = [
 				{ key: "overview", url: getStepUrl("overview") },
@@ -176,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) {
@@ -207,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();
@@ -218,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";
+					}
 				}
 			});
 		};
@@ -263,28 +240,11 @@ const SideBarInner = (props) => {
 				/>
 			)}
 
-			{/* Dev Delete Button - Absolute positioned at bottom of sidebar */}
-			{shouldShowSidebar && (
-				<button onClick={handleDeleteClick} className={styles.devDeleteButton}>
-					DELETE FEATURE DEF
-				</button>
-			)}
-
 			<div className="hub-contentWrapper">
 				<div className={styles.fullWidthContainer}>
 					<div className={styles.contentContainer}>{children}</div>
 				</div>
 			</div>
-
-			{/* Delete Confirmation Popup */}
-			<DeleteConfirmationPopup
-				isOpen={showDeleteConfirm}
-				listing={definition}
-				onConfirm={handleConfirmDelete}
-				onCancel={handleCancelDelete}
-				isDeleting={isDeleting}
-				deleteType="featureDefinition"
-			/>
 		</div>
 	);
 };

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) {
@@ -103,43 +69,3 @@
 :global(.hub-sideBar-section:last-child) {
 	border-bottom: none;
 }
-
-/* Delete button styling - bold red for development */
-.deleteButton {
-	color: #dc3545 !important;
-	font-weight: bold !important;
-}
-
-:global(.sideNav-item.deleteButton) {
-	color: #dc3545 !important;
-	font-weight: bold !important;
-}
-
-:global(.sideNav-item.deleteButton:hover) {
-	background-color: rgba(220, 53, 69, 0.1) !important;
-}
-
-:global(.sideNav-item.deleteButton i) {
-	color: #dc3545 !important;
-}
-
-/* Development delete button */
-.devDeleteButton {
-	position: absolute;
-	bottom: 20px;
-	left: 20px;
-	background-color: #ff0000;
-	color: #ffffff;
-	border: none;
-	padding: 8px 12px;
-	border-radius: 4px;
-	cursor: pointer;
-	font-size: 12px;
-	font-weight: bold;
-	z-index: 1000;
-	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-}
-
-.devDeleteButton:hover {
-	background-color: #cc0000;
-}

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 = [],