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

package/dist/cjs/mapping/components/CustomAddNewSelect.js

@@ -0,0 +1,131 @@
+'use strict';
+
+var React = require('react');
+var index = require('../constants/index.js');
+var select = require('../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var indexA301f526_esm = require('../../node_modules/react-select/dist/index-a301f526.esm.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var plus = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js');
+var tickCircleFill = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/tick-circle-fill.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 CustomShareOption = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React.createElement(
+      tooltip.Tooltip,
+      {
+        content: props.data.tooltip || index.UI_TEXT.EMPTY_PLACEHOLDER,
+        css: {
+          zIndex: index.UI_CONSTANTS.TOOLTIP_Z_INDEX,
+          fontFamily: `${index.STYLE_CONSTANTS.FONT_FAMILY} !important`
+        }
+      },
+      /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          css: { cursor: "pointer", zIndex: index.UI_CONSTANTS.TOOLTIP_Z_INDEX }
+        },
+        /* @__PURE__ */ React.createElement(
+          flex.Flex,
+          {
+            gap: "$2",
+            alignItems: "center",
+            css: {
+              color: "$primary500",
+              fontSize: "$sm",
+              fontWeight: "$7"
+            }
+          },
+          /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16, color: index.STYLE_CONSTANTS.PLUS_ICON_COLOR }),
+          index.UI_TEXT.ADD_ACCOUNT_BUTTON
+        )
+      )))
+    );
+  }
+  return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { cursor: "pointer", zIndex: index.UI_CONSTANTS.TOOLTIP_Z_INDEX },
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "$2"
+    },
+    /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.label),
+    props.data.isAddonAccount && /* @__PURE__ */ React.createElement(
+      chip.Chip,
+      {
+        color: "primary",
+        size: "sm",
+        leftElement: /* @__PURE__ */ React.createElement(tickCircleFill.TickCircleFillIcon, null)
+      },
+      index.UI_TEXT.IN_USE_ADDON_CHIP
+    )
+  ));
+};
+const CustomSingleValue = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
+  }
+  return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
+};
+const CustomAddNewSelect = ({ field }) => {
+  const handleChange = (value) => {
+    var _a;
+    field.onChangeHandler({
+      id: (_a = field == null ? void 0 : field.id) != null ? _a : field == null ? void 0 : field.label,
+      value
+    });
+  };
+  return /* @__PURE__ */ React.createElement(
+    select.Select,
+    {
+      isDisabled: field == null ? void 0 : field.disabled,
+      placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
+      size: "lg",
+      css: {
+        cursor: "pointer"
+      },
+      components: {
+        Option: CustomShareOption,
+        SingleValue: CustomSingleValue
+      },
+      styles: {
+        singleValue: (provided) => __spreadProps(__spreadValues({}, provided), {
+          display: "flex",
+          alignItems: "center",
+          cursor: "pointer"
+        })
+      },
+      value: field.value,
+      onChange: handleChange,
+      options: field.options
+    }
+  );
+};
+
+exports.CustomAddNewSelect = CustomAddNewSelect;
+//# sourceMappingURL=CustomAddNewSelect.js.map

package/dist/cjs/mapping/components/CustomAddNewSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomAddNewSelect.js","sources":["../../../../src/mapping/components/CustomAddNewSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box, Flex, Text, Tooltip, Chip, Select } from \"@sparrowengg/twigs-react\";\nimport { PlusIcon, TickCircleFillIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { components, OptionProps, SingleValueProps } from \"react-select\";\nimport { ConfigurationField, SelectOption } from \"../types\";\nimport { UI_TEXT, UI_CONSTANTS, STYLE_CONSTANTS } from \"../constants\";\n\ninterface CustomAddNewSelectProps {\n  field: ConfigurationField;\n}\n\ninterface CustomSelectOption extends SelectOption {\n  tooltip?: string;\n  isAddonAccount?: boolean;\n}\n\n/**\n * CustomShareOption component - Custom option renderer for select\n */\nconst CustomShareOption: React.FC<OptionProps<CustomSelectOption>> = (props) => {\n  if (props.data.value === \"ADD_NEW\") {\n    return (\n      <Tooltip\n        content={props.data.tooltip || UI_TEXT.EMPTY_PLACEHOLDER}\n        css={{\n          zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX,\n          fontFamily: `${STYLE_CONSTANTS.FONT_FAMILY} !important`,\n        }}\n      >\n        <Box>\n          <components.Option {...props}>\n            <Flex\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              css={{ cursor: \"pointer\", zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX }}\n            >\n              <Flex\n                gap=\"$2\"\n                alignItems=\"center\"\n                css={{\n                  color: \"$primary500\",\n                  fontSize: \"$sm\",\n                  fontWeight: \"$7\",\n                }}\n              >\n                <PlusIcon size={16} color={STYLE_CONSTANTS.PLUS_ICON_COLOR} />\n                {UI_TEXT.ADD_ACCOUNT_BUTTON}\n              </Flex>\n            </Flex>\n          </components.Option>\n        </Box>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <components.Option {...props}>\n      <Flex\n        css={{ cursor: \"pointer\", zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX }}\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        gap=\"$2\"\n      >\n        <Text size=\"sm\">{props.label}</Text>\n        {props.data.isAddonAccount && (\n          <Chip\n            color=\"primary\"\n            size=\"sm\"\n            leftElement={<TickCircleFillIcon />}\n          >\n            {UI_TEXT.IN_USE_ADDON_CHIP}\n          </Chip>\n        )}\n      </Flex>\n    </components.Option>\n  );\n};\n\n/**\n * CustomSingleValue component - Custom single value renderer for select\n */\nconst CustomSingleValue: React.FC<SingleValueProps<CustomSelectOption>> = (props) => {\n  if (props.data.value === \"ADD_NEW\") {\n    return (\n      <components.SingleValue {...props}>\n        <Flex css={{ cursor: \"pointer\" }} alignItems=\"center\" gap=\"$2\">\n          <PlusIcon size={16} />\n          <Text size=\"sm\">{props.data.label}</Text>\n        </Flex>\n      </components.SingleValue>\n    );\n  }\n\n  return (\n    <components.SingleValue {...props}>\n      <Flex css={{ cursor: \"pointer\" }} alignItems=\"center\" gap=\"$2\">\n        <Text size=\"sm\">{props.data.label}</Text>\n      </Flex>\n    </components.SingleValue>\n  );\n};\n\n/**\n * CustomAddNewSelect component - Select component with custom rendering for add new option\n */\nexport const CustomAddNewSelect: React.FC<CustomAddNewSelectProps> = ({ field }) => {\n  const handleChange = (value: unknown): void => {\n    field.onChangeHandler({\n      id: field?.id ?? field?.label,\n      value: value,\n    });\n  };\n\n  return (\n    <Select\n      isDisabled={field?.disabled}\n      placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n      size=\"lg\"\n      css={{\n        cursor: \"pointer\",\n      }}\n      components={{\n        Option: CustomShareOption,\n        SingleValue: CustomSingleValue,\n      }}\n      styles={{\n        singleValue: (provided) => ({\n          ...provided,\n          display: \"flex\",\n          alignItems: \"center\",\n          cursor: \"pointer\",\n        }),\n      }}\n      value={field.value as SelectOption}\n      onChange={handleChange}\n      options={field.options}\n    />\n  );\n};\n\n"],"names":["Tooltip","UI_TEXT","UI_CONSTANTS","STYLE_CONSTANTS","Box","components","Flex","PlusIcon","Text","Chip","TickCircleFillIcon","Select"],"mappings":"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"}

package/dist/cjs/mapping/components/EventSetup.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var React = require('react');
+var ConfigurationSetup = require('./ConfigurationSetup.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 text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var formLabel = require('../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.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 EventSetup = ({
+  surveyDetails,
+  accounts,
+  events,
+  actions,
+  navigateMappingPage,
+  configuration,
+  editFieldId
+}) => {
+  React.useEffect(() => {
+    if (actions == null ? void 0 : actions.value) {
+      actions.onChangeHandler(actions.value);
+    }
+    if (events == null ? void 0 : events.value) {
+      events.onChangeHandler(events.value);
+    }
+  }, [actions == null ? void 0 : actions.value, events == null ? void 0 : events.value]);
+  const isContinueDisabled = configuration.hasConfiguration ? false : !(actions == null ? void 0 : actions.value) || !(events == null ? void 0 : events.value);
+  const handleSelectChange = (handler, value) => {
+    if (handler) {
+      handler(value);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { paddingTop: "$40" },
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    /* @__PURE__ */ React.createElement(box.Box, { css: { width: 488 } }, configuration.hasConfiguration ? /* @__PURE__ */ React.createElement(
+      ConfigurationSetup.ConfigurationSetup,
+      {
+        configuration,
+        surveyName: surveyDetails.surveyName,
+        editField: editFieldId
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, index.UI_TEXT.SURVEY_NAME_LABEL), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, surveyDetails.surveyName)), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8", css: { marginTop: "$16" } }, (accounts == null ? void 0 : accounts.hasAccounts) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, index.UI_TEXT.CHOOSE_ACCOUNT_LABEL), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        value: accounts.value,
+        options: accounts.options,
+        placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
+        onChange: (value) => handleSelectChange(accounts.onChangeHandler, value),
+        size: "lg"
+      }
+    )), (events == null ? void 0 : events.hasEvents) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, index.UI_TEXT.CHOOSE_OBJECT_LABEL), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        options: events.options,
+        value: events.value,
+        placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
+        onChange: (value) => handleSelectChange(events.onChangeHandler, value),
+        size: "lg"
+      }
+    )), (actions == null ? void 0 : actions.hasActions) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, index.UI_TEXT.CHOOSE_ACTION_LABEL), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        size: "lg",
+        options: actions.options,
+        value: actions.value,
+        placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
+        onChange: (value) => handleSelectChange(actions.onChangeHandler, value)
+      }
+    )))), /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        disabled: isContinueDisabled,
+        rightIcon: /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, null),
+        css: { marginTop: "$16" },
+        onClick: () => navigateMappingPage()
+      },
+      index.UI_TEXT.CONTINUE_MAPPING_BUTTON
+    ))
+  );
+};
+
+exports.EventSetup = EventSetup;
+//# sourceMappingURL=EventSetup.js.map

package/dist/cjs/mapping/components/EventSetup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventSetup.js","sources":["../../../../src/mapping/components/EventSetup.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport {\n  Box,\n  Button,\n  Flex,\n  FormLabel,\n  Heading,\n  Select,\n  Text,\n} from \"@sparrowengg/twigs-react\";\nimport { ChevronRightIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { EventSetupProps, SelectOption, ChangeHandlerValue } from \"../types\";\nimport { ConfigurationSetup } from \"./ConfigurationSetup\";\nimport { UI_TEXT } from \"../constants\";\n\n/**\n * EventSetup component - Handles event and action selection before mapping\n */\nexport const EventSetup: React.FC<EventSetupProps> = ({\n  surveyDetails,\n  accounts,\n  events,\n  actions,\n  navigateMappingPage,\n  configuration,\n  editFieldId,\n}) => {\n  // Trigger onChange handlers for pre-selected values\n  useEffect(() => {\n    if (actions?.value) {\n      actions.onChangeHandler(actions.value);\n    }\n    if (events?.value) {\n      events.onChangeHandler(events.value);\n    }\n  }, [actions?.value, events?.value]);\n\n  const isContinueDisabled = configuration.hasConfiguration\n    ? false\n    : !actions?.value || !events?.value;\n\n  const handleSelectChange = (\n    handler: ((value: ChangeHandlerValue) => void) | undefined,\n    value: unknown\n  ): void => {\n    if (handler) {\n      handler(value as ChangeHandlerValue);\n    }\n  };\n\n  return (\n    <Flex\n      css={{ paddingTop: \"$40\" }}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Box css={{ width: 488 }}>\n        {configuration.hasConfiguration ? (\n          <ConfigurationSetup\n            configuration={configuration}\n            surveyName={surveyDetails.surveyName}\n            editField={editFieldId}\n          />\n        ) : (\n          <>\n            <Heading size=\"h5\">{configuration?.title}</Heading>\n            <Flex gap=\"$2\" css={{ marginTop: \"$4\" }}>\n              <Text size=\"sm\" css={{ color: \"$neutral500\" }}>\n                {UI_TEXT.SURVEY_NAME_LABEL}\n              </Text>\n              <Text size=\"sm\" weight=\"medium\" css={{ color: \"$neutral800\" }}>\n                {surveyDetails.surveyName}\n              </Text>\n            </Flex>\n            <Flex flexDirection=\"column\" gap=\"$8\" css={{ marginTop: \"$16\" }}>\n              {/* Accounts Dropdown */}\n              {accounts?.hasAccounts && (\n                <Flex gap=\"$2\" flexDirection=\"column\">\n                  <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                    {UI_TEXT.CHOOSE_ACCOUNT_LABEL}\n                  </FormLabel>\n                  <Select\n                    value={accounts.value}\n                    options={accounts.options}\n                    placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n                    onChange={(value: unknown) =>\n                      handleSelectChange(accounts.onChangeHandler, value)\n                    }\n                    size=\"lg\"\n                  />\n                </Flex>\n              )}\n\n              {/* Events Dropdown */}\n              {events?.hasEvents && (\n                <Flex gap=\"$2\" flexDirection=\"column\">\n                  <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                    {UI_TEXT.CHOOSE_OBJECT_LABEL}\n                  </FormLabel>\n                  <Select\n                    options={events.options}\n                    value={events.value}\n                    placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n                    onChange={(value: unknown) =>\n                      handleSelectChange(events.onChangeHandler, value)\n                    }\n                    size=\"lg\"\n                  />\n                </Flex>\n              )}\n\n              {/* Actions Dropdown */}\n              {actions?.hasActions && (\n                <Flex gap=\"$2\" flexDirection=\"column\">\n                  <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                    {UI_TEXT.CHOOSE_ACTION_LABEL}\n                  </FormLabel>\n                  <Select\n                    size=\"lg\"\n                    options={actions.options}\n                    value={actions.value}\n                    placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n                    onChange={(value: unknown) =>\n                      handleSelectChange(actions.onChangeHandler, value)\n                    }\n                  />\n                </Flex>\n              )}\n            </Flex>\n          </>\n        )}\n\n        <Button\n          size=\"lg\"\n          disabled={isContinueDisabled}\n          rightIcon={<ChevronRightIcon />}\n          css={{ marginTop: \"$16\" }}\n          onClick={() => navigateMappingPage()}\n        >\n          {UI_TEXT.CONTINUE_MAPPING_BUTTON}\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\n"],"names":["useEffect","Flex","Box","ConfigurationSetup","Heading","Text","UI_TEXT","FormLabel","Select","Button","ChevronRightIcon"],"mappings":"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"}

package/dist/cjs/mapping/components/MappingHeader.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var React = require('react');
+var arrow = require('../../commons/icons/arrow.js');
+var draftModal = require('../../commons/components/draftModal.js');
+var NamingModal = require('../../commons/components/NamingModal.js');
+var validation = require('../utils/validation.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');
+
+const MappingHeader = ({
+  hasNamingModal,
+  navigateMappingPage,
+  accounts,
+  events,
+  actions,
+  havingTypeDropdown,
+  onSaveMappingLoader,
+  hasPreviousMapping,
+  isMappingPage,
+  fields,
+  navigateEventPage,
+  onSaveHandler,
+  previousMappingHandler,
+  editFieldId,
+  draftHandler,
+  configuration
+}) => {
+  const [isDraftModalOpen, setIsDraftModalOpen] = React.useState(false);
+  const [isNamingModalOpen, setIsNamingModalOpen] = React.useState(false);
+  const isEventSetupDisabled = !(actions == null ? void 0 : actions.value) || !(events == null ? void 0 : events.value);
+  const isSaveDisabled = !validation.validateEssentialFields(fields, havingTypeDropdown);
+  const handleSaveClick = () => {
+    if (hasNamingModal) {
+      setIsNamingModalOpen(true);
+    } else {
+      onSaveHandler(editFieldId);
+    }
+  };
+  const handleDraftSave = async () => {
+    await draftHandler(index.DRAFT_CONSTANTS.MAPPING_TYPE, editFieldId == null ? void 0 : editFieldId.toString());
+    setIsDraftModalOpen(false);
+    await previousMappingHandler();
+  };
+  const handleDraftCancel = async () => {
+    await previousMappingHandler();
+    setIsDraftModalOpen(false);
+  };
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        position: "sticky",
+        width: "100%",
+        top: "1px",
+        zIndex: "99",
+        background: "#ffff",
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    isDraftModalOpen && /* @__PURE__ */ React.createElement(
+      draftModal.default,
+      {
+        onSaveHandler: handleDraftSave,
+        onCloseHandler: () => setIsDraftModalOpen(false),
+        onCancel: handleDraftCancel
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasPreviousMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          onClick: () => previousMappingHandler(),
+          color: "default",
+          icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, editFieldId ? index.UI_TEXT.EDIT_MAPPING_TITLE : index.UI_TEXT.NEW_MAPPING_TITLE)
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          css: { color: !isMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isMappingPage && navigateEventPage()
+        },
+        index.UI_TEXT.EVENT_SETUP_TITLE
+      ),
+      /* @__PURE__ */ React.createElement(arrow.default, null),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          onClick: () => navigateMappingPage(),
+          css: { color: !isEventSetupDisabled ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          disabled: isEventSetupDisabled
+        },
+        index.UI_TEXT.MAPPING_TITLE
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        disabled: isSaveDisabled,
+        onClick: handleSaveClick,
+        css: { visibility: isMappingPage ? "visible" : "hidden" }
+      },
+      editFieldId ? index.UI_TEXT.UPDATE_MAPPING_BUTTON : index.UI_TEXT.SAVE_MAPPING_BUTTON
+    ),
+    hasNamingModal && /* @__PURE__ */ React.createElement(
+      NamingModal.default,
+      {
+        editFieldId,
+        mappingLoader: onSaveMappingLoader,
+        saveHandler: () => onSaveHandler(editFieldId),
+        closeHandler: () => setIsNamingModalOpen(false),
+        value: (configuration == null ? void 0 : configuration.currentMappingName) || index.UI_TEXT.EMPTY_PLACEHOLDER,
+        setValue: (value) => {
+          var _a;
+          return (_a = configuration == null ? void 0 : configuration.setMappingName) == null ? void 0 : _a.call(configuration, value);
+        },
+        isOpen: isNamingModalOpen
+      }
+    )
+  );
+};
+
+exports.MappingHeader = MappingHeader;
+//# sourceMappingURL=MappingHeader.js.map

package/dist/cjs/mapping/components/MappingHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingHeader.js","sources":["../../../../src/mapping/components/MappingHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  Box,\n  Button,\n  Flex,\n  Heading,\n  IconButton,\n} from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon } from \"@sparrowengg/twigs-react-icons\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport DraftModal from \"../../commons/components/draftModal\";\nimport NamingModal from \"../../commons/components/NamingModal\";\nimport { MappingHeaderProps } from \"../types\";\nimport { validateEssentialFields } from \"../utils\";\nimport { UI_TEXT, DRAFT_CONSTANTS } from \"../constants\";\n\n/**\n * MappingHeader component - Header for mapping page with navigation and save functionality\n */\nexport const MappingHeader: React.FC<MappingHeaderProps> = ({\n  hasNamingModal,\n  navigateMappingPage,\n  accounts,\n  events,\n  actions,\n  havingTypeDropdown,\n  onSaveMappingLoader,\n  hasPreviousMapping,\n  isMappingPage,\n  fields,\n  navigateEventPage,\n  onSaveHandler,\n  previousMappingHandler,\n  editFieldId,\n  draftHandler,\n  configuration,\n}) => {\n  const [isDraftModalOpen, setIsDraftModalOpen] = useState(false);\n  const [isNamingModalOpen, setIsNamingModalOpen] = useState(false);\n\n  const isEventSetupDisabled = !actions?.value || !events?.value;\n  const isSaveDisabled = !validateEssentialFields(fields, havingTypeDropdown);\n\n  const handleSaveClick = (): void => {\n    if (hasNamingModal) {\n      setIsNamingModalOpen(true);\n    } else {\n      onSaveHandler(editFieldId);\n    }\n  };\n\n  const handleDraftSave = async (): Promise<void> => {\n    await draftHandler(DRAFT_CONSTANTS.MAPPING_TYPE, editFieldId?.toString());\n    setIsDraftModalOpen(false);\n    await previousMappingHandler();\n  };\n\n  const handleDraftCancel = async (): Promise<void> => {\n    await previousMappingHandler();\n    setIsDraftModalOpen(false);\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        position: \"sticky\",\n        width: \"100%\",\n        top: \"1px\",\n        zIndex: \"99\",\n        background: \"#ffff\",\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      {/* Draft Modal */}\n      {isDraftModalOpen && (\n        <DraftModal\n          onSaveHandler={handleDraftSave}\n          onCloseHandler={() => setIsDraftModalOpen(false)}\n          onCancel={handleDraftCancel}\n        />\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={() => previousMappingHandler()}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">\n          {editFieldId ? UI_TEXT.EDIT_MAPPING_TITLE : UI_TEXT.NEW_MAPPING_TITLE}\n        </Heading>\n      </Flex>\n\n      {/* Navigation Breadcrumb */}\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isMappingPage && navigateEventPage()}\n        >\n          {UI_TEXT.EVENT_SETUP_TITLE}\n        </Button>\n        <Arrow />\n        <Button\n          onClick={() => navigateMappingPage()}\n          css={{ color: !isEventSetupDisabled ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          disabled={isEventSetupDisabled}\n        >\n          {UI_TEXT.MAPPING_TITLE}\n        </Button>\n      </Flex>\n\n      {/* Save Button */}\n      <Button\n        size=\"lg\"\n        disabled={isSaveDisabled}\n        onClick={handleSaveClick}\n        css={{ visibility: isMappingPage ? \"visible\" : \"hidden\" }}\n      >\n        {editFieldId ? UI_TEXT.UPDATE_MAPPING_BUTTON : UI_TEXT.SAVE_MAPPING_BUTTON}\n      </Button>\n\n      {/* Naming Modal */}\n      {hasNamingModal && (\n        <NamingModal\n          editFieldId={editFieldId}\n          mappingLoader={onSaveMappingLoader}\n          saveHandler={() => onSaveHandler(editFieldId)}\n          closeHandler={() => setIsNamingModalOpen(false)}\n          value={configuration?.currentMappingName || UI_TEXT.EMPTY_PLACEHOLDER}\n          setValue={(value: string) => configuration?.setMappingName?.(value)}\n          isOpen={isNamingModalOpen}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["useState","validateEssentialFields","DRAFT_CONSTANTS","Flex","DraftModal","IconButton","ArrowLeftIcon","Heading","UI_TEXT","Button","Arrow","NamingModal"],"mappings":"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"}

package/dist/cjs/mapping/components/custom-menu.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var index = require('../constants/index.js');
 var indexA301f526_esm = require('../../node_modules/react-select/dist/index-a301f526.esm.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');
@@ -40,7 +41,7 @@ const CustomMenu = (props) => {
         onClick: () => {
           var _a, _b;
           (_a = props.selectProps) == null ? void 0 : _a.noneOptionHandler({
-            label: "None",
+            label: index.UI_TEXT.NONE_OPTION,
             value: "NONE"
           });
           (_b = props.selectProps) == null ? void 0 : _b.onMenuClose();
@@ -48,7 +49,7 @@ const CustomMenu = (props) => {
         size: "sm",
         css: { padding: "$3 $6", color: "$neutral900", cursor: "pointer" }
       },
-      "None"
+      index.UI_TEXT.NONE_OPTION
     )
   ), props.children, /* @__PURE__ */ React.createElement(
     flex.Flex,
@@ -64,7 +65,7 @@ const CustomMenu = (props) => {
       alignItems: "center",
       justifyContent: "center"
     },
-    /* @__PURE__ */ React.createElement(text.Text, { size: "xs", css: { color: "$neutral600", lineHeight: "$xs" } }, "Select the right data type for the mapping to prevent errors when sharing value.")
+    /* @__PURE__ */ React.createElement(text.Text, { size: "xs", css: { color: "$neutral600", lineHeight: "$xs" } }, index.UI_TEXT.DATA_TYPE_HINT)
   ));
 };
 

package/dist/cjs/mapping/components/custom-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-menu.js","sources":["../../../../src/mapping/components/custom-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { components, MenuProps } from \"react-select\";\nimport { Box, Flex, Text } from \"@sparrowengg/twigs-react\";\nimport { PlusIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { SelectOption } from \"../../commons/types/enhanced\";\n\ntype CustomMenuProps = MenuProps<SelectOption> & {\n  selectProps: {\n    noneOptionHandler: (option: SelectOption) => void;\n    onMenuClose: () => void;\n    customOnClick: () => void;\n  };\n};\n\nconst CustomMenu: React.FC<CustomMenuProps> = (props) => {\n  return (\n    <components.Menu {...props}>\n      <Box\n        css={{\n          paddingBottom: \"$4\",\n          marginBlock: \"$6 $4\",\n          borderBottom: \"$borderWidths$xs solid $neutral100\",\n        }}\n      >\n        <Text\n          onClick={() => {\n            props.selectProps?.noneOptionHandler({\n              label: \"None\",\n              value: \"NONE\",\n            });\n            props.selectProps?.onMenuClose();\n          }}\n          size=\"sm\"\n          css={{ padding: \"$3 $6\", color: \"$neutral900\", cursor: \"pointer\" }}\n        >\n          None\n        </Text>\n      </Box>\n      {props.children}\n      <Flex\n        onClick={() => props?.selectProps?.customOnClick()}\n        css={{\n          background: \"rgba(100, 116, 139, 0.06)\",\n          padding: \"$6 $8\",\n        }}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n      >\n        <Text size=\"xs\" css={{ color: \"$neutral600\", lineHeight: \"$xs\" }}>\n          Select the right data type for the mapping to prevent errors when\n          sharing value.\n        </Text>\n      </Flex>\n    </components.Menu>\n  );\n};\n\nexport default CustomMenu;"],"names":["components","Box","Text","Flex"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAcM,MAAA,UAAA,GAAwC,CAAC,KAAU,KAAA;AACvD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,mBAAA,CAAW,IAAX,EAAA,cAAA,CAAA,EAAA,EAAoB,KACnB,CAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,aAAe,EAAA,IAAA;AAAA,QACf,WAAa,EAAA,OAAA;AAAA,QACb,YAAc,EAAA,oCAAA;AAAA,OAChB;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,SAAS,MAAM;AAzBzB,UAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA0BY,UAAM,CAAA,EAAA,GAAA,KAAA,CAAA,WAAA,KAAN,mBAAmB,iBAAkB,CAAA;AAAA,YACnC,KAAO,EAAA,MAAA;AAAA,YACP,KAAO,EAAA,MAAA;AAAA,WACT,CAAA,CAAA;AACA,UAAA,CAAA,EAAA,GAAA,KAAA,CAAM,gBAAN,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,EAAA,CAAA;AAAA,SACrB;AAAA,QACA,IAAK,EAAA,IAAA;AAAA,QACL,KAAK,EAAE,OAAA,EAAS,SAAS,KAAO,EAAA,aAAA,EAAe,QAAQ,SAAU,EAAA;AAAA,OAAA;AAAA,MAClE,MAAA;AAAA,KAED;AAAA,GACF,EACC,MAAM,QACP,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,SAAS,MAAG;AAxCpB,QAAA,IAAA,EAAA,CAAA;AAwCuB,QAAA,OAAA,CAAA,EAAA,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,gBAAP,IAAoB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAA,EAAA,CAAA;AAAA,OAAA;AAAA,MACnC,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,2BAAA;AAAA,QACZ,OAAS,EAAA,OAAA;AAAA,OACX;AAAA,MACA,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,QAAA;AAAA,KAAA;AAAA,oBAEf,KAAA,CAAA,aAAA,CAACD,SAAK,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAA,EAAO,aAAe,EAAA,UAAA,EAAY,KAAM,EAAA,EAAA,EAAG,kFAGlE,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"custom-menu.js","sources":["../../../../src/mapping/components/custom-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { components, MenuProps } from \"react-select\";\nimport { Box, Flex, Text } from \"@sparrowengg/twigs-react\";\nimport { PlusIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { SelectOption } from \"../../commons/types/enhanced\";\nimport { UI_TEXT } from \"../constants\";\n\ntype CustomMenuProps = MenuProps<SelectOption> & {\n  selectProps: {\n    noneOptionHandler: (option: SelectOption) => void;\n    onMenuClose: () => void;\n    customOnClick: () => void;\n  };\n};\n\nconst CustomMenu: React.FC<CustomMenuProps> = (props) => {\n  return (\n    <components.Menu {...props}>\n      <Box\n        css={{\n          paddingBottom: \"$4\",\n          marginBlock: \"$6 $4\",\n          borderBottom: \"$borderWidths$xs solid $neutral100\",\n        }}\n      >\n        <Text\n          onClick={() => {\n            props.selectProps?.noneOptionHandler({\n              label: UI_TEXT.NONE_OPTION,\n              value: \"NONE\",\n            });\n            props.selectProps?.onMenuClose();\n          }}\n          size=\"sm\"\n          css={{ padding: \"$3 $6\", color: \"$neutral900\", cursor: \"pointer\" }}\n        >\n          {UI_TEXT.NONE_OPTION}\n        </Text>\n      </Box>\n      {props.children}\n      <Flex\n        onClick={() => props?.selectProps?.customOnClick()}\n        css={{\n          background: \"rgba(100, 116, 139, 0.06)\",\n          padding: \"$6 $8\",\n        }}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n      >\n        <Text size=\"xs\" css={{ color: \"$neutral600\", lineHeight: \"$xs\" }}>\n          {UI_TEXT.DATA_TYPE_HINT}\n        </Text>\n      </Flex>\n    </components.Menu>\n  );\n};\n\nexport default CustomMenu;"],"names":["components","Box","Text","UI_TEXT","Flex"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAeM,MAAA,UAAA,GAAwC,CAAC,KAAU,KAAA;AACvD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,mBAAA,CAAW,IAAX,EAAA,cAAA,CAAA,EAAA,EAAoB,KACnB,CAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,aAAe,EAAA,IAAA;AAAA,QACf,WAAa,EAAA,OAAA;AAAA,QACb,YAAc,EAAA,oCAAA;AAAA,OAChB;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,SAAS,MAAM;AA1BzB,UAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA2BY,UAAM,CAAA,EAAA,GAAA,KAAA,CAAA,WAAA,KAAN,mBAAmB,iBAAkB,CAAA;AAAA,YACnC,OAAOC,aAAQ,CAAA,WAAA;AAAA,YACf,KAAO,EAAA,MAAA;AAAA,WACT,CAAA,CAAA;AACA,UAAA,CAAA,EAAA,GAAA,KAAA,CAAM,gBAAN,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,EAAA,CAAA;AAAA,SACrB;AAAA,QACA,IAAK,EAAA,IAAA;AAAA,QACL,KAAK,EAAE,OAAA,EAAS,SAAS,KAAO,EAAA,aAAA,EAAe,QAAQ,SAAU,EAAA;AAAA,OAAA;AAAA,MAEhEA,aAAQ,CAAA,WAAA;AAAA,KACX;AAAA,GACF,EACC,MAAM,QACP,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,SAAS,MAAG;AAzCpB,QAAA,IAAA,EAAA,CAAA;AAyCuB,QAAA,OAAA,CAAA,EAAA,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,gBAAP,IAAoB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAA,EAAA,CAAA;AAAA,OAAA;AAAA,MACnC,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,2BAAA;AAAA,QACZ,OAAS,EAAA,OAAA;AAAA,OACX;AAAA,MACA,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,QAAA;AAAA,KAAA;AAAA,oBAEd,KAAA,CAAA,aAAA,CAAAF,SAAA,EAAA,EAAK,IAAK,EAAA,IAAA,EAAK,GAAK,EAAA,EAAE,KAAO,EAAA,aAAA,EAAe,UAAY,EAAA,KAAA,EACtD,EAAA,EAAAC,aAAA,CAAQ,cACX,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}