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

package/dist/cjs/single-mapping/index.js

@@ -1,17 +1,55 @@
 'use strict';
 
+var string = require('../node_modules/@internationalized/date/dist/string.js');
+var editConfirmation = require('../commons/components/edit-confirmation.js');
 var React = require('react');
-var index$1 = require('../commons/constants/index.js');
-var MappingHeader = require('./components/MappingHeader.js');
-var ConfigurationSetup = require('./components/ConfigurationSetup.js');
-var MappingContent = require('./components/MappingContent.js');
-var useEditMode = require('./hooks/useEditMode.js');
-var index = require('./constants/index.js');
+var arrow = require('../commons/icons/arrow.js');
+var mapping = require('./components/mapping.js');
+var index = require('../commons/constants/index.js');
+var dayjs_min = require('../node_modules/dayjs/dayjs.min.js');
 var themeProvider = require('../node_modules/@sparrowengg/twigs-react/dist/es/theme-provider/theme-provider.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 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');
+var text = require('../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var dropdown = require('../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js');
+var input = require('../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js');
+var chevronDown = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.js');
+var calendar = require('../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js');
+var radio = require('../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.js');
+var formLabel = require('../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js');
+var formInput = require('../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
+var checkbox = require('../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js');
+var _switch = require('../node_modules/@sparrowengg/twigs-react/dist/es/switch/switch.js');
+var select = require('../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var indexA301f526_esm = require('../node_modules/react-select/dist/index-a301f526.esm.js');
+var plus = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.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 SingleMapping = ({
   integrationFields,
   configuration,
@@ -19,27 +57,14 @@ const SingleMapping = ({
   navigateMappingPage,
   setIntegrationFields,
   token,
-  apiURL = index$1.surveySparrowURL,
+  apiURL = index.surveySparrowURL,
   surveyDetails,
-  importResponse,
+  importResponse: importResponse2,
   hasExistingMapping,
   onSaveHandler,
   editField,
   previousMappingHandler
 }) => {
-  const [isEditConfirmationOpen, setIsEditConfirmationOpen] = React.useState(false);
-  const {
-    originalMappingData,
-    setOriginalMappingData,
-    isInitialLoad,
-    setIsInitialLoad,
-    hasFieldsChanged
-  } = useEditMode.useEditMode({
-    editField,
-    importResponse,
-    configuration,
-    navigateMappingPage
-  });
   const [ssMappingData, setSSMappingData] = React.useState({
     questions: [],
     variables: [],
@@ -48,57 +73,960 @@ const SingleMapping = ({
     property: [],
     derivedQuestions: []
   });
-  return /* @__PURE__ */ React.createElement(themeProvider.ThemeProvider, { theme: index.THEME_CONFIG }, /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, null, /* @__PURE__ */ React.createElement(box.Box, { css: { width: "100%" } }, /* @__PURE__ */ React.createElement(
-    MappingHeader.MappingHeader,
+  const [isEditConfirmationOpen, setIsEditConfirmationOpen] = React.useState(false);
+  const [originalMappingData, setOriginalMappingData] = React.useState(null);
+  const [originalConfigurationFields, setOriginalConfigurationFields] = React.useState(null);
+  const [originalConfiguredFields, setOriginalConfiguredFields] = React.useState(null);
+  const [originalImportResponse, setOriginalImportResponse] = React.useState(null);
+  const [isInitialLoad, setIsInitialLoad] = React.useState(true);
+  React.useEffect(() => {
+    if (!!(editField == null ? void 0 : editField.id)) {
+      navigateMappingPage(true);
+      setOriginalConfigurationFields(
+        JSON.parse(JSON.stringify(configuration.configurationFields))
+      );
+      setOriginalConfiguredFields(
+        JSON.parse(JSON.stringify(configuration.configuredFields))
+      );
+      setOriginalImportResponse(JSON.parse(JSON.stringify(importResponse2)));
+    }
+  }, []);
+  const hasFieldsChanged = () => {
+    if (!(editField == null ? void 0 : editField.id) || !originalMappingData)
+      return true;
+    const mappingDataChanged = JSON.stringify(ssMappingData) !== JSON.stringify(originalMappingData);
+    JSON.stringify(JSON.parse(JSON.stringify(importResponse2))) !== JSON.stringify(originalImportResponse);
+    const configFieldsChanged = JSON.stringify(configuration.configurationFields) !== JSON.stringify(originalConfigurationFields);
+    const configuredFieldsChanged = JSON.stringify(configuration.configuredFields) !== JSON.stringify(originalConfiguredFields);
+    return configFieldsChanged || configuredFieldsChanged || !isInitialLoad && mappingDataChanged;
+  };
+  return /* @__PURE__ */ React.createElement(
+    themeProvider.ThemeProvider,
     {
-      isEditConfirmationOpen,
-      setIsEditConfirmationOpen,
-      editField,
-      importResponse,
-      ssMappingData,
-      configuration,
-      hasFieldsChanged: hasFieldsChanged(ssMappingData),
-      saveConfiguration: configuration.onSaveHandler,
-      isMappingPage,
-      hasExistingMapping,
-      navigateConfigPage: () => navigateMappingPage(false),
-      previousMappingHandler,
-      onSaveHandler: () => {
-        onSaveHandler((editField == null ? void 0 : editField.id) ? editField : {});
+      theme: {
+        fonts: {
+          body: "DM Sans, Roboto Mono, sans-serif",
+          heading: "DM Sans, Roboto Mono, sans-serif"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, null, /* @__PURE__ */ React.createElement(box.Box, { css: { width: "100%" } }, /* @__PURE__ */ React.createElement(
+      MappingHeader,
+      {
+        isEditConfirmationOpen,
+        setIsEditConfirmationOpen,
+        editField,
+        importResponse: importResponse2,
+        ssMappingData,
+        configuration,
+        hasFieldsChanged: hasFieldsChanged(),
+        saveConfiguration: () => {
+          configuration.onSaveHandler();
+        },
+        isMappingPage,
+        hasExistingMapping,
+        navigateConfigPage: () => navigateMappingPage(false),
+        previousMappingHandler,
+        onSaveHandler: () => {
+          onSaveHandler((editField == null ? void 0 : editField.id) ? editField : {});
+        }
+      }
+    ), !isMappingPage && configuration.hasConfiguration ? /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        justifyContent: "center",
+        alignItems: "center",
+        css: { marginTop: "$40" }
+      },
+      /* @__PURE__ */ React.createElement(
+        ConfigurationSetup,
+        {
+          configuration,
+          surveyName: surveyDetails.surveyName,
+          editField
+        }
+      )
+    ) : /* @__PURE__ */ React.createElement(
+      mapping.default,
+      {
+        setOriginalMappingData,
+        integrationFields,
+        setIntegrationFields,
+        token,
+        setIsInitialLoad,
+        apiURL,
+        surveyId: surveyDetails.surveyId,
+        surveyProperties: surveyDetails.surveyProperties,
+        importResponse: importResponse2,
+        ssMappingData,
+        setSSMappingData,
+        editField
+      }
+    )))
+  );
+};
+const MappingHeader = ({
+  isEditConfirmationOpen,
+  editField,
+  importResponse: importResponse2,
+  hasExistingMapping,
+  ssMappingData,
+  isMappingPage,
+  navigateConfigPage,
+  onSaveHandler,
+  previousMappingHandler,
+  saveConfiguration,
+  configuration,
+  setIsEditConfirmationOpen,
+  hasFieldsChanged
+}) => {
+  const isButtonDisabled = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    if (isMappingPage) {
+      if (editField == null ? void 0 : editField.id) {
+        return !hasFieldsChanged;
+      }
+      if (((_a = importResponse2 == null ? void 0 : importResponse2.value) == null ? void 0 : _a.ImportMethod) === "SEND_ALL_DATA") {
+        return !(((_b = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _b.length) || ((_c = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _c.length) || ((_d = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _d.length) || ((_e = ssMappingData == null ? void 0 : ssMappingData.expressions) == null ? void 0 : _e.length) || ((_f = ssMappingData == null ? void 0 : ssMappingData.property) == null ? void 0 : _f.length) || ((_g = ssMappingData == null ? void 0 : ssMappingData.derivedQuestions) == null ? void 0 : _g.length));
+      } else {
+        const isMappingDisabled = ((_h = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _h.some((question) => question.isEnabled)) || ((_i = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _i.some((variable) => variable.isEnabled)) || ((_j = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _j.some(
+          (property) => property.isEnabled
+        )) || ((_k = ssMappingData == null ? void 0 : ssMappingData.expressions) == null ? void 0 : _k.some(
+          (expression) => expression.isEnabled
+        )) || ((_l = ssMappingData == null ? void 0 : ssMappingData.derivedQuestions) == null ? void 0 : _l.some(
+          (derivedQuestion) => derivedQuestion.isEnabled
+        )) || ((_m = ssMappingData == null ? void 0 : ssMappingData.property) == null ? void 0 : _m.some((property) => property.isEnabled));
+        return !isMappingDisabled;
+      }
+    } else {
+      const isAllFieldsDisabled = (_n = Object.values(
+        (configuration == null ? void 0 : configuration.configurationFields) || {}
+      )) == null ? void 0 : _n.some(
+        (field) => (field == null ? void 0 : field.value) === null || (field == null ? void 0 : field.value) === void 0
+      );
+      if ((_p = (_o = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _o.find(
+        (field) => (field == null ? void 0 : field.id) === "responseImportSettings"
+      )) == null ? void 0 : _p.value) {
+        return isAllFieldsDisabled || !((_q = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _q.responseImportType);
+      } else {
+        return isAllFieldsDisabled;
       }
     }
-  ), !isMappingPage && configuration.hasConfiguration ? /* @__PURE__ */ React.createElement(
+  };
+  const isMappingPageDisabled = () => {
+    var _a, _b, _c, _d;
+    const isAllFieldsDisabled = (_a = Object.values(
+      (configuration == null ? void 0 : configuration.configurationFields) || {}
+    )) == null ? void 0 : _a.some(
+      (field) => (field == null ? void 0 : field.value) === null || (field == null ? void 0 : field.value) === void 0
+    );
+    if ((_c = (_b = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _b.find(
+      (field) => (field == null ? void 0 : field.id) === "responseImportSettings"
+    )) == null ? void 0 : _c.value) {
+      return isAllFieldsDisabled || !((_d = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _d.responseImportType);
+    } else {
+      return isAllFieldsDisabled;
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
     flex.Flex,
     {
-      justifyContent: "center",
       alignItems: "center",
-      css: { marginTop: "$40" }
+      justifyContent: "space-between",
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
     },
     /* @__PURE__ */ React.createElement(
-      ConfigurationSetup.ConfigurationSetup,
+      flex.Flex,
       {
-        configuration,
-        surveyName: surveyDetails.surveyName,
-        editField
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasExistingMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          onClick: () => previousMappingHandler == null ? void 0 : previousMappingHandler(),
+          color: "default",
+          icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, (editField == null ? void 0 : editField.id) ? "Edit Mapping" : "New Mapping")
+    ),
+    /* @__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 && navigateConfigPage()
+        },
+        "Configuration"
+      ),
+      /* @__PURE__ */ React.createElement(arrow.default, null),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          disabled: isMappingPageDisabled(),
+          css: {
+            color: isMappingPage ? "$neutral900" : "$neutral800",
+            cursor: isMappingPageDisabled() ? "not-allowed" : "pointer"
+          },
+          color: "default",
+          variant: "ghost",
+          onClick: () => {
+            if (isMappingPage) {
+              onSaveHandler({});
+            } else {
+              saveConfiguration();
+            }
+          },
+          size: "md"
+        },
+        "Mapping"
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        justifyContent: "end",
+        css: {
+          width: "180px"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: "lg",
+          disabled: isButtonDisabled(),
+          onClick: () => {
+            if (isMappingPage) {
+              if (editField == null ? void 0 : editField.id) {
+                setIsEditConfirmationOpen(true);
+              } else {
+                onSaveHandler({});
+              }
+            } else {
+              saveConfiguration();
+            }
+          }
+        },
+        isMappingPage ? (editField == null ? void 0 : editField.id) ? "Update Mapping" : "Save Mapping" : "Continue, Mapping"
+      )
+    ),
+    isEditConfirmationOpen && /* @__PURE__ */ React.createElement(
+      editConfirmation.default,
+      {
+        name: "Are you sure?",
+        description: "Saving this updated mapping properties will generate new sheet with the revised mapping.",
+        onConfirm: async () => {
+          await onSaveHandler({});
+          setIsEditConfirmationOpen(false);
+        },
+        onCancel: () => {
+          setIsEditConfirmationOpen(false);
+        }
       }
     )
-  ) : /* @__PURE__ */ React.createElement(
-    MappingContent.MappingContent,
+  );
+};
+const ConfigurationSetup = ({
+  configuration,
+  surveyName,
+  editField
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  return /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, "Event Details"), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, "Survey Name:"), /* @__PURE__ */ React.createElement(
+    tooltip.Tooltip,
     {
-      setOriginalMappingData,
-      integrationFields,
-      setIntegrationFields,
-      token,
-      setIsInitialLoad,
-      apiURL,
-      surveyId: surveyDetails.surveyId,
-      surveyProperties: surveyDetails.surveyProperties,
-      importResponse,
-      ssMappingData,
-      setSSMappingData,
-      editField
+      content: (surveyName == null ? void 0 : surveyName.length) > 25 ? surveyName : "",
+      css: {
+        zIndex: "9999999 !important",
+        fontFamily: "DM Sans !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) => {
+      return /* @__PURE__ */ React.createElement(
+        Configuration,
+        {
+          field,
+          configuredFields: configuration.configuredFields
+        }
+      );
+    }),
+    configuration.importOptions.showImportOptions && /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$2",
+        flexDirection: "column",
+        css: {
+          marginTop: "-4px !important"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        CustomDropdown,
+        {
+          editField,
+          data: configuration.importOptions.options,
+          value: (_d = (_c = (_b = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _b.responseImportType) == null ? void 0 : _c.value) != null ? _d : configuration.importOptions.options[0],
+          onChangeHandler: configuration.importOptions.onChangeHandler
+        }
+      )
+    ),
+    ((_g = (_f = (_e = configuration.configuredFields) == null ? void 0 : _e.responseImportType) == null ? void 0 : _f.value) == null ? void 0 : _g.type) === "date" && /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        weight: "regular",
+        css: { color: "$neutral600", marginTop: "-$6" }
+      },
+      `Existing responses from ${(_j = (_i = (_h = configuration.configuredFields) == null ? void 0 : _h.responseImportType) == null ? void 0 : _i.value) == null ? void 0 : _j.value} will be imported`
+    ),
+    configuration.importOptions.excludeResponse && ((_m = (_l = (_k = configuration.configuredFields) == null ? void 0 : _k.responseImportType) == null ? void 0 : _l.value) == null ? void 0 : _m.type) === "dateRange" && /* @__PURE__ */ React.createElement(
+      Configuration,
+      {
+        field: configuration.importOptions.excludeResponse,
+        configuredFields: configuration.configuredFields,
+        responseImportType: (_q = (_p = (_o = (_n = configuration.configuredFields) == null ? void 0 : _n.responseImportType) == null ? void 0 : _o.value) == null ? void 0 : _p.value) == null ? void 0 : _q.label
+      }
+    )
+  ));
+};
+const CustomDropdown = ({ data, onChangeHandler, value, editField }) => {
+  var _a, _b, _c, _d, _e;
+  const [date, setDate] = React.useState(() => {
+    try {
+      return value ? string.parseDate(dayjs_min.default(value).format("YYYY-MM-DD")) : string.parseDate(dayjs_min.default().format("YYYY-MM-DD"));
+    } catch (e) {
+      return string.parseDate(dayjs_min.default().format("YYYY-MM-DD"));
+    }
+  });
+  const [days, setDays] = React.useState((_b = (_a = value == null ? void 0 : value.value) == null ? void 0 : _a.value) != null ? _b : 0);
+  const [open, setOpen] = React.useState(false);
+  const [hasBeenOpened, setHasBeenOpened] = React.useState(false);
+  React.useEffect(() => {
+    if (!(editField == null ? void 0 : editField.id) && !hasBeenOpened) {
+      setOpen(true);
+      setHasBeenOpened(true);
     }
-  ))));
+  }, [editField == null ? void 0 : editField.id, hasBeenOpened]);
+  return /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    input.Input,
+    {
+      size: "lg",
+      rightIcon: /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 30, color: "#6A6A6A" }),
+      placeholder: "Choose",
+      value: (value == null ? void 0 : value.type) === "date" ? `${value == null ? void 0 : value.label} > ${value == null ? void 0 : value.value}` : (value == null ? void 0 : value.type) === "dateRange" ? `${value == null ? void 0 : value.label} - ${((_c = value == null ? void 0 : value.value) == null ? void 0 : _c.type) === "custom" ? `${(_d = value == null ? void 0 : value.value) == null ? void 0 : _d.value} days` : (_e = value == null ? void 0 : value.value) == null ? void 0 : _e.label}` : value == null ? void 0 : value.label,
+      css: {
+        "& input": {
+          textAlign: "left !important"
+        }
+      }
+    }
+  )), /* @__PURE__ */ React.createElement(
+    dropdown.DropdownMenuContent,
+    {
+      css: {
+        width: "488px",
+        marginBlockStart: "$2",
+        p: {
+          margin: "0px !important"
+        },
+        zIndex: "99 !important"
+      },
+      className: "dm-sans"
+    },
+    data.map((option) => {
+      var _a2;
+      if (!option.type) {
+        return /* @__PURE__ */ React.createElement(
+          tooltip.Tooltip,
+          {
+            content: option.tooltip || "",
+            css: {
+              zIndex: "9999999 !important",
+              fontFamily: "DM Sans !important"
+            }
+          },
+          /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+            dropdown.DropdownMenuItem,
+            {
+              disabled: option == null ? void 0 : option.disabled,
+              css: {
+                cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important",
+                background: (value == null ? void 0 : value.type) === option.type ? "#4A9CA626 !important" : "transparent !important"
+              },
+              onClick: () => onChangeHandler({
+                id: "responseImportType",
+                value: option
+              })
+            },
+            /* @__PURE__ */ React.createElement(
+              flex.Flex,
+              {
+                justifyContent: "space-between",
+                alignItems: "center",
+                css: {
+                  width: "100%"
+                }
+              },
+              /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center", flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+                text.Text,
+                {
+                  size: "sm",
+                  weight: "regular",
+                  css: { color: "$neutral900" }
+                },
+                option.label
+              ), /* @__PURE__ */ React.createElement(
+                text.Text,
+                {
+                  size: "xs",
+                  weight: "regular",
+                  css: { color: "$neutral700" }
+                },
+                option.description
+              ))
+            )
+          ))
+        );
+      } else {
+        return /* @__PURE__ */ React.createElement(
+          tooltip.Tooltip,
+          {
+            content: option.tooltip || "",
+            css: {
+              fontFamily: "DM Sans !important",
+              zIndex: "9999999 !important"
+            }
+          },
+          /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuSub, null, /* @__PURE__ */ React.createElement(
+            dropdown.DropdownMenuSubTrigger,
+            {
+              disabled: option == null ? void 0 : option.disabled,
+              css: {
+                cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important",
+                background: (value == null ? void 0 : value.type) === option.type ? "#4A9CA626 !important" : "transparent !important"
+              }
+            },
+            " ",
+            /* @__PURE__ */ React.createElement(
+              flex.Flex,
+              {
+                justifyContent: "space-between",
+                alignItems: "center",
+                css: {
+                  width: "100%"
+                }
+              },
+              /* @__PURE__ */ React.createElement(
+                flex.Flex,
+                {
+                  css: { cursor: "pointer" },
+                  justifyContent: "center",
+                  flexDirection: "column"
+                },
+                /* @__PURE__ */ React.createElement(
+                  text.Text,
+                  {
+                    size: "sm",
+                    weight: "regular",
+                    css: { color: "$neutral900" }
+                  },
+                  option.label
+                ),
+                /* @__PURE__ */ React.createElement(
+                  text.Text,
+                  {
+                    size: "xs",
+                    weight: "regular",
+                    css: { color: "$neutral700" }
+                  },
+                  option.description
+                )
+              )
+            )
+          ), /* @__PURE__ */ React.createElement(
+            dropdown.DropdownMenuSubContent,
+            {
+              sideOffset: 10,
+              alignOffset: -5,
+              css: __spreadProps(__spreadValues({
+                padding: "0px !important",
+                maxHeight: "500px",
+                minWidth: "224px",
+                maxWidth: "260px",
+                margin: "0px !important"
+              }, option.type === "date" && {
+                border: "none !important"
+              }), {
+                p: {
+                  margin: "0px !important"
+                },
+                marginBlockEnd: "$10 !important"
+              }),
+              className: "dm-sans"
+            },
+            option.type === "date" && /* @__PURE__ */ React.createElement(
+              calendar.Calendar,
+              __spreadProps(__spreadValues(__spreadValues({
+                footerActionText: "Apply",
+                size: "md",
+                value: date,
+                onChange: setDate
+              }, (option == null ? void 0 : option.minValue) && {
+                minValue: string.parseDate(option == null ? void 0 : option.minValue)
+              }), (option == null ? void 0 : option.maxValue) && {
+                maxValue: string.parseDate(option == null ? void 0 : option.maxValue)
+              }), {
+                footerAction: () => {
+                  onChangeHandler({
+                    id: "responseImportType",
+                    value: __spreadProps(__spreadValues({}, option), {
+                      value: dayjs_min.default(date.toString()).format(
+                        "MMM D, YYYY"
+                      )
+                    })
+                  });
+                  setOpen(false);
+                }
+              })
+            ),
+            option.type === "dateRange" && /* @__PURE__ */ React.createElement(
+              flex.Flex,
+              {
+                css: {
+                  paddingInline: "$4 !important",
+                  paddingBlock: "$8 !important"
+                },
+                flexDirection: "column",
+                gap: "$4"
+              },
+              /* @__PURE__ */ React.createElement(
+                radio.RadioGroup,
+                {
+                  defaultValue: value == null ? void 0 : value.value,
+                  onChange: (value2) => {
+                    var _a3;
+                    onChangeHandler({
+                      id: "responseImportType",
+                      value: __spreadProps(__spreadValues({}, option), {
+                        value: {
+                          type: value2,
+                          value: value2,
+                          label: (_a3 = index.dynamicDateOptions.find(
+                            (option2) => option2.value === value2
+                          )) == null ? void 0 : _a3.label
+                        }
+                      })
+                    });
+                  }
+                },
+                index.dynamicDateOptions.map((option2) => /* @__PURE__ */ React.createElement(
+                  box.Box,
+                  {
+                    css: {
+                      padding: "$4 !important"
+                    }
+                  },
+                  /* @__PURE__ */ React.createElement(radio.Radio, { value: option2.value }, " ", option2.label, " ")
+                ))
+              ),
+              ((_a2 = value == null ? void 0 : value.value) == null ? void 0 : _a2.type) === "custom" && /* @__PURE__ */ React.createElement(
+                box.Box,
+                {
+                  css: {
+                    paddingRight: "$4 !important",
+                    position: "relative"
+                  }
+                },
+                /* @__PURE__ */ React.createElement(
+                  input.Input,
+                  {
+                    size: "md",
+                    variant: "filled",
+                    value: days,
+                    onChange: (e) => setDays(e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ React.createElement(
+                  text.Text,
+                  {
+                    css: {
+                      position: "absolute",
+                      right: "$8",
+                      top: "$3"
+                    }
+                  },
+                  "Days"
+                )
+              ),
+              /* @__PURE__ */ React.createElement(
+                flex.Flex,
+                {
+                  justifyContent: "space-between",
+                  css: {
+                    borderBlockStart: "$borderWidths$xs, solid, $neutral200 !important",
+                    padding: "$8"
+                  }
+                },
+                /* @__PURE__ */ React.createElement(button.Button, { size: "sm", variant: "ghost", color: "secondary" }, "Cancel"),
+                /* @__PURE__ */ React.createElement(
+                  button.Button,
+                  {
+                    size: "sm",
+                    variant: "ghost",
+                    color: "primary",
+                    onClick: () => {
+                      var _a3, _b2;
+                      onChangeHandler({
+                        id: "responseImportType",
+                        value: __spreadProps(__spreadValues({}, option), {
+                          value: {
+                            type: (_a3 = value == null ? void 0 : value.value) == null ? void 0 : _a3.type,
+                            value: days,
+                            label: (_b2 = value == null ? void 0 : value.value) == null ? void 0 : _b2.label
+                          }
+                        })
+                      });
+                      setOpen(false);
+                    }
+                  },
+                  "Apply"
+                )
+              )
+            )
+          )))
+        );
+      }
+    })
+  ));
+};
+const Configuration = ({
+  field,
+  configuredFields,
+  responseImportType = null
+}) => {
+  var _a, _b, _c, _d;
+  let fieldValue = null;
+  fieldValue = (_b = (_a = configuredFields == null ? void 0 : configuredFields[field.id]) == null ? void 0 : _a.value) != null ? _b : null;
+  const [error, setError] = React.useState({
+    errorMessage: "",
+    error: false,
+    id: null
+  });
+  switch (field.fieldType) {
+    case "switch":
+      return /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          gap: "$4",
+          alignItems: "center",
+          css: {
+            marginBlockStart: "$12",
+            borderTop: "$borderWidths$xs solid $neutral200",
+            paddingTop: "$16"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          _switch.Switch,
+          {
+            disabled: field == null ? void 0 : field.disabled,
+            size: "sm",
+            checked: field == null ? void 0 : field.value,
+            onChange: (value) => field.onChangeHandler({
+              id: field.id,
+              value
+            })
+          }
+        ),
+        /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "regular", css: { color: "$neutral900" } }, field.label)
+      );
+    case "checkbox":
+      return /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", alignItems: "start", gap: "$4" }, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$4", alignItems: "center" }, /* @__PURE__ */ React.createElement(
+        checkbox.Checkbox,
+        {
+          disabled: field == null ? void 0 : field.disabled,
+          checked: !!fieldValue,
+          onChange: (value) => field.onChangeHandler({
+            id: field.id,
+            value
+          })
+        }
+      ), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, field.label)), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral500" } }, field.value ? field.ifChecked() : field.ifUnchecked(responseImportType)));
+    case "input":
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, (field == null ? void 0 : field.id) === "spreadsheet" ? /* @__PURE__ */ React.createElement(React.Fragment, null, ((_c = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _c.value) ? /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          className: "dm-sans",
+          css: {
+            label: {
+              fontSize: "$xs !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          formInput.FormInput,
+          __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+            disabled: field == null ? void 0 : field.disabled
+          }, error.id === field.id && {
+            error: error.errorMessage,
+            errorBorder: error.error
+          }), {
+            label: field.label,
+            value: typeof fieldValue === "object" ? "" : fieldValue || "",
+            size: "lg"
+          }), field.pattern && {
+            pattern: field.pattern
+          }), {
+            onChange: (event) => {
+              if (field == null ? void 0 : field.pattern) {
+                const pattern = new RegExp(field.pattern);
+                if (!pattern.test(event.currentTarget.value) && event.currentTarget.value !== "") {
+                  setError({
+                    errorMessage: field.errorMessage,
+                    error: true,
+                    id: field.id
+                  });
+                } else {
+                  setError({
+                    errorMessage: "",
+                    error: false,
+                    id: null
+                  });
+                }
+                field.onChangeHandler({
+                  id: field.id,
+                  value: event.currentTarget.value
+                });
+              } else {
+                field.onChangeHandler({
+                  id: field.id,
+                  value: event.currentTarget.value
+                });
+              }
+            }
+          })
+        )
+      ) : null) : /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          className: "dm-sans",
+          css: {
+            label: {
+              fontSize: "$xs !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          formInput.FormInput,
+          __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+            disabled: field == null ? void 0 : field.disabled
+          }, error.id === field.id && {
+            error: error.errorMessage,
+            errorBorder: error.error
+          }), {
+            label: field.label,
+            value: typeof fieldValue === "object" ? "" : fieldValue || "",
+            size: "lg"
+          }), field.pattern && {
+            pattern: field.pattern
+          }), {
+            onChange: (event) => {
+              if (field == null ? void 0 : field.pattern) {
+                const pattern = new RegExp(field.pattern);
+                if (!pattern.test(event.currentTarget.value) && event.currentTarget.value !== "") {
+                  setError({
+                    errorMessage: field.errorMessage,
+                    error: true,
+                    id: field.id
+                  });
+                } else {
+                  setError({
+                    errorMessage: "",
+                    error: false,
+                    id: null
+                  });
+                }
+                field.onChangeHandler({
+                  id: field.id,
+                  value: event.currentTarget.value
+                });
+              } else {
+                field.onChangeHandler({
+                  id: field.id,
+                  value: event.currentTarget.value
+                });
+              }
+            }
+          })
+        )
+      ));
+    default:
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, field.id === "spreadsheet" ? /* @__PURE__ */ React.createElement(React.Fragment, null, ((_d = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _d.value) ? /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          gap: "$2",
+          flexDirection: "column",
+          css: {
+            cursor: "pointer !important",
+            ".twigs-select__indicator": {
+              width: "14px !important",
+              color: "#848484 !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, field.label),
+        /* @__PURE__ */ React.createElement(CustomAddNewSelect, { field })
+      ) : null) : /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          gap: "$2",
+          flexDirection: "column",
+          css: {
+            cursor: "pointer !important",
+            ".twigs-select__indicator": {
+              width: "14px !important",
+              color: "#848484 !important"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, field.label),
+        /* @__PURE__ */ React.createElement(CustomAddNewSelect, { field })
+      ));
+  }
+};
+const CustomAddNewSelect = ({ field }) => {
+  return /* @__PURE__ */ React.createElement(
+    select.Select,
+    {
+      isDisabled: field == null ? void 0 : field.disabled,
+      placeholder: "",
+      size: "lg",
+      css: {
+        cursor: "pointer"
+      },
+      components: {
+        Option: CustomShareOption,
+        SingleValue: CustomSingleValue
+      },
+      styles: {
+        singleValue: (provided, state) => __spreadProps(__spreadValues({}, provided), {
+          display: "flex",
+          alignItems: "center",
+          cursor: "pointer"
+        })
+      },
+      value: field.value,
+      onChange: (value) => {
+        var _a;
+        field.onChangeHandler({
+          id: (_a = field == null ? void 0 : field.id) != null ? _a : field == null ? void 0 : field.label,
+          value
+        });
+      },
+      options: field.options
+    }
+  );
+};
+const CustomShareOption = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React.createElement(
+      tooltip.Tooltip,
+      {
+        content: props.data.tooltip || "",
+        css: {
+          zIndex: 999999999,
+          fontFamily: "DM Sans !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: 999999999 }
+        },
+        /* @__PURE__ */ React.createElement(
+          flex.Flex,
+          {
+            gap: "$2",
+            alignItems: "center",
+            css: {
+              color: "$primary500",
+              fontSize: "$sm",
+              fontWeight: "$7"
+            }
+          },
+          /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16, color: "#4A9CA6" }),
+          "Add Account"
+        )
+      )))
+    );
+  } else {
+    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: { cursor: "pointer", zIndex: 999999999 },
+        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)
+        },
+        "In Use (Add-on)"
+      )
+    ));
+  }
+};
+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)));
+  } else {
+    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)));
+  }
 };
 
 exports.SingleMapping = SingleMapping;