npm - contentoh-components-library - Versions diffs - 21.2.48 → 21.2.51 - Mend

contentoh-components-library 21.2.48 → 21.2.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/assets/images/customSelect/starIcon.svg ADDED Viewed

@@ -0,0 +1,14 @@
+<svg id="Componente_34_12" data-name="Componente 34 – 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectángulo_107" data-name="Rectángulo 107" width="10" height="10" transform="translate(3 3)" fill="#b3b3b3" stroke="#b3b3b3" stroke-width="1"/>
+    </clipPath>
+  </defs>
+  <g id="Rectángulo_287" data-name="Rectángulo 287" fill="#fff" stroke="#f0f0f0" stroke-width="1">
+    <rect width="16" height="16" rx="8" stroke="none"/>
+    <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="none"/>
+  </g>
+  <g id="Enmascarar_grupo_79" data-name="Enmascarar grupo 79" clip-path="url(#clip-path)">
+    <path id="star_FILL0_wght400_GRAD0_opsz48" d="M4.037,9.438,6,8.262,7.963,9.45,7.438,7.225l1.725-1.5-2.275-.2L6,3.425,5.113,5.512l-2.275.2,1.725,1.5ZM2.912,11l.813-3.512L1,5.125l3.6-.312L6,1.5,7.4,4.813l3.6.313L8.275,7.488,9.087,11,6,9.137ZM6,6.563Z" transform="translate(2 1.5)" fill="#b3b3b3"/>
+  </g>
+</svg>

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

@@ -17,18 +17,27 @@ var _reactRouterDom = require("react-router-dom");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n  padding: 23px 0 70px 0;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: none;\n  width: ", "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: 0;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    .logo {\n      height: 22px;\n    }\n    .option {\n      .option-div {\n        width: 100%;\n        & + div {\n          margin-top: 10px;\n        }\n      }\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-top: 50px;\n      .active {\n        //background: #c8489c;\n        text-decoration: none;\n        background: #e33aa9;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: 32px;\n        height: auto;\n        width: auto;\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n  padding: 23px 0 70px 0;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: none;\n  width: ", "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: 0;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    .logo {\n      height: 22px;\n    }\n    .option {\n      .option-div {\n        width: 100%;\n        white-space: nowrap;\n      }\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-top: 50px;\n      .active {\n        text-decoration: none;\n        background: rgba(255, 255, 255, 0.1);\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: 32px;\n        height: auto;\n        width: auto;\n        &:last-child {\n          margin-bottom: 10px;\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var bar = _ref.bar;
   return bar ? 240 : 66;
 });
 exports.Container = Container;
-var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 38px;\n  display: flex;\n  justify-content: ", ";\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  cursor: pointer;\n  padding: ", "px;\n  &:hover {\n    background: #e33aa9;\n    color: #fafafa;\n    text-decoration: none;\n  }\n  p {\n    cursor: pointer;\n    margin: 0%;\n    pointer-events: none;\n  }\n  img {\n    height: 22px;\n    position: absolute;\n    left: 22px;\n    & + * {\n      margin-left: 30px;\n    }\n  }\n  &.sub-option-link {\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    height: 25px;\n    margin: 0;\n    padding-left: 12px;\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: -6px;\n    }\n    &.active {\n      background: none !important;\n      color: #fafafa;\n      text-decoration: none;\n      //transition: all 0.3s linear;\n      &::before {\n        background-color: #e33aa9;\n      }\n    }\n    &:hover {\n      background: none;\n    }\n  }\n"])), function (_ref2) {
+var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 42px;\n  display: flex;\n  justify-content: ", ";\n  align-items: center;\n  font-family: sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 21px;\n  letter-spacing: -0.015em;\n  transition: color 0.3s linear;\n  color: ", ";\n  text-decoration: none;\n  cursor: pointer;\n  padding: ", "px;\n  &:hover {\n    background: rgba(255, 255, 255, 0.2);\n    color: #fafafa;\n    text-decoration: none;\n  }\n  p {\n    cursor: pointer;\n    margin: 0%;\n    pointer-events: none;\n  }\n  img {\n    height: 22px;\n    position: absolute;\n    left: 22px;\n    & + * {\n      margin-left: 30px;\n    }\n  }\n  &.sub-option-link {\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    transition: color 0.3s linear;\n    color: ", ";\n    padding-top: 14px;\n    height: 25px;\n    margin: 0;\n    padding-left: 12px;\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: -6px;\n    }\n    &.active {\n      background: none !important;\n      text-decoration: none;\n      transition: color 0.3s linear;\n      color: ", ";\n      &::before {\n        background-color: #e33aa9;\n      }\n    }\n    &:hover {\n      background: none;\n    }\n  }\n"])), function (_ref2) {
   var bar = _ref2.bar;
   return bar ? "flex-start" : "center";
 }, function (_ref3) {
   var bar = _ref3.bar;
+  return bar ? "#fafafa" : "transparent";
+}, function (_ref4) {
+  var bar = _ref4.bar;
   return bar ? "0 22" : "0 8";
+}, function (_ref5) {
+  var bar = _ref5.bar;
+  return bar ? "#f0eef2" : "transparent";
+}, function (_ref6) {
+  var bar = _ref6.bar;
+  return bar ? "#fafafa" : "transparent";
 });
 exports.NavLinkOption = NavLinkOption;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -35,9 +35,12 @@ var CustomSelect = function CustomSelect(_ref) {
       _ref$customSelectId = _ref.customSelectId,
       customSelectId = _ref$customSelectId === void 0 ? "defaultSelectId" : _ref$customSelectId,
       defaultOption = _ref.defaultOption,
-      setParameterArray = _ref.setParameterArray;
+      setParameterArray = _ref.setParameterArray,
+      onClickItem = _ref.onClickItem,
+      icon = _ref.icon,
+      customOptions = _ref.customOptions;
-  var _useState = (0, _react.useState)(options || []),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       filters = _useState2[0],
       setFilters = _useState2[1];
@@ -83,7 +86,25 @@ var CustomSelect = function CustomSelect(_ref) {
     var end = new Date();
     setStartDate(start);
     setEndDate(end);
-  }, []);
+    var obj = {};
+    options.forEach(function (o) {
+      var name = o.name,
+          isSelected = o.isSelected,
+          subOptions = o.subOptions;
+      if (isSelected) obj[name] = {};
+      subOptions === null || subOptions === void 0 ? void 0 : subOptions.forEach(function (so) {
+        var nameSO = so.name,
+            isSelectedSO = so.isSelected;
+        if (isSelectedSO) {
+          if (!obj[name]) obj[name] = {};
+          obj[name][nameSO] = true;
+        }
+      });
+    });
+    setActiveFilters(obj);
+    setFilters(options);
+  }, [options]);
   var onChangeDatePicker = function onChangeDatePicker(dates) {
     var _dates = (0, _slicedToArray2.default)(dates, 2),
@@ -113,18 +134,23 @@ var CustomSelect = function CustomSelect(_ref) {
   }, [text]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     id: customSelectId,
+    selectLabel: selectLabel,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "button-list",
       onClick: function onClick() {
         return setShowList(!showList);
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: [selectLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: selectLabel
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: icon,
+        alt: "Favorite",
+        width: "20px"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "arrow-item",
         children: "\u25C0"
       })]
-    }), showList && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), showList && (customOptions ? customOptions : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "select-container",
       children: [showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "search-bar-filter",
@@ -140,7 +166,7 @@ var CustomSelect = function CustomSelect(_ref) {
       }), defaultOption && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "default-option",
         onClick: function onClick() {
-          setParameterArray([]);
+          setParameterArray && setParameterArray([]);
           setActiveFilters({});
           setShowList(false);
         },
@@ -163,11 +189,12 @@ var CustomSelect = function CustomSelect(_ref) {
             customSelectId: customSelectId,
             setParameterArray: setParameterArray,
             activeFilters: activeFilters,
-            setActiveFilters: setActiveFilters
+            setActiveFilters: setActiveFilters,
+            onClickItem: onClickItem
           }, customSelectId + option.id);
         })
       })]
-    }), showDatePicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
+    })), showDatePicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
       onChange: onChangeDatePicker,
       startDate: startDate,
       endDate: endDate

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

@@ -15,6 +15,8 @@ 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\n  .button-list {\n    font-family: ", ";\n    font-size: 13px;\n    display: flex;\n    padding: 10px 15px;\n    justify-content: space-between;\n    border-radius: 50px;\n    background-color: #fff;\n    border: 1px solid #f0f0f0;\n    cursor: pointer;\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          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);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  position: relative;\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: #fff;\n    border: 1px solid #f0f0f0;\n    cursor: pointer;\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          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";
+});
 exports.Container = Container;

package/dist/components/pages/Dashboard/Dashboard.stories.js CHANGED Viewed

@@ -27,37 +27,37 @@ var DashboardDeafult = Template.bind({});
 exports.DashboardDeafult = DashboardDeafult;
 DashboardDeafult.args = {
   user: {
-    id_user: 59,
-    name: "The Home",
-    last_name: "Depot",
-    email: "cadena.ismael@allfreemail.net",
-    position: "Admin",
+    id_user: 28,
+    name: "Proveedor",
+    last_name: "Colgate",
+    email: "ilopez@contentoh.com",
+    position: "Prueba Admin",
     telephone: "+523111366336",
     country: "México",
-    id_company: 7,
-    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
-    id_stripe: "",
+    id_stripe: "cus_KuEt6R6vwmN09f",
     id_role: 0,
     active: 1,
-    is_retailer: 1,
+    is_retailer: 0,
     email_notify: 1,
     membership: {
-      id: 24,
-      start_date: "2021-11-23T03:35:50.000Z",
-      end_date: "2022-11-23T03:35:50.000Z",
-      planID: 9,
-      plan: "prod_KtlkzZVGq6bRTO",
-      name: "Plan Enterprise Full",
-      user_limit: "30",
-      products_limit: "10000",
+      id: 76,
+      start_date: "2022-01-18T17:25:35.000Z",
+      end_date: "2023-01-18T17:25:35.000Z",
+      planID: 8,
+      plan: "prod_KtlhECVSFG2iro",
+      name: "Plan Pro",
+      user_limit: "20",
+      products_limit: "5000",
       type: "Enterprise"
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1663928202230"
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1662994279777"
   },
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmY2IzMGVjYi1lMjc1LTQyM2UtYjQwMi05YTBjMWNjNzM2YzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MzkyODIwMCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjYzOTMxODAwLCJpYXQiOjE2NjM5MjgyMDAsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.E5NPYa6ucsQGTij8gzihdT2zv7gmJwxCZwrbBnQSYXIBw7cMK7U0eC7z4VBEm3tFYCA9SoxIdQtfuGj_lw2-CaXqkkMu4929TtlrrK_nVHYlwsXMSGIW3bComTb2toX8bshD1kd3FnNBFujhrQ-ouuBfQjy2d4fVZA1M4sZi_eT8Lxjo1uI_LfgYxrlS8_IKgfz71NuM-Uc2vxidm2_AG0g7PboSPW24bv1R-Lv272hoR_SmjBPY-I2Pw8DTZwQxWmtoU_MOx1YnY97qx5G6zqbTsjbNYkk97xPb87tKQTo946pB80fOkipTrD2xwhc8AOZQywwKa5NT4nGayDKLdg"
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg"
 };

package/dist/components/pages/Dashboard/index.js CHANGED Viewed

@@ -174,7 +174,7 @@ var Dashboard = function Dashboard(_ref) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              isTHDUser = user.is_retailer === 1;
+              isTHDUser = [657, 818, 819].includes(user.id_company);
               _context2.next = 3;
               return _axios.default.get("".concat(process.env.REACT_APP_RETAILER_ENDPOINT), {
                 headers: {

package/package.json CHANGED Viewed

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

package/src/assets/images/customSelect/starIcon.svg ADDED Viewed

@@ -0,0 +1,14 @@
+<svg id="Componente_34_12" data-name="Componente 34 – 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectángulo_107" data-name="Rectángulo 107" width="10" height="10" transform="translate(3 3)" fill="#b3b3b3" stroke="#b3b3b3" stroke-width="1"/>
+    </clipPath>
+  </defs>
+  <g id="Rectángulo_287" data-name="Rectángulo 287" fill="#fff" stroke="#f0f0f0" stroke-width="1">
+    <rect width="16" height="16" rx="8" stroke="none"/>
+    <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="none"/>
+  </g>
+  <g id="Enmascarar_grupo_79" data-name="Enmascarar grupo 79" clip-path="url(#clip-path)">
+    <path id="star_FILL0_wght400_GRAD0_opsz48" d="M4.037,9.438,6,8.262,7.963,9.45,7.438,7.225l1.725-1.5-2.275-.2L6,3.425,5.113,5.512l-2.275.2,1.725,1.5ZM2.912,11l.813-3.512L1,5.125l3.6-.312L6,1.5,7.4,4.813l3.6.313L8.275,7.488,9.087,11,6,9.137ZM6,6.563Z" transform="translate(2 1.5)" fill="#b3b3b3"/>
+  </g>
+</svg>

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

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { BrowserRouter as Router, NavLink } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { createGlobalStyle } from "styled-components";
 export const Container = styled.div`
@@ -26,18 +26,15 @@ export const Container = styled.div`
     .option {
       .option-div {
         width: 100%;
-        & + div {
-          margin-top: 10px;
-        }
+        white-space: nowrap;
       }
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-top: 50px;
       .active {
-        //background: #c8489c;
         text-decoration: none;
-        background: #e33aa9;
+        background: rgba(255, 255, 255, 0.1);
       }
       .sub-option {
         display: flex;
@@ -45,28 +42,32 @@ export const Container = styled.div`
         padding-left: 32px;
         height: auto;
         width: auto;
+        &:last-child {
+          margin-bottom: 10px;
+        }
       }
     }
   }
 `;
 export const NavLinkOption = styled(NavLink)`
-  height: 38px;
+  height: 42px;
   display: flex;
   justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
   align-items: center;
   font-family: sans-serif;
   font-style: normal;
   font-weight: 400;
-  font-size: 18px;
+  font-size: 17px;
   line-height: 21px;
   letter-spacing: -0.015em;
-  color: #fafafa;
+  transition: color 0.3s linear;
+  color: ${({ bar }) => (bar ? "#fafafa" : "transparent")};
   text-decoration: none;
   cursor: pointer;
   padding: ${({ bar }) => (bar ? "0 22" : "0 8")}px;
   &:hover {
-    background: #e33aa9;
+    background: rgba(255, 255, 255, 0.2);
     color: #fafafa;
     text-decoration: none;
   }
@@ -91,7 +92,8 @@ export const NavLinkOption = styled(NavLink)`
     font-size: 13px;
     border-left: 1px solid #f0eef2;
     border-radius: 0;
-    color: #f0eef2;
+    transition: color 0.3s linear;
+    color: ${({ bar }) => (bar ? "#f0eef2" : "transparent")};
     padding-top: 14px;
     height: 25px;
     margin: 0;
@@ -109,9 +111,9 @@ export const NavLinkOption = styled(NavLink)`
     }
     &.active {
       background: none !important;
-      color: #fafafa;
       text-decoration: none;
-      //transition: all 0.3s linear;
+      transition: color 0.3s linear;
+      color: ${({ bar }) => (bar ? "#fafafa" : "transparent")};
       &::before {
         background-color: #e33aa9;
       }

package/src/components/molecules/CustomSelect/CustomSelect.stories.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { CustomSelect } from "./index";
+import iconStar from "../../../assets/images/customSelect/starIcon.svg";
 export default {
   title: "Components/molecules/CustomSelect",
@@ -8,20 +9,27 @@ export default {
 const Template = (args) => <CustomSelect {...args} />;
 export const CustomSelectDefault = Template.bind({});
 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: 47,
+      name: "Enero 2023",
+      isSelected: true,
+    },
+    {
+      id: 49,
+      name: "Mis Favoritos",
     },
-    { id: 2, value: "Eléctrico" },
-    { id: 3, value: "Ferretería" },
-    { id: 4, value: "Herramientas" },
-    { id: 5, value: "Iluminación" },
   ],
+  onClickItem: (v, id) => {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: iconStar,
+  showSearchBar: true,
+  customOptions: <p>Esto es un customOptions</p>
 };

package/src/components/molecules/CustomSelect/SelectItem.js CHANGED Viewed

@@ -7,6 +7,7 @@ export const SelecItem = ({
   setParameterArray,
   activeFilters,
   setActiveFilters,
+  onClickItem,
 }) => {
   const [showSubOptions, setShowSubOptions] = useState(false);
   const [chkGlobal, setChkGlobal] = useState(false);
@@ -17,6 +18,9 @@ export const SelecItem = ({
           id={"main-item-" + option.id}
           label={option.name}
           onChange={(e) => {
+            if (onClickItem) {
+              onClickItem(e.target.checked, option.id)
+            }
             const subOptions = option.subOptions;
             const filtersCopy = { ...activeFilters };
             if (subOptions) {
@@ -77,6 +81,9 @@ export const SelecItem = ({
                   activeFilters[option.name][sub.name]
                 }
                 onChange={(e) => {
+                  if (onClickItem) {
+                    onClickItem(e.target.checked, sub.id)
+                  }
                   if (e.target.checked) {
                     setParameterArray((current) =>
                       [...current, sub.id].sort((a, b) => a - b)

package/src/components/molecules/CustomSelect/index.js CHANGED Viewed

@@ -13,8 +13,11 @@ export const CustomSelect = ({
   customSelectId = "defaultSelectId",
   defaultOption,
   setParameterArray,
+  onClickItem,
+  icon,
+  customOptions,
 }) => {
-  const [filters, setFilters] = useState(options || []);
+  const [filters, setFilters] = useState([]);
   const [showList, setShowList] = useCloseModal(customSelectId);
   const [text, setText] = useState("");
   const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
@@ -33,7 +36,21 @@ export const CustomSelect = ({
     const end = new Date();
     setStartDate(start);
     setEndDate(end);
-  }, []);
+    const obj = {};
+    options.forEach((o) => {
+      const { name, isSelected, subOptions } = o;
+      if (isSelected) obj[name] = {};
+      subOptions?.forEach((so) => {
+        const { name: nameSO, isSelected: isSelectedSO } = so;
+        if (isSelectedSO) {
+          if (!obj[name]) obj[name] = {};
+          obj[name][nameSO] = true;
+        }
+      });
+    });
+    setActiveFilters(obj);
+    setFilters(options);
+  }, [options]);
   const onChangeDatePicker = (dates) => {
     const [start, end] = dates;
@@ -64,12 +81,18 @@ export const CustomSelect = ({
   }, [text]);
   return (
-    <Container id={customSelectId}>
+    <Container id={customSelectId} selectLabel={selectLabel}>
       <div className="button-list" onClick={() => setShowList(!showList)}>
-        <p>{selectLabel}</p>
-        <div className="arrow-item">&#9664;</div>
+        {selectLabel && <p>{selectLabel}</p>}
+        {icon ? (
+          <img src={icon} alt="Favorite" width={"20px"} />
+        ) : (
+          <div className="arrow-item">&#9664;</div>
+        )}
       </div>
-      {showList && (
+      {showList && (customOptions ?
+      customOptions
+      : (
         <div className="select-container">
           {showSearchBar && (
             <div className="search-bar-filter">
@@ -86,7 +109,7 @@ export const CustomSelect = ({
             <div
               className="default-option"
               onClick={() => {
-                setParameterArray([]);
+                setParameterArray && setParameterArray([]);
                 setActiveFilters({});
                 setShowList(false);
               }}
@@ -116,12 +139,13 @@ export const CustomSelect = ({
                   setParameterArray={setParameterArray}
                   activeFilters={activeFilters}
                   setActiveFilters={setActiveFilters}
+                  onClickItem={onClickItem}
                 />
               )
             )}
           </div>
         </div>
-      )}
+      ))}
       {showDatePicker && (
         <Calendar
           onChange={onChangeDatePicker}

package/src/components/molecules/CustomSelect/styles.js CHANGED Viewed

@@ -9,7 +9,9 @@ export const Container = styled.div`
     font-family: ${FontFamily.Raleway};
     font-size: 13px;
     display: flex;
-    padding: 10px 15px;
+    padding: ${(props) => (props.selectLabel !== "" ? "10px 15px" : "5px 5px")};
+    //padding: 10px 15px;
+    //padding: 5px 5px;
     justify-content: space-between;
     border-radius: 50px;
     background-color: #fff;

package/src/components/pages/Dashboard/Dashboard.stories.js CHANGED Viewed

@@ -9,37 +9,37 @@ const Template = (args) => <Dashboard {...args} />;
 export const DashboardDeafult = Template.bind({});
 DashboardDeafult.args = {
   user: {
-    id_user: 59,
-    name: "The Home",
-    last_name: "Depot",
-    email: "cadena.ismael@allfreemail.net",
-    position: "Admin",
+    id_user: 28,
+    name: "Proveedor",
+    last_name: "Colgate",
+    email: "ilopez@contentoh.com",
+    position: "Prueba Admin",
     telephone: "+523111366336",
     country: "México",
-    id_company: 7,
-    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
-    id_stripe: "",
+    id_stripe: "cus_KuEt6R6vwmN09f",
     id_role: 0,
     active: 1,
-    is_retailer: 1,
+    is_retailer: 0,
     email_notify: 1,
     membership: {
-      id: 24,
-      start_date: "2021-11-23T03:35:50.000Z",
-      end_date: "2022-11-23T03:35:50.000Z",
-      planID: 9,
-      plan: "prod_KtlkzZVGq6bRTO",
-      name: "Plan Enterprise Full",
-      user_limit: "30",
-      products_limit: "10000",
+      id: 76,
+      start_date: "2022-01-18T17:25:35.000Z",
+      end_date: "2023-01-18T17:25:35.000Z",
+      planID: 8,
+      plan: "prod_KtlhECVSFG2iro",
+      name: "Plan Pro",
+      user_limit: "20",
+      products_limit: "5000",
       type: "Enterprise",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1663928202230",
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1662994279777",
   },
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmY2IzMGVjYi1lMjc1LTQyM2UtYjQwMi05YTBjMWNjNzM2YzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MzkyODIwMCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjYzOTMxODAwLCJpYXQiOjE2NjM5MjgyMDAsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.E5NPYa6ucsQGTij8gzihdT2zv7gmJwxCZwrbBnQSYXIBw7cMK7U0eC7z4VBEm3tFYCA9SoxIdQtfuGj_lw2-CaXqkkMu4929TtlrrK_nVHYlwsXMSGIW3bComTb2toX8bshD1kd3FnNBFujhrQ-ouuBfQjy2d4fVZA1M4sZi_eT8Lxjo1uI_LfgYxrlS8_IKgfz71NuM-Uc2vxidm2_AG0g7PboSPW24bv1R-Lv272hoR_SmjBPY-I2Pw8DTZwQxWmtoU_MOx1YnY97qx5G6zqbTsjbNYkk97xPb87tKQTo946pB80fOkipTrD2xwhc8AOZQywwKa5NT4nGayDKLdg",
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg",
 };

package/src/components/pages/Dashboard/index.js CHANGED Viewed

@@ -55,7 +55,7 @@ export const Dashboard = ({ jwt, user }) => {
   };
   const getRetailers = async () => {
-    const isTHDUser = user.is_retailer === 1;
+    const isTHDUser = [657, 818, 819].includes(user.id_company);
     const retailersResponse = await axios.get(
       `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
       {