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

package/src/screens/FormFieldsStep.jsx

@@ -1,626 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
-import { SidebarLayout } from "../components/SidebarLayout.jsx";
-import { values } from "../values.config.js";
-import { PlussCore } from "../feature.config";
-import styles from "./Form.module.css";
-import { Field } from "../components/Fields.jsx";
-import { iconImports } from "../components/iconImports";
-import {
-	Text,
-	LoadingState,
-	Button,
-	ErrorBoundary,
-	Popup,
-} from "../components";
-
-import ToastContainer from "../components/ToastContainer.jsx";
-
-import { withRouter } from "react-router-dom";
-import { useDispatch, useSelector } from "react-redux";
-import {
-	selectFormField,
-	selectFormFields,
-	selectFormDisplayName,
-	selectIsCreateMode,
-	selectIsEditMode,
-	selectIsStepValid,
-	selectStepErrors,
-	selectFormIsSubmitting,
-	selectFormSubmitError,
-	selectFormSubmitSuccess,
-	selectFormIsInitial,
-} from "../selectors/featureBuilderSelectors";
-import { useFeatureDefinitionLoader } from "../hooks/useFeatureDefinitionLoader";
-import {
-	addField,
-	deleteField,
-	updateFieldById as updateFieldValuesById,
-	setSummaryField,
-	submitForm,
-	clearFormSubmissionState,
-	setInitialValues,
-} from "../actions/formActions";
-import {
-	validateAndUpdateStep,
-	setCurrentStepAndSave,
-} from "../actions/wizardActions";
-
-/**
- * Form Fields Step component for feature builder wizard
- * Provides field management interface with add, edit, delete functionality
- * Supports multiple field types (text, image, file, CTA, feature-image, description)
- * Includes validation, error handling, and step navigation
- *
- * @param {Object} props - Component props
- * @param {Object} props.history - React Router history object for navigation
- * @returns {React.ReactElement} Form fields configuration interface
- *
- * @example
- * <FormFieldsStep history={historyObject} />
- */
-const FormFieldsStepInner = (props) => {
-	const { history } = props;
-	const dispatch = useDispatch();
-	const auth = useSelector((state) => state.auth);
-	const fields = useSelector(selectFormFields);
-
-	// Get form initialization state
-	const isFormInitial = useSelector(selectFormIsInitial);
-
-	// Field selection popup state
-	const [showFieldSelector, setShowFieldSelector] = useState(false);
-	const [replacingFieldIndex, setReplacingFieldIndex] = useState(null);
-
-	// Toast state
-	const [toasts, setToasts] = React.useState([]);
-
-	// Available field types for card selection
-	// Note: We exclude "title" type since it's already included as base field
-	// UX-optimized order: text-first, media-second pattern for natural content creation workflow
-	const fieldTypes = [
-		{
-			Key: "description",
-			Title: "Description",
-			Description: "Add detailed text content",
-			UseCase: "Provide information, details, or descriptions",
-			Icon: "paragraph",
-		},
-		{
-			Key: "image",
-			Title: "Image",
-			Description: "Add photos or visual content",
-			UseCase: "Show facility photos, event pictures, product images",
-			Icon: "image",
-		},
-		{
-			Key: "gallery",
-			Title: "Gallery",
-			Description: "Add multiple photos in a gallery layout",
-			UseCase: "Create photo albums, event galleries, showcase multiple images",
-			Icon: "th",
-		},
-		{
-			Key: "file",
-			Title: "Files",
-			Description: "Share downloadable documents",
-			UseCase: "Upload menus, brochures, PDFs, or resources",
-			Icon: "paperclip",
-		},
-		{
-			Key: "cta",
-			Title: "Action Button",
-			Description: "Add clickable action button",
-			UseCase: "Link to reservations, bookings, or external sites",
-			Icon: "arrow-circle-right",
-		},
-	];
-
-	const { definition, definitionIsLoading, reloadDefinition } =
-		useFeatureDefinitionLoader();
-
-	const formDisplayName = useSelector(selectFormDisplayName);
-
-	const isCreateMode = useSelector(selectIsCreateMode);
-	const isEditMode = useSelector(selectIsEditMode);
-	const isStepValid = useSelector(selectIsStepValid("fields"));
-	const stepErrors = useSelector(selectStepErrors("fields"));
-	const showWarnings = !isStepValid && Object.keys(stepErrors).length > 0;
-	const isSubmitting = useSelector(selectFormIsSubmitting);
-	const submitError = useSelector(selectFormSubmitError);
-	const submitSuccess = useSelector(selectFormSubmitSuccess);
-
-	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 successful submission with optimistic update and redirect
-	React.useEffect(() => {
-		if (submitSuccess && !isSubmitting) {
-			if (isEditMode) {
-				addToast("success", "Changes saved");
-				dispatch(clearFormSubmissionState());
-			} else {
-				addToast("success", "Feature created successfully");
-				dispatch(clearFormSubmissionState());
-				setTimeout(() => {
-					history.push(values.routeFormOverviewStep);
-				}, 1000);
-			}
-		}
-	}, [submitSuccess, isEditMode, isSubmitting, dispatch, history]);
-
-	// Handle submit error
-	useEffect(() => {
-		if (submitError) {
-			addToast("error", "It didn't work. Please try again.");
-			setTimeout(() => {
-				window.location.reload();
-			}, 1000);
-		}
-	}, [submitError]);
-
-	useEffect(() => {
-		if (showWarnings) {
-			// Scroll to top of form to show validation errors
-			window.scrollTo({ top: 0, behavior: "smooth" });
-		}
-	}, [showWarnings]);
-
-	const handleRefresh = () => {
-		dispatch(validateAndUpdateStep("fields"));
-	};
-
-	useEffect(() => {
-		dispatch(setCurrentStepAndSave("fields"));
-	}, [dispatch]);
-
-	useEffect(() => {
-		if (definition && !definitionIsLoading && isFormInitial) {
-			dispatch(setInitialValues(definition));
-
-			if (isEditMode) {
-				setTimeout(() => {
-					dispatch(validateAndUpdateStep("fields"));
-				}, 100);
-			}
-		}
-	}, [definition, definitionIsLoading, isFormInitial, isEditMode, dispatch]);
-
-	useEffect(() => {
-		// In edit mode, trigger validation when definition is available
-		if (isEditMode && definition && !definitionIsLoading && !isFormInitial) {
-			setTimeout(() => {
-				dispatch(validateAndUpdateStep("fields"));
-			}, 100);
-		}
-	}, [definition, definitionIsLoading, isEditMode, isFormInitial, dispatch]);
-
-	function handleAddField(fieldType) {
-		dispatch(addField(fieldType));
-		setShowFieldSelector(false);
-	}
-
-	function handleOpenFieldSelector() {
-		setReplacingFieldIndex(null);
-		setShowFieldSelector(true);
-	}
-
-	function handleCloseFieldSelector() {
-		setReplacingFieldIndex(null);
-		setShowFieldSelector(false);
-	}
-
-	function handleDeleteField(fieldId) {
-		dispatch(deleteField(fieldId));
-	}
-
-	function handleReplaceField(fieldIndex) {
-		setReplacingFieldIndex(fieldIndex);
-		setShowFieldSelector(true);
-	}
-
-	function handleAddReplacementField(fieldType) {
-		const fieldIndex = replacingFieldIndex;
-		if (fieldIndex !== null) {
-			const currentField = allFields[fieldIndex];
-			if (currentField && !currentField.isMandatory) {
-				dispatch(deleteField(currentField.id));
-			}
-			dispatch(addField(fieldType));
-			setReplacingFieldIndex(null);
-			setShowFieldSelector(false);
-		}
-	}
-
-	function handleNext() {
-		const validationResult = dispatch(validateAndUpdateStep("fields"));
-		if (validationResult?.isValid) {
-			dispatch(clearFormSubmissionState());
-			if (isCreateMode) {
-				history.push(values.routeFormLayoutStep);
-			} else {
-				history.push(values.routeFormLayoutStep);
-			}
-		}
-		// If validation fails, scroll to top to show error summary
-		else {
-			window.scrollTo({ top: 0, behavior: "smooth" });
-		}
-	}
-
-	function handlePrevious() {
-		dispatch(clearFormSubmissionState());
-		if (isCreateMode) {
-			history.push(values.routeFormOverviewStep);
-		} else {
-			history.push(values.routeFormOverviewStep);
-		}
-	}
-
-	function handleSaveStep() {
-		const validationResult = dispatch(validateAndUpdateStep("fields"));
-		if (validationResult?.isValid) {
-			dispatch(submitForm());
-		}
-		// If validation fails, scroll to top to show error summary
-		else {
-			window.scrollTo({ top: 0, behavior: "smooth" });
-		}
-	}
-
-	const allFields = fields || [];
-	const sortedFields = allFields.slice().sort((a, b) => a.order - b.order);
-
-	// 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 fields configuration"
-			message="If you continue to experience issues with the fields configuration, please try refreshing the page or contact support."
-			onRetry={handleRefresh}
-		>
-			<SidebarLayout>
-				<div className={styles.formHeader}>
-					<Text
-						type="formTitleLarge"
-						className={` ${isEditMode ? styles.editMode : styles.createMode}`}
-					>
-						Configure fields
-					</Text>
-				</div>
-				<Text type="body" className="marginBottom-16">
-					Add fields to define the shape of your feature's listings.
-				</Text>
-
-				{/* Unified Fields Section */}
-				<div className={styles.section}>
-					{/* Show loading spinner while loading */}
-					{definitionIsLoading ? (
-						<div className={styles.fieldsLoadingContainer}>
-							<LoadingState message="Loading fields..." />
-						</div>
-					) : (
-						sortedFields.map((field, fieldIndex) => (
-							<FormField
-								key={field.id}
-								id={field.id}
-								fieldIndex={fieldIndex}
-								handleDelete={
-									field.isMandatory ? null : () => handleDeleteField(field.id)
-								}
-								onReplaceField={
-									field.isMandatory
-										? null
-										: () => handleReplaceField(fieldIndex)
-								}
-								showWarnings={showWarnings}
-							/>
-						))
-					)}
-
-					{/* Add Field Button at bottom */}
-					<div className={styles.addFieldContainer}>
-						<div className={styles.fieldNumberContainer}>
-							{/* Empty spacer to align with field numbers */}
-						</div>
-						<div className={styles.addFieldSection}>
-							<Button
-								buttonType="primary"
-								isActive
-								onClick={handleOpenFieldSelector}
-								leftIcon="plus"
-								aria-label="Add a new content field"
-							>
-								Add Content Field
-							</Button>
-						</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"
-					>
-						{stepErrors.summary ? (
-							<>
-								{stepErrors.summary}
-								<br />
-								<span className={styles.helpNote}>
-									Only one description field can be marked as "Show as preview
-									text".
-								</span>
-							</>
-						) : (
-							"The form has error, please review the fields above."
-						)}
-					</div>
-				)}
-
-				{/* Mode-aware navigation buttons */}
-				<div className={styles.navigation}>
-					{isCreateMode ? (
-						<>
-							<Button
-								buttonType="secondary"
-								isActive
-								onClick={handlePrevious}
-								leftIcon="arrow-left"
-							>
-								Previous step: Configure Fields
-							</Button>
-							<Button
-								buttonType="primary"
-								isActive
-								onClick={handleNext}
-								leftIcon="arrow-right"
-							>
-								Next step: Choose Layout
-							</Button>
-						</>
-					) : (
-						<Button
-							buttonType="primary"
-							isActive
-							onClick={handleSaveStep}
-							disabled={isSubmitting}
-							leftIcon={isSubmitting ? "sync" : "save"}
-							loading={isSubmitting}
-						>
-							{isSubmitting ? "Saving..." : "Save"}
-						</Button>
-					)}
-				</div>
-			</SidebarLayout>
-
-			{/* Field Selector Popup */}
-			{showFieldSelector && (
-				<Popup
-					title={
-						replacingFieldIndex !== null ? "Replace Field" : "Add Content Field"
-					}
-					onClose={handleCloseFieldSelector}
-					buttons={[
-						{
-							text: "Cancel",
-							type: "secondary",
-							onClick: handleCloseFieldSelector,
-						},
-					]}
-					hasPadding
-					width="1200px"
-				>
-					{/* Help Section - Visible for all users */}
-					<div className={styles.helpSection}>
-						<Text type="formTitleSmall" className={styles.helpText}>
-							<FontAwesomeIcon icon={faInfoCircle} /> Add fields to the
-							template.
-							<br />
-							These fields determine layout for every{" "}
-							{formDisplayName || "Feature"} visible to residents.
-						</Text>
-					</div>
-
-					<div className={styles.fieldTypeCards}>
-						{fieldTypes.map((fieldType) => (
-							<div
-								key={fieldType.Key}
-								className={styles.fieldTypeCard}
-								onClick={() =>
-									replacingFieldIndex !== null
-										? handleAddReplacementField(fieldType.Key)
-										: handleAddField(fieldType.Key)
-								}
-								role="button"
-								tabIndex={0}
-								onKeyDown={(e) => {
-									if (e.key === "Enter" || e.key === " ") {
-										e.preventDefault();
-										if (replacingFieldIndex !== null) {
-											handleAddReplacementField(fieldType.Key);
-										} else {
-											handleAddField(fieldType.Key);
-										}
-									}
-								}}
-							>
-								<div className={styles.fieldTypeCardIcon}>
-									<FieldTypeIcon iconName={fieldType.Icon} />
-								</div>
-								<div className={styles.fieldTypeCardContent}>
-									<Text type="h5" className={styles.fieldTypeCardTitle}>
-										{fieldType.Title}
-									</Text>
-									<Text type="body" className={styles.fieldTypeCardDescription}>
-										{fieldType.Description}
-									</Text>
-									<Text type="help" className={styles.fieldTypeCardUseCase}>
-										<strong>Use case:</strong> {fieldType.UseCase}
-									</Text>
-								</div>
-							</div>
-						))}
-					</div>
-				</Popup>
-			)}
-
-			{/* Toast Container for Notifications */}
-			<ToastContainer toasts={toasts} onDismiss={removeToast} />
-		</ErrorBoundary>
-	);
-};
-
-export const FormFieldsStep = withRouter(FormFieldsStepInner);
-
-// FieldTypeIcon component for popup cards
-const FieldTypeIcon = ({ iconName }) => {
-	const icon = iconImports[iconName];
-
-	return (
-		<span className={styles.fieldTypeCardIcon}>
-			<FontAwesomeIcon icon={icon} />
-		</span>
-	);
-};
-
-const FormField = (props) => {
-	const { id, handleDelete, showWarnings, fieldIndex, onReplaceField } = props;
-	const field = useField(id);
-	const stepErrors = useSelector(selectStepErrors("fields"));
-	const hasError = showWarnings && stepErrors && stepErrors[id];
-
-	// The Field component now handles its own styling, so we just render it directly
-	// Error states are passed through via props
-	return (
-		<Field
-			{...field}
-			fieldIndex={fieldIndex}
-			handleDelete={handleDelete}
-			onReplaceField={onReplaceField}
-			stepErrors={stepErrors}
-			showWarnings={showWarnings}
-		/>
-	);
-};
-
-/**
- * Custom hook for managing individual field state and operations
- * Provides convenient methods to update field properties with Redux dispatch
- *
- * @param {string} id - Unique identifier of field to manage
- * @returns {Object} Field object with setter methods for field properties
- * @returns {Object} returns.field - Current field state from Redux store
- * @returns {Function} returns.setLabel - Update field label
- * @returns {Function} returns.toggleIsRequired - Toggle field required status
- * @returns {Function} returns.setPlaceholder - Update field placeholder text
- * @returns {Function} returns.setUrl - Update field URL
- * @returns {Function} returns.setHelpText - Update field help text
- * @returns {Function} returns.setAllowCaption - Update caption allowance setting
- * @returns {Function} returns.toggleAllowCaption - Toggle caption allowance setting
- * @returns {Function} returns.setUseAsSummary - Update use as summary setting for description fields
- *
- * @example
- * const field = useField('field-123');
- * field.setLabel('New Label');
- * field.toggleIsRequired();
- */
-const useField = (id) => {
-	const field = useSelector(selectFormField(id));
-	const dispatch = useDispatch();
-	const { values } = field;
-
-	function setPlaceholder(value) {
-		const updatedField = { values: { ...values, placeholder: value } };
-		dispatch(updateFieldValuesById(id, updatedField));
-	}
-
-	function setLabel(value) {
-		const updatedField = { values: { ...values, label: value } };
-		dispatch(updateFieldValuesById(id, updatedField));
-	}
-
-	function toggleIsRequired() {
-		const updatedField = {
-			values: { ...values, isRequired: !values.isRequired },
-		};
-		dispatch(updateFieldValuesById(id, updatedField));
-	}
-
-	function setUrl(value) {
-		const updatedField = { values: { ...values, url: value } };
-		dispatch(updateFieldValuesById(id, updatedField));
-	}
-
-	function setHelpText(value) {
-		const updatedField = { values: { ...values, helpText: value } };
-		dispatch(updateFieldValuesById(id, updatedField));
-	}
-
-	function setAllowCaption(value) {
-		const updatedField = { values: { ...values, allowCaption: value } };
-
-		dispatch(updateFieldValuesById(id, updatedField));
-	}
-
-	function toggleAllowCaption() {
-		const updatedField = {
-			values: { ...values, allowCaption: !values.allowCaption },
-		};
-		dispatch(updateFieldValuesById(id, updatedField));
-	}
-
-	function setUseAsSummary(value) {
-		if (value) {
-			dispatch(setSummaryField(id));
-		} else {
-			const updatedField = { values: { ...values, useAsSummary: false } };
-			dispatch(updateFieldValuesById(id, updatedField));
-		}
-	}
-
-	return {
-		...field,
-		setLabel,
-		toggleIsRequired,
-		setPlaceholder,
-		setUrl,
-		setHelpText,
-		setAllowCaption,
-		toggleAllowCaption,
-		setUseAsSummary,
-	};
-};