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

package/dist/es/dynamic-mapping/components/CustomAddNewSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomAddNewSelect.js","sources":["../../../../src/dynamic-mapping/components/CustomAddNewSelect.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  Chip,\n  Flex,\n  Select,\n  Text,\n  Tooltip,\n} from '@sparrowengg/twigs-react';\nimport { PlusIcon, TickCircleFillIcon } from '@sparrowengg/twigs-react-icons';\nimport { components, OptionProps, SingleValueProps } from 'react-select';\nimport { ConfigurationField } from '../types';\nimport { ADD_NEW_OPTION_VALUE, UI_TEXT, FONT_FAMILIES } from '../constants';\n\ninterface CustomAddNewSelectProps {\n  field: ConfigurationField;\n}\n\nexport const CustomAddNewSelect: React.FC<CustomAddNewSelectProps> = ({ field }) => {\n  return (\n    <Select\n      isDisabled={field?.disabled}\n      placeholder={field.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}\n      onChange={(value) => {\n        field.onChangeHandler({\n          id: field?.id ?? field?.label,\n          value: value,\n        });\n      }}\n      options={field.options}\n    />\n  );\n};\n\nconst CustomShareOption: React.FC<OptionProps<any>> = (props) => {\n  if (props.data.value === ADD_NEW_OPTION_VALUE) {\n    return (\n      <Tooltip\n        content={props.data.tooltip || ''}\n        css={{\n          zIndex: 999999999,\n          fontFamily: FONT_FAMILIES.DM_SANS_IMPORTANT,\n        }}\n      >\n        <Box>\n          <components.Option {...props}>\n            <Flex\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              css={{ cursor: 'pointer', zIndex: 999999999 }}\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=\"#4A9CA6\" />\n                {props.data.label || UI_TEXT.ADD_ACCOUNT}\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: 999999999 }}\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}\n          </Chip>\n        )}\n      </Flex>\n    </components.Option>\n  );\n};\n\nconst CustomSingleValue: React.FC<SingleValueProps<any>> = (props) => {\n  if (props.data.value === ADD_NEW_OPTION_VALUE) {\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"],"names":["React"],"mappings":"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"}

package/dist/es/dynamic-mapping/components/CustomDropdown.js

@@ -0,0 +1,365 @@
+import React__default, { useState, useEffect } from 'react';
+import { parseDate as $fae977aafc393c5c$export$6b862160d295c8e } from '../../node_modules/@internationalized/date/dist/string.js';
+import dayjs from '../../node_modules/dayjs/dayjs.min.js';
+import { dynamicDateOptions } from '../../commons/constants/index.js';
+import { UI_TEXT, CSS_CLASSES, FONT_FAMILIES, CONFIGURATION_FIELD_IDS, DATE_TYPES } from '../constants/index.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from '../../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js';
+import { Input } from '../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js';
+import { ChevronDownIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.js';
+import { Tooltip } from '../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.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 { Text } from '../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { Calendar } from '../../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js';
+import { RadioGroup, Radio } from '../../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.js';
+import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const CustomDropdown = ({
+  data,
+  onChangeHandler,
+  value,
+  editField,
+  isDisabled,
+  placeholder
+}) => {
+  var _a, _b;
+  const [date, setDate] = useState(() => {
+    try {
+      return value ? $fae977aafc393c5c$export$6b862160d295c8e(dayjs(value).format("YYYY-MM-DD")) : $fae977aafc393c5c$export$6b862160d295c8e(dayjs().format("YYYY-MM-DD"));
+    } catch (e) {
+      return $fae977aafc393c5c$export$6b862160d295c8e(dayjs().format("YYYY-MM-DD"));
+    }
+  });
+  const [days, setDays] = useState((_b = (_a = value == null ? void 0 : value.value) == null ? void 0 : _a.value) != null ? _b : 0);
+  const [open, setOpen] = useState(false);
+  const [hasBeenOpened, setHasBeenOpened] = useState(false);
+  useEffect(() => {
+    if (!(editField == null ? void 0 : editField.id) && !hasBeenOpened && !isDisabled) {
+      setOpen(true);
+      setHasBeenOpened(true);
+    }
+  }, [editField == null ? void 0 : editField.id, hasBeenOpened, isDisabled]);
+  const getDisplayValue = () => {
+    var _a2, _b2, _c;
+    if ((value == null ? void 0 : value.type) === DATE_TYPES.DATE) {
+      return `${value == null ? void 0 : value.label} > ${value == null ? void 0 : value.value}`;
+    }
+    if ((value == null ? void 0 : value.type) === DATE_TYPES.DATE_RANGE) {
+      const rangeValue = ((_a2 = value == null ? void 0 : value.value) == null ? void 0 : _a2.type) === DATE_TYPES.CUSTOM ? `${(_b2 = value == null ? void 0 : value.value) == null ? void 0 : _b2.value} ${UI_TEXT.DAYS.toLowerCase()}` : (_c = value == null ? void 0 : value.value) == null ? void 0 : _c.label;
+      return `${value == null ? void 0 : value.label} - ${rangeValue}`;
+    }
+    return value == null ? void 0 : value.label;
+  };
+  return /* @__PURE__ */ React__default.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true, disabled: isDisabled }, /* @__PURE__ */ React__default.createElement(
+    Input,
+    {
+      size: "lg",
+      rightIcon: /* @__PURE__ */ React__default.createElement(ChevronDownIcon, { size: 30, color: "#6A6A6A" }),
+      placeholder: placeholder || UI_TEXT.CHOOSE,
+      value: getDisplayValue(),
+      css: {
+        "& input": {
+          textAlign: "left !important"
+        }
+      }
+    }
+  )), /* @__PURE__ */ React__default.createElement(
+    DropdownMenuContent,
+    {
+      css: {
+        width: "488px",
+        marginBlockStart: "$2",
+        p: {
+          margin: "0px !important"
+        },
+        zIndex: "99 !important"
+      },
+      className: CSS_CLASSES.DM_SANS
+    },
+    data.map((option) => {
+      var _a2;
+      if (!option.type) {
+        return /* @__PURE__ */ React__default.createElement(
+          Tooltip,
+          {
+            key: option.id,
+            content: option.tooltip || "",
+            css: {
+              zIndex: "9999999 !important",
+              fontFamily: FONT_FAMILIES.DM_SANS_IMPORTANT
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(
+            DropdownMenuItem,
+            {
+              disabled: option == null ? void 0 : option.disabled,
+              css: {
+                cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important",
+                background: (value == null ? void 0 : value.type) === option.type ? "#4A9CA626 !important" : "transparent !important"
+              },
+              onClick: () => onChangeHandler({
+                id: CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_TYPE,
+                value: option
+              })
+            },
+            /* @__PURE__ */ React__default.createElement(
+              Flex,
+              {
+                justifyContent: "space-between",
+                alignItems: "center",
+                css: {
+                  width: "100%"
+                }
+              },
+              /* @__PURE__ */ React__default.createElement(Flex, { justifyContent: "center", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(
+                Text,
+                {
+                  size: "sm",
+                  weight: "regular",
+                  css: { color: "$neutral900" }
+                },
+                option.label
+              ), /* @__PURE__ */ React__default.createElement(
+                Text,
+                {
+                  size: "xs",
+                  weight: "regular",
+                  css: { color: "$neutral700" }
+                },
+                option.description
+              ))
+            )
+          ))
+        );
+      }
+      return /* @__PURE__ */ React__default.createElement(
+        Tooltip,
+        {
+          key: option.id,
+          content: option.tooltip || "",
+          css: {
+            fontFamily: FONT_FAMILIES.DM_SANS_IMPORTANT,
+            zIndex: "9999999 !important"
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(DropdownMenuSub, null, /* @__PURE__ */ React__default.createElement(
+          DropdownMenuSubTrigger,
+          {
+            disabled: option == null ? void 0 : option.disabled,
+            css: {
+              cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important",
+              background: (value == null ? void 0 : value.type) === option.type ? "#4A9CA626 !important" : "transparent !important"
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(
+            Flex,
+            {
+              justifyContent: "space-between",
+              alignItems: "center",
+              css: {
+                width: "100%"
+              }
+            },
+            /* @__PURE__ */ React__default.createElement(
+              Flex,
+              {
+                css: { cursor: "pointer" },
+                justifyContent: "center",
+                flexDirection: "column"
+              },
+              /* @__PURE__ */ React__default.createElement(
+                Text,
+                {
+                  size: "sm",
+                  weight: "regular",
+                  css: { color: "$neutral900" }
+                },
+                option.label
+              ),
+              /* @__PURE__ */ React__default.createElement(
+                Text,
+                {
+                  size: "xs",
+                  weight: "regular",
+                  css: { color: "$neutral700" }
+                },
+                option.description
+              )
+            )
+          )
+        ), /* @__PURE__ */ React__default.createElement(
+          DropdownMenuSubContent,
+          {
+            sideOffset: 10,
+            alignOffset: -5,
+            css: __spreadProps(__spreadValues({
+              padding: "0px !important",
+              maxHeight: "500px",
+              minWidth: "224px",
+              maxWidth: "260px",
+              margin: "0px !important"
+            }, option.type === "date" && {
+              border: "none !important"
+            }), {
+              p: {
+                margin: "0px !important"
+              },
+              marginBlockEnd: "$10 !important"
+            }),
+            className: CSS_CLASSES.DM_SANS
+          },
+          option.type === DATE_TYPES.DATE && /* @__PURE__ */ React__default.createElement(
+            Calendar,
+            __spreadProps(__spreadValues(__spreadValues({
+              footerActionText: UI_TEXT.APPLY,
+              size: "md",
+              value: date,
+              onChange: setDate
+            }, (option == null ? void 0 : option.minValue) && {
+              minValue: $fae977aafc393c5c$export$6b862160d295c8e(option == null ? void 0 : option.minValue)
+            }), (option == null ? void 0 : option.maxValue) && {
+              maxValue: $fae977aafc393c5c$export$6b862160d295c8e(option == null ? void 0 : option.maxValue)
+            }), {
+              footerAction: () => {
+                onChangeHandler({
+                  id: CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_TYPE,
+                  value: __spreadProps(__spreadValues({}, option), {
+                    value: dayjs(date.toString()).format("MMM D, YYYY")
+                  })
+                });
+                setOpen(false);
+              }
+            })
+          ),
+          option.type === DATE_TYPES.DATE_RANGE && /* @__PURE__ */ React__default.createElement(
+            Flex,
+            {
+              css: {
+                paddingInline: "$4 !important",
+                paddingBlock: "$8 !important"
+              },
+              flexDirection: "column",
+              gap: "$4"
+            },
+            /* @__PURE__ */ React__default.createElement(
+              RadioGroup,
+              {
+                defaultValue: value == null ? void 0 : value.value,
+                onChange: (selectedValue) => {
+                  var _a3;
+                  onChangeHandler({
+                    id: CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_TYPE,
+                    value: __spreadProps(__spreadValues({}, option), {
+                      value: {
+                        type: selectedValue,
+                        value: selectedValue,
+                        label: (_a3 = dynamicDateOptions.find(
+                          (opt) => opt.value === selectedValue
+                        )) == null ? void 0 : _a3.label
+                      }
+                    })
+                  });
+                }
+              },
+              dynamicDateOptions.map((dateOption) => /* @__PURE__ */ React__default.createElement(
+                Box,
+                {
+                  key: dateOption.value,
+                  css: {
+                    padding: "$4 !important"
+                  }
+                },
+                /* @__PURE__ */ React__default.createElement(Radio, { value: dateOption.value }, dateOption.label)
+              ))
+            ),
+            ((_a2 = value == null ? void 0 : value.value) == null ? void 0 : _a2.type) === DATE_TYPES.CUSTOM && /* @__PURE__ */ React__default.createElement(
+              Box,
+              {
+                css: {
+                  paddingRight: "$4 !important",
+                  position: "relative"
+                }
+              },
+              /* @__PURE__ */ React__default.createElement(
+                Input,
+                {
+                  size: "md",
+                  variant: "filled",
+                  value: days,
+                  onChange: (e) => setDays(e.target.value)
+                }
+              ),
+              /* @__PURE__ */ React__default.createElement(
+                Text,
+                {
+                  css: {
+                    position: "absolute",
+                    right: "$8",
+                    top: "$3"
+                  }
+                },
+                UI_TEXT.DAYS
+              )
+            ),
+            /* @__PURE__ */ React__default.createElement(
+              Flex,
+              {
+                justifyContent: "space-between",
+                css: {
+                  borderBlockStart: "$borderWidths$xs, solid, $neutral200 !important",
+                  padding: "$8"
+                }
+              },
+              /* @__PURE__ */ React__default.createElement(Button, { size: "sm", variant: "ghost", color: "secondary" }, UI_TEXT.CANCEL),
+              /* @__PURE__ */ React__default.createElement(
+                Button,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  color: "primary",
+                  onClick: () => {
+                    var _a3, _b2;
+                    onChangeHandler({
+                      id: CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_TYPE,
+                      value: __spreadProps(__spreadValues({}, option), {
+                        value: {
+                          type: (_a3 = value == null ? void 0 : value.value) == null ? void 0 : _a3.type,
+                          value: days,
+                          label: (_b2 = value == null ? void 0 : value.value) == null ? void 0 : _b2.label
+                        }
+                      })
+                    });
+                    setOpen(false);
+                  }
+                },
+                UI_TEXT.APPLY
+              )
+            )
+          )
+        )))
+      );
+    })
+  ));
+};
+
+export { CustomDropdown };
+//# sourceMappingURL=CustomDropdown.js.map

package/dist/es/dynamic-mapping/components/CustomDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomDropdown.js","sources":["../../../../src/dynamic-mapping/components/CustomDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Box,\n  Button,\n  Flex,\n  Input,\n  Radio,\n  RadioGroup,\n  Text,\n  Tooltip,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  Calendar,\n} from '@sparrowengg/twigs-react';\nimport { ChevronDownIcon } from '@sparrowengg/twigs-react-icons';\nimport { parseDate, DateValue } from '@internationalized/date';\nimport dayjs from 'dayjs';\nimport { CustomDropdownProps } from '../types';\nimport { dynamicDateOptions } from '../../commons/constants';\nimport { CONFIGURATION_FIELD_IDS, UI_TEXT, DATE_TYPES, CSS_CLASSES, FONT_FAMILIES } from '../constants';\n\nexport const CustomDropdown: React.FC<CustomDropdownProps> = ({\n  data,\n  onChangeHandler,\n  value,\n  editField,\n  isDisabled,\n  placeholder,\n}) => {\n  const [date, setDate] = useState<DateValue>(() => {\n    try {\n      return value\n        ? parseDate(dayjs(value).format('YYYY-MM-DD'))\n        : parseDate(dayjs().format('YYYY-MM-DD'));\n    } catch (e) {\n      return parseDate(dayjs().format('YYYY-MM-DD'));\n    }\n  });\n  const [days, setDays] = useState((value?.value as any)?.value ?? 0);\n  const [open, setOpen] = useState(false);\n  const [hasBeenOpened, setHasBeenOpened] = useState(false);\n\n  useEffect(() => {\n    if (!editField?.id && !hasBeenOpened && !isDisabled) {\n      setOpen(true);\n      setHasBeenOpened(true);\n    }\n  }, [editField?.id, hasBeenOpened, isDisabled]);\n\n  const getDisplayValue = () => {\n    if (value?.type === DATE_TYPES.DATE) {\n      return `${value?.label} > ${value?.value}`;\n    }\n    if (value?.type === DATE_TYPES.DATE_RANGE) {\n      const rangeValue = (value?.value as any)?.type === DATE_TYPES.CUSTOM\n        ? `${(value?.value as any)?.value} ${UI_TEXT.DAYS.toLowerCase()}`\n        : (value?.value as any)?.label;\n      return `${value?.label} - ${rangeValue}`;\n    }\n    return value?.label;\n  };\n\n  return (\n    <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>\n      <DropdownMenuTrigger asChild disabled={isDisabled}>\n        <Input\n          size=\"lg\"\n          rightIcon={<ChevronDownIcon size={30} color=\"#6A6A6A\" />}\n          placeholder={placeholder || UI_TEXT.CHOOSE}\n          value={getDisplayValue()}\n          css={{\n            '& input': {\n              textAlign: 'left !important',\n            },\n          }}\n        />\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        css={{\n          width: '488px',\n          marginBlockStart: '$2',\n          p: {\n            margin: '0px !important',\n          },\n          zIndex: '99 !important',\n        }}\n        className={CSS_CLASSES.DM_SANS}\n      >\n        {data.map((option) => {\n          if (!option.type) {\n            return (\n              <Tooltip\n                key={option.id}\n                content={option.tooltip || ''}\n                css={{\n                  zIndex: '9999999 !important',\n                  fontFamily: FONT_FAMILIES.DM_SANS_IMPORTANT,\n                }}\n              >\n                <Box>\n                  <DropdownMenuItem\n                    disabled={option?.disabled}\n                    css={{\n                      cursor: option?.disabled\n                        ? 'not-allowed !important'\n                        : 'pointer !important',\n                      background:\n                        value?.type === option.type\n                          ? '#4A9CA626 !important'\n                          : 'transparent !important',\n                    }}\n                    onClick={() =>\n                      onChangeHandler({\n                        id: CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_TYPE,\n                        value: option,\n                      })\n                    }\n                  >\n                    <Flex\n                      justifyContent=\"space-between\"\n                      alignItems=\"center\"\n                      css={{\n                        width: '100%',\n                      }}\n                    >\n                      <Flex justifyContent=\"center\" flexDirection=\"column\">\n                        <Text\n                          size=\"sm\"\n                          weight=\"regular\"\n                          css={{ color: '$neutral900' }}\n                        >\n                          {option.label}\n                        </Text>\n                        <Text\n                          size=\"xs\"\n                          weight=\"regular\"\n                          css={{ color: '$neutral700' }}\n                        >\n                          {option.description}\n                        </Text>\n                      </Flex>\n                    </Flex>\n                  </DropdownMenuItem>\n                </Box>\n              </Tooltip>\n            );\n          }\n\n          return (\n            <Tooltip\n              key={option.id}\n              content={option.tooltip || ''}\n              css={{\n                fontFamily: FONT_FAMILIES.DM_SANS_IMPORTANT,\n                zIndex: '9999999 !important',\n              }}\n            >\n              <Box>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger\n                    disabled={option?.disabled}\n                    css={{\n                      cursor: option?.disabled\n                        ? 'not-allowed !important'\n                        : 'pointer !important',\n                      background:\n                        value?.type === option.type\n                          ? '#4A9CA626 !important'\n                          : 'transparent !important',\n                    }}\n                  >\n                    <Flex\n                      justifyContent=\"space-between\"\n                      alignItems=\"center\"\n                      css={{\n                        width: '100%',\n                      }}\n                    >\n                      <Flex\n                        css={{ cursor: 'pointer' }}\n                        justifyContent=\"center\"\n                        flexDirection=\"column\"\n                      >\n                        <Text\n                          size=\"sm\"\n                          weight=\"regular\"\n                          css={{ color: '$neutral900' }}\n                        >\n                          {option.label}\n                        </Text>\n                        <Text\n                          size=\"xs\"\n                          weight=\"regular\"\n                          css={{ color: '$neutral700' }}\n                        >\n                          {option.description}\n                        </Text>\n                      </Flex>\n                    </Flex>\n                  </DropdownMenuSubTrigger>\n\n                  <DropdownMenuSubContent\n                    sideOffset={10}\n                    alignOffset={-5}\n                    css={{\n                      padding: '0px !important',\n                      maxHeight: '500px',\n                      minWidth: '224px',\n                      maxWidth: '260px',\n                      margin: '0px !important',\n                      ...(option.type === 'date' && {\n                        border: 'none !important',\n                      }),\n                      p: {\n                        margin: '0px !important',\n                      },\n                      marginBlockEnd: '$10 !important',\n                    }}\n                    className={CSS_CLASSES.DM_SANS}\n                  >\n                    {option.type === DATE_TYPES.DATE && (\n                      <Calendar\n                        footerActionText={UI_TEXT.APPLY}\n                        size=\"md\"\n                        value={date}\n                        onChange={setDate}\n                        {...(option?.minValue && {\n                          minValue: parseDate(option?.minValue),\n                        })}\n                        {...(option?.maxValue && {\n                          maxValue: parseDate(option?.maxValue),\n                        })}\n                        footerAction={() => {\n                          onChangeHandler({\n                            id: CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_TYPE,\n                            value: {\n                              ...option,\n                              value: dayjs(date.toString()).format('MMM D, YYYY'),\n                            },\n                          });\n                          setOpen(false);\n                        }}\n                      />\n                    )}\n                    {option.type === DATE_TYPES.DATE_RANGE && (\n                      <Flex\n                        css={{\n                          paddingInline: '$4 !important',\n                          paddingBlock: '$8 !important',\n                        }}\n                        flexDirection=\"column\"\n                        gap=\"$4\"\n                      >\n                        <RadioGroup\n                          defaultValue={(value?.value as any)}\n                          onChange={(selectedValue) => {\n                            onChangeHandler({\n                              id: CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_TYPE,\n                              value: {\n                                ...option,\n                                value: {\n                                  type: selectedValue,\n                                  value: selectedValue,\n                                  label: dynamicDateOptions.find(\n                                    (opt) => opt.value === selectedValue\n                                  )?.label,\n                                },\n                              },\n                            });\n                          }}\n                        >\n                          {dynamicDateOptions.map((dateOption) => (\n                            <Box\n                              key={dateOption.value}\n                              css={{\n                                padding: '$4 !important',\n                              }}\n                            >\n                              <Radio value={dateOption.value}>\n                                {dateOption.label}\n                              </Radio>\n                            </Box>\n                          ))}\n                        </RadioGroup>\n                        {(value?.value as any)?.type === DATE_TYPES.CUSTOM && (\n                          <Box\n                            css={{\n                              paddingRight: '$4 !important',\n                              position: 'relative',\n                            }}\n                          >\n                            <Input\n                              size=\"md\"\n                              variant=\"filled\"\n                              value={days}\n                              onChange={(e) =>\n                                setDays((e.target as HTMLInputElement).value)\n                              }\n                            />\n                            <Text\n                              css={{\n                                position: 'absolute',\n                                right: '$8',\n                                top: '$3',\n                              }}\n                            >\n                              {UI_TEXT.DAYS}\n                            </Text>\n                          </Box>\n                        )}\n\n                        <Flex\n                          justifyContent=\"space-between\"\n                          css={{\n                            borderBlockStart:\n                              '$borderWidths$xs, solid, $neutral200 !important',\n                            padding: '$8',\n                          }}\n                        >\n                          <Button size=\"sm\" variant=\"ghost\" color=\"secondary\">\n                            {UI_TEXT.CANCEL}\n                          </Button>\n                          <Button\n                            size=\"sm\"\n                            variant=\"ghost\"\n                            color=\"primary\"\n                            onClick={() => {\n                              onChangeHandler({\n                                id: CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_TYPE,\n                                value: {\n                                  ...option,\n                                  value: {\n                                    type: (value?.value as any)?.type,\n                                    value: days,\n                                    label: (value?.value as any)?.label,\n                                  },\n                                },\n                              });\n                              setOpen(false);\n                            }}\n                          >\n                            {UI_TEXT.APPLY}\n                          </Button>\n                        </Flex>\n                      </Flex>\n                    )}\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </Box>\n            </Tooltip>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n\n"],"names":["parseDate","_a","_b","React"],"mappings":"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"}

package/dist/es/dynamic-mapping/components/MappingHeader.js

@@ -0,0 +1,228 @@
+import React__default, { useState, useCallback } from 'react';
+import EditConfirmation from '../../commons/components/edit-confirmation.js';
+import NamingModal from '../../commons/components/NamingModal.js';
+import ArrowIcon from '../../commons/icons/arrow.js';
+import { hasAnyEnabledFields, hasEmptyConfigurationFields, hasResponseImportType } from '../utils/index.js';
+import { MAPPING_TYPES, IMPORT_METHODS, CONFIGURATION_FIELD_IDS, UI_TEXT } from '../constants/index.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';
+
+const MappingHeader = ({
+  hasNamingModal,
+  isEditConfirmationOpen,
+  editField,
+  importResponse,
+  hasExistingMapping,
+  ssMappingData,
+  isMappingPage,
+  navigateConfigPage,
+  onSaveHandler,
+  previousMappingHandler,
+  saveConfiguration,
+  configuration,
+  setIsEditConfirmationOpen,
+  hasFieldsChanged,
+  mappingType,
+  essentialFields,
+  commonFields
+}) => {
+  var _a;
+  const [isNamingModalOpen, setIsNamingModalOpen] = useState(false);
+  const isButtonDisabled = useCallback(() => {
+    var _a2, _b, _c;
+    if (isMappingPage) {
+      if (mappingType === MAPPING_TYPES.MULTI) {
+        return !(essentialFields == null ? void 0 : essentialFields.length) ? commonFields == null ? void 0 : commonFields.every(
+          (field) => !(field == null ? void 0 : field.integrationField) && !(field == null ? void 0 : field.surveySparrowField)
+        ) : essentialFields == null ? void 0 : essentialFields.some(
+          (field) => !(field == null ? void 0 : field.surveySparrowField)
+        );
+      }
+      if (editField == null ? void 0 : editField.id) {
+        return !hasFieldsChanged;
+      }
+      if (((_a2 = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a2.ImportMethod) === IMPORT_METHODS.SEND_ALL) {
+        return !hasAnyEnabledFields(ssMappingData);
+      } else {
+        return !hasAnyEnabledFields(ssMappingData);
+      }
+    } else {
+      const allFieldsDisabled = hasEmptyConfigurationFields(
+        configuration == null ? void 0 : configuration.configurationFields
+      );
+      const hasResponseImportSettings = (_c = (_b = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _b.find(
+        (field) => (field == null ? void 0 : field.id) === CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_SETTINGS
+      )) == null ? void 0 : _c.value;
+      if (hasResponseImportSettings) {
+        return allFieldsDisabled || !hasResponseImportType(configuration == null ? void 0 : configuration.configuredFields);
+      }
+      return allFieldsDisabled;
+    }
+  }, [
+    isMappingPage,
+    mappingType,
+    essentialFields,
+    commonFields,
+    editField == null ? void 0 : editField.id,
+    hasFieldsChanged,
+    (_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.ImportMethod,
+    ssMappingData,
+    configuration
+  ]);
+  const isMappingPageDisabled = useCallback(() => {
+    var _a2, _b;
+    const allFieldsDisabled = hasEmptyConfigurationFields(
+      configuration == null ? void 0 : configuration.configurationFields
+    );
+    const hasResponseImportSettings = (_b = (_a2 = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _a2.find(
+      (field) => (field == null ? void 0 : field.id) === CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_SETTINGS
+    )) == null ? void 0 : _b.value;
+    if (hasResponseImportSettings) {
+      return allFieldsDisabled || !hasResponseImportType(configuration == null ? void 0 : configuration.configuredFields);
+    }
+    return allFieldsDisabled;
+  }, [configuration]);
+  const handleSaveClick = () => {
+    if (hasNamingModal && isMappingPage) {
+      setIsNamingModalOpen(true);
+    } else {
+      if (isMappingPage) {
+        if (editField == null ? void 0 : editField.id) {
+          setIsEditConfirmationOpen(true);
+        } else {
+          onSaveHandler({});
+        }
+      } else {
+        saveConfiguration();
+      }
+    }
+  };
+  const getButtonText = () => {
+    if (isMappingPage) {
+      return (editField == null ? void 0 : editField.id) ? UI_TEXT.UPDATE_MAPPING : UI_TEXT.SAVE_MAPPING;
+    }
+    return UI_TEXT.CONTINUE_MAPPING;
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasExistingMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          onClick: () => previousMappingHandler == null ? void 0 : previousMappingHandler(),
+          color: "default",
+          icon: /* @__PURE__ */ React__default.createElement(ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement(Heading, { size: "h6" }, (editField == null ? void 0 : editField.id) ? UI_TEXT.EDIT_MAPPING : UI_TEXT.NEW_MAPPING)
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          css: { color: !isMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isMappingPage && navigateConfigPage()
+        },
+        UI_TEXT.CONFIGURATION
+      ),
+      /* @__PURE__ */ React__default.createElement(ArrowIcon, null),
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          disabled: isMappingPageDisabled(),
+          css: {
+            color: isMappingPage ? "$neutral900" : "$neutral800",
+            cursor: isMappingPageDisabled() ? "not-allowed" : "pointer"
+          },
+          color: "default",
+          variant: "ghost",
+          onClick: () => {
+            if (isMappingPage) {
+              onSaveHandler({});
+            } else {
+              saveConfiguration();
+            }
+          },
+          size: "md"
+        },
+        UI_TEXT.MAPPING
+      )
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        justifyContent: "end",
+        css: {
+          width: "180px"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          size: "lg",
+          disabled: isButtonDisabled(),
+          onClick: handleSaveClick
+        },
+        getButtonText()
+      )
+    )
+  ), hasNamingModal && isMappingPage && /* @__PURE__ */ React__default.createElement(
+    NamingModal,
+    {
+      editFieldId: editField == null ? void 0 : editField.id,
+      saveHandler: () => onSaveHandler(editField == null ? void 0 : editField.id),
+      closeHandler: () => setIsNamingModalOpen(false),
+      value: (configuration == null ? void 0 : configuration.currentMappingName) || "",
+      setValue: (value) => {
+        var _a2;
+        return (_a2 = configuration == null ? void 0 : configuration.setMappingName) == null ? void 0 : _a2.call(configuration, value);
+      },
+      isOpen: isNamingModalOpen
+    }
+  ), isEditConfirmationOpen && /* @__PURE__ */ React__default.createElement(
+    EditConfirmation,
+    {
+      name: UI_TEXT.EDIT_CONFIRMATION_TITLE,
+      description: UI_TEXT.EDIT_CONFIRMATION_DESCRIPTION,
+      onConfirm: async () => {
+        await onSaveHandler({});
+        setIsEditConfirmationOpen(false);
+      },
+      onCancel: () => {
+        setIsEditConfirmationOpen(false);
+      }
+    }
+  ));
+};
+
+export { MappingHeader };
+//# sourceMappingURL=MappingHeader.js.map