@plusscommunities/pluss-feature-builder-web-c 1.0.4 → 1.0.6-beta.0

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