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

package/src/screens/FormOverviewStep.jsx

@@ -0,0 +1,396 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { SidebarLayout } from "../components/SidebarLayout.jsx";
+import {
+	GenericInput,
+	Text,
+	Button,
+	LoadingState,
+	SkeletonLoader,
+	ErrorBoundary,
+	FeatureBuilderWelcomePopup,
+	CenteredContainer,
+} from "../components";
+import ToastContainer from "../components/ToastContainer.jsx";
+import { values } from "../values.config.js";
+import { PlussCore } from "../feature.config";
+import { capitalizeTextWithFallback } from "../utils/textUtils";
+import styles from "./Form.module.css";
+import { withRouter } from "react-router-dom";
+
+import { useDispatch, useSelector } from "react-redux";
+import {
+	setDisplayName,
+	setIcon,
+	setInitialValues,
+	setTitle,
+	submitForm,
+	clearFormSubmissionState,
+} from "../actions/formActions";
+import {
+	selectFormIcon,
+	selectFormDisplayName,
+	selectFormTitle,
+	selectDefinition,
+	selectDefinitionIsLoading,
+	selectIsCreateMode,
+	selectIsEditMode,
+	selectIsStepValid,
+	selectStepErrors,
+	selectWizardMode,
+	selectFormIsSubmitting,
+	selectFormSubmitError,
+	selectFormSubmitSuccess,
+} from "../selectors/featureBuilderSelectors";
+import {
+	validateAndUpdateStep,
+	setCurrentStepAndSave,
+} from "../actions/wizardActions";
+import IconSelector from "../components/IconSelector.jsx";
+import ExampleDisplay from "../components/ExampleDisplay.jsx";
+
+/**
+ * Form Overview Step screen component for feature builder wizard
+ * Handles feature configuration including title, display name, and icon selection
+ * Manages validation, submission, and error handling for overview step
+ * Supports both create and edit modes with different behaviors
+ *
+ * @typedef {Object} FormOverviewStepProps
+ * @property {Object} history - React Router history object for navigation
+ * @property {Object} location - React Router location object
+ *
+ * @param {FormOverviewStepProps} props - Component props
+ * @returns {React.ReactElement} Form overview step interface
+ *
+ * @example
+ * <FormOverviewStep history={historyObject} location={locationObject} />
+ */
+const FormOverviewStepInner = (props) => {
+	const { history, location } = props;
+	const dispatch = useDispatch();
+	const auth = useSelector((state) => state.auth);
+
+	// Get wizard state
+	const isCreateMode = useSelector(selectIsCreateMode);
+	const isEditMode = useSelector(selectIsEditMode);
+	const definition = useSelector(selectDefinition);
+	const definitionIsLoading = useSelector(selectDefinitionIsLoading);
+
+	// Get form state
+	const selectedIcon = useSelector(selectFormIcon);
+	const title = useSelector(selectFormTitle);
+	const displayName = useSelector(selectFormDisplayName);
+
+	// Get validation state
+	const isStepValid = useSelector(selectIsStepValid("overview"));
+	const stepErrors = useSelector(selectStepErrors("overview"));
+
+	// Get submission state
+	const isSubmitting = useSelector(selectFormIsSubmitting);
+	const submitError = useSelector(selectFormSubmitError);
+	const submitSuccess = useSelector(selectFormSubmitSuccess);
+
+	// State for welcome popup (only show in create mode)
+	const [showWelcomePopup, setShowWelcomePopup] = useState(false);
+
+	// Toast state
+	const [toasts, setToasts] = React.useState([]);
+
+	// Toast management functions
+	const addToast = (type, message) => {
+		const id = Date.now();
+		setToasts((prev) => [...prev, { id, type, message, isVisible: true }]);
+	};
+
+	const removeToast = (id) => {
+		setToasts((prev) => prev.filter((toast) => toast.id !== id));
+	};
+
+	// Handle redirect after successful save in edit mode
+	useEffect(() => {
+		if (submitSuccess && isEditMode && !isSubmitting) {
+			// Show toast notification
+			addToast("success", "Changes saved");
+
+			// Clear the success state after a short delay and redirect to overview
+			const timer = setTimeout(() => {
+				dispatch(clearFormSubmissionState());
+				history.push(values.routeFormOverviewStep);
+			}, 1500); // Show success message for 1.5 seconds before redirect
+
+			return () => clearTimeout(timer);
+		}
+	}, [submitSuccess, isEditMode, isSubmitting, dispatch, history]);
+
+	// Show toast notification for general success cases
+	React.useEffect(() => {
+		if (submitSuccess) {
+			if (!isEditMode) {
+				addToast("success", "Step saved");
+			}
+
+			// Clear submission state after showing toast (only for non-edit cases)
+			if (!isEditMode) {
+				const { clearFormSubmissionState } = require("../actions/formActions");
+				dispatch(clearFormSubmissionState());
+			}
+		}
+	}, [submitSuccess, isEditMode, dispatch]);
+
+	// Handle submit error
+	useEffect(() => {
+		if (submitError) {
+			addToast("error", "It didn't work. Please try again.");
+			setTimeout(() => {
+				window.location.reload();
+			}, 1000);
+		}
+	}, [submitError]);
+
+	// Error boundary handlers
+	const handleRefresh = () => {
+		// Refresh current step data
+		dispatch(validateAndUpdateStep("overview"));
+	};
+
+	const handleBack = () => {
+		// Always go to listing screen when going back
+		history.push(values.routeListingScreen);
+	};
+
+	useEffect(() => {
+		// Check if we should populate the form from definition
+		// Primary condition: edit mode with definition available
+		// Fallback condition: definition exists regardless of mode (handles timing issues)
+		const shouldPopulateForm =
+			definition &&
+			!definitionIsLoading &&
+			(isEditMode || (definition && !isCreateMode)); // Fallback: if definition exists and we're not in create mode
+
+		if (shouldPopulateForm) {
+			dispatch(setInitialValues(definition));
+
+			// In edit mode, trigger validation after setting initial values to enable save button
+			if (isEditMode) {
+				setTimeout(() => {
+					dispatch(validateAndUpdateStep("overview"));
+				}, 100); // Small delay to ensure state is updated
+			}
+		}
+	}, [definition, definitionIsLoading, isEditMode, isCreateMode, dispatch]);
+
+	// Show welcome popup on component mount for create mode
+	useEffect(() => {
+		if (isCreateMode && !definitionIsLoading && !definition) {
+			setShowWelcomePopup(true);
+		}
+	}, [isCreateMode, definitionIsLoading, definition]);
+
+	// Handle welcome popup close
+	const handleWelcomePopupClose = () => {
+		setShowWelcomePopup(false);
+	};
+
+	function handleNext() {
+		// Validate before proceeding - validation will update Redux state
+		const validationResult = dispatch(validateAndUpdateStep("overview"));
+
+		// If validation passes, navigate to next step
+		if (validationResult && validationResult.isValid) {
+			// Clear form submission state when changing steps
+			dispatch(clearFormSubmissionState());
+
+			if (isCreateMode) {
+				history.push(values.routeFormFieldsStep);
+			} else {
+				// In edit mode, navigate directly
+				history.push(values.routeFormFieldsStep);
+			}
+		}
+		// If validation fails, the validation errors will be displayed and user can fix them
+	}
+
+	function handlePrevious() {
+		// Clear form submission state when changing steps
+		dispatch(clearFormSubmissionState());
+
+		// Always go to listing screen after completion
+		history.push(values.routeListingScreen);
+	}
+
+	function handleSaveStep() {
+		// Validate before saving in edit mode
+		const validationResult = dispatch(validateAndUpdateStep("overview"));
+
+		// If validation passes, save the entire form
+		if (validationResult && validationResult.isValid) {
+			dispatch(submitForm());
+		}
+	}
+
+	function handleTitleChange(ev) {
+		dispatch(setTitle(ev.target.value));
+	}
+
+	function handleSelectIcon(icon) {
+		dispatch(setIcon(icon));
+	}
+
+	function handleDisplayNameChange(ev) {
+		dispatch(setDisplayName(ev.target.value));
+	}
+
+	// Check for definition management permission
+	if (
+		!PlussCore.Session.validateAccess(
+			auth.site,
+			values.permissionFeatureBuilderDefinition,
+			auth,
+		)
+	) {
+		return (
+			<div className="hub-wrapperContainer">
+				<div className="hub-contentWrapper">
+					<div className={styles.welcomeContainer}>
+						<div className={styles.welcomeHeader}>
+							<Text type="h1" className={styles.welcomeTitle}>
+								Access Restricted
+							</Text>
+							<Text type="body" className={styles.welcomeSubtitle}>
+								You don't have permission to manage feature definitions. Please
+								contact your administrator if you need access.
+							</Text>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<ErrorBoundary
+			title="Unable to load overview"
+			message="If you continue to experience issues with the overview step, please try refreshing the page or contact support."
+			onRetry={handleRefresh}
+		>
+			<SidebarLayout>
+				<Text
+					type="formTitleLarge"
+					className={`${isEditMode ? styles.editMode : styles.createMode}`}
+				>
+					{definitionIsLoading
+						? "Loading..."
+						: isEditMode
+							? `Edit Feature: ${capitalizeTextWithFallback(title, "Unnamed")}`
+							: "Create New Feature"}
+				</Text>
+				{definitionIsLoading ? (
+					<div className={styles.overviewLoadingContainer}>
+						<LoadingState message="Loading feature..." size={48} />
+					</div>
+				) : (
+					<>
+						<GenericInput
+							label="Feature Name"
+							help="Name your feature as it should appear in the Community Manager and the app"
+							isRequired
+							type="text"
+							onChange={handleTitleChange}
+							value={title}
+							className="mt-8"
+							showError={() => {
+								return !isStepValid && stepErrors && stepErrors.title;
+							}}
+							errorMessage="Title is required"
+							isValid={() => {
+								return title && title.trim().length > 0;
+							}}
+						/>
+
+						<IconSelector
+							selectedIcon={selectedIcon}
+							onIconSelect={handleSelectIcon}
+							className=""
+							stepErrors={stepErrors}
+							showError={() => {
+								return !isStepValid && stepErrors && stepErrors.icon;
+							}}
+						/>
+
+						<GenericInput
+							label="Display Name"
+							help="Display name for this feature (used in buttons, notifications, and activity feeds)"
+							isRequired
+							type="text"
+							onChange={handleDisplayNameChange}
+							value={displayName}
+							className="mt-8"
+							showError={() => {
+								return !isStepValid && stepErrors && stepErrors.displayName;
+							}}
+							errorMessage="Display name is required"
+							isValid={() => {
+								return displayName && displayName.trim().length > 0;
+							}}
+						/>
+
+						{/* Examples Display */}
+						<ExampleDisplay displayName={displayName} />
+					</>
+				)}
+
+				{/* Top-level validation message - positioned above action buttons */}
+				{!isStepValid && Object.keys(stepErrors).length > 0 && (
+					<div
+						className={styles.validationErrorMessage}
+						role="alert"
+						aria-live="polite"
+					>
+						{Object.keys(stepErrors).length}{" "}
+						{Object.keys(stepErrors).length === 1
+							? "field needs"
+							: "fields need"}{" "}
+						attention before proceeding
+					</div>
+				)}
+
+				{/* Mode-aware navigation buttons */}
+				<div className={styles.navigation}>
+					{isCreateMode ? (
+						<Button
+							buttonType="primary"
+							isActive
+							onClick={handleNext}
+							leftIcon="arrow-right"
+						>
+							Next step: Configure Fields
+						</Button>
+					) : (
+						<Button
+							buttonType="primary"
+							isActive
+							onClick={handleSaveStep}
+							disabled={!isStepValid || isSubmitting}
+							leftIcon={isSubmitting ? "sync" : "save"}
+							loading={isSubmitting}
+						>
+							{isSubmitting ? "Saving..." : "Save"}
+						</Button>
+					)}
+				</div>
+
+				{/* Submission feedback */}
+			</SidebarLayout>
+
+			{/* Welcome popup for create mode */}
+			<FeatureBuilderWelcomePopup
+				isOpen={showWelcomePopup}
+				onClose={handleWelcomePopupClose}
+			/>
+
+			{/* Toast Container for Notifications */}
+			<ToastContainer toasts={toasts} onDismiss={removeToast} />
+		</ErrorBoundary>
+	);
+};
+
+export const FormOverviewStep = withRouter(FormOverviewStepInner);