contentoh-components-library 21.2.20 → 21.2.23

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

@@ -62,7 +62,7 @@ var InputFormatter = function InputFormatter(_ref) {
   var maxLength = maxChar ? maxChar : 999;
 
   var getValue = function getValue(value) {
-    var temp = value.replace(/\n/gm, "<br>").replace(/\&(nbsp;|amp;)/gm, " ");
+    var temp = value.replace(/\n/gm, "<br>").replace(/\&nbsp;/gm, " ").replace(/\&amp;/gm, "&");
     return temp;
   }; //const quillRef = useRef();
 
@@ -74,7 +74,7 @@ var InputFormatter = function InputFormatter(_ref) {
   };
 
   var valueFormater = function valueFormater(value) {
-    return value.replace(/<\/p><p>/gm, "\n").replace(/<\/?br>|<\/?p>/gm, "").replace(/\&(nbsp;|amp;)/gm, " ");
+    return value.replace(/<\/p><p>/gm, "\n").replace(/<\/?br>|<\/?p>/gm, "").replace(/\&nbsp;/gm, " ").replace(/\&amp;/gm, "&");
   };
 
   var _onChange = function onChange(valueInput, delta, user, h) {
@@ -82,7 +82,7 @@ var InputFormatter = function InputFormatter(_ref) {
 
     try {
       if (h.getLength() - 1 <= maxLength) {
-        var unformattedText = valueInput.replace(/<li.*?>/gm, "   - ").replace(/<\/li>/gm, "\n").replace(/<\/p><p>/gm, "\n").replaceAll(/<\/?(?!\/?strong).*?>/gm, "").replace(/\&(nbsp;|amp;)/gm, " ");
+        var unformattedText = valueInput.replace(/<li.*?>/gm, "   - ").replace(/<\/li>/gm, "\n").replace(/<\/p><p>/gm, "\n").replaceAll(/<\/?(?!\/?strong).*?>/gm, "").replace(/\&nbsp;/gm, " ").replace(/\&amp;/gm, "&");
         setInputValue(valueInput);
         value = unformattedText;
       } else {

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ListCommercialRetailersDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/ListCommercialRetailers",
+  component: _index.ListCommercialRetailers
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ListCommercialRetailers, args);
+};
+
+var ListCommercialRetailersDefault = Template.bind({});
+exports.ListCommercialRetailersDefault = ListCommercialRetailersDefault;
+ListCommercialRetailersDefault.args = {
+  retailersAvailable: [{
+    id: 54,
+    name: "Construrama",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 4,
+    name: "Walmart Super y Superama"
+  }, {
+    id: 6,
+    name: "HEB"
+  }]
+};

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListCommercialRetailers = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
+
+var _react = require("react");
+
+var _index = require("../CheckBox/index");
+
+var ListCommercialRetailers = function ListCommercialRetailers(_ref) {
+  var retailersAvailable = _ref.retailersAvailable;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var closeMenu = function closeMenu(e) {
+    if (!e.target.closest(".menu-list-commercial-retailers") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    onClick: function onClick(event) {
+      if (!showMenu) {
+        setShowMenu(true);
+      } else if (showMenu && !event.target.closest(".menu-list-commercial-retailers")) {
+        setShowMenu(false);
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: "list-commercial-retailers"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _listCommercialRetailers.default,
+    alt: "button up icon"
+  }), showMenu && /*#__PURE__*/React.createElement("div", {
+    className: "menu-list-commercial-retailers"
+  }, retailersAvailable === null || retailersAvailable === void 0 ? void 0 : retailersAvailable.map(function (component, index) {
+    return /*#__PURE__*/React.createElement(_index.CheckBox, {
+      id: component.id,
+      label: component.name,
+      key: index + "-" + component.id
+    });
+  })));
+};
+
+exports.ListCommercialRetailers = ListCommercialRetailers;

package/dist/components/atoms/ListCommercialRetailers/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.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  padding: 3px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  height: 30px;\n  .menu-list-commercial-retailers {\n    width: 540px;\n    height: auto;\n    border-radius: 7px;\n    background-color: ", ";\n    padding: 14px 14px 8px 20px;\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    position: absolute;\n    top: calc(100% + 3px);\n    right: calc(100% - 20px);\n    display: flex;\n    flex-wrap: wrap;\n    z-index: 1;\n    div {\n      & + * {\n        margin-left: 15px;\n      }\n      p {\n        font-size: 11px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s2);
+
+exports.Container = Container;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuCommercialRetailersDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/MenuCommercialRetailers",
+  component: _index.MenuCommercialRetailers
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.MenuCommercialRetailers, args);
+};
+
+var MenuCommercialRetailersDefault = Template.bind({});
+exports.MenuCommercialRetailersDefault = MenuCommercialRetailersDefault;
+MenuCommercialRetailersDefault.args = {
+  editType: "3",
+  retailersAvailable: [{
+    id: 54,
+    name: "Construrama",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 4,
+    name: "Walmart Super y Superama"
+  }, {
+    id: 6,
+    name: "HEB"
+  }]
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuCommercialRetailers = void 0;
+
+var _styles = require("./styles");
+
+var _StatusTag = require("../StatusTag");
+
+var _ListCommercialRetailers = require("../ListCommercialRetailers");
+
+var MenuCommercialRetailers = function MenuCommercialRetailers(_ref) {
+  var editType = _ref.editType,
+      retailersAvailable = _ref.retailersAvailable;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_StatusTag.StatusTag, {
+    editType: editType,
+    ovalForm: true
+  }), /*#__PURE__*/React.createElement(_ListCommercialRetailers.ListCommercialRetailers, {
+    retailersAvailable: retailersAvailable
+  }));
+};
+
+exports.MenuCommercialRetailers = MenuCommercialRetailers;

package/dist/components/atoms/MenuCommercialRetailers/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  display: flex;\n  align-items: center;\n  .status-version {\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .list-commercial-retailers {\n    border: 1px solid transparent;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2);
+
+exports.Container = Container;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuProductImageDefault = void 0;
+
+var _index = require("./index");
+
+var _menuProductImage = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImage.svg"));
+
+var _default = {
+  title: "Components/atoms/MenuProductImage",
+  component: _index.MenuProductImage
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.MenuProductImage, args);
+};
+
+var MenuProductImageDefault = Template.bind({});
+exports.MenuProductImageDefault = MenuProductImageDefault;
+MenuProductImageDefault.args = {
+  ProductImg: _menuProductImage.default
+};

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuProductImage = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _menuProductImageButton = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImageButton.svg"));
+
+var _react = require("react");
+
+var _index = require("../LoadImageMenu/index");
+
+var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
+
+var MenuProductImage = function MenuProductImage(_ref) {
+  var ProductImg = _ref.ProductImg;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var closeMenu = function closeMenu(e) {
+    if (!e.target.closest(".menu-upload-product") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: "div-upload-image"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "profile-image",
+    src: ProductImg,
+    alt: "Product Image"
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick(event) {
+      if (!showMenu) {
+        setShowMenu(true);
+      } else if (showMenu && !event.target.closest(".menu-upload-product")) {
+        setShowMenu(false);
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: "upload-image-button " + (showMenu && "show-menu-upload-image")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: showMenu ? _listCommercialRetailers.default : _menuProductImageButton.default,
+    alt: "Product Image Button"
+  })), showMenu && /*#__PURE__*/React.createElement("div", {
+    className: "menu-upload-product"
+  }, /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
+    tipo: "Tipo de empaque ",
+    product: "Producto expuesto",
+    content: [{
+      label: "Enbalaje adicional - 0"
+    }, {
+      label: "En paquete - 1"
+    }, {
+      label: "Producto expuesto - 2"
+    }, {
+      label: "Embalaje multiforme - 3"
+    }, {
+      label: "Si no es una imagen / no corresponde - X"
+    }],
+    id: "menu-packaging-type"
+  }), /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
+    tipo: "Tipo de imagen ",
+    product: "Render",
+    content: [{
+      label: "fotografía del producto"
+    }],
+    id: "menu-image-type"
+  })));
+};
+
+exports.MenuProductImage = MenuProductImage;

package/dist/components/atoms/MenuProductImage/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  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  .profile-image {\n    width: 23px;\n    height: 23px;\n    & + * {\n      margin-left: 8px;\n    }\n  }\n  .upload-image-button {\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 2px;\n    padding: 3px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    height: 30px;\n    width: 15px;\n    left: 100%;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n    &.show-menu-upload-image {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n  .menu-upload-product {\n    background: ", ";\n    border: 1px solid ", ";\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    border-radius: 7px;\n    width: 324px;\n    padding: 8px 0px;\n    position: absolute;\n    right: 0%;\n    z-index: 1;\n    top: 30px;\n    button {\n      left: 0%;\n      border-radius: 7px;\n      span,\n      .tipo {\n        color: ", ";\n      }\n      .products {\n        color: ", ";\n      }\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.GlobalColors.s5, _variables.GlobalColors.s4);
+
+exports.Container = Container;

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

@@ -39,33 +39,25 @@ VerticalSideMenuMainPageDefault.args = {
   menuoption: [{
     icon: _iconSpeedometer.default,
     path: "/Dashboard",
-    title: "Dashborad"
+    title: "Dashboard"
+  }, {
+    icon: _iconGroup.default,
+    path: "/Products",
+    title: "Productos"
   }, {
     icon: _iconProduct.default,
-    path: "/products",
-    title: "Productos",
+    path: "/Orders",
+    title: "Proveedor",
     suboption: [{
-      path: "/Dashboard",
-      title: "General"
+      path: "/Orders",
+      title: "Ordenes"
     }, {
-      path: "/AddProducts",
-      title: "Agregar Producto"
+      path: "/Entregas",
+      title: "Entregas"
     }]
-  }, {
-    icon: _iconGroup.default,
-    path: "/providers",
-    title: "Proovedores"
-  }, {
-    icon: _iconLogo.default,
-    path: "/ContentohProducts",
-    title: "Content Oh!",
-    suboption: {
-      path: "/ContentohProducts",
-      title: "Productos"
-    }
   }, {
     icon: _iconTask.default,
-    path: "/tasks/7",
+    path: "/tasks",
     title: "Tareas"
   }]
 };

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

@@ -17,27 +17,30 @@ var _iconLogoContentoh = _interopRequireDefault(require("../../../assets/images/
 
 var _iconLogo = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconLogo.svg"));
 
-var _openMenu = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/openMenu.svg"));
-
-var _closeMenu = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/closeMenu.svg"));
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactRouterDom = require("react-router-dom");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
   var menuoption = _ref.menuoption;
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       trueBar = _useState2[0],
       setTrueBar = _useState2[1];
 
-  var sub;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     className: trueBar,
     bar: trueBar,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    onMouseOver: function onMouseOver() {
+      return setTrueBar(true);
+    },
+    onMouseOut: function onMouseOut() {
+      return setTrueBar(false);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "navbar-top",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
         src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
@@ -45,28 +48,26 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
         className: "logo"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "option",
-        children: menuoption.map(function (item) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: menuoption.map(function (item, index) {
+          var _item$suboption;
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+              href: item.path,
               className: "option-link",
-              exact: true,
-              activeClassName: "active",
-              to: item.path,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
                 src: item.icon,
-                alt: item.title,
-                width: "25px"
+                alt: item.title
               }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
                 children: item.title
               })]
-            }), item.suboption === undefined ? "" : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-              children: menuoption[1].suboption.map(function (subitem) {
+            }), item.suboption !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                   className: "sub-option",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                    exact: true,
-                    activeClassName: "active",
-                    to: subitem.path,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                    href: subitem.path,
+                    className: "sub-option-link",
                     children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
                       children: subitem.title
                     })
@@ -74,21 +75,10 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
                 });
               })
             })]
-          });
+          }, index);
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "menu-bottom",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: trueBar ? _closeMenu.default : _openMenu.default,
-        alt: "Open Menu",
-        onClick: function onClick() {
-          {
-            trueBar ? setTrueBar("") : setTrueBar("actived");
-          }
-        }
-      })
-    })]
+    })
   });
 };
 

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

@@ -11,41 +11,41 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _reactRouterDom = require("react-router-dom");
-
 var _templateObject;
 
-//styled(NavLink)
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 58px;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: auto;\n  border-radius: 50px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  &.actived {\n    width: 200px;\n    padding: 23px 10px 15px 10px;\n    border-radius: 20px;\n  }\n  .navbar-top {\n    .logo {\n      & + * {\n        margin-top: ", "%;\n      }\n    }\n    .option {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding-left: ", "px;\n      div {\n        height: ", "px;\n        width: ", "px;\n        display: flex;\n        justify-content: ", ";\n        border-radius: ", "px;\n        align-items: center;\n        font-family: \"Raleway\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 21px;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        text-decoration: none;\n        &.option-link {\n          cursor: pointer;\n          margin-top: 12px;\n          padding-left: ", "px;\n        }\n        p {\n          cursor: pointer;\n        }\n        img {\n          & + * {\n            margin-left: 12px;\n          }\n        }\n      }\n      .option-link:hover {\n        background: #e33aa9;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: ", "px;\n        height: auto;\n        width: auto;\n        div {\n          display: flex;\n          justify-content: flex-start;\n          text-decoration: none;\n          position: relative;\n          font-size: 13px;\n          border-left: 1px solid #f0eef2;\n          border-radius: 0;\n          color: #f0eef2;\n          padding-top: 20px;\n          padding-left: 12px;\n          height: 25px;\n          &::before {\n            border-left: 1px solid #e33aa9;\n            width: 10px;\n            content: \"\";\n            border-radius: 50%;\n            height: 10px;\n            background-color: white;\n            position: absolute;\n            left: ", "%;\n            bottom: 1%;\n          }\n        }\n      }\n    }\n  }\n  .menu-bottom {\n    display: flex;\n    justify-content: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 98%;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: auto;\n  width: ", "px;\n  border-radius: ", "px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 10px 0 10px 20px;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    transition: all 0.3s linear;\n    .option {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      margin-top: ", "%;\n      padding-left: ", "px;\n      .active {\n        background: #e33aa9;\n      }\n      & + div {\n        margin-top: 5px;\n      }\n      a {\n        height: ", "px;\n        display: flex;\n        justify-content: ", ";\n        border-radius: ", "px;\n        align-items: center;\n        font-family: sans-serif;\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 21px;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        text-decoration: none;\n        &.option-link {\n          cursor: pointer;\n          width: ", "px;\n          margin: 5px 0;\n          padding-left: ", "px;\n        }\n        p {\n          cursor: pointer;\n          margin: 0%;\n          pointer-events: none;\n        }\n        img {\n          width: 22px;\n          & + * {\n            margin-left: 12px;\n          }\n        }\n      }\n      .option-link:hover {\n        background: #e33aa9;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: ", "px;\n        height: auto;\n        width: auto;\n        a {\n          display: flex;\n          justify-content: flex-start;\n          text-decoration: none;\n          position: relative;\n          font-size: 13px;\n          border-left: 1px solid #f0eef2;\n          border-radius: 0;\n          color: #f0eef2;\n          padding-top: 14px;\n          padding-left: 12px;\n          height: 25px;\n          &::before {\n            border-left: 1px solid #e33aa9;\n            width: 10px;\n            content: \"\";\n            border-radius: 50%;\n            height: 10px;\n            background-color: white;\n            position: absolute;\n            bottom: 0;\n            left: ", "%;\n          }\n          &.active {\n            background: none;\n            &::before {\n              background-color: #e33aa9;\n            }\n          }\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var bar = _ref.bar;
-  return bar === "" ? 145 : 50;
+  return bar ? 210 : 58;
 }, function (_ref2) {
   var bar = _ref2.bar;
-  return bar ? 5 : 0;
+  return bar ? 20 : 50;
 }, function (_ref3) {
   var bar = _ref3.bar;
-  return bar ? 32 : 38;
+  return bar === "" ? 145 : 50;
 }, function (_ref4) {
   var bar = _ref4.bar;
-  return bar ? 165 : 38;
+  return bar ? 5 : 0;
 }, function (_ref5) {
   var bar = _ref5.bar;
-  return bar ? "flex-start" : "center";
+  return bar ? 32 : 38;
 }, function (_ref6) {
   var bar = _ref6.bar;
-  return bar ? 18 : 100;
+  return bar ? "flex-start" : "center";
 }, function (_ref7) {
   var bar = _ref7.bar;
-  return bar ? 15 : 0;
+  return bar ? 18 : 100;
 }, function (_ref8) {
   var bar = _ref8.bar;
-  return bar ? 28 : 20;
+  return bar ? "160" : "38";
 }, function (_ref9) {
   var bar = _ref9.bar;
-  return bar ? -4 : -16;
+  return bar ? 15 : 0;
 }, function (_ref10) {
   var bar = _ref10.bar;
-  return bar ? "flex-end" : "center";
+  return bar ? 28 : 20;
+}, function (_ref11) {
+  var bar = _ref11.bar;
+  return bar ? -4 : -34;
 });
 
 exports.Container = Container;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ApproveRejetPanelDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/ApproveRejetPanel",
+  component: _index.ApproveRejetPanel
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ApproveRejetPanel, args);
+};
+
+var ApproveRejetPanelDefault = Template.bind({});
+exports.ApproveRejetPanelDefault = ApproveRejetPanelDefault;
+ApproveRejetPanelDefault.args = {
+  text: "113 productos",
+  check: false
+};

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ApproveRejetPanel = void 0;
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _Avatar = require("../../atoms/Avatar");
+
+var _styles = require("./styles");
+
+var _approveRejetPanelDelete = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelDelete.svg"));
+
+var _approveRejetPanelCancel = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelCancel.svg"));
+
+var _approveRejetPanelSave = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelSave.svg"));
+
+var _approveRejetPanelExclude = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelExclude.svg"));
+
+var _variables = require("../../../global-files/variables");
+
+var ApproveRejetPanel = function ApproveRejetPanel(_ref) {
+  var text = _ref.text,
+      check = _ref.check;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4,
+    text: text
+  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    image: _approveRejetPanelDelete.default,
+    imageType: "big-image",
+    altText: "delete button"
+  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    image: check ? _approveRejetPanelCancel.default : _approveRejetPanelExclude.default,
+    imageType: "big-image",
+    altText: check ? "cancel button" : "exclude button"
+  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    image: check ? _approveRejetPanelSave.default : _approveRejetPanelExclude.default,
+    imageType: "big-image",
+    altText: check ? "save button" : "exclude button"
+  }));
+};
+
+exports.ApproveRejetPanel = ApproveRejetPanel;

package/dist/components/molecules/ApproveRejetPanel/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  display: flex;\n  justify-content: end;\n  align-items: center;\n  .date-header + * {\n    margin-left: 30px;\n  }\n  .big-image + * {\n    margin-left: 10px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/SignInLoginCreationApp/SignInLogin.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SignInLoginCreationAppDefault = 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/molecules/SignInLoginCreationApp",
+  component: _index.SignInLoginCreationApp
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SignInLoginCreationApp, (0, _objectSpread2.default)({}, args));
+};
+
+var SignInLoginCreationAppDefault = Template.bind({});
+exports.SignInLoginCreationAppDefault = SignInLoginCreationAppDefault;
+SignInLoginCreationAppDefault.args = {};

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

@@ -0,0 +1,270 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SignInLoginCreationApp = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/LogoImage/index");
+
+var _index2 = require("../../atoms/ScreenHeader/index");
+
+var _index3 = require("../../atoms/GeneralButton/index");
+
+var _index4 = require("../../atoms/CheckBox/index");
+
+var _TagAndInput = require("../TagAndInput");
+
+var _variables = require("../../../global-files/variables");
+
+var _react = require("react");
+
+var _Loading = require("../../atoms/Loading");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyEmail = _useState2[0],
+      setEmptyEmail = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      invalidEmail = _useState4[0],
+      setInvalidEmail = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyPassword = _useState6[0],
+      setEmptyPassword = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(true),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      showErrors = _useState8[0],
+      setShowErrors = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      signInError = _useState10[0],
+      setSignInError = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      loading = _useState12[0],
+      setLoading = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      upgradePlanRedirect = _useState14[0],
+      setUpgradePlanRedirect = _useState14[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var valid, email, password, session, userGroup, response, userGroupValue, user, company;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              setSignInError("");
+              setShowErrors(true);
+              valid = true;
+              email = document.querySelector("#emailInput").value.trim();
+              password = document.querySelector("#passwordInput").value;
+              !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
+
+              if (email === "") {
+                valid = false;
+                setEmptyEmail(true);
+              } else {
+                setEmptyEmail(false);
+              }
+
+              if (password === "") {
+                valid = false;
+                setEmptyPassword(true);
+              } else {
+                setEmptyPassword(false);
+              }
+
+              if (!valid) {
+                _context.next = 35;
+                break;
+              }
+
+              _context.prev = 10;
+              setLoading(true);
+              _context.next = 14;
+              return props.Auth.signIn(email, password);
+
+            case 14:
+              session = _context.sent;
+
+              if (!(session.challengeName === "NEW_PASSWORD_REQUIRED")) {
+                _context.next = 20;
+                break;
+              }
+
+              props.setUser(session);
+              props.setPaso(8);
+              _context.next = 28;
+              break;
+
+            case 20:
+              userGroup = session.signInUserSession.accessToken.payload["cognito:groups"];
+              _context.next = 23;
+              return _axios.default.get(process.env.REACT_APP_USER_ENDPOINT, {
+                headers: {
+                  Authorization: session.signInUserSession.idToken.jwtToken
+                }
+              });
+
+            case 23:
+              response = _context.sent;
+              console.log(userGroup);
+              console.log(userGroup[0]);
+              userGroupValue = typeof userGroup === "string" ? userGroup : userGroup[0];
+
+              if (userGroupValue === "colaboradores_contentoh") {
+                sessionStorage.setItem("auth", true);
+                sessionStorage.setItem("jwt", session.signInUserSession.idToken.jwtToken);
+                user = JSON.parse(response.data.body).data[0];
+                company = JSON.parse(response.data.body).data[1];
+                caches.keys().then(function (names) {
+                  names.forEach(function (name) {
+                    caches.delete(name);
+                  });
+                });
+                user.src = "https://".concat(process.env.REACT_APP_IMAGES_PROFILE_BUCKET, ".s3.amazonaws.com/id-").concat(user.id_user, "/").concat(user.id_user, ".png?").concat(new Date().getTime());
+                sessionStorage.setItem("user", JSON.stringify(user));
+                sessionStorage.setItem("company", JSON.stringify(company));
+                setUpgradePlanRedirect(true);
+              } else {
+                setSignInError("NotAuthorizedException");
+                setLoading(false);
+              }
+
+            case 28:
+              _context.next = 35;
+              break;
+
+            case 30:
+              _context.prev = 30;
+              _context.t0 = _context["catch"](10);
+              console.log(_context.t0);
+              setLoading(false);
+
+              if (_context.t0.code === "NotAuthorizedException") {
+                setSignInError("NotAuthorizedException");
+              } else if (_context.t0.code === "UserNotConfirmedException") {
+                sessionStorage.setItem("email", JSON.stringify(document.querySelector("#usernameInput").value));
+                props.setPaso(5);
+              } else {
+                setSignInError("Error");
+              }
+
+            case 35:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[10, 30]]);
+    }));
+
+    return function validate(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    sessionStorage.getItem("resetPasswordProcess") && sessionStorage.removeItem("resetPasswordProcess");
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (upgradePlanRedirect) setLoading(false);
+  }, [upgradePlanRedirect]);
+  return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      className: "home-login",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "main-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "credenciales",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
+            fontFamily: _variables.FontFamily.AvenirNext,
+            color: _variables.GlobalColors.s5,
+            text: "Ingresa tus credenciales"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "user",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+            inputType: "text",
+            label: "Nombre de usuario",
+            inputPlaceHolder: "username@contentoh.com",
+            inputId: "emailInput"
+          })
+        }), showErrors && emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ingrese su correo"
+        }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ingrese un correo v\xE1lido"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "password",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+            inputType: "password",
+            label: "Contraseña",
+            inputPlaceHolder: "Escribe tu contraseña",
+            inputId: "passwordInput"
+          })
+        }), showErrors && emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ingrese su contrase\xF1a"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "select",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.CheckBox, {
+            label: "Mantener sesión activada",
+            id: "chk-default",
+            className: "active-left"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            onClick: function onClick() {
+              return props.setPaso(10);
+            },
+            className: "active-right",
+            children: "Olvide mi contrase\xF1a"
+          })]
+        }), showErrors && signInError === "NotAuthorizedException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Correo o contrase\xF1a incorrectos"
+        }), showErrors && signInError === "Error" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ha habido un problema al iniciar sesi\xF3n"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "button-right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
+            buttonType: "general-default-button",
+            label: "Iniciar sesión",
+            onClick: function onClick(e) {
+              return validate(e);
+            }
+          })
+        })]
+      })
+    }), upgradePlanRedirect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Redirect, {
+      to: {
+        pathname: "/dashboard"
+      }
+    })]
+  });
+};
+
+exports.SignInLoginCreationApp = SignInLoginCreationApp;

package/dist/components/molecules/SignInLoginCreationApp/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  background: \"white\";\n  display: flex;\n  height: 100vh;\n  width: 50%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n    & + * {\n      margin-top: 12px;\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n        cursor: pointer;\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        cursor: pointer;\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  .main-container {\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta);
+
+exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.2.20",
+  "version": "21.2.23",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/InputFormatter/index.js

@@ -22,7 +22,10 @@ export const InputFormatter = ({
   const maxLength = maxChar ? maxChar : 999;
 
   const getValue = (value) => {
-    let temp = value.replace(/\n/gm, "<br>").replace(/\&(nbsp;|amp;)/gm, " ");
+    let temp = value
+      .replace(/\n/gm, "<br>")
+      .replace(/\&nbsp;/gm, " ")
+      .replace(/\&amp;/gm, "&");
     return temp;
   };
 
@@ -37,7 +40,8 @@ export const InputFormatter = ({
     return value
       .replace(/<\/p><p>/gm, "\n")
       .replace(/<\/?br>|<\/?p>/gm, "")
-      .replace(/\&(nbsp;|amp;)/gm, " ");
+      .replace(/\&nbsp;/gm, " ")
+      .replace(/\&amp;/gm, "&");
   };
 
   const onChange = (valueInput, delta, user, h) => {
@@ -49,7 +53,8 @@ export const InputFormatter = ({
           .replace(/<\/li>/gm, "\n")
           .replace(/<\/p><p>/gm, "\n")
           .replaceAll(/<\/?(?!\/?strong).*?>/gm, "")
-          .replace(/\&(nbsp;|amp;)/gm, " ");
+          .replace(/\&nbsp;/gm, " ")
+          .replace(/\&amp;/gm, "&");
         setInputValue(valueInput);
         value = unformattedText;
       } else {

package/src/components/atoms/VerticalSideMenuMainPage/VerticalSideMenuMainPage.stories.js

@@ -15,21 +15,26 @@ const Template = (args) => <VerticalSideMenuMainPage {...args} />;
 export const VerticalSideMenuMainPageDefault = Template.bind({});
 
 VerticalSideMenuMainPageDefault.args = {
-  menuoption: [
-    { icon: iconSpeedometer, path: "/Dashboard", title: "Dashborad" },
+   menuoption : [
+    { icon: iconSpeedometer, path: "/Dashboard", title: "Dashboard" },
     {
-      icon: iconProduct,
-      path: "/products",
+      icon: iconGroup,
+      path: "/Products",
       title: "Productos",
-      suboption: [{ path: "/Dashboard", title: "General" },{ path: "/AddProducts", title: "Agregar Producto" }],
     },
-    { icon: iconGroup, path: "/providers", title: "Proovedores" },
-    {  
-      icon: iconLogo,
-      path: "/ContentohProducts",
-      title: "Content Oh!",
-      suboption: { path: "/ContentohProducts", title: "Productos" },
+    {
+      icon: iconProduct,
+      path: "/Orders",
+      title: "Proveedor",
+      suboption: [
+        { path: "/Orders", title: "Ordenes" },
+        { path: "/Entregas", title: "Entregas" },
+      ],
+    },
+    {
+      icon: iconTask,
+      path: "/tasks",
+      title: "Tareas",
     },
-    { icon: iconTask, path: "/tasks/7", title: "Tareas" },
-  ],
+  ]
 };

package/src/components/atoms/VerticalSideMenuMainPage/index.js

@@ -1,15 +1,18 @@
 import { Container } from "./styles";
 import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
 import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
-import openMenu from "../../../assets/images/verticalSideMenuMainPage/openMenu.svg";
-import closeMenu from "../../../assets/images/verticalSideMenuMainPage/closeMenu.svg";
 import React, { useState } from "react";
+import { NavLink } from "react-router-dom";
 
 export const VerticalSideMenuMainPage = ({ menuoption }) => {
-  const [trueBar, setTrueBar] = useState("");
-  let sub;
+  const [trueBar, setTrueBar] = useState();
   return (
-    <Container className={trueBar} bar={trueBar}>
+    <Container
+      className={trueBar}
+      bar={trueBar}
+      onMouseOver={() => setTrueBar(true)}
+      onMouseOut={() => setTrueBar(false)}
+    >
       <div className="navbar-top">
         <img
           src={trueBar ? iconLogoContentoh : iconLogo}
@@ -17,45 +20,27 @@ export const VerticalSideMenuMainPage = ({ menuoption }) => {
           className="logo"
         ></img>
         <div className="option">
-          {menuoption.map((item) => (
-            <>
-              <div
-                className="option-link"
-                exact
-                activeClassName="active"
-                to={item.path}
-              >
-                <img src={item.icon} alt={item.title} width={"25px"}></img>
+          {menuoption.map((item, index) => (
+            <div key={index}>
+              <a href={item.path} className="option-link">
+                <img src={item.icon} alt={item.title}></img>
                 {trueBar && <p>{item.title}</p>}
-              </div>
-              {item.suboption === undefined ? (
-                ""
-              ) : (
+              </a>
+              {item.suboption !== undefined && (
                 <>
-                  {menuoption[1].suboption.map((subitem) => (
+                  {item?.suboption?.map((subitem) => (
                     <div className="sub-option">
-                      <div exact activeClassName="active" to={subitem.path}>
+                      <a href={subitem.path} className="sub-option-link">
                         {trueBar && <p>{subitem.title}</p>}
-                      </div>
+                      </a>
                     </div>
                   ))}
                 </>
               )}
-            </>
+            </div>
           ))}
         </div>
       </div>
-      <div className="menu-bottom">
-        <img
-          src={trueBar ? closeMenu : openMenu}
-          alt="Open Menu"
-          onClick={() => {
-            {
-              trueBar ? setTrueBar("") : setTrueBar("actived");
-            }
-          }}
-        ></img>
-      </div>
     </Container>
   );
 };

package/src/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -1,43 +1,44 @@
 import styled from "styled-components";
-import { NavLink } from "react-router-dom"; 
-//styled(NavLink)
+
 export const Container = styled.div`
-  height: 100%;
-  width: 58px;
+  height: 98%;
   box-sizing: border-box;
   padding: 23px 10px 70px 10px;
   flex-direction: column;
   justify-content: space-between;
   overflow: auto;
-  border-radius: 50px;
+  width: ${({ bar }) => (bar ? 210 : 58)}px;
+  border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
   background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
   scrollbar-width: none;
   display: flex;
   text-align: center;
-  &.actived {
-    width: 200px;
-    padding: 23px 10px 15px 10px;
-    border-radius: 20px;
+  transition: width 0.3s linear;
+  margin: 10px 0 10px 20px;
+  & + * {
+    margin-left: 30px;
   }
   .navbar-top {
-    .logo {
-      & + * {
-        margin-top: ${({ bar }) => (bar === "" ? 145 : 50)}%;
-      }
-    }
+    transition: all 0.3s linear;
     .option {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      margin-top: ${({ bar }) => (bar === "" ? 145 : 50)}%;
       padding-left: ${({ bar }) => (bar ? 5 : 0)}px;
-      div {
+      .active {
+        background: #e33aa9;
+      }
+      & + div {
+        margin-top: 5px;
+      }
+      a {
         height: ${({ bar }) => (bar ? 32 : 38)}px;
-        width: ${({ bar }) => (bar ? 165 : 38)}px;
         display: flex;
         justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
         border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
         align-items: center;
-        font-family: "Raleway";
+        font-family: sans-serif;
         font-style: normal;
         font-weight: 400;
         font-size: 18px;
@@ -47,13 +48,17 @@ export const Container = styled.div`
         text-decoration: none;
         &.option-link {
           cursor: pointer;
-          margin-top: 12px;
+          width: ${({ bar }) => (bar ? "160" : "38")}px;
+          margin: 5px 0;
           padding-left: ${({ bar }) => (bar ? 15 : 0)}px;
         }
         p {
           cursor: pointer;
+          margin: 0%;
+          pointer-events: none;
         }
         img {
+          width: 22px;
           & + * {
             margin-left: 12px;
           }
@@ -68,7 +73,7 @@ export const Container = styled.div`
         padding-left: ${({ bar }) => (bar ? 28 : 20)}px;
         height: auto;
         width: auto;
-        div {
+        a {
           display: flex;
           justify-content: flex-start;
           text-decoration: none;
@@ -77,7 +82,7 @@ export const Container = styled.div`
           border-left: 1px solid #f0eef2;
           border-radius: 0;
           color: #f0eef2;
-          padding-top: 20px;
+          padding-top: 14px;
           padding-left: 12px;
           height: 25px;
           &::before {
@@ -88,16 +93,17 @@ export const Container = styled.div`
             height: 10px;
             background-color: white;
             position: absolute;
-            left: ${({ bar }) => (bar ? -4 : -16)}%;
-            bottom: 1%;
+            bottom: 0;
+            left: ${({ bar }) => (bar ? -4 : -34)}%;
+          }
+          &.active {
+            background: none;
+            &::before {
+              background-color: #e33aa9;
+            }
           }
         }
       }
     }
   }
-  .menu-bottom {
-    display: flex;
-    justify-content: ${({ bar }) => (bar ? "flex-end" : "center")};
-    cursor: pointer;
-  }
 `;