contentoh-components-library 21.2.6 → 21.2.7

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

@@ -1,292 +0,0 @@
-"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

@@ -1,18 +0,0 @@
-"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/src/components/atoms/MetricCard/MetricCard.stories.js

@@ -1,14 +0,0 @@
-import { MetricCard } from "./index";
-
-export default {
-  title: "Components/atoms/MetricCard",
-  component: MetricCard,
-};
-
-const Template = (args) => <MetricCard {...args} />;
-export const MetricCardDefault = Template.bind({});
-
-MetricCardDefault.args = {
-  label: "Productos Totales",
-  number: 2367,
-};

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

@@ -1,10 +0,0 @@
-import { Container } from "./styles";
-
-export const MetricCard = ({ label, number }) => {
-  return (
-    <Container>
-      <p>{label}</p>
-      <p>{number}</p>
-    </Container>
-  );
-};

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

@@ -1,30 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  padding: 10px 20px;
-  border: 1px solid ${GlobalColors.s3};
-  width: fit-content;
-  text-align: center;
-  border-radius: 10px;
-
-  p {
-    color: #000;
-    font-size: 25px;
-    font-family: ${FontFamily.Raleway_600};
-    font-size: 25px;
-    font-feature-settings: "pnum", "lnum";
-
-    &:first-of-type {
-      color: ${GlobalColors.s3};
-      font-family: ${FontFamily.Raleway};
-      font-weight: 500;
-      font-size: 13px;
-      line-height: 13px;
-    }
-
-    & + * {
-      margin-top: 3px;
-    }
-  }
-`;

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

@@ -1,37 +0,0 @@
-import { useState } from "react";
-import { MetricSelect } from ".";
-
-export default {
-  title: "Components/atoms/MetricSelect",
-  component: MetricSelect,
-};
-
-const Template = (args) => {
-  const [optionSelected, setSelectedOption] = useState("Semana actual");
-  const onChange = (e) => {
-    setSelectedOption(e.target.value);
-  };
-  return (
-    <MetricSelect
-      {...args}
-      optionSelected={optionSelected}
-      onChange={onChange}
-    />
-  );
-};
-export const MetricSelectDefault = Template.bind({});
-MetricSelectDefault.args = {
-  options: [
-    "12/12/12",
-    "12/12/13",
-    "12/12/14",
-    "12/12/15",
-    "12/12/16",
-    "12/12/17",
-    "12/12/18",
-    "12/12/19",
-    "12/12/20",
-    "12/12/21",
-    "12/12/22",
-  ],
-};

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

@@ -1,22 +0,0 @@
-import { Container } from "./styles";
-
-export const MetricSelect = ({
-  options,
-  optionSelected,
-  onChange,
-  label,
-  className,
-}) => {
-  return (
-    <Container className={className}>
-      <select value={optionSelected} onChange={onChange}>
-        <option value="" disabled>{label}</option>
-        {options?.map((option) => (
-          <option key={option.name} value={option.id}>
-            {option.name}
-          </option>
-        ))}
-      </select>
-    </Container>
-  );
-};

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

@@ -1,20 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  background-color: ${GlobalColors.s2};
-  width: fit-content;
-  display: block;
-  padding-right: 10px;
-  border-radius: 5px;
-
-  select {
-    color: ${GlobalColors.s4};
-    outline: none;
-    padding: 10px;
-    background-color: transparent;
-    border: none;
-    option:first-of-type {
-    }
-  }
-`;

package/src/components/organisms/Calendar/Calendar.stories.js

@@ -1,10 +0,0 @@
-import { Calendar } from ".";
-
-export default {
-  title: "Components/organisms/Calendar",
-  component: Calendar,
-};
-
-const Template = (args) => <Calendar {...args} />;
-export const CalendarDefault = Template.bind({});
-CalendarDefault.args = {};

package/src/components/organisms/Calendar/index.js

@@ -1,17 +0,0 @@
-import { Container } from "./styles";
-import DatePicker from "react-datepicker";
-import { useState } from "react";
-
-export const Calendar = ({ onChange, startDate, endDate }) => {
-  return (
-    <Container>
-      <DatePicker
-        selected={startDate}
-        onChange={onChange}
-        startDate={startDate}
-        endDate={endDate}
-        selectsRange
-      />
-    </Container>
-  );
-};