contentoh-components-library 21.2.65 → 21.2.66

package/dist/components/atoms/CustomSelectItem/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomSelectItem = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _CheckBox = require("../CheckBox");
+
+var _react = require("react");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var CustomSelectItem = function CustomSelectItem(_ref) {
+  var option = _ref.option,
+      _ref$activeFilters = _ref.activeFilters,
+      activeFilters = _ref$activeFilters === void 0 ? {} : _ref$activeFilters,
+      parameterArray = _ref.parameterArray,
+      globalFilters = _ref.globalFilters,
+      setActiveFilters = _ref.setActiveFilters,
+      setParameterArray = _ref.setParameterArray,
+      className = _ref.className,
+      _ref$route = _ref.route,
+      route = _ref$route === void 0 ? "" : _ref$route;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showSubOptions = _useState2[0],
+      setShowSubOptions = _useState2[1];
+
+  var filterRoute = route;
+
+  var returnFilterId = function returnFilterId(object) {
+    var subOptions = object.subOptions,
+        id = object.id;
+    if (subOptions) return subOptions.map(returnFilterId);else return id;
+  };
+
+  var oneDimensionArray = function oneDimensionArray(arr) {
+    var array = [];
+    arr.forEach(function (element) {
+      if ((0, _typeof2.default)(element) == "object") array.push.apply(array, (0, _toConsumableArray2.default)(oneDimensionArray(element)));else array.push(element);
+    });
+    return array;
+  };
+
+  var setFilter = function setFilter(object) {
+    var newObject = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var subOptions = object.subOptions;
+
+    if (subOptions) {
+      subOptions.forEach(function (option) {
+        newObject[option.name] = setFilter(option);
+      });
+      return newObject;
+    } else return newObject[object.name] = 1;
+  };
+
+  var createFilter = function createFilter(rout, option, filters) {
+    var levelsArray = rout.includes("|") ? rout.split("|").reverse() : [rout];
+
+    if (levelsArray.length === 1) {
+      return (0, _defineProperty2.default)({}, levelsArray[0], setFilter(option));
+    } else if (levelsArray.length === 2) {
+      var newObject = {};
+      newObject[levelsArray[1]] = (0, _objectSpread2.default)({}, filters);
+      newObject[levelsArray[1]][levelsArray[0]] = (0, _objectSpread2.default)({}, setFilter(option));
+      return (0, _objectSpread2.default)({}, newObject);
+    } else if (levelsArray.length === 3) {
+      var _newObject = globalFilters;
+
+      if (_newObject[levelsArray[2]]) {
+        _newObject[levelsArray[2]][levelsArray[1]] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _newObject[levelsArray[2]][levelsArray[1]]), filters);
+      } else {
+        _newObject = (0, _defineProperty2.default)({}, levelsArray[2], (0, _defineProperty2.default)({}, levelsArray[1], (0, _objectSpread2.default)({}, filters)));
+      }
+
+      _newObject[levelsArray[2]][levelsArray[1]][levelsArray[0]] = 1;
+      return (0, _objectSpread2.default)({}, _newObject);
+    }
+  };
+
+  var deleteFilter = function deleteFilter(rout) {
+    var levelsArray = rout.includes("|") ? rout.split("|").reverse() : [rout];
+    var newObject = (0, _objectSpread2.default)({}, globalFilters);
+    if (levelsArray.length === 1) delete newObject[levelsArray[0]];else if (levelsArray.length === 2) delete newObject[levelsArray[1]][levelsArray[0]];else if (levelsArray.length === 3) delete newObject[levelsArray[2]][levelsArray[1]][levelsArray[0]];
+    return newObject;
+  };
+
+  var onChangeChk = function onChangeChk(e, object) {
+    var idsFilter = returnFilterId(object);
+
+    if ((0, _typeof2.default)(idsFilter) === "object") {
+      idsFilter = oneDimensionArray(idsFilter);
+    } else {
+      idsFilter = [idsFilter];
+    }
+
+    var tempArray = parameterArray.slice();
+
+    if (e.target.checked) {
+      var _tempArray;
+
+      var newFilter = createFilter(route, option, activeFilters);
+
+      (_tempArray = tempArray).push.apply(_tempArray, (0, _toConsumableArray2.default)(idsFilter));
+
+      setActiveFilters(function (current) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, current), newFilter);
+      });
+    } else {
+      tempArray = tempArray.filter(function (element) {
+        return !idsFilter.includes(element);
+      });
+      var remainFilters = deleteFilter(route, globalFilters);
+      setActiveFilters(function (current) {
+        return remainFilters;
+      });
+    }
+
+    setParameterArray(tempArray);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    mainDivClass: className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: className,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+        id: "main-item-" + option.name,
+        label: option.name,
+        defaultChecked: activeFilters[option.name],
+        onChange: function onChange(e) {
+          return onChangeChk(e, option);
+        }
+      }), option.subOptions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick() {
+          return setShowSubOptions(!showSubOptions);
+        },
+        className: "arrow-item",
+        children: "\u25C0"
+      })]
+    }), showSubOptions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "sub-options",
+      children: option.subOptions.map(function (subOption, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelectItem, {
+          option: subOption,
+          className: "sub-option",
+          route: "".concat(filterRoute, "|").concat(subOption.name),
+          activeFilters: activeFilters[option.name],
+          parameterArray: parameterArray,
+          globalFilters: globalFilters,
+          setActiveFilters: setActiveFilters,
+          setParameterArray: setParameterArray
+        }, index + "-" + subOption.name);
+      })
+    })]
+  });
+};
+
+exports.CustomSelectItem = CustomSelectItem;

package/dist/components/atoms/CustomSelectItem/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > .", " {\n    display: flex;\n    justify-content: space-between;\n    padding: 5px;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n\n    .arrow-item {\n      transform: rotate(-90deg);\n      cursor: pointer;\n      font-size: 10px;\n    }\n\n    &:hover {\n      background-color: #f0f0f0;\n    }\n\n    input {\n      & + label {\n        cursor: pointer;\n      }\n    }\n  }\n  .sub-options {\n    & > * {\n      padding-left: 15px;\n    }\n  }\n"])), function (props) {
+  return props.mainDivClass;
+});
+
+exports.Container = Container;

package/dist/components/atoms/StatusTag/StatusTag.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StatusTagDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var status = _variables.GlobalStatus;
+var _default = {
+  title: "Components/atoms/StatusTag",
+  component: _index.StatusTag,
+  argTypes: {
+    statusType: {
+      options: status,
+      control: {
+        type: "select"
+      }
+    },
+    ovalForm: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StatusTag, (0, _objectSpread2.default)({}, args));
+};
+
+var StatusTagDefault = Template.bind({});
+exports.StatusTagDefault = StatusTagDefault;
+StatusTagDefault.args = {
+  statusType: "-",
+  ovalForm: false
+};

package/dist/components/atoms/StatusTag/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusTag = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var StatusTag = function StatusTag(_ref) {
+  var statusType = _ref.statusType,
+      ovalForm = _ref.ovalForm;
+
+  var getShortStatus = function getShortStatus(status) {
+    switch (status) {
+      case "COMPLETED":
+        return "C";
+
+      case "RECEPTION":
+        return "Pr";
+
+      case "NULL":
+        return "-";
+
+      case "RECEIVED":
+        return "Rc";
+
+      case "IN_PROGRESS":
+        return "P";
+
+      case "ASSIGNED":
+        return "As";
+
+      case "APPROVED":
+        return "Ap";
+
+      case "VALIDATING":
+        return "V";
+
+      case "PAID_OUT":
+        return "Po";
+
+      default:
+        return status;
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "status-".concat(getShortStatus(statusType), " ").concat(ovalForm && "oval-form"),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: getShortStatus(statusType)
+    })
+  });
+};
+
+exports.StatusTag = StatusTag;

package/dist/components/atoms/StatusTag/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0 10px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 3px;\n\n  p {\n    text-align: center;\n    color: ", ";\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 20px;\n  }\n\n  &.status-As,\n  &.status-P,\n  &.status-IN_PROGRESS,\n  &.status-QF {\n    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr,\n  &.status-Rc {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC,\n  &.status-AF {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.oval-form {\n    border-radius: 10px;\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/atoms/Tooltip/Tooltip.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TooltipDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/CustomTooltip",
+  component: _index.CustomTooltip
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CustomTooltip, (0, _objectSpread2.default)({}, args));
+};
+
+var TooltipDefault = Template.bind({});
+exports.TooltipDefault = TooltipDefault;
+TooltipDefault.args = {
+  componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    children: " hola soy tooltip "
+  }),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    children: " abrir tooltip "
+  }),
+  className: "container-tooltip"
+};

package/dist/components/atoms/Tooltip/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomTooltip = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _material = require("@mui/material");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["componentTooltip", "children", "className"];
+
+var CustomTooltip = function CustomTooltip(_ref) {
+  var componentTooltip = _ref.componentTooltip,
+      children = _ref.children,
+      className = _ref.className,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var MyComponent = /*#__PURE__*/_react.default.forwardRef(function MyComponent(props, ref) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      ref: ref,
+      children: "Bin"
+    }));
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    arrow: true,
+    placement: "top",
+    componentsProps: {
+      tooltip: {
+        className: className
+      },
+      popper: {
+        disablePortal: true
+      }
+    },
+    title: componentTooltip,
+    children: children
+  }));
+};
+
+exports.CustomTooltip = CustomTooltip;

package/dist/components/atoms/Tooltip/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tborder: 1px solid red;\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/CustomSelect/CustomSelect.stories.js

@@ -11,6 +11,8 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _index = require("./index");
 
+var _starIcon = _interopRequireDefault(require("../../../assets/images/customSelect/starIcon.svg"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _default = {
@@ -26,29 +28,26 @@ var Template = function Template(args) {
 var CustomSelectDefault = Template.bind({});
 exports.CustomSelectDefault = CustomSelectDefault;
 CustomSelectDefault.args = {
-  selectLabel: "Todos los departamentos",
+  // selectLabel: "Todos los departamentos",
   defaultOption: "Todos los departamentos",
   options: [{
-    id: 1,
-    value: "Decoración",
-    subOptions: [{
-      id: 1,
-      value: "Espejos"
-    }, {
-      id: 2,
-      value: "Persianas"
-    }]
-  }, {
-    id: 2,
-    value: "Eléctrico"
-  }, {
-    id: 3,
-    value: "Ferretería"
-  }, {
-    id: 4,
-    value: "Herramientas"
+    id: 47,
+    name: "Enero 2023",
+    isSelected: true
   }, {
-    id: 5,
-    value: "Iluminación"
-  }]
+    id: 49,
+    name: "Mis Favoritos"
+  }],
+  onClickItem: function onClickItem(v, id) {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: _starIcon.default,
+  showSearchBar: true,
+  customOptions: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    children: "Esto es un customOptions"
+  })
 };

package/dist/components/molecules/CustomSelect/SelectItem.js

@@ -26,7 +26,8 @@ var SelecItem = function SelecItem(_ref) {
       customSelectId = _ref.customSelectId,
       setParameterArray = _ref.setParameterArray,
       activeFilters = _ref.activeFilters,
-      setActiveFilters = _ref.setActiveFilters;
+      setActiveFilters = _ref.setActiveFilters,
+      onClickItem = _ref.onClickItem;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -46,6 +47,10 @@ var SelecItem = function SelecItem(_ref) {
         id: "main-item-" + option.id,
         label: option.name,
         onChange: function onChange(e) {
+          if (onClickItem) {
+            onClickItem(e.target.checked, option.id);
+          }
+
           var subOptions = option.subOptions;
           var filtersCopy = (0, _objectSpread2.default)({}, activeFilters);
 
@@ -108,6 +113,10 @@ var SelecItem = function SelecItem(_ref) {
             label: sub.name,
             defaultChecked: activeFilters[option.name] && activeFilters[option.name][sub.name],
             onChange: function onChange(e) {
+              if (onClickItem) {
+                onClickItem(e.target.checked, sub.id);
+              }
+
               if (e.target.checked) {
                 setParameterArray(function (current) {
                   return [].concat((0, _toConsumableArray2.default)(current), [sub.id]).sort(function (a, b) {

package/dist/components/molecules/CustomSelect/index.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CustomSelect = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
@@ -23,7 +27,7 @@ var _SelectItem = require("./SelectItem");
 
 var _Calendar = require("../../organisms/Calendar");
 
-var _dashboardUtils = require("../../pages/Dashboard/dashboardUtils");
+var _CustomSelectItem = require("../../atoms/CustomSelectItem");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -37,6 +41,7 @@ var CustomSelect = function CustomSelect(_ref) {
       _ref$customSelectId = _ref.customSelectId,
       customSelectId = _ref$customSelectId === void 0 ? "defaultSelectId" : _ref$customSelectId,
       defaultOption = _ref.defaultOption,
+      parameterArray = _ref.parameterArray,
       setParameterArray = _ref.setParameterArray,
       onClickItem = _ref.onClickItem,
       icon = _ref.icon,
@@ -145,18 +150,30 @@ var CustomSelect = function CustomSelect(_ref) {
 
     setFilters(filteredArray);
   }, [text]);
-  (0, _react.useEffect)(function () {
-    var newFiltersString = selectLabel;
-    var counter = 0;
-    var filtersArray = Object.keys(activeFilters);
-    filtersArray.length && filtersArray.forEach(function (key, index) {
-      if (index === 0) newFiltersString = key;else {
-        counter++;
+  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var newFiltersString, counter, filtersArray;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            newFiltersString = selectLabel;
+            counter = 0;
+            filtersArray = Object.keys(activeFilters);
+            filtersArray.length && filtersArray.forEach(function (key, index) {
+              if (index === 0) newFiltersString = key;else {
+                counter++;
+              }
+            });
+            setFiltersCounter(counter);
+            setFiltersString(newFiltersString);
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
       }
-    });
-    setFiltersCounter(counter);
-    setFiltersString(newFiltersString);
-  }, [activeFilters]);
+    }, _callee);
+  })), [activeFilters]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     id: customSelectId,
     selectLabel: selectLabel,
@@ -215,13 +232,17 @@ var CustomSelect = function CustomSelect(_ref) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
               children: option.name
             })
-          }, customSelectId + option.id) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelecItem, {
+          }, customSelectId + option.id) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelectItem.CustomSelectItem, {
+            className: "main-option",
             option: option,
             customSelectId: customSelectId,
             setParameterArray: setParameterArray,
             activeFilters: activeFilters,
+            globalFilters: activeFilters,
+            parameterArray: parameterArray,
             setActiveFilters: setActiveFilters,
-            onClickItem: onClickItem
+            onClickItem: onClickItem,
+            route: option.name
           }, customSelectId + option.id);
         })
       })]

package/dist/components/molecules/CustomSelect/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  position: relative;\n  min-width: 150px;\n\n  .button-list {\n    font-family: ", ";\n    font-size: 13px;\n    display: flex;\n    padding: ", ";\n    //padding: 10px 15px;\n    //padding: 5px 5px;\n    justify-content: space-between;\n    border-radius: 50px;\n    background-color: ", ";\n    border: 1px solid #f0f0f0;\n    cursor: pointer;\n\n    & > p {\n      max-width: 140px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n\n    .arrow-item {\n      transform: rotate(-90deg);\n      cursor: pointer;\n      font-size: 10px;\n      margin-left: 10px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .select-container {\n    box-shadow: 0px 2px 4px #00000040;\n    border-radius: 5px;\n    background-color: #fff;\n    padding-bottom: 10px;\n    position: absolute;\n    z-index: 10;\n    .search-bar-filter {\n      display: flex;\n      align-items: center;\n      border: 1px solid #f0f0f0;\n      padding-left: 10px;\n\n      img {\n        width: 15px;\n        height: 15px;\n      }\n\n      input {\n        background-color: transparent;\n        padding: 10px 10px;\n        outline: none;\n        border: none;\n      }\n    }\n    .default-option {\n      padding-top: 5px;\n      cursor: pointer;\n      padding: 5px 10px;\n      color: #817393;\n      font-family: Avenir Next;\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      &:hover {\n        background-color: #f0f0f0;\n      }\n    }\n    .filters-container {\n      overflow: auto;\n      max-height: 500px;\n      .option-container,\n      .default-option {\n        cursor: pointer;\n        padding: 5px 10px;\n        .main-item {\n          display: flex;\n          justify-content: space-between;\n\n          .arrow-item {\n            transform: rotate(-90deg);\n            cursor: pointer;\n            font-size: 10px;\n          }\n        }\n        .sub-menu {\n          margin-top: 10px;\n          padding-left: 20px;\n          .sub-filter {\n            & + * {\n              margin-top: 10px;\n            }\n          }\n        }\n\n        &:hover {\n          background-color: #f0f0f0;\n        }\n        label {\n          white-space: nowrap;\n        }\n      }\n\n      .dates-select-item {\n        cursor: pointer;\n        padding: 5px 10px;\n        color: #817393;\n        font-family: Avenir Next;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 21px;\n        &:hover {\n          background-color: #f0f0f0;\n        }\n      }\n    }\n  }\n"])), _variables.FontFamily.Raleway, function (props) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  position: relative;\n  min-width: 150px;\n\n  .button-list {\n    font-family: ", ";\n    font-size: 13px;\n    display: flex;\n    padding: ", ";\n    justify-content: space-between;\n    border-radius: 50px;\n    background-color: ", ";\n    border: 1px solid #f0f0f0;\n    cursor: pointer;\n\n    & > p {\n      max-width: 140px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n\n    .arrow-item {\n      transform: rotate(-90deg);\n      cursor: pointer;\n      font-size: 10px;\n      margin-left: 10px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .select-container {\n    box-shadow: 0px 2px 4px #00000040;\n    border-radius: 5px;\n    background-color: #fff;\n    padding-bottom: 10px;\n    position: absolute;\n    z-index: 10;\n    .search-bar-filter {\n      display: flex;\n      align-items: center;\n      border: 1px solid #f0f0f0;\n      padding-left: 10px;\n\n      img {\n        width: 15px;\n        height: 15px;\n      }\n\n      input {\n        background-color: transparent;\n        padding: 10px 10px;\n        outline: none;\n        border: none;\n      }\n    }\n    .default-option {\n      padding-top: 5px;\n      cursor: pointer;\n      padding: 5px 10px;\n      color: #817393;\n      font-family: Avenir Next;\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      &:hover {\n        background-color: #f0f0f0;\n      }\n    }\n    .filters-container {\n      overflow: auto;\n      max-height: 500px;\n      .option-container,\n      .default-option {\n        cursor: pointer;\n        padding: 5px 10px;\n        .main-item {\n          display: flex;\n          justify-content: space-between;\n\n          .arrow-item {\n            transform: rotate(-90deg);\n            cursor: pointer;\n            font-size: 10px;\n          }\n        }\n        .sub-menu {\n          margin-top: 10px;\n          padding-left: 20px;\n          .sub-filter {\n            & + * {\n              margin-top: 10px;\n            }\n          }\n        }\n\n        &:hover {\n          background-color: #f0f0f0;\n        }\n        label {\n          white-space: nowrap;\n        }\n      }\n\n      .dates-select-item {\n        cursor: pointer;\n        padding: 5px 10px;\n        color: #817393;\n        font-family: Avenir Next;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 21px;\n        &:hover {\n          background-color: #f0f0f0;\n        }\n      }\n    }\n  }\n"])), _variables.FontFamily.Raleway, function (props) {
   return props.selectLabel !== "" ? "10px 15px" : "5px 5px";
 }, function (_ref) {
   var filterActive = _ref.filterActive;

package/dist/components/molecules/HeaderTop/index.js

@@ -13,6 +13,8 @@ var _index2 = require("../../atoms/GeneralButton/index");
 
 var _react = require("react");
 
+var _index3 = require("../../atoms/ChatPopUp/index");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var HeaderTop = function HeaderTop(_ref) {
@@ -25,11 +27,14 @@ var HeaderTop = function HeaderTop(_ref) {
     ref: headerTop,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       text: "Edici\xF3n de producto"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
-      buttonType: "close-button",
-      onClick: function onClick() {
-        window.location.href = "/products";
-      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "buttons-top",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
+        buttonType: "close-button",
+        onClick: function onClick() {
+          window.location.href = "/products";
+        }
+      })
     })]
   });
 };