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

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

@@ -0,0 +1,186 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useFieldManagement = require('../hooks/use-field-management.js');
+var index = require('../constants/index.js');
+var index$1 = require('../utils/index.js');
+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 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 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');
+
+const ContactImportMapping = ({
+  contactImportField,
+  setContactImportField,
+  integrationName,
+  contactProperties
+}) => {
+  const customPropertyRef = React.useRef(null);
+  const initialRenderRef = React.useRef(true);
+  const {
+    updateField,
+    updateSurveySparrowField,
+    addCustomField,
+    deleteField
+  } = useFieldManagement.default(contactImportField, setContactImportField);
+  React.useEffect(() => {
+    if (!initialRenderRef.current && (customPropertyRef == null ? void 0 : customPropertyRef.current)) {
+      customPropertyRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "end"
+      });
+    }
+    initialRenderRef.current = false;
+  }, [contactImportField.fields.length]);
+  const handleFieldInputChange = (field, event) => {
+    updateField(field.id, "integrationField", event.target.value);
+  };
+  const handleSurveySparrowFieldChange = (field, selectedOption) => {
+    updateSurveySparrowField(selectedOption.value, field.id, true);
+  };
+  const renderFieldInput = (field) => {
+    var _a;
+    if (field.property !== "custom") {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium" }, index$1.formatFieldName(field.integrationField)), (_a = field.sampleData) == null ? void 0 : _a.map((sample, index) => /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          key: index,
+          size: "xs",
+          css: { lineHeight: "$xs", color: "$neutral600" }
+        },
+        index$1.truncateSampleData(sample)
+      )));
+    }
+    return /* @__PURE__ */ React.createElement(box.Box, { css: { position: "relative" }, ref: customPropertyRef }, /* @__PURE__ */ React.createElement(
+      formInput.FormInput,
+      {
+        size: "lg",
+        value: field.integrationField || "",
+        onChange: (event) => handleFieldInputChange(field, event),
+        placeholder: index.PLACEHOLDERS.ENTER_CUSTOM_PROPERTY
+      }
+    ), /* @__PURE__ */ React.createElement(formLabel.FormLabel, { css: { marginTop: "$4", color: "$neutral400" } }, index.PLACEHOLDERS.CUSTOM_PROPERTY_HELP), /* @__PURE__ */ React.createElement(
+      iconButton.IconButton,
+      {
+        css: {
+          position: "absolute",
+          top: "0",
+          left: "-70px"
+        },
+        size: "lg",
+        variant: "ghost",
+        color: "secondary",
+        onClick: () => deleteField(field.id),
+        icon: /* @__PURE__ */ React.createElement(_delete.DeleteIcon, null),
+        "aria-label": index.LABELS.DELETE_CUSTOM_PROPERTY
+      }
+    ));
+  };
+  const renderSurveySparrowSelect = (field) => {
+    const filteredProperties = index$1.filterContactProperties(contactProperties);
+    const selectedProperty = index$1.findContactProperty(
+      contactProperties,
+      field.surveySparrowField
+    );
+    const selectValue = selectedProperty ? {
+      label: selectedProperty.label,
+      value: selectedProperty.value
+    } : null;
+    const hasSurveyFieldValue = Boolean(selectedProperty);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        size: "lg",
+        placeholder: index.PLACEHOLDERS.CHOOSE_PROPERTY,
+        value: selectValue,
+        options: filteredProperties,
+        onChange: (option) => handleSurveySparrowFieldChange(field, option)
+      }
+    ), hasSurveyFieldValue && /* @__PURE__ */ React.createElement(
+      formLabel.FormLabel,
+      {
+        size: "xs",
+        css: {
+          color: field.mapped ? "$neutral600" : "#0F966C",
+          marginBlock: "$4"
+        }
+      },
+      field.mapped ? index.LABELS.MANUALLY_MAPPED : index.LABELS.AUTOMATICALLY_MAPPED
+    ), !field.surveySparrowField && field.surveySparrowFieldError && /* @__PURE__ */ React.createElement(
+      formLabel.FormLabel,
+      {
+        css: { color: "$negative500", marginTop: "$4" },
+        size: "xs"
+      },
+      index.ERROR_MESSAGES.FIELD_REQUIRED
+    ));
+  };
+  return /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center" }, /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: {
+        marginTop: "$40",
+        maxWidth: index.UI_CONSTANTS.MAPPING_MAX_WIDTH,
+        width: "100%"
+      }
+    },
+    /* @__PURE__ */ React.createElement(box.Box, { css: { paddingLeft: "$28" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, index.LABELS.MAP_CONTACT_PROPERTIES), /* @__PURE__ */ React.createElement(text.Text, { css: { marginTop: "$4", color: "$neutral600" }, size: "md" }, index.LABELS.REVIEW_MAPPINGS)),
+    /* @__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: { zIndex: 5, position: "sticky", top: "-31px" } }, /* @__PURE__ */ React.createElement(table.Th, null, `${integrationName} ${index.LABELS.PROFILE_FIELDS_DATA}`), /* @__PURE__ */ React.createElement(table.Th, { css: { borderLeft: "$borderWidths$xs solid $neutral100" } }, index.LABELS.SURVEYSPARROW_MAPPING)),
+        /* @__PURE__ */ React.createElement(table.Tbody, null, contactImportField.fields.map((field) => /* @__PURE__ */ React.createElement(table.Tr, { key: field.id }, /* @__PURE__ */ React.createElement(table.Td, { css: { width: 560 } }, renderFieldInput(field)), /* @__PURE__ */ React.createElement(
+          table.Td,
+          {
+            css: {
+              width: 560,
+              borderLeft: "$borderWidths$xs solid $neutral100"
+            }
+          },
+          renderSurveySparrowSelect(field)
+        ))), /* @__PURE__ */ React.createElement(table.Tr, null, /* @__PURE__ */ React.createElement(table.Td, { colSpan: 2 }, /* @__PURE__ */ React.createElement(
+          button.Button,
+          {
+            size: "md",
+            variant: "ghost",
+            leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null),
+            onClick: addCustomField
+          },
+          index.LABELS.ADD_CUSTOM_PROPERTY
+        ))))
+      )
+    )
+  ));
+};
+
+exports.default = ContactImportMapping;
+//# sourceMappingURL=ContactImportMapping.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactImportMapping.js","sources":["../../../../src/contact-import/components/ContactImportMapping.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport {\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 { ContactImportMappingProps, Field, SelectOption } from '../types';\nimport { useFieldManagement } from '../hooks';\nimport {\n  filterContactProperties,\n  findContactProperty,\n  formatFieldName,\n  truncateSampleData,\n} from '../utils';\nimport {\n  UI_CONSTANTS,\n  LABELS,\n  PLACEHOLDERS,\n  ERROR_MESSAGES,\n} from '../constants';\n\n/**\n * Component for mapping integration fields to SurveySparrow properties\n * Handles field mapping, custom properties, and validation\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  const {\n    updateField,\n    updateSurveySparrowField,\n    addCustomField,\n    deleteField,\n  } = useFieldManagement(contactImportField, setContactImportField);\n\n  // Auto-scroll to newly added custom property\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.fields.length]);\n\n  const handleFieldInputChange = (\n    field: Field,\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => {\n    updateField(field.id, 'integrationField', event.target.value);\n  };\n\n  const handleSurveySparrowFieldChange = (\n    field: Field,\n    selectedOption: SelectOption\n  ) => {\n    updateSurveySparrowField(selectedOption.value, field.id, true);\n  };\n\n  const renderFieldInput = (field: Field) => {\n    if (field.property !== 'custom') {\n      return (\n        <>\n          <Text size=\"sm\" weight=\"medium\">\n            {formatFieldName(field.integrationField)}\n          </Text>\n          {field.sampleData?.map((sample, index) => (\n            <Text\n              key={index}\n              size=\"xs\"\n              css={{ lineHeight: '$xs', color: '$neutral600' }}\n            >\n              {truncateSampleData(sample)}\n            </Text>\n          ))}\n        </>\n      );\n    }\n\n    return (\n      <Box css={{ position: 'relative' }} ref={customPropertyRef}>\n        <FormInput\n          size=\"lg\"\n          value={(field.integrationField as string) || ''}\n          onChange={(event) => handleFieldInputChange(field, event)}\n          placeholder={PLACEHOLDERS.ENTER_CUSTOM_PROPERTY}\n        />\n        <FormLabel css={{ marginTop: '$4', color: '$neutral400' }}>\n          {PLACEHOLDERS.CUSTOM_PROPERTY_HELP}\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={() => deleteField(field.id)}\n          icon={<DeleteIcon />}\n          aria-label={LABELS.DELETE_CUSTOM_PROPERTY}\n        />\n      </Box>\n    );\n  };\n\n  const renderSurveySparrowSelect = (field: Field) => {\n    const filteredProperties = filterContactProperties(contactProperties);\n    const selectedProperty = findContactProperty(\n      contactProperties,\n      field.surveySparrowField\n    );\n\n    const selectValue: SelectOption | null = selectedProperty\n      ? {\n          label: selectedProperty.label,\n          value: selectedProperty.value,\n        }\n      : null;\n\n    const hasSurveyFieldValue = Boolean(selectedProperty);\n\n    return (\n      <>\n        <Select\n          size=\"lg\"\n          placeholder={PLACEHOLDERS.CHOOSE_PROPERTY}\n          value={selectValue}\n          options={filteredProperties}\n          onChange={(option) => handleSurveySparrowFieldChange(field, option)}\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 ? LABELS.MANUALLY_MAPPED : LABELS.AUTOMATICALLY_MAPPED}\n          </FormLabel>\n        )}\n\n        {!field.surveySparrowField && field.surveySparrowFieldError && (\n          <FormLabel\n            css={{ color: '$negative500', marginTop: '$4' }}\n            size=\"xs\"\n          >\n            {ERROR_MESSAGES.FIELD_REQUIRED}\n          </FormLabel>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <Flex justifyContent=\"center\">\n      <Box\n        css={{\n          marginTop: '$40',\n          maxWidth: UI_CONSTANTS.MAPPING_MAX_WIDTH,\n          width: '100%',\n        }}\n      >\n        {/* Header */}\n        <Box css={{ paddingLeft: '$28' }}>\n          <Heading size=\"h5\">{LABELS.MAP_CONTACT_PROPERTIES}</Heading>\n          <Text css={{ marginTop: '$4', color: '$neutral600' }} size=\"md\">\n            {LABELS.REVIEW_MAPPINGS}\n          </Text>\n        </Box>\n\n        {/* Mapping Table */}\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} ${LABELS.PROFILE_FIELDS_DATA}`}</Th>\n              <Th css={{ borderLeft: '$borderWidths$xs solid $neutral100' }}>\n                {LABELS.SURVEYSPARROW_MAPPING}\n              </Th>\n            </Thead>\n            <Tbody>\n              {contactImportField.fields.map((field) => (\n                <Tr key={field.id}>\n                  <Td css={{ width: 560 }}>{renderFieldInput(field)}</Td>\n                  <Td\n                    css={{\n                      width: 560,\n                      borderLeft: '$borderWidths$xs solid $neutral100',\n                    }}\n                  >\n                    {renderSurveySparrowSelect(field)}\n                  </Td>\n                </Tr>\n              ))}\n\n              {/* Add Custom Property Button */}\n              <Tr>\n                <Td colSpan={2}>\n                  <Button\n                    size=\"md\"\n                    variant=\"ghost\"\n                    leftIcon={<PlusIcon />}\n                    onClick={addCustomField}\n                  >\n                    {LABELS.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\n"],"names":["useRef","useFieldManagement","useEffect","Text","formatFieldName","truncateSampleData","Box","FormInput","PLACEHOLDERS","FormLabel","IconButton","DeleteIcon","LABELS","filterContactProperties","findContactProperty","Select","ERROR_MESSAGES","Flex","UI_CONSTANTS","Heading","Table","Thead","Th","Tbody","Tr","Td","Button","PlusIcon"],"mappings":"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"}

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

@@ -0,0 +1,154 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../commons/helpers/index.js');
+var index$1 = require('../../commons/constants/index.js');
+var index$2 = require('../constants/index.js');
+var dialog = require('../../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialog.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var close = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.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 button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.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 ContactImportModal = ({
+  setContactImportField,
+  contactImportField,
+  onCloseHandler,
+  onSaveHandler,
+  invitePortal
+}) => {
+  var _a;
+  const [inputValue, setInputValue] = React.useState(
+    ((_a = contactImportField == null ? void 0 : contactImportField.configure) == null ? void 0 : _a.reference) || ""
+  );
+  const handleInputChange = React.useCallback(
+    (event) => {
+      setInputValue(event.currentTarget.value);
+    },
+    []
+  );
+  const handleInvitePortalChange = React.useCallback(
+    (checked) => {
+      setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+        invitePortal: checked
+      }));
+      invitePortal.onChangeHandler(checked);
+    },
+    [setContactImportField, invitePortal]
+  );
+  const handleFinishImport = React.useCallback(async () => {
+    setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+      description: inputValue,
+      id: index.generateUniqueId()
+    }));
+    await onSaveHandler();
+    onCloseHandler();
+  }, [inputValue, onSaveHandler, onCloseHandler, setContactImportField]);
+  const isFinishDisabled = !(inputValue == null ? void 0 : inputValue.trim().length);
+  return /* @__PURE__ */ React.createElement(dialog.Dialog, { open: true }, /* @__PURE__ */ React.createElement(
+    dialog.DialogContent,
+    {
+      css: {
+        padding: 0,
+        borderRadius: "$3xl",
+        maxWidth: index$1.MODAL_MAX_WIDTH
+      }
+    },
+    /* @__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" } }, index$2.LABELS.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,
+          "aria-label": index$2.LABELS.CLOSE_MODAL
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$12" } }, /* @__PURE__ */ React.createElement(
+      formInput.FormInput,
+      {
+        label: index$2.PLACEHOLDERS.IMPORT_TITLE,
+        requiredIndicator: true,
+        value: inputValue,
+        maxLength: index$1.INPUT_MAX_LENGTH,
+        max: index$1.INPUT_MAX_LENGTH,
+        showCount: true,
+        onChange: handleInputChange,
+        size: "lg"
+      }
+    ), invitePortal.hasInvitePortal && /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: "$12" } }, /* @__PURE__ */ React.createElement(
+      checkbox.Checkbox,
+      {
+        checked: !!invitePortal.value,
+        onChange: handleInvitePortalChange
+      },
+      index$2.LABELS.INVITE_TO_PORTAL
+    ))),
+    /* @__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 }, index$2.LABELS.CANCEL),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: "lg",
+          disabled: isFinishDisabled,
+          onClick: handleFinishImport
+        },
+        index$2.LABELS.FINISH_IMPORT
+      )
+    )
+  ));
+};
+
+exports.default = ContactImportModal;
+//# sourceMappingURL=ContactImportModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactImportModal.js","sources":["../../../../src/contact-import/components/ContactImportModal.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport {\n  Box,\n  Button,\n  Checkbox,\n  Dialog,\n  DialogContent,\n  Flex,\n  FormInput,\n  Heading,\n  IconButton,\n} from '@sparrowengg/twigs-react';\nimport { CloseIcon } from '@sparrowengg/twigs-react-icons';\nimport { ContactImportModalProps } from '../types';\nimport { generateUniqueId } from '../../commons/helpers';\nimport { MODAL_MAX_WIDTH, INPUT_MAX_LENGTH } from '../../commons/constants';\nimport { LABELS, PLACEHOLDERS } from '../constants';\n\n/**\n * Modal component for finalizing import configuration\n * Allows user to set import title and invite portal preferences\n */\nconst ContactImportModal: React.FC<ContactImportModalProps> = ({\n  setContactImportField,\n  contactImportField,\n  onCloseHandler,\n  onSaveHandler,\n  invitePortal,\n}) => {\n  const [inputValue, setInputValue] = useState(\n    contactImportField?.configure?.reference || ''\n  );\n\n  const handleInputChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setInputValue(event.currentTarget.value);\n    },\n    []\n  );\n\n  const handleInvitePortalChange = useCallback(\n    (checked: boolean) => {\n      setContactImportField((prev) => ({\n        ...prev,\n        invitePortal: checked,\n      }));\n      invitePortal.onChangeHandler(checked);\n    },\n    [setContactImportField, invitePortal]\n  );\n\n  const handleFinishImport = useCallback(async () => {\n    setContactImportField((prev) => ({\n      ...prev,\n      description: inputValue,\n      id: generateUniqueId(),\n    }));\n    await onSaveHandler();\n    onCloseHandler();\n  }, [inputValue, onSaveHandler, onCloseHandler, setContactImportField]);\n\n  const isFinishDisabled = !inputValue?.trim().length;\n\n  return (\n    <Dialog open>\n      <DialogContent\n        css={{\n          padding: 0,\n          borderRadius: '$3xl',\n          maxWidth: MODAL_MAX_WIDTH,\n        }}\n      >\n        {/* Modal Header */}\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            {LABELS.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            aria-label={LABELS.CLOSE_MODAL}\n          />\n        </Flex>\n\n        {/* Modal Content */}\n        <Box css={{ padding: '$12' }}>\n          <FormInput\n            label={PLACEHOLDERS.IMPORT_TITLE}\n            requiredIndicator\n            value={inputValue}\n            maxLength={INPUT_MAX_LENGTH}\n            max={INPUT_MAX_LENGTH}\n            showCount\n            onChange={handleInputChange}\n            size=\"lg\"\n          />\n\n          {invitePortal.hasInvitePortal && (\n            <Box css={{ marginTop: '$12' }}>\n              <Checkbox\n                checked={!!invitePortal.value}\n                onChange={handleInvitePortalChange}\n              >\n                {LABELS.INVITE_TO_PORTAL}\n              </Checkbox>\n            </Box>\n          )}\n        </Box>\n\n        {/* Modal Footer */}\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            {LABELS.CANCEL}\n          </Button>\n          <Button\n            size=\"lg\"\n            disabled={isFinishDisabled}\n            onClick={handleFinishImport}\n          >\n            {LABELS.FINISH_IMPORT}\n          </Button>\n        </Flex>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default ContactImportModal;\n\n"],"names":["useState","useCallback","generateUniqueId","Dialog","DialogContent","MODAL_MAX_WIDTH","Flex","Heading","LABELS","IconButton","CloseIcon","Box","FormInput","PLACEHOLDERS","INPUT_MAX_LENGTH","Checkbox","Button"],"mappings":"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"}

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

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Scheduling = require('./Scheduling.js');
+var index = require('../constants/index.js');
+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 text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var radio = require('../../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.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 ImportSchedules = ({
+  currentList,
+  setCurrentList
+}) => {
+  const [globalStorage, setGlobalStorage] = React.useState(() => {
+    const listFrequency = currentList == null ? void 0 : currentList.frequency;
+    return listFrequency || {
+      frequentMode: index.FREQUENCY_MODE.ONE_TIME.value
+    };
+  });
+  React.useEffect(() => {
+    setCurrentList((prev) => __spreadProps(__spreadValues({}, prev), {
+      frequency: globalStorage
+    }));
+  }, [globalStorage, setCurrentList]);
+  const handleFrequencyChange = React.useCallback((value) => {
+    setGlobalStorage((prev) => __spreadProps(__spreadValues({}, prev), {
+      frequentMode: value
+    }));
+  }, []);
+  const isRecurringMode = globalStorage.frequentMode === index.FREQUENCY_MODE.RECURRING.value;
+  return /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(text.Text, { css: { color: "$neutral900", fontSize: "$xl" }, weight: "bold" }, index.LABELS.IMPORT_FREQUENCY), /* @__PURE__ */ React.createElement(text.Text, { size: "md", css: { color: "$neutral600", marginTop: "$4" } }, index.LABELS.IMPORT_FREQUENCY_DESCRIPTION)), /* @__PURE__ */ React.createElement(
+    radio.RadioGroup,
+    {
+      defaultValue: globalStorage.frequentMode,
+      onChange: handleFrequencyChange
+    },
+    /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$8" }, /* @__PURE__ */ React.createElement(
+      radio.Radio,
+      {
+        value: index.FREQUENCY_MODE.ONE_TIME.value,
+        css: { cursor: "pointer" }
+      },
+      /* @__PURE__ */ React.createElement(text.Text, { size: "md", css: { color: "$neutral900" } }, index.FREQUENCY_MODE.ONE_TIME.label)
+    ), /* @__PURE__ */ React.createElement(
+      radio.Radio,
+      {
+        value: index.FREQUENCY_MODE.RECURRING.value,
+        css: { cursor: "pointer" }
+      },
+      /* @__PURE__ */ React.createElement(text.Text, { size: "md", css: { color: "$neutral900" } }, index.FREQUENCY_MODE.RECURRING.label)
+    ))
+  ), isRecurringMode && /* @__PURE__ */ React.createElement(
+    Scheduling.default,
+    {
+      globalStorage,
+      setGlobalStorage
+    }
+  ));
+};
+
+exports.default = ImportSchedules;
+//# sourceMappingURL=ImportSchedules.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImportSchedules.js","sources":["../../../../src/contact-import/components/ImportSchedules.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Flex, Box, RadioGroup, Radio, Text } from '@sparrowengg/twigs-react';\nimport Scheduling from './Scheduling';\nimport { FREQUENCY_MODE, LABELS } from '../constants';\nimport { ImportSchedulesProps, ScheduleData, FrequencyMode } from '../types';\n\n/**\n * Component for managing import frequency and scheduling\n * Allows user to choose between one-time and recurring imports\n */\nconst ImportSchedules: React.FC<ImportSchedulesProps> = ({\n  currentList,\n  setCurrentList,\n}) => {\n  const [globalStorage, setGlobalStorage] = useState<ScheduleData>(() => {\n    const listFrequency = currentList?.frequency as ScheduleData | undefined;\n    return (\n      listFrequency || {\n        frequentMode: FREQUENCY_MODE.ONE_TIME.value,\n      }\n    );\n  });\n\n  // Sync schedule data with parent state\n  useEffect(() => {\n    setCurrentList((prev) => ({\n      ...prev,\n      frequency: globalStorage,\n    }));\n  }, [globalStorage, setCurrentList]);\n\n  const handleFrequencyChange = useCallback((value: string) => {\n    setGlobalStorage((prev) => ({\n      ...prev,\n      frequentMode: value as FrequencyMode,\n    }));\n  }, []);\n\n  const isRecurringMode =\n    globalStorage.frequentMode === FREQUENCY_MODE.RECURRING.value;\n\n  return (\n    <Flex flexDirection=\"column\" gap=\"$8\">\n      {/* Title and Description */}\n      <Box>\n        <Text css={{ color: '$neutral900', fontSize: '$xl' }} weight=\"bold\">\n          {LABELS.IMPORT_FREQUENCY}\n        </Text>\n        <Text size=\"md\" css={{ color: '$neutral600', marginTop: '$4' }}>\n          {LABELS.IMPORT_FREQUENCY_DESCRIPTION}\n        </Text>\n      </Box>\n\n      {/* Frequency Selection */}\n      <RadioGroup\n        defaultValue={globalStorage.frequentMode}\n        onChange={handleFrequencyChange}\n      >\n        <Flex alignItems=\"center\" gap=\"$8\">\n          <Radio\n            value={FREQUENCY_MODE.ONE_TIME.value}\n            css={{ cursor: 'pointer' }}\n          >\n            <Text size=\"md\" css={{ color: '$neutral900' }}>\n              {FREQUENCY_MODE.ONE_TIME.label}\n            </Text>\n          </Radio>\n          <Radio\n            value={FREQUENCY_MODE.RECURRING.value}\n            css={{ cursor: 'pointer' }}\n          >\n            <Text size=\"md\" css={{ color: '$neutral900' }}>\n              {FREQUENCY_MODE.RECURRING.label}\n            </Text>\n          </Radio>\n        </Flex>\n      </RadioGroup>\n\n      {/* Scheduling Configuration (shown only for recurring) */}\n      {isRecurringMode && (\n        <Scheduling\n          globalStorage={globalStorage}\n          setGlobalStorage={setGlobalStorage}\n        />\n      )}\n    </Flex>\n  );\n};\n\nexport default ImportSchedules;\n\n"],"names":["useState","FREQUENCY_MODE","useEffect","useCallback","Flex","Box","Text","LABELS","RadioGroup","Radio","Scheduling"],"mappings":"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"}

package/dist/cjs/contact-import/components/ManageImport/Icons.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var React = require('react');
+
+const GradientSVG = ({
+  color = "#978CF9"
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "190",
+      height: "105",
+      fill: "none",
+      viewBox: "0 0 190 105"
+    },
+    /* @__PURE__ */ React.createElement("g", { filter: "url(#filter0_f_464_5408)", opacity: "0.5" }, /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M94.802 48.24c-25.851 0-46.802 25.075-46.802 56h93.604c0-30.925-20.951-56-46.802-56z",
+        fill: color
+      }
+    )),
+    /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement(
+      "filter",
+      {
+        id: "filter0_f_464_5408",
+        width: "189.604",
+        height: "104",
+        x: "0",
+        y: "0.24",
+        colorInterpolationFilters: "sRGB",
+        filterUnits: "userSpaceOnUse"
+      },
+      /* @__PURE__ */ React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+      /* @__PURE__ */ React.createElement(
+        "feBlend",
+        {
+          in: "SourceGraphic",
+          in2: "BackgroundImageFix",
+          result: "shape"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "feGaussianBlur",
+        {
+          result: "effect1_foregroundBlur_464_5408",
+          stdDeviation: "24"
+        }
+      )
+    ))
+  );
+};
+const DocumentClipSVG = ({
+  size = "48",
+  color = "#7158F5"
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      fill: "none",
+      viewBox: "0 0 48 48"
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        stroke: color,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        d: "M40 20V10a4 4 0 00-4-4H10a4 4 0 00-4 4v28a4 4 0 004 4h14M14 16h18m-18 8h8m-8 8h6"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        stroke: color,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        d: "M30 29.55a5.24 5.24 0 011.89-2.978 5.061 5.061 0 013.318-1.064 4.964 4.964 0 013.616 1.286 5.162 5.162 0 011.676 3.51c0 3.608-5.057 4.798-5.057 7.196M35.675 41.77a.112.112 0 100 .224.112.112 0 000-.224"
+      }
+    )
+  );
+};
+
+exports.DocumentClipSVG = DocumentClipSVG;
+exports.GradientSVG = GradientSVG;
+//# sourceMappingURL=Icons.js.map

package/dist/cjs/contact-import/components/ManageImport/Icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.js","sources":["../../../../../src/contact-import/components/ManageImport/Icons.tsx"],"sourcesContent":["import React from 'react';\n\ninterface GradientSVGProps {\n  color?: string;\n}\n\ninterface DocumentClipSVGProps {\n  size?: string;\n  color?: string;\n}\n\n/**\n * Gradient background SVG for empty state\n */\nexport const GradientSVG: React.FC<GradientSVGProps> = ({\n  color = '#978CF9',\n}) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"190\"\n      height=\"105\"\n      fill=\"none\"\n      viewBox=\"0 0 190 105\"\n    >\n      <g filter=\"url(#filter0_f_464_5408)\" opacity=\"0.5\">\n        <path\n          d=\"M94.802 48.24c-25.851 0-46.802 25.075-46.802 56h93.604c0-30.925-20.951-56-46.802-56z\"\n          fill={color}\n        />\n      </g>\n      <defs>\n        <filter\n          id=\"filter0_f_464_5408\"\n          width=\"189.604\"\n          height=\"104\"\n          x=\"0\"\n          y=\"0.24\"\n          colorInterpolationFilters=\"sRGB\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n          <feBlend\n            in=\"SourceGraphic\"\n            in2=\"BackgroundImageFix\"\n            result=\"shape\"\n          />\n          <feGaussianBlur\n            result=\"effect1_foregroundBlur_464_5408\"\n            stdDeviation=\"24\"\n          />\n        </filter>\n      </defs>\n    </svg>\n  );\n};\n\n/**\n * Document clip icon SVG for empty state\n */\nexport const DocumentClipSVG: React.FC<DocumentClipSVGProps> = ({\n  size = '48',\n  color = '#7158F5',\n}) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      fill=\"none\"\n      viewBox=\"0 0 48 48\"\n    >\n      <path\n        stroke={color}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        d=\"M40 20V10a4 4 0 00-4-4H10a4 4 0 00-4 4v28a4 4 0 004 4h14M14 16h18m-18 8h8m-8 8h6\"\n      />\n      <path\n        stroke={color}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        d=\"M30 29.55a5.24 5.24 0 011.89-2.978 5.061 5.061 0 013.318-1.064 4.964 4.964 0 013.616 1.286 5.162 5.162 0 011.676 3.51c0 3.608-5.057 4.798-5.057 7.196M35.675 41.77a.112.112 0 100 .224.112.112 0 000-.224\"\n      />\n    </svg>\n  );\n};\n\n"],"names":[],"mappings":";;;;AAcO,MAAM,cAA0C,CAAC;AAAA,EACtD,KAAQ,GAAA,SAAA;AACV,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,4BAAA;AAAA,MACN,KAAM,EAAA,KAAA;AAAA,MACN,MAAO,EAAA,KAAA;AAAA,MACP,IAAK,EAAA,MAAA;AAAA,MACL,OAAQ,EAAA,aAAA;AAAA,KAAA;AAAA,oBAEP,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAE,MAAO,EAAA,0BAAA,EAA2B,SAAQ,KAC3C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,sFAAA;AAAA,QACF,IAAM,EAAA,KAAA;AAAA,OAAA;AAAA,KAEV,CAAA;AAAA,wCACC,MACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,oBAAA;AAAA,QACH,KAAM,EAAA,SAAA;AAAA,QACN,MAAO,EAAA,KAAA;AAAA,QACP,CAAE,EAAA,GAAA;AAAA,QACF,CAAE,EAAA,MAAA;AAAA,QACF,yBAA0B,EAAA,MAAA;AAAA,QAC1B,WAAY,EAAA,gBAAA;AAAA,OAAA;AAAA,sBAEX,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAQ,YAAa,EAAA,GAAA,EAAI,QAAO,oBAAqB,EAAA,CAAA;AAAA,sBACtD,KAAA,CAAA,aAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,EAAG,EAAA,eAAA;AAAA,UACH,GAAI,EAAA,oBAAA;AAAA,UACJ,MAAO,EAAA,OAAA;AAAA,SAAA;AAAA,OACT;AAAA,sBACA,KAAA,CAAA,aAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,MAAO,EAAA,iCAAA;AAAA,UACP,YAAa,EAAA,IAAA;AAAA,SAAA;AAAA,OACf;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAKO,MAAM,kBAAkD,CAAC;AAAA,EAC9D,IAAO,GAAA,IAAA;AAAA,EACP,KAAQ,GAAA,SAAA;AACV,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,4BAAA;AAAA,MACN,KAAO,EAAA,IAAA;AAAA,MACP,MAAQ,EAAA,IAAA;AAAA,MACR,IAAK,EAAA,MAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,KAAA;AAAA,oBAER,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,KAAA;AAAA,QACR,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,QACf,WAAY,EAAA,GAAA;AAAA,QACZ,CAAE,EAAA,kFAAA;AAAA,OAAA;AAAA,KACJ;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,KAAA;AAAA,QACR,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,QACf,WAAY,EAAA,GAAA;AAAA,QACZ,CAAE,EAAA,2MAAA;AAAA,OAAA;AAAA,KACJ;AAAA,GACF,CAAA;AAEJ;;;;;"}