@sparrowengg/integrations-templates-frontend 1.2.4

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

@@ -0,0 +1,676 @@
+'use strict';
+
+var React = require('react');
+var index$1 = require('../../commons/constants/index.js');
+var nestedAdd = require('../../commons/icons/nested-add.js');
+var trash = require('../../commons/icons/trash.js');
+var index = 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 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 button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var chevronRight = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+var calendar = require('../../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js');
+var chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js');
+
+const getCurrentConditionText = (text, dataType) => {
+  let currentText = "";
+  switch (text) {
+    case index.comparatorConstants.IS:
+      currentText = dataType.includes("BOOLEAN") ? "Boolean: is" : "is equal to";
+      break;
+    case index.comparatorConstants.IS_NOT:
+      currentText = "is not equal to";
+      break;
+    case index.comparatorConstants.CONTAINS:
+      currentText = "contains";
+      break;
+    case index.comparatorConstants.CONTAINS_NOT:
+      currentText = "contains not";
+      break;
+    case index.comparatorConstants.NO_VALUE:
+      currentText = "has no value";
+      break;
+    case index.comparatorConstants.TRUE:
+    case index.comparatorConstants.FALSE:
+      currentText = "Boolean";
+      break;
+    default:
+      currentText = "";
+      break;
+  }
+  return currentText;
+};
+const Filter = ({
+  filters,
+  fields,
+  index: index$1,
+  isEditing,
+  setCurrentField,
+  resetEditing,
+  addNestedFilterCondition,
+  setNestedFieldCondition,
+  removeCurrentFilter,
+  removeNestedField
+}) => {
+  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$1 > 0 && fields.condition.toLowerCase(),
+      " When"
+    ),
+    /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          borderBottom: "$borderWidths$xs solid $black200",
+          width: "100%",
+          marginLeft: "$3",
+          position: "relative"
+        }
+      },
+      !isEditing && /* @__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"
+        },
+        /* @__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)
+          }
+        )
+      )
+    )
+  ), filters.filter.map((currentFilter, currentFilterIndex) => {
+    var _a, _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
+        }
+      ) : /* @__PURE__ */ React.createElement(CustomFieldChip, null, (_b = (_a = index.fieldOptions.find(
+        (option) => option.value === currentFilter.field
+      )) == null ? void 0 : _a.label) != null ? _b : currentFilter.field, " "), isEditing && !currentFilter.comparator && !!currentFilter.field ? /* @__PURE__ */ React.createElement(
+        DataTypePopover,
+        {
+          setCurrentField,
+          currentFilter,
+          filters
+        }
+      ) : /* @__PURE__ */ React.createElement(CustomFieldChip, null, getCurrentConditionText(
+        currentFilter.comparator,
+        currentFilter.dataType
+      )), isEditing && !!currentFilter.comparator && !!currentFilter.dataType && !currentFilter.value ? /* @__PURE__ */ React.createElement(
+        FieldValuePopover,
+        {
+          setCurrentField,
+          currentFilter,
+          filters,
+          resetEditing
+        }
+      ) : /* @__PURE__ */ React.createElement(CustomFieldChip, null, currentFilter.value)),
+      !isEditing && /* @__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 FieldValuePopover = ({
+  setCurrentField,
+  currentFilter,
+  filters,
+  resetEditing
+}) => {
+  const [inputValue, setInputValue] = React.useState("");
+  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",
+      css: {
+        width: 220,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: 0
+      }
+    },
+    currentFilter.dataType === "BOOLEAN" ? /* @__PURE__ */ React.createElement(box.Box, { css: { paddingBlock: "$5" } }, index$1.booleanOptions.map((option) => /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        onClick: () => {
+          setCurrentField(
+            option.label,
+            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
+    ))) : /* @__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,
+      {
+        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",
+          onClick: () => {
+            setCurrentField(
+              inputValue,
+              currentFilter == null ? void 0 : currentFilter.id,
+              filters == null ? void 0 : filters.id,
+              "value"
+            );
+            setShowPopover(false);
+            resetEditing();
+          }
+        },
+        "Apply"
+      )
+    ))
+  ));
+};
+const DataTypePopover = ({ setCurrentField, currentFilter, filters }) => {
+  var _a;
+  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 ? /* @__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"
+      ),
+      index$1.subMenuOptions.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.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: {
+          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" } }, (_a = index$1.subMenuOptions.find(
+        (option) => option.value === subMenuContent.type
+      )) == null ? void 0 : _a.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: subMenuContent.type,
+          setCurrentField,
+          currentFilter,
+          filters,
+          resetPopover: () => {
+            setSubMenuContent({
+              show: false,
+              type: ""
+            });
+          }
+        }
+      )
+    ))
+  ));
+};
+const PopoverFields = ({
+  type,
+  setCurrentField,
+  filters,
+  currentFilter,
+  resetPopover
+}) => {
+  switch (type) {
+    case "DATE_TIME":
+      return /* @__PURE__ */ React.createElement(calendar.Calendar, { size: "md", footerActionText: "Apply" });
+    default:
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, index$1.operatorOptions.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 }) => {
+  const [inputSearch, setInputSearch] = React.useState("");
+  const currentOptions = index.fieldOptions.filter(
+    (option) => option.label.includes(inputSearch)
+  );
+  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: {
+        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"
+          ),
+          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 }) => {
+  return /* @__PURE__ */ React.createElement(
+    chip.Chip,
+    {
+      size: "lg",
+      css: {
+        background: "transparent",
+        color: "$neutral800",
+        padding: "$3 $1",
+        fontWeight: "$7",
+        lineHeight: "$sm"
+      }
+    },
+    children
+  );
+};
+
+exports.Filter = Filter;
+//# sourceMappingURL=subcomponents.js.map