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

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

@@ -0,0 +1,153 @@
+const FREQUENCY_MODE = {
+  ONE_TIME: {
+    label: "One time",
+    value: "oneTime"
+  },
+  RECURRING: {
+    label: "Recurring",
+    value: "recurring"
+  }
+};
+const SCHEDULE_PERIODS = [
+  { id: 1, label: "Daily", value: "Daily" },
+  { id: 2, label: "Weekly", value: "Weekly" },
+  { id: 3, label: "Monthly", value: "Monthly" }
+];
+const IMPORT_CONFIG_TYPE = {
+  LIST: "LIST",
+  ALL: "ALL"
+};
+const PROPERTY_TYPE = {
+  CUSTOM: "custom",
+  DEFAULT: "default"
+};
+const CONTACT_FIELD_TYPE = {
+  TEXT: "text",
+  EMAIL: "email",
+  PHONE: "phone",
+  NUMBER: "number",
+  DATE: "date",
+  BOOLEAN: "boolean",
+  SELECT: "select",
+  DEPENDENT_FIELD: "DEPENDENT_FIELD"
+};
+const DEFAULT_FIELD_VALUE = {
+  integrationField: null,
+  surveySparrowField: null,
+  sampleData: [],
+  property: PROPERTY_TYPE.CUSTOM,
+  mapped: false,
+  surveySparrowFieldError: false
+};
+const DEFAULT_SCHEDULE_TIME = {
+  period: "Daily",
+  time: { hours: 12, mins: "00", noon: "am" },
+  timeZone: "Asia/Kolkata (GMT+05:30)"
+};
+const TIME_HOURS = Array.from({ length: 12 }, (_, i) => ({
+  id: i + 1,
+  value: i + 1
+}));
+const TIME_MINUTES = Array.from({ length: 60 }, (_, i) => ({
+  id: i,
+  value: (i < 10 ? "0" : "") + i
+}));
+const TIME_NOON = [
+  { id: 1, value: "am" },
+  { id: 2, value: "pm" }
+];
+const VALIDATION_RULES = {
+  MAX_TITLE_LENGTH: 50,
+  MIN_TITLE_LENGTH: 3,
+  MAX_FIELD_COUNT: 100,
+  MIN_FIELD_COUNT: 1,
+  MAX_SAMPLE_DATA_LENGTH: 40
+};
+const UI_CONSTANTS = {
+  MODAL_MAX_WIDTH: "600px",
+  INPUT_MAX_LENGTH: 50,
+  CONFIGURE_MAX_WIDTH: 488,
+  MAPPING_MAX_WIDTH: 1176,
+  DASHBOARD_MAX_WIDTH: 1120
+};
+const ERROR_MESSAGES = {
+  TITLE_REQUIRED: "Import title is required",
+  TITLE_TOO_SHORT: `Title must be at least ${VALIDATION_RULES.MIN_TITLE_LENGTH} characters`,
+  TITLE_TOO_LONG: `Title must be less than ${VALIDATION_RULES.MAX_TITLE_LENGTH} characters`,
+  FIELD_REQUIRED: "Please select the property",
+  DUPLICATE_FIELD: "This field is already mapped",
+  MAX_FIELDS_REACHED: `Maximum ${VALIDATION_RULES.MAX_FIELD_COUNT} fields allowed`,
+  SELECT_LIST_SEGMENT: "Please select a list or segment",
+  INVALID_CONFIGURATION: "Invalid import configuration"
+};
+const COMPLETED_TABLE_COLUMNS = [
+  { key: "name", label: "Import Name", width: "25%" },
+  { key: "type", label: "Contact Type", width: "25%" },
+  { key: "importedOn", label: "Imported on", width: "25%" },
+  { key: "status", label: "Status", width: "13%" },
+  { key: "actions", label: "", width: "12%" }
+];
+const SCHEDULED_TABLE_COLUMNS = [
+  { key: "toggle", label: "", width: "10%" },
+  { key: "name", label: "Import Name", width: "20%" },
+  { key: "type", label: "Contact Type", width: "20%" },
+  { key: "createdOn", label: "Created on", width: "20%" },
+  { key: "upcomingImport", label: "Upcoming Import", width: "20%" },
+  { key: "status", label: "Status", width: "5%" },
+  { key: "actions", label: "", width: "5%" }
+];
+const DATE_FORMAT = {
+  DISPLAY: "MMM D, YYYY | h:mm A",
+  ISO: "YYYY-MM-DDTHH:mm:ssZ"
+};
+const LABELS = {
+  NEW_CONTACT_IMPORT: "New Contact Import",
+  IMPORT_CONTACTS: "Import Contacts",
+  MAP_CONTACT_PROPERTIES: "Map Contact Properties",
+  IMPORT_CONFIGURATION: "Import Configuration",
+  IMPORT_FREQUENCY: "Import Frequency",
+  EVENT_SETUP: "Event Setup",
+  MAPPING: "Mapping",
+  CONTINUE: "Continue",
+  FINISH_IMPORT: "Finish Import",
+  CANCEL: "Cancel",
+  APPLY: "Apply",
+  NEW_IMPORT: "New Import",
+  ADD_CUSTOM_PROPERTY: "Add Custom Property",
+  NEXT_MAPPING: "Next, Mapping",
+  COMPLETED: "Completed",
+  SCHEDULED: "Scheduled",
+  DELETE: "Delete",
+  EDIT: "Edit",
+  IMPORT_FROM_LIST_SEGMENT: "Import from (List/Segment)",
+  IMPORT_ALL_CONTACTS: "Import All Contacts",
+  MANUALLY_MAPPED: "Manually mapped by you",
+  AUTOMATICALLY_MAPPED: "Automatically mapped",
+  REVIEW_MAPPINGS: "Review these mappings before importing. Unmapped columns will be ignored.",
+  PROFILE_FIELDS_DATA: "Profile Fields Data",
+  SURVEYSPARROW_MAPPING: "SurveySparrow Mapping",
+  INVITE_TO_PORTAL: "Invite to portal whenever a contact is created",
+  IMPORT_FREQUENCY_DESCRIPTION: "How frequently do you want to import contacts from Sugar CRM",
+  NO_IMPORTS_MESSAGE: "There are no imports created yet!",
+  AT: "at",
+  GO_BACK: "Go back",
+  SELECT_SCHEDULE_PERIOD: "Select Schedule Period",
+  SELECT_TIME_ZONE: "Select Time Zone",
+  CLOSE_MODAL: "Close modal",
+  DELETE_CUSTOM_PROPERTY: "Delete custom property",
+  CONTACT_IMPORTS: "contact-imports",
+  // Story/Example constants
+  TEST_IMPORT_SUGAR_CRM: "Test import For Sugar CRM",
+  SUGAR_CRM: "Sugar CRM",
+  MANAGE_CONTACT_IMPORTS_DESCRIPTION: "Manage Contect Imports From Sugar CRM "
+};
+const PLACEHOLDERS = {
+  CHOOSE_LIST_SEGMENT: "Choose (List/Segment)",
+  CHOOSE_PROPERTY: "--Choose Property--",
+  IMPORT_TITLE: "Title of this import for future reference",
+  ENTER_CUSTOM_PROPERTY: "Enter custom property name",
+  CUSTOM_PROPERTY_HELP: "Enter the exact custom property name for accurate mapping. It is case-sensitive."
+};
+
+export { COMPLETED_TABLE_COLUMNS, CONTACT_FIELD_TYPE, DATE_FORMAT, DEFAULT_FIELD_VALUE, DEFAULT_SCHEDULE_TIME, ERROR_MESSAGES, FREQUENCY_MODE, IMPORT_CONFIG_TYPE, LABELS, PLACEHOLDERS, PROPERTY_TYPE, SCHEDULED_TABLE_COLUMNS, SCHEDULE_PERIODS, TIME_HOURS, TIME_MINUTES, TIME_NOON, UI_CONSTANTS, VALIDATION_RULES };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/contact-import/constants/index.ts"],"sourcesContent":["import { SelectOption, FrequencyMode } from '../types';\n\n// ==================== Frequency Constants ====================\n\nexport const FREQUENCY_MODE: Record<'ONE_TIME' | 'RECURRING', { label: string; value: FrequencyMode }> = {\n  ONE_TIME: {\n    label: 'One time',\n    value: 'oneTime',\n  },\n  RECURRING: {\n    label: 'Recurring',\n    value: 'recurring',\n  },\n} as const;\n\n// ==================== Schedule Options ====================\n\nexport const SCHEDULE_PERIODS = [\n  { id: 1, label: 'Daily', value: 'Daily' },\n  { id: 2, label: 'Weekly', value: 'Weekly' },\n  { id: 3, label: 'Monthly', value: 'Monthly' },\n] as const;\n\n// ==================== Import Configuration ====================\n\nexport const IMPORT_CONFIG_TYPE = {\n  LIST: 'LIST',\n  ALL: 'ALL',\n} as const;\n\nexport type ImportConfigType = typeof IMPORT_CONFIG_TYPE[keyof typeof IMPORT_CONFIG_TYPE];\n\n// ==================== Import Status ====================\n\nexport const IMPORT_STATUS = {\n  SUCCESS: 'success',\n  FAILED: 'failed',\n  PENDING: 'pending',\n  IN_PROGRESS: 'in_progress',\n  SCHEDULED: 'scheduled',\n} as const;\n\nexport type ImportStatus = typeof IMPORT_STATUS[keyof typeof IMPORT_STATUS];\n\n// ==================== Property Types ====================\n\nexport const PROPERTY_TYPE = {\n  CUSTOM: 'custom',\n  DEFAULT: 'default',\n} as const;\n\nexport type PropertyType = typeof PROPERTY_TYPE[keyof typeof PROPERTY_TYPE];\n\n// ==================== Field Types ====================\n\nexport const CONTACT_FIELD_TYPE = {\n  TEXT: 'text',\n  EMAIL: 'email',\n  PHONE: 'phone',\n  NUMBER: 'number',\n  DATE: 'date',\n  BOOLEAN: 'boolean',\n  SELECT: 'select',\n  DEPENDENT_FIELD: 'DEPENDENT_FIELD',\n} as const;\n\nexport type ContactFieldType = typeof CONTACT_FIELD_TYPE[keyof typeof CONTACT_FIELD_TYPE];\n\n// ==================== Default Values ====================\n\nexport const DEFAULT_FIELD_VALUE = {\n  integrationField: null,\n  surveySparrowField: null,\n  sampleData: [],\n  property: PROPERTY_TYPE.CUSTOM,\n  mapped: false,\n  surveySparrowFieldError: false,\n} as const;\n\nexport const DEFAULT_SCHEDULE_TIME = {\n  period: 'Daily',\n  time: { hours: 12, mins: '00', noon: 'am' as const },\n  timeZone: 'Asia/Kolkata (GMT+05:30)',\n} as const;\n\n// ==================== Time Constants ====================\n\nexport const TIME_HOURS = Array.from({ length: 12 }, (_, i) => ({\n  id: i + 1,\n  value: i + 1,\n})) as const;\n\nexport const TIME_MINUTES = Array.from({ length: 60 }, (_, i) => ({\n  id: i,\n  value: (i < 10 ? '0' : '') + i,\n})) as const;\n\nexport const TIME_NOON = [\n  { id: 1, value: 'am' as const },\n  { id: 2, value: 'pm' as const },\n] as const;\n\n// ==================== Validation Rules ====================\n\nexport const VALIDATION_RULES = {\n  MAX_TITLE_LENGTH: 50,\n  MIN_TITLE_LENGTH: 3,\n  MAX_FIELD_COUNT: 100,\n  MIN_FIELD_COUNT: 1,\n  MAX_SAMPLE_DATA_LENGTH: 40,\n} as const;\n\n// ==================== UI Constants ====================\n\nexport const UI_CONSTANTS = {\n  MODAL_MAX_WIDTH: '600px',\n  INPUT_MAX_LENGTH: 50,\n  CONFIGURE_MAX_WIDTH: 488,\n  MAPPING_MAX_WIDTH: 1176,\n  DASHBOARD_MAX_WIDTH: 1120,\n} as const;\n\n// ==================== Error Messages ====================\n\nexport const ERROR_MESSAGES = {\n  TITLE_REQUIRED: 'Import title is required',\n  TITLE_TOO_SHORT: `Title must be at least ${VALIDATION_RULES.MIN_TITLE_LENGTH} characters`,\n  TITLE_TOO_LONG: `Title must be less than ${VALIDATION_RULES.MAX_TITLE_LENGTH} characters`,\n  FIELD_REQUIRED: 'Please select the property',\n  DUPLICATE_FIELD: 'This field is already mapped',\n  MAX_FIELDS_REACHED: `Maximum ${VALIDATION_RULES.MAX_FIELD_COUNT} fields allowed`,\n  SELECT_LIST_SEGMENT: 'Please select a list or segment',\n  INVALID_CONFIGURATION: 'Invalid import configuration',\n} as const;\n\n// ==================== Success Messages ====================\n\nexport const SUCCESS_MESSAGES = {\n  IMPORT_CREATED: 'Import created successfully',\n  IMPORT_UPDATED: 'Import updated successfully',\n  IMPORT_DELETED: 'Import deleted successfully',\n  IMPORT_SCHEDULED: 'Import scheduled successfully',\n} as const;\n\n// ==================== Table Configuration ====================\n\nexport const COMPLETED_TABLE_COLUMNS = [\n  { key: 'name', label: 'Import Name', width: '25%' },\n  { key: 'type', label: 'Contact Type', width: '25%' },\n  { key: 'importedOn', label: 'Imported on', width: '25%' },\n  { key: 'status', label: 'Status', width: '13%' },\n  { key: 'actions', label: '', width: '12%' },\n] as const;\n\nexport const SCHEDULED_TABLE_COLUMNS = [\n  { key: 'toggle', label: '', width: '10%' },\n  { key: 'name', label: 'Import Name', width: '20%' },\n  { key: 'type', label: 'Contact Type', width: '20%' },\n  { key: 'createdOn', label: 'Created on', width: '20%' },\n  { key: 'upcomingImport', label: 'Upcoming Import', width: '20%' },\n  { key: 'status', label: 'Status', width: '5%' },\n  { key: 'actions', label: '', width: '5%' },\n] as const;\n\n// ==================== Date Format ====================\n\nexport const DATE_FORMAT = {\n  DISPLAY: 'MMM D, YYYY | h:mm A',\n  ISO: 'YYYY-MM-DDTHH:mm:ssZ',\n} as const;\n\n// ==================== Labels ====================\n\nexport const LABELS = {\n  NEW_CONTACT_IMPORT: 'New Contact Import',\n  IMPORT_CONTACTS: 'Import Contacts',\n  MAP_CONTACT_PROPERTIES: 'Map Contact Properties',\n  IMPORT_CONFIGURATION: 'Import Configuration',\n  IMPORT_FREQUENCY: 'Import Frequency',\n  EVENT_SETUP: 'Event Setup',\n  MAPPING: 'Mapping',\n  CONTINUE: 'Continue',\n  FINISH_IMPORT: 'Finish Import',\n  CANCEL: 'Cancel',\n  APPLY: 'Apply',\n  NEW_IMPORT: 'New Import',\n  ADD_CUSTOM_PROPERTY: 'Add Custom Property',\n  NEXT_MAPPING: 'Next, Mapping',\n  COMPLETED: 'Completed',\n  SCHEDULED: 'Scheduled',\n  DELETE: 'Delete',\n  EDIT: 'Edit',\n  IMPORT_FROM_LIST_SEGMENT: 'Import from (List/Segment)',\n  IMPORT_ALL_CONTACTS: 'Import All Contacts',\n  MANUALLY_MAPPED: 'Manually mapped by you',\n  AUTOMATICALLY_MAPPED: 'Automatically mapped',\n  REVIEW_MAPPINGS: 'Review these mappings before importing. Unmapped columns will be ignored.',\n  PROFILE_FIELDS_DATA: 'Profile Fields Data',\n  SURVEYSPARROW_MAPPING: 'SurveySparrow Mapping',\n  INVITE_TO_PORTAL: 'Invite to portal whenever a contact is created',\n  IMPORT_FREQUENCY_DESCRIPTION: 'How frequently do you want to import contacts from Sugar CRM',\n  NO_IMPORTS_MESSAGE: 'There are no imports created yet!',\n  AT: 'at',\n  GO_BACK: 'Go back',\n  SELECT_SCHEDULE_PERIOD: 'Select Schedule Period',\n  SELECT_TIME_ZONE: 'Select Time Zone',\n  CLOSE_MODAL: 'Close modal',\n  DELETE_CUSTOM_PROPERTY: 'Delete custom property',\n  CONTACT_IMPORTS: 'contact-imports',\n  // Story/Example constants\n  TEST_IMPORT_SUGAR_CRM: 'Test import For Sugar CRM',\n  SUGAR_CRM: 'Sugar CRM',\n  MANAGE_CONTACT_IMPORTS_DESCRIPTION: 'Manage Contect Imports From Sugar CRM ',\n} as const;\n\n// ==================== Placeholders ====================\n\nexport const PLACEHOLDERS = {\n  CHOOSE_LIST_SEGMENT: 'Choose (List/Segment)',\n  CHOOSE_PROPERTY: '--Choose Property--',\n  IMPORT_TITLE: 'Title of this import for future reference',\n  ENTER_CUSTOM_PROPERTY: 'Enter custom property name',\n  CUSTOM_PROPERTY_HELP: 'Enter the exact custom property name for accurate mapping. It is case-sensitive.',\n} as const;\n"],"names":[],"mappings":"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"}

package/dist/es/contact-import/hooks/use-click-outside.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+function useClickOutside(ref, handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled)
+      return;
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        handler(event);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, [ref, handler, enabled]);
+}
+
+export { useClickOutside as default };
+//# sourceMappingURL=use-click-outside.js.map

package/dist/es/contact-import/hooks/use-click-outside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-outside.js","sources":["../../../../src/contact-import/hooks/use-click-outside.ts"],"sourcesContent":["import { useEffect, RefObject } from 'react';\n\n/**\n * Hook to detect clicks outside of a referenced element\n */\nfunction useClickOutside<T extends HTMLElement = HTMLElement>(\n  ref: RefObject<T>,\n  handler: (event: MouseEvent | TouchEvent) => void,\n  enabled: boolean = true\n): void {\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleClickOutside = (event: MouseEvent | TouchEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        handler(event);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('touchstart', handleClickOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('touchstart', handleClickOutside);\n    };\n  }, [ref, handler, enabled]);\n}\n\nexport default useClickOutside;\n\n"],"names":[],"mappings":";;AAKA,SAAS,eACP,CAAA,GAAA,EACA,OACA,EAAA,OAAA,GAAmB,IACb,EAAA;AACN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA;AAAS,MAAA,OAAA;AAEd,IAAM,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AAC7D,MAAI,IAAA,GAAA,CAAI,WAAW,CAAC,GAAA,CAAI,QAAQ,QAAS,CAAA,KAAA,CAAM,MAAc,CAAG,EAAA;AAC9D,QAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,OACf;AAAA,KACF,CAAA;AAEA,IAAS,QAAA,CAAA,gBAAA,CAAiB,aAAa,kBAAkB,CAAA,CAAA;AACzD,IAAS,QAAA,CAAA,gBAAA,CAAiB,cAAc,kBAAkB,CAAA,CAAA;AAE1D,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,mBAAA,CAAoB,aAAa,kBAAkB,CAAA,CAAA;AAC5D,MAAS,QAAA,CAAA,mBAAA,CAAoB,cAAc,kBAAkB,CAAA,CAAA;AAAA,KAC/D,CAAA;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA,CAAA;AAC5B;;;;"}

package/dist/es/contact-import/hooks/use-field-management.js

@@ -0,0 +1,105 @@
+import { useCallback } from 'react';
+import { DEFAULT_FIELD_VALUE } from '../constants/index.js';
+import { generateFieldId } from '../utils/index.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));
+function useFieldManagement(contactImportField, setContactImportField) {
+  const updateField = useCallback(
+    (id, property, value) => {
+      setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+        fields: prev.fields.map(
+          (field) => field.id === id ? __spreadProps(__spreadValues({}, field), { [property]: value }) : field
+        )
+      }));
+    },
+    [setContactImportField]
+  );
+  const updateFieldBulk = useCallback(
+    (id, updates) => {
+      setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+        fields: prev.fields.map(
+          (field) => field.id === id ? __spreadValues(__spreadValues({}, field), updates) : field
+        )
+      }));
+    },
+    [setContactImportField]
+  );
+  const updateSurveySparrowField = useCallback(
+    (value, id, manuallyMapped = false) => {
+      setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+        fields: prev.fields.map(
+          (field) => field.id === id ? __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, field), {
+            surveySparrowField: value
+          }), manuallyMapped && { mapped: true }), {
+            surveySparrowFieldError: false
+          }) : field
+        )
+      }));
+    },
+    [setContactImportField]
+  );
+  const addCustomField = useCallback(() => {
+    setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+      fields: [
+        ...prev.fields,
+        __spreadProps(__spreadValues({}, DEFAULT_FIELD_VALUE), {
+          id: generateFieldId(prev.fields)
+        })
+      ]
+    }));
+  }, [setContactImportField]);
+  const deleteField = useCallback(
+    (id) => {
+      setContactImportField((prev) => __spreadProps(__spreadValues({}, prev), {
+        fields: prev.fields.filter((field) => field.id !== id)
+      }));
+    },
+    [setContactImportField]
+  );
+  const setFieldError = useCallback(
+    (id, hasError) => {
+      updateField(id, "surveySparrowFieldError", hasError);
+    },
+    [updateField]
+  );
+  const validateFields = useCallback(() => {
+    let isValid = true;
+    contactImportField.fields.forEach((field) => {
+      if (field.property !== "custom" && !field.surveySparrowField) {
+        setFieldError(field.id, true);
+        isValid = false;
+      }
+    });
+    return isValid;
+  }, [contactImportField.fields, setFieldError]);
+  return {
+    updateField,
+    updateFieldBulk,
+    updateSurveySparrowField,
+    addCustomField,
+    deleteField,
+    setFieldError,
+    validateFields
+  };
+}
+
+export { useFieldManagement as default };
+//# sourceMappingURL=use-field-management.js.map

package/dist/es/contact-import/hooks/use-field-management.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-management.js","sources":["../../../../src/contact-import/hooks/use-field-management.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { Field, ContactImportField } from '../types';\nimport { DEFAULT_FIELD_VALUE } from '../constants';\nimport { generateFieldId } from '../utils';\n\n/**\n * Hook to manage field operations (add, update, delete)\n */\nfunction useFieldManagement(\n  contactImportField: ContactImportField,\n  setContactImportField: React.Dispatch<React.SetStateAction<ContactImportField>>\n) {\n  /**\n   * Updates a specific field property\n   */\n  const updateField = useCallback(\n    (id: string | number, property: keyof Field, value: string | number | boolean | null) => {\n      setContactImportField((prev) => ({\n        ...prev,\n        fields: prev.fields.map((field) =>\n          field.id === id ? { ...field, [property]: value } : field\n        ),\n      }));\n    },\n    [setContactImportField]\n  );\n\n  /**\n   * Updates multiple field properties at once\n   */\n  const updateFieldBulk = useCallback(\n    (id: string | number, updates: Partial<Field>) => {\n      setContactImportField((prev) => ({\n        ...prev,\n        fields: prev.fields.map((field) =>\n          field.id === id ? { ...field, ...updates } : field\n        ),\n      }));\n    },\n    [setContactImportField]\n  );\n\n  /**\n   * Updates the surveySparrow field and optionally marks as manually mapped\n   */\n  const updateSurveySparrowField = useCallback(\n    (value: string | number, id: string | number, manuallyMapped: boolean = false) => {\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                surveySparrowFieldError: false,\n              }\n            : field\n        ),\n      }));\n    },\n    [setContactImportField]\n  );\n\n  /**\n   * Adds a new custom property field\n   */\n  const addCustomField = useCallback(() => {\n    setContactImportField((prev) => ({\n      ...prev,\n      fields: [\n        ...prev.fields,\n        {\n          ...DEFAULT_FIELD_VALUE,\n          id: generateFieldId(prev.fields),\n        },\n      ],\n    }));\n  }, [setContactImportField]);\n\n  /**\n   * Deletes a field by ID\n   */\n  const deleteField = useCallback(\n    (id: string | number) => {\n      setContactImportField((prev) => ({\n        ...prev,\n        fields: prev.fields.filter((field) => field.id !== id),\n      }));\n    },\n    [setContactImportField]\n  );\n\n  /**\n   * Sets field error state\n   */\n  const setFieldError = useCallback(\n    (id: string | number, hasError: boolean) => {\n      updateField(id, 'surveySparrowFieldError', hasError);\n    },\n    [updateField]\n  );\n\n  /**\n   * Validates all fields and sets error states\n   */\n  const validateFields = useCallback((): boolean => {\n    let isValid = true;\n    \n    contactImportField.fields.forEach((field) => {\n      if (field.property !== 'custom' && !field.surveySparrowField) {\n        setFieldError(field.id, true);\n        isValid = false;\n      }\n    });\n\n    return isValid;\n  }, [contactImportField.fields, setFieldError]);\n\n  return {\n    updateField,\n    updateFieldBulk,\n    updateSurveySparrowField,\n    addCustomField,\n    deleteField,\n    setFieldError,\n    validateFields,\n  };\n}\n\nexport default useFieldManagement;\n\n"],"names":[],"mappings":"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"}

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

@@ -1,22 +1,10 @@
-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 Dashboard from './components/ManageImport/dashboard.js';
-import { MODAL_MAX_WIDTH, INPUT_MAX_LENGTH } from '../commons/constants/index.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 { 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;
@@ -55,8 +43,14 @@ const ContactImport = ({
   const [newImport, setNewImport] = useState(true);
   useEffect(() => {
     setNewImport(!(existingImports == null ? void 0 : existingImports.length));
-  }, []);
-  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(
+  }, [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(
     ContactImportHeader,
     {
       setNewImport,
@@ -73,12 +67,7 @@ const ContactImport = ({
     ContactImportConfigure,
     {
       contactImportField,
-      handleConfigureField: (value) => {
-        setContactImportField(__spreadProps(__spreadValues({}, contactImportField), {
-          configure: __spreadValues({}, value)
-        }));
-        navigateMappingPage(true);
-      },
+      handleConfigureField: handleConfigureComplete,
       listSegmentOptions
     }
   ) : /* @__PURE__ */ React__default.createElement(
@@ -89,225 +78,23 @@ const ContactImport = ({
       integrationName,
       contactProperties
     }
-  )), (existingImports == null ? void 0 : existingImports.length) && !newImport ? /* @__PURE__ */ React__default.createElement(
-    Dashboard,
-    {
-      dashboardDescription,
-      setNewImport,
-      integrationName,
-      imports: existingImports
+  ));
+  const renderDashboard = () => {
+    if (!(existingImports == null ? void 0 : existingImports.length) || newImport) {
+      return null;
     }
-  ) : 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,
+    return /* @__PURE__ */ React__default.createElement(
+      Dashboard,
       {
-        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)
+        dashboardDescription,
+        setNewImport,
+        integrationName,
+        imports: existingImports
       }
-    ) : 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"
-      )
-    )
-  ));
+    );
+  };
+  return /* @__PURE__ */ React__default.createElement(ThemeWrapper, null, /* @__PURE__ */ React__default.createElement(Box, { css: { height: "100vh", width: "100vw" } }, newImport && renderNewImportFlow(), renderDashboard()));
 };
 
-export { ContactImport };
+export { ContactImport, ContactImport as default };
 //# sourceMappingURL=index.js.map