@plusscommunities/pluss-feature-builder-web 1.0.4 → 1.0.6

package/dist/index.cjs.js

@@ -577,8 +577,8 @@ const DeleteConfirmationPopup = _ref => {
   }, "Please wait while we delete the ", itemText, "...")));
 };
 
-var css$v = ".FeatureBuilderSuccessPopup_module_successContent__5b4b36c2 {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 20px;\n\tpadding: 20px 0;\n}\n\n.FeatureBuilderSuccessPopup_module_gifPlaceholder__5b4b36c2 {\n\twidth: 100%;\n\tmax-width: 400px;\n}\n\n.FeatureBuilderSuccessPopup_module_gifContainer__5b4b36c2 {\n\twidth: 100%;\n\theight: 200px;\n\tbackground-color: #f5f5f5;\n\tborder: 2px dashed #ccc;\n\tborder-radius: 8px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.FeatureBuilderSuccessPopup_module_gifPlaceholderText__5b4b36c2 {\n\tcolor: #999;\n\tfont-size: 14px;\n\ttext-align: center;\n\tpadding: 20px;\n}\n\n.FeatureBuilderSuccessPopup_module_successMessage__5b4b36c2 {\n\ttext-align: center;\n\tcolor: #666;\n\tfont-size: 16px;\n\tline-height: 1.5;\n\tmax-width: 400px;\n}\n\n.FeatureBuilderSuccessPopup_module_featureName__5b4b36c2 {\n\tfont-weight: 600;\n\tcolor: #333;\n}\n";
-var modules_b5a7fccb = {"successContent":"FeatureBuilderSuccessPopup_module_successContent__5b4b36c2","gifPlaceholder":"FeatureBuilderSuccessPopup_module_gifPlaceholder__5b4b36c2","gifContainer":"FeatureBuilderSuccessPopup_module_gifContainer__5b4b36c2","gifPlaceholderText":"FeatureBuilderSuccessPopup_module_gifPlaceholderText__5b4b36c2","successMessage":"FeatureBuilderSuccessPopup_module_successMessage__5b4b36c2","featureName":"FeatureBuilderSuccessPopup_module_featureName__5b4b36c2"};
+var css$v = ".FeatureBuilderSuccessPopup_module_successContent__a6544e11 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 20px;\n\tpadding: 20px 0;\n}\n\n.FeatureBuilderSuccessPopup_module_gifPlaceholder__a6544e11 {\n\twidth: 100%;\n\tmax-width: 400px;\n}\n\n.FeatureBuilderSuccessPopup_module_gifContainer__a6544e11 {\n\twidth: 100%;\n\theight: 200px;\n\tbackground-color: #f5f5f5;\n\tborder: 2px dashed #ccc;\n\tborder-radius: 8px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.FeatureBuilderSuccessPopup_module_gifPlaceholderText__a6544e11 {\n\tcolor: #999;\n\tfont-size: 14px;\n\ttext-align: center;\n\tpadding: 20px;\n}\n\n.FeatureBuilderSuccessPopup_module_successMessage__a6544e11 {\n\tfont-size: 16px;\n\tline-height: 1.5;\n\tmax-width: 400px;\n\tcolor: #181c4a;\n}\n\n.FeatureBuilderSuccessPopup_module_featureName__a6544e11 {\n\tfont-weight: 600;\n\tcolor: #333;\n}\n";
+var modules_b5a7fccb = {"successContent":"FeatureBuilderSuccessPopup_module_successContent__a6544e11","gifPlaceholder":"FeatureBuilderSuccessPopup_module_gifPlaceholder__a6544e11","gifContainer":"FeatureBuilderSuccessPopup_module_gifContainer__a6544e11","gifPlaceholderText":"FeatureBuilderSuccessPopup_module_gifPlaceholderText__a6544e11","successMessage":"FeatureBuilderSuccessPopup_module_successMessage__a6544e11","featureName":"FeatureBuilderSuccessPopup_module_featureName__a6544e11"};
 n(css$v,{});
 
 const {
@@ -591,8 +591,7 @@ const FeatureBuilderSuccessPopup = _ref => {
   let {
     isOpen,
     onClose,
-    featureName,
-    displayName
+    featureName
   } = _ref;
   if (!isOpen) {
     return null;
@@ -603,9 +602,10 @@ const FeatureBuilderSuccessPopup = _ref => {
     onClick: onClose,
     isActive: true
   }];
+  const capitalisedName = featureName && featureName[0].toUpperCase() + featureName.slice(1);
   return /*#__PURE__*/React__default["default"].createElement(Popup$3, {
-    title: "".concat(featureName, " Created"),
-    subtitle: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", null, featureName), " is now saved and available for your communities!"),
+    title: "".concat(capitalisedName, " Created"),
+    subtitle: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, capitalisedName, " is now saved and available for your communities!"),
     onClose: onClose,
     buttons: buttons,
     hasPadding: true,
@@ -615,9 +615,9 @@ const FeatureBuilderSuccessPopup = _ref => {
     className: modules_b5a7fccb.successContent
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: modules_b5a7fccb.successMessage
-  }, "To activate this feature, please add it to your sites using the Feature Picker."), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, capitalisedName, " is saved and ready to go. To use it, add it to your site using the ", /*#__PURE__*/React__default["default"].createElement("b", null, "Feature Picker.")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: modules_b5a7fccb.successMessage
-  }, "Team members with the right permissions can start creating content for the communities that have installed the feature.")));
+  }, "Once added, your team can start creating content for the feature.")));
 };
 
 var css$u = ".FeatureBuilderWelcomePopup_module_welcomeContent__0e08704b {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 20px;\n\tpadding: 20px 0;\n}\n\n.FeatureBuilderWelcomePopup_module_welcomeMessage__0e08704b {\n\tcolor: #666;\n\tfont-size: 16px;\n\tline-height: 1.6;\n\twidth: 100%;\n}\n\n.FeatureBuilderWelcomePopup_module_welcomeMessage__0e08704b p {\n\tmargin: 0 0 16px 0;\n}\n\n.FeatureBuilderWelcomePopup_module_welcomeMessage__0e08704b p:last-child {\n\tmargin-bottom: 0;\n}\n";
@@ -3578,8 +3578,6 @@ const Field = props => {
     className: "".concat(modules_eca69fd0.field, " ").concat(hasError ? modules_eca69fd0["field--invalid"] : "")
   }, fieldContent));
 };
-
-// Padlock icon component for base fields
 const PadlockIcon = () => {
   const icon = iconImports.lock;
   return /*#__PURE__*/React__default["default"].createElement("span", {
@@ -3624,25 +3622,21 @@ const TitleField = props => {
   const {
     placeholder,
     label,
-    isRequired,
     helpText
   } = props.values;
   return /*#__PURE__*/React__default["default"].createElement(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
+    fieldType: "title"
   });
 };
 const TextField = props => {
@@ -3652,30 +3646,28 @@ const TextField = props => {
     setHelpText,
     stepErrors,
     showWarnings,
+    toggleIsRequired,
     id
   } = props;
   const {
     placeholder,
     label,
-    isRequired,
-    helpText
+    helpText,
+    isRequired
   } = props.values;
   return /*#__PURE__*/React__default["default"].createElement(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
+    fieldType: "text"
   });
 };
 const DescriptionField = props => {
@@ -3687,7 +3679,7 @@ const DescriptionField = props => {
     stepErrors,
     showWarnings,
     setUseAsSummary,
-    id // Get ID from root props
+    id
   } = props;
   const {
     placeholder,
@@ -3702,7 +3694,7 @@ const DescriptionField = props => {
     helpText: helpText,
     isRequired: isRequired,
     setLabel: setLabel,
-    setPlaceholder: () => {},
+    setPlaceholder: setPlaceholder,
     setHelpText: setHelpText,
     toggleIsRequired: toggleIsRequired,
     stepErrors: stepErrors,
@@ -3722,7 +3714,7 @@ const ImageField = props => {
     toggleAllowCaption,
     stepErrors,
     showWarnings,
-    id // Get ID from root props
+    id
   } = props;
   const {
     label,
@@ -3745,8 +3737,7 @@ const ImageField = props => {
     toggleAllowCaption: toggleAllowCaption,
     stepErrors: stepErrors,
     showWarnings: showWarnings,
-    id: id // Fix: pass the field ID
-    ,
+    id: id,
     fieldType: "image"
   });
 };
@@ -3756,7 +3747,7 @@ const FeatureImageField = props => {
     setHelpText,
     stepErrors,
     showWarnings,
-    id // Get ID from root props
+    id
   } = props;
   const {
     label,
@@ -3767,17 +3758,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"
   });
@@ -3793,7 +3781,7 @@ const GalleryField = props => {
     setAllowedTypes,
     stepErrors,
     showWarnings,
-    id // Get ID from root props
+    id
   } = props;
   const {
     label,
@@ -3836,7 +3824,8 @@ const CTAField = props => {
     setHelpText,
     setPlaceholder,
     stepErrors,
-    showWarnings
+    showWarnings,
+    id
   } = props;
   const {
     label,
@@ -3844,23 +3833,18 @@ const CTAField = props => {
     helpText,
     placeholder
   } = props.values;
-  const {
-    id
-  } = props; // Get ID from root props
-
   return /*#__PURE__*/React__default["default"].createElement(BaseFieldConfig, {
     label: label,
     placeholder: placeholder,
     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"
   });
 };
@@ -3870,11 +3854,9 @@ const FileField = props => {
     setLabel,
     setHelpText,
     stepErrors,
-    showWarnings
-  } = props;
-  const {
+    showWarnings,
     id
-  } = props; // Get ID from root props
+  } = props;
   const {
     label,
     isRequired,
@@ -4116,32 +4098,20 @@ const FormFieldsStepInner = props => {
     UseCase: "Link to reservations, bookings, or external sites",
     Icon: "arrow-circle-right"
   }];
-
-  // Use custom hook to handle definition loading
   const {
     definition,
     definitionIsLoading,
     reloadDefinition
   } = useFeatureDefinitionLoader();
-
-  // Get form state for display name
   const formDisplayName = reactRedux.useSelector(selectFormDisplayName);
-
-  // Get wizard state
   const isCreateMode = reactRedux.useSelector(selectIsCreateMode);
   const isEditMode = reactRedux.useSelector(selectIsEditMode);
-
-  // Get validation state
   const isStepValid = reactRedux.useSelector(selectIsStepValid("fields"));
   const stepErrors = reactRedux.useSelector(selectStepErrors("fields"));
   const showWarnings = !isStepValid && Object.keys(stepErrors).length > 0;
-
-  // Get submission state
   const isSubmitting = reactRedux.useSelector(selectFormIsSubmitting);
   const submitError = reactRedux.useSelector(selectFormSubmitError);
   const submitSuccess = reactRedux.useSelector(selectFormSubmitSuccess);
-
-  // Toast management functions
   const addToast = (type, message) => {
     const id = Date.now();
     setToasts(prev => [...prev, {
@@ -4155,9 +4125,6 @@ const FormFieldsStepInner = props => {
     setToasts(prev => prev.filter(toast => toast.id !== id));
   };
 
-  // Note: Removed automatic redirect after successful save in edit mode
-  // User should stay on the current step until they manually navigate
-
   // Handle successful submission with optimistic update and redirect
   React__default["default"].useEffect(() => {
     if (submitSuccess && !isSubmitting) {
@@ -4165,14 +4132,11 @@ const FormFieldsStepInner = props => {
         addToast("success", "Changes saved");
         dispatch(clearFormSubmissionState());
       } else {
-        // In create mode, show success toast and redirect immediately
         addToast("success", "Feature created successfully");
-
-        // Clear submission state and redirect to overview step
         dispatch(clearFormSubmissionState());
         setTimeout(() => {
           history.push(values.routeFormOverviewStep);
-        }, 1000); // Brief delay to show toast
+        }, 1000);
       }
     }
   }, [submitSuccess, isEditMode, isSubmitting, dispatch, history]);
@@ -4186,8 +4150,6 @@ const FormFieldsStepInner = props => {
       }, 1000);
     }
   }, [submitError]);
-
-  // Scroll to top when validation errors appear
   React.useEffect(() => {
     if (showWarnings) {
       // Scroll to top of form to show validation errors
@@ -4197,24 +4159,15 @@ const FormFieldsStepInner = props => {
       });
     }
   }, [showWarnings]);
-
-  // Error boundary handlers
   const handleRefresh = () => {
-    // Refresh current step data
     dispatch(validateAndUpdateStep("fields"));
   };
   React.useEffect(() => {
-    // Set current step when component mounts
     dispatch(setCurrentStepAndSave("fields"));
   }, [dispatch]);
-
-  // Add effect to handle definition loading and validation in edit mode
-  // ADD THIS EFFECT: Hydrate form data from definition on refresh
   React.useEffect(() => {
     if (definition && !definitionIsLoading && isFormInitial) {
       dispatch(setInitialValues(definition));
-
-      // In edit mode, trigger validation after setting initial values
       if (isEditMode) {
         setTimeout(() => {
           dispatch(validateAndUpdateStep("fields"));
@@ -4224,9 +4177,7 @@ const FormFieldsStepInner = props => {
   }, [definition, definitionIsLoading, isFormInitial, isEditMode, dispatch]);
   React.useEffect(() => {
     // In edit mode, trigger validation when definition is available
-    // Note: The new effect above handles the data population, this handles re-validation
     if (isEditMode && definition && !definitionIsLoading && !isFormInitial) {
-      // Only validate if form is NOT initial (meaning it has data)
       setTimeout(() => {
         dispatch(validateAndUpdateStep("fields"));
       }, 100);
@@ -4234,59 +4185,47 @@ const FormFieldsStepInner = props => {
   }, [definition, definitionIsLoading, isEditMode, isFormInitial, dispatch]);
   function handleAddField(fieldType) {
     dispatch(addField(fieldType));
-    setShowFieldSelector(false); // Close popup after adding field
+    setShowFieldSelector(false);
   }
   function handleOpenFieldSelector() {
-    setReplacingFieldIndex(null); // Reset to add mode
+    setReplacingFieldIndex(null);
     setShowFieldSelector(true);
   }
   function handleCloseFieldSelector() {
-    setReplacingFieldIndex(null); // Reset replacement state
+    setReplacingFieldIndex(null);
     setShowFieldSelector(false);
   }
   function handleDeleteField(fieldId) {
     dispatch(deleteField(fieldId));
   }
   function handleReplaceField(fieldIndex) {
-    // Store the field index to replace and open the field selector
     setReplacingFieldIndex(fieldIndex);
     setShowFieldSelector(true);
   }
   function handleAddReplacementField(fieldType) {
     const fieldIndex = replacingFieldIndex;
     if (fieldIndex !== null) {
-      // Delete the current field at this index
       const currentField = allFields[fieldIndex];
       if (currentField && !currentField.isMandatory) {
         dispatch(deleteField(currentField.id));
       }
-
-      // Add the new field
       dispatch(addField(fieldType));
-
-      // Reset replacement state
       setReplacingFieldIndex(null);
       setShowFieldSelector(false);
     }
   }
   function handleNext() {
-    // Validate before proceeding
     const validationResult = dispatch(validateAndUpdateStep("fields"));
-
-    // If validation passes, navigate to next step
     if (validationResult !== null && validationResult !== void 0 && validationResult.isValid) {
-      // Clear form submission state when changing steps
       dispatch(clearFormSubmissionState());
       if (isCreateMode) {
         history.push(values.routeFormLayoutStep);
       } else {
-        // In edit mode, navigate directly
         history.push(values.routeFormLayoutStep);
       }
     }
     // If validation fails, scroll to top to show error summary
     else {
-      // Scroll to top of form to show validation errors
       window.scrollTo({
         top: 0,
         behavior: "smooth"
@@ -4294,42 +4233,29 @@ const FormFieldsStepInner = props => {
     }
   }
   function handlePrevious() {
-    // Clear form submission state when changing steps
     dispatch(clearFormSubmissionState());
     if (isCreateMode) {
       history.push(values.routeFormOverviewStep);
     } else {
-      // In edit mode, go back to overview screen
       history.push(values.routeFormOverviewStep);
     }
   }
   function handleSaveStep() {
-    // Validate before saving in edit mode
     const validationResult = dispatch(validateAndUpdateStep("fields"));
-
-    // If validation passes, save the entire form
     if (validationResult !== null && validationResult !== void 0 && validationResult.isValid) {
       dispatch(submitForm());
     }
     // If validation fails, scroll to top to show error summary
     else {
-      // Scroll to top of form to show validation errors
       window.scrollTo({
         top: 0,
         behavior: "smooth"
       });
     }
   }
-
-  // Get all fields in unified list (base + custom)
   const allFields = fields || [];
-
-  // Create sorted copy for rendering
   const sortedFields = allFields.slice().sort((a, b) => a.order - b.order);
 
-  // Filter description fields for summary demo
-  allFields.filter(field => field.type === "description");
-
   // Check for definition management permission
   if (!PlussCore__namespace.Session.validateAccess(auth.site, values.permissionFeatureBuilderDefinition, auth)) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -4586,11 +4512,9 @@ const useField = id => {
     dispatch(updateFieldById(id, updatedField));
   }
   function setUseAsSummary(value) {
-    // When setting a field as summary, use the new action to ensure only one field is selected
     if (value) {
       dispatch(setSummaryField(id));
     } else {
-      // When unsetting, use regular update to unset this specific field
       const updatedField = {
         values: _objectSpread$5(_objectSpread$5({}, values), {}, {
           useAsSummary: false
@@ -4623,11 +4547,8 @@ const FormLayoutStepInner = props => {
   const overviewIcon = reactRedux.useSelector(selectFormIcon);
   const definitionId = reactRedux.useSelector(selectDefinitionId);
   const layoutType = (layout === null || layout === void 0 ? void 0 : layout.type) || "round";
-  // Get wizard state
   const isCreateMode = reactRedux.useSelector(selectIsCreateMode);
   const isEditMode = reactRedux.useSelector(selectIsEditMode);
-
-  // Use custom hook to handle definition loading
   const {
     definition,
     definitionIsLoading
@@ -4644,14 +4565,8 @@ const FormLayoutStepInner = props => {
   const isSubmitting = reactRedux.useSelector(selectFormIsSubmitting);
   const submitError = reactRedux.useSelector(selectFormSubmitError);
   const submitSuccess = reactRedux.useSelector(selectFormSubmitSuccess);
-
-  // Toast state
   const [toasts, setToasts] = React__default["default"].useState([]);
-
-  // Success popup state
   const [showSuccessPopup, setShowSuccessPopup] = React__default["default"].useState(false);
-
-  // Toast management functions
   const addToast = (type, message) => {
     const id = Date.now();
     setToasts(prev => [...prev, {
@@ -4664,28 +4579,21 @@ const FormLayoutStepInner = props => {
   const removeToast = id => {
     setToasts(prev => prev.filter(toast => toast.id !== id));
   };
-
-  // Handle success popup close
   const handleSuccessPopupClose = () => {
     setShowSuccessPopup(false);
     dispatch(clearFormSubmissionState());
-    history.push(values.routeFormOverviewStep);
+    window.location.replace(values.routeFormOverviewStep);
   };
-
-  // Handle successful submission with popup and redirect
   React.useEffect(() => {
     if (submitSuccess && !isSubmitting) {
       if (isEditMode) {
         addToast("success", "Changes saved");
         dispatch(clearFormSubmissionState());
       } else {
-        // In create mode, show success popup
         setShowSuccessPopup(true);
       }
     }
   }, [submitSuccess, isEditMode, isSubmitting, dispatch]);
-
-  // Handle submit error
   React.useEffect(() => {
     if (submitError) {
       addToast("error", "It didn't work. Please try again.");
@@ -4694,10 +4602,7 @@ const FormLayoutStepInner = props => {
       }, 1000);
     }
   }, [submitError]);
-
-  // Error boundary handlers
   const handleRefresh = () => {
-    // Refresh current step data
     dispatch(validateAndUpdateStep("layout"));
   };
   const layoutOptions = [{
@@ -4739,8 +4644,6 @@ const FormLayoutStepInner = props => {
       }
     }
   }, [definition, definitionIsLoading, isFormInitial, isEditMode, dispatch]);
-
-  // Add effect to handle definition loading and validation in edit mode
   React.useEffect(() => {
     // In edit mode, trigger validation when definition is available
     // Note: The new effect above handles data population, this handles re-validation
@@ -4755,23 +4658,20 @@ const FormLayoutStepInner = props => {
     dispatch(setLayoutType(layoutType));
   }
   function handlePrevious() {
-    // Clear form submission state when changing steps
     dispatch(clearFormSubmissionState());
     if (isCreateMode) {
       history.push(values.routeFormFieldsStep);
     } else {
-      // In edit mode, go back to fields screen
       history.push(values.routeFormFieldsStep);
     }
   }
   function handleNext() {
-    // Validate before proceeding
+    if (isSubmitting) {
+      return;
+    }
     const validationResult = dispatch(validateAndUpdateStep("layout"));
-
-    // If validation passes, proceed with submission/navigation
     if (validationResult !== null && validationResult !== void 0 && validationResult.isValid) {
       if (isCreateMode) {
-        // In create mode, submit form - success popup will be shown by useEffect
         dispatch(submitForm());
       } else {
         // In edit mode, just save changes

package/package.json

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

package/src/components/FeatureBuilderSuccessPopup.jsx

@@ -4,12 +4,7 @@ const { Components } = PlussCore;
 const { Popup } = Components;
 import styles from "./FeatureBuilderSuccessPopup.module.css";
 
-const FeatureBuilderSuccessPopup = ({
-	isOpen,
-	onClose,
-	featureName,
-	displayName,
-}) => {
+const FeatureBuilderSuccessPopup = ({ isOpen, onClose, featureName }) => {
 	if (!isOpen) {
 		return null;
 	}
@@ -23,14 +18,14 @@ const FeatureBuilderSuccessPopup = ({
 		},
 	];
 
+	const capitalisedName =
+		featureName && featureName[0].toUpperCase() + featureName.slice(1);
+
 	return (
 		<Popup
-			title={`${featureName} Created`}
+			title={`${capitalisedName} Created`}
 			subtitle={
-				<>
-					<span>{featureName}</span> is now saved and available for your
-					communities!
-				</>
+				<>{capitalisedName} is now saved and available for your communities!</>
 			}
 			onClose={onClose}
 			buttons={buttons}
@@ -40,12 +35,11 @@ const FeatureBuilderSuccessPopup = ({
 		>
 			<div className={styles.successContent}>
 				<div className={styles.successMessage}>
-					To activate this feature, please add it to your sites using the
-					Feature Picker.
+					{capitalisedName} is saved and ready to go. To use it, add it to your
+					site using the <b>Feature Picker.</b>
 				</div>
 				<div className={styles.successMessage}>
-					Team members with the right permissions can start creating content for
-					the communities that have installed the feature.
+					Once added, your team can start creating content for the feature.
 				</div>
 			</div>
 		</Popup>

package/src/components/FeatureBuilderSuccessPopup.module.css

@@ -1,7 +1,6 @@
 .successContent {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
 	gap: 20px;
 	padding: 20px 0;
 }
@@ -30,11 +29,10 @@
 }
 
 .successMessage {
-	text-align: center;
-	color: #666;
 	font-size: 16px;
 	line-height: 1.5;
 	max-width: 400px;
+	color: #181c4a;
 }
 
 .featureName {

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/screens/FormFieldsStep.jsx

@@ -5,18 +5,14 @@ import { SidebarLayout } from "../components/SidebarLayout.jsx";
 import { values } from "../values.config.js";
 import { PlussCore } from "../feature.config";
 import styles from "./Form.module.css";
-import fieldStyles from "../components/Fields.module.css";
 import { Field } from "../components/Fields.jsx";
 import { iconImports } from "../components/iconImports";
 import {
 	Text,
 	LoadingState,
-	SkeletonLoader,
-	DropdownInput,
 	Button,
 	ErrorBoundary,
 	Popup,
-	CenteredContainer,
 } from "../components";
 
 import ToastContainer from "../components/ToastContainer.jsx";
@@ -31,7 +27,6 @@ import {
 	selectIsEditMode,
 	selectIsStepValid,
 	selectStepErrors,
-	selectCurrentStep,
 	selectFormIsSubmitting,
 	selectFormSubmitError,
 	selectFormSubmitSuccess,
@@ -122,28 +117,20 @@ const FormFieldsStepInner = (props) => {
 		},
 	];
 
-	// Use custom hook to handle definition loading
 	const { definition, definitionIsLoading, reloadDefinition } =
 		useFeatureDefinitionLoader();
 
-	// Get form state for display name
 	const formDisplayName = useSelector(selectFormDisplayName);
 
-	// Get wizard state
 	const isCreateMode = useSelector(selectIsCreateMode);
 	const isEditMode = useSelector(selectIsEditMode);
-
-	// Get validation state
 	const isStepValid = useSelector(selectIsStepValid("fields"));
 	const stepErrors = useSelector(selectStepErrors("fields"));
 	const showWarnings = !isStepValid && Object.keys(stepErrors).length > 0;
-
-	// Get submission state
 	const isSubmitting = useSelector(selectFormIsSubmitting);
 	const submitError = useSelector(selectFormSubmitError);
 	const submitSuccess = useSelector(selectFormSubmitSuccess);
 
-	// Toast management functions
 	const addToast = (type, message) => {
 		const id = Date.now();
 		setToasts((prev) => [...prev, { id, type, message, isVisible: true }]);
@@ -153,9 +140,6 @@ const FormFieldsStepInner = (props) => {
 		setToasts((prev) => prev.filter((toast) => toast.id !== id));
 	};
 
-	// Note: Removed automatic redirect after successful save in edit mode
-	// User should stay on the current step until they manually navigate
-
 	// Handle successful submission with optimistic update and redirect
 	React.useEffect(() => {
 		if (submitSuccess && !isSubmitting) {
@@ -163,14 +147,11 @@ const FormFieldsStepInner = (props) => {
 				addToast("success", "Changes saved");
 				dispatch(clearFormSubmissionState());
 			} else {
-				// In create mode, show success toast and redirect immediately
 				addToast("success", "Feature created successfully");
-
-				// Clear submission state and redirect to overview step
 				dispatch(clearFormSubmissionState());
 				setTimeout(() => {
 					history.push(values.routeFormOverviewStep);
-				}, 1000); // Brief delay to show toast
+				}, 1000);
 			}
 		}
 	}, [submitSuccess, isEditMode, isSubmitting, dispatch, history]);
@@ -185,7 +166,6 @@ const FormFieldsStepInner = (props) => {
 		}
 	}, [submitError]);
 
-	// Scroll to top when validation errors appear
 	useEffect(() => {
 		if (showWarnings) {
 			// Scroll to top of form to show validation errors
@@ -193,29 +173,18 @@ const FormFieldsStepInner = (props) => {
 		}
 	}, [showWarnings]);
 
-	// Error boundary handlers
 	const handleRefresh = () => {
-		// Refresh current step data
 		dispatch(validateAndUpdateStep("fields"));
 	};
 
-	const handleBack = () => {
-		// Go to overview step
-		history.push(values.routeFormOverviewStep);
-	};
-
 	useEffect(() => {
-		// Set current step when component mounts
 		dispatch(setCurrentStepAndSave("fields"));
 	}, [dispatch]);
 
-	// Add effect to handle definition loading and validation in edit mode
-	// ADD THIS EFFECT: Hydrate form data from definition on refresh
 	useEffect(() => {
 		if (definition && !definitionIsLoading && isFormInitial) {
 			dispatch(setInitialValues(definition));
 
-			// In edit mode, trigger validation after setting initial values
 			if (isEditMode) {
 				setTimeout(() => {
 					dispatch(validateAndUpdateStep("fields"));
@@ -226,9 +195,7 @@ const FormFieldsStepInner = (props) => {
 
 	useEffect(() => {
 		// In edit mode, trigger validation when definition is available
-		// Note: The new effect above handles the data population, this handles re-validation
 		if (isEditMode && definition && !definitionIsLoading && !isFormInitial) {
-			// Only validate if form is NOT initial (meaning it has data)
 			setTimeout(() => {
 				dispatch(validateAndUpdateStep("fields"));
 			}, 100);
@@ -237,16 +204,16 @@ const FormFieldsStepInner = (props) => {
 
 	function handleAddField(fieldType) {
 		dispatch(addField(fieldType));
-		setShowFieldSelector(false); // Close popup after adding field
+		setShowFieldSelector(false);
 	}
 
 	function handleOpenFieldSelector() {
-		setReplacingFieldIndex(null); // Reset to add mode
+		setReplacingFieldIndex(null);
 		setShowFieldSelector(true);
 	}
 
 	function handleCloseFieldSelector() {
-		setReplacingFieldIndex(null); // Reset replacement state
+		setReplacingFieldIndex(null);
 		setShowFieldSelector(false);
 	}
 
@@ -255,7 +222,6 @@ const FormFieldsStepInner = (props) => {
 	}
 
 	function handleReplaceField(fieldIndex) {
-		// Store the field index to replace and open the field selector
 		setReplacingFieldIndex(fieldIndex);
 		setShowFieldSelector(true);
 	}
@@ -263,82 +229,55 @@ const FormFieldsStepInner = (props) => {
 	function handleAddReplacementField(fieldType) {
 		const fieldIndex = replacingFieldIndex;
 		if (fieldIndex !== null) {
-			// Delete the current field at this index
 			const currentField = allFields[fieldIndex];
 			if (currentField && !currentField.isMandatory) {
 				dispatch(deleteField(currentField.id));
 			}
-
-			// Add the new field
 			dispatch(addField(fieldType));
-
-			// Reset replacement state
 			setReplacingFieldIndex(null);
 			setShowFieldSelector(false);
 		}
 	}
 
 	function handleNext() {
-		// Validate before proceeding
 		const validationResult = dispatch(validateAndUpdateStep("fields"));
-
-		// If validation passes, navigate to next step
 		if (validationResult?.isValid) {
-			// Clear form submission state when changing steps
 			dispatch(clearFormSubmissionState());
-
 			if (isCreateMode) {
 				history.push(values.routeFormLayoutStep);
 			} else {
-				// In edit mode, navigate directly
 				history.push(values.routeFormLayoutStep);
 			}
 		}
 		// If validation fails, scroll to top to show error summary
 		else {
-			// Scroll to top of form to show validation errors
 			window.scrollTo({ top: 0, behavior: "smooth" });
 		}
 	}
 
 	function handlePrevious() {
-		// Clear form submission state when changing steps
 		dispatch(clearFormSubmissionState());
-
 		if (isCreateMode) {
 			history.push(values.routeFormOverviewStep);
 		} else {
-			// In edit mode, go back to overview screen
 			history.push(values.routeFormOverviewStep);
 		}
 	}
 
 	function handleSaveStep() {
-		// Validate before saving in edit mode
 		const validationResult = dispatch(validateAndUpdateStep("fields"));
-
-		// If validation passes, save the entire form
 		if (validationResult?.isValid) {
 			dispatch(submitForm());
 		}
 		// If validation fails, scroll to top to show error summary
 		else {
-			// Scroll to top of form to show validation errors
 			window.scrollTo({ top: 0, behavior: "smooth" });
 		}
 	}
 
-	// Get all fields in unified list (base + custom)
 	const allFields = fields || [];
-
-	// Create sorted copy for rendering
 	const sortedFields = allFields.slice().sort((a, b) => a.order - b.order);
 
-	// Filter description fields for summary demo
-	const descriptionFields = allFields.filter(
-		(field) => field.type === "description",
-	);
-
 	// Check for definition management permission
 	if (
 		!PlussCore.Session.validateAccess(
@@ -665,11 +604,9 @@ const useField = (id) => {
 	}
 
 	function setUseAsSummary(value) {
-		// When setting a field as summary, use the new action to ensure only one field is selected
 		if (value) {
 			dispatch(setSummaryField(id));
 		} else {
-			// When unsetting, use regular update to unset this specific field
 			const updatedField = { values: { ...values, useAsSummary: false } };
 			dispatch(updateFieldValuesById(id, updatedField));
 		}

package/src/screens/FormLayoutStep.jsx

@@ -52,11 +52,8 @@ const FormLayoutStepInner = (props) => {
 	const overviewIcon = useSelector(selectFormIcon);
 	const definitionId = useSelector(selectDefinitionId);
 	const layoutType = layout?.type || "round";
-	// Get wizard state
 	const isCreateMode = useSelector(selectIsCreateMode);
 	const isEditMode = useSelector(selectIsEditMode);
-
-	// Use custom hook to handle definition loading
 	const { definition, definitionIsLoading } = useFeatureDefinitionLoader();
 
 	// Get form initialization state
@@ -71,13 +68,9 @@ const FormLayoutStepInner = (props) => {
 	const submitError = useSelector(selectFormSubmitError);
 	const submitSuccess = useSelector(selectFormSubmitSuccess);
 
-	// Toast state
 	const [toasts, setToasts] = React.useState([]);
-
-	// Success popup state
 	const [showSuccessPopup, setShowSuccessPopup] = React.useState(false);
 
-	// Toast management functions
 	const addToast = (type, message) => {
 		const id = Date.now();
 		setToasts((prev) => [...prev, { id, type, message, isVisible: true }]);
@@ -87,34 +80,23 @@ const FormLayoutStepInner = (props) => {
 		setToasts((prev) => prev.filter((toast) => toast.id !== id));
 	};
 
-	// Handle success popup close
 	const handleSuccessPopupClose = () => {
 		setShowSuccessPopup(false);
 		dispatch(clearFormSubmissionState());
-		history.push(values.routeFormOverviewStep);
+		window.location.replace(values.routeFormOverviewStep);
 	};
 
-	// Handle success popup button click
-	const handleSuccessPopupButtonClick = () => {
-		setShowSuccessPopup(false);
-		dispatch(clearFormSubmissionState());
-		history.push(values.routeFormOverviewStep);
-	};
-
-	// Handle successful submission with popup and redirect
 	useEffect(() => {
 		if (submitSuccess && !isSubmitting) {
 			if (isEditMode) {
 				addToast("success", "Changes saved");
 				dispatch(clearFormSubmissionState());
 			} else {
-				// In create mode, show success popup
 				setShowSuccessPopup(true);
 			}
 		}
 	}, [submitSuccess, isEditMode, isSubmitting, dispatch]);
 
-	// Handle submit error
 	useEffect(() => {
 		if (submitError) {
 			addToast("error", "It didn't work. Please try again.");
@@ -124,17 +106,10 @@ const FormLayoutStepInner = (props) => {
 		}
 	}, [submitError]);
 
-	// Error boundary handlers
 	const handleRefresh = () => {
-		// Refresh current step data
 		dispatch(validateAndUpdateStep("layout"));
 	};
 
-	const handleBack = () => {
-		// Go to overview step
-		history.push(values.routeFormOverviewStep);
-	};
-
 	const layoutOptions = [
 		{
 			value: "round",
@@ -185,7 +160,6 @@ const FormLayoutStepInner = (props) => {
 		}
 	}, [definition, definitionIsLoading, isFormInitial, isEditMode, dispatch]);
 
-	// Add effect to handle definition loading and validation in edit mode
 	useEffect(() => {
 		// In edit mode, trigger validation when definition is available
 		// Note: The new effect above handles data population, this handles re-validation
@@ -201,35 +175,23 @@ const FormLayoutStepInner = (props) => {
 		dispatch(setLayoutType(layoutType));
 	}
 
-	function handleGridIconChange(iconUrl) {
-		dispatch(setGridLayoutIcon(iconUrl));
-	}
-
-	function handleGridIconRemove() {
-		// When custom grid icon is removed, set it to undefined to trigger fallback to overview icon
-		dispatch(setGridLayoutIcon(undefined));
-	}
-
 	function handlePrevious() {
-		// Clear form submission state when changing steps
 		dispatch(clearFormSubmissionState());
 
 		if (isCreateMode) {
 			history.push(values.routeFormFieldsStep);
 		} else {
-			// In edit mode, go back to fields screen
 			history.push(values.routeFormFieldsStep);
 		}
 	}
 
 	function handleNext() {
-		// Validate before proceeding
+		if (isSubmitting) {
+			return;
+		}
 		const validationResult = dispatch(validateAndUpdateStep("layout"));
-
-		// If validation passes, proceed with submission/navigation
 		if (validationResult?.isValid) {
 			if (isCreateMode) {
-				// In create mode, submit form - success popup will be shown by useEffect
 				dispatch(submitForm());
 			} else {
 				// In edit mode, just save changes