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

package/src/screens/FormLayoutStep.jsx

@@ -4,439 +4,440 @@ import { values } from "../values.config.js";
 import { PlussCore } from "../feature.config";
 import styles from "./Form.module.css";
 import {
-  Text,
-  Button,
-  LoadingState,
-  IconLoader,
-  ErrorBoundary,
-  FeatureBuilderSuccessPopup,
+	Text,
+	Button,
+	LoadingState,
+	IconLoader,
+	ErrorBoundary,
+	FeatureBuilderSuccessPopup,
 } from "../components";
 import ToastContainer from "../components/ToastContainer.jsx";
 import { useDispatch, useSelector } from "react-redux";
 import {
-  setLayoutType,
-  setGridLayoutIcon,
-  submitForm,
-  clearFormSubmissionState,
-  setInitialValues,
+	setLayoutType,
+	setGridLayoutIcon,
+	submitForm,
+	clearFormSubmissionState,
+	setInitialValues,
 } from "../actions/formActions";
 import {
-  selectFormLayout,
-  selectFormIcon,
-  selectIsCreateMode,
-  selectIsEditMode,
-  selectIsStepValid,
-  selectStepErrors,
-  selectFormIsSubmitting,
-  selectFormSubmitError,
-  selectFormSubmitSuccess,
-  selectFormDisplayName,
-  selectFormTitle,
-  selectDefinitionId,
-  selectFormIsInitial,
+	selectFormLayout,
+	selectFormIcon,
+	selectIsCreateMode,
+	selectIsEditMode,
+	selectIsStepValid,
+	selectStepErrors,
+	selectFormIsSubmitting,
+	selectFormSubmitError,
+	selectFormSubmitSuccess,
+	selectFormDisplayName,
+	selectFormTitle,
+	selectDefinitionId,
+	selectFormIsInitial,
 } from "../selectors/featureBuilderSelectors";
 import { useFeatureDefinitionLoader } from "../hooks/useFeatureDefinitionLoader";
 import {
-  validateAndUpdateStep,
-  setCurrentStepAndSave,
+	validateAndUpdateStep,
+	setCurrentStepAndSave,
 } from "../actions/wizardActions";
 import { withRouter } from "react-router-dom";
 
 const FormLayoutStepInner = (props) => {
-  const { history } = props;
-  const dispatch = useDispatch();
-  const auth = useSelector((state) => state.auth);
-  const layout = useSelector(selectFormLayout);
-  const displayName = useSelector(selectFormDisplayName);
-  const featureFormName = useSelector(selectFormTitle);
-  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
-  const isFormInitial = useSelector(selectFormIsInitial);
-
-  // Get validation state
-  const isStepValid = useSelector(selectIsStepValid("layout"));
-  const stepErrors = useSelector(selectStepErrors("layout"));
-
-  // Get submission state
-  const isSubmitting = useSelector(selectFormIsSubmitting);
-  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 }]);
-  };
-
-  const removeToast = (id) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
-  };
-
-  // Handle success popup close
-  const handleSuccessPopupClose = () => {
-    setShowSuccessPopup(false);
-    dispatch(clearFormSubmissionState());
-    history.push(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.");
-      setTimeout(() => {
-        window.location.reload();
-      }, 1000);
-    }
-  }, [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",
-      title: "Round Images",
-      description: "Round photos in a grid",
-      image:
-        "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/b8156f584c92a0edbe13a8e05d/fblayoutround.png",
-    },
-    {
-      value: "condensed",
-      title: "Compact List",
-      description: "Small photos in a list",
-      image:
-        "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/dfec30d342249a4073e5ffc6b8/fblayoutcompact.png",
-    },
-    {
-      value: "square",
-      title: "Square Images",
-      description: "Square photos in a grid",
-      image:
-        "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/771e4626462a93041746a746c8/fblayoutsquare.png",
-    },
-    {
-      value: "feature",
-      title: "Large Photos",
-      description: "Big photos with details",
-      image:
-        "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/f48acc614508ba246186b12845/fblayoutcardslarge.png",
-    },
-  ];
-
-  useEffect(() => {
-    // Set current step when component mounts
-    dispatch(setCurrentStepAndSave("layout"));
-  }, [dispatch]);
-
-  // 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("layout"));
-        }, 100);
-      }
-    }
-  }, [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
-    if (isEditMode && definition && !definitionIsLoading && !isFormInitial) {
-      // Only validate if form is NOT initial (meaning it has data)
-      setTimeout(() => {
-        dispatch(validateAndUpdateStep("layout"));
-      }, 100);
-    }
-  }, [definition, definitionIsLoading, isEditMode, isFormInitial, dispatch]);
-
-  function handleSelectLayout(layoutType) {
-    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
-    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
-        dispatch(submitForm());
-      }
-    }
-    // If validation fails, validation errors will be displayed
-  }
-
-  function handleSaveStep() {
-    // Validate before saving in edit mode
-    const validationResult = dispatch(validateAndUpdateStep("layout"));
-
-    // If validation passes, proceed with saving
-    if (validationResult?.isValid) {
-      dispatch(submitForm());
-    }
-  }
-
-  // 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 layout design"
-      message="If you continue to experience issues with the layout design, please try refreshing the page or contact support."
-      onRetry={handleRefresh}
-    >
-      <SidebarLayout>
-        <div className={styles.formLayoutHeader}>
-          <Text
-            type="formTitleLarge"
-            className={`${isEditMode ? styles.editMode : styles.createMode}`}
-          >
-            {isEditMode ? "In-App Design" : "In-App Design"}
-          </Text>
-        </div>
-        <Text type="body" className="paddingBottom-16">
-          {isCreateMode
-            ? "Pick how your feature looks. Choose a layout and add a grid icon if you want."
-            : "Change how your feature looks. You can update the layout and grid icon anytime."}
-        </Text>
-
-        {/* Grid Icon Section */}
-        <div className={styles.gridIconSection}>
-          <Text type="formTitleSmall" className="">
-            Grid Icon (Optional)
-          </Text>
-          <Text type="body" color="#6c757d" className="paddingBottom-16">
-            Upload a grid icon for your feature. If you don't upload one, we'll
-            use your main icon.
-          </Text>
-
-          <IconLoader
-            value={layout?.gridIcon}
-            defaultValue={overviewIcon}
-            onChange={() => { }} // Disabled
-            onRemove={() => { }} // Disabled
-            featureId={definitionId || "new"}
-          />
-
-          <Text type="help" color="#6c757d" className="marginTop-16">
-            We're working on bringing the ability to use custom grid icons
-          </Text>
-        </div>
-
-        {/* Layout Selection Section */}
-        <div className={styles.layoutSection}>
-          <Text type="formTitleSmall">In-App Layout</Text>
-          <Text type="body" color="#6c757d" className="paddingBottom-16">
-            Select how your feature content will be displayed in the app
-          </Text>
-          <div className={styles.grid__four}>
-            {definitionIsLoading ? (
-              <div className={styles.gridIconLoading}>
-                <LoadingState message="Loading layout options..." />
-              </div>
-            ) : (
-              layoutOptions.map((option) => {
-                const hasError =
-                  !isStepValid && stepErrors && stepErrors.layoutType;
-                const isSelected = layoutType === option.value;
-
-                return (
-                  <div
-                    key={option.value}
-                    className={`${styles.layoutOption} ${hasError ? styles.hasError : ""
-                      } ${isSelected ? styles.selected : ""}`}
-                    onClick={() => handleSelectLayout(option.value)}
-                  >
-                    <div className={styles.layoutOptionImage}>
-                      <img
-                        src={option.image}
-                        alt={option.title}
-                        className={styles.layoutOptionImg}
-                      />
-                    </div>
-                    <div className={styles.layoutOptionContent}>
-                      <div className={styles.layoutOptionTitle}>
-                        {option.title}
-                      </div>
-                      <div className={styles.layoutOptionDescription}>
-                        {option.description}
-                      </div>
-                    </div>
-                    {hasError && (
-                      <div className={styles.fieldError}>
-                        <span className={styles.errorIcon}>!</span>
-                        Layout selection is required
-                      </div>
-                    )}
-                  </div>
-                );
-              })
-            )}
-          </div>
-        </div>
-
-        {/* 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="secondary"
-                isActive
-                onClick={handlePrevious}
-                leftIcon="arrow-left"
-              >
-                Previous step: Choose Layout
-              </Button>
-              <Button
-                buttonType="primary"
-                isActive
-                onClick={handleNext}
-                leftIcon="check"
-                disabled={isSubmitting}
-                loading={isSubmitting}
-              >
-                {isSubmitting ? "Creating..." : "Complete Feature"}
-              </Button>
-            </>
-          ) : (
-            <Button
-              buttonType="primary"
-              isActive
-              onClick={handleSaveStep}
-              disabled={!isStepValid || isSubmitting}
-              leftIcon={isSubmitting ? "sync" : "save"}
-              loading={isSubmitting}
-            >
-              {isSubmitting ? "Saving..." : "Save"}
-            </Button>
-          )}
-        </div>
-      </SidebarLayout>
-
-      {/* Success Popup */}
-      <FeatureBuilderSuccessPopup
-        isOpen={showSuccessPopup}
-        onClose={handleSuccessPopupClose}
-        featureName={featureFormName}
-        displayName={displayName}
-      />
-
-      {/* Toast Container for Notifications */}
-      <ToastContainer toasts={toasts} onDismiss={removeToast} />
-    </ErrorBoundary>
-  );
+	const { history } = props;
+	const dispatch = useDispatch();
+	const auth = useSelector((state) => state.auth);
+	const layout = useSelector(selectFormLayout);
+	const displayName = useSelector(selectFormDisplayName);
+	const featureFormName = useSelector(selectFormTitle);
+	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
+	const isFormInitial = useSelector(selectFormIsInitial);
+
+	// Get validation state
+	const isStepValid = useSelector(selectIsStepValid("layout"));
+	const stepErrors = useSelector(selectStepErrors("layout"));
+
+	// Get submission state
+	const isSubmitting = useSelector(selectFormIsSubmitting);
+	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 }]);
+	};
+
+	const removeToast = (id) => {
+		setToasts((prev) => prev.filter((toast) => toast.id !== id));
+	};
+
+	// Handle success popup close
+	const handleSuccessPopupClose = () => {
+		setShowSuccessPopup(false);
+		dispatch(clearFormSubmissionState());
+		history.push(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.");
+			setTimeout(() => {
+				window.location.reload();
+			}, 1000);
+		}
+	}, [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",
+			title: "Round Images",
+			description: "Round photos in a grid",
+			image:
+				"https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/b8156f584c92a0edbe13a8e05d/fblayoutround.png",
+		},
+		{
+			value: "condensed",
+			title: "Compact List",
+			description: "Small photos in a list",
+			image:
+				"https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/dfec30d342249a4073e5ffc6b8/fblayoutcompact.png",
+		},
+		{
+			value: "square",
+			title: "Square Images",
+			description: "Square photos in a grid",
+			image:
+				"https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/771e4626462a93041746a746c8/fblayoutsquare.png",
+		},
+		{
+			value: "feature",
+			title: "Large Photos",
+			description: "Big photos with details",
+			image:
+				"https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/f48acc614508ba246186b12845/fblayoutcardslarge.png",
+		},
+	];
+
+	useEffect(() => {
+		// Set current step when component mounts
+		dispatch(setCurrentStepAndSave("layout"));
+	}, [dispatch]);
+
+	// 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("layout"));
+				}, 100);
+			}
+		}
+	}, [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
+		if (isEditMode && definition && !definitionIsLoading && !isFormInitial) {
+			// Only validate if form is NOT initial (meaning it has data)
+			setTimeout(() => {
+				dispatch(validateAndUpdateStep("layout"));
+			}, 100);
+		}
+	}, [definition, definitionIsLoading, isEditMode, isFormInitial, dispatch]);
+
+	function handleSelectLayout(layoutType) {
+		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
+		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
+				dispatch(submitForm());
+			}
+		}
+		// If validation fails, validation errors will be displayed
+	}
+
+	function handleSaveStep() {
+		// Validate before saving in edit mode
+		const validationResult = dispatch(validateAndUpdateStep("layout"));
+
+		// If validation passes, proceed with saving
+		if (validationResult?.isValid) {
+			dispatch(submitForm());
+		}
+	}
+
+	// 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 layout design"
+			message="If you continue to experience issues with the layout design, please try refreshing the page or contact support."
+			onRetry={handleRefresh}
+		>
+			<SidebarLayout>
+				<div className={styles.formLayoutHeader}>
+					<Text
+						type="formTitleLarge"
+						className={`${isEditMode ? styles.editMode : styles.createMode}`}
+					>
+						{isEditMode ? "In-App Design" : "In-App Design"}
+					</Text>
+				</div>
+				<Text type="body" className="paddingBottom-16">
+					{isCreateMode
+						? "Pick how your feature looks. Choose a layout and add a grid icon if you want."
+						: "Change how your feature looks. You can update the layout and grid icon anytime."}
+				</Text>
+
+				{/* Grid Icon Section */}
+				<div className={styles.gridIconSection}>
+					<Text type="formTitleSmall" className="">
+						Grid Icon (Optional)
+					</Text>
+					<Text type="body" color="#6c757d" className="paddingBottom-16">
+						Upload a grid icon for your feature. If you don't upload one, we'll
+						use your main icon.
+					</Text>
+
+					<IconLoader
+						value={layout?.gridIcon}
+						defaultValue={overviewIcon}
+						onChange={() => {}} // Disabled
+						onRemove={() => {}} // Disabled
+						featureId={definitionId || "new"}
+					/>
+
+					<Text type="help" color="#6c757d" className="marginTop-16">
+						We're working on bringing the ability to use custom grid icons
+					</Text>
+				</div>
+
+				{/* Layout Selection Section */}
+				<div className={styles.layoutSection}>
+					<Text type="formTitleSmall">In-App Layout</Text>
+					<Text type="body" color="#6c757d" className="paddingBottom-16">
+						Select how your feature content will be displayed in the app
+					</Text>
+					<div className={styles.grid__four}>
+						{definitionIsLoading ? (
+							<div className={styles.gridIconLoading}>
+								<LoadingState message="Loading layout options..." />
+							</div>
+						) : (
+							layoutOptions.map((option) => {
+								const hasError =
+									!isStepValid && stepErrors && stepErrors.layoutType;
+								const isSelected = layoutType === option.value;
+
+								return (
+									<div
+										key={option.value}
+										className={`${styles.layoutOption} ${
+											hasError ? styles.hasError : ""
+										} ${isSelected ? styles.selected : ""}`}
+										onClick={() => handleSelectLayout(option.value)}
+									>
+										<div className={styles.layoutOptionImage}>
+											<img
+												src={option.image}
+												alt={option.title}
+												className={styles.layoutOptionImg}
+											/>
+										</div>
+										<div className={styles.layoutOptionContent}>
+											<div className={styles.layoutOptionTitle}>
+												{option.title}
+											</div>
+											<div className={styles.layoutOptionDescription}>
+												{option.description}
+											</div>
+										</div>
+										{hasError && (
+											<div className={styles.fieldError}>
+												<span className={styles.errorIcon}>!</span>
+												Layout selection is required
+											</div>
+										)}
+									</div>
+								);
+							})
+						)}
+					</div>
+				</div>
+
+				{/* 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="secondary"
+								isActive
+								onClick={handlePrevious}
+								leftIcon="arrow-left"
+							>
+								Previous step: Choose Layout
+							</Button>
+							<Button
+								buttonType="primary"
+								isActive
+								onClick={handleNext}
+								leftIcon="check"
+								disabled={isSubmitting}
+								loading={isSubmitting}
+							>
+								{isSubmitting ? "Creating..." : "Complete Feature"}
+							</Button>
+						</>
+					) : (
+						<Button
+							buttonType="primary"
+							isActive
+							onClick={handleSaveStep}
+							disabled={!isStepValid || isSubmitting}
+							leftIcon={isSubmitting ? "sync" : "save"}
+							loading={isSubmitting}
+						>
+							{isSubmitting ? "Saving..." : "Save"}
+						</Button>
+					)}
+				</div>
+			</SidebarLayout>
+
+			{/* Success Popup */}
+			<FeatureBuilderSuccessPopup
+				isOpen={showSuccessPopup}
+				onClose={handleSuccessPopupClose}
+				featureName={featureFormName}
+				displayName={displayName}
+			/>
+
+			{/* Toast Container for Notifications */}
+			<ToastContainer toasts={toasts} onDismiss={removeToast} />
+		</ErrorBoundary>
+	);
 };
 
 export const FormLayoutStep = withRouter(FormLayoutStepInner);