contentoh-components-library 21.2.51 → 21.2.53

package/.env.development

@@ -20,6 +20,7 @@ REACT_APP_READ_ORDERS_BY_STATUS=https://lqrc8jfjqi.execute-api.us-east-1.amazona
 REACT_APP_READ_REQUIRED_ORDERS=https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/read-required-orders
 REACT_APP_CATEGORY_ENDPOINT=https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/categories
 REACT_APP_READ_PROVIDERS=https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/providers
+REACT_APP_PENDING_INVITATIONS=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/pending-invitations
 
 REACT_APP_IMAGES_BUCKET=content-management-images
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK

package/.env.production

@@ -1,4 +1,4 @@
-REACT_APP_ARTICLE_DATA_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/articles-data
+ºREACT_APP_ARTICLE_DATA_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/articles-data
 REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/articles-data/datasheets
 REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/articles-data/descriptions
 REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/articles-data/images
@@ -20,6 +20,7 @@ REACT_APP_READ_ORDERS_BY_STATUS=https://6jqnpjf841.execute-api.us-east-1.amazona
 REACT_APP_READ_REQUIRED_ORDERS=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/read-required-orders
 REACT_APP_CATEGORY_ENDPOINT=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/categories
 REACT_APP_READ_PROVIDERS=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/providers
+REACT_APP_PENDING_INVITATIONS=https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/pending-invitations
 
 REACT_APP_IMAGES_BUCKET=content-management-images-prod
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK

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

@@ -11,17 +11,46 @@ var _reactChartjs = require("react-chartjs-2");
 
 require("chart.js/auto");
 
+var _react = require("react");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var Graphic = function Graphic(_ref) {
   var data = _ref.data,
       type = _ref.type,
       options = _ref.options;
+  var counter = {
+    id: "counter",
+    beforeDraw: function beforeDraw(chart, args, options) {
+      var ctx = chart.ctx,
+          _chart$chartArea = chart.chartArea,
+          top = _chart$chartArea.top,
+          right = _chart$chartArea.right,
+          bottom = _chart$chartArea.bottom,
+          left = _chart$chartArea.left,
+          width = _chart$chartArea.width,
+          height = _chart$chartArea.height;
+      var x = width / 2;
+      var y = height / 2 + options.fontSize * 0.68 / 2;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(x, height / 2, 60, 0, 2 * Math.PI);
+      ctx.fillStyle = "#E9E9E9";
+      ctx.fill();
+      ctx.strokeStyle = "#E9E9E9";
+      ctx.stroke();
+      ctx.font = "".concat(options.fontSize, "px ").concat(options.fontFamily);
+      ctx.textAlign = options.textAlign;
+      ctx.fillStyle = options.fontColor;
+      ctx.fillText(options.value, x, y);
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Chart, {
       type: type,
       data: data,
-      options: options
+      options: options,
+      plugins: type === "doughnut" ? [counter] : null
     })
   });
 };

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

@@ -11,8 +11,6 @@ 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 = {
@@ -28,26 +26,29 @@ 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: 47,
-    name: "Enero 2023",
-    isSelected: true
+    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: 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"
-  })
+    id: 5,
+    value: "Iluminación"
+  }]
 };

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

@@ -26,8 +26,7 @@ var SelecItem = function SelecItem(_ref) {
       customSelectId = _ref.customSelectId,
       setParameterArray = _ref.setParameterArray,
       activeFilters = _ref.activeFilters,
-      setActiveFilters = _ref.setActiveFilters,
-      onClickItem = _ref.onClickItem;
+      setActiveFilters = _ref.setActiveFilters;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -47,10 +46,6 @@ 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);
 
@@ -113,10 +108,6 @@ 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

@@ -36,11 +36,9 @@ var CustomSelect = function CustomSelect(_ref) {
       customSelectId = _ref$customSelectId === void 0 ? "defaultSelectId" : _ref$customSelectId,
       defaultOption = _ref.defaultOption,
       setParameterArray = _ref.setParameterArray,
-      onClickItem = _ref.onClickItem,
-      icon = _ref.icon,
-      customOptions = _ref.customOptions;
+      showFilterString = _ref.showFilterString;
 
-  var _useState = (0, _react.useState)([]),
+  var _useState = (0, _react.useState)(options || []),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       filters = _useState2[0],
       setFilters = _useState2[1];
@@ -75,6 +73,16 @@ var CustomSelect = function CustomSelect(_ref) {
       activeFilters = _useState10[0],
       setActiveFilters = _useState10[1];
 
+  var _useState11 = (0, _react.useState)(selectLabel),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      filtersString = _useState12[0],
+      setFiltersString = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(0),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      filtersCounter = _useState14[0],
+      setFiltersCounter = _useState14[1];
+
   var onChange = function onChange(evt) {
     setText(evt.target.value);
   };
@@ -86,25 +94,7 @@ 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),
@@ -132,25 +122,34 @@ var CustomSelect = function CustomSelect(_ref) {
 
     setFilters(filteredArray);
   }, [text]);
+  (0, _react.useEffect)(function () {
+    var newFiltersString = selectLabel;
+    var counter = 0;
+    var filtersArray = Object.keys(activeFilters);
+    filtersArray.length && filtersArray.forEach(function (key, index) {
+      if (index === 0) newFiltersString = key;else {
+        counter++;
+      }
+    });
+    counter > 0 && setFiltersCounter(counter);
+    setFiltersString(newFiltersString);
+  }, [activeFilters]);
   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: [selectLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: selectLabel
-      }), icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: icon,
-        alt: "Favorite",
-        width: "20px"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: filtersString
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: filtersCounter > 0 && "+".concat(filtersCounter)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "arrow-item",
         children: "\u25C0"
       })]
-    }), showList && (customOptions ? customOptions : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), showList && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "select-container",
       children: [showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "search-bar-filter",
@@ -166,9 +165,11 @@ var CustomSelect = function CustomSelect(_ref) {
       }), defaultOption && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "default-option",
         onClick: function onClick() {
-          setParameterArray && setParameterArray([]);
+          setParameterArray([]);
           setActiveFilters({});
           setShowList(false);
+          setFiltersString(selectLabel);
+          setFiltersCounter(0);
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           children: defaultOption
@@ -180,6 +181,7 @@ var CustomSelect = function CustomSelect(_ref) {
             className: "dates-select-item",
             onClick: function onClick() {
               option.function ? option.function(setShowDatePicker) : setShowDatePicker(true);
+              setFiltersString(option.name);
             },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
               children: option.name
@@ -189,12 +191,11 @@ var CustomSelect = function CustomSelect(_ref) {
             customSelectId: customSelectId,
             setParameterArray: setParameterArray,
             activeFilters: activeFilters,
-            setActiveFilters: setActiveFilters,
-            onClickItem: onClickItem
+            setActiveFilters: setActiveFilters
           }, 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

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

package/dist/components/organisms/DashboardMetric/dashboardMetricUtils.js

@@ -40,7 +40,7 @@ var getFullStatus = function getFullStatus(status) {
       return "Rechazado Proveedor";
 
     case "AP":
-      return "Aprovado Proveedor";
+      return "Aprobado Proveedor";
 
     case "RCA":
       return "Rechazado Cadena";

package/dist/components/organisms/DashboardMetric/index.js

@@ -15,6 +15,8 @@ var _Graphic = require("../../atoms/Graphic");
 
 var _dashboardMetricUtils = require("./dashboardMetricUtils");
 
+var _variables = require("../../../global-files/variables");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var DashboardMetric = function DashboardMetric(_ref) {
@@ -41,7 +43,7 @@ var DashboardMetric = function DashboardMetric(_ref) {
     return (0, _dashboardMetricUtils.getFullStatus)(key);
   }) : Object.keys(dataObject);
   var newObject = type === "doughnut" ? (0, _dashboardMetricUtils.removeOldStatus)(dataObject) : dataObject;
-  var values = Object.values(newObject);
+  var values = Object.values(newObject) || [0];
   var colorsArray = Object.keys(newObject).map(function (key) {
     return (0, _dashboardMetricUtils.getStatusColor)(key);
   });
@@ -87,13 +89,23 @@ var DashboardMetric = function DashboardMetric(_ref) {
           usePointStyle: true,
           boxWidth: 8
         }
+      },
+      counter: {
+        fontFamily: "sans-serif",
+        fontSize: 25,
+        fontColor: "#707070",
+        textAlign: "center",
+        value: (values === null || values === void 0 ? void 0 : values.reduce(function (a, b) {
+          return a + b;
+        })) || 0
       }
     },
     scales: (0, _defineProperty2.default)({}, scale, {
       ticks: {
         display: displayScale
       }
-    })
+    }),
+    showTooltips: true
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -112,6 +124,12 @@ var DashboardMetric = function DashboardMetric(_ref) {
         options: options,
         type: type
       })
+    }), type === "line" && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "x-label",
+      children: "Fechas"
+    }), type === "line" && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "y-label",
+      children: "Productos"
     })]
   });
 };

package/dist/components/organisms/DashboardMetric/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding: 24px;\n\n  .text-container {\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 17px;\n\n      &:last-of-type {\n        font-size: 12px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 5px;\n      }\n    }\n\n    & + * {\n      margin-top: 15px;\n    }\n  }\n\n  .select-container {\n    display: flex;\n\n    .select {\n      flex: 0.1 1 30%;\n\n      select {\n        width: 100%;\n      }\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .graphic-cotainer {\n    height: 320px;\n    border: 1px solid ", ";\n    padding: 10px;\n    border-radius: 5px;\n\n    div {\n      height: fill-available;\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.GlobalColors.s4, _variables.GlobalColors.s3);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding: 24px;\n  position: relative;\n\n  .text-container {\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 17px;\n\n      &:last-of-type {\n        font-size: 12px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 5px;\n      }\n    }\n\n    & + * {\n      margin-top: 15px;\n    }\n  }\n\n  .select-container {\n    display: flex;\n\n    .select {\n      flex: 0.1 1 30%;\n\n      select {\n        width: 100%;\n      }\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .graphic-cotainer {\n    height: 320px;\n    border: 1px solid ", ";\n    padding: 10px;\n    border-radius: 5px;\n\n    div {\n      height: fill-available;\n    }\n  }\n\n  & > p {\n    font-family: ", ";\n    color: ", ";\n    font-size: 17px;\n\n    &.x-label {\n      position: absolute;\n      left: 50%;\n      transform: translate(-50%);\n      bottom: 4px;\n    }\n\n    &.y-label {\n      position: absolute;\n      transform: rotate(-90deg);\n      left: -28px;\n      top: 50%;\n    }\n\n    &.center-label {\n      position: absolute;\n      top: 52%;\n      right: 58%;\n      font-size: 28px;\n      color: #000;\n      font-feature-settings: \"pnum\", \"lnum\";\n      font-family: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.GlobalColors.s4, _variables.GlobalColors.s3, _variables.FontFamily.Raleway, _variables.GlobalColors.s5, _variables.FontFamily.Raleway_600);
 
 exports.Container = Container;

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

@@ -27,37 +27,51 @@ var DashboardDeafult = Template.bind({});
 exports.DashboardDeafult = DashboardDeafult;
 DashboardDeafult.args = {
   user: {
-    id_user: 28,
-    name: "Proveedor",
-    last_name: "Colgate",
-    email: "ilopez@contentoh.com",
-    position: "Prueba Admin",
-    telephone: "+523111366336",
+    id_user: 30,
+    name: "Admin",
+    last_name: "Ulises",
+    email: "salmeron.5@hotmail.com",
+    position: "Admin",
+    telephone: "",
     country: "México",
-    id_company: 1,
-    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
+    id_company: 2,
+    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
-    id_stripe: "cus_KuEt6R6vwmN09f",
-    id_role: 0,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "",
+    id_role: 6,
     active: 1,
     is_retailer: 0,
     email_notify: 1,
     membership: {
-      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"
+      id: 2,
+      start_date: "2021-11-05T02:35:12.000Z",
+      end_date: "2022-11-05T02:34:49.000Z",
+      planID: 1,
+      plan: "prod_KtkvuFFLpOdP6e",
+      name: "Plan Free",
+      user_limit: "1",
+      products_limit: "3",
+      type: "PyMES"
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1662994279777"
+    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1664606284528"
+  },
+  company: {
+    id_company: 2,
+    trade_name: "VINÍCOLA PASO DE SERRA",
+    company_name: "VINÍCOLA PASO DE SERRA",
+    rfc: null,
+    adress: null,
+    about_company: null,
+    telephone: null,
+    web_site: null,
+    zip_code: null,
+    email: null,
+    social_link: null,
+    is_retailer: 0
   },
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg"
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6Ijg3YjQwMTMzLTE0YTMtNDgyOC1iYzE0LWU3ZTgxM2I2YmFmMSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjY0NjA2Mjg0LCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjY0NjA5ODg0LCJpYXQiOjE2NjQ2MDYyODQsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.J0L3zmJ2cZdPx4LjjscrZlPG41yCp1tOxE6WLl8K2lT_6fa-fNAQQLekKRmA9RwW--yA6z97xLu1oCjd_ZrErdc_aLMxxA2wCffh068QOD6Vil5aOCNA12QuTz7WhZlz3oOHe7hgx4PIi65u8--mstLqtmTH2_5OfoaTfcYllk1M65w-AfayozTlFaaXQID05nrwuGCc2gBl3SorBhbVvatRzCeZZjWOHRqOrxaJYY0Q97zNS6E0Nd4nPioIibUjGsKh_Hl-RUivSkDcKtszS8OYl4Alia00Ownz74rx7svZy9gpMy8t9TOonSlTTnHqOR5gPyBYO__OZMa55RiGtQ"
 };

package/dist/components/pages/Dashboard/dashboardUtils.js

@@ -14,17 +14,18 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _axios = _interopRequireDefault(require("axios"));
 
 var getProviders = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(jwt, companyId) {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(jwt, user, companyId) {
     var _JSON$parse;
 
-    var query, companies, finalArray;
+    var query, companies, _ref2, usersFinanced, _JSON$parse2, providers, finalArray;
+
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             query = companyId ? "?companyId=".concat(companyId) : "";
             _context.next = 3;
-            return _axios.default.get("".concat(process.env.REACT_APP_READ_PROVIDERS).concat(query), {
+            return _axios.default.get("".concat(user.is_retailer ? process.env.REACT_APP_PENDING_INVITATIONS : process.env.REACT_APP_READ_PROVIDERS).concat(query), {
               headers: {
                 Authorization: jwt
               }
@@ -32,10 +33,12 @@ var getProviders = /*#__PURE__*/function () {
 
           case 3:
             companies = _context.sent;
-            finalArray = transformProvidersArray(((_JSON$parse = JSON.parse(companies.data.body || "{}")) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.providers) || []);
+            _ref2 = ((_JSON$parse = JSON.parse(companies.data.body || "{}")) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.data) || {}, usersFinanced = _ref2.usersFinanced;
+            _JSON$parse2 = JSON.parse(companies.data.body || "{}"), providers = _JSON$parse2.providers;
+            finalArray = transformProvidersArray(providers || usersFinanced || []);
             return _context.abrupt("return", finalArray);
 
-          case 6:
+          case 8:
           case "end":
             return _context.stop();
         }
@@ -43,7 +46,7 @@ var getProviders = /*#__PURE__*/function () {
     }, _callee);
   }));
 
-  return function getProviders(_x, _x2) {
+  return function getProviders(_x, _x2, _x3) {
     return _ref.apply(this, arguments);
   };
 }();
@@ -62,20 +65,27 @@ var transformProvidersArray = function transformProvidersArray(array) {
 };
 
 var getCategories = /*#__PURE__*/function () {
-  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-    var _JSON$parse2;
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(user, company) {
+    var _JSON$parse3;
+
+    var isTHDUser, _ref4, financedRetailers, key, query, response, categories, categoriesKeys, subCategories, finalArray, index;
 
-    var response, categories, categoriesKeys, subCategories, finalArray, index;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            _context2.next = 2;
-            return _axios.default.get("".concat(process.env.REACT_APP_CATEGORY_ENDPOINT));
+            isTHDUser = user.is_retailer === 1;
+            _ref4 = company || {}, financedRetailers = _ref4.financedRetailers;
+            key = financedRetailers ? "financedRetailers" : "retailers";
+            query = isTHDUser || key === "financedRetailers" ? "?id=".concat(encodeURIComponent(company[key].map(function (ret) {
+              return ret.id;
+            }).join(","))) : "";
+            _context2.next = 6;
+            return _axios.default.get("".concat(process.env.REACT_APP_CATEGORY_ENDPOINT).concat(query));
 
-          case 2:
+          case 6:
             response = _context2.sent;
-            categories = (_JSON$parse2 = JSON.parse(response.data.body)) === null || _JSON$parse2 === void 0 ? void 0 : _JSON$parse2.data;
+            categories = (_JSON$parse3 = JSON.parse(response.data.body)) === null || _JSON$parse3 === void 0 ? void 0 : _JSON$parse3.data;
             categoriesKeys = Object.keys(categories || {});
             subCategories = categoriesKeys === null || categoriesKeys === void 0 ? void 0 : categoriesKeys.map(function (key) {
               return categories[key].sub_category;
@@ -101,9 +111,12 @@ var getCategories = /*#__PURE__*/function () {
                 });
               });
             });
+            finalArray.sort(function (a, b) {
+              return a.name.localeCompare(b.name);
+            });
             return _context2.abrupt("return", finalArray);
 
-          case 10:
+          case 15:
           case "end":
             return _context2.stop();
         }
@@ -111,8 +124,8 @@ var getCategories = /*#__PURE__*/function () {
     }, _callee2);
   }));
 
-  return function getCategories() {
-    return _ref2.apply(this, arguments);
+  return function getCategories(_x4, _x5) {
+    return _ref3.apply(this, arguments);
   };
 }();