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

package/dist/es/contact-import/components/contact-import-mapping.js

@@ -0,0 +1,220 @@
+import React__default, { useRef, useEffect } from 'react';
+import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { Heading } from '../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
+import { Text } from '../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { Table, Thead, Th, Tbody, Tr, Td } from '../../node_modules/@sparrowengg/twigs-react/dist/es/table/table.js';
+import { FormInput } from '../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js';
+import { FormLabel } from '../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js';
+import { IconButton } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
+import { DeleteIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/delete.js';
+import { Select } from '../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js';
+import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+import { PlusIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const defaultFieldValue = {
+  integrationField: null,
+  surveySparrowField: null,
+  sampleData: [],
+  property: "custom",
+  mapped: false,
+  surveySparrowFieldError: false
+};
+const ContactImportMapping = ({
+  contactImportField,
+  setContactImportField,
+  integrationName,
+  contactProperties
+}) => {
+  const customPropertyRef = useRef(null);
+  const initialRenderRef = useRef(true);
+  useEffect(() => {
+    if (!initialRenderRef.current && (customPropertyRef == null ? void 0 : customPropertyRef.current)) {
+      customPropertyRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "end"
+      });
+    }
+    initialRenderRef.current = false;
+  }, [contactImportField]);
+  const customFieldHandler = (id, property, value) => {
+    setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+      fields: prev.fields.map(
+        (field) => field.id === id ? __spreadProps(__spreadValues({}, field), { [property]: value }) : field
+      )
+    }));
+  };
+  const updateSurveySparrowField = (value, id, manuallyMapped) => {
+    setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+      fields: prev.fields.map(
+        (field) => field.id === id ? __spreadValues(__spreadProps(__spreadValues({}, field), {
+          surveySparrowField: value
+        }), manuallyMapped && { mapped: true }) : field
+      )
+    }));
+  };
+  const addCustomProperty = () => {
+    setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+      fields: [
+        ...prev.fields,
+        __spreadValues({
+          id: prev.fields.length ? typeof prev.fields[prev.fields.length - 1].id === "number" ? prev.fields[prev.fields.length - 1].id + 1 : Date.now() : 1
+        }, defaultFieldValue)
+      ]
+    }));
+  };
+  const deleteCustomProperty = (id) => {
+    setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+      fields: prev.fields.filter((field) => field.id !== id)
+    }));
+  };
+  return /* @__PURE__ */ React__default.createElement(Flex, { justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: "$40", maxWidth: 1176, width: "100%" } }, /* @__PURE__ */ React__default.createElement(Box, { css: { paddingLeft: "$28" } }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5" }, "Map Contact Properties"), /* @__PURE__ */ React__default.createElement(Text, { css: { marginTop: "$4", color: "$neutral600" }, size: "md" }, "Review these mappings before importing. Unmapped columns will be ignored.")), /* @__PURE__ */ React__default.createElement(
+    Box,
+    {
+      css: {
+        height: "calc(100vh - 241px)",
+        paddingTop: "$16",
+        overflowY: "auto",
+        position: "relative",
+        background: "$white900",
+        paddingLeft: "$28"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Table,
+      {
+        css: {
+          width: "100%",
+          background: "$white900",
+          borderRadius: "5px",
+          borderCollapse: "collapse"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Thead, { css: { zIndex: 5, position: "sticky", top: "-31px" } }, /* @__PURE__ */ React__default.createElement(Th, null, `${integrationName} Profile Fields Data`), /* @__PURE__ */ React__default.createElement(Th, { css: { borderLeft: "$borderWidths$xs solid $neutral100" } }, "SurveySparrow Mapping")),
+      /* @__PURE__ */ React__default.createElement(Tbody, null, contactImportField.fields.map((field) => {
+        var _a, _b;
+        const hasSurveyFieldValue = contactProperties.some(
+          (contact) => contact.value === field.surveySparrowField
+        );
+        return /* @__PURE__ */ React__default.createElement(Tr, { key: field.id }, /* @__PURE__ */ React__default.createElement(Td, { css: { width: 560 } }, field.property !== "custom" ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "medium" }, typeof field.integrationField === "string" ? field.integrationField.replace("_", " ") : field.integrationField), (_a = field.sampleData) == null ? void 0 : _a.map((sample, index) => /* @__PURE__ */ React__default.createElement(
+          Text,
+          {
+            key: index,
+            size: "xs",
+            css: { lineHeight: "$xs" }
+          },
+          sample.length > 40 ? `${sample.slice(0, 40)}...` : sample
+        ))) : /* @__PURE__ */ React__default.createElement(Box, { css: { position: "relative" } }, /* @__PURE__ */ React__default.createElement(
+          FormInput,
+          {
+            size: "lg",
+            onChange: (event) => customFieldHandler(
+              field.id,
+              "integrationField",
+              event.target.value
+            )
+          }
+        ), /* @__PURE__ */ React__default.createElement(
+          FormLabel,
+          {
+            css: { marginTop: "$4", color: "$neutral400" }
+          },
+          "Enter the exact custom property name for accurate mapping. It is case-sensitive."
+        ), /* @__PURE__ */ React__default.createElement(
+          IconButton,
+          {
+            css: {
+              position: "absolute",
+              top: "0",
+              left: "-70px"
+            },
+            size: "lg",
+            variant: "ghost",
+            color: "secondary",
+            onClick: () => deleteCustomProperty(field.id),
+            icon: /* @__PURE__ */ React__default.createElement(DeleteIcon, null)
+          }
+        ))), /* @__PURE__ */ React__default.createElement(
+          Td,
+          {
+            css: {
+              width: 560,
+              borderLeft: "$borderWidths$xs solid $neutral100"
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(
+            Select,
+            {
+              size: "lg",
+              placeholder: "--Choose Property--",
+              value: field.surveySparrowField ? {
+                label: (_b = contactProperties.find(
+                  (contact) => contact.value === field.surveySparrowField
+                )) == null ? void 0 : _b.label,
+                value: field.surveySparrowField
+              } : null,
+              options: contactProperties.filter(
+                (contact) => contact.type !== "DEPENDENT_FIELD"
+              ),
+              onChange: (currentField) => updateSurveySparrowField(
+                currentField.value,
+                field.id,
+                true
+              )
+            }
+          ),
+          hasSurveyFieldValue && /* @__PURE__ */ React__default.createElement(
+            FormLabel,
+            {
+              size: "xs",
+              css: {
+                color: field.mapped ? "$neutral600" : "#0F966C",
+                marginBlock: "$4"
+              }
+            },
+            field.mapped ? "Manually mapped by you" : "Automatically mapped"
+          ),
+          !field.surveySparrowField && field.surveySparrowFieldError && /* @__PURE__ */ React__default.createElement(
+            FormLabel,
+            {
+              css: { color: "$negative500", marginTop: "$4" },
+              size: "xs"
+            },
+            "Please select the property"
+          )
+        ));
+      }), /* @__PURE__ */ React__default.createElement(Tr, null, /* @__PURE__ */ React__default.createElement(Td, { colSpan: 2 }, /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          size: "md",
+          variant: "ghost",
+          leftIcon: /* @__PURE__ */ React__default.createElement(PlusIcon, null),
+          onClick: addCustomProperty
+        },
+        "Add Custom Property"
+      ))))
+    )
+  )));
+};
+
+export { ContactImportMapping as default };
+//# sourceMappingURL=contact-import-mapping.js.map

package/dist/es/contact-import/components/contact-import-mapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-import-mapping.js","sources":["../../../../src/contact-import/components/contact-import-mapping.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Flex,\n  FormInput,\n  FormLabel,\n  Heading,\n  IconButton,\n  Select,\n  Table,\n  Tbody,\n  Td,\n  Text,\n  Th,\n  Thead,\n  Tr,\n} from \"@sparrowengg/twigs-react\";\nimport { DeleteIcon, PlusIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ContactImportMappingProps } from \"../types\";\nimport { SelectOption } from \"../../commons/types/enhanced\";\n\n// Define the Field type with all the properties used in the component\ntype Field = {\n  id: string | number;\n  integrationField: string | number | null;\n  surveySparrowField: string | number | null;\n  sampleData?: Array<string>;\n  property?: \"custom\" | \"default\";\n  mapped?: boolean;\n  surveySparrowFieldError?: boolean;\n};\n\n\nconst defaultFieldValue: Omit<Field, \"id\"> = {\n  integrationField: null,\n  surveySparrowField: null,\n  sampleData: [],\n  property: \"custom\",\n  mapped: false,\n  surveySparrowFieldError: false,\n};\n\nconst ContactImportMapping: React.FC<ContactImportMappingProps> = ({\n  contactImportField,\n  setContactImportField,\n  integrationName,\n  contactProperties,\n}) => {\n  const customPropertyRef = useRef<HTMLDivElement | null>(null);\n  const initialRenderRef = useRef(true);\n\n  useEffect(() => {\n    if (!initialRenderRef.current && customPropertyRef?.current) {\n      customPropertyRef.current.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"end\",\n      });\n    }\n    initialRenderRef.current = false;\n  }, [contactImportField]);\n\n  const customFieldHandler = (\n    id: string | number,\n    property: keyof Field,\n    value: string | number | boolean | null\n  ) => {\n    setContactImportField((prev) => ({\n      ...prev,\n      fields: prev.fields.map((field) =>\n        field.id === id ? { ...field, [property]: value } : field\n      ),\n    }));\n  };\n\n  const updateSurveySparrowField = (\n    value: string | number,\n    id: string | number,\n    manuallyMapped: boolean\n  ) => {\n    setContactImportField((prev) => ({\n      ...prev,\n      fields: prev.fields.map((field) =>\n        field.id === id\n          ? {\n              ...field,\n              surveySparrowField: value,\n              ...(manuallyMapped && { mapped: true }),\n            }\n          : field\n      ),\n    }));\n  };\n\n  const addCustomProperty = () => {\n    setContactImportField((prev) => ({\n      ...prev,\n      fields: [\n        ...prev.fields,\n        {\n          id: prev.fields.length\n            ? (typeof prev.fields[prev.fields.length - 1].id === 'number' \n                ? (prev.fields[prev.fields.length - 1].id as number) + 1 \n                : Date.now())\n            : 1,\n          ...defaultFieldValue,\n        },\n      ],\n    }));\n  };\n\n  const deleteCustomProperty = (id: string | number) => {\n    setContactImportField((prev) => ({\n      ...prev,\n      fields: prev.fields.filter((field) => field.id !== id),\n    }));\n  };\n\n  return (\n    <Flex justifyContent=\"center\">\n      <Box css={{ marginTop: \"$40\", maxWidth: 1176, width: \"100%\" }}>\n        <Box css={{ paddingLeft: \"$28\" }}>\n          <Heading size=\"h5\">Map Contact Properties</Heading>\n          <Text css={{ marginTop: \"$4\", color: \"$neutral600\" }} size=\"md\">\n            Review these mappings before importing. Unmapped columns will be\n            ignored.\n          </Text>\n        </Box>\n        <Box\n          css={{\n            height: \"calc(100vh - 241px)\",\n            paddingTop: \"$16\",\n            overflowY: \"auto\",\n            position: \"relative\",\n            background: \"$white900\",\n            paddingLeft: \"$28\",\n          }}\n        >\n          <Table\n            css={{\n              width: \"100%\",\n              background: \"$white900\",\n              borderRadius: \"5px\",\n              borderCollapse: \"collapse\",\n            }}\n          >\n            <Thead css={{ zIndex: 5, position: \"sticky\", top: \"-31px\" }}>\n              <Th>{`${integrationName} Profile Fields Data`}</Th>\n              <Th css={{ borderLeft: \"$borderWidths$xs solid $neutral100\" }}>\n                SurveySparrow Mapping\n              </Th>\n            </Thead>\n            <Tbody>\n              {contactImportField.fields.map((field) => {\n                const hasSurveyFieldValue = contactProperties.some(\n                  (contact) => contact.value === field.surveySparrowField\n                );\n\n                return (\n                  <Tr key={field.id}>\n                    <Td css={{ width: 560 }}>\n                      {field.property !== \"custom\" ? (\n                        <>\n                          <Text size=\"sm\" weight=\"medium\">\n                            {typeof field.integrationField === 'string' \n                              ? field.integrationField.replace(\"_\", \" \")\n                              : field.integrationField}\n                          </Text>\n                          {field.sampleData?.map((sample, index) => (\n                            <Text\n                              key={index}\n                              size=\"xs\"\n                              css={{ lineHeight: \"$xs\" }}\n                            >\n                              {sample.length > 40\n                                ? `${sample.slice(0, 40)}...`\n                                : sample}\n                            </Text>\n                          ))}\n                        </>\n                      ) : (\n                        <Box css={{ position: \"relative\" }}>\n                          <FormInput\n                            size=\"lg\"\n                            onChange={(event: any) =>\n                              customFieldHandler(\n                                field.id,\n                                \"integrationField\",\n                                event.target.value\n                              )\n                            }\n                          />\n                          <FormLabel\n                            css={{ marginTop: \"$4\", color: \"$neutral400\" }}\n                          >\n                            Enter the exact custom property name for accurate\n                            mapping. It is case-sensitive.\n                          </FormLabel>\n                          <IconButton\n                            css={{\n                              position: \"absolute\",\n                              top: \"0\",\n                              left: \"-70px\",\n                            }}\n                            size=\"lg\"\n                            variant=\"ghost\"\n                            color=\"secondary\"\n                            onClick={() => deleteCustomProperty(field.id)}\n                            icon={<DeleteIcon />}\n                          />\n                        </Box>\n                      )}\n                    </Td>\n                    <Td\n                      css={{\n                        width: 560,\n                        borderLeft: \"$borderWidths$xs solid $neutral100\",\n                      }}\n                    >\n                      <Select\n                        size=\"lg\"\n                        placeholder=\"--Choose Property--\"\n                        value={\n                          field.surveySparrowField\n                            ? {\n                                label: contactProperties.find(\n                                  (contact) =>\n                                    contact.value === field.surveySparrowField\n                                )?.label,\n                                value: field.surveySparrowField,\n                              }\n                            : null\n                        }\n                        options={contactProperties.filter(\n                          (contact) => contact.type !== \"DEPENDENT_FIELD\"\n                        )}\n                        onChange={(currentField: any) =>\n                          updateSurveySparrowField(\n                            currentField.value,\n                            field.id,\n                            true\n                          )\n                        }\n                      />\n                      {hasSurveyFieldValue && (\n                        <FormLabel\n                          size=\"xs\"\n                          css={{\n                            color: field.mapped ? \"$neutral600\" : \"#0F966C\",\n                            marginBlock: \"$4\",\n                          }}\n                        >\n                          {field.mapped\n                            ? \"Manually mapped by you\"\n                            : \"Automatically mapped\"}\n                        </FormLabel>\n                      )}\n                      {!field.surveySparrowField &&\n                        field.surveySparrowFieldError && (\n                          <FormLabel\n                            css={{ color: \"$negative500\", marginTop: \"$4\" }}\n                            size=\"xs\"\n                          >\n                            Please select the property\n                          </FormLabel>\n                        )}\n                    </Td>\n                  </Tr>\n                );\n              })}\n              <Tr>\n                <Td colSpan={2}>\n                  <Button\n                    size=\"md\"\n                    variant=\"ghost\"\n                    leftIcon={<PlusIcon />}\n                    onClick={addCustomProperty}\n                  >\n                    Add Custom Property\n                  </Button>\n                </Td>\n              </Tr>\n            </Tbody>\n          </Table>\n        </Box>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default ContactImportMapping;\n"],"names":["React"],"mappings":"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"}

package/dist/es/contact-import/constants.js

@@ -0,0 +1,18 @@
+const frequent = {
+  ONETIME: {
+    label: "One time",
+    value: "oneTime"
+  },
+  RECURRING: {
+    label: "Recurring",
+    value: "recurring"
+  }
+};
+const scheduleOptions = [
+  { id: 1, label: "Daily", value: "Daily" },
+  { id: 2, label: "Weekly", value: "Weekly" },
+  { id: 3, label: "Monthly", value: "Monthly" }
+];
+
+export { frequent, scheduleOptions };
+//# sourceMappingURL=constants.js.map

package/dist/es/contact-import/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/contact-import/constants.ts"],"sourcesContent":["export const frequent = {\n  ONETIME: {\n    label: \"One time\",\n    value: \"oneTime\" ,\n  },\n  RECURRING: {\n    label: \"Recurring\",\n    value: \"recurring\" ,\n  },\n};\nexport const scheduleOptions = [\n  { id: 1, label: \"Daily\", value: \"Daily\" },\n  { id: 2, label: \"Weekly\", value: \"Weekly\" },\n  { id: 3, label: \"Monthly\", value: \"Monthly\" },\n];"],"names":[],"mappings":"AAAO,MAAM,QAAW,GAAA;AAAA,EACtB,OAAS,EAAA;AAAA,IACP,KAAO,EAAA,UAAA;AAAA,IACP,KAAO,EAAA,SAAA;AAAA,GACT;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAO,EAAA,WAAA;AAAA,IACP,KAAO,EAAA,WAAA;AAAA,GACT;AACF,EAAA;AACO,MAAM,eAAkB,GAAA;AAAA,EAC7B,EAAE,EAAI,EAAA,CAAA,EAAG,KAAO,EAAA,OAAA,EAAS,OAAO,OAAQ,EAAA;AAAA,EACxC,EAAE,EAAI,EAAA,CAAA,EAAG,KAAO,EAAA,QAAA,EAAU,OAAO,QAAS,EAAA;AAAA,EAC1C,EAAE,EAAI,EAAA,CAAA,EAAG,KAAO,EAAA,SAAA,EAAW,OAAO,SAAU,EAAA;AAC9C;;;;"}

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

@@ -1,10 +1,22 @@
+import { generateUniqueId } from '../commons/helpers/index.js';
 import React__default, { useState, useEffect } from 'react';
+import Arrow from '../commons/icons/arrow.js';
+import ContactImportConfigure from './components/contact-import-configure.js';
+import ContactImportMapping from './components/contact-import-mapping.js';
 import ThemeWrapper from '../commons/components/theme-wrapper.js';
-import ContactImportHeader from './components/ContactImportHeader.js';
-import ContactImportConfigure from './components/ContactImportConfigure.js';
-import ContactImportMapping from './components/ContactImportMapping.js';
-import Dashboard from './components/ManageImport/Dashboard.js';
+import Dashboard from './components/ManageImport/dashboard.js';
+import { MODAL_MAX_WIDTH, INPUT_MAX_LENGTH } from '../commons/constants/index.js';
 import { Box } from '../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { Flex } from '../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { IconButton } from '../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
+import { ArrowLeftIcon } from '../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js';
+import { Heading } from '../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
+import { Button } from '../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+import { ChevronRightIcon } from '../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js';
+import { Dialog, DialogContent } from '../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialog.js';
+import { CloseIcon } from '../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close.js';
+import { FormInput } from '../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js';
+import { Checkbox } from '../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -43,14 +55,8 @@ const ContactImport = ({
   const [newImport, setNewImport] = useState(true);
   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__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(ThemeWrapper, null, /* @__PURE__ */ React__default.createElement(Box, { css: { height: "100vh", width: "100vw" } }, newImport && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     ContactImportHeader,
     {
       setNewImport,
@@ -67,7 +73,12 @@ const ContactImport = ({
     ContactImportConfigure,
     {
       contactImportField,
-      handleConfigureField: handleConfigureComplete,
+      handleConfigureField: (value) => {
+        setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+          configure: __spreadValues({}, value)
+        }));
+        navigateMappingPage(true);
+      },
       listSegmentOptions
     }
   ) : /* @__PURE__ */ React__default.createElement(
@@ -78,23 +89,225 @@ const ContactImport = ({
       integrationName,
       contactProperties
     }
-  ));
-  const renderDashboard = () => {
-    if (!(existingImports == null ? void 0 : existingImports.length) || newImport) {
-      return null;
+  )), (existingImports == null ? void 0 : existingImports.length) && !newImport ? /* @__PURE__ */ React__default.createElement(
+    Dashboard,
+    {
+      dashboardDescription,
+      setNewImport,
+      integrationName,
+      imports: existingImports
     }
-    return /* @__PURE__ */ React__default.createElement(
-      Dashboard,
+  ) : null));
+};
+const ContactImportHeader = ({
+  setNewImport,
+  setContactImportField,
+  contactImportField,
+  hasPreviousMapping,
+  previousMappingHandler,
+  onSaveHandler,
+  isContactMappingPage,
+  navigateMappingPage,
+  invitePortal
+}) => {
+  const [showImportModal, setShowImportModal] = useState(false);
+  return /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
       {
-        dashboardDescription,
-        setNewImport,
-        integrationName,
-        imports: existingImports
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasPreviousMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          onClick: () => {
+            setNewImport(false);
+            previousMappingHandler();
+          },
+          color: "default",
+          icon: /* @__PURE__ */ React__default.createElement(ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement(Heading, { size: "h6" }, "New Contact Import")
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          css: { color: !isContactMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isContactMappingPage && navigateMappingPage(false)
+        },
+        "Event Setup"
+      ),
+      /* @__PURE__ */ React__default.createElement(Arrow, null),
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          css: { color: isContactMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          disabled: !isContactMappingPage
+        },
+        "Mapping"
+      )
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "lg",
+        onClick: () => setShowImportModal(true),
+        rightIcon: /* @__PURE__ */ React__default.createElement(ChevronRightIcon, null),
+        css: { visibility: isContactMappingPage ? "visible" : "hidden" }
+      },
+      "Continue"
+    ),
+    showImportModal ? /* @__PURE__ */ React__default.createElement(
+      ContactImportModal,
+      {
+        setContactImportField,
+        contactImportField,
+        invitePortal,
+        onSaveHandler: async () => {
+          await onSaveHandler();
+          setNewImport(false);
+        },
+        onCloseHandler: () => setShowImportModal(false)
       }
-    );
-  };
-  return /* @__PURE__ */ React__default.createElement(ThemeWrapper, null, /* @__PURE__ */ React__default.createElement(Box, { css: { height: "100vh", width: "100vw" } }, newImport && renderNewImportFlow(), renderDashboard()));
+    ) : null
+  );
+};
+const ContactImportModal = ({
+  setContactImportField,
+  contactImportField,
+  onCloseHandler,
+  onSaveHandler,
+  invitePortal
+}) => {
+  var _a;
+  const [inputValue, setInputValue] = useState("");
+  return /* @__PURE__ */ React__default.createElement(Dialog, { open: true }, /* @__PURE__ */ React__default.createElement(
+    DialogContent,
+    {
+      css: {
+        padding: 0,
+        borderRadius: "$3xl",
+        maxWidth: MODAL_MAX_WIDTH
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        justifyContent: "space-between",
+        css: {
+          padding: "$8 $12",
+          borderBottom: "$borderWidths$xs solid $neutral200"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Heading, { size: "h6", css: { color: "$neutral900" } }, "Import Configuration"),
+      /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          variant: "ghost",
+          color: "default",
+          icon: /* @__PURE__ */ React__default.createElement(CloseIcon, null),
+          size: "lg",
+          css: {
+            "& svg": {
+              color: "#64748B !important"
+            }
+          },
+          onClick: () => onCloseHandler()
+        }
+      )
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        css: {
+          padding: "$12"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        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: INPUT_MAX_LENGTH,
+          max: INPUT_MAX_LENGTH,
+          showCount: true,
+          onChange: (event) => setInputValue(event.currentTarget.value),
+          size: "lg"
+        }
+      ),
+      invitePortal.hasInvitePortal ? /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: "$12" } }, /* @__PURE__ */ React__default.createElement(
+        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__default.createElement(
+      Flex,
+      {
+        gap: "$4",
+        css: {
+          justifyContent: "flex-end",
+          padding: "$8 $12"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Button, { size: "lg", color: "default", onClick: () => onCloseHandler() }, "Cancel"),
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          size: "lg",
+          disabled: !(inputValue == null ? void 0 : inputValue.length),
+          onClick: () => {
+            setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+              description: inputValue,
+              id: generateUniqueId()
+            }));
+            onSaveHandler();
+            onCloseHandler();
+          }
+        },
+        "Finish Import"
+      )
+    )
+  ));
 };
 
-export { ContactImport, ContactImport as default };
+export { ContactImport };
 //# sourceMappingURL=index.js.map

package/dist/es/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":["React"],"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,GAAI,SAAS,IAAI,CAAA,CAAA;AAG/C,EAAA,SAAA,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,sBAExBA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;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,mBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,kBAAA;AAAA,MACA,oBAAsB,EAAA,uBAAA;AAAA,MACtB,kBAAA;AAAA,KAAA;AAAA,GAGF,mBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,oBAAA;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,uBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,SAAA;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,oDACG,YACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,GAAI,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":["React"],"mappings":"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"}