@sparrowengg/integrations-templates-frontend 1.9.84-beta.2 → 1.9.84-beta.20

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

@@ -0,0 +1,1083 @@
+'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 arrow = require('../commons/icons/arrow.js');
+var mapping$1 = require('./components/mapping.js');
+var index = require('../commons/constants/index.js');
+var dayjs_min = require('../node_modules/dayjs/dayjs.min.js');
+var mapping = require('../mapping/components/mapping.js');
+var NamingModal = require('../commons/components/NamingModal.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 DynamicMapping = ({
+  mappingType,
+  integrationFields,
+  configuration,
+  isMappingPage,
+  navigateMappingPage,
+  setIntegrationFields,
+  token,
+  apiURL = index.surveySparrowURL,
+  surveyDetails,
+  importResponse,
+  hasExistingMapping,
+  onSaveHandler,
+  editField,
+  previousMappingHandler,
+  surveyType,
+  havingTypeDropdown,
+  fields,
+  setFields,
+  surveyId,
+  integrationName,
+  customList,
+  oldResponse,
+  hasNamingModal
+}) => {
+  const [ssMappingData, setSSMappingData] = React.useState({
+    questions: [],
+    variables: [],
+    contactProperties: [],
+    expressions: [],
+    property: [],
+    derivedQuestions: []
+  });
+  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);
+  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(importResponse))) !== 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,
+    {
+      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,
+      {
+        hasNamingModal,
+        mappingType: mappingType != null ? mappingType : "",
+        isEditConfirmationOpen,
+        setIsEditConfirmationOpen,
+        editField,
+        importResponse,
+        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(React.Fragment, null, mappingType === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      mapping.Mapping,
+      {
+        surveyType,
+        havingTypeDropdown,
+        fields,
+        setFields,
+        surveyDetails,
+        integrationFields,
+        setIntegrationFields,
+        surveyId: surveyDetails.surveyId,
+        token,
+        apiURL,
+        integrationName,
+        customList,
+        oldResponse
+      }
+    )) : /* @__PURE__ */ React.createElement(
+      mapping$1.default,
+      {
+        setOriginalMappingData,
+        integrationFields,
+        setIntegrationFields,
+        token,
+        setIsInitialLoad,
+        apiURL,
+        surveyId: surveyDetails.surveyId,
+        surveyProperties: surveyDetails.surveyProperties,
+        importResponse,
+        ssMappingData,
+        setSSMappingData,
+        editField
+      }
+    ))))
+  );
+};
+const MappingHeader = ({
+  hasNamingModal,
+  isEditConfirmationOpen,
+  editField,
+  importResponse,
+  hasExistingMapping,
+  ssMappingData,
+  isMappingPage,
+  navigateConfigPage,
+  onSaveHandler,
+  previousMappingHandler,
+  saveConfiguration,
+  configuration,
+  setIsEditConfirmationOpen,
+  hasFieldsChanged,
+  mappingType
+}) => {
+  const [isNamingModalOpen, setIsNamingModalOpen] = React.useState(false);
+  const isButtonDisabled = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    if (isMappingPage) {
+      if (mappingType === "MULTI_MAPPING") {
+        return false;
+      }
+      if (editField == null ? void 0 : editField.id) {
+        return !hasFieldsChanged;
+      }
+      if (((_a = importResponse == null ? void 0 : importResponse.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;
+      }
+    }
+  };
+  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,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        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 (hasNamingModal && isMappingPage) {
+              setIsNamingModalOpen(true);
+            } else {
+              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"
+      )
+    ),
+    hasNamingModal && isMappingPage && /* @__PURE__ */ React.createElement(
+      NamingModal.default,
+      {
+        editFieldId: editField == null ? void 0 : editField.id,
+        saveHandler: () => onSaveHandler(editField == null ? void 0 : editField.id),
+        closeHandler: () => setIsNamingModalOpen(false),
+        value: (configuration == null ? void 0 : configuration.currentMappingName) || "",
+        setValue: (value) => {
+          var _a;
+          return (_a = configuration == null ? void 0 : configuration.setMappingName) == null ? void 0 : _a.call(configuration, value);
+        },
+        isOpen: isNamingModalOpen
+      }
+    ),
+    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);
+        }
+      }
+    )
+  );
+};
+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,
+    {
+      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,
+          isDisabled: configuration.importOptions.isDisabled,
+          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, isDisabled }) => {
+  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 && !isDisabled) {
+      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, disabled: isDisabled }, /* @__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.DynamicMapping = DynamicMapping;
+//# sourceMappingURL=index.js.map