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

package/src/screens/FormLayoutStep.jsx

@@ -0,0 +1,445 @@
+import React, { useEffect, useState } 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,
+  SkeletonLoader,
+  IconLoader,
+  ErrorBoundary,
+  CenteredContainer,
+  FeatureBuilderSuccessPopup,
+} from "../components";
+import ToastContainer from "../components/ToastContainer.jsx";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  setLayoutType,
+  setGridLayoutIcon,
+  submitForm,
+  clearFormSubmissionState,
+  setDisplayName,
+  setInitialValues,
+} from "../actions/formActions";
+import {
+  selectFormLayout,
+  selectFormIcon,
+  selectIsCreateMode,
+  selectIsEditMode,
+  selectIsStepValid,
+  selectStepErrors,
+  selectCurrentStep,
+  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";
+  // Get wizard state
+  const isCreateMode = useSelector(selectIsCreateMode);
+  const isEditMode = useSelector(selectIsEditMode);
+
+  // Use custom hook to handle definition loading
+  const { definition, definitionIsLoading, reloadDefinition } =
+    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);