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

package/dist/cjs/commons/icons/whatsapp.js

@@ -3,81 +3,99 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var strings = require('../constants/strings.js');
 
-const WhatsappIcon = () => {
+const DEFAULT_CONFIG = {
+  width: 20,
+  height: 20,
+  color: strings.COLORS.ICON_GRAY,
+  strokeWidth: 1.5
+};
+const WhatsAppIcon = ({
+  width = DEFAULT_CONFIG.width,
+  height = DEFAULT_CONFIG.height,
+  color = DEFAULT_CONFIG.color,
+  strokeWidth = DEFAULT_CONFIG.strokeWidth,
+  className,
+  ariaLabel = strings.ARIA_LABELS.WHATSAPP
+}) => {
   return /* @__PURE__ */ React.createElement(
     "svg",
     {
-      width: "20",
-      height: "20",
+      width,
+      height,
       viewBox: "0 0 20 20",
       fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-label": ariaLabel,
+      role: strings.ATTRIBUTES.IMG
     },
     /* @__PURE__ */ React.createElement(
       "path",
       {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
         d: "M15.17 4.80163C13.7984 3.42913 11.9742 2.67246 10.0309 2.67163C6.02504 2.67163 2.76587 5.92913 2.76504 9.9333C2.76337 11.2075 3.09754 12.46 3.7342 13.5641L2.70337 17.3275L6.55504 16.3175C7.62087 16.8975 8.8142 17.2016 10.0275 17.2016H10.0309C14.035 17.2016 17.2942 13.9433 17.2959 9.93913C17.2967 7.99913 16.5417 6.17496 15.17 4.80163Z",
-        stroke: "#6A6A6A",
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
     ),
     /* @__PURE__ */ React.createElement(
       "path",
       {
         d: "M10.9126 11.2999L11.2509 10.9641C11.5618 10.6558 12.0534 10.6166 12.4118 10.8683C12.7584 11.1116 13.0718 11.3299 13.3634 11.5333C13.8268 11.8549 13.8826 12.5149 13.4834 12.9133L13.1843 13.2124",
-        stroke: "#6A6A6A",
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
     ),
     /* @__PURE__ */ React.createElement(
       "path",
       {
         d: "M6.7876 6.81583L7.08676 6.51666C7.4851 6.11833 8.1451 6.17416 8.46676 6.63666C8.66926 6.92833 8.8876 7.24166 9.13176 7.58833C9.38343 7.94666 9.3451 8.43833 9.03593 8.74916L8.7001 9.08749",
-        stroke: "#6A6A6A",
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
     ),
     /* @__PURE__ */ React.createElement(
       "path",
       {
         d: "M13.1842 13.2126C11.9501 14.4409 9.8759 13.3976 8.2384 11.7593",
-        stroke: "#6A6A6A",
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
     ),
     /* @__PURE__ */ React.createElement(
       "path",
       {
         d: "M8.24006 11.7618C6.60256 10.1234 5.55922 8.05008 6.78756 6.81592",
-        stroke: "#6A6A6A",
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
     ),
     /* @__PURE__ */ React.createElement(
       "path",
       {
         d: "M8.70007 9.0874C8.96591 9.50657 9.30674 9.92157 9.69174 10.3066L9.69341 10.3082C10.0784 10.6932 10.4934 11.0341 10.9126 11.2999",
-        stroke: "#6A6A6A",
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
     )
   );
 };
+WhatsAppIcon.displayName = strings.COMPONENT_DISPLAY_NAMES.WHATSAPP_ICON;
 
-exports.default = WhatsappIcon;
+exports.default = WhatsAppIcon;
 //# sourceMappingURL=whatsapp.js.map

package/dist/cjs/commons/icons/whatsapp.js.map

@@ -1 +1 @@
-{"version":3,"file":"whatsapp.js","sources":["../../../../src/commons/icons/whatsapp.tsx"],"sourcesContent":["import React from \"react\";\n\nconst WhatsappIcon = () => {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M15.17 4.80163C13.7984 3.42913 11.9742 2.67246 10.0309 2.67163C6.02504 2.67163 2.76587 5.92913 2.76504 9.9333C2.76337 11.2075 3.09754 12.46 3.7342 13.5641L2.70337 17.3275L6.55504 16.3175C7.62087 16.8975 8.8142 17.2016 10.0275 17.2016H10.0309C14.035 17.2016 17.2942 13.9433 17.2959 9.93913C17.2967 7.99913 16.5417 6.17496 15.17 4.80163Z\"\n        stroke=\"#6A6A6A\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M10.9126 11.2999L11.2509 10.9641C11.5618 10.6558 12.0534 10.6166 12.4118 10.8683C12.7584 11.1116 13.0718 11.3299 13.3634 11.5333C13.8268 11.8549 13.8826 12.5149 13.4834 12.9133L13.1843 13.2124\"\n        stroke=\"#6A6A6A\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M6.7876 6.81583L7.08676 6.51666C7.4851 6.11833 8.1451 6.17416 8.46676 6.63666C8.66926 6.92833 8.8876 7.24166 9.13176 7.58833C9.38343 7.94666 9.3451 8.43833 9.03593 8.74916L8.7001 9.08749\"\n        stroke=\"#6A6A6A\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M13.1842 13.2126C11.9501 14.4409 9.8759 13.3976 8.2384 11.7593\"\n        stroke=\"#6A6A6A\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M8.24006 11.7618C6.60256 10.1234 5.55922 8.05008 6.78756 6.81592\"\n        stroke=\"#6A6A6A\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M8.70007 9.0874C8.96591 9.50657 9.30674 9.92157 9.69174 10.3066L9.69341 10.3082C10.0784 10.6932 10.4934 11.0341 10.9126 11.2999\"\n        stroke=\"#6A6A6A\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  );\n};\n\nexport default WhatsappIcon;\n"],"names":[],"mappings":";;;;;;AAEA,MAAM,eAAe,MAAM;AACzB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,IAAA;AAAA,MACN,MAAO,EAAA,IAAA;AAAA,MACP,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,MAAA;AAAA,MACL,KAAM,EAAA,4BAAA;AAAA,KAAA;AAAA,oBAEN,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAU,EAAA,SAAA;AAAA,QACV,WAAU,EAAA,SAAA;AAAA,QACV,CAAE,EAAA,iVAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,cAAa,EAAA,KAAA;AAAA,QACb,gBAAe,EAAA,OAAA;AAAA,QACf,iBAAgB,EAAA,OAAA;AAAA,OAAA;AAAA,KAClB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kMAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,cAAa,EAAA,KAAA;AAAA,QACb,gBAAe,EAAA,OAAA;AAAA,QACf,iBAAgB,EAAA,OAAA;AAAA,OAAA;AAAA,KAClB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,4LAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,cAAa,EAAA,KAAA;AAAA,QACb,gBAAe,EAAA,OAAA;AAAA,QACf,iBAAgB,EAAA,OAAA;AAAA,OAAA;AAAA,KAClB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,gEAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,cAAa,EAAA,KAAA;AAAA,QACb,gBAAe,EAAA,OAAA;AAAA,QACf,iBAAgB,EAAA,OAAA;AAAA,OAAA;AAAA,KAClB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kEAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,cAAa,EAAA,KAAA;AAAA,QACb,gBAAe,EAAA,OAAA;AAAA,QACf,iBAAgB,EAAA,OAAA;AAAA,OAAA;AAAA,KAClB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,iIAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,cAAa,EAAA,KAAA;AAAA,QACb,gBAAe,EAAA,OAAA;AAAA,QACf,iBAAgB,EAAA,OAAA;AAAA,OAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"whatsapp.js","sources":["../../../../src/commons/icons/whatsapp.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, ARIA_LABELS, ATTRIBUTES, COMPONENT_DISPLAY_NAMES } from '../constants/strings';\n\n/**\n * Props for the WhatsAppIcon component\n */\nexport interface WhatsAppIconProps {\n  /** Width of the icon */\n  width?: number | string;\n  /** Height of the icon */\n  height?: number | string;\n  /** Stroke color of the icon */\n  color?: string;\n  /** Stroke width */\n  strokeWidth?: number | string;\n  /** Optional: Additional CSS class name */\n  className?: string;\n  /** Optional: ARIA label for accessibility */\n  ariaLabel?: string;\n}\n\n/**\n * Default configuration for the WhatsApp icon\n */\nconst DEFAULT_CONFIG = {\n  width: 20,\n  height: 20,\n  color: COLORS.ICON_GRAY,\n  strokeWidth: 1.5,\n} as const;\n\n/**\n * WhatsAppIcon Component\n * \n * A WhatsApp messenger icon with customizable size and color.\n * \n * @example\n * ```tsx\n * <WhatsAppIcon width={24} height={24} color=\"#25D366\" />\n * ```\n */\nconst WhatsAppIcon: React.FC<WhatsAppIconProps> = ({\n  width = DEFAULT_CONFIG.width,\n  height = DEFAULT_CONFIG.height,\n  color = DEFAULT_CONFIG.color,\n  strokeWidth = DEFAULT_CONFIG.strokeWidth,\n  className,\n  ariaLabel = ARIA_LABELS.WHATSAPP,\n}) => {\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-label={ariaLabel}\n      role={ATTRIBUTES.IMG}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M15.17 4.80163C13.7984 3.42913 11.9742 2.67246 10.0309 2.67163C6.02504 2.67163 2.76587 5.92913 2.76504 9.9333C2.76337 11.2075 3.09754 12.46 3.7342 13.5641L2.70337 17.3275L6.55504 16.3175C7.62087 16.8975 8.8142 17.2016 10.0275 17.2016H10.0309C14.035 17.2016 17.2942 13.9433 17.2959 9.93913C17.2967 7.99913 16.5417 6.17496 15.17 4.80163Z\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M10.9126 11.2999L11.2509 10.9641C11.5618 10.6558 12.0534 10.6166 12.4118 10.8683C12.7584 11.1116 13.0718 11.3299 13.3634 11.5333C13.8268 11.8549 13.8826 12.5149 13.4834 12.9133L13.1843 13.2124\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M6.7876 6.81583L7.08676 6.51666C7.4851 6.11833 8.1451 6.17416 8.46676 6.63666C8.66926 6.92833 8.8876 7.24166 9.13176 7.58833C9.38343 7.94666 9.3451 8.43833 9.03593 8.74916L8.7001 9.08749\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M13.1842 13.2126C11.9501 14.4409 9.8759 13.3976 8.2384 11.7593\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M8.24006 11.7618C6.60256 10.1234 5.55922 8.05008 6.78756 6.81592\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M8.70007 9.0874C8.96591 9.50657 9.30674 9.92157 9.69174 10.3066L9.69341 10.3082C10.0784 10.6932 10.4934 11.0341 10.9126 11.2999\"\n        stroke={color}\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n};\n\nWhatsAppIcon.displayName = COMPONENT_DISPLAY_NAMES.WHATSAPP_ICON;\n\nexport default WhatsAppIcon;\n"],"names":["COLORS","ARIA_LABELS","ATTRIBUTES","COMPONENT_DISPLAY_NAMES"],"mappings":";;;;;;;AAwBA,MAAM,cAAiB,GAAA;AAAA,EACrB,KAAO,EAAA,EAAA;AAAA,EACP,MAAQ,EAAA,EAAA;AAAA,EACR,OAAOA,cAAO,CAAA,SAAA;AAAA,EACd,WAAa,EAAA,GAAA;AACf,CAAA,CAAA;AAYA,MAAM,eAA4C,CAAC;AAAA,EACjD,QAAQ,cAAe,CAAA,KAAA;AAAA,EACvB,SAAS,cAAe,CAAA,MAAA;AAAA,EACxB,QAAQ,cAAe,CAAA,KAAA;AAAA,EACvB,cAAc,cAAe,CAAA,WAAA;AAAA,EAC7B,SAAA;AAAA,EACA,YAAYC,mBAAY,CAAA,QAAA;AAC1B,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,MAAA;AAAA,MACL,KAAM,EAAA,4BAAA;AAAA,MACN,SAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACZ,MAAMC,kBAAW,CAAA,GAAA;AAAA,KAAA;AAAA,oBAEjB,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,SAAA;AAAA,QACT,QAAS,EAAA,SAAA;AAAA,QACT,CAAE,EAAA,iVAAA;AAAA,QACF,MAAQ,EAAA,KAAA;AAAA,QACR,WAAA;AAAA,QACA,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kMAAA;AAAA,QACF,MAAQ,EAAA,KAAA;AAAA,QACR,WAAA;AAAA,QACA,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,4LAAA;AAAA,QACF,MAAQ,EAAA,KAAA;AAAA,QACR,WAAA;AAAA,QACA,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,gEAAA;AAAA,QACF,MAAQ,EAAA,KAAA;AAAA,QACR,WAAA;AAAA,QACA,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kEAAA;AAAA,QACF,MAAQ,EAAA,KAAA;AAAA,QACR,WAAA;AAAA,QACA,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,iIAAA;AAAA,QACF,MAAQ,EAAA,KAAA;AAAA,QACR,WAAA;AAAA,QACA,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEJ,EAAA;AAEA,YAAA,CAAa,cAAcC,+BAAwB,CAAA,aAAA;;;;"}

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

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ImportSchedules = require('./ImportSchedules.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 heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var radio = require('../../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.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 chevronRight = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+
+const ContactImportConfigure = ({
+  handleConfigureField,
+  listSegmentOptions,
+  contactImportField
+}) => {
+  var _a, _b, _c;
+  const [currentConfig, setCurrentConfig] = React.useState(
+    ((_a = contactImportField == null ? void 0 : contactImportField.configure) == null ? void 0 : _a.type) || index.IMPORT_CONFIG_TYPE.LIST
+  );
+  const [currentList, setCurrentList] = React.useState(
+    (_c = (_b = contactImportField == null ? void 0 : contactImportField.configure) == null ? void 0 : _b.listSegmentValue) != null ? _c : null
+  );
+  const handleConfigChange = React.useCallback((value) => {
+    setCurrentConfig(value);
+    setCurrentList(null);
+  }, []);
+  const handleListChange = React.useCallback((value) => {
+    setCurrentList(value);
+  }, []);
+  const handleNextClick = React.useCallback(() => {
+    handleConfigureField({
+      type: currentConfig,
+      listSegmentValue: currentList
+    });
+  }, [currentConfig, currentList, handleConfigureField]);
+  const isNextDisabled = currentConfig === index.IMPORT_CONFIG_TYPE.LIST && !(currentList == null ? void 0 : currentList.value);
+  const isListConfig = currentConfig === index.IMPORT_CONFIG_TYPE.LIST;
+  return /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center" }, /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: {
+        marginTop: "$40",
+        maxWidth: index.UI_CONSTANTS.CONFIGURE_MAX_WIDTH,
+        width: "100%"
+      }
+    },
+    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, index.LABELS.IMPORT_CONTACTS),
+    /* @__PURE__ */ React.createElement(radio.RadioGroup, { defaultValue: currentConfig, onChange: handleConfigChange }, /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: {
+          marginTop: "$12",
+          "& label": { color: "$neutral800" }
+        },
+        alignItems: "center",
+        gap: "$12"
+      },
+      /* @__PURE__ */ React.createElement(
+        radio.Radio,
+        {
+          size: "md",
+          value: index.IMPORT_CONFIG_TYPE.LIST,
+          css: { cursor: "pointer" }
+        },
+        index.LABELS.IMPORT_FROM_LIST_SEGMENT
+      ),
+      /* @__PURE__ */ React.createElement(
+        radio.Radio,
+        {
+          size: "md",
+          value: index.IMPORT_CONFIG_TYPE.ALL,
+          css: { cursor: "pointer" }
+        },
+        index.LABELS.IMPORT_ALL_CONTACTS
+      )
+    )),
+    isListConfig && /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        css: { marginTop: "$12" },
+        onChange: handleListChange,
+        size: "lg",
+        placeholder: index.PLACEHOLDERS.CHOOSE_LIST_SEGMENT,
+        options: listSegmentOptions,
+        value: currentList
+      }
+    ),
+    /* @__PURE__ */ React.createElement(box.Box, { css: { marginBlock: "$16" } }, /* @__PURE__ */ React.createElement(
+      ImportSchedules.default,
+      {
+        currentList,
+        setCurrentList
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        css: { marginTop: "$16" },
+        disabled: isNextDisabled,
+        size: "lg",
+        onClick: handleNextClick,
+        rightIcon: /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, null)
+      },
+      index.LABELS.NEXT_MAPPING
+    )
+  ));
+};
+
+exports.default = ContactImportConfigure;
+//# sourceMappingURL=ContactImportConfigure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactImportConfigure.js","sources":["../../../../src/contact-import/components/ContactImportConfigure.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport {\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 ImportSchedules from './ImportSchedules';\nimport { ContactImportConfigureProps, SelectOption } from '../types';\nimport { UI_CONSTANTS, LABELS, PLACEHOLDERS, IMPORT_CONFIG_TYPE } from '../constants';\n\n/**\n * Component for configuring contact import settings\n * Handles list/segment selection and scheduling\n */\nconst ContactImportConfigure: React.FC<ContactImportConfigureProps> = ({\n  handleConfigureField,\n  listSegmentOptions,\n  contactImportField,\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<string>(\n    contactImportField?.configure?.type || IMPORT_CONFIG_TYPE.LIST\n  );\n  const [currentList, setCurrentList] = useState<SelectOption | null>(\n    contactImportField?.configure?.listSegmentValue ?? null\n  );\n\n  const handleConfigChange = useCallback((value: string) => {\n    setCurrentConfig(value);\n    setCurrentList(null);\n  }, []);\n\n  const handleListChange = useCallback((value: SelectOption) => {\n    setCurrentList(value);\n  }, []);\n\n  const handleNextClick = useCallback(() => {\n    handleConfigureField({\n      type: currentConfig as 'LIST' | 'ALL',\n      listSegmentValue: currentList,\n    });\n  }, [currentConfig, currentList, handleConfigureField]);\n\n  const isNextDisabled = currentConfig === IMPORT_CONFIG_TYPE.LIST && !currentList?.value;\n  const isListConfig = currentConfig === IMPORT_CONFIG_TYPE.LIST;\n\n  return (\n    <Flex justifyContent=\"center\">\n      <Box\n        css={{\n          marginTop: '$40',\n          maxWidth: UI_CONSTANTS.CONFIGURE_MAX_WIDTH,\n          width: '100%',\n        }}\n      >\n        {/* Title */}\n        <Heading size=\"h5\">{LABELS.IMPORT_CONTACTS}</Heading>\n\n        {/* Import Type Selection */}\n        <RadioGroup defaultValue={currentConfig} onChange={handleConfigChange}>\n          <Flex\n            css={{\n              marginTop: '$12',\n              '& label': { color: '$neutral800' },\n            }}\n            alignItems=\"center\"\n            gap=\"$12\"\n          >\n            <Radio\n              size=\"md\"\n              value={IMPORT_CONFIG_TYPE.LIST}\n              css={{ cursor: 'pointer' }}\n            >\n              {LABELS.IMPORT_FROM_LIST_SEGMENT}\n            </Radio>\n            <Radio\n              size=\"md\"\n              value={IMPORT_CONFIG_TYPE.ALL}\n              css={{ cursor: 'pointer' }}\n            >\n              {LABELS.IMPORT_ALL_CONTACTS}\n            </Radio>\n          </Flex>\n        </RadioGroup>\n\n        {/* List/Segment Selection */}\n        {isListConfig && (\n          <Select\n            css={{ marginTop: '$12' }}\n            onChange={handleListChange}\n            size=\"lg\"\n            placeholder={PLACEHOLDERS.CHOOSE_LIST_SEGMENT}\n            options={listSegmentOptions}\n            value={currentList}\n          />\n        )}\n\n        {/* Import Schedule Configuration */}\n        <Box css={{ marginBlock: '$16' }}>\n          <ImportSchedules\n            currentList={currentList}\n            setCurrentList={setCurrentList}\n          />\n        </Box>\n\n        {/* Next Button */}\n        <Button\n          css={{ marginTop: '$16' }}\n          disabled={isNextDisabled}\n          size=\"lg\"\n          onClick={handleNextClick}\n          rightIcon={<ChevronRightIcon />}\n        >\n          {LABELS.NEXT_MAPPING}\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default ContactImportConfigure;\n\n"],"names":["useState","IMPORT_CONFIG_TYPE","useCallback","Flex","Box","UI_CONSTANTS","Heading","LABELS","RadioGroup","Radio","Select","PLACEHOLDERS","ImportSchedules","Button","ChevronRightIcon"],"mappings":"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"}

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

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var arrow = require('../../commons/icons/arrow.js');
+var ContactImportModal = require('./ContactImportModal.js');
+var index = require('../constants/index.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');
+
+const ContactImportHeader = ({
+  setNewImport,
+  setContactImportField,
+  contactImportField,
+  hasPreviousMapping,
+  previousMappingHandler,
+  onSaveHandler,
+  isContactMappingPage,
+  navigateMappingPage,
+  invitePortal
+}) => {
+  const [showImportModal, setShowImportModal] = React.useState(false);
+  const handleBackClick = () => {
+    setNewImport(false);
+    previousMappingHandler();
+  };
+  const handleNavigateToEventSetup = () => {
+    if (isContactMappingPage) {
+      navigateMappingPage(false);
+    }
+  };
+  const handleContinueClick = () => {
+    setShowImportModal(true);
+  };
+  const handleSaveAndClose = async () => {
+    await onSaveHandler();
+    setNewImport(false);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__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: handleBackClick,
+          color: "default",
+          icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
+          size: "lg",
+          "aria-label": index.LABELS.GO_BACK
+        }
+      ),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, index.LABELS.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: handleNavigateToEventSetup
+        },
+        index.LABELS.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
+        },
+        index.LABELS.MAPPING
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        onClick: handleContinueClick,
+        rightIcon: /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, null),
+        css: { visibility: isContactMappingPage ? "visible" : "hidden" }
+      },
+      index.LABELS.CONTINUE
+    )
+  ), showImportModal && /* @__PURE__ */ React.createElement(
+    ContactImportModal.default,
+    {
+      setContactImportField,
+      contactImportField,
+      invitePortal,
+      onSaveHandler: handleSaveAndClose,
+      onCloseHandler: () => setShowImportModal(false)
+    }
+  ));
+};
+
+exports.default = ContactImportHeader;
+//# sourceMappingURL=ContactImportHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactImportHeader.js","sources":["../../../../src/contact-import/components/ContactImportHeader.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Flex,\n  Heading,\n  IconButton,\n  Button,\n} from '@sparrowengg/twigs-react';\nimport {\n  ArrowLeftIcon,\n  ChevronRightIcon,\n} from '@sparrowengg/twigs-react-icons';\nimport Arrow from '../../commons/icons/arrow';\nimport ContactImportModal from './ContactImportModal';\nimport { ContactImportHeaderProps } from '../types';\nimport { LABELS } from '../constants';\n\n/**\n * Header component for the Contact Import feature\n * Handles navigation between Event Setup and Mapping pages\n */\nconst ContactImportHeader: React.FC<ContactImportHeaderProps> = ({\n  setNewImport,\n  setContactImportField,\n  contactImportField,\n  hasPreviousMapping,\n  previousMappingHandler,\n  onSaveHandler,\n  isContactMappingPage,\n  navigateMappingPage,\n  invitePortal,\n}) => {\n  const [showImportModal, setShowImportModal] = useState(false);\n\n  const handleBackClick = () => {\n    setNewImport(false);\n    previousMappingHandler();\n  };\n\n  const handleNavigateToEventSetup = () => {\n    if (isContactMappingPage) {\n      navigateMappingPage(false);\n    }\n  };\n\n  const handleContinueClick = () => {\n    setShowImportModal(true);\n  };\n\n  const handleSaveAndClose = async () => {\n    await onSaveHandler();\n    setNewImport(false);\n  };\n\n  return (\n    <>\n      <Flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        css={{\n          borderBottom: '$borderWidths$xs solid $neutral200',\n          padding: '$8 $12',\n        }}\n      >\n        {/* Back Button and Title */}\n        <Flex\n          gap=\"$6\"\n          alignItems=\"center\"\n          css={{ visibility: hasPreviousMapping ? 'visible' : 'hidden' }}\n        >\n          <IconButton\n            onClick={handleBackClick}\n            color=\"default\"\n            icon={<ArrowLeftIcon />}\n            size=\"lg\"\n            aria-label={LABELS.GO_BACK}\n          />\n          <Heading size=\"h6\">{LABELS.NEW_CONTACT_IMPORT}</Heading>\n        </Flex>\n\n        {/* Navigation Breadcrumb */}\n        <Flex\n          alignItems=\"center\"\n          gap=\"$4\"\n          css={{\n            '& button': {\n              background: 'transparent !important',\n              fontSize: '$md',\n            },\n          }}\n        >\n          <Button\n            css={{\n              color: !isContactMappingPage ? '$neutral900' : '$neutral800',\n            }}\n            color=\"default\"\n            variant=\"ghost\"\n            size=\"md\"\n            onClick={handleNavigateToEventSetup}\n          >\n            {LABELS.EVENT_SETUP}\n          </Button>\n          <Arrow />\n          <Button\n            css={{\n              color: isContactMappingPage ? '$neutral900' : '$neutral800',\n            }}\n            color=\"default\"\n            variant=\"ghost\"\n            size=\"md\"\n            disabled={!isContactMappingPage}\n          >\n            {LABELS.MAPPING}\n          </Button>\n        </Flex>\n\n        {/* Continue Button */}\n        <Button\n          size=\"lg\"\n          onClick={handleContinueClick}\n          rightIcon={<ChevronRightIcon />}\n          css={{ visibility: isContactMappingPage ? 'visible' : 'hidden' }}\n        >\n          {LABELS.CONTINUE}\n        </Button>\n      </Flex>\n\n      {/* Import Configuration Modal */}\n      {showImportModal && (\n        <ContactImportModal\n          setContactImportField={setContactImportField}\n          contactImportField={contactImportField}\n          invitePortal={invitePortal}\n          onSaveHandler={handleSaveAndClose}\n          onCloseHandler={() => setShowImportModal(false)}\n        />\n      )}\n    </>\n  );\n};\n\nexport default ContactImportHeader;\n\n"],"names":["useState","Flex","IconButton","ArrowLeftIcon","LABELS","Heading","Button","Arrow","ChevronRightIcon","ContactImportModal"],"mappings":"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"}

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