@sparrowengg/integrations-templates-frontend 1.3.6 → 1.3.8

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

@@ -373,7 +373,7 @@ const TriggerDasboardItem = ({
     flex.Flex,
     {
       flexDirection: "column",
-      css: { width: "100%", height: "100%", overflow: "auto" }
+      css: { width: "100%", height: "100%", overflow: "auto", marginTop: "$8" }
     },
     /* @__PURE__ */ React.createElement(
       flex.Flex,
@@ -438,112 +438,104 @@ const TriggerDasboardItem = ({
         /* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, { onClick: () => deleteFieldHandler(field.id) }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
       )))
     ),
-    /* @__PURE__ */ React.createElement(
+    isMappingDisplayed && /* @__PURE__ */ React.createElement(
       box.Box,
       {
         css: {
-          height: isMappingDisplayed ? "100%" : 0
+          borderInline: "$borderWidths$xs solid $black400",
+          maxHeight: 734,
+          height: "100%",
+          position: "relative",
+          overflow: "auto",
+          padding: "$16 $36"
         }
       },
-      /* @__PURE__ */ React.createElement(
-        box.Box,
+      /* @__PURE__ */ React.createElement(SingleMappingEventWrapper, { isTrigger: true, field }),
+      ((_d = (_c = field == null ? void 0 : field.fields) == null ? void 0 : _c.filters) == null ? void 0 : _d.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement(
+        flex.Flex,
         {
-          css: {
-            borderInline: "$borderWidths$xs solid $black400",
-            maxHeight: 734,
-            height: "100%",
-            position: "relative",
-            overflow: "auto",
-            padding: "$16 $36"
-          }
+          flexDirection: "column",
+          gap: "$6",
+          css: { paddingBlock: "$8" }
         },
-        /* @__PURE__ */ React.createElement(SingleMappingEventWrapper, { isTrigger: true, field }),
-        ((_d = (_c = field == null ? void 0 : field.fields) == null ? void 0 : _c.filters) == null ? void 0 : _d.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement(
-          flex.Flex,
+        /* @__PURE__ */ React.createElement(
+          text.Text,
           {
-            flexDirection: "column",
-            gap: "$6",
-            css: { paddingBlock: "$8" }
+            size: "sm",
+            weight: "bold",
+            css: { textTransform: "uppercase" }
           },
-          /* @__PURE__ */ React.createElement(
-            text.Text,
-            {
-              size: "sm",
-              weight: "bold",
-              css: { textTransform: "uppercase" }
-            },
-            "CONDITION"
-          ),
-          index.default(transformDataToString(field.fields))
-        ), /* @__PURE__ */ React.createElement(
-          box.Box,
-          {
-            css: {
-              marginBlock: "$4",
-              height: "1px",
-              background: "$neutral100"
-            }
-          }
-        )) : null,
-        ((_f = (_e = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _e.variables) == null ? void 0 : _f.length) ? /* @__PURE__ */ React.createElement(
-          SingleMappingChipWrapper,
-          {
-            heading: "PASSING VARIABLE TO SURVEY",
-            fields: field.triggerDetails.variables,
-            backgroundColor: "$positive100"
-          }
-        ) : null,
-        /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6", css: { paddingBlock: "$8" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, "SEND SURVEY"), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, ((_h = (_g = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _g.shareType) == null ? void 0 : _h.value) ? /* @__PURE__ */ React.createElement(
-          EventComponent,
-          {
-            heading: "Share Type:",
-            description: (_j = (_i = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _i.shareType) == null ? void 0 : _j.label
-          }
-        ) : null, ((_l = (_k = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _k.shareRecipient) == null ? void 0 : _l.value) ? /* @__PURE__ */ React.createElement(
-          EventComponent,
-          {
-            heading: "Recipient:",
-            hasBorder: true,
-            description: (_n = (_m = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _m.shareRecipient) == null ? void 0 : _n.label
-          }
-        ) : null, ((_p = (_o = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _o.shareChannel) == null ? void 0 : _p.value) ? /* @__PURE__ */ React.createElement(
-          EventComponent,
-          {
-            hasBorder: true,
-            heading: "Share Channel:",
-            description: (_r = (_q = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _q.shareChannel) == null ? void 0 : _r.label
-          }
-        ) : null)))
-      ),
-      isMappingDisplayed && /* @__PURE__ */ React.createElement(
+          "CONDITION"
+        ),
+        index.default(transformDataToString(field.fields))
+      ), /* @__PURE__ */ React.createElement(
         box.Box,
         {
           css: {
-            padding: "$8 $32",
-            border: "$borderWidths$xs solid $black400",
-            borderTop: "$borderWidths$xs solid $neutral200",
-            borderRadius: "0 0 $2xl $2xl",
-            height: "100%"
+            marginBlock: "$4",
+            height: "1px",
+            background: "$neutral100"
+          }
+        }
+      )) : null,
+      ((_f = (_e = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _e.variables) == null ? void 0 : _f.length) ? /* @__PURE__ */ React.createElement(
+        SingleMappingChipWrapper,
+        {
+          heading: "PASSING VARIABLE TO SURVEY",
+          fields: field.triggerDetails.variables,
+          backgroundColor: "$positive100"
+        }
+      ) : null,
+      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6", css: { paddingBlock: "$8" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, "SEND SURVEY"), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, ((_h = (_g = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _g.shareType) == null ? void 0 : _h.value) ? /* @__PURE__ */ React.createElement(
+        EventComponent,
+        {
+          heading: "Share Type:",
+          description: (_j = (_i = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _i.shareType) == null ? void 0 : _j.label
+        }
+      ) : null, ((_l = (_k = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _k.shareRecipient) == null ? void 0 : _l.value) ? /* @__PURE__ */ React.createElement(
+        EventComponent,
+        {
+          heading: "Recipient:",
+          hasBorder: true,
+          description: (_n = (_m = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _m.shareRecipient) == null ? void 0 : _n.label
+        }
+      ) : null, ((_p = (_o = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _o.shareChannel) == null ? void 0 : _p.value) ? /* @__PURE__ */ React.createElement(
+        EventComponent,
+        {
+          hasBorder: true,
+          heading: "Share Channel:",
+          description: (_r = (_q = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _q.shareChannel) == null ? void 0 : _r.label
+        }
+      ) : null)))
+    ),
+    isMappingDisplayed && /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          padding: "$8 $32",
+          border: "$borderWidths$xs solid $black400",
+          borderTop: "$borderWidths$xs solid $neutral200",
+          borderRadius: "0 0 $2xl $2xl",
+          height: "100%"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: "sm",
+          leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
+          color: "primary",
+          variant: "ghost",
+          onClick: () => {
+            handleEditField({
+              type: "TRIGGER",
+              values: field,
+              id: field.id
+            });
+            handleDashboardPage(false, "TRIGGER");
           }
         },
-        /* @__PURE__ */ React.createElement(
-          button.Button,
-          {
-            size: "sm",
-            leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
-            color: "primary",
-            variant: "ghost",
-            onClick: () => {
-              handleEditField({
-                type: "TRIGGER",
-                values: field,
-                id: field.id
-              });
-              handleDashboardPage(false, "TRIGGER");
-            }
-          },
-          "Edit Triggers"
-        )
+        "Edit Triggers"
       )
     )
   );
@@ -871,179 +863,189 @@ const DashboardItem = ({
     }
     return field;
   };
-  return /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(
     flex.Flex,
     {
+      flexDirection: "column",
       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"
+        marginTop: "$8"
+      }
     },
     /* @__PURE__ */ React.createElement(
       flex.Flex,
       {
-        alignItems: "center",
-        gap: "$4",
-        css: { cursor: "pointer" },
-        onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
-      },
-      isMappingDisplayed ? /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 40, color: "#848484" }),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, description)))
-    ),
-    /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(
-      _switch.Switch,
-      {
-        size: "md",
-        checked: isEnabled,
-        onChange: (value) => toggleDashboardField(id, value)
-      }
-    ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-      iconButton.IconButton,
-      {
-        variant: "ghost",
-        color: "default",
-        size: "lg",
-        icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
-      }
-    )), /* @__PURE__ */ React.createElement(
-      dropdown.DropdownMenuContent,
-      {
-        css: { minWidth: 180, zIndex: 10 },
-        sideOffset: 4,
-        align: "end"
+        css: {
+          border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
+          borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
+          padding: "$10 $12",
+          width: "100%",
+          backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
+        },
+        justifyContent: "space-between",
+        alignItems: "center"
       },
       /* @__PURE__ */ React.createElement(
-        dropdown.DropdownMenuItem,
+        flex.Flex,
         {
-          onClick: () => {
-            handleEditField({
-              type,
-              values: fields,
-              id
-            });
-            handleDashboardPage(false, type);
-          }
+          alignItems: "center",
+          gap: "$4",
+          css: { cursor: "pointer" },
+          onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
         },
-        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
+        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(dropdown.DropdownMenuItem, { onClick: () => deleteFieldHandler(id) }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
-    )))
-  ), /* @__PURE__ */ React.createElement(
-    box.Box,
-    {
-      css: {
-        height: isMappingDisplayed ? "100%" : 0
-      }
-    },
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(
+        _switch.Switch,
+        {
+          size: "md",
+          checked: isEnabled,
+          onChange: (value) => toggleDashboardField(id, value)
+        }
+      ), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          variant: "ghost",
+          color: "default",
+          size: "lg",
+          icon: /* @__PURE__ */ React.createElement(ellipsisVertical.EllipsisVerticalIcon, null)
+        }
+      )), /* @__PURE__ */ React.createElement(
+        dropdown.DropdownMenuContent,
+        {
+          css: { minWidth: 180, zIndex: 10 },
+          sideOffset: 4,
+          align: "end"
+        },
+        /* @__PURE__ */ React.createElement(
+          dropdown.DropdownMenuItem,
+          {
+            onClick: () => {
+              handleEditField({
+                type,
+                values: fields,
+                id
+              });
+              handleDashboardPage(false, type);
+            }
+          },
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
+        ),
+        /* @__PURE__ */ React.createElement(dropdown.DropdownMenuItem, { onClick: () => deleteFieldHandler(id) }, /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete")))
+      )))
+    ),
     /* @__PURE__ */ React.createElement(
       box.Box,
       {
         css: {
-          borderInline: "$borderWidths$xs solid $black400",
-          maxHeight: 432,
-          height: "100%",
-          position: "relative",
-          overflow: "auto"
+          height: isMappingDisplayed ? "100%" : 0
         }
       },
-      (fields == null ? void 0 : fields.length) ? /* @__PURE__ */ React.createElement(table.Table, { css: { borderCollapse: "collapse", width: "100%" } }, /* @__PURE__ */ React.createElement(
-        table.Thead,
+      /* @__PURE__ */ React.createElement(
+        box.Box,
         {
           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
+            borderInline: "$borderWidths$xs solid $black400",
+            maxHeight: 432,
+            height: "100%",
+            position: "relative",
+            overflow: "auto"
           }
         },
-        /* @__PURE__ */ React.createElement(table.Th, { css: { paddingLeft: "$38 !important" } }, "Type"),
-        /* @__PURE__ */ React.createElement(table.Th, null, "SurveySparrow Field"),
-        /* @__PURE__ */ React.createElement(table.Th, null, `${integrationName} Field`),
-        /* @__PURE__ */ React.createElement(table.Th, { css: { paddingRight: "$20 !important" } }, "Default Value")
-      ), /* @__PURE__ */ React.createElement(
-        table.Tbody,
-        {
-          css: {
-            "& tr:last-child": {
-              borderBottom: 0,
-              "& td": {
-                borderBottom: 0
-              }
+        (fields == null ? void 0 : fields.length) ? /* @__PURE__ */ React.createElement(table.Table, { css: { borderCollapse: "collapse", width: "100%" } }, /* @__PURE__ */ React.createElement(
+          table.Thead,
+          {
+            css: {
+              background: "$white900",
+              "& th": {
+                padding: "$7 $8",
+                fontSize: "$sm",
+                lineHeight: "$sm",
+                textAlign: "left",
+                borderInline: "none"
+              },
+              borderBottom: "$borderWidths$xs solid $neutral100",
+              position: "sticky",
+              top: 0,
+              zIndex: 10
             }
-          }
-        },
-        fields.map((field) => {
-          var _a, _b, _c, _d, _e, _f, _g;
-          return /* @__PURE__ */ React.createElement(
-            table.Tr,
-            {
-              css: {
-                borderBottom: "$borderWidths$xs solid $neutral100",
+          },
+          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingLeft: "$38 !important" } }, "Type"),
+          /* @__PURE__ */ React.createElement(table.Th, null, "SurveySparrow Field"),
+          /* @__PURE__ */ React.createElement(table.Th, null, `${integrationName} Field`),
+          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingRight: "$20 !important" } }, "Default Value")
+        ), /* @__PURE__ */ React.createElement(
+          table.Tbody,
+          {
+            css: {
+              "& tr:last-child": {
+                borderBottom: 0,
                 "& td": {
-                  padding: "$7 $8",
-                  fontSize: "$sm",
-                  lineHeight: "$sm",
-                  borderInline: "none"
-                },
-                "& td:first-child": {
-                  paddingLeft: "$38 !important"
-                },
-                "& td:last-child": {
-                  paddingRight: "$20 !important"
+                  borderBottom: 0
                 }
               }
-            },
-            /* @__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
-    ),
-    isMappingDisplayed && /* @__PURE__ */ React.createElement(
-      box.Box,
-      {
-        css: {
-          padding: "$8 $32",
-          border: "$borderWidths$xs solid $black400",
-          borderRadius: "0 0 $2xl $2xl",
-          height: "100%"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        button.Button,
-        {
-          size: "sm",
-          onClick: () => {
-            handleEditField({
-              type,
-              values: fields,
-              id
-            });
-            handleDashboardPage(false, type);
+            }
           },
-          leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
-          color: "primary",
-          variant: "ghost"
+          fields.map((field) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            return /* @__PURE__ */ React.createElement(
+              table.Tr,
+              {
+                css: {
+                  borderBottom: "$borderWidths$xs solid $neutral100",
+                  "& td": {
+                    padding: "$7 $8",
+                    fontSize: "$sm",
+                    lineHeight: "$sm",
+                    borderInline: "none"
+                  },
+                  "& td:first-child": {
+                    paddingLeft: "$38 !important"
+                  },
+                  "& td:last-child": {
+                    paddingRight: "$20 !important"
+                  }
+                }
+              },
+              /* @__PURE__ */ React.createElement(table.Td, null, (_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
+      ),
+      isMappingDisplayed && /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          css: {
+            padding: "$8 $32",
+            border: "$borderWidths$xs solid $black400",
+            borderRadius: "0 0 $2xl $2xl",
+            height: "100%"
+          }
         },
-        `Edit ${heading}`
+        /* @__PURE__ */ React.createElement(
+          button.Button,
+          {
+            size: "sm",
+            onClick: () => {
+              handleEditField({
+                type,
+                values: fields,
+                id
+              });
+              handleDashboardPage(false, type);
+            },
+            leftIcon: /* @__PURE__ */ React.createElement(pencil.PencilIcon, null),
+            color: "primary",
+            variant: "ghost"
+          },
+          `Edit ${heading}`
+        )
       )
     )
-  ));
+  );
 };
 const DropdownItem = ({
   icon,