@sparrowengg/integrations-templates-frontend 1.9.0 → 1.9.2

package/dist/cjs/commons/components/draftModal.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialogs-manager/index.js');
+
+function DraftModal({ onSaveHandler, onCloseHandler }) {
+  index.dialogs.open("confirm", {
+    title: "You will be redirected",
+    content: "To create a new share channel, we'll navigate you to the Share section. Your changes will be saved as a draft",
+    labels: {
+      confirm: "Yes, Proceed",
+      cancel: "Cancel"
+    },
+    css: {
+      "*": {
+        fontFamily: "DM Sans !important"
+      },
+      minWidth: "464px",
+      '[class$="variant-solid"]:nth-child(1)': {
+        width: "106px",
+        marginLeft: "auto"
+      }
+    },
+    confirmButtonProps: {
+      color: "primary"
+    },
+    onConfirm: () => {
+      onSaveHandler();
+    },
+    onClose: () => {
+      onCloseHandler();
+    }
+  });
+  return /* @__PURE__ */ React.createElement(index.DialogsManager, null);
+}
+
+exports.default = DraftModal;
+//# sourceMappingURL=draftModal.js.map

package/dist/cjs/commons/components/draftModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draftModal.js","sources":["../../../../src/commons/components/draftModal.tsx"],"sourcesContent":["import React from 'react'\nimport { dialogs, DialogsManager } from '@sparrowengg/twigs-react'\n\nexport default function DraftModal({onSaveHandler, onCloseHandler}: {onSaveHandler: any, onCloseHandler: any}) {\n  dialogs.open('confirm', {\n    \n    title: \"You will be redirected\",\n    content: \"To create a new share channel, we'll navigate you to the Share section. Your changes will be saved as a draft\",\n    labels: {\n      confirm: \"Yes, Proceed\",\n      cancel: \"Cancel\",\n    },\n    css: {\n      '*': {\n        fontFamily: 'DM Sans !important'\n      },\n      minWidth: '464px',\n      '[class$=\"variant-solid\"]:nth-child(1)': {\n        width: '106px',\n        marginLeft: 'auto'\n      }\n    },\n    confirmButtonProps: {\n      color: 'primary',\n    },\n    onConfirm: () => {\n      onSaveHandler();\n    },\n    onClose: () => {\n      onCloseHandler();\n    }\n  });\n  return (\n    <DialogsManager />\n  )\n}\n"],"names":["dialogs","DialogsManager"],"mappings":";;;;;;;AAGA,SAAwB,UAAW,CAAA,EAAC,aAAe,EAAA,cAAA,EAA4D,EAAA;AAC7G,EAAAA,aAAA,CAAQ,KAAK,SAAW,EAAA;AAAA,IAEtB,KAAO,EAAA,wBAAA;AAAA,IACP,OAAS,EAAA,+GAAA;AAAA,IACT,MAAQ,EAAA;AAAA,MACN,OAAS,EAAA,cAAA;AAAA,MACT,MAAQ,EAAA,QAAA;AAAA,KACV;AAAA,IACA,GAAK,EAAA;AAAA,MACH,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,oBAAA;AAAA,OACd;AAAA,MACA,QAAU,EAAA,OAAA;AAAA,MACV,uCAAyC,EAAA;AAAA,QACvC,KAAO,EAAA,OAAA;AAAA,QACP,UAAY,EAAA,MAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,kBAAoB,EAAA;AAAA,MAClB,KAAO,EAAA,SAAA;AAAA,KACT;AAAA,IACA,WAAW,MAAM;AACf,MAAc,aAAA,EAAA,CAAA;AAAA,KAChB;AAAA,IACA,SAAS,MAAM;AACb,MAAe,cAAA,EAAA,CAAA;AAAA,KACjB;AAAA,GACD,CAAA,CAAA;AACD,EAAA,2CACGC,oBAAe,EAAA,IAAA,CAAA,CAAA;AAEpB;;;;"}

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

@@ -19,14 +19,23 @@ var tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/toolt
 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 chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.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 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 trasformToPastTense = (value) => {
+  if (value.endsWith("e")) {
+    return value + "d";
+  } else if (value.endsWith("y")) {
+    return value.slice(0, -1) + "ied";
+  } else {
+    return value + "ed";
+  }
+};
 const Dashboard = ({
   onMappingEditHandler,
   fieldOptions,
@@ -96,40 +105,46 @@ const Dashboard = ({
         }
       ) : null
     )))
-  ), /* @__PURE__ */ React.createElement(box.Box, { css: {
-    marginBottom: "$20 !important"
-  } }, hasMultiAccounts ? /* @__PURE__ */ React.createElement(
-    MultiAccountDashboard,
-    {
-      onMappingEditHandler,
-      fieldOptions,
-      triggerEnabled,
-      mappingEnabled,
-      mappingFields,
-      triggerFields,
-      integrationName,
-      handleDashboardPage,
-      handleEditField,
-      handleConfigurationType,
-      toggleDashboardField,
-      deleteFieldHandler
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    SingleAccountDashboard,
+  ), /* @__PURE__ */ React.createElement(
+    box.Box,
     {
-      onMappingEditHandler,
-      fieldOptions,
-      triggerEnabled,
-      mappingEnabled,
-      mappingFields,
-      triggerFields,
-      integrationName,
-      handleDashboardPage,
-      handleEditField,
-      toggleDashboardField,
-      deleteFieldHandler
-    }
-  ))));
+      css: {
+        marginBottom: "$20 !important"
+      }
+    },
+    hasMultiAccounts ? /* @__PURE__ */ React.createElement(
+      MultiAccountDashboard,
+      {
+        onMappingEditHandler,
+        fieldOptions,
+        triggerEnabled,
+        mappingEnabled,
+        mappingFields,
+        triggerFields,
+        integrationName,
+        handleDashboardPage,
+        handleEditField,
+        handleConfigurationType,
+        toggleDashboardField,
+        deleteFieldHandler
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      SingleAccountDashboard,
+      {
+        onMappingEditHandler,
+        fieldOptions,
+        triggerEnabled,
+        mappingEnabled,
+        mappingFields,
+        triggerFields,
+        integrationName,
+        handleDashboardPage,
+        handleEditField,
+        toggleDashboardField,
+        deleteFieldHandler
+      }
+    )
+  )));
 };
 const MultiAccountDashboard = ({
   onMappingEditHandler,
@@ -162,15 +177,16 @@ const MultiAccountDashboard = ({
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
     /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, triggerFields == null ? void 0 : triggerFields.map((field) => {
-      var _a2;
+      var _a2, _b2, _c2;
       return /* @__PURE__ */ React.createElement(
         DashboardItem,
         {
+          isDraft: field == null ? void 0 : field.isDraft,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
           heading: (_a2 = field.domain) != null ? _a2 : field.email,
           id: field.id,
-          description: `Trigger survey when an event happens in ${integrationName}`,
+          description: `Trigger survey when an ${(_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2.toLowerCase()} event is ${(_c2 = field == null ? void 0 : field.action) == null ? void 0 : _c2.toLowerCase()} in ${integrationName}`,
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
@@ -182,15 +198,16 @@ const MultiAccountDashboard = ({
         }
       );
     })) : null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _b.map((field) => {
-      var _a2;
+      var _a2, _b2, _c2, _d2, _e;
       return /* @__PURE__ */ React.createElement(React.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
         DashboardItem,
         {
+          isDraft: field == null ? void 0 : field.isDraft,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
           heading: (_a2 = field.domain) != null ? _a2 : field.email,
           id: field.id,
-          description: `Sync survey responses to ${integrationName}`,
+          description: `Sync survey responses to ${integrationName} when ${(_c2 = (_b2 = field == null ? void 0 : field.events) == null ? void 0 : _b2.value) == null ? void 0 : _c2.toLowerCase()} is ${trasformToPastTense(`${(_e = (_d2 = field == null ? void 0 : field.actions) == null ? void 0 : _d2.value) == null ? void 0 : _e.toLowerCase()}`)}`,
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
@@ -220,24 +237,28 @@ const MultiAccountDashboard = ({
       value: "TRIGGER",
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
-    !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, triggerFields == null ? void 0 : triggerFields.map((field) => /* @__PURE__ */ React.createElement(
-      DashboardItem,
-      {
-        onMappingEditHandler,
-        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",
-        toggleDashboardField,
-        deleteFieldHandler
-      }
-    ))) : /* @__PURE__ */ React.createElement(
+    !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, triggerFields == null ? void 0 : triggerFields.map((field) => {
+      var _a2, _b2;
+      return /* @__PURE__ */ React.createElement(
+        DashboardItem,
+        {
+          isDraft: field == null ? void 0 : field.isDraft,
+          onMappingEditHandler,
+          icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
+          heading: "Trigger",
+          id: field.id,
+          description: `Trigger survey when an ${(_a2 = field == null ? void 0 : field.object) == null ? void 0 : _a2.toLowerCase()} event is ${(_b2 = field == null ? void 0 : field.action) == null ? void 0 : _b2.toLowerCase()} in ${integrationName}`,
+          fields: field.fields,
+          isEnabled: field.isEnabled,
+          integrationName,
+          handleDashboardPage,
+          handleEditField,
+          type: "TRIGGER",
+          toggleDashboardField,
+          deleteFieldHandler
+        }
+      );
+    })) : /* @__PURE__ */ React.createElement(
       MultiAccountFallback,
       {
         title: "Trigger",
@@ -250,36 +271,40 @@ const MultiAccountDashboard = ({
       value: "MAPPING",
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
-    !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map((field) => /* @__PURE__ */ React.createElement(React.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
-      DashboardItem,
-      {
-        onMappingEditHandler,
-        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",
-        toggleDashboardField,
-        deleteFieldHandler
-      }
-    ) : /* @__PURE__ */ React.createElement(
-      SingleMappingDashboardItem,
-      {
-        field,
-        key: field.id,
-        integrationName,
-        icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-        handleEditField,
-        handleDashboardPage,
-        toggleDashboardField,
-        deleteFieldHandler
-      }
-    ))))) : /* @__PURE__ */ React.createElement(
+    !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map((field) => {
+      var _a2, _b2, _c2, _d2;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
+        DashboardItem,
+        {
+          isDraft: field == null ? void 0 : field.isDraft,
+          onMappingEditHandler,
+          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+          heading: "Mapping",
+          id: field.id,
+          description: `Sync survey responses to ${integrationName} when ${(_b2 = (_a2 = field == null ? void 0 : field.events) == null ? void 0 : _a2.value) == null ? void 0 : _b2.toLowerCase()} is ${trasformToPastTense(`${(_d2 = (_c2 = field == null ? void 0 : field.actions) == null ? void 0 : _c2.value) == null ? void 0 : _d2.toLowerCase()}`)}`,
+          fields: field.fields,
+          isEnabled: field.isEnabled,
+          integrationName,
+          handleDashboardPage,
+          handleEditField,
+          type: "MAPPING",
+          toggleDashboardField,
+          deleteFieldHandler
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        SingleMappingDashboardItem,
+        {
+          field,
+          key: field.id,
+          integrationName,
+          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+          handleEditField,
+          handleDashboardPage,
+          toggleDashboardField,
+          deleteFieldHandler
+        }
+      ));
+    }))) : /* @__PURE__ */ React.createElement(
       MultiAccountFallback,
       {
         title: "Mapping",
@@ -340,38 +365,46 @@ const SingleAccountDashboard = ({
   deleteFieldHandler
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: "$20" } }, triggerFields == null ? void 0 : triggerFields.map((field) => /* @__PURE__ */ React.createElement(
-    TriggerDasboardItem,
-    {
-      fieldOptions,
-      field,
-      description: `Trigger survey when an event happens in ${integrationName}`,
-      key: field.id,
-      integrationName,
-      icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
-      handleEditField,
-      handleDashboardPage,
-      toggleDashboardField,
-      deleteFieldHandler
-    }
-  ))) : null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) && (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_b = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _b.map((field) => /* @__PURE__ */ React.createElement(
-    DashboardItem,
-    {
-      onMappingEditHandler,
-      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",
-      toggleDashboardField,
-      deleteFieldHandler
-    }
-  ))) : null, (mappingFields == null ? void 0 : mappingFields.type) !== "MULTI_MAPPING" && !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map((field) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: "$20" } }, triggerFields == null ? void 0 : triggerFields.map((field) => {
+    var _a2, _b2;
+    return /* @__PURE__ */ React.createElement(
+      TriggerDasboardItem,
+      {
+        isDraft: field == null ? void 0 : field.isDraft,
+        fieldOptions,
+        field,
+        description: `Trigger survey when ${/^[aeiouAEIOU]$/.test(field == null ? void 0 : field.object[0]) ? "an" : "a"} ${(_a2 = field == null ? void 0 : field.object) == null ? void 0 : _a2.toLowerCase()} event is ${(_b2 = field == null ? void 0 : field.action) == null ? void 0 : _b2.toLowerCase()} in ${integrationName}`,
+        key: field.id,
+        integrationName,
+        icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
+        handleEditField,
+        handleDashboardPage,
+        toggleDashboardField,
+        deleteFieldHandler
+      }
+    );
+  })) : null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) && (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_b = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _b.map((field) => {
+    var _a2, _b2, _c2, _d2;
+    return /* @__PURE__ */ React.createElement(
+      DashboardItem,
+      {
+        isDraft: field == null ? void 0 : field.isDraft,
+        onMappingEditHandler,
+        icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+        heading: "Mapping",
+        id: field.id,
+        description: `Sync survey responses to ${integrationName} when ${(_b2 = (_a2 = field == null ? void 0 : field.events) == null ? void 0 : _a2.value) == null ? void 0 : _b2.toLowerCase()} is ${trasformToPastTense(`${(_d2 = (_c2 = field == null ? void 0 : field.actions) == null ? void 0 : _c2.value) == null ? void 0 : _d2.toLowerCase()}`)}`,
+        fields: field.fields,
+        isEnabled: field.isEnabled,
+        integrationName,
+        handleDashboardPage,
+        handleEditField,
+        type: "MAPPING",
+        toggleDashboardField,
+        deleteFieldHandler
+      }
+    );
+  })) : null, (mappingFields == null ? void 0 : mappingFields.type) !== "MULTI_MAPPING" && !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map((field) => /* @__PURE__ */ React.createElement(
     SingleMappingDashboardItem,
     {
       field,
@@ -386,6 +419,7 @@ const SingleAccountDashboard = ({
   ))) : null);
 };
 const TriggerDasboardItem = ({
+  isDraft,
   fieldOptions,
   icon,
   field,
@@ -407,7 +441,9 @@ const TriggerDasboardItem = ({
         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;
-        const fieldLabel = (_b2 = fieldOptions.find((options) => options.value === field2)) == null ? void 0 : _b2.label;
+        const fieldLabel = (_b2 = fieldOptions.find(
+          (options) => options.value === field2
+        )) == null ? void 0 : _b2.label;
         return `${fieldLabel} ${formattedComparator === "NO_PREFERENCE" ? "has no preference" : formattedComparator} ${value}`;
       })) == null ? void 0 : _a2.join(
         ` <span style="color: #6A6A6A;font-weight: 600;">${filterGroup.condition.toLowerCase()}</span> `
@@ -447,7 +483,32 @@ const TriggerDasboardItem = ({
         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" } }, description != null ? description : `Trigger survey when an event happens in ${integrationName}`)))
       ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, isDraft && /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(chip.Chip, { rounded: "full", size: "sm" }, /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            background: "$neutral500",
+            borderRadius: "50%",
+            marginRight: "$1",
+            width: "$4",
+            height: "$4"
+          }
+        }
+      ), /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          size: "sm",
+          weight: "bold",
+          css: {
+            color: "$neutral800"
+          }
+        },
+        "DRAFT"
+      )), /* @__PURE__ */ React.createElement(box.Box, { css: {
+        width: "1px",
+        height: "20px",
+        background: "#64748B20"
+      } })), /* @__PURE__ */ React.createElement(
         _switch.Switch,
         {
           size: "md",
@@ -792,7 +853,10 @@ const SingleMappingEventWrapper = ({
     EventComponent,
     {
       heading: "Object:",
-      description: (_a = field.object) == null ? void 0 : _a.replace(/^./, (char) => char == null ? void 0 : char.toUpperCase())
+      description: (_a = field.object) == null ? void 0 : _a.replace(
+        /^./,
+        (char) => char == null ? void 0 : char.toUpperCase()
+      )
     }
   ) : null, !!field.action ? /* @__PURE__ */ React.createElement(
     EventComponent,
@@ -878,6 +942,7 @@ const SingleMappingChipWrapper = ({
   ));
 };
 const DashboardItem = ({
+  isDraft,
   onMappingEditHandler,
   icon,
   heading,
@@ -946,7 +1011,32 @@ const DashboardItem = ({
         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(
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, isDraft && /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(chip.Chip, { rounded: "full", size: "sm" }, /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            background: "$neutral500",
+            borderRadius: "50%",
+            marginRight: "$1",
+            width: "$4",
+            height: "$4"
+          }
+        }
+      ), /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          size: "sm",
+          weight: "bold",
+          css: {
+            color: "$neutral800"
+          }
+        },
+        "DRAFT"
+      )), /* @__PURE__ */ React.createElement(box.Box, { css: {
+        width: "1px",
+        height: "20px",
+        background: "#64748B20"
+      } })), /* @__PURE__ */ React.createElement(
         _switch.Switch,
         {
           size: "md",
@@ -1111,19 +1201,26 @@ const DropdownItem = ({
   isDisabled,
   toolTipContent
 }) => {
-  return /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: isDisabled ? toolTipContent : "", css: {
-    zIndex: "99999999",
-    minWidth: "280px",
-    textAlign: "center"
-  } }, /* @__PURE__ */ React.createElement(flex.Flex, null, /* @__PURE__ */ React.createElement(
-    dropdown.DropdownMenuItem,
+  return /* @__PURE__ */ React.createElement(
+    tooltip.Tooltip,
     {
-      css: { cursor: isDisabled ? "not-allowed !important" : "pointer" },
-      onClick: onClickHandler,
-      disabled: isDisabled
+      content: isDisabled ? toolTipContent : "",
+      css: {
+        zIndex: "99999999",
+        minWidth: "280px",
+        textAlign: "center"
+      }
     },
-    /* @__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)))
-  )));
+    /* @__PURE__ */ React.createElement(flex.Flex, null, /* @__PURE__ */ React.createElement(
+      dropdown.DropdownMenuItem,
+      {
+        css: { cursor: isDisabled ? "not-allowed !important" : "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;