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

package/dist/cjs/triggers/components/subcomponents.js

@@ -0,0 +1,1140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var string = require('../../node_modules/@internationalized/date/dist/string.js');
+var dayjs_min = require('../../node_modules/dayjs/dayjs.min.js');
+var index = require('../../commons/constants/index.js');
+var nestedAdd = require('../../commons/icons/nested-add.js');
+var trash = require('../../commons/icons/trash.js');
+var index$1 = require('../constants/index.js');
+var customPill = require('../../commons/components/custom-pill.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 box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var close = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close.js');
+var popover = require('../../node_modules/@sparrowengg/twigs-react/dist/es/popover/popover.js');
+var tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var chevronRight = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+var input = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js');
+var search = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/search.js');
+var chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js');
+var calendar = require('../../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js');
+var checkbox = require('../../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var formInput = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
+var formLabel = require('../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.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 getCurrentConditionText = (text, dataType) => {
+  let currentText = "";
+  switch (text) {
+    case index$1.comparatorConstants.IS:
+      currentText = dataType.includes("BOOLEAN") ? "is" : "is equal to";
+      break;
+    case index$1.comparatorConstants.IS_NOT:
+      currentText = "is not equal to";
+      break;
+    case index$1.comparatorConstants.CONTAINS:
+      currentText = "contains";
+      break;
+    case index$1.comparatorConstants.CONTAINS_NOT:
+      currentText = "not contains";
+      break;
+    case index$1.comparatorConstants.NO_VALUE:
+      currentText = "has no value";
+      break;
+    case index$1.comparatorConstants.ANY_VALUE:
+      currentText = "has any value";
+      break;
+    case index$1.comparatorConstants.ON:
+      currentText = "on";
+      break;
+    case index$1.comparatorConstants.AFTER:
+      currentText = "after";
+      break;
+    case index$1.comparatorConstants.BEFORE:
+      currentText = "before";
+      break;
+    case index$1.comparatorConstants.TRUE:
+    case index$1.comparatorConstants.FALSE:
+      currentText = "Boolean";
+      break;
+    default:
+      currentText = "";
+      break;
+  }
+  return currentText;
+};
+const Filter = ({
+  setIsEditing,
+  filters,
+  fields,
+  index,
+  isEditing,
+  setCurrentField,
+  resetEditing,
+  hasNestedCondition,
+  addNestedFilterCondition,
+  setNestedFieldCondition,
+  removeCurrentFilter,
+  removeNestedField,
+  fieldOptions
+}) => {
+  var _a;
+  return /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$1" }, /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      gap: "5px",
+      css: {
+        marginBottom: "$4",
+        "&:hover": {
+          "#action-btn": {
+            opacity: 1
+          }
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        weight: "bold",
+        css: {
+          whiteSpace: "nowrap"
+        }
+      },
+      index > 0 && fields.condition.toLowerCase(),
+      " When"
+    ),
+    /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          borderBottom: "$borderWidths$xs solid $black200",
+          width: "100%",
+          marginLeft: "$3",
+          position: "relative"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          css: {
+            position: "absolute",
+            right: 0,
+            top: "-$6",
+            background: "$white900",
+            paddingLeft: "$2",
+            opacity: 0,
+            transition: "all .3s ease"
+          },
+          id: "action-btn",
+          alignItems: "center",
+          gap: "$4"
+        },
+        hasNestedCondition && /* @__PURE__ */ React.createElement(
+          iconButton.IconButton,
+          {
+            icon: /* @__PURE__ */ React.createElement(nestedAdd.default, null),
+            size: "sm",
+            variant: "ghost",
+            color: "default",
+            onClick: () => addNestedFilterCondition(filters.id)
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          iconButton.IconButton,
+          {
+            icon: /* @__PURE__ */ React.createElement(trash.default, null),
+            size: "sm",
+            variant: "ghost",
+            color: "default",
+            onClick: () => removeCurrentFilter(filters.id)
+          }
+        )
+      )
+    )
+  ), (_a = filters == null ? void 0 : filters.filter) == null ? void 0 : _a.map((currentFilter, currentFilterIndex) => {
+    var _a2, _b;
+    return /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        justifyContent: "space-between",
+        css: {
+          "&:hover": {
+            "& button": {
+              opacity: 1
+            }
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", alignItems: "center" }, currentFilterIndex > 0 && /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: { cursor: "pointer" },
+          onClick: () => {
+            setNestedFieldCondition(
+              filters.id,
+              filters.condition.toLowerCase() === "or" ? "AND" : "OR"
+            );
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          customPill.default,
+          {
+            variant: "default",
+            radius: "sm",
+            isClosable: false,
+            label: filters.condition.toLowerCase()
+          }
+        )
+      ), isEditing && !currentFilter.field ? /* @__PURE__ */ React.createElement(
+        FieldPopover,
+        {
+          setCurrentField,
+          currentFilter,
+          filters,
+          fieldOptions
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        CustomFieldChip,
+        {
+          setCurrentField,
+          setIsEditing,
+          currentFilter,
+          filters,
+          fieldType: "field"
+        },
+        (_b = (_a2 = fieldOptions == null ? void 0 : fieldOptions.find(
+          (option) => option.value === currentFilter.field
+        )) == null ? void 0 : _a2.label) != null ? _b : currentFilter.field,
+        " "
+      ), isEditing && !currentFilter.comparator && !!currentFilter.field ? /* @__PURE__ */ React.createElement(
+        DataTypePopover,
+        {
+          setCurrentField,
+          currentFilter,
+          filters
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        CustomFieldChip,
+        {
+          setCurrentField,
+          setIsEditing,
+          currentFilter,
+          filters,
+          fieldType: "comparator"
+        },
+        getCurrentConditionText(
+          currentFilter.comparator,
+          currentFilter.dataType
+        )
+      ), isEditing && !!currentFilter.comparator && !!currentFilter.dataType && !currentFilter.value ? /* @__PURE__ */ React.createElement(
+        FieldValuePopover,
+        {
+          fieldOptions,
+          setCurrentField,
+          currentFilter,
+          filters,
+          resetEditing
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        CustomFieldChip,
+        {
+          setCurrentField,
+          setIsEditing,
+          currentFilter,
+          filters,
+          fieldType: "value"
+        },
+        Array.isArray(currentFilter.value) ? currentFilter.value.join(", ") : currentFilter.value
+      )),
+      /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          css: { opacity: 0 },
+          icon: /* @__PURE__ */ React.createElement(close.CloseIcon, null),
+          size: "sm",
+          color: "default",
+          variant: "ghost",
+          onClick: () => removeNestedField(filters.id, currentFilter.id)
+        }
+      )
+    );
+  }));
+};
+const RenderFieldValuePopover = ({
+  fieldOptions,
+  setCurrentField,
+  currentFilter,
+  filters,
+  resetEditing,
+  setShowPopover
+}) => {
+  var _a, _b, _c, _d;
+  const [date, setDate] = React.useState(
+    string.parseDate(dayjs_min.default().format("YYYY-MM-DD"))
+  );
+  const [inputValue, setInputValue] = React.useState("");
+  const [selectedField, setSelectedField] = React.useState([]);
+  const field = (_a = fieldOptions.find(
+    (option) => option.value === currentFilter.field
+  )) == null ? void 0 : _a.options;
+  if (currentFilter.dataType === "BOOLEAN") {
+    return /* @__PURE__ */ React.createElement(box.Box, { css: { paddingBlock: "$5" } }, (_b = index.booleanOptions) == null ? void 0 : _b.map((option) => /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        onClick: () => {
+          setCurrentField(
+            option.value,
+            currentFilter == null ? void 0 : currentFilter.id,
+            filters == null ? void 0 : filters.id,
+            "value"
+          );
+          setShowPopover(false);
+          resetEditing();
+        },
+        css: {
+          padding: "$3 $6",
+          cursor: "pointer",
+          "&:hover": {
+            background: "$neutral100"
+          }
+        }
+      },
+      option.label
+    )));
+  } else if (currentFilter.comparator === "NO_VALUE" || currentFilter.comparator === "ANY_VALUE") {
+    setCurrentField(" ", currentFilter == null ? void 0 : currentFilter.id, filters == null ? void 0 : filters.id, "value");
+    setShowPopover(false);
+    resetEditing();
+    return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  } else if (currentFilter.dataType === "DATE_TIME") {
+    return /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+      calendar.Calendar,
+      {
+        size: "md",
+        footerActionText: "Apply",
+        value: date,
+        showTimePicker: true,
+        onChange: setDate,
+        footerAction: () => {
+          setCurrentField(
+            dayjs_min.default(date).format("MMM D YYYY . hh:mm A"),
+            currentFilter == null ? void 0 : currentFilter.id,
+            filters == null ? void 0 : filters.id,
+            "value"
+          );
+          setShowPopover(false);
+          resetEditing();
+        }
+      }
+    ));
+  } else if (field == null ? void 0 : field.length) {
+    if (currentFilter.dataType === "SELECT") {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
+        input.Input,
+        {
+          placeholder: "Search",
+          leftIcon: /* @__PURE__ */ React.createElement(search.SearchIcon, null),
+          variant: "filled",
+          size: "lg",
+          value: inputValue,
+          onChange: (e) => setInputValue(e.currentTarget.value)
+        }
+      )), /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          flexDirection: "column",
+          css: {
+            paddingBottom: "$4",
+            maxHeight: 240,
+            height: "100%",
+            overflow: "auto"
+          }
+        },
+        !!field.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_c = field.filter(
+          (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
+        )) == null ? void 0 : _c.map((field2) => /* @__PURE__ */ React.createElement(
+          box.Box,
+          {
+            onClick: () => {
+              setCurrentField(
+                field2.value,
+                currentFilter == null ? void 0 : currentFilter.id,
+                filters == null ? void 0 : filters.id,
+                "value"
+              );
+              setShowPopover(false);
+              resetEditing();
+            },
+            css: {
+              padding: "$3 $6",
+              transition: "all .3s ease",
+              cursor: "pointer",
+              "&:hover": {
+                backgroundColor: "rgba(100, 116, 139, 0.06)"
+              }
+            },
+            key: field2 == null ? void 0 : field2.id
+          },
+          /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, field2.label)
+        ))) : /* @__PURE__ */ React.createElement(
+          text.Text,
+          {
+            size: "sm",
+            css: {
+              padding: "$3 $6",
+              color: "$neutral800",
+              textAlign: "center"
+            }
+          },
+          "No options"
+        )
+      ));
+    } else {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
+        input.Input,
+        {
+          placeholder: "Search",
+          leftIcon: /* @__PURE__ */ React.createElement(search.SearchIcon, null),
+          variant: "filled",
+          size: "lg",
+          value: inputValue,
+          onChange: (e) => setInputValue(e.currentTarget.value)
+        }
+      )), /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          flexDirection: "column",
+          css: {
+            paddingBottom: "$4",
+            maxHeight: 240,
+            height: "100%",
+            overflow: "auto"
+          }
+        },
+        !!field.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$3 $6" } }, /* @__PURE__ */ React.createElement(
+          checkbox.Checkbox,
+          {
+            size: "sm",
+            checked: selectedField.length === field.length,
+            onChange: (checked) => {
+              if (checked) {
+                setSelectedField(field == null ? void 0 : field.map((item) => item.value));
+              } else {
+                setSelectedField([]);
+              }
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            text.Text,
+            {
+              css: {
+                cursor: "pointer"
+              },
+              size: "sm"
+            },
+            "Select All"
+          )
+        )), (_d = field.filter(
+          (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
+        )) == null ? void 0 : _d.map((field2) => /* @__PURE__ */ React.createElement(
+          box.Box,
+          {
+            css: {
+              padding: "$3 $6",
+              transition: "all .3s ease",
+              cursor: "pointer",
+              "&:hover": {
+                backgroundColor: "rgba(100, 116, 139, 0.06)"
+              }
+            },
+            key: field2 == null ? void 0 : field2.id
+          },
+          /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2" }, /* @__PURE__ */ React.createElement(
+            checkbox.Checkbox,
+            {
+              size: "sm",
+              checked: selectedField.includes(field2.value),
+              onChange: (checked) => {
+                if (checked) {
+                  setSelectedField([...selectedField, field2.value]);
+                } else {
+                  setSelectedField(
+                    selectedField.filter(
+                      (item) => item !== field2.value
+                    )
+                  );
+                }
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              text.Text,
+              {
+                css: {
+                  cursor: "pointer"
+                },
+                size: "sm"
+              },
+              field2.label
+            )
+          ))
+        )), /* @__PURE__ */ React.createElement(
+          flex.Flex,
+          {
+            justifyContent: "flex-end",
+            css: {
+              position: "sticky",
+              bottom: 0,
+              paddingBlock: "$4 !important",
+              marginInlineEnd: "$6 !important"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            button.Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              color: "primary",
+              onClick: () => {
+                setCurrentField(
+                  selectedField,
+                  currentFilter == null ? void 0 : currentFilter.id,
+                  filters == null ? void 0 : filters.id,
+                  "value"
+                );
+                setShowPopover(false);
+                resetEditing();
+              }
+            },
+            "Apply"
+          )
+        )) : /* @__PURE__ */ React.createElement(
+          text.Text,
+          {
+            size: "sm",
+            css: {
+              padding: "$3 $6",
+              color: "$neutral800",
+              textAlign: "center"
+            }
+          },
+          "No options"
+        )
+      ));
+    }
+  } else {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
+      formInput.FormInput,
+      __spreadProps(__spreadValues({
+        placeholder: currentFilter.dataType === "NUMBER" ? "Enter a number" : "Enter a value",
+        type: "text",
+        variant: "filled",
+        size: "lg"
+      }, (currentFilter.dataType === "NUMBER" || currentFilter.dataType === "PHONE_NUMBER") && {
+        maxLength: 10
+      }), {
+        value: inputValue,
+        onChange: (e) => setInputValue(
+          currentFilter.dataType === "NUMBER" || currentFilter.dataType === "PHONE_NUMBER" ? e.target.value.replace(/\D/g, "") : e.target.value
+        ),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && (inputValue == null ? void 0 : inputValue.length)) {
+            setCurrentField(
+              inputValue,
+              currentFilter == null ? void 0 : currentFilter.id,
+              filters == null ? void 0 : filters.id,
+              "value"
+            );
+            setShowPopover(false);
+            resetEditing();
+          }
+        }
+      })
+    ), currentFilter.dataType === "PHONE_NUMBER" && /* @__PURE__ */ React.createElement(
+      formLabel.FormLabel,
+      {
+        size: "xs",
+        css: { fontWeight: "$5", marginTop: "$2", marginLeft: "$1" }
+      },
+      "Enter a valid number without the country code"
+    )), /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        justifyContent: "space-between",
+        css: {
+          borderTop: "$borderWidths$xs solid $neutral100",
+          padding: "$4 $6",
+          marginTop: "$4"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: "md",
+          color: "secondary",
+          variant: "ghost",
+          onClick: () => setShowPopover(false)
+        },
+        "Cancel"
+      ),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: "md",
+          variant: "ghost",
+          disabled: !(inputValue == null ? void 0 : inputValue.length),
+          onClick: () => {
+            setCurrentField(
+              inputValue,
+              currentFilter == null ? void 0 : currentFilter.id,
+              filters == null ? void 0 : filters.id,
+              "value"
+            );
+            setShowPopover(false);
+            resetEditing();
+          }
+        },
+        "Save"
+      )
+    ));
+  }
+};
+const FieldValuePopover = ({
+  setCurrentField,
+  currentFilter,
+  filters,
+  resetEditing,
+  fieldOptions
+}) => {
+  const [showPopover, setShowPopover] = React.useState(true);
+  const hasError = !currentFilter.value && !showPopover;
+  return /* @__PURE__ */ React.createElement(popover.Popover, { defaultOpen: true, open: showPopover }, /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(
+    tooltip.Tooltip,
+    {
+      side: "right",
+      content: hasError ? "Enter Value to complete the condition" : ""
+    },
+    /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true, onClick: () => setShowPopover(!showPopover) }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(CustomConditonChip, { hasError }, "Type Value")))
+  )), /* @__PURE__ */ React.createElement(
+    popover.PopoverContent,
+    {
+      onPointerDownOutside: () => setShowPopover(false),
+      sideOffset: 4,
+      align: "start",
+      side: currentFilter.dataType === "DATE_TIME" ? "right" : "bottom",
+      css: {
+        minWidth: 220,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      RenderFieldValuePopover,
+      {
+        fieldOptions,
+        setShowPopover,
+        setCurrentField,
+        currentFilter,
+        filters,
+        resetEditing
+      }
+    )
+  ));
+};
+const DataTypePopover = ({
+  setCurrentField,
+  currentFilter,
+  filters
+}) => {
+  var _a, _b, _c;
+  const [subMenuContent, setSubMenuContent] = React.useState({
+    show: false,
+    type: ""
+  });
+  return /* @__PURE__ */ React.createElement(popover.Popover, { defaultOpen: true }, /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(CustomConditonChip, null, "Choose Data Type"))), /* @__PURE__ */ React.createElement(
+    popover.PopoverContent,
+    {
+      sideOffset: 4,
+      align: "start",
+      css: {
+        width: 260,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: 0
+      }
+    },
+    !subMenuContent.show && !currentFilter.dataType.length ? /* @__PURE__ */ React.createElement(box.Box, { css: { paddingTop: "$6" } }, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        onClick: () => {
+          setCurrentField(
+            "NO_PREFERENCE",
+            currentFilter == null ? void 0 : currentFilter.id,
+            filters == null ? void 0 : filters.id,
+            "dataType"
+          );
+          setCurrentField(
+            "NO_PREFERENCE",
+            currentFilter == null ? void 0 : currentFilter.id,
+            filters == null ? void 0 : filters.id,
+            "comparator"
+          );
+          setSubMenuContent({
+            show: false,
+            type: ""
+          });
+        },
+        css: {
+          padding: "$3 $6",
+          marginBottom: "$4",
+          cursor: "pointer",
+          "&:hover": {
+            background: "$neutral100"
+          }
+        }
+      },
+      "No Preference"
+    ), /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          paddingTop: "$4",
+          borderTop: "$borderWidths$xs solid $neutral100"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          css: {
+            textTransform: "uppercase",
+            color: "$neutral600",
+            padding: "$4 $6"
+          },
+          size: "xs",
+          weight: "bold"
+        },
+        "Select data type"
+      ),
+      (_a = index.subMenuOptions) == null ? void 0 : _a.map((option) => /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          alignItems: "center",
+          justifyContent: "space-between",
+          onClick: () => {
+            if (option.value === "BOOLEAN") {
+              setCurrentField(
+                option.value,
+                currentFilter == null ? void 0 : currentFilter.id,
+                filters == null ? void 0 : filters.id,
+                "dataType"
+              );
+              setCurrentField(
+                index$1.comparatorConstants.IS,
+                currentFilter == null ? void 0 : currentFilter.id,
+                filters == null ? void 0 : filters.id,
+                "comparator"
+              );
+            } else {
+              setCurrentField(
+                option.value,
+                currentFilter == null ? void 0 : currentFilter.id,
+                filters == null ? void 0 : filters.id,
+                "dataType"
+              );
+              setSubMenuContent({
+                show: true,
+                type: option.value
+              });
+            }
+          },
+          css: {
+            cursor: "pointer",
+            padding: "$3 $6",
+            "&:hover": {
+              background: "rgba(100, 116, 139, 0.08)",
+              "#subLabelIcon": {
+                opacity: 1
+              }
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+          text.Text,
+          {
+            size: "sm",
+            css: { lineHeight: "$md", color: "$neutral900" }
+          },
+          option.label
+        ), !!option.subLabel && /* @__PURE__ */ React.createElement(
+          text.Text,
+          {
+            size: "xs",
+            css: { lineHeight: "$xs", color: "$neutral700" }
+          },
+          option.subLabel
+        )),
+        /* @__PURE__ */ React.createElement(box.Box, { css: { opacity: 0 }, id: "subLabelIcon" }, /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 20 }))
+      ))
+    ), /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: {
+          background: "rgba(100, 116, 139, 0.06)",
+          padding: "$6 $8"
+        },
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      /* @__PURE__ */ React.createElement(text.Text, { size: "xs", css: { color: "$neutral600", lineHeight: "$xs" } }, "Select the right data type for the mapping to prevent errors when sharing value.")
+    )) : /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          display: !((_b = index.subMenuOptions.find(
+            (option) => option.value === subMenuContent.type
+          )) == null ? void 0 : _b.label) ? "none" : "flex",
+          padding: "$5 $4",
+          borderRadius: "$xl $xl 0 0",
+          backgroundColor: "rgba(100, 116, 139, 0.06)",
+          borderBottom: "$borderWidths$xs solid rgba(100, 116, 139, 0.08)"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          onClick: () => setSubMenuContent({
+            show: false,
+            type: ""
+          }),
+          css: {
+            borderRight: "$borderWidths$xs solid $secondary100",
+            paddingRight: "$2",
+            cursor: "pointer"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          chevronRight.ChevronRightIcon,
+          {
+            style: { transform: "scaleX(-1)", color: "#76859A" },
+            size: 20
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$secondary400" } }, (_c = index.subMenuOptions.find(
+        (option) => option.value === subMenuContent.type
+      )) == null ? void 0 : _c.label), /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { style: { color: "#76859A" }, size: 16 }), /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          size: "sm",
+          weight: "medium",
+          css: { color: "$secondary600" }
+        },
+        subMenuContent.type === "DATE_TIME" ? "Select" : "Choose"
+      ))
+    ), /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          paddingBlock: subMenuContent.type === "DATE_TIME" ? 0 : "$4"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        PopoverFields,
+        {
+          type: currentFilter.dataType,
+          setCurrentField,
+          currentFilter,
+          filters,
+          resetPopover: () => {
+            setSubMenuContent({
+              show: false,
+              type: ""
+            });
+          }
+        }
+      )
+    ))
+  ));
+};
+const PopoverFields = ({
+  type,
+  setCurrentField,
+  filters,
+  currentFilter,
+  resetPopover
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  React.useState(
+    string.parseDate(dayjs_min.default().format("YYYY-MM-DD"))
+  );
+  switch (type) {
+    case "DATE_TIME":
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = index.operatorOptions) == null ? void 0 : _a.filter((operator) => operator.isDateOnly)) == null ? void 0 : _b.map((option) => /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          size: "sm",
+          key: option.id,
+          onClick: () => {
+            setCurrentField(
+              option.value,
+              currentFilter == null ? void 0 : currentFilter.id,
+              filters == null ? void 0 : filters.id,
+              "comparator"
+            );
+            resetPopover();
+          },
+          css: {
+            padding: "$3 $6",
+            cursor: "pointer",
+            "&:hover": {
+              background: "rgba(100, 116, 139, 0.08)"
+            }
+          }
+        },
+        option.label
+      )));
+    case "BOOLEAN":
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_d = (_c = index.operatorOptions) == null ? void 0 : _c.filter((operator) => (operator == null ? void 0 : operator.type) === "BOOLEAN")) == null ? void 0 : _d.map((option) => /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          size: "sm",
+          key: option.id,
+          onClick: () => {
+            setCurrentField(
+              option.value,
+              currentFilter == null ? void 0 : currentFilter.id,
+              filters == null ? void 0 : filters.id,
+              "comparator"
+            );
+            resetPopover();
+          },
+          css: {
+            padding: "$3 $6",
+            cursor: "pointer",
+            "&:hover": {
+              background: "rgba(100, 116, 139, 0.08)"
+            }
+          }
+        },
+        option.label
+      )));
+    default:
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_f = (_e = index.operatorOptions) == null ? void 0 : _e.filter((operator) => !operator.isDateOnly)) == null ? void 0 : _f.map((option) => /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          size: "sm",
+          key: option.id,
+          onClick: () => {
+            setCurrentField(
+              option.value,
+              currentFilter == null ? void 0 : currentFilter.id,
+              filters == null ? void 0 : filters.id,
+              "comparator"
+            );
+            resetPopover();
+          },
+          css: {
+            padding: "$3 $6",
+            cursor: "pointer",
+            "&:hover": {
+              background: "rgba(100, 116, 139, 0.08)"
+            }
+          }
+        },
+        option.label
+      )));
+  }
+};
+const FieldPopover = ({
+  setCurrentField,
+  currentFilter,
+  filters,
+  fieldOptions
+}) => {
+  const [inputSearch, setInputSearch] = React.useState("");
+  const currentOptions = fieldOptions == null ? void 0 : fieldOptions.filter(
+    (option) => option.label.toLowerCase().includes(inputSearch.toLowerCase())
+  );
+  return /* @__PURE__ */ React.createElement(popover.Popover, { defaultOpen: true }, /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(CustomConditonChip, null, "Choose Field"))), /* @__PURE__ */ React.createElement(
+    popover.PopoverContent,
+    {
+      sideOffset: 4,
+      align: "start",
+      css: {
+        paddingBottom: "12px !important",
+        width: 220,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: "0"
+      }
+    },
+    /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
+      input.Input,
+      {
+        placeholder: "Search",
+        leftIcon: /* @__PURE__ */ React.createElement(search.SearchIcon, null),
+        variant: "filled",
+        size: "lg",
+        value: inputSearch,
+        onChange: (e) => setInputSearch(e.currentTarget.value)
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        flexDirection: "column",
+        css: {
+          paddingBottom: "$4",
+          maxHeight: 240,
+          height: "100%",
+          overflow: "auto"
+        }
+      },
+      !!currentOptions.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, currentOptions.map((field) => /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          onClick: () => {
+            setCurrentField(
+              field.value,
+              currentFilter == null ? void 0 : currentFilter.id,
+              filters == null ? void 0 : filters.id,
+              "field"
+            );
+            if (field == null ? void 0 : field.type) {
+              setCurrentField(
+                field == null ? void 0 : field.type,
+                currentFilter == null ? void 0 : currentFilter.id,
+                filters == null ? void 0 : filters.id,
+                "dataType"
+              );
+            }
+          },
+          css: {
+            padding: "$3 $6",
+            transition: "all .3s ease",
+            cursor: "pointer",
+            "&:hover": {
+              backgroundColor: "rgba(100, 116, 139, 0.06)"
+            }
+          },
+          key: field == null ? void 0 : field.id
+        },
+        /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, field.label)
+      ))) : /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          size: "sm",
+          css: {
+            padding: "$3 $6",
+            color: "$neutral800",
+            textAlign: "center"
+          }
+        },
+        "No options"
+      )
+    )
+  ));
+};
+const CustomConditonChip = ({
+  children,
+  hasError
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    chip.Chip,
+    {
+      size: "lg",
+      css: {
+        backgroundColorOpacity: hasError ? ["#FDEDE8", 1] : ["$primary400", 0.2],
+        color: hasError ? "#E75030" : "$primary700",
+        padding: "$3 $1",
+        fontWeight: "$5",
+        lineHeight: "$sm"
+      }
+    },
+    children
+  );
+};
+const CustomFieldChip = ({
+  children,
+  setCurrentField,
+  currentFilter,
+  filters,
+  setIsEditing,
+  fieldType
+}) => {
+  const renderValue = (children2) => {
+    if (children2 === true) {
+      return "True";
+    }
+    if (children2 === false) {
+      return "False";
+    }
+    return children2;
+  };
+  return /* @__PURE__ */ React.createElement(
+    chip.Chip,
+    {
+      size: "lg",
+      css: {
+        background: "transparent",
+        color: "$neutral800",
+        padding: "$3 $1",
+        fontWeight: "$7",
+        lineHeight: "$sm",
+        cursor: "pointer"
+      },
+      onClick: () => {
+        const fieldsToResetMap = {
+          field: ["field", "comparator", "dataType", "value"],
+          comparator: ["comparator", "dataType", "value"],
+          value: ["value"]
+        };
+        const fieldsToReset = fieldsToResetMap[fieldType] || [
+          "comparator",
+          "dataType",
+          "value"
+        ];
+        fieldsToReset.forEach((field) => {
+          setCurrentField("", currentFilter == null ? void 0 : currentFilter.id, filters == null ? void 0 : filters.id, field);
+        });
+        setIsEditing(true);
+      }
+    },
+    renderValue(children)
+  );
+};
+
+exports.Filter = Filter;
+exports.RenderFieldValuePopover = RenderFieldValuePopover;
+exports.default = getCurrentConditionText;
+//# sourceMappingURL=subcomponents.js.map