contentoh-components-library 21.1.97 → 21.2.0

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

@@ -72,7 +72,7 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
           feature: "Prov",
           value: headerData === null || headerData === void 0 ? void 0 : (_headerData$article4 = headerData.article) === null || _headerData$article4 === void 0 ? void 0 : _headerData$article4.company_name
         }, {
-          feature: "UPC",
+          feature: "SKU",
           value: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article5 = headerData.article) === null || _headerData$article5 === void 0 ? void 0 : _headerData$article5.upc) || (headerData === null || headerData === void 0 ? void 0 : headerData.upc)
         }]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarAndValidation.AvatarAndValidation, {

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DashboardDeafult = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/pages/Dashboard",
+  component: _.Dashboard
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dashboard, (0, _objectSpread2.default)({}, args));
+};
+
+var DashboardDeafult = Template.bind({});
+exports.DashboardDeafult = DashboardDeafult;
+DashboardDeafult.args = {};

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

@@ -0,0 +1,254 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dashboard = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _MetricCard = require("../../atoms/MetricCard");
+
+var _DashboardMetric = require("../../organisms/DashboardMetric");
+
+var _react = require("react");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var Dashboard = function Dashboard() {
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      metricsData = _useState2[0],
+      setMetricsData = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      productsByStatus = _useState4[0],
+      setProductsByStatus = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      requiredProducts = _useState6[0],
+      setRequiredProducts = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({}),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      orderByStatus = _useState8[0],
+      setOrderByStatus = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({}),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      orderByRequired = _useState10[0],
+      setOrderByRequired = _useState10[1];
+
+  var _useState11 = (0, _react.useState)({}),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      retailers = _useState12[0],
+      setRetailers = _useState12[1];
+
+  var loadProductVersions = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(byStatus, queryObject) {
+      var retailerId, startDate, endDate, fullData, query, response, versionList;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              retailerId = queryObject.retailerId, startDate = queryObject.startDate, endDate = queryObject.endDate, fullData = queryObject.fullData;
+              query = fullData ? "fullData=true" : "retailerId=".concat(retailerId, "&startDate=").concat(startDate, "&endDate=").concat(endDate);
+              _context.prev = 2;
+              _context.next = 5;
+              return _axios.default.get(byStatus ? "".concat(process.env.REACT_APP_READ_ORDERS_BY_STATUS, "?").concat(query) : "".concat(process.env.REACT_APP_READ_REQUIRED_ORDERS, "?retailerId=").concat(retailerId, "&startDate=").concat(startDate, "&endDate=").concat(endDate));
+
+            case 5:
+              response = _context.sent;
+              versionList = JSON.parse(response.data.body);
+              return _context.abrupt("return", versionList);
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](2);
+              console.log(_context.t0);
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[2, 10]]);
+    }));
+
+    return function loadProductVersions(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var getRetailers = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var retailersResponse;
+      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_RETAILER_ENDPOINT), {
+                headers: {
+                  Authorization: sessionStorage.getItem("jwt")
+                }
+              });
+
+            case 2:
+              retailersResponse = _context2.sent;
+              setRetailers(JSON.parse(retailersResponse.data.body).data);
+
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function getRetailers() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var loadProductsByStatus = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(orderByStatus) {
+      var _yield$loadProductVer, orders, fullData;
+
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return loadProductVersions(true, orderByStatus);
+
+            case 2:
+              _yield$loadProductVer = _context3.sent;
+              orders = _yield$loadProductVer.orders;
+              fullData = _yield$loadProductVer.fullData;
+              setMetricsData([{
+                label: "Productos totales",
+                value: fullData === null || fullData === void 0 ? void 0 : fullData.total
+              }, {
+                label: "Productos sin asignar",
+                value: fullData === null || fullData === void 0 ? void 0 : fullData.PA
+              }, {
+                label: "Productos en proceso",
+                value: fullData === null || fullData === void 0 ? void 0 : fullData.CA
+              }, {
+                label: "Productos terminados",
+                value: fullData === null || fullData === void 0 ? void 0 : fullData.AP
+              }]);
+              setProductsByStatus(orders);
+
+            case 7:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function loadProductsByStatus(_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var loadRequiredProducts = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(orderByRequired) {
+      var _yield$loadProductVer2, dates;
+
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return loadProductVersions(false, orderByRequired);
+
+            case 2:
+              _yield$loadProductVer2 = _context4.sent;
+              dates = _yield$loadProductVer2.dates;
+              setRequiredProducts(dates);
+
+            case 5:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    return function loadRequiredProducts(_x4) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    var today = new Date();
+    var firstWeekDay = today.getDate() - today.getDay();
+    var startDate = "".concat(today.getFullYear(), "-").concat(firstWeekDay, "-").concat(today.getMonth() + 1);
+    var endDate = "".concat(today.getFullYear(), "-").concat(today.getDate(), "-").concat(today.getMonth() + 1);
+    var queryObject = {
+      retailerId: "58",
+      startDate: startDate,
+      endDate: endDate
+    };
+    setOrderByStatus(queryObject);
+    setOrderByRequired(queryObject);
+    getRetailers();
+  }, []);
+  (0, _react.useEffect)(function () {
+    loadProductsByStatus(orderByStatus);
+  }, [orderByStatus]);
+  (0, _react.useEffect)(function () {
+    loadRequiredProducts(orderByRequired);
+  }, [orderByRequired]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "metric-cards",
+      children: metricsData.map(function (metric, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricCard.MetricCard, {
+          label: metric.label,
+          number: metric.value
+        }, "".concat(index, "-").concat(metric.value));
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "metrics-main-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DashboardMetric.DashboardMetric, {
+        label: "Productos por estatus",
+        description: "Revisa el avance individual de cada estatus, utiliza los filtros para encontrar información precisa.",
+        dataObject: productsByStatus,
+        retailerSelected: orderByStatus.retailerId,
+        retailers: retailers,
+        queryObject: orderByStatus,
+        setQueryObject: setOrderByStatus
+      }), /*#__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,
+        retailers: retailers,
+        retailerSelected: orderByRequired.retailerId,
+        queryObject: orderByRequired,
+        setQueryObject: setOrderByRequired
+      })]
+    })]
+  });
+};
+
+exports.Dashboard = Dashboard;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 30px;\n  .metric-cards {\n    display: flex;\n\n    > * + * {\n      margin-left: 10px;\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .metrics-main-container {\n    display: flex;\n\n    > * + * {\n      margin-left: 10px;\n    }\n  }\n"])));
+
+exports.Container = Container;

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

@@ -36,144 +36,92 @@ ProviderProductEditionDefault.args = {
   category: 846,
   version: 2,
   productSelected: {
-    articleStatus: "ACA",
-    version: 5,
-    missing: {},
+    orderId: 2446,
+    article_status: "AP",
+    datasheet_status: "AP",
+    description_status: "AP",
+    images_status: "ACA",
+    prio: "none",
+    version: 2,
+    brand: null,
     article: {
-      category: "Materiales de Construcción|Impermeabilizantes y Recubrimientos|Selladores",
-      company_name: "SIKA MEXICANA S.A. DE C.V.",
-      company_id: 383,
-      id_category: "2249",
-      id_article: 29457,
-      name: "SIKA TECHO FRESCO SUPER 15",
-      upc: "111187"
+      category: "Organizadores y Closets|Accesorios de Lavandería|Organizadores de Lavandería",
+      company_name: "WOMEX SA DE CV",
+      id_company: 424,
+      country: null,
+      id_category: "2522",
+      id_article: 78773,
+      name: "RACK PARA ROPA DOBLE NEGRO",
+      upc: "168462"
     },
-    asignations: [],
     retailers: [{
       id: 58,
-      name: "The Home Depot Golden",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }, {
-      id: 59,
-      name: "The Home Depot Platinum",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }, {
-      id: 61,
-      name: "Home Depot TAB",
-      country: "México",
-      id_region: 1,
-      active: 1
+      name: "The Home Depot Golden"
     }],
-    percentage: 33.35,
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1
+    },
+    statusByRetailer: {
+      58: {
+        datasheet: "AP",
+        description: "AP",
+        images: "ACA"
+      }
+    },
+    retailersWithService: ["58"],
+    id_article: 78773,
     retailersAvailable: [{
       id: 58,
-      name: "The Home Depot Golden",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }, {
-      id: 59,
-      name: "The Home Depot Platinum",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }, {
-      id: 61,
-      name: "Home Depot TAB",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }],
-    upc: "111187",
-    name: "SIKA TECHO FRESCO SUPER 15",
-    categoryName: "Materiales de Construcción|Impermeabilizantes y Recubrimientos|Selladores",
-    id_category: "2249",
-    id_article: 29457,
-    services: [{
-      id_article: 29457,
-      service: "datasheet",
-      quantity: 1,
-      price: 0,
-      id_user: 1237,
-      datasheet_common: null,
-      discount: null
+      name: "The Home Depot Golden"
     }]
   },
   productToEdit: {
-    idCategory: "2249",
-    ArticleId: 29457,
-    product: [{
-      articleStatus: "ACA",
-      version: 5,
-      missing: {},
+    ArticleId: 78773,
+    idCategory: "2522",
+    product: {
+      orderId: 2446,
+      article_status: "AP",
+      datasheet_status: "AP",
+      description_status: "AP",
+      images_status: "ACA",
+      prio: "none",
+      version: 2,
+      brand: null,
       article: {
-        category: "Materiales de Construcción|Impermeabilizantes y Recubrimientos|Selladores",
-        company_name: "SIKA MEXICANA S.A. DE C.V.",
-        company_id: 383,
-        id_category: "2249",
-        id_article: 29457,
-        name: "SIKA TECHO FRESCO SUPER 15",
-        upc: "111187"
+        category: "Organizadores y Closets|Accesorios de Lavandería|Organizadores de Lavandería",
+        company_name: "WOMEX SA DE CV",
+        id_company: 424,
+        country: null,
+        id_category: "2522",
+        id_article: 78773,
+        name: "RACK PARA ROPA DOBLE NEGRO",
+        upc: "168462"
       },
-      asignations: [],
       retailers: [{
         id: 58,
-        name: "The Home Depot Golden",
-        country: "México",
-        id_region: 1,
-        active: 1
-      }, {
-        id: 59,
-        name: "The Home Depot Platinum",
-        country: "México",
-        id_region: 1,
-        active: 1
-      }, {
-        id: 61,
-        name: "Home Depot TAB",
-        country: "México",
-        id_region: 1,
-        active: 1
+        name: "The Home Depot Golden"
       }],
-      percentage: 33.35,
+      services: {
+        datasheets: 1,
+        descriptions: 1,
+        images: 1
+      },
+      statusByRetailer: {
+        58: {
+          datasheet: "AP",
+          description: "AP",
+          images: "ACA"
+        }
+      },
+      retailersWithService: ["58"],
+      id_article: 78773,
       retailersAvailable: [{
         id: 58,
-        name: "The Home Depot Golden",
-        country: "México",
-        id_region: 1,
-        active: 1
-      }, {
-        id: 59,
-        name: "The Home Depot Platinum",
-        country: "México",
-        id_region: 1,
-        active: 1
-      }, {
-        id: 61,
-        name: "Home Depot TAB",
-        country: "México",
-        id_region: 1,
-        active: 1
-      }],
-      upc: "111187",
-      name: "SIKA TECHO FRESCO SUPER 15",
-      categoryName: "Materiales de Construcción|Impermeabilizantes y Recubrimientos|Selladores",
-      id_category: "2249",
-      id_article: 29457,
-      services: [{
-        id_article: 29457,
-        service: "datasheet",
-        quantity: 1,
-        price: 0,
-        id_user: 1237,
-        datasheet_common: null,
-        discount: null
+        name: "The Home Depot Golden"
       }]
-    }]
+    }
   },
   location: {
     state: {

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

@@ -172,7 +172,7 @@ var reducerImages = function reducerImages(state, action) {
 
           var orderedImages = [];
           var imageIdArray = [];
-          if (!_inputsByRetailer[action.retailerId]) _inputsByRetailer[action.retailerId] = [];
+          if (action !== null && action !== void 0 && action.retailerId && !_inputsByRetailer[action.retailerId]) _inputsByRetailer[action.retailerId] = [];
           action.retailerId && ((_inputsByRetailer$act = _inputsByRetailer[action.retailerId]) === null || _inputsByRetailer$act === void 0 ? void 0 : _inputsByRetailer$act.filter(function (input) {
             imageIdArray.push(input.id_image);
             valuesInitial.forEach(function (value) {
@@ -559,11 +559,14 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               return getServices();
 
             case 6:
-              if (!originProp) {
-                setActiveRetailer(product !== null && product !== void 0 && product.retailers ? product === null || product === void 0 ? void 0 : product.retailers[0] : product === null || product === void 0 ? void 0 : product.retailersAvailable[0]);
-              } // setActiveRetailer(product?.retailers[0]);
-
-
+              // if (!originProp) {
+              //   setActiveRetailer(
+              //     product?.retailers
+              //       ? product?.retailers[0]
+              //       : product?.retailersAvailable[0]
+              //   );
+              // }
+              // setActiveRetailer(product?.retailers[0]);
               setImages({
                 action: "init",
                 init: services[2]
@@ -576,7 +579,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               });
               setLoading(false);
 
-            case 11:
+            case 10:
             case "end":
               return _context2.stop();
           }
@@ -712,6 +715,12 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       retailerId: activeRetailer.id
     });
   }, [product, version]);
+  (0, _react.useEffect)(function () {
+    setImages({
+      action: "orderImages",
+      retailerId: activeRetailer.id
+    });
+  }, [activeRetailer]);
 
   var loadAssignations = function loadAssignations(currentProduct) {
     setAssig(product === null || product === void 0 ? void 0 : product.asignations);

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

@@ -140,24 +140,31 @@ var reducerImages = function reducerImages(state, action) {
 
     case "orderImages":
       {
-        var _inputsByRetailer$act;
-
         var _inputsByRetailer = state.inputsByRetailer,
             valuesInitial = state.valuesInitial,
             inputsInitial = state.inputsInitial,
             inputs = state.inputs;
-        var orderedImages = [];
-        var imageIdArray = [];
-        action.retailerId && ((_inputsByRetailer$act = _inputsByRetailer[action.retailerId]) === null || _inputsByRetailer$act === void 0 ? void 0 : _inputsByRetailer$act.filter(function (input) {
-          imageIdArray.push(input.id_image);
-          valuesInitial.forEach(function (value) {
-            if (value.image_id === input.id_image) orderedImages.push(value);
+
+        try {
+          var _inputsByRetailer$act;
+
+          var orderedImages = [];
+          var imageIdArray = [];
+          if (action !== null && action !== void 0 && action.retailerId && !_inputsByRetailer[action.retailerId]) _inputsByRetailer[action.retailerId] = [];
+          action.retailerId && ((_inputsByRetailer$act = _inputsByRetailer[action.retailerId]) === null || _inputsByRetailer$act === void 0 ? void 0 : _inputsByRetailer$act.filter(function (input) {
+            imageIdArray.push(input.id_image);
+            valuesInitial.forEach(function (value) {
+              if (value.image_id === input.id_image) orderedImages.push(value);
+            });
+          }));
+          inputs = inputsInitial === null || inputsInitial === void 0 ? void 0 : inputsInitial.filter(function (input) {
+            return imageIdArray.includes(input.id);
           });
-        }));
-        inputs = inputsInitial === null || inputsInitial === void 0 ? void 0 : inputsInitial.filter(function (input) {
-          return imageIdArray.includes(input.id);
-        });
-        values = orderedImages.length > 0 ? orderedImages : [];
+          values = orderedImages.length > 0 ? orderedImages : [];
+        } catch (error) {
+          console.log(error);
+        }
+
         return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
           values: values,
           inputs: inputs

package/package.json

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

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

@@ -34,4 +34,10 @@ export const Container = styled.div`
     letter-spacing: -0.015em;
     color: ${GlobalColors.s4};
   }
+
+  &:last-of-type {
+    p {
+      font-size: 24px;
+    }
+  }
 `;

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

@@ -18,4 +18,12 @@ GraphicDefault.args = {
       },
     ],
   },
+  options: {
+    plugins: {
+      legend: {
+        position: "left",
+      },
+    },
+  },
+  type: "doughnut",
 };

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

@@ -2,17 +2,11 @@ import { Container } from "./styles";
 import { Chart } from "react-chartjs-2";
 import "chart.js/auto";
 
-export const Graphic = ({ data }) => {
-  const options = {
-    plugins: {
-      legend: {
-        position: "left",
-      },
-    },
-  };
+export const Graphic = ({ data, type, options }) => {
+ 
   return (
     <Container>
-      <Chart type="doughnut" data={data} options={options} />
+      <Chart type={type} data={data} options={options} />
     </Container>
   );
 };