@plusscommunities/pluss-feature-builder-web-d 1.0.2-beta.0

package/src/screens/FormFieldsStep.jsx

@@ -0,0 +1,689 @@
+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 fieldStyles from "../components/Fields.module.css";
+import { Field } from "../components/Fields.jsx";
+import { iconImports } from "../components/iconImports";
+import {
+	Text,
+	LoadingState,
+	SkeletonLoader,
+	DropdownInput,
+	Button,
+	ErrorBoundary,
+	Popup,
+	CenteredContainer,
+} 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,
+	selectCurrentStep,
+	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",
+		},
+	];
+
+	// Use custom hook to handle definition loading
+	const { definition, definitionIsLoading, reloadDefinition } =
+		useFeatureDefinitionLoader();
+
+	// Get form state for display name
+	const formDisplayName = useSelector(selectFormDisplayName);
+
+	// Get wizard state
+	const isCreateMode = useSelector(selectIsCreateMode);
+	const isEditMode = useSelector(selectIsEditMode);
+
+	// Get validation state
+	const isStepValid = useSelector(selectIsStepValid("fields"));
+	const stepErrors = useSelector(selectStepErrors("fields"));
+	const showWarnings = !isStepValid && Object.keys(stepErrors).length > 0;
+
+	// Get submission state
+	const isSubmitting = useSelector(selectFormIsSubmitting);
+	const submitError = useSelector(selectFormSubmitError);
+	const submitSuccess = useSelector(selectFormSubmitSuccess);
+
+	// 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));
+	};
+
+	// Note: Removed automatic redirect after successful save in edit mode
+	// User should stay on the current step until they manually navigate
+
+	// Handle successful submission with optimistic update and redirect
+	React.useEffect(() => {
+		if (submitSuccess && !isSubmitting) {
+			if (isEditMode) {
+				addToast("success", "Changes saved");
+				dispatch(clearFormSubmissionState());
+			} else {
+				// In create mode, show success toast and redirect immediately
+				addToast("success", "Feature created successfully");
+
+				// Clear submission state and redirect to overview step
+				dispatch(clearFormSubmissionState());
+				setTimeout(() => {
+					history.push(values.routeFormOverviewStep);
+				}, 1000); // Brief delay to show toast
+			}
+		}
+	}, [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]);
+
+	// Scroll to top when validation errors appear
+	useEffect(() => {
+		if (showWarnings) {
+			// Scroll to top of form to show validation errors
+			window.scrollTo({ top: 0, behavior: "smooth" });
+		}
+	}, [showWarnings]);
+
+	// Error boundary handlers
+	const handleRefresh = () => {
+		// Refresh current step data
+		dispatch(validateAndUpdateStep("fields"));
+	};
+
+	const handleBack = () => {
+		// Go to overview step
+		history.push(values.routeFormOverviewStep);
+	};
+
+	useEffect(() => {
+		// Set current step when component mounts
+		dispatch(setCurrentStepAndSave("fields"));
+	}, [dispatch]);
+
+	// Add effect to handle definition loading and validation in edit mode
+	// 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("fields"));
+				}, 100);
+			}
+		}
+	}, [definition, definitionIsLoading, isFormInitial, isEditMode, dispatch]);
+
+	useEffect(() => {
+		// In edit mode, trigger validation when definition is available
+		// Note: The new effect above handles the 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("fields"));
+			}, 100);
+		}
+	}, [definition, definitionIsLoading, isEditMode, isFormInitial, dispatch]);
+
+	function handleAddField(fieldType) {
+		dispatch(addField(fieldType));
+		setShowFieldSelector(false); // Close popup after adding field
+	}
+
+	function handleOpenFieldSelector() {
+		setReplacingFieldIndex(null); // Reset to add mode
+		setShowFieldSelector(true);
+	}
+
+	function handleCloseFieldSelector() {
+		setReplacingFieldIndex(null); // Reset replacement state
+		setShowFieldSelector(false);
+	}
+
+	function handleDeleteField(fieldId) {
+		dispatch(deleteField(fieldId));
+	}
+
+	function handleReplaceField(fieldIndex) {
+		// Store the field index to replace and open the field selector
+		setReplacingFieldIndex(fieldIndex);
+		setShowFieldSelector(true);
+	}
+
+	function handleAddReplacementField(fieldType) {
+		const fieldIndex = replacingFieldIndex;
+		if (fieldIndex !== null) {
+			// Delete the current field at this index
+			const currentField = allFields[fieldIndex];
+			if (currentField && !currentField.isMandatory) {
+				dispatch(deleteField(currentField.id));
+			}
+
+			// Add the new field
+			dispatch(addField(fieldType));
+
+			// Reset replacement state
+			setReplacingFieldIndex(null);
+			setShowFieldSelector(false);
+		}
+	}
+
+	function handleNext() {
+		// Validate before proceeding
+		const validationResult = dispatch(validateAndUpdateStep("fields"));
+
+		// If validation passes, navigate to next step
+		if (validationResult?.isValid) {
+			// Clear form submission state when changing steps
+			dispatch(clearFormSubmissionState());
+
+			if (isCreateMode) {
+				history.push(values.routeFormLayoutStep);
+			} else {
+				// In edit mode, navigate directly
+				history.push(values.routeFormLayoutStep);
+			}
+		}
+		// If validation fails, scroll to top to show error summary
+		else {
+			// Scroll to top of form to show validation errors
+			window.scrollTo({ top: 0, behavior: "smooth" });
+		}
+	}
+
+	function handlePrevious() {
+		// Clear form submission state when changing steps
+		dispatch(clearFormSubmissionState());
+
+		if (isCreateMode) {
+			history.push(values.routeFormOverviewStep);
+		} else {
+			// In edit mode, go back to overview screen
+			history.push(values.routeFormOverviewStep);
+		}
+	}
+
+	function handleSaveStep() {
+		// Validate before saving in edit mode
+		const validationResult = dispatch(validateAndUpdateStep("fields"));
+
+		// If validation passes, save the entire form
+		if (validationResult?.isValid) {
+			dispatch(submitForm());
+		}
+		// If validation fails, scroll to top to show error summary
+		else {
+			// Scroll to top of form to show validation errors
+			window.scrollTo({ top: 0, behavior: "smooth" });
+		}
+	}
+
+	// Get all fields in unified list (base + custom)
+	const allFields = fields || [];
+
+	// Create sorted copy for rendering
+	const sortedFields = allFields.slice().sort((a, b) => a.order - b.order);
+
+	// Filter description fields for summary demo
+	const descriptionFields = allFields.filter(
+		(field) => field.type === "description",
+	);
+
+	// 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) {
+		// When setting a field as summary, use the new action to ensure only one field is selected
+		if (value) {
+			dispatch(setSummaryField(id));
+		} else {
+			// When unsetting, use regular update to unset this specific field
+			const updatedField = { values: { ...values, useAsSummary: false } };
+			dispatch(updateFieldValuesById(id, updatedField));
+		}
+	}
+
+	return {
+		...field,
+		setLabel,
+		toggleIsRequired,
+		setPlaceholder,
+		setUrl,
+		setHelpText,
+		setAllowCaption,
+		toggleAllowCaption,
+		setUseAsSummary,
+	};
+};