contentoh-components-library 21.2.7 → 21.2.10

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

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DashboardMetric = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _styles = require("./styles");
+
+var _MetricSelect = require("../../atoms/MetricSelect");
+
+var _Graphic = require("../../atoms/Graphic");
+
+var _Calendar = require("../Calendar");
+
+var _react = require("react");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var DashboardMetric = function DashboardMetric(_ref) {
+  var label = _ref.label,
+      description = _ref.description,
+      retailerSelected = _ref.retailerSelected,
+      _ref$dataObject = _ref.dataObject,
+      dataObject = _ref$dataObject === void 0 ? {
+    AA: 89
+  } : _ref$dataObject,
+      _ref$indexAxis = _ref.indexAxis,
+      indexAxis = _ref$indexAxis === void 0 ? "y" : _ref$indexAxis,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "bar" : _ref$type,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? "x" : _ref$scale,
+      _ref$displayScale = _ref.displayScale,
+      displayScale = _ref$displayScale === void 0 ? false : _ref$displayScale,
+      _ref$retailers = _ref.retailers,
+      retailers = _ref$retailers === void 0 ? [] : _ref$retailers,
+      setQueryObject = _ref.setQueryObject,
+      queryObject = _ref.queryObject;
+
+  var onChangeRetailer = function onChangeRetailer(e) {
+    setQueryObject((0, _objectSpread2.default)((0, _objectSpread2.default)({}, queryObject), {}, {
+      retailerId: e.target.value
+    }));
+  };
+
+  var _useState = (0, _react.useState)(new Date()),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      startDate = _useState2[0],
+      setStartDate = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(new Date()),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      endDate = _useState4[0],
+      setEndDate = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var today = new Date();
+    var firstWeekDay = today.getDate() - today.getDay();
+    var start = "".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-").concat(firstWeekDay);
+    var end = new Date();
+    setStartDate(new Date(start));
+    setEndDate(end);
+  }, []);
+
+  var onChange = function onChange(dates) {
+    var _dates = (0, _slicedToArray2.default)(dates, 2),
+        start = _dates[0],
+        end = _dates[1];
+
+    setStartDate(start);
+    setEndDate(end);
+    if (end) setQueryObject((0, _objectSpread2.default)((0, _objectSpread2.default)({}, queryObject), {}, {
+      startDate: "".concat(start.getFullYear(), "-").concat(start.getMonth() + 1, "-").concat(start.getDate()),
+      endDate: "".concat(end.getFullYear(), "-").concat(end.getMonth() + 1, "-").concat(end.getDate())
+    }));
+  };
+
+  var labels = Object.keys(dataObject);
+  var values = Object.values(dataObject);
+  var retailersArray = Object.values(retailers).sort(function (a, b) {
+    if (a.name > b.name) {
+      return 1;
+    }
+
+    if (a.name < b.name) {
+      return -1;
+    } // a must be equal to b
+
+
+    return 0;
+  });
+  var colorsArray = values.map(function () {
+    return "#".concat(Math.floor(Math.random() * 16777215).toString(16));
+  });
+  var data = {
+    labels: labels,
+    datasets: [{
+      data: values,
+      backgroundColor: colorsArray
+    }]
+  };
+  var options = {
+    indexAxis: indexAxis,
+    elements: {
+      bar: {
+        borderWidth: 2
+      }
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 1,
+    plugins: {
+      legend: {
+        position: "right",
+        display: false
+      },
+      title: {
+        display: false
+      }
+    },
+    scales: (0, _defineProperty2.default)({}, scale, {
+      ticks: {
+        display: displayScale
+      }
+    })
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "text-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "select-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
+        onChange: onChange,
+        startDate: startDate,
+        endDate: endDate
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricSelect.MetricSelect, {
+        className: "select",
+        label: "Cadena comercial",
+        optionSelected: retailerSelected,
+        options: retailersArray,
+        onChange: onChangeRetailer
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "graphic-cotainer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Graphic.Graphic, {
+        data: data,
+        options: options,
+        type: type
+      })
+    })]
+  });
+};
+
+exports.DashboardMetric = DashboardMetric;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  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: 300px;\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);
+
+exports.Container = Container;

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,292 @@
+"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 _Loading = require("../../atoms/Loading");
+
+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)({
+    retailerId: null,
+    startDate: null,
+    endDate: null
+  }),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      orderByStatus = _useState8[0],
+      setOrderByStatus = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({
+    retailerId: null,
+    startDate: null,
+    endDate: null
+  }),
+      _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 _useState13 = (0, _react.useState)(true),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      loading = _useState14[0],
+      setLoading = _useState14[1];
+
+  var loadProductVersions = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(queryObject) {
+      var byStatus,
+          retailerId,
+          startDate,
+          endDate,
+          query,
+          endpoint,
+          response,
+          _args = arguments;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              byStatus = _args.length > 1 && _args[1] !== undefined ? _args[1] : false;
+              retailerId = queryObject.retailerId, startDate = queryObject.startDate, endDate = queryObject.endDate;
+              query = "retailerId=".concat(retailerId, "&startDate=").concat(startDate, "&endDate=").concat(endDate);
+              endpoint = byStatus ? process.env.REACT_APP_READ_ORDERS_BY_STATUS : process.env.REACT_APP_READ_REQUIRED_ORDERS;
+              _context.prev = 4;
+              _context.next = 7;
+              return _axios.default.get("".concat(endpoint, "?").concat(query));
+
+            case 7:
+              response = _context.sent;
+              return _context.abrupt("return", JSON.parse(response.data.body));
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](4);
+              console.log(_context.t0);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[4, 11]]);
+    }));
+
+    return function loadProductVersions(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var getRetailers = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var retailersResponse, parsed, retailers;
+      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;
+              parsed = JSON.parse(retailersResponse.data.body).data;
+              retailers = Object.keys(parsed).map(function (key) {
+                if (key.includes('The Home Depot')) return parsed[key];
+              }).filter(function (f) {
+                return f;
+              });
+              setRetailers(retailers);
+
+            case 6:
+            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, total, R, ACA, PA, inProcess;
+
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return loadProductVersions(orderByStatus, true);
+
+            case 2:
+              _yield$loadProductVer = _context3.sent;
+              orders = _yield$loadProductVer.orders;
+              fullData = _yield$loadProductVer.fullData;
+              total = fullData.total, R = fullData.R, ACA = fullData.ACA, PA = fullData.PA;
+              inProcess = Object.keys(fullData).reduce(function (prev, curr) {
+                return !['total', 'ACA', 'PA', 'R'].includes(curr) ? prev + fullData[curr] : prev;
+              }, 0);
+              setMetricsData([{
+                label: "Productos totales",
+                value: total
+              }, {
+                label: "Productos sin asignar",
+                value: PA + R
+              }, {
+                label: "Productos en proceso",
+                value: inProcess
+              }, {
+                label: "Productos terminados",
+                value: ACA
+              }]);
+              setProductsByStatus(orders);
+
+            case 9:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function loadProductsByStatus(_x2) {
+      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(orderByRequired);
+
+            case 2:
+              _yield$loadProductVer2 = _context4.sent;
+              dates = _yield$loadProductVer2.dates;
+              setRequiredProducts(dates);
+
+            case 5:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    return function loadRequiredProducts(_x3) {
+      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(today.getMonth() + 1, "-").concat(firstWeekDay);
+    var endDate = "".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-").concat(today.getDate());
+    var queryObject = {
+      retailerId: "58",
+      startDate: startDate,
+      endDate: endDate
+    };
+    setOrderByStatus(queryObject);
+    setOrderByRequired(queryObject);
+    getRetailers();
+    loadProductsByStatus(queryObject);
+    loadRequiredProducts(queryObject);
+  }, []);
+  (0, _react.useEffect)(function () {
+    (orderByRequired === null || orderByRequired === void 0 ? void 0 : orderByRequired.retailerId) && (orderByStatus === null || orderByStatus === void 0 ? void 0 : orderByStatus.retailerId) && metricsData.length > 0 && setLoading(false);
+  }, [orderByRequired, orderByStatus, metricsData]);
+  return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__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: function setQueryObject(evt) {
+          loadProductsByStatus(evt);
+          setOrderByStatus(evt);
+        }
+      }), /*#__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: function setQueryObject(evt) {
+          loadRequiredProducts(evt);
+          setOrderByRequired(evt);
+        }
+      })]
+    })]
+  });
+};
+
+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;