@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.8 → 1.0.4-beta.0

package/src/screens/FormOverviewStep.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { SidebarLayout } from "../components/SidebarLayout.jsx";
 import {
-  GenericInput,
-  Text,
-  Button,
-  LoadingState,
-  ErrorBoundary,
-  FeatureBuilderWelcomePopup,
+	GenericInput,
+	Text,
+	Button,
+	LoadingState,
+	ErrorBoundary,
+	FeatureBuilderWelcomePopup,
 } from "../components";
 import ToastContainer from "../components/ToastContainer.jsx";
 import { values } from "../values.config.js";
@@ -17,26 +17,26 @@ import { withRouter } from "react-router-dom";
 
 import { useDispatch, useSelector } from "react-redux";
 import {
-  setDisplayName,
-  clearFormSubmissionState,
-  setIcon,
-  setInitialValues,
-  setTitle,
-  submitForm,
+	setDisplayName,
+	clearFormSubmissionState,
+	setIcon,
+	setInitialValues,
+	setTitle,
+	submitForm,
 } from "../actions/formActions";
 import {
-  selectFormIcon,
-  selectFormDisplayName,
-  selectFormTitle,
-  selectDefinition,
-  selectDefinitionIsLoading,
-  selectIsCreateMode,
-  selectIsEditMode,
-  selectIsStepValid,
-  selectStepErrors,
-  selectFormIsSubmitting,
-  selectFormSubmitError,
-  selectFormSubmitSuccess,
+	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";
@@ -59,331 +59,331 @@ import ExampleDisplay from "../components/ExampleDisplay.jsx";
  * <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>
-  );
+	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);