@sparrowengg/integrations-templates-frontend 1.2.4

package/dist/cjs/contact-import/components/contact-import-configure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-import-configure.js","sources":["../../../../src/contact-import/components/contact-import-configure.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Flex,\n  Heading,\n  Radio,\n  RadioGroup,\n  Select\n} from \"@sparrowengg/twigs-react\";\nimport { ChevronRightIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React, { useState } from \"react\";\n\nconst ContactImportConfigure = ({\n  handleConfigureField,\n  listSegmentOptions,\n  contactImportField\n}: any) => {\n  const [currentConfig, setCurrentConfig] = useState(\"LIST\");\n  const [currentList, setCurrentList] = useState(\n    contactImportField?.configure?.listSegmentValue ?? null\n  );\n\n  return (\n    <Flex justifyContent=\"center\">\n      <Box css={{ marginTop: \"$40\", maxWidth: 488, width: \"100%\" }}>\n        <Heading size=\"h5\">Import Contacts</Heading>\n        <RadioGroup\n          defaultValue={currentConfig}\n          onChange={(value) => {\n            setCurrentConfig(value);\n            setCurrentList(null);\n          }}\n        >\n          <Flex\n            css={{ marginTop: \"$12\", \"& label\": { color: \"$neutral800\" } }}\n            alignItems=\"center\"\n            gap=\"$12\"\n          >\n            <Radio size=\"md\" value=\"LIST\" css={{ cursor: \"pointer\" }}>\n              Import from (List/Segment)\n            </Radio>\n            <Radio size=\"md\" value=\"ALL\" css={{ cursor: \"pointer\" }}>\n              Import All Contacts\n            </Radio>\n          </Flex>\n        </RadioGroup>\n        {currentConfig === \"LIST\" ? (\n          <Select\n            css={{ marginTop: \"$12\" }}\n            onChange={(value) => setCurrentList(value)}\n            size=\"lg\"\n            placeholder=\"Choose (List/Segment)\"\n            options={listSegmentOptions}\n            value={currentList}\n          />\n        ) : null}\n        <Button\n          css={{ marginTop: \"$16\" }}\n          disabled={!currentList?.value && currentConfig !== 'ALL'}\n          size=\"lg\"\n          onClick={() => {\n            handleConfigureField({\n              type: currentConfig,\n              listSegmentValue: currentList\n            });\n          }}\n          rightIcon={<ChevronRightIcon />}\n        >\n          Next, Mapping\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default ContactImportConfigure;\n"],"names":["useState","Flex","Box","Heading","RadioGroup","Radio","Select","Button","ChevronRightIcon"],"mappings":"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"}

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

@@ -0,0 +1,333 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var table = require('../../node_modules/@sparrowengg/twigs-react/dist/es/table/table.js');
+var formInput = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
+var formLabel = require('../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js');
+var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var _delete = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/delete.js');
+var select = require('../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var plus = require('../../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: "",
+  property: "custom"
+};
+const ContactImportMapping = ({
+  contactImportField,
+  setContactImportField,
+  integrationName,
+  contactProperties
+}) => {
+  const customPropertyRef = React.useRef(null);
+  const initialRenderRef = React.useRef(true);
+  React.useRef(false);
+  React.useEffect(() => {
+    if (initialRenderRef.current) {
+      initialRenderRef.current = false;
+    } else {
+      if (customPropertyRef == null ? void 0 : customPropertyRef.current) {
+        customPropertyRef.current.scrollIntoView({
+          behavior: "smooth",
+          block: "end"
+        });
+      }
+    }
+  }, []);
+  const customFieldHandler = (id, property, value) => {
+    setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+      fields: contactImportField.fields.map((field) => {
+        if (field.id === id) {
+          return __spreadProps(__spreadValues({}, field), { [property]: value });
+        } else {
+          return __spreadValues({}, field);
+        }
+      })
+    }));
+  };
+  const updateSurveySparrowField = (value, id, manuallyMapped) => {
+    setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+      fields: contactImportField == null ? void 0 : contactImportField.fields.map((field) => {
+        if (field.id === id) {
+          return __spreadValues(__spreadProps(__spreadValues({}, field), {
+            surveySparrowField: value
+          }), manuallyMapped && { mapped: manuallyMapped });
+        } else {
+          return __spreadValues({}, field);
+        }
+      })
+    }));
+  };
+  const addCustomProperty = () => {
+    var _a, _b;
+    setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+      fields: [
+        ...contactImportField.fields,
+        __spreadValues({
+          id: ((_a = contactImportField.fields) == null ? void 0 : _a.length) ? contactImportField.fields[((_b = contactImportField.fields) == null ? void 0 : _b.length) - 1].id + 1 : 1
+        }, defaultFieldValue)
+      ]
+    }));
+  };
+  console.log(contactImportField);
+  return /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center" }, /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: "$40", maxWidth: 1176, width: "100%" } }, /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: {
+        paddingLeft: "$28"
+      }
+    },
+    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, "Map Contact Properties"),
+    /* @__PURE__ */ React.createElement(text.Text, { css: { marginTop: "$4", color: "$neutral600" }, size: "md" }, "Review these mappings before importing. Unmapped columns will be ignored.")
+  ), /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: {
+        height: "calc(100vh - 241px)",
+        paddingTop: "$16",
+        overflowY: "auto",
+        position: "relative",
+        background: "$white900",
+        paddingLeft: "$28"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      table.Table,
+      {
+        css: {
+          width: "100%",
+          background: "$white900",
+          borderRadius: "5px",
+          borderCollapse: "collapse"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        table.Thead,
+        {
+          css: {
+            outline: "$borderWidths$xs solid $neutral200",
+            zIndex: 5,
+            position: "sticky",
+            top: "-31px",
+            "& th": {
+              textAlign: "left",
+              fontWeight: 700,
+              paddingBlock: "$6",
+              lineHeight: "$sm",
+              background: "$white900"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(table.Th, null, `${integrationName} Profile Fields Data`),
+        /* @__PURE__ */ React.createElement(table.Th, null, "SurveySparrow Mapping")
+      ),
+      /* @__PURE__ */ React.createElement(
+        table.Tbody,
+        {
+          css: {
+            "& tr": {
+              borderBottom: "$borderWidths$xs solid $neutral200"
+            }
+          }
+        },
+        contactImportField.fields.map((field) => {
+          var _a, _b;
+          const hasSurveyFieldValue = contactProperties.some(
+            (contact) => contact.value === field.surveySparrowField
+          );
+          return /* @__PURE__ */ React.createElement(
+            table.Tr,
+            {
+              key: field.id,
+              css: {
+                position: "relative",
+                "& td": {
+                  paddingBlock: "$8 $12",
+                  paddingInline: "$6",
+                  verticalAlign: "top"
+                }
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              table.Td,
+              {
+                css: {
+                  width: 560,
+                  "& > p": {
+                    lineHeight: "$sm",
+                    color: "$neutral600"
+                  }
+                }
+              },
+              field.property !== "custom" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+                text.Text,
+                {
+                  size: "sm",
+                  css: {
+                    color: "$neutral900 !important"
+                  },
+                  weight: "medium"
+                },
+                (((_a = field == null ? void 0 : field.integrationField) == null ? void 0 : _a.charAt(0).toUpperCase()) + (field == null ? void 0 : field.integrationField.slice(1))).replace("_", " ")
+              ), (field == null ? void 0 : field.sampleData.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, field.sampleData.map((sample) => /* @__PURE__ */ React.createElement(
+                text.Text,
+                {
+                  size: "xs",
+                  css: {
+                    color: "$neutral600",
+                    lineHeight: "$xs !important"
+                  }
+                },
+                sample.length > 40 ? sample.slice(0, 40) + "..." : sample
+              ))) : null) : /* @__PURE__ */ React.createElement(box.Box, { css: { position: "relative" } }, /* @__PURE__ */ React.createElement(
+                formInput.FormInput,
+                {
+                  size: "lg",
+                  onChange: (event) => customFieldHandler(
+                    field.id,
+                    "integrationField",
+                    event.currentTarget.value
+                  )
+                }
+              ), /* @__PURE__ */ React.createElement(
+                formLabel.FormLabel,
+                {
+                  css: { marginTop: "$4", color: "$neutral400" }
+                },
+                "Enter the exact custom property name for accurate mapping. It is case-sensitive."
+              ), field.property === "custom" ? /* @__PURE__ */ React.createElement(
+                iconButton.IconButton,
+                {
+                  css: {
+                    position: "absolute",
+                    top: "0",
+                    left: "-70px"
+                  },
+                  size: "lg",
+                  variant: "ghost",
+                  color: "secondary",
+                  onClick: () => {
+                    setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+                      fields: contactImportField == null ? void 0 : contactImportField.fields.filter((currentField) => (currentField == null ? void 0 : currentField.id) !== (field == null ? void 0 : field.id))
+                    }));
+                  },
+                  icon: /* @__PURE__ */ React.createElement(_delete.DeleteIcon, null)
+                }
+              ) : null)
+            ),
+            /* @__PURE__ */ React.createElement(
+              table.Td,
+              {
+                css: {
+                  width: 560
+                }
+              },
+              /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+                select.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
+                    );
+                  },
+                  css: __spreadValues({
+                    marginBottom: !hasSurveyFieldValue && !field.surveySparrowFieldError && field.property === "custom" ? "$12" : 0
+                  }, !field.surveySparrowField && field.surveySparrowFieldError && {
+                    "& .twigs-select__control, & .twigs-select__control:hover": {
+                      boxShadow: "0px 1.5px 0px 0px #f65633",
+                      borderBottom: 0
+                    }
+                  })
+                }
+              ), hasSurveyFieldValue ? /* @__PURE__ */ React.createElement(
+                formLabel.FormLabel,
+                {
+                  css: {
+                    color: (field == null ? void 0 : field.mapped) ? "$neutral600" : "#0F966C",
+                    marginBlock: "$4 $12"
+                  },
+                  size: "xs"
+                },
+                (field == null ? void 0 : field.mapped) ? "Manually mapped by you" : "Automatically mapped"
+              ) : null, !field.surveySparrowField && field.surveySparrowFieldError && /* @__PURE__ */ React.createElement(
+                formLabel.FormLabel,
+                {
+                  css: {
+                    color: "$negative500",
+                    marginTop: "$4"
+                  },
+                  size: "xs"
+                },
+                "Please select the property"
+              ))
+            )
+          );
+        }),
+        /* @__PURE__ */ React.createElement(
+          table.Tr,
+          {
+            css: {
+              borderBottom: "none !important",
+              "&:hover": {
+                background: "$white900"
+              }
+            }
+          },
+          /* @__PURE__ */ React.createElement(table.Td, { colSpan: 2 }, /* @__PURE__ */ React.createElement(
+            button.Button,
+            {
+              size: "md",
+              variant: "ghost",
+              leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null),
+              onClick: addCustomProperty
+            },
+            "Add Custom Property"
+          ))
+        )
+      )
+    )
+  )));
+};
+
+exports.default = ContactImportMapping;
+//# sourceMappingURL=contact-import-mapping.js.map

package/dist/cjs/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\";\nconst defaultFieldValue = {\n  integrationField: null,\n  surveySparrowField: \"\",\n  property: \"custom\"\n};\n\nconst ContactImportMapping = ({\n  contactImportField,\n  setContactImportField,\n  integrationName,\n  contactProperties,\n}: any) => {\n  const customPropertyRef = useRef<HTMLDivElement | null>(null);\n  const initialRenderRef = useRef(true);\n  const errorFieldRef = useRef(false);\n\n  useEffect(() => {\n    if (initialRenderRef.current) {\n      //to skip scroll on initial mounting\n      initialRenderRef.current = false;\n    } else {\n      if (customPropertyRef?.current) {\n        customPropertyRef.current.scrollIntoView({\n          behavior: \"smooth\",\n          block: \"end\"\n        });\n      }\n    }\n  }, []);\n\n  const customFieldHandler = (\n    id: string | number,\n    property: string,\n    value: any\n  ) => {\n    setContactImportField({\n      ...contactImportField,\n      fields: contactImportField.fields.map((field: any) => {\n        if (field.id === id) {\n          return { ...field, [property]: value };\n        } else {\n          return { ...field };\n        }\n      })\n    });\n  };\n\n  const updateSurveySparrowField = (\n    value: any,\n    id: string | number,\n    manuallyMapped: boolean\n  ) => {\n    setContactImportField({\n      ...contactImportField,\n      fields: contactImportField?.fields.map((field: any) => {\n        if (field.id === id) {\n          return {\n            ...field,\n            surveySparrowField: value,\n            ...(manuallyMapped && { mapped: manuallyMapped })\n          };\n        } else {\n          return { ...field };\n        }\n      })\n    });\n  };\n\n  const addCustomProperty = () => {\n    setContactImportField({\n      ...contactImportField,\n      fields: [\n        ...contactImportField.fields,\n        {\n          id: contactImportField.fields?.length\n            ? contactImportField.fields[contactImportField.fields?.length - 1]\n                .id + 1\n            : 1,\n          ...defaultFieldValue\n        }\n      ]\n    });\n  };\n  console.log(contactImportField);\n\n  return (\n    <Flex justifyContent=\"center\">\n      <Box css={{ marginTop: \"$40\", maxWidth: 1176, width: \"100%\" }}>\n        <Box\n          css={{\n            paddingLeft: \"$28\"\n          }}\n        >\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\n              css={{\n                outline: \"$borderWidths$xs solid $neutral200\",\n                zIndex: 5,\n                position: \"sticky\",\n                top: \"-31px\",\n                \"& th\": {\n                  textAlign: \"left\",\n                  fontWeight: 700,\n                  paddingBlock: \"$6\",\n                  lineHeight: \"$sm\",\n                  background: \"$white900\"\n                }\n              }}\n            >\n              <Th>{`${integrationName} Profile Fields Data`}</Th>\n              <Th>SurveySparrow Mapping</Th>\n            </Thead>\n            <Tbody\n              css={{\n                \"& tr\": {\n                  borderBottom: \"$borderWidths$xs solid $neutral200\"\n                }\n              }}\n            >\n              {contactImportField.fields.map((field: any) => {\n                const hasSurveyFieldValue = contactProperties.some(\n                  (contact: any) => contact.value === field.surveySparrowField\n                );\n                return (\n                  <Tr\n                    key={field.id}\n                    css={{\n                      position: \"relative\",\n                      \"& td\": {\n                        paddingBlock: \"$8 $12\",\n                        paddingInline: \"$6\",\n                        verticalAlign: \"top\"\n                      }\n                    }}\n                  >\n                    <Td\n                      css={{\n                        width: 560,\n                        \"& > p\": {\n                          lineHeight: \"$sm\",\n                          color: \"$neutral600\"\n                        }\n                      }}\n                    >\n                      {field.property !== \"custom\" ? (\n                        <>\n                          <Text\n                            size=\"sm\"\n                            css={{\n                              color: \"$neutral900 !important\"\n                            }}\n                            weight=\"medium\"\n                          >\n                            {(\n                              field?.integrationField?.charAt(0).toUpperCase() +\n                              field?.integrationField.slice(1)\n                            ).replace(\"_\", \" \")}\n                          </Text>\n                          {field?.sampleData.length ? (\n                            <>\n                              {field.sampleData.map((sample: any) => (\n                                <Text\n                                  size=\"xs\"\n                                  css={{\n                                    color: \"$neutral600\",\n                                    lineHeight: \"$xs !important\"\n                                  }}\n                                >\n                                  {sample.length > 40\n                                    ? sample.slice(0, 40) + \"...\"\n                                    : sample}\n                                </Text>\n                              ))}\n                            </>\n                          ) : null}\n                        </>\n                      ) : (\n                        <Box css={{ position: \"relative\" }}>\n                          <FormInput\n                            size=\"lg\"\n                            onChange={(event) =>\n                              customFieldHandler(\n                                field.id,\n                                \"integrationField\",\n                                event.currentTarget.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                          {field.property === \"custom\" ? (\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={() => {\n                                  setContactImportField({\n                                    ...contactImportField,\n                                    fields: contactImportField?.fields.filter((currentField: any) => currentField?.id !== field?.id)\n                              })\n                              }}\n                              icon={<DeleteIcon />}\n                            />\n                          ) : null}\n                        </Box>\n                      )}\n                    </Td>\n                    <Td\n                      css={{\n                        width: 560\n                      }}\n                    >\n                      <>\n                        <Select\n                          size=\"lg\"\n                          placeholder=\"--Choose Property--\"\n                          value={\n                            field.surveySparrowField\n                              ? {\n                                  label: contactProperties.find(\n                                    (contact: any) =>\n                                      contact.value === field.surveySparrowField\n                                  )?.label,\n                                  value: field.surveySparrowField\n                                }\n                              : null\n                          }\n                          options={contactProperties.filter(\n                            (contact: any) => contact.type !== \"DEPENDENT_FIELD\"\n                          )}\n                          onChange={(currentField: any) => {\n                            updateSurveySparrowField(\n                              currentField.value,\n                              field.id,\n                              true\n                            );\n                          }}\n                          css={{\n                            marginBottom:\n                              !hasSurveyFieldValue &&\n                              !field.surveySparrowFieldError &&\n                              field.property === \"custom\"\n                                ? \"$12\"\n                                : 0,\n                            ...(!field.surveySparrowField &&\n                              field.surveySparrowFieldError && {\n                                \"& .twigs-select__control, & .twigs-select__control:hover\":\n                                  {\n                                    boxShadow: \"0px 1.5px 0px 0px #f65633\",\n                                    borderBottom: 0\n                                  }\n                              })\n                          }}\n                        />\n                        {hasSurveyFieldValue ? (\n                          <FormLabel\n                            css={{\n                              color: field?.mapped ? \"$neutral600\" : \"#0F966C\",\n                              marginBlock: \"$4 $12\"\n                            }}\n                            size=\"xs\"\n                          >\n                            {field?.mapped\n                              ? \"Manually mapped by you\"\n                              : \"Automatically mapped\"}\n                          </FormLabel>\n                        ) : null}\n                        {!field.surveySparrowField &&\n                          field.surveySparrowFieldError && (\n                            <FormLabel\n                              css={{\n                                color: \"$negative500\",\n                                marginTop: \"$4\"\n                              }}\n                              size=\"xs\"\n                            >\n                              Please select the property\n                            </FormLabel>\n                          )}\n                      </>\n                    </Td>\n                  </Tr>\n                );\n              })}\n\n              <Tr\n                css={{\n                  borderBottom: \"none !important\",\n                  \"&:hover\": {\n                    background: \"$white900\"\n                  }\n                }}\n              >\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":["useRef","useEffect","Flex","Box","Heading","Text","Table","Thead","Th","Tbody","Tr","Td","FormInput","FormLabel","IconButton","DeleteIcon","Select","Button","PlusIcon"],"mappings":"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"}

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

@@ -0,0 +1,282 @@
+'use strict';
+
+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 themeProvider = require('../node_modules/@sparrowengg/twigs-react/dist/es/theme-provider/theme-provider.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;
+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 ContactImport = ({
+  hasPreviousMapping,
+  previousMappingHandler,
+  onSaveHandler,
+  isContactMappingPage,
+  navigateMappingPage,
+  contactImportField,
+  setContactImportField,
+  listSegmentOptions,
+  integrationName,
+  contactProperties,
+  invitePortal
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    themeProvider.ThemeProvider,
+    {
+      theme: {
+        fonts: {
+          body: "DM Sans, Roboto Mono, sans-serif",
+          heading: "DM Sans, Roboto Mono,  sans-serif"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(box.Box, { css: { height: "100vh", width: "100vw" } }, /* @__PURE__ */ React.createElement(
+      ContactImportHeader,
+      {
+        contactImportField,
+        hasPreviousMapping,
+        previousMappingHandler,
+        onSaveHandler,
+        isContactMappingPage,
+        navigateMappingPage,
+        invitePortal
+      }
+    ), !isContactMappingPage ? /* @__PURE__ */ React.createElement(
+      contactImportConfigure.default,
+      {
+        contactImportField,
+        handleConfigureField: (value) => {
+          setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
+            configure: __spreadValues({}, value)
+          }));
+          navigateMappingPage(true);
+        },
+        listSegmentOptions
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      contactImportMapping.default,
+      {
+        contactImportField,
+        setContactImportField,
+        integrationName,
+        contactProperties
+      }
+    ))
+  );
+};
+const ContactImportHeader = ({
+  hasPreviousMapping,
+  previousMappingHandler,
+  onSaveHandler,
+  isContactMappingPage,
+  navigateMappingPage,
+  contactImportField,
+  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: () => 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,
+      {
+        invitePortal,
+        onSaveHandler: () => onSaveHandler(),
+        onCloseHandler: () => setShowImportModal(false)
+      }
+    ) : null
+  );
+};
+const ContactImportModal = ({
+  onCloseHandler,
+  onSaveHandler,
+  invitePortal
+}) => {
+  const [inputValue, setInputValue] = React.useState("");
+  return /* @__PURE__ */ React.createElement(dialog.Dialog, { open: true }, /* @__PURE__ */ React.createElement(
+    dialog.DialogContent,
+    {
+      css: {
+        padding: 0,
+        borderRadius: "$3xl",
+        maxWidth: 600
+      }
+    },
+    /* @__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: inputValue,
+          maxLength: 30,
+          max: 30,
+          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) => 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", onClick: onSaveHandler }, "Finish Import")
+    )
+  ));
+};
+
+exports.ContactImport = ContactImport;
+//# sourceMappingURL=index.js.map