@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.3 → 1.0.2-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-feature-builder-web-a",
-  "version": "1.0.2-beta.3",
+  "version": "1.0.2-beta.5",
   "description": "Contains the feature builder extension for the pluss communities ",
   "main": "dist/index.cjs.js",
   "scripts": {

package/rollup.config.js

@@ -56,6 +56,7 @@ MODE.map((m) => {
 				postcss: {
 					plugins: [autoprefixer()],
 				},
+				autoModules: /\.module\.css$/,
 			}),
 			json(),
 			image(),

package/src/actions/featureDefinitionsIndex.js

@@ -6,25 +6,26 @@ import {
 	updatePermissionNames,
 } from "./featureBuilderStringsActions";
 
-export const FETCH_FEATURES_REQUEST = "FETCH_FEATURES_REQUEST";
-export const FETCH_FEATURES_SUCCESS = "FETCH_FEATURES_SUCCESS";
-export const FETCH_FEATURES_FAILURE = "FETCH_FEATURES_FAILURE";
+const REDUCER_PREFIX = values.reducerKey.toUpperCase();
+export const FETCH_FEATURES_REQUEST = `${REDUCER_PREFIX}_FETCH_FEATURES_REQUEST`;
+export const FETCH_FEATURES_SUCCESS = `${REDUCER_PREFIX}_FETCH_FEATURES_SUCCESS`;
+export const FETCH_FEATURES_FAILURE = `${REDUCER_PREFIX}_FETCH_FEATURES_FAILURE`;
 
-export const FEATURE_CREATE_REQUEST = "FEATURE_CREATE_REQUEST";
-export const FEATURE_CREATE_SUCCESS = "FEATURE_CREATE_SUCCESS";
-export const FEATURE_CREATE_FAILURE = "FEATURE_CREATE_FAILURE";
+export const FEATURE_CREATE_REQUEST = `${REDUCER_PREFIX}_FEATURE_CREATE_REQUEST`;
+export const FEATURE_CREATE_SUCCESS = `${REDUCER_PREFIX}_FEATURE_CREATE_SUCCESS`;
+export const FEATURE_CREATE_FAILURE = `${REDUCER_PREFIX}_FEATURE_CREATE_FAILURE`;
 
-export const FEATURE_EDIT_REQUEST = "FEATURE_EDIT_REQUEST";
-export const FEATURE_EDIT_SUCCESS = "FEATURE_EDIT_SUCCESS";
-export const FEATURE_EDIT_FAILURE = "FEATURE_EDIT_FAILURE";
+export const FEATURE_EDIT_REQUEST = `${REDUCER_PREFIX}_FEATURE_EDIT_REQUEST`;
+export const FEATURE_EDIT_SUCCESS = `${REDUCER_PREFIX}_FEATURE_EDIT_SUCCESS`;
+export const FEATURE_EDIT_FAILURE = `${REDUCER_PREFIX}_FEATURE_EDIT_FAILURE`;
 
-export const FEATURE_DELETE_REQUEST = "FEATURE_DELETE_REQUEST";
-export const FEATURE_DELETE_FAILURE = "FEATURE_DELETE_FAILURE";
+export const FEATURE_DELETE_REQUEST = `${REDUCER_PREFIX}_FEATURE_DELETE_REQUEST`;
+export const FEATURE_DELETE_FAILURE = `${REDUCER_PREFIX}_FEATURE_DELETE_FAILURE`;
 
 // Wizard synchronization action types
 export const SYNC_WIZARD_MODE_FROM_DEFINITION =
-	"SYNC_WIZARD_MODE_FROM_DEFINITION";
-export const SET_WIZARD_MODE = "SET_WIZARD_MODE";
+	`${REDUCER_PREFIX}_SYNC_WIZARD_MODE_FROM_DEFINITION`;
+export const SET_WIZARD_MODE = `${REDUCER_PREFIX}_SET_WIZARD_MODE`;
 
 function fetchFeaturesRequest() {
 	return { type: FETCH_FEATURES_REQUEST };

package/src/actions/formActions.js

@@ -40,20 +40,20 @@ import { toTitleCase } from "../utils/textUtils";
  */
 
 export const actionsTypes = {
-	SET_INITIAL_VALUES: "SET_INITIAL_VALUES",
-	SET_TITLE: "SET_TITLE",
-	SET_ICON: "SET_ICON",
-	SET_DISPLAY_NAME: "SET_DISPLAY_NAME",
-	ADD_FIELD: "ADD_FIELD",
-	DELETE_FIELD: "DELETE_FIELD",
-	UPDATE_FIELD: "UPDATE_FIELD",
-	SET_LAYOUT_GRID_ICON: "SET_LAYOUT_GRID_ICON",
-	SET_LAYOUT_TYPE: "SET_LAYOUT_TYPE",
-	SUBMIT_FORM_REQUEST: "SUBMIT_FORM_REQUEST",
-	SUBMIT_FORM_SUCCESS: "SUBMIT_FORM_SUCCESS",
-	SUBMIT_FORM_FAILURE: "SUBMIT_FORM_FAILURE",
-	CLEAR_FORM_SUBMISSION_STATE: "CLEAR_FORM_SUBMISSION_STATE",
-	SET_SUMMARY_FIELD: "SET_SUMMARY_FIELD",
+	SET_INITIAL_VALUES: `${values.reducerKey.toUpperCase()}_SET_INITIAL_VALUES`,
+	SET_TITLE: `${values.reducerKey.toUpperCase()}_SET_TITLE`,
+	SET_ICON: `${values.reducerKey.toUpperCase()}_SET_ICON`,
+	SET_DISPLAY_NAME: `${values.reducerKey.toUpperCase()}_SET_DISPLAY_NAME`,
+	ADD_FIELD: `${values.reducerKey.toUpperCase()}_ADD_FIELD`,
+	DELETE_FIELD: `${values.reducerKey.toUpperCase()}_DELETE_FIELD`,
+	UPDATE_FIELD: `${values.reducerKey.toUpperCase()}_UPDATE_FIELD`,
+	SET_LAYOUT_GRID_ICON: `${values.reducerKey.toUpperCase()}_SET_LAYOUT_GRID_ICON`,
+	SET_LAYOUT_TYPE: `${values.reducerKey.toUpperCase()}_SET_LAYOUT_TYPE`,
+	SUBMIT_FORM_REQUEST: `${values.reducerKey.toUpperCase()}_SUBMIT_FORM_REQUEST`,
+	SUBMIT_FORM_SUCCESS: `${values.reducerKey.toUpperCase()}_SUBMIT_FORM_SUCCESS`,
+	SUBMIT_FORM_FAILURE: `${values.reducerKey.toUpperCase()}_SUBMIT_FORM_FAILURE`,
+	CLEAR_FORM_SUBMISSION_STATE: `${values.reducerKey.toUpperCase()}_CLEAR_FORM_SUBMISSION_STATE`,
+	SET_SUMMARY_FIELD: `${values.reducerKey.toUpperCase()}_SET_SUMMARY_FIELD`,
 };
 
 /**

package/src/actions/listingActions.js

@@ -1,38 +1,40 @@
 import { arrayMove } from "@dnd-kit/sortable";
 import { listingActions as webApiActions } from "../webapi/listingActions";
+import { values } from "../values.config";
 
 // Action Types
-export const FETCH_LISTING_REQUEST = "FETCH_LISTING_REQUEST";
-export const FETCH_LISTING_SUCCESS = "FETCH_LISTING_SUCCESS";
-export const FETCH_LISTING_FAILURE = "FETCH_LISTING_FAILURE";
-export const FETCH_LISTING_SILENT_SUCCESS = "FETCH_LISTING_SILENT_SUCCESS";
-export const FETCH_LISTING_SILENT_FAILURE = "FETCH_LISTING_SILENT_FAILURE";
-
-export const REORDER_LISTING_SUCCESS = "REORDER_LISTING_SUCCESS";
-export const REORDER_LISTING_FAILURE = "REORDER_LISTING_FAILURE";
-
-export const DELETE_LISTING_REQUEST = "DELETE_LISTING_REQUEST";
-export const DELETE_LISTING_SUCCESS = "DELETE_LISTING_SUCCESS";
-export const DELETE_LISTING_FAILURE = "DELETE_LISTING_FAILURE";
-
-export const UNDELETE_LISTING_REQUEST = "UNDELETE_LISTING_REQUEST";
-export const UNDELETE_LISTING_SUCCESS = "UNDELETE_LISTING_SUCCESS";
-export const UNDELETE_LISTING_FAILURE = "UNDELETE_LISTING_FAILURE";
-
-export const CREATE_LISTING_REQUEST = "CREATE_LISTING_REQUEST";
-export const CREATE_LISTING_SUCCESS = "CREATE_LISTING_SUCCESS";
-export const CREATE_LISTING_FAILURE = "CREATE_LISTING_FAILURE";
-
-export const EDIT_LISTING_REQUEST = "EDIT_LISTING_REQUEST";
-export const EDIT_LISTING_SUCCESS = "EDIT_LISTING_SUCCESS";
-export const EDIT_LISTING_FAILURE = "EDIT_LISTING_FAILURE";
-
-export const TOGGLE_LISTING_REQUEST = "TOGGLE_LISTING_REQUEST";
-export const TOGGLE_LISTING_SUCCESS = "TOGGLE_LISTING_SUCCESS";
-export const TOGGLE_LISTING_FAILURE = "TOGGLE_LISTING_FAILURE";
-
-export const SET_SORT_BY = "SET_SORT_BY";
-export const SET_SHOW_DELETED = "SET_SHOW_DELETED";
+const REDUCER_PREFIX = values.reducerKey.toUpperCase();
+export const FETCH_LISTING_REQUEST = `${REDUCER_PREFIX}_FETCH_LISTING_REQUEST`;
+export const FETCH_LISTING_SUCCESS = `${REDUCER_PREFIX}_FETCH_LISTING_SUCCESS`;
+export const FETCH_LISTING_FAILURE = `${REDUCER_PREFIX}_FETCH_LISTING_FAILURE`;
+export const FETCH_LISTING_SILENT_SUCCESS = `${REDUCER_PREFIX}_FETCH_LISTING_SILENT_SUCCESS`;
+export const FETCH_LISTING_SILENT_FAILURE = `${REDUCER_PREFIX}_FETCH_LISTING_SILENT_FAILURE`;
+
+export const REORDER_LISTING_SUCCESS = `${REDUCER_PREFIX}_REORDER_LISTING_SUCCESS`;
+export const REORDER_LISTING_FAILURE = `${REDUCER_PREFIX}_REORDER_LISTING_FAILURE`;
+
+export const DELETE_LISTING_REQUEST = `${REDUCER_PREFIX}_DELETE_LISTING_REQUEST`;
+export const DELETE_LISTING_SUCCESS = `${REDUCER_PREFIX}_DELETE_LISTING_SUCCESS`;
+export const DELETE_LISTING_FAILURE = `${REDUCER_PREFIX}_DELETE_LISTING_FAILURE`;
+
+export const UNDELETE_LISTING_REQUEST = `${REDUCER_PREFIX}_UNDELETE_LISTING_REQUEST`;
+export const UNDELETE_LISTING_SUCCESS = `${REDUCER_PREFIX}_UNDELETE_LISTING_SUCCESS`;
+export const UNDELETE_LISTING_FAILURE = `${REDUCER_PREFIX}_UNDELETE_LISTING_FAILURE`;
+
+export const CREATE_LISTING_REQUEST = `${REDUCER_PREFIX}_CREATE_LISTING_REQUEST`;
+export const CREATE_LISTING_SUCCESS = `${REDUCER_PREFIX}_CREATE_LISTING_SUCCESS`;
+export const CREATE_LISTING_FAILURE = `${REDUCER_PREFIX}_CREATE_LISTING_FAILURE`;
+
+export const EDIT_LISTING_REQUEST = `${REDUCER_PREFIX}_EDIT_LISTING_REQUEST`;
+export const EDIT_LISTING_SUCCESS = `${REDUCER_PREFIX}_EDIT_LISTING_SUCCESS`;
+export const EDIT_LISTING_FAILURE = `${REDUCER_PREFIX}_EDIT_LISTING_FAILURE`;
+
+export const TOGGLE_LISTING_REQUEST = `${REDUCER_PREFIX}_TOGGLE_LISTING_REQUEST`;
+export const TOGGLE_LISTING_SUCCESS = `${REDUCER_PREFIX}_TOGGLE_LISTING_SUCCESS`;
+export const TOGGLE_LISTING_FAILURE = `${REDUCER_PREFIX}_TOGGLE_LISTING_FAILURE`;
+
+export const SET_SORT_BY = `${REDUCER_PREFIX}_SET_SORT_BY`;
+export const SET_SHOW_DELETED = `${REDUCER_PREFIX}_SET_SHOW_DELETED`;
 
 export const fetchListingRequest = () => ({ type: FETCH_LISTING_REQUEST });
 export const fetchListingSuccess = (listings) => ({

package/src/actions/wizardActions.js

@@ -16,17 +16,16 @@ import {
 	selectFormFields,
 } from "../selectors/featureBuilderSelectors";
 
-// Import values config and form actions
 import { values } from "../values.config";
-import { clearFormSubmissionState } from "./formActions";
 
 // Wizard action types
-export const SET_WIZARD_MODE = "SET_WIZARD_MODE";
-export const SET_NAVIGATION_STATE = "SET_NAVIGATION_STATE";
-export const UPDATE_STEP_VALIDATION = "UPDATE_STEP_VALIDATION";
-export const MARK_STEP_COMPLETE = "MARK_STEP_COMPLETE";
-export const RESET_WIZARD_STATE = "RESET_WIZARD_STATE";
-export const VALIDATE_AND_UPDATE_STEP = "VALIDATE_AND_UPDATE_STEP";
+const REDUCER_PREFIX = values.reducerKey.toUpperCase();
+export const SET_WIZARD_MODE = `${REDUCER_PREFIX}_SET_WIZARD_MODE`;
+export const SET_NAVIGATION_STATE = `${REDUCER_PREFIX}_SET_NAVIGATION_STATE`;
+export const UPDATE_STEP_VALIDATION = `${REDUCER_PREFIX}_UPDATE_STEP_VALIDATION`;
+export const MARK_STEP_COMPLETE = `${REDUCER_PREFIX}_MARK_STEP_COMPLETE`;
+export const RESET_WIZARD_STATE = `${REDUCER_PREFIX}_RESET_WIZARD_STATE`;
+export const VALIDATE_AND_UPDATE_STEP = `${REDUCER_PREFIX}_VALIDATE_AND_UPDATE_STEP`;
 
 // Mode setters
 export const setWizardMode = (mode) => ({
@@ -51,7 +50,7 @@ export const setCurrentStep = (step, previousStep = null) => ({
 });
 
 export const goToStep = (step) => (dispatch, getState) => {
-	const state = getState()[values.reducerKey];
+	const state = getState()[require("../values.config").reducerKey];
 	const currentStep =
 		state &&
 		state.wizard &&
@@ -59,6 +58,7 @@ export const goToStep = (step) => (dispatch, getState) => {
 		state.wizard.navigation.currentStep;
 
 	// Clear form submission state when changing steps
+	const { clearFormSubmissionState } = require("./formActions");
 	dispatch(clearFormSubmissionState());
 
 	dispatch(setCurrentStep(step, currentStep));

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" || mode === "edit";
+
 		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 wizard mode
+				disabled: isWizardMode || (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" || mode === "edit";
+
 		const attachClickHandlers = () => {
 			const stepsWithUrls = [
 				{ key: "overview", url: getStepUrl("overview") },
@@ -176,20 +146,10 @@ const SideBarInner = (props) => {
 				{ key: "layout", url: getStepUrl("layout") },
 			];
 
-			stepsWithUrls.forEach((step) => {
+			stepsWithUrls.forEach((step, index) => {
 				const navItem = Array.from(
-					document.querySelectorAll(".sideNav-item"),
-				).find(
-					(item) =>
-						item.textContent &&
-						item.textContent.includes(
-							step.key === "overview"
-								? "Feature Overview"
-								: step.key === "fields"
-									? "Configure Fields"
-									: "Choose Layout",
-						),
-				);
+					document.querySelectorAll(".hub-wrapperContainer .sideNav-item"),
+				).find((item) => item.textContent && item.textContent.includes(`${index + 1}.`));
 
 				if (navItem) {
 					// Remove any existing click listeners
@@ -207,8 +167,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 +182,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 +237,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/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/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 {

package/src/screens/FormOverviewStep.jsx

@@ -130,6 +130,7 @@ const FormOverviewStepInner = (props) => {
 
 			// Clear submission state after showing toast (only for non-edit cases)
 			if (!isEditMode) {
+				const { clearFormSubmissionState } = require("../actions/formActions");
 				dispatch(clearFormSubmissionState());
 			}
 		}

package/src/selectors/featureBuilderSelectors.js

@@ -124,6 +124,10 @@ export const selectDefinitionIsEditing = (state) => {
 	const definitionState = selectDefinitionState(state);
 	return definitionState && definitionState.isEditing;
 };
+export const selectDefinitionMode = (state) => {
+	const definitionState = selectDefinitionState(state);
+	return definitionState && definitionState.mode;
+};
 
 // Check if we have a definition loaded
 export const selectHasDefinition = (state) => !!selectDefinition(state);