@erpsquad/common 1.8.5 → 1.8.7

package/dist/views/form-builder/custom-form/index.esm.js

@@ -0,0 +1,1151 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useCallback, createElement, useMemo, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useForm, useFieldArray } from "react-hook-form";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { useTranslation } from "react-i18next";
+import { enqueueSnackbar } from "../../../node_modules/notistack/notistack.esm/index.esm.js";
+import DynamicSectionHOC from "../../../components/form-control/form-builder/form-builder-element/section/index.esm.js";
+import DynamicButton from "../../../components/form-control/form-builder/form-builder-element/button/index.esm.js";
+import TabBar from "../../../components/tabs/tabs/index.esm.js";
+import { images } from "../../../images/index.esm.js";
+import FormHeader from "../../../components/form-header/form-header/index.esm.js";
+import { Typography } from "../../../components/typography/typography/index.esm.js";
+import formBuilderConversion from "../../../utils/form-builder-conversion/index.esm.js";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks/index.esm.js";
+import { formatLabel } from "../../../utils/format-text/index.esm.js";
+import Toast from "../../../components/toast/toast/index.esm.js";
+import Radio from "../../../components/radio/radio/index.esm.js";
+import { SECTION_TYPES } from "../../../utils/constant/index.esm.js";
+import ErpLoader from "../../../components/loaders/erp-loader/index.esm.js";
+import { getErrorMessage } from "../../../utils/common/index.esm.js";
+import FormParser from "../../../components/form-control/form-parser/form-parser/index.esm.js";
+import { patchFormDataById, getFormDataById, getFieldsByFormId } from "../redux/actionCreator/index.esm.js";
+import { element } from "../field_properties/index.esm.js";
+import { TextEditForm } from "../element-edit-forms/text/index.esm.js";
+import { SelectEditForm } from "../element-edit-forms/select/index.esm.js";
+import SectionEditForm from "../element-edit-forms/section/index.esm.js";
+import { CheckboxEditForm } from "../element-edit-forms/checkbox/index.esm.js";
+import TableEditForm from "../element-edit-forms/table-form/index.esm.js";
+import FormFields from "../form-fields/index.esm.js";
+import { generateModulePath, useFormDataEffect } from "../utils/common/index.esm.js";
+/* empty css                            */
+import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import Grid from "../../../node_modules/@mui/material/Grid/Grid/index.esm.js";
+import RadioGroup from "../../../node_modules/@mui/material/RadioGroup/RadioGroup/index.esm.js";
+import FormControlLabel from "../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";
+import Add from "../../../node_modules/@mui/icons-material/esm/Add/index.esm.js";
+import { EyeOff } from "../../../components/icons/eye-off/index.esm.js";
+import { Eye } from "../../../components/icons/eye/index.esm.js";
+const DEFAULT_GRID_COLUMNS = 12;
+const DEFAULT_COLUMN_WIDTH = 2;
+const DEFAULT_TAB_TITLE = "data";
+const isValidNumber = (value) => !isNaN(Number(value)) && isFinite(Number(value));
+const deepClone = (obj) => JSON.parse(JSON.stringify(obj));
+const generateUniqueId = (separator = "") => {
+  return { uniqueStringId: `${Date.now()}${separator}${Math.random().toString(36).substr(2, 9)}` };
+};
+function CustomForm() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const rowData = location.state ?? [];
+  const formBuilder = useAppSelector((state) => state.formBuilder);
+  const { control } = useForm({
+    reValidateMode: "onBlur"
+  });
+  const {
+    fields: members,
+    append,
+    remove,
+    update,
+    move,
+    insert
+  } = useFieldArray({
+    control,
+    name: "members"
+  });
+  const {
+    fields: section,
+    append: appendSection,
+    remove: removeSection,
+    update: updateSection
+  } = useFieldArray({
+    control,
+    name: "section"
+  });
+  const [selectedHoc, setSelectedHoc] = useState("");
+  const [activeSection, setActiveSection] = useState();
+  const [activeMember, setActiveMember] = useState();
+  const [formJSON, setFormJSON] = useState([]);
+  const [elementJSON, setElementJSON] = useState(null);
+  const [positionEditedElement, setPositionEditedElement] = useState();
+  const [sectionFormJSON, setSectionFormJSON] = useState([]);
+  const [sectionJSON, setSectionJSON] = useState({});
+  const [sectionPositionEditedElement, setSectionPositionEditedElement] = useState();
+  const [removeSectionActionPerformed, setRemoveSectionActionPerformed] = useState(false);
+  const [removeSectionMembersPerformed, setRemoveSectionMembersPerformed] = useState(false);
+  const [removeSectionPosition, setRemoveSectionPosition] = useState();
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [tabsData, setTabsData] = useState([]);
+  const [activeTabValue, setActiveTabValue] = useState(0);
+  const [elementSwap, setElementSwap] = useState(false);
+  const [modifyAccordion, setModifyAccordion] = useState(false);
+  const [toast, setToast] = useState(null);
+  const [previewFieldsData, setPreviewFields] = useState(null);
+  const [_, setFormParserMethods] = useState();
+  let elementPerColumn;
+  const currentModule = location.pathname.split("/")[2];
+  const path = generateModulePath(currentModule);
+  useFormDataEffect(
+    formBuilder,
+    tabsData,
+    activeTabValue,
+    {
+      removeSection,
+      remove,
+      setTabsData,
+      append,
+      appendSection
+    }
+  );
+  const pickPropertyEditForm = useCallback((type) => {
+    try {
+      if (!type || typeof type !== "string") {
+        console.warn("Invalid field type provided to pickPropertyEditForm");
+        return /* @__PURE__ */ jsx("div", { className: "text-gray-500 p-4", children: "Select a field to edit" });
+      }
+      const normalizedType = type.toLowerCase().trim();
+      const formGroups = {
+        text: [
+          "text",
+          "number",
+          "email",
+          "phone",
+          "date",
+          "time",
+          "url",
+          "currency",
+          "file",
+          "geolocation",
+          "image",
+          "relation",
+          "info",
+          "tagsinput"
+        ],
+        select: ["select"],
+        section: ["section"],
+        checkbox: ["checkbox", "togglebutton", "radiobutton"],
+        table: ["table"]
+      };
+      const commonTextProps = {
+        element: elementJSON,
+        handlePropertyValueUpdate,
+        handleWidthChange,
+        handleColumnSelect,
+        fields: (formBuilder == null ? void 0 : formBuilder.fields) || []
+      };
+      const commonSelectProps = {
+        element: elementJSON,
+        handlePropertyValueUpdate,
+        handleSelectOptionValueUpdate,
+        handleWidthChange,
+        handleColumnSelect
+      };
+      if (formGroups.text.includes(normalizedType)) {
+        return /* @__PURE__ */ createElement(
+          TextEditForm,
+          {
+            ...commonTextProps,
+            key: `text-form-${(elementJSON == null ? void 0 : elementJSON.id) || "default"}`
+          }
+        );
+      }
+      if (formGroups.select.includes(normalizedType)) {
+        return /* @__PURE__ */ createElement(
+          SelectEditForm,
+          {
+            ...commonSelectProps,
+            key: `select-form-${(elementJSON == null ? void 0 : elementJSON.id) || "default"}`
+          }
+        );
+      }
+      if (formGroups.section.includes(normalizedType)) {
+        return /* @__PURE__ */ jsx(
+          SectionEditForm,
+          {
+            element: sectionJSON,
+            handlePropertyValueUpdate: handleSectionPropertyValueUpdate
+          },
+          `section-form-${(sectionJSON == null ? void 0 : sectionJSON.id) || "default"}`
+        );
+      }
+      if (formGroups.checkbox.includes(normalizedType)) {
+        return /* @__PURE__ */ createElement(
+          CheckboxEditForm,
+          {
+            ...commonSelectProps,
+            key: `checkbox-form-${(elementJSON == null ? void 0 : elementJSON.id) || "default"}`
+          }
+        );
+      }
+      if (formGroups.table.includes(normalizedType)) {
+        return /* @__PURE__ */ jsx(
+          TableEditForm,
+          {
+            element: elementJSON,
+            handlePropertyValueUpdate,
+            handleColumnsUpdate,
+            fields: (formBuilder == null ? void 0 : formBuilder.fields) || []
+          },
+          `table-form-${(elementJSON == null ? void 0 : elementJSON.id) || "default"}`
+        );
+      }
+      console.warn(`Unknown field type: ${type}`);
+      return /* @__PURE__ */ jsxs("div", { className: "text-gray-500 p-4 border border-gray-200 rounded", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Unknown Field Type" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm mt-1", children: [
+          'Field type "',
+          type,
+          '" is not supported. Please select a valid field to edit.'
+        ] })
+      ] });
+    } catch (error) {
+      console.error("Error in pickPropertyEditForm:", error);
+      return /* @__PURE__ */ jsxs("div", { className: "text-red-500 p-4 border border-red-200 rounded bg-red-50", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Error Loading Form" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "There was an error loading the property edit form. Please try again." })
+      ] });
+    }
+  }, [elementJSON, sectionJSON, formBuilder]);
+  const addNewSection = useCallback(() => {
+    var _a;
+    try {
+      if (!((_a = element) == null ? void 0 : _a.section)) {
+        console.error("Element section template is not available");
+        return;
+      }
+      const { uniqueStringId: id } = generateUniqueId("-");
+      const newSection = {
+        ...deepClone(element.section),
+        id
+      };
+      if (newSection.switcher_forms) {
+        newSection.switcher_forms = newSection.switcher_forms.map((form) => ({
+          ...form,
+          id: generateUniqueId("-").uniqueStringId
+        }));
+      }
+      const newSectionIndex = section.length;
+      appendSection(newSection);
+      setActiveSection(newSectionIndex);
+      setSelectedHoc("section");
+      const sectionData = {
+        field_type: newSection.field_type,
+        section_type: newSection.section_type,
+        switcher_forms: newSection.switcher_forms,
+        form_switcher_label: newSection.form_switcher_label,
+        form_switcher_name: newSection.form_switcher_name,
+        label: newSection.label,
+        is_accordion: newSection.is_accordion,
+        id: newSection.id ?? newSectionIndex
+      };
+      setSectionJSON(sectionData);
+      setSectionPositionEditedElement(newSectionIndex);
+      pickPropertyEditForm(newSection.field_type);
+    } catch (error) {
+      console.error("Error adding new section:", error);
+    }
+  }, [element, section, appendSection, setActiveSection, setSelectedHoc, setSectionJSON, setSectionPositionEditedElement, pickPropertyEditForm]);
+  const handleAddTab = useCallback(() => {
+    try {
+      const formWithMembers2 = deepClone(sectionFormJSON);
+      formWithMembers2.forEach((section2, sectionIndex) => {
+        section2.members = members.filter(
+          (member) => (member == null ? void 0 : member.section_order) === sectionIndex
+        );
+      });
+      const hasSystemMembers = formWithMembers2.some(
+        (section2) => {
+          var _a;
+          return (_a = section2.members) == null ? void 0 : _a.some((member) => Boolean(member == null ? void 0 : member.is_system_field));
+        }
+      );
+      const shouldRemoveTab = !(tabsData == null ? void 0 : tabsData.length) && hasSystemMembers;
+      const newTab = {
+        tab_order: tabsData.length + 1,
+        title: DEFAULT_TAB_TITLE,
+        remove_tab: shouldRemoveTab,
+        data: (tabsData == null ? void 0 : tabsData.length) ? [] : formWithMembers2
+      };
+      setTabsData((prevTabs) => [...prevTabs, newTab]);
+    } catch (error) {
+      console.error("Error adding new tab:", error);
+    }
+  }, [sectionFormJSON, members, tabsData, setTabsData]);
+  const handleEditTabTitle = useCallback((tabId, newTitle) => {
+    try {
+      if (!isValidNumber(tabId) || !(newTitle == null ? void 0 : newTitle.trim())) {
+        console.error("Invalid tab ID or title provided");
+        return;
+      }
+      setTabsData(
+        (prevTabs) => prevTabs.map(
+          (tab) => tab.tab_order === tabId ? { ...tab, title: newTitle.trim() } : tab
+        )
+      );
+    } catch (error) {
+      console.error("Error editing tab title:", error);
+    }
+  }, [setTabsData]);
+  const handleRemoveTab = useCallback((id) => {
+    try {
+      if (!isValidNumber(id)) {
+        console.error("Invalid tab ID provided");
+        return;
+      }
+      const filteredTabs = tabsData.filter((tab) => tab.tab_order !== id);
+      const reorderedTabs = filteredTabs.map((tab) => ({
+        ...tab,
+        tab_order: tab.tab_order > id ? tab.tab_order - 1 : tab.tab_order
+      }));
+      setTabsData(reorderedTabs);
+      if (activeTabValue == id) {
+        setActiveTabValue((reorderedTabs == null ? void 0 : reorderedTabs.length) - 1);
+      }
+      if (reorderedTabs.length > 0) {
+        const activeTab = reorderedTabs.find(
+          (tab) => tab.tab_order === (activeTabValue ?? 0) + 1
+        );
+        if (activeTab == null ? void 0 : activeTab.data) {
+          const sections = activeTab.data.map(
+            ({ field_type, label, is_accordion, id: id2, remove_section }) => ({
+              field_type,
+              label,
+              is_accordion,
+              id: id2,
+              remove_section
+            })
+          );
+          const membersList = activeTab.data.flatMap(
+            (section2) => {
+              var _a;
+              return ((_a = section2.members) == null ? void 0 : _a.map((member) => ({ ...member }))) || [];
+            }
+          );
+          remove();
+          removeSection();
+          membersList.forEach((member) => append(member));
+          sections.forEach((section2) => appendSection(section2));
+        }
+      } else {
+        remove();
+        removeSection();
+      }
+    } catch (error) {
+      console.error("Error removing tab:", error);
+    }
+  }, [tabsData, activeTabValue, setTabsData, remove, removeSection, append, appendSection]);
+  const handleElementSelection = useCallback((e) => {
+    try {
+      const target = e.target;
+      const elementPositionIndex = target.dataset.position;
+      if (!elementPositionIndex || !isValidNumber(elementPositionIndex)) {
+        console.error("Invalid element position index");
+        return;
+      }
+      const positionIndex = Number(elementPositionIndex);
+      if (positionIndex < 0 || positionIndex >= formJSON.length) {
+        console.error("Element position index out of bounds");
+        return;
+      }
+      setActiveMember(positionIndex);
+      const elementDetails = deepClone(formJSON[positionIndex]);
+      setPositionEditedElement(positionIndex);
+      setElementJSON(elementDetails);
+      setSelectedHoc("element");
+    } catch (error) {
+      console.error("Error selecting element:", error);
+    }
+  }, [formJSON, setActiveMember, setPositionEditedElement, setElementJSON, setSelectedHoc]);
+  const handleSectionSelection = useCallback((e) => {
+    try {
+      const target = e.target;
+      const sectionPositionIndex = target.dataset.position;
+      if (!sectionPositionIndex || !isValidNumber(sectionPositionIndex)) {
+        console.error("Invalid section position index");
+        return;
+      }
+      const positionIndex = Number(sectionPositionIndex);
+      if (positionIndex < 0 || positionIndex >= sectionFormJSON.length) {
+        console.error("Section position index out of bounds");
+        return;
+      }
+      setActiveSection(positionIndex);
+      const sectionDetails = deepClone(sectionFormJSON[positionIndex]);
+      setSectionPositionEditedElement(positionIndex);
+      setSectionJSON(sectionDetails);
+      setSelectedHoc("section");
+    } catch (error) {
+      console.error("Error selecting section:", error);
+    }
+  }, [sectionFormJSON, setActiveSection, setSectionPositionEditedElement, setSectionJSON, setSelectedHoc]);
+  const handleAddMember = useCallback((e, otherProperties) => {
+    var _a, _b;
+    try {
+      const target = e.currentTarget;
+      const sectionPositionIndex = (_a = target == null ? void 0 : target.dataset) == null ? void 0 : _a.position;
+      if (sectionPositionIndex === void 0 || !isValidNumber(sectionPositionIndex)) {
+        console.error("Invalid section position index for adding member");
+        return;
+      }
+      const positionIndex = Number(sectionPositionIndex);
+      if (positionIndex < 0) {
+        console.error("Section position index cannot be negative");
+        return;
+      }
+      if (!((_b = element) == null ? void 0 : _b.text)) {
+        console.error("Element text template is not available");
+        return;
+      }
+      const newMember = {
+        ...deepClone(element.text),
+        ...otherProperties,
+        section_order: positionIndex,
+        type: "custom",
+        is_new: true,
+        custom_width: Math.floor(DEFAULT_GRID_COLUMNS / DEFAULT_COLUMN_WIDTH),
+        is_fullwidth: false,
+        is_system_field: Boolean(otherProperties == null ? void 0 : otherProperties.is_system_field),
+        id: generateUniqueId().uniqueStringId
+      };
+      setActiveSection(positionIndex);
+      append(newMember);
+      const elementPositionIndex = members.length;
+      setActiveMember(elementPositionIndex);
+      setSelectedHoc("element");
+      setPositionEditedElement(elementPositionIndex);
+      setElementJSON(newMember);
+      pickPropertyEditForm(newMember.field_type);
+    } catch (error) {
+      console.error("Error adding new member:", error);
+    }
+  }, [element, members, setActiveSection, append, setActiveMember, setSelectedHoc, setPositionEditedElement, setElementJSON, pickPropertyEditForm]);
+  const handleSectionPropertyValueUpdate = useCallback((e, overrideValue) => {
+    try {
+      const { name, type, checked, value } = e.target;
+      if (!name) {
+        console.error("Property name is required for update");
+        return;
+      }
+      const updatedValue = overrideValue !== void 0 ? overrideValue : type === "checkbox" ? checked : value;
+      if (sectionJSON[name] !== updatedValue) {
+        setSectionJSON((prev) => ({ ...prev, [name]: updatedValue }));
+      }
+    } catch (error) {
+      console.error("Error updating section property:", error);
+    }
+  }, [sectionJSON, setSectionJSON]);
+  const handleWidthChange = useCallback((newCustomWidth) => {
+    try {
+      if (!isValidNumber(newCustomWidth) || newCustomWidth < 1 || newCustomWidth > DEFAULT_GRID_COLUMNS) {
+        console.error("Invalid width value provided");
+        return;
+      }
+      setElementJSON((prevData) => ({
+        ...prevData,
+        custom_width: newCustomWidth
+      }));
+    } catch (error) {
+      console.error("Error updating width:", error);
+    }
+  }, [setElementJSON]);
+  const handleColumnSelect = useCallback((e) => {
+    try {
+      const columnValue = Number(e.target.value);
+      if (!isValidNumber(columnValue) || columnValue <= 0) {
+        console.error("Invalid column value provided");
+        return;
+      }
+      const elementPerColumn2 = Math.floor(DEFAULT_GRID_COLUMNS / columnValue);
+      if (elementPerColumn2 <= 0) {
+        console.error("Calculated element per column is invalid");
+        return;
+      }
+      members.forEach((field, index) => {
+        update(index, { ...field, custom_width: elementPerColumn2 });
+      });
+    } catch (error) {
+      console.error("Error updating column selection:", error);
+    }
+  }, [members, update]);
+  const handlePropertyValueUpdate = useCallback((e, numberValue, val, fieldType) => {
+    var _a;
+    try {
+      const getValue = () => {
+        var _a2;
+        if (fieldType) return fieldType;
+        if (val !== void 0) return val;
+        if (numberValue !== void 0) return numberValue;
+        return (_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value;
+      };
+      const value = getValue();
+      const elementJSONCopy = deepClone(elementJSON);
+      if ((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.name) {
+        elementJSONCopy[e.target.name] = e.target.type === "checkbox" ? e.target.checked : value;
+      }
+      if (fieldType) {
+        const { uniqueStringId: uniqueId } = generateUniqueId();
+        const copyOfUpdatedElement = {
+          ...element[fieldType],
+          section_form_id: elementJSONCopy == null ? void 0 : elementJSONCopy.section_form_id,
+          is_form_switcher_section: elementJSONCopy == null ? void 0 : elementJSONCopy.is_form_switcher_section,
+          section_order: elementJSONCopy.section_order,
+          id: uniqueId,
+          type: "custom",
+          is_system_field: Boolean(elementJSONCopy == null ? void 0 : elementJSONCopy.is_system_field),
+          is_new: true,
+          column_width: (elementJSONCopy == null ? void 0 : elementJSONCopy.column_width) || 6,
+          custom_width: (elementJSONCopy == null ? void 0 : elementJSONCopy.custom_width) || 6
+        };
+        setElementJSON(copyOfUpdatedElement);
+      } else if (JSON.stringify(elementJSON) !== JSON.stringify(elementJSONCopy)) {
+        setElementJSON({ ...elementJSON, ...elementJSONCopy });
+      }
+    } catch (error) {
+      console.error("Error updating property value:", error);
+    }
+  }, [elementJSON, element, setElementJSON]);
+  const handleSelectOptionValueUpdate = useCallback((options) => {
+    try {
+      if (!Array.isArray(options)) {
+        console.error("Options must be an array");
+        return;
+      }
+      const elementJSONCopy = deepClone(elementJSON);
+      elementJSONCopy.options = [...options];
+      const { uniqueStringId: uniqueId } = generateUniqueId("-");
+      if (JSON.stringify(elementJSON.options) !== JSON.stringify(options)) {
+        setElementJSON({ ...elementJSON, ...elementJSONCopy, id: uniqueId });
+      }
+    } catch (error) {
+      console.error("Error updating select options:", error);
+    }
+  }, [elementJSON, setElementJSON]);
+  const handleColumnsUpdate = useCallback((columns) => {
+    try {
+      if (!Array.isArray(columns)) {
+        console.error("Columns must be an array");
+        return;
+      }
+      const elementJSONCopy = deepClone(elementJSON);
+      elementJSONCopy.table_columns = [...columns];
+      const { uniqueStringId: uniqueId } = generateUniqueId("-");
+      if (JSON.stringify(elementJSON.table_columns) !== JSON.stringify(columns)) {
+        setElementJSON({ ...elementJSON, ...elementJSONCopy, id: uniqueId });
+      }
+    } catch (error) {
+      console.error("Error updating table columns:", error);
+    }
+  }, [elementJSON, setElementJSON]);
+  const handleRemoveSection = useCallback((sectionIndex) => {
+    try {
+      if (!isValidNumber(sectionIndex) || sectionIndex < 0 || sectionIndex >= section.length) {
+        console.error("Invalid section index for removal");
+        return;
+      }
+      setRemoveSectionPosition(sectionIndex);
+      removeSection(sectionIndex);
+      const membersToRemove = [];
+      members.forEach((member, index) => {
+        if ((member == null ? void 0 : member.section_order) === sectionIndex) {
+          membersToRemove.push(index);
+        }
+      });
+      membersToRemove.reverse().forEach((memberIndex) => {
+        remove(memberIndex);
+      });
+      setRemoveSectionActionPerformed(true);
+    } catch (error) {
+      console.error("Error removing section:", error);
+    }
+  }, [section, members, setRemoveSectionPosition, removeSection, remove, setRemoveSectionActionPerformed]);
+  const handleMakeAccordion = useCallback((sectionIndex) => {
+    try {
+      if (!isValidNumber(sectionIndex) || sectionIndex < 0 || sectionIndex >= section.length) {
+        console.error("Invalid section index for accordion conversion");
+        return;
+      }
+      setModifyAccordion(true);
+      setSectionPositionEditedElement(sectionIndex);
+      setActiveSection(sectionIndex);
+      const copyOfSection = {
+        ...deepClone(section[sectionIndex]),
+        is_accordion: true
+      };
+      updateSection(sectionIndex, copyOfSection);
+      setSelectedHoc("section");
+      setSectionJSON(copyOfSection);
+      pickPropertyEditForm(copyOfSection.field_type);
+    } catch (error) {
+      console.error("Error making section accordion:", error);
+    }
+  }, [section, setModifyAccordion, setSectionPositionEditedElement, setActiveSection, updateSection, setSelectedHoc, setSectionJSON, pickPropertyEditForm]);
+  const handleTabData = useCallback(() => {
+    try {
+      const formWithMembers2 = deepClone(sectionFormJSON);
+      formWithMembers2.forEach((section2, sectionIndex) => {
+        section2.members = members.filter(
+          (member) => (member == null ? void 0 : member.section_order) === sectionIndex
+        );
+      });
+      const hasSystemMembers = formWithMembers2.some(
+        (section2) => {
+          var _a;
+          return (_a = section2.members) == null ? void 0 : _a.some((member) => Boolean(member == null ? void 0 : member.is_system_field));
+        }
+      );
+      const activeTabIndex = Number(activeTabValue);
+      if (isValidNumber(activeTabIndex) && activeTabIndex >= 0 && activeTabIndex < tabsData.length) {
+        const updatedTabsData = [...tabsData];
+        updatedTabsData[activeTabIndex] = {
+          ...updatedTabsData[activeTabIndex],
+          data: formWithMembers2,
+          remove_tab: hasSystemMembers
+        };
+        setTabsData(updatedTabsData);
+        remove();
+        removeSection();
+        setActiveMember(void 0);
+        setSelectedHoc("");
+        setActiveSection(void 0);
+      }
+    } catch (error) {
+      console.error("Error updating tab data:", error);
+    }
+  }, [sectionFormJSON, members, activeTabValue, tabsData, setTabsData]);
+  const formWithMembers = useMemo(() => {
+    if (!sectionFormJSON || !members) return null;
+    return sectionFormJSON.map((section2, sectionIndex) => ({
+      ...section2,
+      members: members.filter(
+        (member) => (member == null ? void 0 : member.section_order) === sectionIndex
+      )
+    }));
+  }, [sectionFormJSON, members]);
+  const previewState = useMemo(() => {
+    if (!formWithMembers) return null;
+    return (tabsData == null ? void 0 : tabsData.length) ? { tab: tabsData } : { section: formWithMembers };
+  }, [tabsData, formWithMembers]);
+  const previewFields = useMemo(() => {
+    if (!previewState) return null;
+    return formBuilderConversion(previewState);
+  }, [previewState]);
+  const showPreview = useCallback(() => {
+    if (previewFields) {
+      setPreviewFields(previewFields);
+    }
+  }, [previewFields, setPreviewFields]);
+  const hidePreview = useCallback(() => {
+    setPreviewFields(null);
+  }, []);
+  const handleFormUpdate = useCallback(async () => {
+    var _a;
+    try {
+      if (!sectionFormJSON || !Array.isArray(sectionFormJSON)) {
+        console.warn("Invalid sectionFormJSON provided");
+        return;
+      }
+      if (!members || !Array.isArray(members)) {
+        console.warn("Invalid members array provided");
+        return;
+      }
+      if (!(rowData == null ? void 0 : rowData._id)) {
+        console.warn("Missing rowData._id for form update");
+        return;
+      }
+      let formWithMembers2;
+      try {
+        formWithMembers2 = structuredClone(sectionFormJSON);
+      } catch (cloneError) {
+        formWithMembers2 = JSON.parse(JSON.stringify(sectionFormJSON));
+      }
+      formWithMembers2.forEach((section2, sectionIndex) => {
+        if (!section2 || typeof section2 !== "object") {
+          console.warn(`Invalid section at index ${sectionIndex}`);
+          return;
+        }
+        section2.members = members.filter((member) => {
+          return member && typeof member === "object" && typeof member.section_order === "number" && member.section_order === sectionIndex;
+        });
+      });
+      const hasSystemMembers = formWithMembers2.some(
+        (section2) => {
+          var _a2;
+          return (_a2 = section2.members) == null ? void 0 : _a2.some((member) => Boolean(member == null ? void 0 : member.is_system_field));
+        }
+      );
+      const activeTabIndex = Number(activeTabValue);
+      let updatedTabsData = [...tabsData];
+      if (isValidNumber(activeTabIndex) && activeTabIndex >= 0 && activeTabIndex < tabsData.length) {
+        updatedTabsData = [...tabsData];
+        updatedTabsData[activeTabIndex] = {
+          ...updatedTabsData[activeTabIndex],
+          data: formWithMembers2,
+          remove_tab: hasSystemMembers
+        };
+        setTabsData(updatedTabsData);
+      }
+      const state = (updatedTabsData == null ? void 0 : updatedTabsData.length) > 0 ? { tab: updatedTabsData } : { section: formWithMembers2 };
+      if (typeof formBuilderConversion !== "function") {
+        console.error("formBuilderConversion is not a function");
+        return;
+      }
+      let formBuilderConversionResult;
+      try {
+        formBuilderConversionResult = formBuilderConversion(state);
+      } catch (conversionError) {
+        console.error("Error during form builder conversion:", conversionError);
+        return;
+      }
+      if (!formBuilderConversionResult) {
+        console.warn("Form builder conversion returned empty result");
+        return;
+      }
+      const updatePayload = {
+        gridCol: 2,
+        fields: formBuilderConversionResult
+      };
+      const updateRes = await dispatch(
+        patchFormDataById({
+          id: rowData._id,
+          data: updatePayload
+        })
+      );
+      if (updateRes.meta.requestStatus === "rejected") {
+        const m = getErrorMessage((_a = updateRes == null ? void 0 : updateRes.error) == null ? void 0 : _a.message);
+        enqueueSnackbar(m, { variant: "error" });
+      } else {
+        enqueueSnackbar("Form updated successfully", { variant: "success" });
+        navigate(path);
+      }
+    } catch (error) {
+      const m = (error == null ? void 0 : error.message) || "Something went wrong while updating the form";
+      enqueueSnackbar(m, { variant: "error" });
+    }
+  }, [
+    sectionFormJSON,
+    members,
+    tabsData,
+    rowData == null ? void 0 : rowData._id,
+    elementPerColumn,
+    dispatch,
+    formBuilderConversion
+  ]);
+  const handleDuplicateElement = (index) => {
+    const copyOfMember = { ...members[index], type: "custom" };
+    copyOfMember && insert(index + 1, copyOfMember);
+    setActiveMember(index + 1);
+    setSelectedHoc("element");
+    setPositionEditedElement(index + 1);
+    setElementJSON(copyOfMember);
+    pickPropertyEditForm(copyOfMember.field_type);
+  };
+  const breadCrumbPath = [
+    {
+      link: path,
+      label: "Forms"
+    },
+    {
+      link: "",
+      label: formatLabel(rowData == null ? void 0 : rowData.name)
+    },
+    {
+      link: "",
+      label: "Edit Form"
+    }
+  ];
+  useEffect(() => {
+    if (removeSectionActionPerformed) {
+      members.forEach((member, index) => {
+        if (removeSectionPosition !== void 0 && Boolean(removeSectionPosition == null ? void 0 : removeSectionPosition.toString) && member.section_order > removeSectionPosition) {
+          update(index, { ...member, section_order: member.section_order - 1 });
+        }
+      });
+      setRemoveSectionActionPerformed(false);
+      setRemoveSectionMembersPerformed(true);
+      setRemoveSectionPosition(void 0);
+      setSelectedHoc("");
+    }
+  }, [removeSectionActionPerformed]);
+  useEffect(() => {
+    formBuilder.isSuccess && navigate(path);
+  }, [formBuilder.isSuccess]);
+  useEffect(() => {
+    if (formBuilder.isError) {
+      setToast({
+        type: "alert",
+        message: formBuilder.error
+      });
+    }
+  }, [formBuilder.error, formBuilder.isError]);
+  useEffect(() => {
+    if (typeof positionEditedElement !== "number" || typeof positionEditedElement !== "string") {
+      const index = Number(positionEditedElement);
+      if (formJSON[index]) {
+        const copyOfUpdatedFormJson = JSON.parse(
+          JSON.stringify(formJSON[index])
+        );
+        update(index, { ...copyOfUpdatedFormJson });
+      }
+    }
+  }, [formJSON]);
+  useEffect(() => {
+    const updatedFormJSON = formJSON.map((obj, index) => {
+      if (index === Number(positionEditedElement)) {
+        return { ...elementJSON };
+      } else {
+        return { ...obj };
+      }
+    });
+    setFormJSON(updatedFormJSON);
+  }, [elementJSON]);
+  useEffect(() => {
+    if (members.length !== formJSON.length) {
+      setFormJSON(JSON.parse(JSON.stringify(members)));
+    }
+    if (Boolean(elementSwap) && JSON.stringify(members) !== JSON.stringify(formJSON)) {
+      setFormJSON(JSON.parse(JSON.stringify(members)));
+      setElementSwap(false);
+      const newMember = positionEditedElement && members[positionEditedElement];
+      newMember && setSelectedHoc("element");
+      newMember && setElementJSON(newMember);
+      newMember && pickPropertyEditForm(newMember.field_type);
+    }
+    if (removeSectionMembersPerformed && JSON.stringify(members) !== JSON.stringify(formJSON)) {
+      setFormJSON(JSON.parse(JSON.stringify(members)));
+      setRemoveSectionMembersPerformed(false);
+    }
+  }, [members, elementSwap]);
+  useEffect(() => {
+    if (typeof sectionPositionEditedElement !== "number" || typeof sectionPositionEditedElement !== "string") {
+      const index = Number(sectionPositionEditedElement);
+      if (sectionFormJSON[index]) {
+        const copyOfUpdatedFormJson = JSON.parse(
+          JSON.stringify(sectionFormJSON[index])
+        );
+        updateSection(index, { ...copyOfUpdatedFormJson });
+      }
+    }
+  }, [sectionFormJSON]);
+  useEffect(() => {
+    const updatedFormJSON = sectionFormJSON.map((obj, index) => {
+      if (index === Number(sectionPositionEditedElement)) {
+        return { ...obj, ...sectionJSON };
+      } else {
+        return { ...obj };
+      }
+    });
+    setSectionFormJSON(updatedFormJSON);
+  }, [sectionJSON]);
+  useEffect(() => {
+    if (section.length !== sectionFormJSON.length) {
+      setSectionFormJSON(JSON.parse(JSON.stringify(section)));
+    }
+    if (JSON.stringify(sectionFormJSON) !== JSON.stringify(section) && modifyAccordion) {
+      setSectionFormJSON(JSON.parse(JSON.stringify(section)));
+      setModifyAccordion(false);
+    }
+  }, [section]);
+  useEffect(() => {
+  }, []);
+  const handleFormData = useCallback(async () => {
+    setInitialLoading(true);
+    try {
+      if (rowData == null ? void 0 : rowData._id) {
+        setTabsData([]);
+        await dispatch(getFormDataById(rowData == null ? void 0 : rowData._id));
+        await dispatch(getFieldsByFormId({ id: rowData == null ? void 0 : rowData._id }));
+      }
+    } finally {
+      setInitialLoading(false);
+    }
+  }, [rowData == null ? void 0 : rowData._id]);
+  useEffect(() => {
+    handleFormData();
+  }, [handleFormData]);
+  const DEFAULT_FIELD_TYPE = "text";
+  const HOC_TYPES = {
+    ELEMENT: "element",
+    SECTION: "section"
+  };
+  const hasValidContent = (obj) => {
+    return obj && Object.keys(obj).length > 0;
+  };
+  const EmptyStateMessage = () => /* @__PURE__ */ jsx(Typography, { type: "s5", color: "theme.secondary.800", className: "formSection--Text", children: "Select a field to edit its properties." });
+  const getFieldTypeWithFallback = (json, fallback = DEFAULT_FIELD_TYPE) => {
+    return (json == null ? void 0 : json.field_type) || fallback;
+  };
+  const memoizedForm = useMemo(() => {
+    if (!selectedHoc) {
+      return /* @__PURE__ */ jsx(EmptyStateMessage, {});
+    }
+    if (selectedHoc === HOC_TYPES.ELEMENT) {
+      if (!hasValidContent(members)) {
+        console.warn("Element selected but no members data available");
+        return /* @__PURE__ */ jsx(EmptyStateMessage, {});
+      }
+      const fieldType = getFieldTypeWithFallback(elementJSON);
+      return pickPropertyEditForm(fieldType);
+    }
+    if (selectedHoc === HOC_TYPES.SECTION) {
+      if (!hasValidContent(section)) {
+        console.warn("Section selected but no section data available");
+        return /* @__PURE__ */ jsx(EmptyStateMessage, {});
+      }
+      const fieldType = getFieldTypeWithFallback(sectionJSON);
+      return pickPropertyEditForm(fieldType);
+    }
+    console.warn(`Unknown selectedHoc type: ${selectedHoc}`);
+    return /* @__PURE__ */ jsx(EmptyStateMessage, {});
+  }, [
+    // Core dependencies
+    selectedHoc,
+    // Data dependencies
+    Object.keys(members).length,
+    Object.keys(section).length,
+    // JSON dependencies with deep comparison consideration
+    elementJSON == null ? void 0 : elementJSON.field_type,
+    elementJSON == null ? void 0 : elementJSON.field_properties,
+    sectionJSON == null ? void 0 : sectionJSON.field_type,
+    sectionJSON == null ? void 0 : sectionJSON.field_properties,
+    // Function dependency
+    pickPropertyEditForm
+  ]);
+  return (
+    //   <FullScreenLayout className="formSection--Layout">
+    /* @__PURE__ */ jsx(Box, { position: "relative", children: initialLoading ? /* @__PURE__ */ jsx(ErpLoader, {}) : /* @__PURE__ */ jsxs(DndProvider, { backend: HTML5Backend, children: [
+      /* @__PURE__ */ jsx(FormHeader, { breadCrumbPath, children: /* @__PURE__ */ jsxs("div", { className: "formSection--Buttons", children: [
+        /* @__PURE__ */ jsx(
+          DynamicButton,
+          {
+            variant: "outlined",
+            className: "formSection--PreviewButton",
+            text: "Preview",
+            onClick: () => {
+              !previewFieldsData ? showPreview() : hidePreview();
+            },
+            disable: !(members == null ? void 0 : members.length),
+            startIcon: previewFieldsData ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DynamicButton,
+          {
+            variant: "contained",
+            type: "submit",
+            text: "Update",
+            onClick: handleFormUpdate,
+            disable: previewFieldsData
+          }
+        )
+      ] }) }),
+      !previewFieldsData ? /* @__PURE__ */ jsxs(Grid, { className: "formSection--Grid", container: true, children: [
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            item: true,
+            xs: 9,
+            component: "form",
+            sx: {
+              position: "relative",
+              background: "#F5F6F5",
+              padding: "0.75rem"
+            },
+            children: /* @__PURE__ */ jsxs(Grid, { className: "formSection--GridContainer", children: [
+              /* @__PURE__ */ jsxs(Box, { className: "formSection--Tab", children: [
+                tabsData && /* @__PURE__ */ jsx(
+                  TabBar,
+                  {
+                    tabs: tabsData,
+                    onEditTabTitle: handleEditTabTitle,
+                    activeValue: activeTabValue,
+                    setActiveValue: setActiveTabValue,
+                    handleTabChange: () => {
+                      handleTabData();
+                    },
+                    handleRemoveTab,
+                    containerProps: { mb: 0 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  DynamicButton,
+                  {
+                    variant: "outlined",
+                    text: "Add Tab",
+                    onClick: handleAddTab,
+                    style: { color: "#292D32", margin: "0.5rem" }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "formSection--Form", children: [
+                section == null ? void 0 : section.map((item, i) => {
+                  var _a;
+                  const sectionMembers = members.filter(
+                    (member) => member.section_order === i
+                  );
+                  const isFormSwitcher = item.section_type === SECTION_TYPES.FORM_SWITCH_SECTION;
+                  const switchForms = (_a = item == null ? void 0 : item.switcher_forms) == null ? void 0 : _a.map((form) => ({
+                    ...form,
+                    formMembers: members.filter(
+                      (member) => member.section_form_id === form.id
+                    )
+                  }));
+                  return /* @__PURE__ */ jsxs(
+                    DynamicSectionHOC,
+                    {
+                      index: i,
+                      label: t(item.label),
+                      onClick: handleSectionSelection,
+                      position: i,
+                      fieldArrayName: "section",
+                      isFormSwitcher,
+                      activeIndex: activeSection === i,
+                      removeSection: () => handleRemoveSection(i),
+                      handleAccordion: () => handleMakeAccordion(i),
+                      handleAddButton: (e) => handleAddMember(e),
+                      remove_section: item.remove_section,
+                      children: [
+                        isFormSwitcher ? /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, children: [
+                          /* @__PURE__ */ jsx(Typography, { type: "s5", style: { fontWeight: 500 }, color: "theme.secondary.800", children: item.form_switcher_label }),
+                          /* @__PURE__ */ jsx(
+                            RadioGroup,
+                            {
+                              "aria-labelledby": "theme-radio-buttons-group-label",
+                              name: item.form_switcher_name || item.form_switcher_label,
+                              children: switchForms == null ? void 0 : switchForms.map(({ name, id, formMembers }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                                  FormControlLabel,
+                                  {
+                                    value: name,
+                                    control: /* @__PURE__ */ jsx(Radio, {}),
+                                    label: t(name),
+                                    disabled: true
+                                  },
+                                  id
+                                ) }),
+                                /* @__PURE__ */ jsx(Grid, { container: true, sx: { mb: 3 }, children: /* @__PURE__ */ jsx(
+                                  FormFields,
+                                  {
+                                    sectionMembers: formMembers || [],
+                                    members,
+                                    activeMember,
+                                    control,
+                                    t,
+                                    element,
+                                    images,
+                                    elementJSON,
+                                    remove,
+                                    move,
+                                    handleElementSelection,
+                                    setElementSwap,
+                                    handleDuplicateElement,
+                                    setSelectedHoc,
+                                    setActiveMember
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsx(
+                                  DynamicButton,
+                                  {
+                                    text: "Add",
+                                    variant: "outlined",
+                                    className: "formSection--PreviewButton",
+                                    "data-position": i,
+                                    onClick: (e) => handleAddMember(e, {
+                                      section_form_id: id,
+                                      is_form_switcher_section: true
+                                    }),
+                                    startIcon: /* @__PURE__ */ jsx(Add, {})
+                                  }
+                                )
+                              ] }))
+                            }
+                          )
+                        ] }) : null,
+                        !isFormSwitcher && /* @__PURE__ */ jsx(
+                          FormFields,
+                          {
+                            sectionMembers: sectionMembers || [],
+                            members,
+                            activeMember,
+                            control,
+                            t,
+                            element,
+                            images,
+                            elementJSON,
+                            remove,
+                            move,
+                            handleElementSelection,
+                            setElementSwap,
+                            handleDuplicateElement,
+                            setSelectedHoc,
+                            setActiveMember
+                          }
+                        )
+                      ]
+                    }
+                  );
+                }),
+                /* @__PURE__ */ jsx("div", { className: "formSection--Section", children: /* @__PURE__ */ jsx(
+                  DynamicButton,
+                  {
+                    text: "Add a section",
+                    variant: "outlined",
+                    className: "formSection--PreviewButton",
+                    onClick: addNewSection,
+                    startIcon: /* @__PURE__ */ jsx(Add, {})
+                  }
+                ) })
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            item: true,
+            xs: 3,
+            className: Boolean(selectedHoc) && ((members == null ? void 0 : members.length) || section.length) ? "formSection--RightGrid" : "formSection--RightGrid formSection--Text",
+            children: memoizedForm
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        FormParser,
+        {
+          data: previewFieldsData || [],
+          handleFormSubmit: (data) => console.log("Preview Data", data),
+          className: "form-container",
+          fieldArrayName: "form-builder-preview",
+          getFormMethods: (methods) => setFormParserMethods({ ...methods })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Toast,
+        {
+          open: Boolean(toast),
+          type: toast == null ? void 0 : toast.type,
+          message: toast == null ? void 0 : toast.message,
+          handleClose: () => setToast(null),
+          anchorOrigin: { horizontal: "right", vertical: "bottom" }
+        }
+      )
+    ] }) })
+  );
+}
+export {
+  CustomForm,
+  CustomForm as default
+};
+//# sourceMappingURL=index.esm.js.map