@sparrowengg/integrations-templates-frontend 2.1.0-beta.1 → 2.1.0-beta.2

package/dist/cjs/contact-import/index.js

@@ -1,14 +1,24 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var index$1 = require('../commons/helpers/index.js');
 var React = require('react');
+var arrow = require('../commons/icons/arrow.js');
+var contactImportConfigure = require('./components/contact-import-configure.js');
+var contactImportMapping = require('./components/contact-import-mapping.js');
 var themeWrapper = require('../commons/components/theme-wrapper.js');
-var ContactImportHeader = require('./components/ContactImportHeader.js');
-var ContactImportConfigure = require('./components/ContactImportConfigure.js');
-var ContactImportMapping = require('./components/ContactImportMapping.js');
-var Dashboard = require('./components/ManageImport/Dashboard.js');
+var dashboard = require('./components/ManageImport/dashboard.js');
+var index = require('../commons/constants/index.js');
 var box = require('../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var flex = require('../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var iconButton = require('../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var arrowLeft = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js');
+var heading = require('../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var button = require('../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var chevronRight = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+var dialog = require('../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialog.js');
+var close = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close.js');
+var formInput = require('../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
+var checkbox = require('../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js');
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -47,15 +57,9 @@ const ContactImport = ({
   const [newImport, setNewImport] = React.useState(true);
   React.useEffect(() => {
     setNewImport(!(existingImports == null ? void 0 : existingImports.length));
-  }, [existingImports]);
-  const handleConfigureComplete = (configData) => {
-    setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
-      configure: __spreadValues(__spreadValues({}, prev.configure), configData)
-    }));
-    navigateMappingPage(true);
-  };
-  const renderNewImportFlow = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    ContactImportHeader.default,
+  }, []);
+  return /* @__PURE__ */ React.createElement(themeWrapper.default, null, /* @__PURE__ */ React.createElement(box.Box, { css: { height: "100vh", width: "100vw" } }, newImport && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    ContactImportHeader,
     {
       setNewImport,
       contactImportField,
@@ -68,38 +72,244 @@ const ContactImport = ({
       invitePortal
     }
   ), !isContactMappingPage ? /* @__PURE__ */ React.createElement(
-    ContactImportConfigure.default,
+    contactImportConfigure.default,
     {
       contactImportField,
-      handleConfigureField: handleConfigureComplete,
+      handleConfigureField: (value) => {
+        setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+          configure: __spreadValues({}, value)
+        }));
+        navigateMappingPage(true);
+      },
       listSegmentOptions
     }
   ) : /* @__PURE__ */ React.createElement(
-    ContactImportMapping.default,
+    contactImportMapping.default,
     {
       contactImportField,
       setContactImportField,
       integrationName,
       contactProperties
     }
-  ));
-  const renderDashboard = () => {
-    if (!(existingImports == null ? void 0 : existingImports.length) || newImport) {
-      return null;
+  )), (existingImports == null ? void 0 : existingImports.length) && !newImport ? /* @__PURE__ */ React.createElement(
+    dashboard.default,
+    {
+      dashboardDescription,
+      setNewImport,
+      integrationName,
+      imports: existingImports
     }
-    return /* @__PURE__ */ React.createElement(
-      Dashboard.default,
+  ) : null));
+};
+const ContactImportHeader = ({
+  setNewImport,
+  setContactImportField,
+  contactImportField,
+  hasPreviousMapping,
+  previousMappingHandler,
+  onSaveHandler,
+  isContactMappingPage,
+  navigateMappingPage,
+  invitePortal
+}) => {
+  const [showImportModal, setShowImportModal] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasPreviousMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          onClick: () => {
+            setNewImport(false);
+            previousMappingHandler();
+          },
+          color: "default",
+          icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, "New Contact Import")
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          css: { color: !isContactMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isContactMappingPage && navigateMappingPage(false)
+        },
+        "Event Setup"
+      ),
+      /* @__PURE__ */ React.createElement(arrow.default, null),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          css: { color: isContactMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          disabled: !isContactMappingPage
+        },
+        "Mapping"
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        onClick: () => setShowImportModal(true),
+        rightIcon: /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, null),
+        css: { visibility: isContactMappingPage ? "visible" : "hidden" }
+      },
+      "Continue"
+    ),
+    showImportModal ? /* @__PURE__ */ React.createElement(
+      ContactImportModal,
       {
-        dashboardDescription,
-        setNewImport,
-        integrationName,
-        imports: existingImports
+        setContactImportField,
+        contactImportField,
+        invitePortal,
+        onSaveHandler: async () => {
+          await onSaveHandler();
+          setNewImport(false);
+        },
+        onCloseHandler: () => setShowImportModal(false)
+      }
+    ) : null
+  );
+};
+const ContactImportModal = ({
+  setContactImportField,
+  contactImportField,
+  onCloseHandler,
+  onSaveHandler,
+  invitePortal
+}) => {
+  var _a;
+  const [inputValue, setInputValue] = React.useState("");
+  return /* @__PURE__ */ React.createElement(dialog.Dialog, { open: true }, /* @__PURE__ */ React.createElement(
+    dialog.DialogContent,
+    {
+      css: {
+        padding: 0,
+        borderRadius: "$3xl",
+        maxWidth: index.MODAL_MAX_WIDTH
       }
-    );
-  };
-  return /* @__PURE__ */ React.createElement(themeWrapper.default, null, /* @__PURE__ */ React.createElement(box.Box, { css: { height: "100vh", width: "100vw" } }, newImport && renderNewImportFlow(), renderDashboard()));
+    },
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        justifyContent: "space-between",
+        css: {
+          padding: "$8 $12",
+          borderBottom: "$borderWidths$xs solid $neutral200"
+        }
+      },
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6", css: { color: "$neutral900" } }, "Import Configuration"),
+      /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          variant: "ghost",
+          color: "default",
+          icon: /* @__PURE__ */ React.createElement(close.CloseIcon, null),
+          size: "lg",
+          css: {
+            "& svg": {
+              color: "#64748B !important"
+            }
+          },
+          onClick: () => onCloseHandler()
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          padding: "$12"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        formInput.FormInput,
+        {
+          label: "Title of this import for future reference",
+          requiredIndicator: true,
+          value: ((_a = contactImportField == null ? void 0 : contactImportField.configure) == null ? void 0 : _a.reference) || inputValue,
+          maxLength: index.INPUT_MAX_LENGTH,
+          max: index.INPUT_MAX_LENGTH,
+          showCount: true,
+          onChange: (event) => setInputValue(event.currentTarget.value),
+          size: "lg"
+        }
+      ),
+      invitePortal.hasInvitePortal ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: "$12" } }, /* @__PURE__ */ React.createElement(
+        checkbox.Checkbox,
+        {
+          checked: !!invitePortal.value,
+          onChange: (value) => {
+            setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+              invitePortal: value
+            }));
+            invitePortal.onChangeHandler(value);
+          }
+        },
+        "Invite to portal whenever a contact is created"
+      )) : null
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$4",
+        css: {
+          justifyContent: "flex-end",
+          padding: "$8 $12"
+        }
+      },
+      /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default", onClick: () => onCloseHandler() }, "Cancel"),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: "lg",
+          disabled: !(inputValue == null ? void 0 : inputValue.length),
+          onClick: () => {
+            setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+              description: inputValue,
+              id: index$1.generateUniqueId()
+            }));
+            onSaveHandler();
+            onCloseHandler();
+          }
+        },
+        "Finish Import"
+      )
+    )
+  ));
 };
 
 exports.ContactImport = ContactImport;
-exports.default = ContactImport;
 //# sourceMappingURL=index.js.map

package/dist/cjs/contact-import/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/contact-import/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Box } from '@sparrowengg/twigs-react';\nimport ThemeWrapper from '../commons/components/theme-wrapper';\nimport ContactImportHeader from './components/ContactImportHeader';\nimport ContactImportConfigure from './components/ContactImportConfigure';\nimport ContactImportMapping from './components/ContactImportMapping';\nimport Dashboard from './components/ManageImport/Dashboard';\nimport { ContactImportProps, ImportConfiguration } from './types';\n\n/**\n * Main Contact Import component\n * Manages the flow between dashboard, configuration, and mapping screens\n */\nexport const ContactImport: React.FC<ContactImportProps> = ({\n  dashboardDescription,\n  existingImports,\n  hasPreviousMapping,\n  previousMappingHandler,\n  onSaveHandler,\n  isContactMappingPage,\n  navigateMappingPage,\n  contactImportField,\n  setContactImportField,\n  listSegmentOptions,\n  integrationName,\n  contactProperties,\n  invitePortal,\n}) => {\n  const [newImport, setNewImport] = useState(true);\n\n  // Determine if we should show new import form or dashboard\n  useEffect(() => {\n    setNewImport(!existingImports?.length);\n  }, [existingImports]);\n\n  const handleConfigureComplete = (configData: ImportConfiguration) => {\n    setContactImportField((prev) => ({\n      ...prev,\n      configure: { ...prev.configure, ...configData },\n    }));\n    navigateMappingPage(true);\n  };\n\n  const renderNewImportFlow = () => (\n    <>\n      <ContactImportHeader\n        setNewImport={setNewImport}\n        contactImportField={contactImportField}\n        setContactImportField={setContactImportField}\n        hasPreviousMapping={hasPreviousMapping}\n        previousMappingHandler={previousMappingHandler}\n        onSaveHandler={onSaveHandler}\n        isContactMappingPage={isContactMappingPage}\n        navigateMappingPage={navigateMappingPage}\n        invitePortal={invitePortal}\n      />\n\n      {!isContactMappingPage ? (\n        <ContactImportConfigure\n          contactImportField={contactImportField}\n          handleConfigureField={handleConfigureComplete}\n          listSegmentOptions={listSegmentOptions}\n        />\n      ) : (\n        <ContactImportMapping\n          contactImportField={contactImportField}\n          setContactImportField={setContactImportField}\n          integrationName={integrationName}\n          contactProperties={contactProperties}\n        />\n      )}\n    </>\n  );\n\n  const renderDashboard = () => {\n    if (!existingImports?.length || newImport) {\n      return null;\n    }\n\n    return (\n      <Dashboard\n        dashboardDescription={dashboardDescription}\n        setNewImport={setNewImport}\n        integrationName={integrationName}\n        imports={existingImports}\n      />\n    );\n  };\n\n  return (\n    <ThemeWrapper>\n      <Box css={{ height: '100vh', width: '100vw' }}>\n        {newImport && renderNewImportFlow()}\n        {renderDashboard()}\n      </Box>\n    </ThemeWrapper>\n  );\n};\n\nexport default ContactImport;\n"],"names":["useState","useEffect","ContactImportHeader","ContactImportConfigure","ContactImportMapping","Dashboard","ThemeWrapper","Box"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,gBAA8C,CAAC;AAAA,EAC1D,oBAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,sBAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,mBAAA;AAAA,EACA,kBAAA;AAAA,EACA,qBAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AAAA,EACA,YAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,IAAI,CAAA,CAAA;AAG/C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAa,YAAA,CAAA,EAAC,mDAAiB,MAAM,CAAA,CAAA,CAAA;AAAA,GACvC,EAAG,CAAC,eAAe,CAAC,CAAA,CAAA;AAEpB,EAAM,MAAA,uBAAA,GAA0B,CAAC,UAAoC,KAAA;AACnE,IAAsB,qBAAA,CAAA,CAAC,IAAU,KAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAC5B,IAD4B,CAAA,EAAA;AAAA,MAE/B,SAAA,EAAW,cAAK,CAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAK,SAAc,CAAA,EAAA,UAAA,CAAA;AAAA,KACnC,CAAA,CAAA,CAAA;AACF,IAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAM,MAAA,mBAAA,GAAsB,sBAExB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,YAAA;AAAA,MACA,kBAAA;AAAA,MACA,qBAAA;AAAA,MACA,kBAAA;AAAA,MACA,sBAAA;AAAA,MACA,aAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,KAAA;AAAA,GACF,EAEC,CAAC,oBACA,mBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,kBAAA;AAAA,MACA,oBAAsB,EAAA,uBAAA;AAAA,MACtB,kBAAA;AAAA,KAAA;AAAA,GAGF,mBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,kBAAA;AAAA,MACA,qBAAA;AAAA,MACA,eAAA;AAAA,MACA,iBAAA;AAAA,KAAA;AAAA,GAGN,CAAA,CAAA;AAGF,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAI,IAAA,EAAC,eAAiB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAA,MAAA,CAAA,IAAU,SAAW,EAAA;AACzC,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACC,oBAAA;AAAA,QACA,YAAA;AAAA,QACA,eAAA;AAAA,QACA,OAAS,EAAA,eAAA;AAAA,OAAA;AAAA,KACX,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,2CACGC,oBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,OAAI,EAAA,EAAA,GAAA,EAAK,EAAE,MAAQ,EAAA,OAAA,EAAS,KAAO,EAAA,OAAA,MACjC,SAAa,IAAA,mBAAA,EACb,EAAA,eAAA,EACH,CACF,CAAA,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/contact-import/index.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Checkbox,\n  Dialog,\n  DialogContent,\n  Flex,\n  FormInput,\n  Heading,\n  IconButton,\n} from \"@sparrowengg/twigs-react\";\nimport {\n  ArrowLeftIcon,\n  ChevronRightIcon,\n  CloseIcon,\n} from \"@sparrowengg/twigs-react-icons\";\nimport { ContactImportFieldType } from \"./types\";\nimport { generateUniqueId } from \"../commons/helpers\";\nimport React, { useEffect, useState } from \"react\";\nimport Arrow from \"../commons/icons/arrow\";\nimport ContactImportConfigure from \"./components/contact-import-configure\";\nimport ContactImportMapping from \"./components/contact-import-mapping\";\nimport ThemeWrapper from \"../commons/components/theme-wrapper\";\nimport { ContactImportProps, ContactImportHeaderProps } from \"./types\";\nimport Dashboard from \"./components/ManageImport/dashboard\";\nimport { MODAL_MAX_WIDTH, INPUT_MAX_LENGTH } from \"../commons/constants\";\n\nexport const ContactImport = ({\n  dashboardDescription,\n  existingImports,\n  hasPreviousMapping,\n  previousMappingHandler,\n  onSaveHandler,\n  isContactMappingPage,\n  navigateMappingPage,\n  contactImportField,\n  setContactImportField,\n  listSegmentOptions,\n  integrationName,\n  contactProperties,\n  invitePortal,\n}: ContactImportProps) => {\n  const [newImport, setNewImport] = useState(true);\n  useEffect(() => {\n    setNewImport(!existingImports?.length);\n  }, []);\n  return (\n    <ThemeWrapper>\n      <Box css={{ height: \"100vh\", width: \"100vw\" }}>\n        {newImport && (\n          <>\n            <ContactImportHeader\n              setNewImport={setNewImport}\n              contactImportField={contactImportField}\n              setContactImportField={setContactImportField}\n              hasPreviousMapping={hasPreviousMapping}\n              previousMappingHandler={previousMappingHandler}\n              onSaveHandler={onSaveHandler}\n              isContactMappingPage={isContactMappingPage}\n              navigateMappingPage={navigateMappingPage}\n              invitePortal={invitePortal}\n            />\n            {!isContactMappingPage ? (\n              <ContactImportConfigure\n                contactImportField={contactImportField}\n                handleConfigureField={(value: Record<string, unknown>) => {\n                  setContactImportField({\n                    ...contactImportField,\n                    configure: { ...value },\n                  });\n                  navigateMappingPage(true);\n                }}\n                listSegmentOptions={listSegmentOptions}\n              />\n            ) : (\n              <ContactImportMapping\n                contactImportField={contactImportField}\n                setContactImportField={setContactImportField}\n                integrationName={integrationName}\n                contactProperties={contactProperties}\n              />\n            )}\n          </>\n        )}\n        {existingImports?.length && !newImport ? (\n          <Dashboard\n            dashboardDescription={dashboardDescription}\n            setNewImport={setNewImport}\n            integrationName={integrationName}\n            imports={existingImports}\n          />\n        ) : null}\n      </Box>\n    </ThemeWrapper>\n  );\n};\n\nconst ContactImportHeader = ({\n  setNewImport,\n  setContactImportField,\n  contactImportField,\n  hasPreviousMapping,\n  previousMappingHandler,\n  onSaveHandler,\n  isContactMappingPage,\n  navigateMappingPage,\n  invitePortal,\n}: ContactImportHeaderProps) => {\n  const [showImportModal, setShowImportModal] = useState(false);\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasPreviousMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={() => {\n            setNewImport(false);\n            previousMappingHandler();\n          }}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">New Contact Import</Heading>\n      </Flex>\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isContactMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isContactMappingPage && navigateMappingPage(false)}\n        >\n          Event Setup\n        </Button>\n        <Arrow />\n        <Button\n          css={{ color: isContactMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          disabled={!isContactMappingPage}\n        >\n          Mapping\n        </Button>\n      </Flex>\n      <Button\n        size=\"lg\"\n        onClick={() => setShowImportModal(true)}\n        rightIcon={<ChevronRightIcon />}\n        css={{ visibility: isContactMappingPage ? \"visible\" : \"hidden\" }}\n      >\n        Continue\n      </Button>\n      {showImportModal ? (\n        <ContactImportModal\n          setContactImportField={setContactImportField as any}\n          contactImportField={contactImportField}\n          invitePortal={invitePortal as any}\n          onSaveHandler={async () => {\n            await onSaveHandler();\n            setNewImport(false);\n          }}\n          onCloseHandler={() => setShowImportModal(false)}\n        />\n      ) : null}\n    </Flex>\n  );\n};\n\nconst ContactImportModal = ({\n  setContactImportField,\n  contactImportField,\n  onCloseHandler,\n  onSaveHandler,\n  invitePortal,\n}: {\n  setContactImportField: (value: Record<string, unknown>) => void;\n  contactImportField: ContactImportFieldType;\n  onCloseHandler: () => void;\n  onSaveHandler: () => void;\n  invitePortal: {\n    hasInvitePortal: boolean;\n    value: boolean | null;\n    onChangeHandler: (value: Record<string, unknown>) => void;\n  };\n}) => {\n  const [inputValue, setInputValue] = useState(\"\");\n  return (\n    <Dialog open>\n      <DialogContent\n        css={{\n          padding: 0,\n          borderRadius: \"$3xl\",\n          maxWidth: MODAL_MAX_WIDTH,\n        }}\n      >\n        <Flex\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          css={{\n            padding: \"$8 $12\",\n            borderBottom: \"$borderWidths$xs solid $neutral200\",\n          }}\n        >\n          <Heading size=\"h6\" css={{ color: \"$neutral900\" }}>\n            Import Configuration\n          </Heading>\n          <IconButton\n            variant=\"ghost\"\n            color=\"default\"\n            icon={<CloseIcon />}\n            size=\"lg\"\n            css={{\n              \"& svg\": {\n                color: \"#64748B !important\",\n              },\n            }}\n            onClick={() => onCloseHandler()}\n          />\n        </Flex>\n        <Box\n          css={{\n            padding: \"$12\",\n          }}\n        >\n          <FormInput\n            label=\"Title of this import for future reference\"\n            requiredIndicator\n            value={contactImportField?.configure?.reference || inputValue}\n            maxLength={INPUT_MAX_LENGTH}\n            max={INPUT_MAX_LENGTH}\n            showCount\n            onChange={(event: any) => setInputValue(event.currentTarget.value)}\n            size=\"lg\"\n          />\n          {invitePortal.hasInvitePortal ? (\n            <Box css={{ marginTop: \"$12\" }}>\n              <Checkbox\n                checked={!!invitePortal.value}\n                onChange={(value: any) => {\n                  setContactImportField({\n                    ...contactImportField,\n                    invitePortal: value,\n                  });\n                  invitePortal.onChangeHandler(value);\n                }}\n              >\n                Invite to portal whenever a contact is created\n              </Checkbox>\n            </Box>\n          ) : null}\n        </Box>\n        <Flex\n          gap=\"$4\"\n          css={{\n            justifyContent: \"flex-end\",\n            padding: \"$8 $12\",\n          }}\n        >\n          <Button size=\"lg\" color=\"default\" onClick={() => onCloseHandler()}>\n            Cancel\n          </Button>\n          <Button\n            size=\"lg\"\n            disabled={!inputValue?.length}\n            onClick={() => {\n              setContactImportField({\n                ...contactImportField,\n                description: inputValue,\n                id: generateUniqueId(),\n              });\n              onSaveHandler();\n              onCloseHandler();\n            }}\n          >\n            Finish Import\n          </Button>\n        </Flex>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"names":["useState","useEffect","ThemeWrapper","Box","ContactImportConfigure","ContactImportMapping","Dashboard","Flex","IconButton","ArrowLeftIcon","Heading","Button","Arrow","ChevronRightIcon","Dialog","DialogContent","MODAL_MAX_WIDTH","CloseIcon","FormInput","INPUT_MAX_LENGTH","Checkbox","generateUniqueId"],"mappings":"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"}