contentoh-components-library 21.2.50 → 21.2.52

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/index.js

@@ -35,7 +35,8 @@ 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,
+      showFilterString = _ref.showFilterString;
 
   var _useState = (0, _react.useState)(options || []),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -72,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);
   };
@@ -111,6 +122,18 @@ 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,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -119,7 +142,9 @@ var CustomSelect = function CustomSelect(_ref) {
         return setShowList(!showList);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: selectLabel
+        children: filtersString
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: filtersCounter > 0 && "+".concat(filtersCounter)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "arrow-item",
         children: "\u25C0"
@@ -143,6 +168,8 @@ var CustomSelect = function CustomSelect(_ref) {
           setParameterArray([]);
           setActiveFilters({});
           setShowList(false);
+          setFiltersString(selectLabel);
+          setFiltersCounter(0);
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           children: defaultOption
@@ -154,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

package/dist/components/molecules/CustomSelect/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  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  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: 59,
-    name: "The Home",
-    last_name: "Depot",
-    email: "cadena.ismael@allfreemail.net",
+    id_user: 30,
+    name: "Admin",
+    last_name: "Ulises",
+    email: "salmeron.5@hotmail.com",
     position: "Admin",
-    telephone: "+523111366336",
+    telephone: "",
     country: "México",
-    id_company: 7,
-    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
+    id_company: 2,
+    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
     id_stripe: "",
-    id_role: 0,
+    id_role: 6,
     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",
-      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-59/59.png?1663928202230"
+    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.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmY2IzMGVjYi1lMjc1LTQyM2UtYjQwMi05YTBjMWNjNzM2YzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MzkyODIwMCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjYzOTMxODAwLCJpYXQiOjE2NjM5MjgyMDAsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.E5NPYa6ucsQGTij8gzihdT2zv7gmJwxCZwrbBnQSYXIBw7cMK7U0eC7z4VBEm3tFYCA9SoxIdQtfuGj_lw2-CaXqkkMu4929TtlrrK_nVHYlwsXMSGIW3bComTb2toX8bshD1kd3FnNBFujhrQ-ouuBfQjy2d4fVZA1M4sZi_eT8Lxjo1uI_LfgYxrlS8_IKgfz71NuM-Uc2vxidm2_AG0g7PboSPW24bv1R-Lv272hoR_SmjBPY-I2Pw8DTZwQxWmtoU_MOx1YnY97qx5G6zqbTsjbNYkk97xPb87tKQTo946pB80fOkipTrD2xwhc8AOZQywwKa5NT4nGayDKLdg"
+  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,25 @@ 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 response, categories, categoriesKeys, subCategories, finalArray, index;
+    var isTHDUser, key, query, 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));
-
-          case 2:
+            isTHDUser = user.is_retailer === 1;
+            key = company.financedRetailers ? "financedRetailers" : "retailers";
+            query = isTHDUser || key === "financedRetailers" ? "?id=".concat(encodeURIComponent(company[key].map(function (ret) {
+              return ret.id;
+            }).join(","))) : "";
+            _context2.next = 5;
+            return _axios.default.get("".concat(process.env.REACT_APP_CATEGORY_ENDPOINT).concat(query));
+
+          case 5:
             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 +109,12 @@ var getCategories = /*#__PURE__*/function () {
                 });
               });
             });
+            finalArray.sort(function (a, b) {
+              return a.name.localeCompare(b.name);
+            });
             return _context2.abrupt("return", finalArray);
 
-          case 10:
+          case 14:
           case "end":
             return _context2.stop();
         }
@@ -111,8 +122,8 @@ var getCategories = /*#__PURE__*/function () {
     }, _callee2);
   }));
 
-  return function getCategories() {
-    return _ref2.apply(this, arguments);
+  return function getCategories(_x4, _x5) {
+    return _ref3.apply(this, arguments);
   };
 }();
 

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

@@ -33,7 +33,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var Dashboard = function Dashboard(_ref) {
   var jwt = _ref.jwt,
-      user = _ref.user;
+      user = _ref.user,
+      company = _ref.company;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -116,6 +117,19 @@ var Dashboard = function Dashboard(_ref) {
       dateOptions = _useState28[0],
       setDateOptions = _useState28[1];
 
+  var applicants = [{
+    id: "provider",
+    name: "Proveedor"
+  }, {
+    id: "retailer",
+    name: "Cadena"
+  }];
+
+  var _useState29 = (0, _react.useState)([]),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      applicantsFilter = _useState30[0],
+      setApplicantsFilter = _useState30[1];
+
   var loadProductVersions = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(queryObject) {
       var byStatus,
@@ -227,6 +241,12 @@ var Dashboard = function Dashboard(_ref) {
             case 5:
               _ref5 = _context3.t0;
               orders = _ref5.orders;
+
+              if (orders.null) {
+                orders.total -= orders.null;
+                delete orders.null;
+              }
+
               _orders$total = orders.total, total = _orders$total === void 0 ? 0 : _orders$total, _orders$R = orders.R, R = _orders$R === void 0 ? 0 : _orders$R, _orders$ACA = orders.ACA, ACA = _orders$ACA === void 0 ? 0 : _orders$ACA, _orders$PA = orders.PA, PA = _orders$PA === void 0 ? 0 : _orders$PA;
               inProcess = Object.keys(orders).reduce(function (prev, curr) {
                 return !["total", "ACA", "PA", "R"].includes(curr) ? prev + orders[curr] : prev;
@@ -247,7 +267,7 @@ var Dashboard = function Dashboard(_ref) {
               delete orders.total;
               setProductsByStatus(orders);
 
-            case 12:
+            case 13:
             case "end":
               return _context3.stop();
           }
@@ -368,14 +388,14 @@ var Dashboard = function Dashboard(_ref) {
           case 0:
             _context5.t0 = setProviders;
             _context5.next = 3;
-            return (0, _dashboardUtils.getProviders)(jwt);
+            return (0, _dashboardUtils.getProviders)(jwt, user);
 
           case 3:
             _context5.t1 = _context5.sent;
             (0, _context5.t0)(_context5.t1);
             _context5.t2 = setCategories;
             _context5.next = 8;
-            return (0, _dashboardUtils.getCategories)();
+            return (0, _dashboardUtils.getCategories)(user, company);
 
           case 8:
             _context5.t3 = _context5.sent;
@@ -425,57 +445,70 @@ var Dashboard = function Dashboard(_ref) {
             companyId.length > 0 && (queryObject["companyId"] = companyId.join(","));
             retailerId.length > 0 && (queryObject["retailerId"] = retailerId.join(","));
             categoryId.length > 0 && (queryObject["categoryId"] = categoryId.join(","));
-            _context6.next = 7;
+            applicantsFilter.length > 0 && (queryObject["requestedBy"] = applicantsFilter.join(","));
+            _context6.next = 8;
             return loadProductsByStatus(queryObject);
 
-          case 7:
-            _context6.next = 9;
+          case 8:
+            _context6.next = 10;
             return loadRequiredProducts(queryObject);
 
-          case 9:
+          case 10:
           case "end":
             return _context6.stop();
         }
       }
     }, _callee6);
-  })), [companyId, retailerId, categoryId, datesRange]);
+  })), [companyId, retailerId, categoryId, datesRange, applicantsFilter]);
   return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "filters",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
+        showFilterString: true,
         options: dateOptions,
-        selectLabel: "Seleccionar Fecha",
+        selectLabel: "Todo el tiempo",
         placeHolder: "Buscar Fecha",
         customSelectId: "dates-select",
         parameterArray: datesRange,
         setParameterArray: setDatesRange
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
+        showFilterString: true,
         showSearchBar: true,
         options: providers,
-        selectLabel: "Seleccionar Proveedor",
+        selectLabel: "Todos los proveedores",
         placeHolder: "Buscar Proveedor",
         customSelectId: "providers-select",
         parameterArray: companyId,
         setParameterArray: setCompanyId,
         defaultOption: "Todos los proveedores"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
+        showFilterString: true,
         showSearchBar: true,
         options: categories,
-        selectLabel: "Seleccionar Departamento",
+        selectLabel: "Todas las categor\xEDas",
         placeHolder: "Buscar Departamento",
         customSelectId: "category-select",
         parameterArray: categoryId,
         setParameterArray: setCategoryId,
         defaultOption: "Todas las categorías"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
+        showFilterString: true,
         showSearchBar: true,
         options: retailers,
-        selectLabel: "Seleccionar Alcance",
+        selectLabel: "Todos los alcances",
         placeHolder: "Buscar Cadena",
         customSelectId: "retailers-select",
         parameterArray: retailerId,
         setParameterArray: setRetailerId,
         defaultOption: "Todos los alcances"
+      }), user.is_retailer === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
+        showFilterString: true,
+        options: applicants,
+        selectLabel: "Todos los solicitantes",
+        customSelectId: "applicants-select",
+        parameterArray: applicantsFilter,
+        setParameterArray: setApplicantsFilter,
+        defaultOption: "Todos los solicitantes"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "metric-cards",
@@ -499,14 +532,14 @@ var Dashboard = function Dashboard(_ref) {
         },
         type: "doughnut",
         displayLegend: true,
-        showPercent: true
+        showPercent: true,
+        displayScale: false
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DashboardMetric.DashboardMetric, {
         label: "Productos solicitados",
         description: "Filtra los productos solicitados por fecha y alcance para revisar rápidamente el flujo de trabajo.",
         dataObject: requiredProducts,
         type: "line",
         indexAxis: "x",
-        scale: "x",
         displayScale: true,
         retailerSelected: orderByRequired.retailerId,
         queryObject: orderByRequired,

package/package.json

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

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

@@ -1,11 +1,40 @@
 import { Container } from "./styles";
 import { Chart } from "react-chartjs-2";
 import "chart.js/auto";
+import { useEffect, useRef } from "react";
 
 export const Graphic = ({ data, type, options }) => {
+  const counter = {
+    id: "counter",
+    beforeDraw(chart, args, options) {
+      const {
+        ctx,
+        chartArea: { top, right, bottom, left, width, height },
+      } = chart;
+      const x = width / 2;
+      const 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 = `${options.fontSize}px ${options.fontFamily}`;
+      ctx.textAlign = options.textAlign;
+      ctx.fillStyle = options.fontColor;
+      ctx.fillText(options.value, x, y);
+    },
+  };
+
   return (
     <Container>
-      <Chart type={type} data={data} options={options} />
+      <Chart
+        type={type}
+        data={data}
+        options={options}
+        plugins={type === "doughnut" ? [counter] : null}
+      />
     </Container>
   );
 };