@sparrowengg/integrations-templates-frontend 1.2.9 → 1.3.1

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

@@ -33,7 +33,8 @@ const Dashboard = ({
   handleEditField,
   handleDashboardPage,
   deleteFieldHandler,
-  toggleDashboardField
+  toggleDashboardField,
+  hasDropdownComponents
 }) => {
   const isSingleAccountMappingCompleted = !hasMultiAccounts && !!(mappingFields == null ? void 0 : mappingFields.fields.length);
   const isSingleAccountTriggerCompleted = !hasMultiAccounts && !!(triggerFields == null ? void 0 : triggerFields.length);
@@ -52,7 +53,7 @@ const Dashboard = ({
         align: "start",
         css: { maxWidth: 240, zIndex: 10 }
       },
-      /* @__PURE__ */ React__default.createElement(
+      hasDropdownComponents.trigger ? /* @__PURE__ */ React__default.createElement(
         DropdownItem,
         {
           icon: /* @__PURE__ */ React__default.createElement(CursorIcon, { size: 24, color: "#6A6A6A" }),
@@ -61,8 +62,8 @@ const Dashboard = ({
           isDisabled: isSingleAccountTriggerCompleted,
           onClickHandler: () => handleConfigurationType("TRIGGER")
         }
-      ),
-      /* @__PURE__ */ React__default.createElement(
+      ) : null,
+      hasDropdownComponents.mapping ? /* @__PURE__ */ React__default.createElement(
         DropdownItem,
         {
           icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 24, color: "#6A6A6A" }),
@@ -71,7 +72,7 @@ const Dashboard = ({
           description: `Create/Update record in ${integrationName} from survey responses`,
           onClickHandler: () => handleConfigurationType("MAPPING")
         }
-      )
+      ) : null
     )))
   ), hasMultiAccounts ? /* @__PURE__ */ React__default.createElement(
     MultiAccountDashboard,
@@ -274,7 +275,16 @@ const MultiAccountFallback = ({
       },
       "Creating one is as easy as a breeze. Just a click away to get started."
     ),
-    /* @__PURE__ */ React__default.createElement(Button, { size: "lg", leftIcon: /* @__PURE__ */ React__default.createElement(PlusIcon, null), variant: "outline", onClick: onClickHandler }, `New ${title}`)
+    /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "lg",
+        leftIcon: /* @__PURE__ */ React__default.createElement(PlusIcon, null),
+        variant: "outline",
+        onClick: onClickHandler
+      },
+      `New ${title}`
+    )
   );
 };
 const SingleAccountDashboard = ({
@@ -855,187 +865,179 @@ const DashboardItem = ({
     }
     return field;
   };
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(
     Flex,
     {
-      flexDirection: "column",
-      css: { width: "100%", height: "100%", overflow: "auto" }
+      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__default.createElement(
       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"
+        alignItems: "center",
+        gap: "$4",
+        css: { cursor: "pointer" },
+        onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
+      },
+      isMappingDisplayed ? /* @__PURE__ */ React__default.createElement(ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React__default.createElement(ChevronRightIcon, { size: 40, color: "#848484" }),
+      /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React__default.createElement(Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Text, { size: "md", weight: "bold" }, heading), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral600" } }, description)))
+    ),
+    /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React__default.createElement(
+      Switch,
+      {
+        size: "md",
+        checked: isEnabled,
+        onChange: (value) => toggleDashboardField(id, value)
+      }
+    ), /* @__PURE__ */ React__default.createElement(DropdownMenu, null, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+      IconButton,
+      {
+        variant: "ghost",
+        color: "default",
+        size: "lg",
+        icon: /* @__PURE__ */ React__default.createElement(EllipsisVerticalIcon, null)
+      }
+    )), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuContent,
+      {
+        css: { minWidth: 180, zIndex: 10 },
+        sideOffset: 4,
+        align: "end"
       },
       /* @__PURE__ */ React__default.createElement(
-        Flex,
+        DropdownMenuItem,
         {
-          alignItems: "center",
-          gap: "$4",
-          css: { cursor: "pointer" },
-          onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
+          onClick: () => {
+            handleEditField({
+              type,
+              values: fields,
+              id
+            });
+            handleDashboardPage(false, type);
+          }
         },
-        isMappingDisplayed ? /* @__PURE__ */ React__default.createElement(ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React__default.createElement(ChevronRightIcon, { size: 40, color: "#848484" }),
-        /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React__default.createElement(Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Text, { size: "md", weight: "bold" }, heading), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral600" } }, description)))
+        /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, "Edit"))
       ),
-      /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React__default.createElement(
-        Switch,
-        {
-          size: "md",
-          checked: isEnabled,
-          onChange: (value) => toggleDashboardField(id, value)
-        }
-      ), /* @__PURE__ */ React__default.createElement(DropdownMenu, null, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
-        IconButton,
-        {
-          variant: "ghost",
-          color: "default",
-          size: "lg",
-          icon: /* @__PURE__ */ React__default.createElement(EllipsisVerticalIcon, null)
-        }
-      )), /* @__PURE__ */ React__default.createElement(
-        DropdownMenuContent,
-        {
-          css: { minWidth: 180, zIndex: 10 },
-          sideOffset: 4,
-          align: "end"
-        },
-        /* @__PURE__ */ React__default.createElement(
-          DropdownMenuItem,
-          {
-            onClick: () => {
-              handleEditField({
-                type,
-                values: fields,
-                id
-              });
-              handleDashboardPage(false, type);
-            }
-          },
-          /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, "Edit"))
-        ),
-        /* @__PURE__ */ React__default.createElement(DropdownMenuItem, { onClick: () => deleteFieldHandler(id) }, /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, "Delete")))
-      )))
-    ),
+      /* @__PURE__ */ React__default.createElement(DropdownMenuItem, { onClick: () => deleteFieldHandler(id) }, /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, "Delete")))
+    )))
+  ), /* @__PURE__ */ React__default.createElement(
+    Box,
+    {
+      css: {
+        height: isMappingDisplayed ? "100%" : 0
+      }
+    },
     /* @__PURE__ */ React__default.createElement(
       Box,
       {
         css: {
-          height: isMappingDisplayed ? "100%" : 0
+          borderInline: "$borderWidths$xs solid $black400",
+          maxHeight: 432,
+          height: "100%",
+          position: "relative",
+          overflow: "auto"
         }
       },
-      /* @__PURE__ */ React__default.createElement(
-        Box,
+      (fields == null ? void 0 : fields.length) ? /* @__PURE__ */ React__default.createElement(Table, { css: { borderCollapse: "collapse", width: "100%" } }, /* @__PURE__ */ React__default.createElement(
+        Thead,
         {
           css: {
-            borderInline: "$borderWidths$xs solid $black400",
-            maxHeight: 432,
-            height: "100%",
-            position: "relative",
-            overflow: "auto"
+            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
           }
         },
-        (fields == null ? void 0 : fields.length) ? /* @__PURE__ */ React__default.createElement(Table, { css: { borderCollapse: "collapse", width: "100%" } }, /* @__PURE__ */ React__default.createElement(
-          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__default.createElement(Th, { css: { paddingLeft: "$38 !important" } }, "Type"),
-          /* @__PURE__ */ React__default.createElement(Th, null, "SurveySparrow Field"),
-          /* @__PURE__ */ React__default.createElement(Th, null, `${integrationName} Field`),
-          /* @__PURE__ */ React__default.createElement(Th, { css: { paddingRight: "$20 !important" } }, "Default Value")
-        ), /* @__PURE__ */ React__default.createElement(
-          Tbody,
-          {
-            css: {
-              "& tr:last-child": {
-                borderBottom: 0,
-                "& td": {
-                  borderBottom: 0
-                }
-              }
-            }
-          },
-          fields.map((field) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return /* @__PURE__ */ React__default.createElement(
-              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__default.createElement(Td, null, (_b = (_a = field.mappedType) == null ? void 0 : _a.label) != null ? _b : "--"),
-              /* @__PURE__ */ React__default.createElement(Td, null, (_d = (_c = field.surveySparrowField) == null ? void 0 : _c.label) != null ? _d : "--"),
-              /* @__PURE__ */ React__default.createElement(Td, null, (_f = (_e = field.integrationField) == null ? void 0 : _e.label) != null ? _f : "--"),
-              /* @__PURE__ */ React__default.createElement(Td, null, (_g = getDefaultFieldValue(field.defaultValue)) != null ? _g : "--")
-            );
-          })
-        )) : null
-      ),
-      isMappingDisplayed && /* @__PURE__ */ React__default.createElement(
-        Box,
+        /* @__PURE__ */ React__default.createElement(Th, { css: { paddingLeft: "$38 !important" } }, "Type"),
+        /* @__PURE__ */ React__default.createElement(Th, null, "SurveySparrow Field"),
+        /* @__PURE__ */ React__default.createElement(Th, null, `${integrationName} Field`),
+        /* @__PURE__ */ React__default.createElement(Th, { css: { paddingRight: "$20 !important" } }, "Default Value")
+      ), /* @__PURE__ */ React__default.createElement(
+        Tbody,
         {
           css: {
-            padding: "$8 $32",
-            border: "$borderWidths$xs solid $black400",
-            borderRadius: "0 0 $2xl $2xl",
-            height: "100%"
+            "& tr:last-child": {
+              borderBottom: 0,
+              "& td": {
+                borderBottom: 0
+              }
+            }
           }
         },
-        /* @__PURE__ */ React__default.createElement(
-          Button,
-          {
-            size: "sm",
-            onClick: () => {
-              handleEditField({
-                type,
-                values: fields,
-                id
-              });
-              handleDashboardPage(false, type);
+        fields.map((field) => {
+          var _a, _b, _c, _d, _e, _f, _g;
+          return /* @__PURE__ */ React__default.createElement(
+            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"
+                }
+              }
             },
-            leftIcon: /* @__PURE__ */ React__default.createElement(PencilIcon, null),
-            color: "primary",
-            variant: "ghost"
+            /* @__PURE__ */ React__default.createElement(Td, null, (_b = (_a = field.mappedType) == null ? void 0 : _a.label) != null ? _b : "--"),
+            /* @__PURE__ */ React__default.createElement(Td, null, (_d = (_c = field.surveySparrowField) == null ? void 0 : _c.label) != null ? _d : "--"),
+            /* @__PURE__ */ React__default.createElement(Td, null, (_f = (_e = field.integrationField) == null ? void 0 : _e.label) != null ? _f : "--"),
+            /* @__PURE__ */ React__default.createElement(Td, null, (_g = getDefaultFieldValue(field.defaultValue)) != null ? _g : "--")
+          );
+        })
+      )) : null
+    ),
+    isMappingDisplayed && /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        css: {
+          padding: "$8 $32",
+          border: "$borderWidths$xs solid $black400",
+          borderRadius: "0 0 $2xl $2xl",
+          height: "100%"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          size: "sm",
+          onClick: () => {
+            handleEditField({
+              type,
+              values: fields,
+              id
+            });
+            handleDashboardPage(false, type);
           },
-          `Edit ${heading}`
-        )
+          leftIcon: /* @__PURE__ */ React__default.createElement(PencilIcon, null),
+          color: "primary",
+          variant: "ghost"
+        },
+        `Edit ${heading}`
       )
     )
-  );
+  ));
 };
 const DropdownItem = ({
   icon,