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

package/dist/cjs/single-mapping/components/CustomDropdown.js

@@ -0,0 +1,339 @@
+'use strict';
+
+var React = require('react');
+var string = require('../../node_modules/@internationalized/date/dist/string.js');
+var dayjs_min = require('../../node_modules/dayjs/dayjs.min.js');
+var index$1 = require('../../commons/constants/index.js');
+var index = require('../constants/index.js');
+var dropdown = require('../../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js');
+var input = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js');
+var chevronDown = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.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 flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var calendar = require('../../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js');
+var radio = require('../../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const CustomDropdown = ({
+  data,
+  onChangeHandler,
+  value,
+  editField
+}) => {
+  var _a, _b;
+  const [date, setDate] = React.useState(() => {
+    try {
+      return value ? string.parseDate(dayjs_min.default(value).format(index.DATE_FORMAT.CALENDAR)) : string.parseDate(dayjs_min.default().format(index.DATE_FORMAT.CALENDAR));
+    } catch (e) {
+      return string.parseDate(dayjs_min.default().format(index.DATE_FORMAT.CALENDAR));
+    }
+  });
+  const [days, setDays] = React.useState((_b = (_a = value == null ? void 0 : value.value) == null ? void 0 : _a.value) != null ? _b : 0);
+  const [open, setOpen] = React.useState(false);
+  const [hasBeenOpened, setHasBeenOpened] = React.useState(false);
+  React.useEffect(() => {
+    if (!(editField == null ? void 0 : editField.id) && !hasBeenOpened) {
+      setOpen(true);
+      setHasBeenOpened(true);
+    }
+  }, [editField == null ? void 0 : editField.id, hasBeenOpened]);
+  const getDisplayValue = () => {
+    var _a2, _b2, _c;
+    if ((value == null ? void 0 : value.type) === index.DROPDOWN_TYPE.DATE) {
+      return `${value == null ? void 0 : value.label} > ${value == null ? void 0 : value.value}`;
+    }
+    if ((value == null ? void 0 : value.type) === index.DROPDOWN_TYPE.DATE_RANGE) {
+      const rangeValue = ((_a2 = value == null ? void 0 : value.value) == null ? void 0 : _a2.type) === index.DROPDOWN_TYPE.CUSTOM ? `${(_b2 = value == null ? void 0 : value.value) == null ? void 0 : _b2.value} days` : (_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) || "";
+  };
+  const handleOptionSelect = (option) => {
+    onChangeHandler({
+      id: index.CONFIGURATION_IDS.RESPONSE_IMPORT_TYPE,
+      value: option
+    });
+  };
+  const handleDateApply = (option) => {
+    onChangeHandler({
+      id: index.CONFIGURATION_IDS.RESPONSE_IMPORT_TYPE,
+      value: __spreadProps(__spreadValues({}, option), {
+        value: dayjs_min.default(date.toString()).format(index.DATE_FORMAT.DISPLAY)
+      })
+    });
+    setOpen(false);
+  };
+  const handleDateRangeChange = (rangeValue) => {
+    var _a2;
+    const option = data.find((opt) => opt.type === index.DROPDOWN_TYPE.DATE_RANGE);
+    if (!option)
+      return;
+    onChangeHandler({
+      id: index.CONFIGURATION_IDS.RESPONSE_IMPORT_TYPE,
+      value: __spreadProps(__spreadValues({}, option), {
+        value: {
+          type: rangeValue,
+          value: rangeValue,
+          label: (_a2 = index$1.dynamicDateOptions.find((opt) => opt.value === rangeValue)) == null ? void 0 : _a2.label
+        }
+      })
+    });
+  };
+  const handleDateRangeApply = () => {
+    var _a2, _b2;
+    const option = data.find((opt) => opt.type === index.DROPDOWN_TYPE.DATE_RANGE);
+    if (!option)
+      return;
+    onChangeHandler({
+      id: index.CONFIGURATION_IDS.RESPONSE_IMPORT_TYPE,
+      value: __spreadProps(__spreadValues({}, option), {
+        value: {
+          type: (_a2 = value == null ? void 0 : value.value) == null ? void 0 : _a2.type,
+          value: days,
+          label: (_b2 = value == null ? void 0 : value.value) == null ? void 0 : _b2.label
+        }
+      })
+    });
+    setOpen(false);
+  };
+  return /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    input.Input,
+    {
+      size: "lg",
+      rightIcon: /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 30, color: "#6A6A6A" }),
+      placeholder: index.UI_LABELS.CHOOSE,
+      value: getDisplayValue(),
+      css: {
+        "& input": {
+          textAlign: "left !important"
+        }
+      }
+    }
+  )), /* @__PURE__ */ React.createElement(
+    dropdown.DropdownMenuContent,
+    {
+      css: {
+        width: "488px",
+        marginBlockStart: "$2",
+        p: {
+          margin: "0px !important"
+        },
+        zIndex: index.STYLES.zIndexDropdown
+      },
+      className: "dm-sans"
+    },
+    data.map((option) => {
+      var _a2;
+      if (!option.type) {
+        return /* @__PURE__ */ React.createElement(
+          tooltip.Tooltip,
+          {
+            key: option.id,
+            content: option.tooltip || "",
+            css: {
+              zIndex: index.STYLES.zIndexTooltip,
+              fontFamily: "DM Sans !important"
+            }
+          },
+          /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+            dropdown.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: () => handleOptionSelect(option)
+            },
+            /* @__PURE__ */ React.createElement(
+              flex.Flex,
+              {
+                justifyContent: "space-between",
+                alignItems: "center",
+                css: { width: "100%" }
+              },
+              /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, option.label), /* @__PURE__ */ React.createElement(text.Text, { size: "xs", weight: "regular", css: { color: "$neutral700" } }, option.description))
+            )
+          ))
+        );
+      }
+      return /* @__PURE__ */ React.createElement(
+        tooltip.Tooltip,
+        {
+          key: option.id,
+          content: option.tooltip || "",
+          css: {
+            fontFamily: "DM Sans !important",
+            zIndex: index.STYLES.zIndexTooltip
+          }
+        },
+        /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuSub, null, /* @__PURE__ */ React.createElement(
+          dropdown.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.createElement(
+            flex.Flex,
+            {
+              justifyContent: "space-between",
+              alignItems: "center",
+              css: { width: "100%" }
+            },
+            /* @__PURE__ */ React.createElement(
+              flex.Flex,
+              {
+                css: { cursor: "pointer" },
+                justifyContent: "center",
+                flexDirection: "column"
+              },
+              /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, option.label),
+              /* @__PURE__ */ React.createElement(text.Text, { size: "xs", weight: "regular", css: { color: "$neutral700" } }, option.description)
+            )
+          )
+        ), /* @__PURE__ */ React.createElement(
+          dropdown.DropdownMenuSubContent,
+          {
+            sideOffset: 10,
+            alignOffset: -5,
+            css: __spreadProps(__spreadValues({
+              padding: "0px !important",
+              maxHeight: "500px",
+              minWidth: "224px",
+              maxWidth: "260px",
+              margin: "0px !important"
+            }, option.type === index.DROPDOWN_TYPE.DATE && {
+              border: "none !important"
+            }), {
+              p: {
+                margin: "0px !important"
+              },
+              marginBlockEnd: "$10 !important"
+            }),
+            className: "dm-sans"
+          },
+          option.type === index.DROPDOWN_TYPE.DATE && /* @__PURE__ */ React.createElement(
+            calendar.Calendar,
+            __spreadProps(__spreadValues(__spreadValues({
+              footerActionText: "Apply",
+              size: "md",
+              value: date,
+              onChange: setDate
+            }, (option == null ? void 0 : option.minValue) && {
+              minValue: string.parseDate(option == null ? void 0 : option.minValue)
+            }), (option == null ? void 0 : option.maxValue) && {
+              maxValue: string.parseDate(option == null ? void 0 : option.maxValue)
+            }), {
+              footerAction: () => handleDateApply(option)
+            })
+          ),
+          option.type === index.DROPDOWN_TYPE.DATE_RANGE && /* @__PURE__ */ React.createElement(
+            flex.Flex,
+            {
+              css: {
+                paddingInline: "$4 !important",
+                paddingBlock: "$8 !important"
+              },
+              flexDirection: "column",
+              gap: "$4"
+            },
+            /* @__PURE__ */ React.createElement(
+              radio.RadioGroup,
+              {
+                defaultValue: value == null ? void 0 : value.value,
+                onChange: handleDateRangeChange
+              },
+              index$1.dynamicDateOptions.map((dateOption) => /* @__PURE__ */ React.createElement(
+                box.Box,
+                {
+                  key: dateOption.value,
+                  css: {
+                    padding: "$4 !important"
+                  }
+                },
+                /* @__PURE__ */ React.createElement(radio.Radio, { value: dateOption.value }, dateOption.label)
+              ))
+            ),
+            ((_a2 = value == null ? void 0 : value.value) == null ? void 0 : _a2.type) === index.DROPDOWN_TYPE.CUSTOM && /* @__PURE__ */ React.createElement(
+              box.Box,
+              {
+                css: {
+                  paddingRight: "$4 !important",
+                  position: "relative"
+                }
+              },
+              /* @__PURE__ */ React.createElement(
+                input.Input,
+                {
+                  size: "md",
+                  variant: "filled",
+                  value: days,
+                  onChange: (e) => setDays(e.target.value)
+                }
+              ),
+              /* @__PURE__ */ React.createElement(
+                text.Text,
+                {
+                  css: {
+                    position: "absolute",
+                    right: "$8",
+                    top: "$3"
+                  }
+                },
+                index.UI_LABELS.DAYS
+              )
+            ),
+            /* @__PURE__ */ React.createElement(
+              flex.Flex,
+              {
+                justifyContent: "space-between",
+                css: {
+                  borderBlockStart: "$borderWidths$xs, solid, $neutral200 !important",
+                  padding: "$8"
+                }
+              },
+              /* @__PURE__ */ React.createElement(button.Button, { size: "sm", variant: "ghost", color: "secondary" }, index.UI_LABELS.CANCEL),
+              /* @__PURE__ */ React.createElement(
+                button.Button,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  color: "primary",
+                  onClick: handleDateRangeApply
+                },
+                index.UI_LABELS.APPLY
+              )
+            )
+          )
+        )))
+      );
+    })
+  ));
+};
+
+exports.CustomDropdown = CustomDropdown;
+//# sourceMappingURL=CustomDropdown.js.map

package/dist/cjs/single-mapping/components/CustomDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomDropdown.js","sources":["../../../../src/single-mapping/components/CustomDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport {\n  Box,\n  Flex,\n  Text,\n  Input,\n  Button,\n  Tooltip,\n  Calendar,\n  RadioGroup,\n  Radio,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n} from \"@sparrowengg/twigs-react\";\nimport { ChevronDownIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { parseDate, DateValue } from \"@internationalized/date\";\nimport dayjs from \"dayjs\";\nimport { ImportOption, ConfigurationFieldValue } from \"../types/configuration.types\";\nimport { EditField } from \"../types/mapping.types\";\nimport { dynamicDateOptions } from \"../../commons/constants\";\nimport { DROPDOWN_TYPE, DATE_FORMAT, STYLES, CONFIGURATION_IDS, UI_LABELS } from \"../constants\";\n\ntype CustomDropdownProps = {\n  data: ImportOption[];\n  onChangeHandler: (value: ConfigurationFieldValue) => void;\n  value: any;\n  editField?: EditField;\n};\n\nexport const CustomDropdown: React.FC<CustomDropdownProps> = ({\n  data,\n  onChangeHandler,\n  value,\n  editField,\n}) => {\n  const [date, setDate] = useState<DateValue>(() => {\n    try {\n      return value\n        ? parseDate(dayjs(value).format(DATE_FORMAT.CALENDAR))\n        : parseDate(dayjs().format(DATE_FORMAT.CALENDAR));\n    } catch (e) {\n      return parseDate(dayjs().format(DATE_FORMAT.CALENDAR));\n    }\n  });\n\n  const [days, setDays] = useState(value?.value?.value ?? 0);\n  const [open, setOpen] = useState(false);\n  const [hasBeenOpened, setHasBeenOpened] = useState(false);\n\n  useEffect(() => {\n    if (!editField?.id && !hasBeenOpened) {\n      setOpen(true);\n      setHasBeenOpened(true);\n    }\n  }, [editField?.id, hasBeenOpened]);\n\n  const getDisplayValue = (): string => {\n    if (value?.type === DROPDOWN_TYPE.DATE) {\n      return `${value?.label} > ${value?.value}`;\n    }\n    if (value?.type === DROPDOWN_TYPE.DATE_RANGE) {\n      const rangeValue =\n        value?.value?.type === DROPDOWN_TYPE.CUSTOM\n          ? `${value?.value?.value} days`\n          : value?.value?.label;\n      return `${value?.label} - ${rangeValue}`;\n    }\n    return value?.label || \"\";\n  };\n\n  const handleOptionSelect = (option: ImportOption) => {\n    onChangeHandler({\n      id: CONFIGURATION_IDS.RESPONSE_IMPORT_TYPE,\n      value: option,\n    });\n  };\n\n  const handleDateApply = (option: ImportOption) => {\n    onChangeHandler({\n      id: CONFIGURATION_IDS.RESPONSE_IMPORT_TYPE,\n      value: {\n        ...option,\n        value: dayjs(date.toString()).format(DATE_FORMAT.DISPLAY),\n      },\n    });\n    setOpen(false);\n  };\n\n  const handleDateRangeChange = (rangeValue: string) => {\n    const option = data.find((opt) => opt.type === DROPDOWN_TYPE.DATE_RANGE);\n    if (!option) return;\n\n    onChangeHandler({\n      id: CONFIGURATION_IDS.RESPONSE_IMPORT_TYPE,\n      value: {\n        ...option,\n        value: {\n          type: rangeValue,\n          value: rangeValue,\n          label: dynamicDateOptions.find((opt) => opt.value === rangeValue)?.label,\n        },\n      },\n    });\n  };\n\n  const handleDateRangeApply = () => {\n    const option = data.find((opt) => opt.type === DROPDOWN_TYPE.DATE_RANGE);\n    if (!option) return;\n\n    onChangeHandler({\n      id: CONFIGURATION_IDS.RESPONSE_IMPORT_TYPE,\n      value: {\n        ...option,\n        value: {\n          type: value?.value?.type,\n          value: days,\n          label: value?.value?.label,\n        },\n      },\n    });\n    setOpen(false);\n  };\n\n  return (\n    <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>\n      <DropdownMenuTrigger asChild>\n        <Input\n          size=\"lg\"\n          rightIcon={<ChevronDownIcon size={30} color=\"#6A6A6A\" />}\n          placeholder={UI_LABELS.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: STYLES.zIndexDropdown,\n        }}\n        className=\"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: STYLES.zIndexTooltip,\n                  fontFamily: \"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={() => handleOptionSelect(option)}\n                  >\n                    <Flex\n                      justifyContent=\"space-between\"\n                      alignItems=\"center\"\n                      css={{ width: \"100%\" }}\n                    >\n                      <Flex justifyContent=\"center\" flexDirection=\"column\">\n                        <Text size=\"sm\" weight=\"regular\" css={{ color: \"$neutral900\" }}>\n                          {option.label}\n                        </Text>\n                        <Text size=\"xs\" weight=\"regular\" css={{ color: \"$neutral700\" }}>\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: \"DM Sans !important\",\n                zIndex: STYLES.zIndexTooltip,\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={{ width: \"100%\" }}\n                    >\n                      <Flex\n                        css={{ cursor: \"pointer\" }}\n                        justifyContent=\"center\"\n                        flexDirection=\"column\"\n                      >\n                        <Text size=\"sm\" weight=\"regular\" css={{ color: \"$neutral900\" }}>\n                          {option.label}\n                        </Text>\n                        <Text size=\"xs\" weight=\"regular\" css={{ color: \"$neutral700\" }}>\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 === DROPDOWN_TYPE.DATE && {\n                        border: \"none !important\",\n                      }),\n                      p: {\n                        margin: \"0px !important\",\n                      },\n                      marginBlockEnd: \"$10 !important\",\n                    }}\n                    className=\"dm-sans\"\n                  >\n                    {option.type === DROPDOWN_TYPE.DATE && (\n                      <Calendar\n                        footerActionText=\"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={() => handleDateApply(option)}\n                      />\n                    )}\n\n                    {option.type === DROPDOWN_TYPE.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}\n                          onChange={handleDateRangeChange}\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\n                        {value?.value?.type === DROPDOWN_TYPE.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_LABELS.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_LABELS.CANCEL}\n                          </Button>\n                          <Button\n                            size=\"sm\"\n                            variant=\"ghost\"\n                            color=\"primary\"\n                            onClick={handleDateRangeApply}\n                          >\n                            {UI_LABELS.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":["useState","parseDate","dayjs","DATE_FORMAT","useEffect","_a","_b","DROPDOWN_TYPE","CONFIGURATION_IDS","dynamicDateOptions","DropdownMenu","DropdownMenuTrigger","Input","ChevronDownIcon","UI_LABELS","DropdownMenuContent","STYLES","Tooltip","Box","DropdownMenuItem","Flex","Text","DropdownMenuSub","DropdownMenuSubTrigger","DropdownMenuSubContent","Calendar","RadioGroup","Radio","Button"],"mappings":"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"}

package/dist/cjs/single-mapping/components/MappingContent.js

@@ -0,0 +1,247 @@
+'use strict';
+
+var React = require('react');
+var spinner = require('../../commons/components/spinner.js');
+var useMappingData = require('../hooks/useMappingData.js');
+var TabsContentComponent = require('./TabsContentComponent.js');
+var CustomChip = require('./CustomChip.js');
+var index$1 = require('../../commons/constants/index.js');
+var mapping_utils = require('../utils/mapping.utils.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 tabs = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tabs/tabs.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 __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 MappingContent = (props) => {
+  var _a, _b, _c;
+  const {
+    surveyId,
+    apiURL,
+    token,
+    surveyProperties,
+    importResponse,
+    editField,
+    setIsInitialLoad,
+    setOriginalMappingData,
+    ssMappingData: externalMappingData,
+    setSSMappingData: setExternalMappingData
+  } = props;
+  const { ssMappingData, setSSMappingData, loader, handleFieldValues } = useMappingData.useMappingData({
+    surveyId,
+    apiURL,
+    token,
+    surveyProperties,
+    importResponse,
+    editField,
+    setIsInitialLoad,
+    setOriginalMappingData
+  });
+  const [searchInput, setSearchInput] = React.useState("");
+  const [SSMappedFields, setSSMappedFields] = React.useState([]);
+  React.useEffect(() => {
+    if (setExternalMappingData && Object.keys(ssMappingData).some((key) => {
+      var _a2;
+      return ((_a2 = ssMappingData[key]) == null ? void 0 : _a2.length) > 0;
+    })) {
+      setExternalMappingData(ssMappingData);
+    }
+  }, [ssMappingData, setExternalMappingData]);
+  React.useEffect(() => {
+    var _a2, _b2, _c2, _d, _e, _f;
+    if (((_a2 = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _a2.length) || ((_b2 = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _b2.length) || ((_c2 = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _c2.length) || ((_d = ssMappingData == null ? void 0 : ssMappingData.expressions) == null ? void 0 : _d.length) || ((_e = ssMappingData == null ? void 0 : ssMappingData.property) == null ? void 0 : _e.length)) {
+      const updatedFieldValues = Object.keys(ssMappingData).reduce(
+        (acc, key) => {
+          acc[key] = ssMappingData[key].map((field) => {
+            var _a3;
+            if (((_a3 = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a3.ImportMethod) === index.IMPORT_METHODS.SELECTED_DATA) {
+              return __spreadProps(__spreadValues({}, field), { isEnabled: field == null ? void 0 : field.isEnabled });
+            } else {
+              if ((field == null ? void 0 : field.id) !== "ALL") {
+                return __spreadProps(__spreadValues({}, field), { isEnabled: true });
+              }
+              return field;
+            }
+          });
+          return acc;
+        },
+        {}
+      );
+      setSSMappedFields(updatedFieldValues);
+      if (((_f = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _f.ImportMethod) === index.IMPORT_METHODS.SEND_ALL_DATA) {
+        importResponse.onChangeHandler({
+          id: "mappedFields",
+          value: updatedFieldValues
+        });
+      } else {
+        importResponse.onChangeHandler({
+          id: "mappedFields",
+          value: ssMappingData
+        });
+      }
+    }
+  }, [ssMappingData, (_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.ImportMethod]);
+  const handleImportMethodChange = (value) => {
+    importResponse.onChangeHandler({
+      id: "ImportMethod",
+      value
+    });
+    if (value === index.IMPORT_METHODS.SEND_ALL_DATA) {
+      importResponse.onChangeHandler({
+        id: "mappedFields",
+        value: SSMappedFields
+      });
+    }
+  };
+  if (loader) {
+    return /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        justifyContent: "center",
+        css: { height: "calc(100vh - 57px)" }
+      },
+      /* @__PURE__ */ React.createElement(spinner.default, null)
+    );
+  }
+  return /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: index.STYLES.maxMappingWidth, width: "100%", marginBlock: "$40" } }, (importResponse == null ? void 0 : importResponse.hasImportResponse) && /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5", css: { color: "$neutral900" } }, index.UI_LABELS.SELECT_IMPORT_DATA), /* @__PURE__ */ React.createElement(
+    radio.RadioGroup,
+    {
+      defaultValue: (_b = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _b.ImportMethod,
+      onChange: handleImportMethodChange
+    },
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        gap: "$20",
+        css: {
+          marginTop: "$9",
+          "& label": { color: "$neutral800", cursor: "pointer" }
+        }
+      },
+      /* @__PURE__ */ React.createElement(radio.Radio, { size: "md", value: index.IMPORT_METHODS.SEND_ALL_DATA, css: { cursor: "pointer" } }, index.UI_LABELS.SEND_ALL_DATA),
+      /* @__PURE__ */ React.createElement(radio.Radio, { size: "md", value: index.IMPORT_METHODS.SELECTED_DATA, css: { cursor: "pointer" } }, index.UI_LABELS.SEND_SELECTED_DATA)
+    )
+  )), ((_c = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _c.ImportMethod) === index.IMPORT_METHODS.SELECTED_DATA ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: "$24" } }, /* @__PURE__ */ React.createElement(tabs.Tabs, { defaultValue: "QUESTIONS" }, /* @__PURE__ */ React.createElement(
+    tabs.TabsList,
+    {
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200"
+      }
+    },
+    index$1.mappingTabValues.map((tab) => {
+      const count = mapping_utils.getEnabledFieldsCount(ssMappingData, tab.placeholder);
+      return /* @__PURE__ */ React.createElement(
+        tabs.TabsTrigger,
+        {
+          key: tab == null ? void 0 : tab.id,
+          value: tab == null ? void 0 : tab.value,
+          css: {
+            padding: "$6 $4 !important"
+          },
+          onClick: () => setSearchInput("")
+        },
+        /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, tab.name),
+        !!count && /* @__PURE__ */ React.createElement(
+          chip.Chip,
+          {
+            css: {
+              marginLeft: "$2",
+              borderRadius: "5px",
+              color: "$neutral800"
+            },
+            variant: "outline",
+            rounded: "sm"
+          },
+          count
+        )
+      );
+    })
+  ), /* @__PURE__ */ React.createElement(
+    TabsContentComponent.TabsContentComponent,
+    {
+      searchInput,
+      setSearchInput,
+      value: index.TAB_VALUES.QUESTIONS,
+      placeholder: index.PLACEHOLDER_LABELS.QUESTIONS,
+      fields: ssMappingData.questions,
+      handleFieldValues: (field, value) => handleFieldValues("questions", field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TabsContentComponent.TabsContentComponent,
+    {
+      searchInput,
+      setSearchInput,
+      fields: ssMappingData.variables,
+      value: index.TAB_VALUES.VARIABLE,
+      placeholder: index.PLACEHOLDER_LABELS.VARIABLES,
+      handleFieldValues: (field, value) => handleFieldValues("variables", field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TabsContentComponent.TabsContentComponent,
+    {
+      fields: ssMappingData.contactProperties,
+      searchInput,
+      setSearchInput,
+      value: index.TAB_VALUES.CONTACT,
+      placeholder: index.PLACEHOLDER_LABELS.CONTACTS,
+      handleFieldValues: (field, value) => handleFieldValues("contactProperties", field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TabsContentComponent.TabsContentComponent,
+    {
+      searchInput,
+      setSearchInput,
+      value: index.TAB_VALUES.EXPRESSION,
+      placeholder: index.PLACEHOLDER_LABELS.EXPRESSIONS,
+      fields: ssMappingData.expressions,
+      handleFieldValues: (field, value) => handleFieldValues("expressions", field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TabsContentComponent.TabsContentComponent,
+    {
+      value: index.TAB_VALUES.PROPERTY,
+      searchInput,
+      setSearchInput,
+      placeholder: index.PLACEHOLDER_LABELS.PROPERTIES,
+      fields: ssMappingData.property,
+      handleFieldValues: (field, value) => handleFieldValues("property", field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TabsContentComponent.TabsContentComponent,
+    {
+      value: index.TAB_VALUES.DERIVED_QUESTIONS,
+      searchInput,
+      setSearchInput,
+      placeholder: index.PLACEHOLDER_LABELS.DERIVED_QUESTIONS,
+      fields: ssMappingData.derivedQuestions,
+      handleFieldValues: (field, value) => handleFieldValues("derivedQuestions", field == null ? void 0 : field.id, value)
+    }
+  ))) : /* @__PURE__ */ React.createElement(flex.Flex, { css: { marginTop: "$16" }, alignItems: "center", gap: "$6" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { width: "90px", color: "$neutral900" } }, index.UI_LABELS.THIS_INCLUDES), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, mapping_utils.getTotalFieldsCount(ssMappingData, "questions") > 0 && /* @__PURE__ */ React.createElement(CustomChip.CustomChip, { bgColor: index.COLOR_CODES.QUESTIONS_BG }, mapping_utils.getTotalFieldsCount(ssMappingData, "questions"), " ", index.UI_LABELS.QUESTIONS), mapping_utils.getTotalFieldsCount(ssMappingData, "derivedQuestions") > 0 && /* @__PURE__ */ React.createElement(CustomChip.CustomChip, { bgColor: index.COLOR_CODES.ENRICH_BG }, mapping_utils.getTotalFieldsCount(ssMappingData, "derivedQuestions"), " ", index.UI_LABELS.ENRICH), mapping_utils.getTotalFieldsCount(ssMappingData, "variables") > 0 && /* @__PURE__ */ React.createElement(CustomChip.CustomChip, { bgColor: index.COLOR_CODES.VARIABLES_BG }, mapping_utils.getTotalFieldsCount(ssMappingData, "variables"), " ", index.UI_LABELS.VARIABLES), mapping_utils.getTotalFieldsCount(ssMappingData, "contactProperties") > 0 && /* @__PURE__ */ React.createElement(CustomChip.CustomChip, { bgColor: index.COLOR_CODES.CONTACTS_BG }, mapping_utils.getTotalFieldsCount(ssMappingData, "contactProperties"), " ", index.UI_LABELS.CONTACTS), mapping_utils.getTotalFieldsCount(ssMappingData, "expressions") > 0 && /* @__PURE__ */ React.createElement(CustomChip.CustomChip, { bgColor: index.COLOR_CODES.EXPRESSIONS_BG }, mapping_utils.getTotalFieldsCount(ssMappingData, "expressions"), " ", index.UI_LABELS.EXPRESSIONS), mapping_utils.getTotalFieldsCount(ssMappingData, "property") > 0 && /* @__PURE__ */ React.createElement(CustomChip.CustomChip, { bgColor: index.COLOR_CODES.PROPERTIES_BG }, mapping_utils.getTotalFieldsCount(ssMappingData, "property"), " ", index.UI_LABELS.PROPERTIES)))));
+};
+
+exports.MappingContent = MappingContent;
+//# sourceMappingURL=MappingContent.js.map