@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.5 → 1.0.2-beta.7

package/src/screens/FormOverviewStep.jsx

@@ -1,14 +1,12 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { SidebarLayout } from "../components/SidebarLayout.jsx";
 import {
-	GenericInput,
-	Text,
-	Button,
-	LoadingState,
-	SkeletonLoader,
-	ErrorBoundary,
-	FeatureBuilderWelcomePopup,
-	CenteredContainer,
+  GenericInput,
+  Text,
+  Button,
+  LoadingState,
+  ErrorBoundary,
+  FeatureBuilderWelcomePopup,
 } from "../components";
 import ToastContainer from "../components/ToastContainer.jsx";
 import { values } from "../values.config.js";
@@ -19,32 +17,28 @@ import { withRouter } from "react-router-dom";
 
 import { useDispatch, useSelector } from "react-redux";
 import {
-	setDisplayName,
-	setIcon,
-	setInitialValues,
-	setTitle,
-	submitForm,
-	clearFormSubmissionState,
+  setDisplayName,
+  clearFormSubmissionState,
+  setIcon,
+  setInitialValues,
+  setTitle,
+  submitForm,
 } from "../actions/formActions";
 import {
-	selectFormIcon,
-	selectFormDisplayName,
-	selectFormTitle,
-	selectDefinition,
-	selectDefinitionIsLoading,
-	selectIsCreateMode,
-	selectIsEditMode,
-	selectIsStepValid,
-	selectStepErrors,
-	selectWizardMode,
-	selectFormIsSubmitting,
-	selectFormSubmitError,
-	selectFormSubmitSuccess,
+  selectFormIcon,
+  selectFormDisplayName,
+  selectFormTitle,
+  selectDefinition,
+  selectDefinitionIsLoading,
+  selectIsCreateMode,
+  selectIsEditMode,
+  selectIsStepValid,
+  selectStepErrors,
+  selectFormIsSubmitting,
+  selectFormSubmitError,
+  selectFormSubmitSuccess,
 } from "../selectors/featureBuilderSelectors";
-import {
-	validateAndUpdateStep,
-	setCurrentStepAndSave,
-} from "../actions/wizardActions";
+import { validateAndUpdateStep } from "../actions/wizardActions";
 import IconSelector from "../components/IconSelector.jsx";
 import ExampleDisplay from "../components/ExampleDisplay.jsx";
 
@@ -65,332 +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) {
-				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>
-	);
+  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);