@sparrowengg/integrations-templates-frontend 1.2.4

package/dist/cjs/integration-template/components/dashboard.js

@@ -0,0 +1,1059 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cursor = require('../../commons/icons/cursor.js');
+var mapping = require('../../commons/icons/mapping.js');
+var dayjs_min = require('../../node_modules/dayjs/dayjs.min.js');
+var index = require('../../node_modules/html-react-parser/esm/index.js');
+var index$1 = require('../../commons/constants/index.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var plus = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js');
+var dropdown = require('../../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js');
+var chevronDown = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.js');
+var tabs = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tabs/tabs.js');
+var chevronRight = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+var _switch = require('../../node_modules/@sparrowengg/twigs-react/dist/es/switch/switch.js');
+var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var ellipsisVertical = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/ellipsis-vertical.js');
+var pencil = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/pencil.js');
+var _delete = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/delete.js');
+var tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js');
+var table = require('../../node_modules/@sparrowengg/twigs-react/dist/es/table/table.js');
+
+const Dashboard = ({
+  integrationName,
+  dashboardDescription,
+  mappingFields,
+  triggerFields,
+  hasMultiAccounts,
+  handleConfigurationType,
+  handleEditField,
+  handleDashboardPage,
+  handleDashboardField,
+  deleteFieldHandler
+}) => {
+  const isSingleAccountMappingCompleted = !hasMultiAccounts && !!(mappingFields == null ? void 0 : mappingFields.fields.length);
+  const isSingleAccountTriggerCompleted = !hasMultiAccounts && !!(triggerFields == null ? void 0 : triggerFields.length);
+  return /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center" }, /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: "1120px", width: "100%" } }, /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { marginTop: "$40" },
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$2" }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, integrationName), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, dashboardDescription)),
+    /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, hasMultiAccounts && /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default", leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null) }, "Add Account"), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(button.Button, { size: "lg", rightIcon: /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, null) }, "Add New")), /* @__PURE__ */ React.createElement(
+      dropdown.DropdownMenuContent,
+      {
+        sideOffset: 4,
+        align: "start",
+        css: { maxWidth: 240, zIndex: 10 }
+      },
+      /* @__PURE__ */ React.createElement(
+        DropdownItem,
+        {
+          icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 24, color: "#6A6A6A" }),
+          heading: "Trigger",
+          description: "Trigger the Survey when a record is created/updated",
+          isDisabled: isSingleAccountTriggerCompleted,
+          onClickHandler: () => handleConfigurationType("TRIGGER")
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        DropdownItem,
+        {
+          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 24, color: "#6A6A6A" }),
+          heading: "Mapping",
+          isDisabled: isSingleAccountMappingCompleted,
+          description: `Create/Update record in ${integrationName} from survey responses`,
+          onClickHandler: () => handleConfigurationType("MAPPING")
+        }
+      )
+    )))
+  ), hasMultiAccounts ? /* @__PURE__ */ React.createElement(
+    MultiAccountDashboard,
+    {
+      mappingFields,
+      triggerFields,
+      integrationName,
+      handleDashboardPage,
+      handleEditField,
+      handleConfigurationType,
+      handleDashboardField,
+      deleteFieldHandler
+    }
+  ) : /* @__PURE__ */ React.createElement(
+    SingleAccountDashboard,
+    {
+      mappingFields,
+      triggerFields,
+      integrationName,
+      handleDashboardPage,
+      handleEditField,
+      handleDashboardField,
+      deleteFieldHandler
+    }
+  )));
+};
+const MultiAccountDashboard = ({
+  mappingFields,
+  triggerFields,
+  integrationName,
+  handleDashboardPage,
+  handleEditField,
+  handleConfigurationType,
+  handleDashboardField,
+  deleteFieldHandler
+}) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(tabs.Tabs, { defaultValue: "ALL" }, /* @__PURE__ */ React.createElement(
+    tabs.TabsList,
+    {
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        marginTop: "$16",
+        "& button": { color: "$neutral900" }
+      }
+    },
+    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "ALL" }, "All"),
+    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "TRIGGER" }, "Trigger"),
+    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "MAPPING" }, "Mapping")
+  ), /* @__PURE__ */ React.createElement(
+    tabs.TabsContent,
+    {
+      value: "ALL",
+      css: { paddingBlock: "$12", paddingInline: 0 }
+    },
+    /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, !!triggerFields.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, triggerFields.map((field) => {
+      var _a;
+      return /* @__PURE__ */ React.createElement(
+        DashboardItem,
+        {
+          icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
+          heading: (_a = field.domain) != null ? _a : field.email,
+          id: field.id,
+          description: `Trigger survey when an event happens in ${integrationName}`,
+          fields: field.fields,
+          isEnabled: field.isEnabled,
+          integrationName,
+          handleDashboardPage,
+          handleEditField,
+          type: "TRIGGER",
+          handleDashboardField,
+          deleteFieldHandler
+        }
+      );
+    })) : null, !!mappingFields.fields.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, mappingFields.fields.map((field) => {
+      var _a;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
+        DashboardItem,
+        {
+          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+          heading: (_a = field.domain) != null ? _a : field.email,
+          id: field.id,
+          description: `Sync survey responses to ${integrationName}`,
+          fields: field.fields,
+          isEnabled: field.isEnabled,
+          integrationName,
+          handleDashboardPage,
+          handleEditField,
+          type: "MAPPING",
+          handleDashboardField,
+          deleteFieldHandler
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        SingleMappingDashboardItem,
+        {
+          field,
+          key: field.id,
+          integrationName,
+          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+          handleEditField,
+          handleDashboardPage,
+          handleDashboardField
+        }
+      ));
+    })) : null)
+  ), /* @__PURE__ */ React.createElement(
+    tabs.TabsContent,
+    {
+      value: "TRIGGER",
+      css: { paddingBlock: "$12", paddingInline: 0 }
+    },
+    !!triggerFields.length ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, triggerFields.map((field) => /* @__PURE__ */ React.createElement(
+      DashboardItem,
+      {
+        icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
+        heading: "Trigger",
+        id: field.id,
+        description: `Trigger survey when an event happens in ${integrationName}`,
+        fields: field.fields,
+        isEnabled: field.isEnabled,
+        integrationName,
+        handleDashboardPage,
+        handleEditField,
+        type: "TRIGGER",
+        handleDashboardField,
+        deleteFieldHandler
+      }
+    ))) : /* @__PURE__ */ React.createElement(
+      MultiAccountFallback,
+      {
+        title: "Trigger",
+        onClickHandler: () => handleConfigurationType("TRIGGER")
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(
+    tabs.TabsContent,
+    {
+      value: "MAPPING",
+      css: { paddingBlock: "$12", paddingInline: 0 }
+    },
+    !!mappingFields.fields.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, mappingFields.fields.map((field) => /* @__PURE__ */ React.createElement(React.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
+      DashboardItem,
+      {
+        icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+        heading: "Mapping",
+        id: field.id,
+        description: `Sync survey responses to ${integrationName}`,
+        fields: field.fields,
+        isEnabled: field.isEnabled,
+        integrationName,
+        handleDashboardPage,
+        handleEditField,
+        type: "MAPPING",
+        handleDashboardField,
+        deleteFieldHandler
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      SingleMappingDashboardItem,
+      {
+        field,
+        key: field.id,
+        integrationName,
+        icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+        handleEditField,
+        handleDashboardPage,
+        handleDashboardField
+      }
+    ))))) : /* @__PURE__ */ React.createElement(
+      MultiAccountFallback,
+      {
+        title: "Mapping",
+        onClickHandler: () => handleConfigurationType("MAPPING")
+      }
+    )
+  )));
+};
+const MultiAccountFallback = ({
+  title,
+  onClickHandler
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      justifyContent: "center",
+      flexDirection: "column",
+      alignItems: "center",
+      css: { paddingTop: 182 }
+    },
+    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, `Zero ${title} Entries`),
+    /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        css: {
+          textAlign: "center",
+          maxWidth: 400,
+          marginBlock: "$4 $12",
+          color: "$neutral800"
+        },
+        size: "md"
+      },
+      "Creating one is as easy as a breeze. Just a click away to get started."
+    ),
+    /* @__PURE__ */ React.createElement(button.Button, { size: "lg", leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null), variant: "outline" }, `New ${title}`)
+  );
+};
+const SingleAccountDashboard = ({
+  mappingFields,
+  triggerFields,
+  integrationName,
+  handleEditField,
+  handleDashboardPage,
+  handleDashboardField,
+  deleteFieldHandler
+}) => {
+  var _a, _b;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !!triggerFields.length ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: "$20" } }, triggerFields.map((field) => /* @__PURE__ */ React.createElement(
+    TriggerDasboardItem,
+    {
+      field,
+      key: field.id,
+      integrationName,
+      icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
+      handleEditField,
+      handleDashboardPage,
+      handleDashboardField
+    }
+  ))) : null, !!((_a = mappingFields.fields) == null ? void 0 : _a.length) && mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !triggerFields.length ? "$20" : "$8" } }, mappingFields.fields.map((field) => /* @__PURE__ */ React.createElement(
+    DashboardItem,
+    {
+      icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+      heading: "Mapping",
+      id: field.id,
+      description: `Sync survey responses to ${integrationName}`,
+      fields: field.fields,
+      isEnabled: field.isEnabled,
+      integrationName,
+      handleDashboardPage,
+      handleEditField,
+      type: "MAPPING",
+      handleDashboardField,
+      deleteFieldHandler
+    }
+  ))) : null, mappingFields.type !== "MULTI_MAPPING" && !!((_b = mappingFields.fields) == null ? void 0 : _b.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !triggerFields.length ? "$20" : "$8" } }, mappingFields.fields.map((field) => /* @__PURE__ */ React.createElement(
+    SingleMappingDashboardItem,
+    {
+      field,
+      key: field.id,
+      integrationName,
+      icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+      handleEditField,
+      handleDashboardPage,
+      handleDashboardField
+    }
+  ))) : null);
+};
+const TriggerDasboardItem = ({
+  icon,
+  field,
+  handleEditField,
+  handleDashboardPage,
+  handleDashboardField
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
+  const transformDataToString = (data) => {
+    const filterConditions = data.filters.map((filterGroup) => {
+      var _a2;
+      return (_a2 = filterGroup.filter.map((filter) => {
+        var _a3;
+        const field2 = filter.field;
+        const comparator = filter.comparator;
+        const value = filter.value;
+        const formattedComparator = ((_a3 = index$1.operatorOptions.find((option) => option.value === comparator)) == null ? void 0 : _a3.label) || comparator;
+        return `${field2} ${formattedComparator} ${value}`;
+      })) == null ? void 0 : _a2.join(
+        ` <span class="triggerTextBold">${filterGroup.condition.toLowerCase()}</span> `
+      );
+    }).join(
+      ` <span class="triggerTextBold">${data.condition.toLowerCase() === "or" ? "Or" : "And"} When,</span> `
+    );
+    return `<p class="triggerText"><span class="triggerTextBold">When</span> ${filterConditions}</p>`;
+  };
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      flexDirection: "column",
+      css: { width: "100%", height: "100%", overflow: "auto" }
+    },
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: {
+          border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
+          borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
+          padding: "$10 $12",
+          width: "100%",
+          backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
+        },
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          alignItems: "center",
+          gap: "$4",
+          css: { cursor: "pointer" },
+          onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
+        },
+        isMappingDisplayed ? /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 40, color: "#848484" }),
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (_a = field == null ? void 0 : field.email) != null ? _a : "Trigger"), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, (_b = field == null ? void 0 : field.description) != null ? _b : "Sample description")))
+      ),
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(
+        _switch.Switch,
+        {
+          size: "md",
+          checked: field.isEnabled,
+          onChange: (value) => handleDashboardField(value, field.id, "TRIGGER")
+        }
+      ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          variant: "ghost",
+          color: "default",
+          size: "lg",
+          icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
+        }
+      )), /* @__PURE__ */ React.createElement(
+        dropdown.DropdownMenuContent,
+        {
+          css: { minWidth: 180, zIndex: 10 },
+          sideOffset: 4,
+          align: "end"
+        },
+        /* @__PURE__ */ React.createElement(
+          dropdown.DropdownMenuItem,
+          {
+            onClick: () => {
+              handleEditField({
+                type: "TRIGGER",
+                values: field,
+                id: field.id
+              });
+              handleDashboardPage(false, "TRIGGER");
+            }
+          },
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
+        ),
+        /* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, null, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
+      )))
+    ),
+    /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          height: isMappingDisplayed ? "100%" : 0
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            borderInline: "$borderWidths$xs solid $black400",
+            maxHeight: 734,
+            height: "100%",
+            position: "relative",
+            overflow: "auto",
+            padding: "$16 $36"
+          }
+        },
+        /* @__PURE__ */ React.createElement(SingleMappingEventWrapper, { isTrigger: true, field }),
+        ((_d = (_c = field == null ? void 0 : field.fields) == null ? void 0 : _c.filters) == null ? void 0 : _d.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement(
+          flex.Flex,
+          {
+            flexDirection: "column",
+            gap: "$6",
+            css: { paddingBlock: "$8" }
+          },
+          /* @__PURE__ */ React.createElement(
+            text.Text,
+            {
+              size: "sm",
+              weight: "bold",
+              css: { textTransform: "uppercase" }
+            },
+            "CONDITION"
+          ),
+          index.default(transformDataToString(field.fields))
+        ), /* @__PURE__ */ React.createElement(
+          box.Box,
+          {
+            css: {
+              marginBlock: "$4",
+              height: "1px",
+              background: "$neutral100"
+            }
+          }
+        )) : null,
+        ((_f = (_e = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _e.variables) == null ? void 0 : _f.length) ? /* @__PURE__ */ React.createElement(
+          SingleMappingChipWrapper,
+          {
+            heading: "PASSING VARIABLE TO SURVEY",
+            fields: field.triggerDetails.variables,
+            backgroundColor: "$positive100"
+          }
+        ) : null,
+        /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6", css: { paddingBlock: "$8" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, "SEND SURVEY"), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, ((_h = (_g = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _g.shareType) == null ? void 0 : _h.value) ? /* @__PURE__ */ React.createElement(
+          EventComponent,
+          {
+            heading: "Share Type:",
+            description: (_j = (_i = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _i.shareType) == null ? void 0 : _j.label
+          }
+        ) : null, ((_l = (_k = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _k.shareRecipient) == null ? void 0 : _l.value) ? /* @__PURE__ */ React.createElement(
+          EventComponent,
+          {
+            heading: "Recipient:",
+            hasBorder: true,
+            description: (_n = (_m = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _m.shareRecipient) == null ? void 0 : _n.label
+          }
+        ) : null, ((_p = (_o = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _o.shareChannel) == null ? void 0 : _p.value) ? /* @__PURE__ */ React.createElement(
+          EventComponent,
+          {
+            hasBorder: true,
+            heading: "Share Channel:",
+            description: (_r = (_q = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _q.shareChannel) == null ? void 0 : _r.label
+          }
+        ) : null)))
+      ),
+      isMappingDisplayed && /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            padding: "$8 $32",
+            border: "$borderWidths$xs solid $black400",
+            borderTop: "$borderWidths$xs solid $neutral200",
+            borderRadius: "0 0 $2xl $2xl",
+            height: "100%"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          button.Button,
+          {
+            size: "sm",
+            leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
+            color: "primary",
+            variant: "ghost",
+            onClick: () => {
+              handleEditField({
+                type: "TRIGGER",
+                values: field,
+                id: field.id
+              });
+              handleDashboardPage(false, "TRIGGER");
+            }
+          },
+          "Edit Triggers"
+        )
+      )
+    )
+  );
+};
+const SingleMappingDashboardItem = ({
+  icon,
+  field,
+  handleEditField,
+  handleDashboardPage,
+  handleDashboardField
+}) => {
+  var _a, _b;
+  const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      flexDirection: "column",
+      css: { width: "100%", height: "100%", overflow: "auto" }
+    },
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: {
+          border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
+          borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
+          padding: "$10 $12",
+          width: "100%",
+          backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
+        },
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          alignItems: "center",
+          gap: "$4",
+          css: { cursor: "pointer" },
+          onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
+        },
+        isMappingDisplayed ? /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 40, color: "#848484" }),
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (_a = field == null ? void 0 : field.email) != null ? _a : "Mapping"), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, (_b = field == null ? void 0 : field.description) != null ? _b : "Sample description")))
+      ),
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(
+        _switch.Switch,
+        {
+          size: "md",
+          checked: field.isEnabled,
+          onChange: (value) => handleDashboardField(value, field.id, "MAPPING")
+        }
+      ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          variant: "ghost",
+          color: "default",
+          size: "lg",
+          icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
+        }
+      )), /* @__PURE__ */ React.createElement(
+        dropdown.DropdownMenuContent,
+        {
+          css: { minWidth: 180, zIndex: 10 },
+          sideOffset: 4,
+          align: "end"
+        },
+        /* @__PURE__ */ React.createElement(
+          dropdown.DropdownMenuItem,
+          {
+            onClick: () => {
+              handleEditField({
+                type: "SINGLE_MAPPING",
+                values: field,
+                id: field.id
+              });
+              handleDashboardPage(false, "MAPPING");
+            }
+          },
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
+        ),
+        /* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, null, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
+      )))
+    ),
+    /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          height: isMappingDisplayed ? "100%" : 0
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            borderInline: "$borderWidths$xs solid $black400",
+            maxHeight: 734,
+            height: "100%",
+            position: "relative",
+            overflow: "auto",
+            padding: "$16 $36"
+          }
+        },
+        /* @__PURE__ */ React.createElement(SingleMappingEventWrapper, { field }),
+        !!field.questions ? /* @__PURE__ */ React.createElement(
+          SingleMappingChipWrapper,
+          {
+            heading: "Questions",
+            fields: field.questions,
+            backgroundColor: "#E5F2FF"
+          }
+        ) : null,
+        !!field.variables ? /* @__PURE__ */ React.createElement(
+          SingleMappingChipWrapper,
+          {
+            heading: "Variables",
+            placeholder: "$",
+            fields: field.variables,
+            backgroundColor: "$positive100"
+          }
+        ) : null,
+        !!field.contactProperties ? /* @__PURE__ */ React.createElement(
+          SingleMappingChipWrapper,
+          {
+            heading: "Contacts",
+            placeholder: "$",
+            fields: field.contactProperties,
+            backgroundColor: "$negative100"
+          }
+        ) : null,
+        !!field.expressions ? /* @__PURE__ */ React.createElement(
+          SingleMappingChipWrapper,
+          {
+            heading: "Expression",
+            backgroundColor: "$neutral100",
+            fields: field.expressions
+          }
+        ) : null,
+        !!field.property ? /* @__PURE__ */ React.createElement(
+          SingleMappingChipWrapper,
+          {
+            heading: "Property",
+            hideBorder: true,
+            fields: field.property,
+            backgroundColor: "rgba(74, 156, 166, 0.15)"
+          }
+        ) : null
+      ),
+      isMappingDisplayed && /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            padding: "$8 $32",
+            border: "$borderWidths$xs solid $black400",
+            borderTop: "$borderWidths$xs solid $neutral200",
+            borderRadius: "0 0 $2xl $2xl",
+            height: "100%"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          button.Button,
+          {
+            size: "sm",
+            leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
+            color: "primary",
+            variant: "ghost",
+            onClick: () => {
+              handleEditField({
+                type: "SINGLE_MAPPING",
+                values: field,
+                id: field.id
+              });
+              handleDashboardPage(false, "MAPPING");
+            }
+          },
+          "Edit Mapping"
+        )
+      )
+    )
+  );
+};
+const EventComponent = ({
+  heading,
+  description,
+  hasBorder
+}) => {
+  return /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, hasBorder && /* @__PURE__ */ React.createElement(box.Box, { css: { paddingInline: "$3" } }, /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: {
+        height: "$3",
+        width: "1px",
+        background: "$neutral200",
+        marginInline: "$4"
+      }
+    }
+  )), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral800" } }, description)));
+};
+const SingleMappingEventWrapper = ({
+  field,
+  isTrigger
+}) => {
+  const hasEventSection = !!field.email || !!field.action || !!field.exisitingSheet || !!field.object && isTrigger;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, hasEventSection ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { textTransform: "uppercase" } }, "Event"), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, !!field.email ? /* @__PURE__ */ React.createElement(EventComponent, { heading: "Account:", description: field.email }) : null, !!field.object ? /* @__PURE__ */ React.createElement(
+    EventComponent,
+    {
+      heading: "Object:",
+      description: field.object.toLowerCase()
+    }
+  ) : null, !!field.action ? /* @__PURE__ */ React.createElement(
+    EventComponent,
+    {
+      hasBorder: true,
+      heading: "Action:",
+      description: field.action
+    }
+  ) : null, !!field.exisitingSheet ? /* @__PURE__ */ React.createElement(
+    EventComponent,
+    {
+      hasBorder: true,
+      heading: "Existing Sheet:",
+      description: field.exisitingSheet
+    }
+  ) : null), /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: {
+        marginBlock: "$4",
+        height: "1px",
+        background: "$neutral100"
+      }
+    }
+  )) : null);
+};
+const SingleMappingChipWrapper = ({
+  heading,
+  fields,
+  hideBorder,
+  placeholder,
+  backgroundColor
+}) => {
+  const modifiedFields = Object.values(fields).filter(
+    (field) => field.id !== "ALL"
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6", css: { paddingBlock: "$8" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { textTransform: "uppercase" } }, heading), /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      wrap: "wrap",
+      css: {
+        columnGap: "$2",
+        rowGap: "$4",
+        "& > * ": { fontFamily: "Roboto Mono !important" }
+      }
+    },
+    modifiedFields.map((field) => {
+      var _a, _b;
+      const chipRef = React.useRef(null);
+      const name = `${!!placeholder ? placeholder : ""}${(_a = field == null ? void 0 : field.name) != null ? _a : field == null ? void 0 : field.label}`;
+      const currentChipWidth = (_b = chipRef.current) == null ? void 0 : _b.offsetWidth;
+      return /* @__PURE__ */ React.createElement(
+        tooltip.Tooltip,
+        {
+          delayDuration: 300,
+          content: currentChipWidth >= 248 ? name : "",
+          size: "md",
+          sideOffset: 4
+        },
+        /* @__PURE__ */ React.createElement(
+          chip.Chip,
+          {
+            ref: chipRef,
+            size: "md",
+            css: {
+              background: backgroundColor,
+              maxWidth: 248,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              display: "block"
+            }
+          },
+          name
+        )
+      );
+    })
+  )), !hideBorder && /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: { marginBlock: "$4", height: "1px", background: "$neutral100" }
+    }
+  ));
+};
+const DashboardItem = ({
+  icon,
+  heading,
+  description,
+  fields,
+  integrationName,
+  isEnabled,
+  handleEditField,
+  id,
+  handleDashboardPage,
+  type,
+  handleDashboardField,
+  deleteFieldHandler
+}) => {
+  const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
+  const getDefaultFieldValue = (defaultValue) => {
+    var _a;
+    let field = "--";
+    switch (defaultValue == null ? void 0 : defaultValue.type) {
+      case "DATE_TIME": {
+        field = dayjs_min.default(
+          `${defaultValue.value.year}-${defaultValue.value.month}-${defaultValue.value.day}`
+        ).format("D MMM, YYYY");
+        break;
+      }
+      case "STRING": {
+        field = defaultValue == null ? void 0 : defaultValue.value;
+        break;
+      }
+      default: {
+        field = (_a = defaultValue == null ? void 0 : defaultValue.value) == null ? void 0 : _a.label;
+        break;
+      }
+    }
+    return field;
+  };
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      flexDirection: "column",
+      css: { width: "100%", height: "100%", overflow: "auto" }
+    },
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: {
+          border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
+          borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
+          padding: "$10 $12",
+          width: "100%",
+          backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
+        },
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          alignItems: "center",
+          gap: "$4",
+          css: { cursor: "pointer" },
+          onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
+        },
+        isMappingDisplayed ? /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 40, color: "#848484" }),
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, description)))
+      ),
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(
+        _switch.Switch,
+        {
+          size: "md",
+          checked: isEnabled,
+          onChange: (value) => handleDashboardField(value, id, type)
+        }
+      ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          variant: "ghost",
+          color: "default",
+          size: "lg",
+          icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
+        }
+      )), /* @__PURE__ */ React.createElement(
+        dropdown.DropdownMenuContent,
+        {
+          css: { minWidth: 180, zIndex: 10 },
+          sideOffset: 4,
+          align: "end"
+        },
+        /* @__PURE__ */ React.createElement(
+          dropdown.DropdownMenuItem,
+          {
+            onClick: () => {
+              handleEditField({
+                type,
+                values: fields,
+                id
+              });
+              handleDashboardPage(false, type);
+            }
+          },
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
+        ),
+        /* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, { onClick: () => deleteFieldHandler(id) }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
+      )))
+    ),
+    /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          height: isMappingDisplayed ? "100%" : 0
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            borderInline: "$borderWidths$xs solid $black400",
+            maxHeight: 432,
+            height: "100%",
+            position: "relative",
+            overflow: "auto"
+          }
+        },
+        (fields == null ? void 0 : fields.length) ? /* @__PURE__ */ React.createElement(table.Table, { css: { borderCollapse: "collapse", width: "100%" } }, /* @__PURE__ */ React.createElement(
+          table.Thead,
+          {
+            css: {
+              background: "$white900",
+              "& th": {
+                padding: "$7 $8",
+                fontSize: "$sm",
+                lineHeight: "$sm",
+                textAlign: "left",
+                borderInline: "none"
+              },
+              borderBottom: "$borderWidths$xs solid $neutral100",
+              position: "sticky",
+              top: 0,
+              zIndex: 10
+            }
+          },
+          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingLeft: "$38 !important" } }, "Type"),
+          /* @__PURE__ */ React.createElement(table.Th, null, "SurveySparrow Field"),
+          /* @__PURE__ */ React.createElement(table.Th, null, `${integrationName} Field`),
+          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingRight: "$20 !important" } }, "Default Value")
+        ), /* @__PURE__ */ React.createElement(
+          table.Tbody,
+          {
+            css: {
+              "& tr:last-child": {
+                borderBottom: 0
+              }
+            }
+          },
+          fields.map((field) => {
+            var _a, _b, _c;
+            return /* @__PURE__ */ React.createElement(
+              table.Tr,
+              {
+                css: {
+                  borderBottom: "$borderWidths$xs solid $neutral100",
+                  "& td": {
+                    padding: "$7 $8",
+                    fontSize: "$sm",
+                    lineHeight: "$sm",
+                    borderInline: "none"
+                  },
+                  "& td:first-child": {
+                    paddingLeft: "$38 !important"
+                  },
+                  "& td:last-child": {
+                    paddingRight: "$20 !important"
+                  }
+                }
+              },
+              /* @__PURE__ */ React.createElement(table.Td, null, (_a = field.mappedType) == null ? void 0 : _a.label),
+              /* @__PURE__ */ React.createElement(table.Td, null, (_b = field.surveySparrowField) == null ? void 0 : _b.label),
+              /* @__PURE__ */ React.createElement(table.Td, null, (_c = field.integrationField) == null ? void 0 : _c.label),
+              /* @__PURE__ */ React.createElement(table.Td, null, getDefaultFieldValue(field.defaultValue))
+            );
+          })
+        )) : null
+      ),
+      isMappingDisplayed && /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            padding: "$8 $32",
+            border: "$borderWidths$xs solid $black400",
+            borderRadius: "0 0 $2xl $2xl",
+            height: "100%"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          button.Button,
+          {
+            size: "sm",
+            onClick: () => {
+              handleEditField({
+                type,
+                values: fields,
+                id
+              });
+              handleDashboardPage(false, type);
+            },
+            leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
+            color: "primary",
+            variant: "ghost"
+          },
+          `Edit ${heading}`
+        )
+      )
+    )
+  );
+};
+const DropdownItem = ({
+  icon,
+  heading,
+  description,
+  onClickHandler,
+  isDisabled
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    dropdown.DropdownMenuItem,
+    {
+      css: { cursor: isDisabled ? "not-allowed" : "pointer" },
+      onClick: onClickHandler,
+      disabled: isDisabled
+    },
+    /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "flex-start", gap: "$4" }, /* @__PURE__ */ React.createElement(box.Box, { css: { width: "$6" } }, icon), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md" }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral700" } }, description)))
+  );
+};
+
+exports.default = Dashboard;
+//# sourceMappingURL=dashboard.js.map