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

package/src/screens/FormLayoutStep.jsx

@@ -1,405 +0,0 @@
-import React, { useEffect } from "react";
-import { SidebarLayout } from "../components/SidebarLayout.jsx";
-import { values } from "../values.config.js";
-import { PlussCore } from "../feature.config";
-import styles from "./Form.module.css";
-import {
-	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,
-} from "../actions/formActions";
-import {
-	selectFormLayout,
-	selectFormIcon,
-	selectIsCreateMode,
-	selectIsEditMode,
-	selectIsStepValid,
-	selectStepErrors,
-	selectFormIsSubmitting,
-	selectFormSubmitError,
-	selectFormSubmitSuccess,
-	selectFormDisplayName,
-	selectFormTitle,
-	selectDefinitionId,
-	selectFormIsInitial,
-} from "../selectors/featureBuilderSelectors";
-import { useFeatureDefinitionLoader } from "../hooks/useFeatureDefinitionLoader";
-import {
-	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";
-	const isCreateMode = useSelector(selectIsCreateMode);
-	const isEditMode = useSelector(selectIsEditMode);
-	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);
-
-	const [toasts, setToasts] = React.useState([]);
-	const [showSuccessPopup, setShowSuccessPopup] = React.useState(false);
-
-	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));
-	};
-
-	const handleSuccessPopupClose = () => {
-		setShowSuccessPopup(false);
-		dispatch(clearFormSubmissionState());
-		window.location.replace(values.routeFormOverviewStep);
-	};
-
-	useEffect(() => {
-		if (submitSuccess && !isSubmitting) {
-			if (isEditMode) {
-				addToast("success", "Changes saved");
-				dispatch(clearFormSubmissionState());
-			} else {
-				setShowSuccessPopup(true);
-			}
-		}
-	}, [submitSuccess, isEditMode, isSubmitting, dispatch]);
-
-	useEffect(() => {
-		if (submitError) {
-			addToast("error", "It didn't work. Please try again.");
-			setTimeout(() => {
-				window.location.reload();
-			}, 1000);
-		}
-	}, [submitError]);
-
-	const handleRefresh = () => {
-		dispatch(validateAndUpdateStep("layout"));
-	};
-
-	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]);
-
-	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 handlePrevious() {
-		dispatch(clearFormSubmissionState());
-
-		if (isCreateMode) {
-			history.push(values.routeFormFieldsStep);
-		} else {
-			history.push(values.routeFormFieldsStep);
-		}
-	}
-
-	function handleNext() {
-		if (isSubmitting) {
-			return;
-		}
-		const validationResult = dispatch(validateAndUpdateStep("layout"));
-		if (validationResult?.isValid) {
-			if (isCreateMode) {
-				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);