@sparrowengg/integrations-templates-frontend 2.0.0 → 2.1.0-beta.2

package/dist/cjs/mapping/components/ConfigurationSetup.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var React = require('react');
+var Configuration = require('./Configuration.js');
+var index = require('../constants/index.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+
+const ConfigurationSetup = ({
+  configuration,
+  surveyName,
+  editField
+}) => {
+  var _a;
+  const shouldTruncate = surveyName && surveyName.length > index.UI_CONSTANTS.MAX_SURVEY_NAME_LENGTH;
+  return /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, index.UI_TEXT.SURVEY_NAME_PREFIX), /* @__PURE__ */ React.createElement(
+    tooltip.Tooltip,
+    {
+      content: shouldTruncate ? surveyName : index.UI_TEXT.EMPTY_PLACEHOLDER,
+      css: {
+        zIndex: `${index.UI_CONSTANTS.TOOLTIP_Z_INDEX} !important`,
+        fontFamily: `${index.STYLE_CONSTANTS.FONT_FAMILY} !important`
+      }
+    },
+    /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        weight: "medium",
+        truncate: true,
+        css: { color: "$neutral800", maxWidth: "270px" }
+      },
+      surveyName
+    ))
+  )), /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      flexDirection: "column",
+      gap: "$8",
+      css: {
+        marginTop: "$12",
+        "& label": {
+          color: "$neutral800"
+        }
+      }
+    },
+    (_a = configuration.configurationFields) == null ? void 0 : _a.map((field) => /* @__PURE__ */ React.createElement(
+      Configuration.Configuration,
+      {
+        key: field.id,
+        field,
+        configuredFields: configuration.configuredFields
+      }
+    ))
+  ));
+};
+
+exports.ConfigurationSetup = ConfigurationSetup;
+//# sourceMappingURL=ConfigurationSetup.js.map

package/dist/cjs/mapping/components/ConfigurationSetup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationSetup.js","sources":["../../../../src/mapping/components/ConfigurationSetup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box, Flex, Heading, Text, Tooltip } from \"@sparrowengg/twigs-react\";\nimport { ConfigurationSetupProps, ConfigurationField } from \"../types\";\nimport { Configuration } from \"./Configuration\";\nimport { UI_TEXT, UI_CONSTANTS, STYLE_CONSTANTS } from \"../constants\";\n\n/**\n * ConfigurationSetup component - Displays configuration fields for event setup\n */\nexport const ConfigurationSetup: React.FC<ConfigurationSetupProps> = ({\n  configuration,\n  surveyName,\n  editField,\n}) => {\n  const shouldTruncate = surveyName && surveyName.length > UI_CONSTANTS.MAX_SURVEY_NAME_LENGTH;\n\n  return (\n    <Box css={{ maxWidth: 488, width: \"100%\" }}>\n      <Heading size=\"h5\">{configuration?.title}</Heading>\n      \n      {/* Survey Name Display */}\n      <Flex gap=\"$2\" css={{ marginTop: \"$4\" }}>\n        <Text size=\"sm\" css={{ color: \"$neutral500\" }}>\n          {UI_TEXT.SURVEY_NAME_PREFIX}\n        </Text>\n        <Tooltip\n          content={shouldTruncate ? surveyName : UI_TEXT.EMPTY_PLACEHOLDER}\n          css={{\n            zIndex: `${UI_CONSTANTS.TOOLTIP_Z_INDEX} !important`,\n            fontFamily: `${STYLE_CONSTANTS.FONT_FAMILY} !important`,\n          }}\n        >\n          <Box>\n            <Text\n              size=\"sm\"\n              weight=\"medium\"\n              truncate\n              css={{ color: \"$neutral800\", maxWidth: \"270px\" }}\n            >\n              {surveyName}\n            </Text>\n          </Box>\n        </Tooltip>\n      </Flex>\n\n      {/* Configuration Fields */}\n      <Flex\n        flexDirection=\"column\"\n        gap=\"$8\"\n        css={{\n          marginTop: \"$12\",\n          \"& label\": {\n            color: \"$neutral800\",\n          },\n        }}\n      >\n        {configuration.configurationFields?.map((field: ConfigurationField) => (\n          <Configuration\n            key={field.id}\n            field={field}\n            configuredFields={configuration.configuredFields}\n          />\n        ))}\n      </Flex>\n    </Box>\n  );\n};\n\n"],"names":["UI_CONSTANTS","Box","Heading","Flex","Text","UI_TEXT","Tooltip","STYLE_CONSTANTS","Configuration"],"mappings":";;;;;;;;;;;AASO,MAAM,qBAAwD,CAAC;AAAA,EACpE,aAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AACF,CAAM,KAAA;AAbN,EAAA,IAAA,EAAA,CAAA;AAcE,EAAA,MAAM,cAAiB,GAAA,UAAA,IAAc,UAAW,CAAA,MAAA,GAASA,kBAAa,CAAA,sBAAA,CAAA;AAEtE,EAAA,2CACGC,OAAI,EAAA,EAAA,GAAA,EAAK,EAAE,QAAA,EAAU,KAAK,KAAO,EAAA,MAAA,EAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,mBAAQ,IAAK,EAAA,IAAA,EAAA,EAAM,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,KAAM,mBAGxC,KAAA,CAAA,aAAA,CAAAC,SAAA,EAAA,EAAK,GAAI,EAAA,IAAA,EAAK,KAAK,EAAE,SAAA,EAAW,IAAK,EAAA,EAAA,sCACnCC,SAAK,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAO,EAAA,aAAA,EAC3B,EAAA,EAAAC,aAAA,CAAQ,kBACX,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,cAAiB,GAAA,UAAA,GAAaD,aAAQ,CAAA,iBAAA;AAAA,MAC/C,GAAK,EAAA;AAAA,QACH,MAAA,EAAQ,CAAG,EAAAL,kBAAA,CAAa,eAAe,CAAA,WAAA,CAAA;AAAA,QACvC,UAAA,EAAY,CAAG,EAAAO,qBAAA,CAAgB,WAAW,CAAA,WAAA,CAAA;AAAA,OAC5C;AAAA,KAAA;AAAA,wCAECN,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACG,SAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,MAAO,EAAA,QAAA;AAAA,QACP,QAAQ,EAAA,IAAA;AAAA,QACR,GAAK,EAAA,EAAE,KAAO,EAAA,aAAA,EAAe,UAAU,OAAQ,EAAA;AAAA,OAAA;AAAA,MAE9C,UAAA;AAAA,KAEL,CAAA;AAAA,GAEJ,CAGA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACD,SAAA;AAAA,IAAA;AAAA,MACC,aAAc,EAAA,QAAA;AAAA,MACd,GAAI,EAAA,IAAA;AAAA,MACJ,GAAK,EAAA;AAAA,QACH,SAAW,EAAA,KAAA;AAAA,QACX,SAAW,EAAA;AAAA,UACT,KAAO,EAAA,aAAA;AAAA,SACT;AAAA,OACF;AAAA,KAAA;AAAA,IAAA,CAEC,EAAc,GAAA,aAAA,CAAA,mBAAA,KAAd,IAAmC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,GAAA,CAAI,CAAC,KACvC,qBAAA,KAAA,CAAA,aAAA;AAAA,MAACK,2BAAA;AAAA,MAAA;AAAA,QACC,KAAK,KAAM,CAAA,EAAA;AAAA,QACX,KAAA;AAAA,QACA,kBAAkB,aAAc,CAAA,gBAAA;AAAA,OAAA;AAAA,KAClC,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/mapping/components/CustomAddNewSelect.js

@@ -0,0 +1,131 @@
+'use strict';
+
+var React = require('react');
+var index = require('../constants/index.js');
+var select = require('../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var indexA301f526_esm = require('../../node_modules/react-select/dist/index-a301f526.esm.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var plus = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js');
+var tickCircleFill = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/tick-circle-fill.js');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const CustomShareOption = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React.createElement(
+      tooltip.Tooltip,
+      {
+        content: props.data.tooltip || index.UI_TEXT.EMPTY_PLACEHOLDER,
+        css: {
+          zIndex: index.UI_CONSTANTS.TOOLTIP_Z_INDEX,
+          fontFamily: `${index.STYLE_CONSTANTS.FONT_FAMILY} !important`
+        }
+      },
+      /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          css: { cursor: "pointer", zIndex: index.UI_CONSTANTS.TOOLTIP_Z_INDEX }
+        },
+        /* @__PURE__ */ React.createElement(
+          flex.Flex,
+          {
+            gap: "$2",
+            alignItems: "center",
+            css: {
+              color: "$primary500",
+              fontSize: "$sm",
+              fontWeight: "$7"
+            }
+          },
+          /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16, color: index.STYLE_CONSTANTS.PLUS_ICON_COLOR }),
+          index.UI_TEXT.ADD_ACCOUNT_BUTTON
+        )
+      )))
+    );
+  }
+  return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { cursor: "pointer", zIndex: index.UI_CONSTANTS.TOOLTIP_Z_INDEX },
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "$2"
+    },
+    /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.label),
+    props.data.isAddonAccount && /* @__PURE__ */ React.createElement(
+      chip.Chip,
+      {
+        color: "primary",
+        size: "sm",
+        leftElement: /* @__PURE__ */ React.createElement(tickCircleFill.TickCircleFillIcon, null)
+      },
+      index.UI_TEXT.IN_USE_ADDON_CHIP
+    )
+  ));
+};
+const CustomSingleValue = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
+  }
+  return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
+};
+const CustomAddNewSelect = ({ field }) => {
+  const handleChange = (value) => {
+    var _a;
+    field.onChangeHandler({
+      id: (_a = field == null ? void 0 : field.id) != null ? _a : field == null ? void 0 : field.label,
+      value
+    });
+  };
+  return /* @__PURE__ */ React.createElement(
+    select.Select,
+    {
+      isDisabled: field == null ? void 0 : field.disabled,
+      placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
+      size: "lg",
+      css: {
+        cursor: "pointer"
+      },
+      components: {
+        Option: CustomShareOption,
+        SingleValue: CustomSingleValue
+      },
+      styles: {
+        singleValue: (provided) => __spreadProps(__spreadValues({}, provided), {
+          display: "flex",
+          alignItems: "center",
+          cursor: "pointer"
+        })
+      },
+      value: field.value,
+      onChange: handleChange,
+      options: field.options
+    }
+  );
+};
+
+exports.CustomAddNewSelect = CustomAddNewSelect;
+//# sourceMappingURL=CustomAddNewSelect.js.map

package/dist/cjs/mapping/components/CustomAddNewSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomAddNewSelect.js","sources":["../../../../src/mapping/components/CustomAddNewSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box, Flex, Text, Tooltip, Chip, Select } from \"@sparrowengg/twigs-react\";\nimport { PlusIcon, TickCircleFillIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { components, OptionProps, SingleValueProps } from \"react-select\";\nimport { ConfigurationField, SelectOption } from \"../types\";\nimport { UI_TEXT, UI_CONSTANTS, STYLE_CONSTANTS } from \"../constants\";\n\ninterface CustomAddNewSelectProps {\n  field: ConfigurationField;\n}\n\ninterface CustomSelectOption extends SelectOption {\n  tooltip?: string;\n  isAddonAccount?: boolean;\n}\n\n/**\n * CustomShareOption component - Custom option renderer for select\n */\nconst CustomShareOption: React.FC<OptionProps<CustomSelectOption>> = (props) => {\n  if (props.data.value === \"ADD_NEW\") {\n    return (\n      <Tooltip\n        content={props.data.tooltip || UI_TEXT.EMPTY_PLACEHOLDER}\n        css={{\n          zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX,\n          fontFamily: `${STYLE_CONSTANTS.FONT_FAMILY} !important`,\n        }}\n      >\n        <Box>\n          <components.Option {...props}>\n            <Flex\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              css={{ cursor: \"pointer\", zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX }}\n            >\n              <Flex\n                gap=\"$2\"\n                alignItems=\"center\"\n                css={{\n                  color: \"$primary500\",\n                  fontSize: \"$sm\",\n                  fontWeight: \"$7\",\n                }}\n              >\n                <PlusIcon size={16} color={STYLE_CONSTANTS.PLUS_ICON_COLOR} />\n                {UI_TEXT.ADD_ACCOUNT_BUTTON}\n              </Flex>\n            </Flex>\n          </components.Option>\n        </Box>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <components.Option {...props}>\n      <Flex\n        css={{ cursor: \"pointer\", zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX }}\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        gap=\"$2\"\n      >\n        <Text size=\"sm\">{props.label}</Text>\n        {props.data.isAddonAccount && (\n          <Chip\n            color=\"primary\"\n            size=\"sm\"\n            leftElement={<TickCircleFillIcon />}\n          >\n            {UI_TEXT.IN_USE_ADDON_CHIP}\n          </Chip>\n        )}\n      </Flex>\n    </components.Option>\n  );\n};\n\n/**\n * CustomSingleValue component - Custom single value renderer for select\n */\nconst CustomSingleValue: React.FC<SingleValueProps<CustomSelectOption>> = (props) => {\n  if (props.data.value === \"ADD_NEW\") {\n    return (\n      <components.SingleValue {...props}>\n        <Flex css={{ cursor: \"pointer\" }} alignItems=\"center\" gap=\"$2\">\n          <PlusIcon size={16} />\n          <Text size=\"sm\">{props.data.label}</Text>\n        </Flex>\n      </components.SingleValue>\n    );\n  }\n\n  return (\n    <components.SingleValue {...props}>\n      <Flex css={{ cursor: \"pointer\" }} alignItems=\"center\" gap=\"$2\">\n        <Text size=\"sm\">{props.data.label}</Text>\n      </Flex>\n    </components.SingleValue>\n  );\n};\n\n/**\n * CustomAddNewSelect component - Select component with custom rendering for add new option\n */\nexport const CustomAddNewSelect: React.FC<CustomAddNewSelectProps> = ({ field }) => {\n  const handleChange = (value: unknown): void => {\n    field.onChangeHandler({\n      id: field?.id ?? field?.label,\n      value: value,\n    });\n  };\n\n  return (\n    <Select\n      isDisabled={field?.disabled}\n      placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n      size=\"lg\"\n      css={{\n        cursor: \"pointer\",\n      }}\n      components={{\n        Option: CustomShareOption,\n        SingleValue: CustomSingleValue,\n      }}\n      styles={{\n        singleValue: (provided) => ({\n          ...provided,\n          display: \"flex\",\n          alignItems: \"center\",\n          cursor: \"pointer\",\n        }),\n      }}\n      value={field.value as SelectOption}\n      onChange={handleChange}\n      options={field.options}\n    />\n  );\n};\n\n"],"names":["Tooltip","UI_TEXT","UI_CONSTANTS","STYLE_CONSTANTS","Box","components","Flex","PlusIcon","Text","Chip","TickCircleFillIcon","Select"],"mappings":"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"}

package/dist/cjs/mapping/components/EventSetup.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var React = require('react');
+var ConfigurationSetup = require('./ConfigurationSetup.js');
+var index = require('../constants/index.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var formLabel = require('../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js');
+var select = require('../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var chevronRight = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+
+const EventSetup = ({
+  surveyDetails,
+  accounts,
+  events,
+  actions,
+  navigateMappingPage,
+  configuration,
+  editFieldId
+}) => {
+  React.useEffect(() => {
+    if (actions == null ? void 0 : actions.value) {
+      actions.onChangeHandler(actions.value);
+    }
+    if (events == null ? void 0 : events.value) {
+      events.onChangeHandler(events.value);
+    }
+  }, [actions == null ? void 0 : actions.value, events == null ? void 0 : events.value]);
+  const isContinueDisabled = configuration.hasConfiguration ? false : !(actions == null ? void 0 : actions.value) || !(events == null ? void 0 : events.value);
+  const handleSelectChange = (handler, value) => {
+    if (handler) {
+      handler(value);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { paddingTop: "$40" },
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    /* @__PURE__ */ React.createElement(box.Box, { css: { width: 488 } }, configuration.hasConfiguration ? /* @__PURE__ */ React.createElement(
+      ConfigurationSetup.ConfigurationSetup,
+      {
+        configuration,
+        surveyName: surveyDetails.surveyName,
+        editField: editFieldId
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, index.UI_TEXT.SURVEY_NAME_LABEL), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, surveyDetails.surveyName)), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8", css: { marginTop: "$16" } }, (accounts == null ? void 0 : accounts.hasAccounts) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, index.UI_TEXT.CHOOSE_ACCOUNT_LABEL), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        value: accounts.value,
+        options: accounts.options,
+        placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
+        onChange: (value) => handleSelectChange(accounts.onChangeHandler, value),
+        size: "lg"
+      }
+    )), (events == null ? void 0 : events.hasEvents) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, index.UI_TEXT.CHOOSE_OBJECT_LABEL), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        options: events.options,
+        value: events.value,
+        placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
+        onChange: (value) => handleSelectChange(events.onChangeHandler, value),
+        size: "lg"
+      }
+    )), (actions == null ? void 0 : actions.hasActions) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, index.UI_TEXT.CHOOSE_ACTION_LABEL), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        size: "lg",
+        options: actions.options,
+        value: actions.value,
+        placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
+        onChange: (value) => handleSelectChange(actions.onChangeHandler, value)
+      }
+    )))), /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        disabled: isContinueDisabled,
+        rightIcon: /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, null),
+        css: { marginTop: "$16" },
+        onClick: () => navigateMappingPage()
+      },
+      index.UI_TEXT.CONTINUE_MAPPING_BUTTON
+    ))
+  );
+};
+
+exports.EventSetup = EventSetup;
+//# sourceMappingURL=EventSetup.js.map

package/dist/cjs/mapping/components/EventSetup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventSetup.js","sources":["../../../../src/mapping/components/EventSetup.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport {\n  Box,\n  Button,\n  Flex,\n  FormLabel,\n  Heading,\n  Select,\n  Text,\n} from \"@sparrowengg/twigs-react\";\nimport { ChevronRightIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { EventSetupProps, SelectOption, ChangeHandlerValue } from \"../types\";\nimport { ConfigurationSetup } from \"./ConfigurationSetup\";\nimport { UI_TEXT } from \"../constants\";\n\n/**\n * EventSetup component - Handles event and action selection before mapping\n */\nexport const EventSetup: React.FC<EventSetupProps> = ({\n  surveyDetails,\n  accounts,\n  events,\n  actions,\n  navigateMappingPage,\n  configuration,\n  editFieldId,\n}) => {\n  // Trigger onChange handlers for pre-selected values\n  useEffect(() => {\n    if (actions?.value) {\n      actions.onChangeHandler(actions.value);\n    }\n    if (events?.value) {\n      events.onChangeHandler(events.value);\n    }\n  }, [actions?.value, events?.value]);\n\n  const isContinueDisabled = configuration.hasConfiguration\n    ? false\n    : !actions?.value || !events?.value;\n\n  const handleSelectChange = (\n    handler: ((value: ChangeHandlerValue) => void) | undefined,\n    value: unknown\n  ): void => {\n    if (handler) {\n      handler(value as ChangeHandlerValue);\n    }\n  };\n\n  return (\n    <Flex\n      css={{ paddingTop: \"$40\" }}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Box css={{ width: 488 }}>\n        {configuration.hasConfiguration ? (\n          <ConfigurationSetup\n            configuration={configuration}\n            surveyName={surveyDetails.surveyName}\n            editField={editFieldId}\n          />\n        ) : (\n          <>\n            <Heading size=\"h5\">{configuration?.title}</Heading>\n            <Flex gap=\"$2\" css={{ marginTop: \"$4\" }}>\n              <Text size=\"sm\" css={{ color: \"$neutral500\" }}>\n                {UI_TEXT.SURVEY_NAME_LABEL}\n              </Text>\n              <Text size=\"sm\" weight=\"medium\" css={{ color: \"$neutral800\" }}>\n                {surveyDetails.surveyName}\n              </Text>\n            </Flex>\n            <Flex flexDirection=\"column\" gap=\"$8\" css={{ marginTop: \"$16\" }}>\n              {/* Accounts Dropdown */}\n              {accounts?.hasAccounts && (\n                <Flex gap=\"$2\" flexDirection=\"column\">\n                  <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                    {UI_TEXT.CHOOSE_ACCOUNT_LABEL}\n                  </FormLabel>\n                  <Select\n                    value={accounts.value}\n                    options={accounts.options}\n                    placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n                    onChange={(value: unknown) =>\n                      handleSelectChange(accounts.onChangeHandler, value)\n                    }\n                    size=\"lg\"\n                  />\n                </Flex>\n              )}\n\n              {/* Events Dropdown */}\n              {events?.hasEvents && (\n                <Flex gap=\"$2\" flexDirection=\"column\">\n                  <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                    {UI_TEXT.CHOOSE_OBJECT_LABEL}\n                  </FormLabel>\n                  <Select\n                    options={events.options}\n                    value={events.value}\n                    placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n                    onChange={(value: unknown) =>\n                      handleSelectChange(events.onChangeHandler, value)\n                    }\n                    size=\"lg\"\n                  />\n                </Flex>\n              )}\n\n              {/* Actions Dropdown */}\n              {actions?.hasActions && (\n                <Flex gap=\"$2\" flexDirection=\"column\">\n                  <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                    {UI_TEXT.CHOOSE_ACTION_LABEL}\n                  </FormLabel>\n                  <Select\n                    size=\"lg\"\n                    options={actions.options}\n                    value={actions.value}\n                    placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n                    onChange={(value: unknown) =>\n                      handleSelectChange(actions.onChangeHandler, value)\n                    }\n                  />\n                </Flex>\n              )}\n            </Flex>\n          </>\n        )}\n\n        <Button\n          size=\"lg\"\n          disabled={isContinueDisabled}\n          rightIcon={<ChevronRightIcon />}\n          css={{ marginTop: \"$16\" }}\n          onClick={() => navigateMappingPage()}\n        >\n          {UI_TEXT.CONTINUE_MAPPING_BUTTON}\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\n"],"names":["useEffect","Flex","Box","ConfigurationSetup","Heading","Text","UI_TEXT","FormLabel","Select","Button","ChevronRightIcon"],"mappings":"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"}

package/dist/cjs/mapping/components/MappingHeader.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var React = require('react');
+var arrow = require('../../commons/icons/arrow.js');
+var draftModal = require('../../commons/components/draftModal.js');
+var NamingModal = require('../../commons/components/NamingModal.js');
+var validation = require('../utils/validation.js');
+var index = require('../constants/index.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var arrowLeft = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+
+const MappingHeader = ({
+  hasNamingModal,
+  navigateMappingPage,
+  accounts,
+  events,
+  actions,
+  havingTypeDropdown,
+  onSaveMappingLoader,
+  hasPreviousMapping,
+  isMappingPage,
+  fields,
+  navigateEventPage,
+  onSaveHandler,
+  previousMappingHandler,
+  editFieldId,
+  draftHandler,
+  configuration
+}) => {
+  const [isDraftModalOpen, setIsDraftModalOpen] = React.useState(false);
+  const [isNamingModalOpen, setIsNamingModalOpen] = React.useState(false);
+  const isEventSetupDisabled = !(actions == null ? void 0 : actions.value) || !(events == null ? void 0 : events.value);
+  const isSaveDisabled = !validation.validateEssentialFields(fields, havingTypeDropdown);
+  const handleSaveClick = () => {
+    if (hasNamingModal) {
+      setIsNamingModalOpen(true);
+    } else {
+      onSaveHandler(editFieldId);
+    }
+  };
+  const handleDraftSave = async () => {
+    await draftHandler(index.DRAFT_CONSTANTS.MAPPING_TYPE, editFieldId == null ? void 0 : editFieldId.toString());
+    setIsDraftModalOpen(false);
+    await previousMappingHandler();
+  };
+  const handleDraftCancel = async () => {
+    await previousMappingHandler();
+    setIsDraftModalOpen(false);
+  };
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        position: "sticky",
+        width: "100%",
+        top: "1px",
+        zIndex: "99",
+        background: "#ffff",
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    isDraftModalOpen && /* @__PURE__ */ React.createElement(
+      draftModal.default,
+      {
+        onSaveHandler: handleDraftSave,
+        onCloseHandler: () => setIsDraftModalOpen(false),
+        onCancel: handleDraftCancel
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasPreviousMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          onClick: () => previousMappingHandler(),
+          color: "default",
+          icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, editFieldId ? index.UI_TEXT.EDIT_MAPPING_TITLE : index.UI_TEXT.NEW_MAPPING_TITLE)
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          css: { color: !isMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isMappingPage && navigateEventPage()
+        },
+        index.UI_TEXT.EVENT_SETUP_TITLE
+      ),
+      /* @__PURE__ */ React.createElement(arrow.default, null),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          onClick: () => navigateMappingPage(),
+          css: { color: !isEventSetupDisabled ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          disabled: isEventSetupDisabled
+        },
+        index.UI_TEXT.MAPPING_TITLE
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        disabled: isSaveDisabled,
+        onClick: handleSaveClick,
+        css: { visibility: isMappingPage ? "visible" : "hidden" }
+      },
+      editFieldId ? index.UI_TEXT.UPDATE_MAPPING_BUTTON : index.UI_TEXT.SAVE_MAPPING_BUTTON
+    ),
+    hasNamingModal && /* @__PURE__ */ React.createElement(
+      NamingModal.default,
+      {
+        editFieldId,
+        mappingLoader: onSaveMappingLoader,
+        saveHandler: () => onSaveHandler(editFieldId),
+        closeHandler: () => setIsNamingModalOpen(false),
+        value: (configuration == null ? void 0 : configuration.currentMappingName) || index.UI_TEXT.EMPTY_PLACEHOLDER,
+        setValue: (value) => {
+          var _a;
+          return (_a = configuration == null ? void 0 : configuration.setMappingName) == null ? void 0 : _a.call(configuration, value);
+        },
+        isOpen: isNamingModalOpen
+      }
+    )
+  );
+};
+
+exports.MappingHeader = MappingHeader;
+//# sourceMappingURL=MappingHeader.js.map

package/dist/cjs/mapping/components/MappingHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingHeader.js","sources":["../../../../src/mapping/components/MappingHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  Box,\n  Button,\n  Flex,\n  Heading,\n  IconButton,\n} from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon } from \"@sparrowengg/twigs-react-icons\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport DraftModal from \"../../commons/components/draftModal\";\nimport NamingModal from \"../../commons/components/NamingModal\";\nimport { MappingHeaderProps } from \"../types\";\nimport { validateEssentialFields } from \"../utils\";\nimport { UI_TEXT, DRAFT_CONSTANTS } from \"../constants\";\n\n/**\n * MappingHeader component - Header for mapping page with navigation and save functionality\n */\nexport const MappingHeader: React.FC<MappingHeaderProps> = ({\n  hasNamingModal,\n  navigateMappingPage,\n  accounts,\n  events,\n  actions,\n  havingTypeDropdown,\n  onSaveMappingLoader,\n  hasPreviousMapping,\n  isMappingPage,\n  fields,\n  navigateEventPage,\n  onSaveHandler,\n  previousMappingHandler,\n  editFieldId,\n  draftHandler,\n  configuration,\n}) => {\n  const [isDraftModalOpen, setIsDraftModalOpen] = useState(false);\n  const [isNamingModalOpen, setIsNamingModalOpen] = useState(false);\n\n  const isEventSetupDisabled = !actions?.value || !events?.value;\n  const isSaveDisabled = !validateEssentialFields(fields, havingTypeDropdown);\n\n  const handleSaveClick = (): void => {\n    if (hasNamingModal) {\n      setIsNamingModalOpen(true);\n    } else {\n      onSaveHandler(editFieldId);\n    }\n  };\n\n  const handleDraftSave = async (): Promise<void> => {\n    await draftHandler(DRAFT_CONSTANTS.MAPPING_TYPE, editFieldId?.toString());\n    setIsDraftModalOpen(false);\n    await previousMappingHandler();\n  };\n\n  const handleDraftCancel = async (): Promise<void> => {\n    await previousMappingHandler();\n    setIsDraftModalOpen(false);\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        position: \"sticky\",\n        width: \"100%\",\n        top: \"1px\",\n        zIndex: \"99\",\n        background: \"#ffff\",\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      {/* Draft Modal */}\n      {isDraftModalOpen && (\n        <DraftModal\n          onSaveHandler={handleDraftSave}\n          onCloseHandler={() => setIsDraftModalOpen(false)}\n          onCancel={handleDraftCancel}\n        />\n      )}\n\n      {/* Back Button and Title */}\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasPreviousMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={() => previousMappingHandler()}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">\n          {editFieldId ? UI_TEXT.EDIT_MAPPING_TITLE : UI_TEXT.NEW_MAPPING_TITLE}\n        </Heading>\n      </Flex>\n\n      {/* Navigation Breadcrumb */}\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isMappingPage && navigateEventPage()}\n        >\n          {UI_TEXT.EVENT_SETUP_TITLE}\n        </Button>\n        <Arrow />\n        <Button\n          onClick={() => navigateMappingPage()}\n          css={{ color: !isEventSetupDisabled ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          disabled={isEventSetupDisabled}\n        >\n          {UI_TEXT.MAPPING_TITLE}\n        </Button>\n      </Flex>\n\n      {/* Save Button */}\n      <Button\n        size=\"lg\"\n        disabled={isSaveDisabled}\n        onClick={handleSaveClick}\n        css={{ visibility: isMappingPage ? \"visible\" : \"hidden\" }}\n      >\n        {editFieldId ? UI_TEXT.UPDATE_MAPPING_BUTTON : UI_TEXT.SAVE_MAPPING_BUTTON}\n      </Button>\n\n      {/* Naming Modal */}\n      {hasNamingModal && (\n        <NamingModal\n          editFieldId={editFieldId}\n          mappingLoader={onSaveMappingLoader}\n          saveHandler={() => onSaveHandler(editFieldId)}\n          closeHandler={() => setIsNamingModalOpen(false)}\n          value={configuration?.currentMappingName || UI_TEXT.EMPTY_PLACEHOLDER}\n          setValue={(value: string) => configuration?.setMappingName?.(value)}\n          isOpen={isNamingModalOpen}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["useState","validateEssentialFields","DRAFT_CONSTANTS","Flex","DraftModal","IconButton","ArrowLeftIcon","Heading","UI_TEXT","Button","Arrow","NamingModal"],"mappings":"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"}

package/dist/cjs/mapping/hooks/useFieldMapping.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var React = require('react');
+var index = require('../constants/index.js');
+var helpers = require('../utils/helpers.js');
+var v4 = require('../../node_modules/uuid/dist/esm-browser/v4.js');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const useFieldMapping = ({
+  fields,
+  setFields,
+  editField
+}) => {
+  React.useEffect(() => {
+    if (editField == null ? void 0 : editField.id) {
+      setFields(editField.fieldValues);
+    } else if (fields.length === 0) {
+      setFields([__spreadProps(__spreadValues({}, index.DEFAULT_FIELD_VALUE), { id: v4.default() })]);
+    } else {
+      setFields(
+        (prevFields) => prevFields.map((field) => __spreadProps(__spreadValues({}, field), { id: field.id || v4.default() }))
+      );
+    }
+  }, []);
+  const handleDependency = (field, property, value) => {
+    if ((field == null ? void 0 : field.dependency) && typeof field.dependency === "object" && "length" in field.dependency) {
+      return field.dependency;
+    }
+    return [];
+  };
+  const handleFieldValue = (id, property, value) => {
+    const targetField = fields.find((field) => field.id === id);
+    const dependentFields = handleDependency(targetField);
+    const mergedFields = helpers.removeDuplicates([...fields, ...dependentFields]);
+    setFields(
+      mergedFields.map((field) => {
+        if (field.id === id) {
+          switch (property) {
+            case "type":
+              return __spreadProps(__spreadValues({}, field), {
+                surveySparrowField: null,
+                mappedType: value,
+                id: id.toString()
+              });
+            case "integrationFieldType":
+              return __spreadProps(__spreadValues({}, field), {
+                defaultValue: null,
+                [property]: value
+              });
+            default:
+              return __spreadProps(__spreadValues({}, field), {
+                [property]: value
+              });
+          }
+        }
+        return field;
+      })
+    );
+  };
+  const addNewField = () => {
+    setFields((prevFields) => [
+      ...prevFields,
+      __spreadProps(__spreadValues({}, index.DEFAULT_FIELD_VALUE), { id: v4.default() })
+    ]);
+  };
+  const removeField = (fieldId) => {
+    setFields((prevFields) => prevFields.filter((field) => field.id !== fieldId));
+  };
+  const essentialFields = fields.filter((field) => field.isEssentialField);
+  const commonFields = fields.filter((field) => !field.isEssentialField);
+  return {
+    handleFieldValue,
+    addNewField,
+    removeField,
+    essentialFields,
+    commonFields
+  };
+};
+
+exports.useFieldMapping = useFieldMapping;
+//# sourceMappingURL=useFieldMapping.js.map

package/dist/cjs/mapping/hooks/useFieldMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldMapping.js","sources":["../../../../src/mapping/hooks/useFieldMapping.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { v4 as uuid } from \"uuid\";\nimport { FieldType, IntegrationFieldType, FormFieldValue } from \"../types\";\nimport { DEFAULT_FIELD_VALUE } from \"../constants\";\nimport { removeDuplicates } from \"../utils\";\n\nimport { MappingEditField } from \"../types\";\n\ninterface UseFieldMappingParams {\n  fields: Array<FieldType>;\n  setFields: React.Dispatch<React.SetStateAction<Array<FieldType>>>;\n  editField?: MappingEditField | null;\n}\n\ninterface UseFieldMappingReturn {\n  handleFieldValue: (id: string | number, property: string, value: FormFieldValue) => void;\n  addNewField: () => void;\n  removeField: (fieldId: string) => void;\n  essentialFields: Array<FieldType>;\n  commonFields: Array<FieldType>;\n}\n\n/**\n * Custom hook to manage field mappings\n * @param params - Hook parameters\n * @returns Object containing field management functions\n */\nexport const useFieldMapping = ({\n  fields,\n  setFields,\n  editField,\n}: UseFieldMappingParams): UseFieldMappingReturn => {\n  // Initialize fields on mount or edit\n  useEffect(() => {\n    if (editField?.id) {\n      setFields(editField.fieldValues);\n    } else if (fields.length === 0) {\n      setFields([{ ...DEFAULT_FIELD_VALUE, id: uuid() } as FieldType]);\n    } else {\n      // Ensure all fields have unique IDs\n      setFields((prevFields) =>\n        prevFields.map((field) => ({ ...field, id: field.id || uuid() }))\n      );\n    }\n  }, []);\n\n  /**\n   * Handles custom dependency logic for fields\n   * @param field - Target field\n   * @param property - Property being changed\n   * @param value - New value\n   * @returns Array of dependent fields\n   */\n  const handleDependency = (\n    field: FieldType | undefined,\n    property: string,\n    value: FormFieldValue\n  ): Array<IntegrationFieldType> => {\n    if (\n      field?.dependency &&\n      typeof field.dependency === \"object\" &&\n      \"length\" in field.dependency\n    ) {\n      return field.dependency as unknown as Array<IntegrationFieldType>;\n    }\n    return [];\n  };\n\n  /**\n   * Updates field value and handles dependencies\n   * @param id - Field ID\n   * @param property - Property to update\n   * @param value - New value\n   */\n  const handleFieldValue = (\n    id: string | number,\n    property: string,\n    value: FormFieldValue\n  ): void => {\n    const targetField = fields.find((field) => field.id === id);\n    const dependentFields = handleDependency(targetField, property, value);\n\n    // Merge dependent fields and remove duplicates\n    const mergedFields = removeDuplicates([...fields, ...dependentFields]);\n\n    setFields(\n      mergedFields.map((field) => {\n        if (field.id === id) {\n          switch (property) {\n            case \"type\":\n              return {\n                ...field,\n                surveySparrowField: null,\n                mappedType: value as FieldType[\"mappedType\"],\n                id: id.toString(),\n              };\n            case \"integrationFieldType\":\n              return {\n                ...field,\n                defaultValue: null,\n                [property]: value,\n              };\n            default:\n              return {\n                ...field,\n                [property]: value,\n              };\n          }\n        }\n        return field;\n      }) as FieldType[]\n    );\n  };\n\n  /**\n   * Adds a new mapping field\n   */\n  const addNewField = (): void => {\n    setFields((prevFields) => [\n      ...prevFields,\n      { ...DEFAULT_FIELD_VALUE, id: uuid() } as FieldType,\n    ]);\n  };\n\n  /**\n   * Removes a field by ID\n   * @param fieldId - Field ID to remove\n   */\n  const removeField = (fieldId: string): void => {\n    setFields((prevFields) => prevFields.filter((field) => field.id !== fieldId));\n  };\n\n  // Separate essential and common fields\n  const essentialFields = fields.filter((field) => field.isEssentialField);\n  const commonFields = fields.filter((field) => !field.isEssentialField);\n\n  return {\n    handleFieldValue,\n    addNewField,\n    removeField,\n    essentialFields,\n    commonFields,\n  };\n};\n\n"],"names":["useEffect","DEFAULT_FIELD_VALUE","uuid","removeDuplicates"],"mappings":"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"}