@sparrowengg/integrations-templates-frontend 1.2.7 → 1.2.9

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

@@ -36,8 +36,8 @@ const Dashboard = ({
   handleConfigurationType,
   handleEditField,
   handleDashboardPage,
-  handleDashboardField,
-  deleteFieldHandler
+  deleteFieldHandler,
+  toggleDashboardField
 }) => {
   const isSingleAccountMappingCompleted = !hasMultiAccounts && !!(mappingFields == null ? void 0 : mappingFields.fields.length);
   const isSingleAccountTriggerCompleted = !hasMultiAccounts && !!(triggerFields == null ? void 0 : triggerFields.length);
@@ -86,7 +86,7 @@ const Dashboard = ({
       handleDashboardPage,
       handleEditField,
       handleConfigurationType,
-      handleDashboardField,
+      toggleDashboardField,
       deleteFieldHandler
     }
   ) : /* @__PURE__ */ React.createElement(
@@ -97,7 +97,7 @@ const Dashboard = ({
       integrationName,
       handleDashboardPage,
       handleEditField,
-      handleDashboardField,
+      toggleDashboardField,
       deleteFieldHandler
     }
   )));
@@ -109,9 +109,10 @@ const MultiAccountDashboard = ({
   handleDashboardPage,
   handleEditField,
   handleConfigurationType,
-  handleDashboardField,
+  toggleDashboardField,
   deleteFieldHandler
 }) => {
+  var _a, _b, _c, _d;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(tabs.Tabs, { defaultValue: "ALL" }, /* @__PURE__ */ React.createElement(
     tabs.TabsList,
     {
@@ -130,13 +131,13 @@ const MultiAccountDashboard = ({
       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;
+    /* @__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;
       return /* @__PURE__ */ React.createElement(
         DashboardItem,
         {
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
-          heading: (_a = field.domain) != null ? _a : field.email,
+          heading: (_a2 = field.domain) != null ? _a2 : field.email,
           id: field.id,
           description: `Trigger survey when an event happens in ${integrationName}`,
           fields: field.fields,
@@ -145,17 +146,17 @@ const MultiAccountDashboard = ({
           handleDashboardPage,
           handleEditField,
           type: "TRIGGER",
-          handleDashboardField,
+          toggleDashboardField,
           deleteFieldHandler
         }
       );
-    })) : null, !!mappingFields.fields.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, mappingFields.fields.map((field) => {
-      var _a;
+    })) : 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;
       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,
+          heading: (_a2 = field.domain) != null ? _a2 : field.email,
           id: field.id,
           description: `Sync survey responses to ${integrationName}`,
           fields: field.fields,
@@ -164,7 +165,7 @@ const MultiAccountDashboard = ({
           handleDashboardPage,
           handleEditField,
           type: "MAPPING",
-          handleDashboardField,
+          toggleDashboardField,
           deleteFieldHandler
         }
       ) : /* @__PURE__ */ React.createElement(
@@ -176,7 +177,7 @@ const MultiAccountDashboard = ({
           icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
           handleEditField,
           handleDashboardPage,
-          handleDashboardField
+          toggleDashboardField
         }
       ));
     })) : null)
@@ -186,7 +187,7 @@ const MultiAccountDashboard = ({
       value: "TRIGGER",
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
-    !!triggerFields.length ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, triggerFields.map((field) => /* @__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) => /* @__PURE__ */ React.createElement(
       DashboardItem,
       {
         icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
@@ -199,7 +200,7 @@ const MultiAccountDashboard = ({
         handleDashboardPage,
         handleEditField,
         type: "TRIGGER",
-        handleDashboardField,
+        toggleDashboardField,
         deleteFieldHandler
       }
     ))) : /* @__PURE__ */ React.createElement(
@@ -215,7 +216,7 @@ const MultiAccountDashboard = ({
       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(
+    !!((_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,
       {
         icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
@@ -228,7 +229,7 @@ const MultiAccountDashboard = ({
         handleDashboardPage,
         handleEditField,
         type: "MAPPING",
-        handleDashboardField,
+        toggleDashboardField,
         deleteFieldHandler
       }
     ) : /* @__PURE__ */ React.createElement(
@@ -240,7 +241,7 @@ const MultiAccountDashboard = ({
         icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
         handleEditField,
         handleDashboardPage,
-        handleDashboardField
+        toggleDashboardField
       }
     ))))) : /* @__PURE__ */ React.createElement(
       MultiAccountFallback,
@@ -277,7 +278,7 @@ const MultiAccountFallback = ({
       },
       "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}`)
+    /* @__PURE__ */ React.createElement(button.Button, { size: "lg", leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null), variant: "outline", onClick: onClickHandler }, `New ${title}`)
   );
 };
 const SingleAccountDashboard = ({
@@ -286,11 +287,11 @@ const SingleAccountDashboard = ({
   integrationName,
   handleEditField,
   handleDashboardPage,
-  handleDashboardField,
+  toggleDashboardField,
   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(
+  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,
     {
       field,
@@ -299,9 +300,9 @@ const SingleAccountDashboard = ({
       icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
       handleEditField,
       handleDashboardPage,
-      handleDashboardField
+      toggleDashboardField
     }
-  ))) : 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(
+  ))) : 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,
     {
       icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
@@ -314,10 +315,10 @@ const SingleAccountDashboard = ({
       handleDashboardPage,
       handleEditField,
       type: "MAPPING",
-      handleDashboardField,
+      toggleDashboardField,
       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(
+  ))) : 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,
@@ -326,7 +327,7 @@ const SingleAccountDashboard = ({
       icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
       handleEditField,
       handleDashboardPage,
-      handleDashboardField
+      toggleDashboardField
     }
   ))) : null);
 };
@@ -335,7 +336,7 @@ const TriggerDasboardItem = ({
   field,
   handleEditField,
   handleDashboardPage,
-  handleDashboardField
+  toggleDashboardField
 }) => {
   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);
@@ -392,7 +393,7 @@ const TriggerDasboardItem = ({
         {
           size: "md",
           checked: field.isEnabled,
-          onChange: (value) => handleDashboardField(value, field.id, "TRIGGER")
+          onChange: (value) => toggleDashboardField(field.id, value)
         }
       ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
         iconButton.IconButton,
@@ -541,7 +542,7 @@ const SingleMappingDashboardItem = ({
   field,
   handleEditField,
   handleDashboardPage,
-  handleDashboardField
+  toggleDashboardField
 }) => {
   var _a, _b;
   const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
@@ -580,7 +581,7 @@ const SingleMappingDashboardItem = ({
         {
           size: "md",
           checked: field.isEnabled,
-          onChange: (value) => handleDashboardField(value, field.id, "MAPPING")
+          onChange: (value) => toggleDashboardField(field.id, value)
         }
       ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
         iconButton.IconButton,
@@ -833,7 +834,7 @@ const DashboardItem = ({
   id,
   handleDashboardPage,
   type,
-  handleDashboardField,
+  toggleDashboardField,
   deleteFieldHandler
 }) => {
   const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
@@ -893,7 +894,7 @@ const DashboardItem = ({
         {
           size: "md",
           checked: isEnabled,
-          onChange: (value) => handleDashboardField(value, id, type)
+          onChange: (value) => toggleDashboardField(id, value)
         }
       ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
         iconButton.IconButton,
@@ -972,12 +973,15 @@ const DashboardItem = ({
           {
             css: {
               "& tr:last-child": {
-                borderBottom: 0
+                borderBottom: 0,
+                "& td": {
+                  borderBottom: 0
+                }
               }
             }
           },
           fields.map((field) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f, _g;
             return /* @__PURE__ */ React.createElement(
               table.Tr,
               {
@@ -997,10 +1001,10 @@ const DashboardItem = ({
                   }
                 }
               },
-              /* @__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))
+              /* @__PURE__ */ React.createElement(table.Td, null, (_b = (_a = field.mappedType) == null ? void 0 : _a.label) != null ? _b : "--"),
+              /* @__PURE__ */ React.createElement(table.Td, null, (_d = (_c = field.surveySparrowField) == null ? void 0 : _c.label) != null ? _d : "--"),
+              /* @__PURE__ */ React.createElement(table.Td, null, (_f = (_e = field.integrationField) == null ? void 0 : _e.label) != null ? _f : "--"),
+              /* @__PURE__ */ React.createElement(table.Td, null, (_g = getDefaultFieldValue(field.defaultValue)) != null ? _g : "--")
             );
           })
         )) : null