@sparrowengg/integrations-templates-frontend 1.9.84-beta.8 → 1.9.84-beta.9

package/dist/es/commons/components/NamingModal.js

@@ -0,0 +1,75 @@
+import React__default from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose } from '../../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialog.js';
+import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { FormInput } from '../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js';
+import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { IconButton } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
+import { CloseIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close.js';
+
+function NamingModal({
+  editFieldId,
+  mappingLoader,
+  saveHandler,
+  closeHandler,
+  value,
+  setValue,
+  isOpen
+}) {
+  return /* @__PURE__ */ React__default.createElement(Dialog, { open: isOpen, size: "sm" }, /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(
+    DialogHeader,
+    {
+      css: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(DialogTitle, { size: "lg" }, "Mapping Name")
+  ), /* @__PURE__ */ React__default.createElement(DialogBody, null, /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$2", css: { marginBottom: "$2" } }, /* @__PURE__ */ React__default.createElement(
+    FormInput,
+    {
+      size: "lg",
+      id: "name",
+      label: "Name",
+      showCount: true,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      maxLength: 50,
+      placeholder: "Sync to "
+    }
+  ))), /* @__PURE__ */ React__default.createElement(DialogFooter, null, /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      css: {
+        width: "100%"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        loading: mappingLoader,
+        size: "lg",
+        color: "primary",
+        css: {
+          width: "100%"
+        },
+        onClick: saveHandler
+      },
+      editFieldId ? "Update Mapping" : "Save Mapping"
+    )
+  )), /* @__PURE__ */ React__default.createElement(Box, { css: { position: "absolute", top: "$8", right: "$8" } }, /* @__PURE__ */ React__default.createElement(DialogClose, { asChild: true, onClick: closeHandler }, /* @__PURE__ */ React__default.createElement(
+    IconButton,
+    {
+      size: "lg",
+      icon: /* @__PURE__ */ React__default.createElement(CloseIcon, null),
+      variant: "ghost",
+      "aria-label": "Close",
+      color: "default"
+    }
+  )))));
+}
+
+export { NamingModal as default };
+//# sourceMappingURL=NamingModal.js.map

package/dist/es/commons/components/NamingModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NamingModal.js","sources":["../../../../src/commons/components/NamingModal.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Dialog,\n  DialogHeader,\n  DialogTitle,\n  DialogBody,\n  DialogFooter,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  IconButton,\n  Box,\n  Button,\n  Flex,\n  FormInput,\n} from \"@sparrowengg/twigs-react\";\nimport { CloseIcon } from \"@sparrowengg/twigs-react-icons\";\n\nexport default function NamingModal({\n  editFieldId,\n  mappingLoader,\n  saveHandler,\n  closeHandler,\n  value,\n  setValue,\n  isOpen,\n}: {\n  editFieldId: string | number | undefined;\n  mappingLoader: boolean;\n  saveHandler: () => void;\n  closeHandler: () => void;\n  value: string;\n  setValue: (value: string) => void;\n  isOpen: boolean;\n}) {\n  return (\n    <Dialog open={isOpen} size=\"sm\">\n      <DialogContent>\n        <DialogHeader\n          css={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"flex-start\",\n            justifyContent: \"center\",\n          }}\n        >\n          <DialogTitle size=\"lg\">Mapping Name</DialogTitle>\n        </DialogHeader>\n        <DialogBody>\n          <Flex flexDirection=\"column\" gap=\"$2\" css={{ marginBottom: \"$2\" }}>\n            <FormInput\n              size=\"lg\"\n              id=\"name\"\n              label=\"Name\"\n              showCount\n              value={value}\n              onChange={(e) => setValue(e.target.value)}\n              maxLength={50}\n              placeholder=\"Sync to \"\n            />\n          </Flex>\n        </DialogBody>\n        <DialogFooter>\n          <Flex\n            css={{\n              width: \"100%\",\n            }}\n          >\n            <Button\n              loading={mappingLoader}\n              size=\"lg\"\n              color=\"primary\"\n              css={{\n                width: \"100%\",\n              }}\n              onClick={saveHandler}\n            >\n              {editFieldId ? \"Update Mapping\" : \"Save Mapping\"}\n            </Button>\n          </Flex>\n        </DialogFooter>\n        <Box css={{ position: \"absolute\", top: \"$8\", right: \"$8\" }}>\n          <DialogClose asChild onClick={closeHandler}>\n            <IconButton\n              size=\"lg\"\n              icon={<CloseIcon />}\n              variant=\"ghost\"\n              aria-label=\"Close\"\n              color=\"default\"\n            />\n          </DialogClose>\n        </Box>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAkBA,SAAwB,WAAY,CAAA;AAAA,EAClC,WAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AACF,CAQG,EAAA;AACD,EAAA,oDACG,MAAO,EAAA,EAAA,IAAA,EAAM,QAAQ,IAAK,EAAA,IAAA,EAAA,+CACxB,aACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,YAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,OAClB;AAAA,KAAA;AAAA,oBAECA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,IAAK,EAAA,IAAA,EAAA,EAAK,cAAY,CAAA;AAAA,GAErC,kBAAAA,cAAA,CAAA,aAAA,CAAC,UACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,aAAA,EAAc,QAAS,EAAA,GAAA,EAAI,IAAK,EAAA,GAAA,EAAK,EAAE,YAAA,EAAc,MACzD,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,EAAG,EAAA,MAAA;AAAA,MACH,KAAM,EAAA,MAAA;AAAA,MACN,SAAS,EAAA,IAAA;AAAA,MACT,KAAA;AAAA,MACA,UAAU,CAAC,CAAA,KAAM,QAAS,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,MACxC,SAAW,EAAA,EAAA;AAAA,MACX,WAAY,EAAA,UAAA;AAAA,KAAA;AAAA,GAEhB,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,YACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,aAAA;AAAA,QACT,IAAK,EAAA,IAAA;AAAA,QACL,KAAM,EAAA,SAAA;AAAA,QACN,GAAK,EAAA;AAAA,UACH,KAAO,EAAA,MAAA;AAAA,SACT;AAAA,QACA,OAAS,EAAA,WAAA;AAAA,OAAA;AAAA,MAER,cAAc,gBAAmB,GAAA,cAAA;AAAA,KACpC;AAAA,GAEJ,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,OAAI,GAAK,EAAA,EAAE,UAAU,UAAY,EAAA,GAAA,EAAK,IAAM,EAAA,KAAA,EAAO,MAClD,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,eAAY,OAAO,EAAA,IAAA,EAAC,SAAS,YAC5B,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,IAAA,+CAAO,SAAU,EAAA,IAAA,CAAA;AAAA,MACjB,OAAQ,EAAA,OAAA;AAAA,MACR,YAAW,EAAA,OAAA;AAAA,MACX,KAAM,EAAA,SAAA;AAAA,KAAA;AAAA,GAEV,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -218,7 +218,7 @@ const MultiAccountDashboard = ({
           icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
           heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : "Field",
           id: field.id,
-          description: `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()}`)}`,
+          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,
@@ -294,9 +294,9 @@ const MultiAccountDashboard = ({
           isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
-          heading: "Mapping",
+          heading: (field == null ? void 0 : field.mappingName) || "Mapping",
           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()}`)}`,
+          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,
@@ -409,9 +409,9 @@ const SingleAccountDashboard = ({
         isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
         onMappingEditHandler,
         icon: /* @__PURE__ */ React__default.createElement(MappingIcon, { size: 32, color: "#56B0BB" }),
-        heading: "Mapping",
+        heading: (field == null ? void 0 : field.mappingName) || "Mapping",
         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(`${(_g2 = (_f2 = (_e2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e2.action) == null ? void 0 : _f2.label) == null ? void 0 : _g2.toLowerCase()}`)}`,
+        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,