@plusscommunities/pluss-feature-builder-web-d 1.0.7 → 1.0.9-beta.3

package/src/screens/FormOverviewStep.jsx

@@ -1,389 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { SidebarLayout } from "../components/SidebarLayout.jsx";
-import {
-	GenericInput,
-	Text,
-	Button,
-	LoadingState,
-	ErrorBoundary,
-	FeatureBuilderWelcomePopup,
-} 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,
-	clearFormSubmissionState,
-	setIcon,
-	setInitialValues,
-	setTitle,
-	submitForm,
-} from "../actions/formActions";
-import {
-	selectFormIcon,
-	selectFormDisplayName,
-	selectFormTitle,
-	selectDefinition,
-	selectDefinitionIsLoading,
-	selectIsCreateMode,
-	selectIsEditMode,
-	selectIsStepValid,
-	selectStepErrors,
-	selectFormIsSubmitting,
-	selectFormSubmitError,
-	selectFormSubmitSuccess,
-} from "../selectors/featureBuilderSelectors";
-import { validateAndUpdateStep } 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) {
-				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);