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

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

@@ -63,7 +63,17 @@ const Dashboard = ({
       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: "$neutral700" } }, 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"), hasDropdownComponents.mapping && !hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "primary", disabled: !mappingEnabled, leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null), onClick: () => handleConfigurationType("MAPPING") }, "New Mapping") : null, hasDropdownComponents.trigger && hasDropdownComponents.mapping ? /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(
+    /* @__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"), hasDropdownComponents.mapping && !hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        color: "primary",
+        disabled: !mappingEnabled,
+        leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null),
+        onClick: () => handleConfigurationType("MAPPING")
+      },
+      "New Mapping"
+    ) : null, hasDropdownComponents.trigger && hasDropdownComponents.mapping ? /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(
       tooltip.Tooltip,
       {
         content: !triggerEnabled && !mappingEnabled ? "You have reached the maximum limit for creating triggers/mappings" : ""
@@ -190,17 +200,17 @@ 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, _b2, _c2;
+      var _a2, _b2, _c2, _d2, _e;
       return /* @__PURE__ */ React.createElement(
         DashboardItem,
         {
           key: field.id,
-          isDraft: field == null ? void 0 : field.isDraft,
+          isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
-          heading: (_a2 = field.domain) != null ? _a2 : field.email,
+          heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : "Field",
           id: field.id,
-          description: `Trigger survey when an ${(_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2.toLowerCase()} is ${(_c2 = field == null ? void 0 : field.action) == null ? void 0 : _c2.toLowerCase()} in ${integrationName}`,
+          description: `Trigger survey when an ${(_d2 = field == null ? void 0 : field.object) == null ? void 0 : _d2.toLowerCase()} is ${(_e = field == null ? void 0 : field.action) == null ? void 0 : _e.toLowerCase()} in ${integrationName}`,
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
@@ -211,43 +221,45 @@ const MultiAccountDashboard = ({
           deleteFieldHandler
         }
       );
-    })) : 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, _b2, _c2, _d2, _e, _f, _g;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
-        DashboardItem,
-        {
-          key: field.id,
-          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} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.action) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()}`)}`,
-          fields: field.fields,
-          isEnabled: field.isEnabled,
-          integrationName,
-          handleDashboardPage,
-          handleEditField,
-          type: "MAPPING",
-          toggleDashboardField,
-          deleteFieldHandler
-        }
-      ) : /* @__PURE__ */ React.createElement(
-        SingleMappingDashboardItem,
-        {
-          key: field.id,
-          field,
-          integrationName,
-          syncMapping,
-          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-          handleEditField,
-          handleDashboardPage,
-          toggleDashboardField,
-          deleteFieldHandler,
-          onMappingEditHandler
-        }
-      ));
-    })) : null)
+    })) : 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, _b2, _c2, _d2, _e, _f, _g, _h, _i;
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
+          DashboardItem,
+          {
+            key: field.id,
+            isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
+            onMappingEditHandler,
+            icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+            heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : "Field",
+            id: field.id,
+            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_f = (_e = (_d2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _d2.events) == null ? void 0 : _e.label) == null ? void 0 : _f.toLowerCase()} is ${trasformToPastTense(`${(_i = (_h = (_g = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _g.action) == null ? void 0 : _h.label) == null ? void 0 : _i.toLowerCase()}`)}`,
+            fields: field.fields,
+            isEnabled: field.isEnabled,
+            integrationName,
+            handleDashboardPage,
+            handleEditField,
+            type: "MAPPING",
+            toggleDashboardField,
+            deleteFieldHandler
+          }
+        ) : /* @__PURE__ */ React.createElement(
+          SingleMappingDashboardItem,
+          {
+            key: field.id,
+            field,
+            integrationName,
+            syncMapping,
+            icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+            handleEditField,
+            handleDashboardPage,
+            toggleDashboardField,
+            deleteFieldHandler,
+            onMappingEditHandler
+          }
+        ));
+      }
+    )) : null)
   ), /* @__PURE__ */ React.createElement(
     tabs.TabsContent,
     {
@@ -255,17 +267,17 @@ const MultiAccountDashboard = ({
       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) => {
-      var _a2, _b2;
+      var _a2, _b2, _c2;
       return /* @__PURE__ */ React.createElement(
         DashboardItem,
         {
           key: field.id,
-          isDraft: field == null ? void 0 : field.isDraft,
+          isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
           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()} is ${(_b2 = field == null ? void 0 : field.action) == null ? void 0 : _b2.toLowerCase()} in ${integrationName}`,
+          description: `Trigger survey when an ${(_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2.toLowerCase()} is ${(_c2 = field == null ? void 0 : field.action) == null ? void 0 : _c2.toLowerCase()} in ${integrationName}`,
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
@@ -289,43 +301,45 @@ 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) => {
-      var _a2, _b2, _c2, _d2, _e, _f;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, mappingFields.type === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
-        DashboardItem,
-        {
-          key: field.id,
-          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 ${(_c2 = (_b2 = (_a2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _a2.events) == null ? void 0 : _b2.label) == null ? void 0 : _c2.toLowerCase()} is ${trasformToPastTense(`${(_f = (_e = (_d2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _d2.action) == null ? void 0 : _e.label) == null ? void 0 : _f.toLowerCase()}`)}`,
-          fields: field.fields,
-          isEnabled: field.isEnabled,
-          integrationName,
-          handleDashboardPage,
-          handleEditField,
-          type: "MAPPING",
-          toggleDashboardField,
-          deleteFieldHandler
-        }
-      ) : /* @__PURE__ */ React.createElement(
-        SingleMappingDashboardItem,
-        {
-          key: field.id,
-          field,
-          integrationName,
-          syncMapping,
-          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-          handleEditField,
-          handleDashboardPage,
-          toggleDashboardField,
-          deleteFieldHandler,
-          onMappingEditHandler
-        }
-      ));
-    }))) : /* @__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, _e, _f, _g;
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
+          DashboardItem,
+          {
+            key: field.id,
+            isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
+            onMappingEditHandler,
+            icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+            heading: (field == null ? void 0 : field.mappingName) || "Mapping",
+            id: field.id,
+            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.action) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()}`)}`,
+            fields: field.fields,
+            isEnabled: field.isEnabled,
+            integrationName,
+            handleDashboardPage,
+            handleEditField,
+            type: "MAPPING",
+            toggleDashboardField,
+            deleteFieldHandler
+          }
+        ) : /* @__PURE__ */ React.createElement(
+          SingleMappingDashboardItem,
+          {
+            key: field.id,
+            field,
+            integrationName,
+            syncMapping,
+            icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+            handleEditField,
+            handleDashboardPage,
+            toggleDashboardField,
+            deleteFieldHandler,
+            onMappingEditHandler
+          }
+        ));
+      }
+    ))) : /* @__PURE__ */ React.createElement(
       MultiAccountFallback,
       {
         title: "Mapping",
@@ -386,16 +400,16 @@ const SingleAccountDashboard = ({
   toggleDashboardField,
   deleteFieldHandler
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   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;
+    var _a2, _b2, _c2, _d2;
     return /* @__PURE__ */ React.createElement(
       TriggerDasboardItem,
       {
-        isDraft: field == null ? void 0 : field.isDraft,
+        isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
         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()} is ${(_b2 = field == null ? void 0 : field.action) == null ? void 0 : _b2.toLowerCase()} in ${integrationName}`,
+        description: `Trigger survey when ${/^[aeiouAEIOU]$/.test(((_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2[0]) || "") ? "an" : "a"} ${(_c2 = field == null ? void 0 : field.object) == null ? void 0 : _c2.toLowerCase()} is ${(_d2 = field == null ? void 0 : field.action) == null ? void 0 : _d2.toLowerCase()} in ${integrationName}`,
         key: field.id,
         integrationName,
         icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
@@ -405,28 +419,71 @@ const SingleAccountDashboard = ({
         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, _e2, _f2;
-    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 ${(_c2 = (_b2 = (_a2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _a2.events) == null ? void 0 : _b2.label) == null ? void 0 : _c2.toLowerCase()} is ${trasformToPastTense(`${(_f2 = (_e2 = (_d2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _d2.action) == null ? void 0 : _e2.label) == null ? void 0 : _f2.toLowerCase()}`)}`,
-        fields: field.fields,
-        isEnabled: field.isEnabled,
-        integrationName,
-        handleDashboardPage,
-        handleEditField,
-        type: "MAPPING",
-        toggleDashboardField,
-        deleteFieldHandler
+  })) : null, (mappingFields == null ? void 0 : mappingFields.type) === "DYNAMIC_MAPPING" ? /* @__PURE__ */ React.createElement(React.Fragment, null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) ? /* @__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, _e2, _f2, _g2;
+      if ((field == null ? void 0 : field.type) === "MULTI_MAPPING") {
+        return /* @__PURE__ */ React.createElement(
+          DashboardItem,
+          {
+            isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
+            onMappingEditHandler,
+            icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+            heading: (field == null ? void 0 : field.mappingName) || "Mapping",
+            id: field.id,
+            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g2 = (_f2 = (_e2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e2.action) == null ? void 0 : _f2.label) == null ? void 0 : _g2.toLowerCase()}`)}`,
+            fields: field.fields,
+            isEnabled: field.isEnabled,
+            integrationName,
+            handleDashboardPage,
+            handleEditField,
+            type: "MAPPING",
+            toggleDashboardField,
+            deleteFieldHandler
+          }
+        );
+      } else {
+        return /* @__PURE__ */ React.createElement(
+          SingleMappingDashboardItem,
+          {
+            onMappingEditHandler,
+            syncMapping,
+            field,
+            key: field == null ? void 0 : field.id,
+            integrationName,
+            icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+            handleEditField,
+            handleDashboardPage,
+            toggleDashboardField,
+            deleteFieldHandler
+          }
+        );
       }
-    );
-  })) : null, ((_c = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _c.type) === "SINGLE_MAPPING" && !!((_e = (_d = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _d.fields) == null ? void 0 : _e.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_g = (_f = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _f.fields) == null ? void 0 : _g.map(
+    }
+  )) : null) : /* @__PURE__ */ React.createElement(React.Fragment, null, !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) && (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__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) => {
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+      return /* @__PURE__ */ React.createElement(
+        DashboardItem,
+        {
+          isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
+          onMappingEditHandler,
+          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
+          heading: (field == null ? void 0 : field.mappingName) || "Mapping",
+          id: field.id,
+          description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g2 = (_f2 = (_e2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e2.action) == null ? void 0 : _f2.label) == null ? void 0 : _g2.toLowerCase()}`)}`,
+          fields: field.fields,
+          isEnabled: field.isEnabled,
+          integrationName,
+          handleDashboardPage,
+          handleEditField,
+          type: "MAPPING",
+          toggleDashboardField,
+          deleteFieldHandler
+        }
+      );
+    }
+  )) : null, ((_e = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _e.type) === "SINGLE_MAPPING" && !!((_g = (_f = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _f.fields) == null ? void 0 : _g.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_i = (_h = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _h.fields) == null ? void 0 : _i.map(
     (field, index) => {
       return /* @__PURE__ */ React.createElement(
         SingleMappingDashboardItem,
@@ -444,7 +501,7 @@ const SingleAccountDashboard = ({
         }
       );
     }
-  )) : null);
+  )) : null));
 };
 const TriggerDasboardItem = ({
   isDraft,
@@ -458,7 +515,7 @@ const TriggerDasboardItem = ({
   toggleDashboardField,
   deleteFieldHandler
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
   const transformDataToString = (data) => {
@@ -619,7 +676,7 @@ const TriggerDasboardItem = ({
         }
       },
       /* @__PURE__ */ React.createElement(SingleMappingEventWrapper, { isTrigger: true, field }),
-      ((_c = (_b = field == null ? void 0 : field.fields) == null ? void 0 : _b.filters) == null ? void 0 : _c.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      ((_c = (_b = field.fields) == null ? void 0 : _b.filters) == null ? void 0 : _c.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
         flex.Flex,
         {
           flexDirection: "column",
@@ -646,12 +703,10 @@ const TriggerDasboardItem = ({
           }
         }
       )) : null,
-      ((_e = (_d = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _d.variables) == null ? void 0 : _e.filter(
-        (variable) => variable.isEnabled
-      ).length) ? /* @__PURE__ */ React.createElement(
+      ((_g = (_f = (_e = (_d = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _d.variables) == null ? void 0 : _e.filter) == null ? void 0 : _f.call(_e, (variable) => variable.isEnabled)) == null ? void 0 : _g.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: ((_g = (_f = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _f.variables) == null ? void 0 : _g.length) > 1 ? "PASSING VARIABLES TO SURVEY" : "PASSING VARIABLE TO SURVEY",
+          heading: ((_i = (_h = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _h.variables) == null ? void 0 : _i.length) > 1 ? "PASSING VARIABLES TO SURVEY" : "PASSING VARIABLE TO SURVEY",
           fields: field.triggerDetails.variables,
           backgroundColor: "$positive100"
         }
@@ -664,25 +719,25 @@ const TriggerDasboardItem = ({
           css: { paddingBlock: "$8" }
         },
         /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, "SEND SURVEY"),
-        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, ((_i = (_h = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _h.shareType) == null ? void 0 : _i.value) ? /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, ((_k = (_j = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _j.shareType) == null ? void 0 : _k.value) ? /* @__PURE__ */ React.createElement(
           EventComponent,
           {
             heading: "Share Type:",
-            description: (_k = (_j = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _j.shareType) == null ? void 0 : _k.label
+            description: (_m = (_l = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _l.shareType) == null ? void 0 : _m.label
           }
-        ) : null, ((_m = (_l = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _l.shareRecipient) == null ? void 0 : _m.value) ? /* @__PURE__ */ React.createElement(
+        ) : null, ((_o = (_n = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _n.shareRecipient) == null ? void 0 : _o.value) ? /* @__PURE__ */ React.createElement(
           EventComponent,
           {
             heading: "Recipient:",
             hasBorder: true,
-            description: (_o = (_n = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _n.shareRecipient) == null ? void 0 : _o.label
+            description: (_q = (_p = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _p.shareRecipient) == null ? void 0 : _q.label
           }
-        ) : null, ((_q = (_p = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _p.shareChannel) == null ? void 0 : _q.value) ? /* @__PURE__ */ React.createElement(
+        ) : null, ((_s = (_r = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _r.shareChannel) == null ? void 0 : _s.value) ? /* @__PURE__ */ React.createElement(
           EventComponent,
           {
             hasBorder: true,
             heading: "Share Channel:",
-            description: (_s = (_r = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _r.shareChannel) == null ? void 0 : _s.label
+            description: (_u = (_t = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _t.shareChannel) == null ? void 0 : _u.label
           }
         ) : null)
       ))
@@ -739,7 +794,7 @@ const SingleMappingDashboardItem = ({
   integrationName,
   onMappingEditHandler
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z;
   const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
   const [isSyncing, setIsSyncing] = React.useState(null);
@@ -760,7 +815,7 @@ const SingleMappingDashboardItem = ({
         css: {
           border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
           borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
-          padding: "15px $12",
+          padding: (field == null ? void 0 : field.mappingName) || (field == null ? void 0 : field.mappingDescription) ? "$10 $12" : "15px $12",
           width: "100%",
           backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
         },
@@ -776,44 +831,37 @@ const SingleMappingDashboardItem = ({
           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" }, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? icon : null, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (_d = (_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) != null ? _d : "Mapping"), ((_e = field == null ? void 0 : field.configurationFields) == null ? void 0 : _e.sheetURL) && (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", alignItems: "center" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, `Sync `), /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "sm",
-            weight: "bold",
-            css: { color: "$neutral600" }
-          },
-          (field == null ? void 0 : field.importMethod) === "SEND_ALL_DATA" ? "All" : "Specific"
-        ), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, "Survey responses to"), /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "sm",
-            weight: "bold",
-            css: { color: "$neutral600" }
-          },
-          typeof ((_f = field == null ? void 0 : field.configurationFields) == null ? void 0 : _f.spreadsheet) === "object" ? (_i = (_h = (_g = field == null ? void 0 : field.configurationFields) == null ? void 0 : _g.spreadsheet) == null ? void 0 : _h.value) == null ? void 0 : _i.label : (_k = (_j = field == null ? void 0 : field.configurationFields) == null ? void 0 : _j.spreadsheet) == null ? void 0 : _k.value
-        )) : null))
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? icon : null, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (field == null ? void 0 : field.mappingName) ? field == null ? void 0 : field.mappingName : (_d = (_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) != null ? _d : "Mapping"), (field == null ? void 0 : field.mappingDescription) ? /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, (field == null ? void 0 : field.mappingDescription) ? field == null ? void 0 : field.mappingDescription : `Sync survey responses to ${integrationName} when ${(_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.events) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()} is ${trasformToPastTense(`${(_j = (_i = (_h = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _h.action) == null ? void 0 : _i.label) == null ? void 0 : _j.toLowerCase()}`)}`) : null))
       ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Sync", className: "dm-sans" }, /* @__PURE__ */ React.createElement(button.Button, { variant: "ghost", size: "lg", color: "default", css: {
-        width: "40px !important",
-        height: "40px !important",
-        marginInlineEnd: "$3"
-      } }, /* @__PURE__ */ React.createElement(
-        flex.Flex,
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, syncMapping ? /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Sync", className: "dm-sans" }, /* @__PURE__ */ React.createElement(
+        button.Button,
         {
-          className: `rotating-div ${isSyncing === field.id ? "rotate" : ""}`,
-          justifyContent: "center",
-          alignItems: "center",
-          onClick: async () => {
-            setIsSyncing(field.id);
-            setTimeout(async () => {
-              await (syncMapping == null ? void 0 : syncMapping(field.id));
-              setIsSyncing(null);
-            }, 2e3);
+          variant: "ghost",
+          size: "lg",
+          color: "default",
+          css: {
+            width: "40px !important",
+            height: "40px !important",
+            marginInlineEnd: "$3"
           }
         },
-        /* @__PURE__ */ React.createElement(sync.default, null)
-      ))), (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(
+          flex.Flex,
+          {
+            className: `rotating-div ${isSyncing === field.id ? "rotate" : ""}`,
+            justifyContent: "center",
+            alignItems: "center",
+            onClick: async () => {
+              setIsSyncing(field.id);
+              setTimeout(async () => {
+                await (syncMapping == null ? void 0 : syncMapping(field.id));
+                setIsSyncing(null);
+              }, 2e3);
+            }
+          },
+          /* @__PURE__ */ React.createElement(sync.default, null)
+        )
+      )) : null, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0 && syncMapping)() ? /* @__PURE__ */ React.createElement(
         box.Box,
         {
           css: {
@@ -895,76 +943,58 @@ const SingleMappingDashboardItem = ({
         }
       },
       /* @__PURE__ */ React.createElement(SingleMappingEventWrapper, { field }),
-      !!((_m = (_l = field == null ? void 0 : field.mappedFields) == null ? void 0 : _l.questions) == null ? void 0 : _m.filter(
-        (question) => question.isEnabled
-      ).length) ? /* @__PURE__ */ React.createElement(
+      !!((_n = (_m = (_l = (_k = field == null ? void 0 : field.mappedFields) == null ? void 0 : _k.questions) == null ? void 0 : _l.filter) == null ? void 0 : _m.call(_l, (question) => question.isEnabled)) == null ? void 0 : _n.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Questions",
-          fields: (_o = (_n = field == null ? void 0 : field.mappedFields) == null ? void 0 : _n.questions) == null ? void 0 : _o.filter(
-            (question) => question.isEnabled
-          ),
+          fields: (_q = (_p = (_o = field == null ? void 0 : field.mappedFields) == null ? void 0 : _o.questions) == null ? void 0 : _p.filter) == null ? void 0 : _q.call(_p, (question) => question.isEnabled),
           backgroundColor: "#E5F2FF"
         }
       ) : null,
-      !!((_q = (_p = field == null ? void 0 : field.mappedFields) == null ? void 0 : _p.derivedQuestions) == null ? void 0 : _q.filter(
+      !!((_u = (_t = (_s = (_r = field == null ? void 0 : field.mappedFields) == null ? void 0 : _r.derivedQuestions) == null ? void 0 : _s.filter) == null ? void 0 : _t.call(
+        _s,
         (derivedQuestion) => derivedQuestion.isEnabled
-      ).length) ? /* @__PURE__ */ React.createElement(
+      )) == null ? void 0 : _u.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: "AI Columns",
-          fields: (_s = (_r = field == null ? void 0 : field.mappedFields) == null ? void 0 : _r.derivedQuestions) == null ? void 0 : _s.filter(
+          heading: "Enrich",
+          fields: (_x = (_w = (_v = field == null ? void 0 : field.mappedFields) == null ? void 0 : _v.derivedQuestions) == null ? void 0 : _w.filter) == null ? void 0 : _x.call(
+            _w,
             (derivedQuestion) => derivedQuestion.isEnabled
           ),
           backgroundColor: "#E5F2FF"
         }
       ) : null,
-      !!((_u = (_t = field == null ? void 0 : field.mappedFields) == null ? void 0 : _t.variables) == null ? void 0 : _u.filter(
-        (variable) => variable.isEnabled
-      ).length) ? /* @__PURE__ */ React.createElement(
+      !!((_B = (_A = (_z = (_y = field == null ? void 0 : field.mappedFields) == null ? void 0 : _y.variables) == null ? void 0 : _z.filter) == null ? void 0 : _A.call(_z, (variable) => variable.isEnabled)) == null ? void 0 : _B.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Variables",
-          fields: (_w = (_v = field == null ? void 0 : field.mappedFields) == null ? void 0 : _v.variables) == null ? void 0 : _w.filter(
-            (variable) => variable.isEnabled
-          ),
+          fields: (_E = (_D = (_C = field == null ? void 0 : field.mappedFields) == null ? void 0 : _C.variables) == null ? void 0 : _D.filter) == null ? void 0 : _E.call(_D, (variable) => variable.isEnabled),
           backgroundColor: "$positive100"
         }
       ) : null,
-      !!((_y = (_x = field == null ? void 0 : field.mappedFields) == null ? void 0 : _x.contactProperties) == null ? void 0 : _y.filter(
-        (property) => property.isEnabled
-      ).length) ? /* @__PURE__ */ React.createElement(
+      !!((_I = (_H = (_G = (_F = field == null ? void 0 : field.mappedFields) == null ? void 0 : _F.contactProperties) == null ? void 0 : _G.filter) == null ? void 0 : _H.call(_G, (property) => property.isEnabled)) == null ? void 0 : _I.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Contacts",
-          fields: (_A = (_z = field == null ? void 0 : field.mappedFields) == null ? void 0 : _z.contactProperties) == null ? void 0 : _A.filter(
-            (property) => property.isEnabled
-          ),
+          fields: (_L = (_K = (_J = field == null ? void 0 : field.mappedFields) == null ? void 0 : _J.contactProperties) == null ? void 0 : _K.filter) == null ? void 0 : _L.call(_K, (property) => property.isEnabled),
           backgroundColor: "$negative100"
         }
       ) : null,
-      !!((_C = (_B = field == null ? void 0 : field.mappedFields) == null ? void 0 : _B.expressions) == null ? void 0 : _C.filter(
-        (expression) => expression.isEnabled
-      ).length) ? /* @__PURE__ */ React.createElement(
+      !!((_P = (_O = (_N = (_M = field == null ? void 0 : field.mappedFields) == null ? void 0 : _M.expressions) == null ? void 0 : _N.filter) == null ? void 0 : _O.call(_N, (expression) => expression.isEnabled)) == null ? void 0 : _P.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Expression",
           backgroundColor: "$neutral100",
-          fields: (_E = (_D = field == null ? void 0 : field.mappedFields) == null ? void 0 : _D.expressions) == null ? void 0 : _E.filter(
-            (expression) => expression.isEnabled
-          )
+          fields: (_S = (_R = (_Q = field == null ? void 0 : field.mappedFields) == null ? void 0 : _Q.expressions) == null ? void 0 : _R.filter) == null ? void 0 : _S.call(_R, (expression) => expression.isEnabled)
         }
       ) : null,
-      !!((_G = (_F = field == null ? void 0 : field.mappedFields) == null ? void 0 : _F.property) == null ? void 0 : _G.filter(
-        (property) => property.isEnabled
-      ).length) ? /* @__PURE__ */ React.createElement(
+      !!((_W = (_V = (_U = (_T = field == null ? void 0 : field.mappedFields) == null ? void 0 : _T.property) == null ? void 0 : _U.filter) == null ? void 0 : _V.call(_U, (property) => property.isEnabled)) == null ? void 0 : _W.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
           heading: "Property",
           hideBorder: true,
-          fields: (_I = (_H = field == null ? void 0 : field.mappedFields) == null ? void 0 : _H.property) == null ? void 0 : _I.filter(
-            (property) => property.isEnabled
-          ),
+          fields: (_Z = (_Y = (_X = field == null ? void 0 : field.mappedFields) == null ? void 0 : _X.property) == null ? void 0 : _Y.filter) == null ? void 0 : _Z.call(_Y, (property) => property.isEnabled),
           backgroundColor: "rgba(74, 156, 166, 0.15)"
         }
       ) : null
@@ -1059,10 +1089,7 @@ const SingleMappingEventWrapper = ({
     EventComponent,
     {
       heading: "Object:",
-      description: (_p = (_o = (_n = (_m = field == null ? void 0 : field.configurationFields) == null ? void 0 : _m.object) == null ? void 0 : _n.value) == null ? void 0 : _o.label) == null ? void 0 : _p.replace(
-        /^./,
-        (char) => char == null ? void 0 : char.toUpperCase()
-      )
+      description: (_p = (_o = (_n = (_m = field == null ? void 0 : field.configurationFields) == null ? void 0 : _m.object) == null ? void 0 : _n.value) == null ? void 0 : _o.label) == null ? void 0 : _p.replace(/^./, (char) => char == null ? void 0 : char.toUpperCase())
     }
   ) : null, !!((_r = (_q = field == null ? void 0 : field.configurationFields) == null ? void 0 : _q.action) == null ? void 0 : _r.hasAction) ? /* @__PURE__ */ React.createElement(
     EventComponent,
@@ -1097,7 +1124,7 @@ const SingleMappingChipWrapper = ({
   placeholder,
   backgroundColor
 }) => {
-  const modifiedFields = Object.values(fields).filter(
+  const modifiedFields = 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(
@@ -1107,7 +1134,10 @@ const SingleMappingChipWrapper = ({
       css: {
         columnGap: "$2",
         rowGap: "$4",
-        "& > * ": { fontFamily: "'Roboto Mono', monospace !important", fontWeight: "$4 !important" }
+        "& > * ": {
+          fontFamily: "'Roboto Mono', monospace !important",
+          fontWeight: "$4 !important"
+        }
       }
     },
     modifiedFields.map((field) => {
@@ -1187,7 +1217,7 @@ const DashboardItem = ({
         break;
       }
       default: {
-        field = (_a = defaultValue == null ? void 0 : defaultValue.value) == null ? void 0 : _a.label;
+        field = ((_a = defaultValue == null ? void 0 : defaultValue.value) == null ? void 0 : _a.label) || "--";
         break;
       }
     }