@sparrowengg/integrations-templates-frontend 1.8.2 → 1.8.4

package/dist/cjs/commons/components/custom-pill.js

@@ -22,6 +22,7 @@ const CustomPill = ({
     {
       alignItems: "center",
       css: {
+        margin: "2px !important",
         height: "$6",
         background: isDefaultVariant ? "rgba(100, 116, 139, 0.08)" : "$positive100",
         padding: "$2",

package/dist/cjs/commons/components/custom-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-pill.js","sources":["../../../../src/commons/components/custom-pill.tsx"],"sourcesContent":["import { Flex, IconButton, Text } from \"@sparrowengg/twigs-react\";\nimport { CloseCircleFillIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React from \"react\";\n\nconst CustomPill = ({\n  label,\n  onCloseHandler,\n  variant,\n  radius,\n  fontFamily,\n  isClosable = true\n}: {\n  label: string;\n  onCloseHandler?: () => void;\n  variant: \"default\" | \"success\";\n  radius: \"sm\" | \"md\";\n  fontFamily?: \"Roboto Mono\";\n  isClosable?: boolean;\n}) => {\n  const isDefaultVariant = variant === \"default\";\n  return (\n    <Flex\n      alignItems=\"center\"\n      css={{\n        height: \"$6\",\n        background: isDefaultVariant\n          ? \"rgba(100, 116, 139, 0.08)\"\n          : \"$positive100\",\n        padding: \"$2\",\n        paddingLeft: radius === \"sm\" ? \"$3\" : \"$2\",\n        borderRadius: radius === \"sm\" ? \"$sm\" : \"99px\",\n        \"& > *\": {\n          fontFamily: fontFamily ?? \"DM Sans\"\n        }\n      }}\n    >\n      <Text\n        size=\"xs\"\n        weight=\"medium\"\n        css={{\n          color: isDefaultVariant ? \"$secondary800\" : \"$neutral900\",\n          paddingInline: \"$1\"\n        }}\n      >\n        {label}\n      </Text>\n      {isClosable && (\n        <IconButton\n          css={{\n            padding: \"$1\",\n            height: \"$4\",\n            width: \"$4\",\n            background: \"transparent !important\",\n            \".twigs-button__icon-container\": { position: \"static\" }\n          }}\n          variant=\"ghost\"\n          color=\"default\"\n          onClick={onCloseHandler}\n          icon={<CloseCircleFillIcon size={12} />}\n        />\n      )}\n    </Flex>\n  );\n};\n\nexport default CustomPill;\n"],"names":["Flex","Text","IconButton","CloseCircleFillIcon"],"mappings":";;;;;;;;;;AAIA,MAAM,aAAa,CAAC;AAAA,EAClB,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAa,GAAA,IAAA;AACf,CAOM,KAAA;AACJ,EAAA,MAAM,mBAAmB,OAAY,KAAA,SAAA,CAAA;AACrC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,QAAA;AAAA,MACX,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,IAAA;AAAA,QACR,UAAA,EAAY,mBACR,2BACA,GAAA,cAAA;AAAA,QACJ,OAAS,EAAA,IAAA;AAAA,QACT,WAAA,EAAa,MAAW,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA;AAAA,QACtC,YAAA,EAAc,MAAW,KAAA,IAAA,GAAO,KAAQ,GAAA,MAAA;AAAA,QACxC,OAAS,EAAA;AAAA,UACP,YAAY,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,SAAA;AAAA,SAC5B;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,MAAO,EAAA,QAAA;AAAA,QACP,GAAK,EAAA;AAAA,UACH,KAAA,EAAO,mBAAmB,eAAkB,GAAA,aAAA;AAAA,UAC5C,aAAe,EAAA,IAAA;AAAA,SACjB;AAAA,OAAA;AAAA,MAEC,KAAA;AAAA,KACH;AAAA,IACC,UACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,IAAA;AAAA,UACT,MAAQ,EAAA,IAAA;AAAA,UACR,KAAO,EAAA,IAAA;AAAA,UACP,UAAY,EAAA,wBAAA;AAAA,UACZ,+BAAA,EAAiC,EAAE,QAAA,EAAU,QAAS,EAAA;AAAA,SACxD;AAAA,QACA,OAAQ,EAAA,OAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,OAAS,EAAA,cAAA;AAAA,QACT,IAAM,kBAAA,KAAA,CAAA,aAAA,CAACC,mCAAoB,EAAA,EAAA,IAAA,EAAM,EAAI,EAAA,CAAA;AAAA,OAAA;AAAA,KACvC;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"custom-pill.js","sources":["../../../../src/commons/components/custom-pill.tsx"],"sourcesContent":["import { Flex, IconButton, Text } from \"@sparrowengg/twigs-react\";\nimport { CloseCircleFillIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React from \"react\";\n\nconst CustomPill = ({\n  label,\n  onCloseHandler,\n  variant,\n  radius,\n  fontFamily,\n  isClosable = true\n}: {\n  label: string;\n  onCloseHandler?: () => void;\n  variant: \"default\" | \"success\";\n  radius: \"sm\" | \"md\";\n  fontFamily?: \"Roboto Mono\";\n  isClosable?: boolean;\n}) => {\n  const isDefaultVariant = variant === \"default\";\n  return (\n    <Flex\n      alignItems=\"center\"\n      css={{\n        margin: \"2px !important\",\n        height: \"$6\",\n        background: isDefaultVariant\n          ? \"rgba(100, 116, 139, 0.08)\"\n          : \"$positive100\",\n        padding: \"$2\",\n        paddingLeft: radius === \"sm\" ? \"$3\" : \"$2\",\n        borderRadius: radius === \"sm\" ? \"$sm\" : \"99px\",\n        \"& > *\": {\n          fontFamily: fontFamily ?? \"DM Sans\"\n        }\n      }}\n    >\n      <Text\n        size=\"xs\"\n        weight=\"medium\"\n        css={{\n          color: isDefaultVariant ? \"$secondary800\" : \"$neutral900\",\n          paddingInline: \"$1\"\n        }}\n      >\n        {label}\n      </Text>\n      {isClosable && (\n        <IconButton\n          css={{\n            padding: \"$1\",\n            height: \"$4\",\n            width: \"$4\",\n            background: \"transparent !important\",\n            \".twigs-button__icon-container\": { position: \"static\" }\n          }}\n          variant=\"ghost\"\n          color=\"default\"\n          onClick={onCloseHandler}\n          icon={<CloseCircleFillIcon size={12} />}\n        />\n      )}\n    </Flex>\n  );\n};\n\nexport default CustomPill;\n"],"names":["Flex","Text","IconButton","CloseCircleFillIcon"],"mappings":";;;;;;;;;;AAIA,MAAM,aAAa,CAAC;AAAA,EAClB,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAa,GAAA,IAAA;AACf,CAOM,KAAA;AACJ,EAAA,MAAM,mBAAmB,OAAY,KAAA,SAAA,CAAA;AACrC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,QAAA;AAAA,MACX,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,gBAAA;AAAA,QACR,MAAQ,EAAA,IAAA;AAAA,QACR,UAAA,EAAY,mBACR,2BACA,GAAA,cAAA;AAAA,QACJ,OAAS,EAAA,IAAA;AAAA,QACT,WAAA,EAAa,MAAW,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA;AAAA,QACtC,YAAA,EAAc,MAAW,KAAA,IAAA,GAAO,KAAQ,GAAA,MAAA;AAAA,QACxC,OAAS,EAAA;AAAA,UACP,YAAY,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,SAAA;AAAA,SAC5B;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,MAAO,EAAA,QAAA;AAAA,QACP,GAAK,EAAA;AAAA,UACH,KAAA,EAAO,mBAAmB,eAAkB,GAAA,aAAA;AAAA,UAC5C,aAAe,EAAA,IAAA;AAAA,SACjB;AAAA,OAAA;AAAA,MAEC,KAAA;AAAA,KACH;AAAA,IACC,UACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,IAAA;AAAA,UACT,MAAQ,EAAA,IAAA;AAAA,UACR,KAAO,EAAA,IAAA;AAAA,UACP,UAAY,EAAA,wBAAA;AAAA,UACZ,+BAAA,EAAiC,EAAE,QAAA,EAAU,QAAS,EAAA;AAAA,SACxD;AAAA,QACA,OAAQ,EAAA,OAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,OAAS,EAAA,cAAA;AAAA,QACT,IAAM,kBAAA,KAAA,CAAA,aAAA,CAACC,mCAAoB,EAAA,EAAA,IAAA,EAAM,EAAI,EAAA,CAAA;AAAA,OAAA;AAAA,KACvC;AAAA,GAEJ,CAAA;AAEJ;;;;"}

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

@@ -55,7 +55,7 @@ const Dashboard = ({
     /* @__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"), /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(
       tooltip.Tooltip,
       {
-        content: !triggerEnabled && !mappingEnabled ? "You have reached the maximum limit for creating triggers/mappings. Please contact us to request an increase in your quota." : ""
+        content: !triggerEnabled && !mappingEnabled ? "You have reached the maximum limit for creating triggers/mappings" : ""
       },
       /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
         button.Button,
@@ -73,27 +73,27 @@ const Dashboard = ({
         align: "start",
         css: { maxWidth: 240, zIndex: 10 }
       },
-      hasDropdownComponents.mapping ? /* @__PURE__ */ React.createElement(
-        DropdownItem,
-        {
-          isDisabled: !mappingEnabled,
-          toolTipContent: "You have reached the maximum limit for creating mappings. Please contact us to request an increase in your quota.",
-          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 24, color: "#6A6A6A" }),
-          heading: "Mapping",
-          description: `Create/Update record in ${integrationName} from survey responses`,
-          onClickHandler: () => handleConfigurationType("MAPPING")
-        }
-      ) : null,
       hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(
         DropdownItem,
         {
-          toolTipContent: "You have reached the maximum limit for creating mappings. Please contact us to request an increase in your quota.",
+          toolTipContent: "You have reached the maximum limit for creating triggers",
           isDisabled: !triggerEnabled,
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 24, color: "#6A6A6A" }),
           heading: "Trigger",
           description: "Trigger the Survey when a record is created/updated",
           onClickHandler: () => handleConfigurationType("TRIGGER")
         }
+      ) : null,
+      hasDropdownComponents.mapping ? /* @__PURE__ */ React.createElement(
+        DropdownItem,
+        {
+          isDisabled: !mappingEnabled,
+          toolTipContent: "You have reached the maximum limit for creating mappings",
+          icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 24, color: "#6A6A6A" }),
+          heading: "Mapping",
+          description: `Create/Update record in ${integrationName} from survey responses`,
+          onClickHandler: () => handleConfigurationType("MAPPING")
+        }
       ) : null
     )))
   ), hasMultiAccounts ? /* @__PURE__ */ React.createElement(
@@ -394,7 +394,7 @@ const TriggerDasboardItem = ({
   toggleDashboardField,
   deleteFieldHandler
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const [isMappingDisplayed, setIsMappingDisplayed] = React.useState(false);
   const transformDataToString = (data) => {
     const filterConditions = data.filters.map((filterGroup) => {
@@ -413,7 +413,7 @@ const TriggerDasboardItem = ({
     }).join(
       `<br /> <span style="color: #6A6A6A;font-weight: 600;">${data.condition.toLowerCase() === "or" ? "Or" : "And"} When,</span> `
     );
-    return `<p style="font-family: 'DM Sans'; font-size: 13.33px; font-weight: 400;line-height: 30px; color: #848484;"><span style="color: #6A6A6A;font-weight: 600;>When</span> ${filterConditions}</p>`;
+    return `<p style="font-family: 'DM Sans'; font-size: 13.33px; font-weight: 400;line-height: 30px; color: #848484;"><span style="color: #6A6A6A;font-weight: 600;">When</span> ${filterConditions}</p>`;
   };
   return /* @__PURE__ */ React.createElement(
     flex.Flex,
@@ -527,30 +527,30 @@ const TriggerDasboardItem = ({
       ((_e = (_d = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _d.variables) == null ? void 0 : _e.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: "PASSING VARIABLE TO SURVEY",
+          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",
           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" }, ((_g = (_f = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _f.shareType) == null ? void 0 : _g.value) ? /* @__PURE__ */ React.createElement(
+      /* @__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" }, ((_i = (_h = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _h.shareType) == null ? void 0 : _i.value) ? /* @__PURE__ */ React.createElement(
         EventComponent,
         {
           heading: "Share Type:",
-          description: (_i = (_h = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _h.shareType) == null ? void 0 : _i.label
+          description: (_k = (_j = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _j.shareType) == null ? void 0 : _k.label
         }
-      ) : null, ((_k = (_j = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _j.shareRecipient) == null ? void 0 : _k.value) ? /* @__PURE__ */ React.createElement(
+      ) : null, ((_m = (_l = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _l.shareRecipient) == null ? void 0 : _m.value) ? /* @__PURE__ */ React.createElement(
         EventComponent,
         {
           heading: "Recipient:",
           hasBorder: true,
-          description: (_m = (_l = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _l.shareRecipient) == null ? void 0 : _m.label
+          description: (_o = (_n = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _n.shareRecipient) == null ? void 0 : _o.label
         }
-      ) : null, ((_o = (_n = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _n.shareChannel) == null ? void 0 : _o.value) ? /* @__PURE__ */ React.createElement(
+      ) : null, ((_q = (_p = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _p.shareChannel) == null ? void 0 : _q.value) ? /* @__PURE__ */ React.createElement(
         EventComponent,
         {
           hasBorder: true,
           heading: "Share Channel:",
-          description: (_q = (_p = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _p.shareChannel) == null ? void 0 : _q.label
+          description: (_s = (_r = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _r.shareChannel) == null ? void 0 : _s.label
         }
       ) : null)))
     ),
@@ -581,7 +581,7 @@ const TriggerDasboardItem = ({
             handleDashboardPage(false, "TRIGGER");
           }
         },
-        "Edit Triggers"
+        "Edit Trigger"
       )
     )
   );
@@ -778,18 +778,19 @@ const EventComponent = ({
         marginInline: "$4"
       }
     }
-  )), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral800" } }, description)));
+  )), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, description)));
 };
 const SingleMappingEventWrapper = ({
   field,
   isTrigger
 }) => {
+  var _a;
   const hasEventSection = !!field.email || !!field.action || !!field.exisitingSheet || !!field.object && isTrigger;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, hasEventSection ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { textTransform: "uppercase" } }, "Event"), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, !!field.email ? /* @__PURE__ */ React.createElement(EventComponent, { heading: "Account:", description: field.email }) : null, !!field.object ? /* @__PURE__ */ React.createElement(
     EventComponent,
     {
       heading: "Object:",
-      description: field.object.toLowerCase()
+      description: (_a = field.object) == null ? void 0 : _a.replace(/^./, (char) => char == null ? void 0 : char.toUpperCase())
     }
   ) : null, !!field.action ? /* @__PURE__ */ React.createElement(
     EventComponent,
@@ -897,7 +898,7 @@ const DashboardItem = ({
       case "DATE_TIME": {
         field = dayjs_min.default(
           `${defaultValue.value.year}-${defaultValue.value.month}-${defaultValue.value.day}`
-        ).format("D MMM, YYYY");
+        ).format("D MMM, YYYY . hh:mm A");
         break;
       }
       case "STRING": {
@@ -1048,6 +1049,9 @@ const DashboardItem = ({
                     lineHeight: "$sm",
                     borderInline: "none"
                   },
+                  "&:hover": {
+                    background: "none !important"
+                  },
                   "& td:first-child": {
                     paddingLeft: "$38 !important"
                   },