contentoh-components-library 21.2.3 → 21.2.4

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

@@ -43,14 +43,13 @@ var DashboardMetric = function DashboardMetric(_ref) {
       displayScale = _ref$displayScale === void 0 ? false : _ref$displayScale,
       _ref$retailers = _ref.retailers,
       retailers = _ref$retailers === void 0 ? [] : _ref$retailers,
-      setQueryObject = _ref.setQueryObject;
+      setQueryObject = _ref.setQueryObject,
+      queryObject = _ref.queryObject;
 
   var onChangeRetailer = function onChangeRetailer(e) {
-    setQueryObject(function (current) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, current), {}, {
-        retailerId: e.target.value
-      });
-    });
+    setQueryObject((0, _objectSpread2.default)((0, _objectSpread2.default)({}, queryObject), {}, {
+      retailerId: e.target.value
+    }));
   };
 
   var _useState = (0, _react.useState)(new Date()),
@@ -79,12 +78,10 @@ var DashboardMetric = function DashboardMetric(_ref) {
 
     setStartDate(start);
     setEndDate(end);
-    if (end) setQueryObject(function (current) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, current), {}, {
-        startDate: "".concat(start.getFullYear(), "-").concat(start.getMonth() + 1, "-").concat(start.getDate()),
-        endDate: "".concat(end.getFullYear(), "-").concat(end.getMonth() + 1, "-").concat(end.getDate())
-      });
-    });
+    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);

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

@@ -72,37 +72,45 @@ var Dashboard = function Dashboard() {
       setLoading = _useState14[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;
+    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:
-              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));
+              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 5:
+            case 7:
               response = _context.sent;
-              versionList = JSON.parse(response.data.body);
-              return _context.abrupt("return", versionList);
+              return _context.abrupt("return", JSON.parse(response.data.body));
 
-            case 10:
-              _context.prev = 10;
-              _context.t0 = _context["catch"](2);
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](4);
               console.log(_context.t0);
 
-            case 13:
+            case 14:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[2, 10]]);
+      }, _callee, null, [[4, 11]]);
     }));
 
-    return function loadProductVersions(_x, _x2) {
+    return function loadProductVersions(_x) {
       return _ref.apply(this, arguments);
     };
   }();
@@ -140,35 +148,39 @@ var Dashboard = function Dashboard() {
 
   var loadProductsByStatus = /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(orderByStatus) {
-      var _yield$loadProductVer, orders, fullData;
+      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(true, orderByStatus);
+              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: fullData === null || fullData === void 0 ? void 0 : fullData.total
+                value: total
               }, {
                 label: "Productos sin asignar",
-                value: fullData === null || fullData === void 0 ? void 0 : fullData.PA
+                value: PA + R
               }, {
                 label: "Productos en proceso",
-                value: fullData === null || fullData === void 0 ? void 0 : fullData.CA
+                value: inProcess
               }, {
                 label: "Productos terminados",
-                value: fullData === null || fullData === void 0 ? void 0 : fullData.AP
+                value: ACA
               }]);
               setProductsByStatus(orders);
 
-            case 7:
+            case 9:
             case "end":
               return _context3.stop();
           }
@@ -176,7 +188,7 @@ var Dashboard = function Dashboard() {
       }, _callee3);
     }));
 
-    return function loadProductsByStatus(_x3) {
+    return function loadProductsByStatus(_x2) {
       return _ref3.apply(this, arguments);
     };
   }();
@@ -190,7 +202,7 @@ var Dashboard = function Dashboard() {
           switch (_context4.prev = _context4.next) {
             case 0:
               _context4.next = 2;
-              return loadProductVersions(false, orderByRequired);
+              return loadProductVersions(orderByRequired);
 
             case 2:
               _yield$loadProductVer2 = _context4.sent;
@@ -205,7 +217,7 @@ var Dashboard = function Dashboard() {
       }, _callee4);
     }));
 
-    return function loadRequiredProducts(_x4) {
+    return function loadRequiredProducts(_x3) {
       return _ref4.apply(this, arguments);
     };
   }();
@@ -223,13 +235,9 @@ var Dashboard = function Dashboard() {
     setOrderByStatus(queryObject);
     setOrderByRequired(queryObject);
     getRetailers();
+    loadProductsByStatus(queryObject);
+    loadRequiredProducts(queryObject);
   }, []);
-  (0, _react.useEffect)(function () {
-    loadProductsByStatus(orderByStatus);
-  }, [orderByStatus]);
-  (0, _react.useEffect)(function () {
-    loadRequiredProducts(orderByRequired);
-  }, [orderByRequired]);
   (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]);
@@ -251,7 +259,10 @@ var Dashboard = function Dashboard() {
         retailerSelected: orderByStatus.retailerId,
         retailers: retailers,
         queryObject: orderByStatus,
-        setQueryObject: setOrderByStatus
+        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.",
@@ -263,7 +274,10 @@ var Dashboard = function Dashboard() {
         retailers: retailers,
         retailerSelected: orderByRequired.retailerId,
         queryObject: orderByRequired,
-        setQueryObject: setOrderByRequired
+        setQueryObject: function setQueryObject(evt) {
+          loadRequiredProducts(evt);
+          setOrderByRequired(evt);
+        }
       })]
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.2.3",
+  "version": "21.2.4",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -22,6 +22,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-chartjs-2": "^4.0.1",
+    "react-datepicker": "^4.8.0",
     "react-dom": "^17.0.2",
     "react-draft-wysiwyg": "^1.14.7",
     "react-dropzone": "^12.0.4",

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

@@ -15,9 +15,11 @@ export const DashboardMetric = ({
   displayScale = false,
   retailers = [],
   setQueryObject,
+  queryObject
 }) => {
+
   const onChangeRetailer = (e) => {
-    setQueryObject((current) => ({ ...current, retailerId: e.target.value }));
+    setQueryObject({ ...queryObject, retailerId: e.target.value });
   };
 
   const [startDate, setStartDate] = useState(new Date());
@@ -39,13 +41,13 @@ export const DashboardMetric = ({
     setStartDate(start);
     setEndDate(end);
     if (end)
-      setQueryObject((current) => ({
-        ...current,
+      setQueryObject({
+        ...queryObject,
         startDate: `${start.getFullYear()}-${
           start.getMonth() + 1
         }-${start.getDate()}`,
         endDate: `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`,
-      }));
+      });
   };
 
   const labels = Object.keys(dataObject);

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

@@ -22,20 +22,13 @@ export const Dashboard = () => {
   const [retailers, setRetailers] = useState({});
   const [loading, setLoading] = useState(true);
 
-  const loadProductVersions = async (byStatus, queryObject) => {
-    const { retailerId, startDate, endDate, fullData } = queryObject;
-    const query = fullData
-      ? `fullData=true`
-      : `retailerId=${retailerId}&startDate=${startDate}&endDate=${endDate}`;
+  const loadProductVersions = async (queryObject, byStatus = false) => {
+    const { retailerId, startDate, endDate} = queryObject;
+    const query = `retailerId=${retailerId}&startDate=${startDate}&endDate=${endDate}`;
+    const endpoint = byStatus ? process.env.REACT_APP_READ_ORDERS_BY_STATUS : process.env.REACT_APP_READ_REQUIRED_ORDERS
     try {
-      const response = await axios.get(
-        byStatus
-          ? `${process.env.REACT_APP_READ_ORDERS_BY_STATUS}?${query}`
-          : `${process.env.REACT_APP_READ_REQUIRED_ORDERS}?retailerId=${retailerId}&startDate=${startDate}&endDate=${endDate}`
-      );
-
-      const versionList = JSON.parse(response.data.body);
-      return versionList;
+      const response = await axios.get(`${endpoint}?${query}`);
+      return JSON.parse(response.data.body);
     } catch (error) {
       console.log(error);
     }
@@ -54,18 +47,22 @@ export const Dashboard = () => {
   };
 
   const loadProductsByStatus = async (orderByStatus) => {
-    const { orders, fullData } = await loadProductVersions(true, orderByStatus);
+    const { orders, fullData } = await loadProductVersions(orderByStatus, true);
+    const { total, R, ACA, PA } = fullData;
+    const inProcess = Object.keys(fullData).reduce((prev, curr) =>
+      !['total', 'ACA', 'PA', 'R'].includes(curr) ? prev + fullData[curr] : prev
+    , 0);
     setMetricsData([
-      { label: "Productos totales", value: fullData?.total },
-      { label: "Productos sin asignar", value: fullData?.PA },
-      { label: "Productos en proceso", value: fullData?.CA },
-      { label: "Productos terminados", value: fullData?.AP },
+      { 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);
   };
 
   const loadRequiredProducts = async (orderByRequired) => {
-    const { dates } = await loadProductVersions(false, orderByRequired);
+    const { dates } = await loadProductVersions(orderByRequired);
     setRequiredProducts(dates);
   };
 
@@ -82,16 +79,10 @@ export const Dashboard = () => {
     setOrderByStatus(queryObject);
     setOrderByRequired(queryObject);
     getRetailers();
+    loadProductsByStatus(queryObject);
+    loadRequiredProducts(queryObject);
   }, []);
 
-  useEffect(() => {
-    loadProductsByStatus(orderByStatus);
-  }, [orderByStatus]);
-
-  useEffect(() => {
-    loadRequiredProducts(orderByRequired);
-  }, [orderByRequired]);
-
   useEffect(() => {
     orderByRequired?.retailerId &&
       orderByStatus?.retailerId &&
@@ -122,7 +113,10 @@ export const Dashboard = () => {
           retailerSelected={orderByStatus.retailerId}
           retailers={retailers}
           queryObject={orderByStatus}
-          setQueryObject={setOrderByStatus}
+          setQueryObject={(evt) => {
+            loadProductsByStatus(evt);
+            setOrderByStatus(evt);
+          }}
         />
         <DashboardMetric
           label={"Productos solicitados"}
@@ -137,7 +131,10 @@ export const Dashboard = () => {
           retailers={retailers}
           retailerSelected={orderByRequired.retailerId}
           queryObject={orderByRequired}
-          setQueryObject={setOrderByRequired}
+          setQueryObject={(evt) => {
+            loadRequiredProducts(evt);
+            setOrderByRequired(evt);
+          }}
         />
       </div>
     </Container>

package/dist/components/atoms/StatusTag/StatusTag.stories.js

@@ -1,48 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.StatusTagDefault = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _index = require("./index");
-
-var _variables = require("../../../global-files/variables");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var status = _variables.GlobalStatus;
-var _default = {
-  title: "Components/atoms/StatusTag",
-  component: _index.StatusTag,
-  argTypes: {
-    statusType: {
-      options: status,
-      control: {
-        type: "select"
-      }
-    },
-    ovalForm: {
-      options: [true, false],
-      control: {
-        type: "boolean"
-      }
-    }
-  }
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StatusTag, (0, _objectSpread2.default)({}, args));
-};
-
-var StatusTagDefault = Template.bind({});
-exports.StatusTagDefault = StatusTagDefault;
-StatusTagDefault.args = {
-  statusType: "-",
-  ovalForm: false
-};

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

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StatusTag = void 0;
-
-var _styles = require("./styles");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var StatusTag = function StatusTag(_ref) {
-  var statusType = _ref.statusType,
-      ovalForm = _ref.ovalForm;
-
-  var getShortStatus = function getShortStatus(status) {
-    switch (status) {
-      case "COMPLETED":
-        return "C";
-
-      case "RECEPTION":
-        return "Pr";
-
-      case "NULL":
-        return "-";
-
-      case "RECEIVED":
-        return "Rc";
-
-      case "IN_PROGRESS":
-        return "P";
-
-      case "ASSIGNED":
-        return "As";
-
-      case "APPROVED":
-        return "Ap";
-
-      case "VALIDATING":
-        return "V";
-
-      case "PAID_OUT":
-        return "Po";
-
-      default:
-        return status;
-    }
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: "status-".concat(getShortStatus(statusType), " ").concat(ovalForm && "oval-form"),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: getShortStatus(statusType)
-    })
-  });
-};
-
-exports.StatusTag = StatusTag;

package/dist/components/atoms/StatusTag/styles.js

@@ -1,20 +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 _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0 10px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 3px;\n\n  p {\n    text-align: center;\n    color: ", ";\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 20px;\n  }\n\n  &.status-As,\n  &.status-P,\n  &.status-IN_PROGRESS,\n  &.status-QF {\n    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr,\n  &.status-Rc {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC,\n  &.status-AF {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.oval-form {\n    border-radius: 10px;\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
-
-exports.Container = Container;

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

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RegistrationLoginFirstStepDefault = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _index = require("./index");
-
-var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
-
-var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
-
-var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _default = {
-  title: "Components/pages/RegistrationLoginFirstStep",
-  component: _index.RegistrationLoginFirstStep
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RegistrationLoginFirstStep, (0, _objectSpread2.default)({}, args));
-};
-
-var RegistrationLoginFirstStepDefault = Template.bind({});
-exports.RegistrationLoginFirstStepDefault = RegistrationLoginFirstStepDefault;
-RegistrationLoginFirstStepDefault.args = {
-  imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
-  textCarousel: "Elige la plataforma que conecta proovedores y retailers"
-};

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

@@ -1,269 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RegistrationLoginFirstStep = 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 _GradientPanel = require("../../atoms/GradientPanel");
-
-var _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
-
-var _react = require("react");
-
-var _LogoImage = require("../../atoms/LogoImage");
-
-var _ScreenHeader = require("../../atoms/ScreenHeader");
-
-var _variables = require("../../../global-files/variables");
-
-var _TagAndInput = require("../../molecules/TagAndInput");
-
-var _GeneralButton = require("../../atoms/GeneralButton");
-
-var _GeneralInput = require("../../atoms/GeneralInput");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var RegistrationLoginFirstStep = function RegistrationLoginFirstStep(_ref) {
-  var _ref$imageArrayCarous = _ref.imageArrayCarousel,
-      imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
-      textCarousel = _ref.textCarousel,
-      backogroundColorCarousel = _ref.backogroundColorCarousel;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      emptyName = _useState2[0],
-      setEmptyName = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      emptyLastName = _useState4[0],
-      setEmptyLastName = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      emptyEmail = _useState6[0],
-      setEmptyEmail = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      emptyJob = _useState8[0],
-      setEmptyJob = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      emptyPhone = _useState10[0],
-      setEmptyPhone = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      invalidEmail = _useState12[0],
-      setInvalidEmail = _useState12[1];
-
-  var validate = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
-      var name, lastName, email, job, phone;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              e.preventDefault();
-              name = document.querySelector("#nameInput").value;
-              lastName = document.querySelector("#lastNameInput").value;
-              email = document.querySelector("#emailInput").value;
-              job = document.querySelector("#jobInput").value;
-              phone = document.querySelector("#phoneInput").value;
-              name === "" ? setEmptyName(true) : setEmptyName(false);
-              lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
-              email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-              job === "" ? setEmptyJob(true) : setEmptyJob(false);
-              phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
-              !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
-
-            case 12:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function validate(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
-  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "credenciales",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-      fontFamily: _variables.FontFamily.AvenirNext,
-      color: _variables.GlobalColors.s5,
-      text: "Ingresa tus credenciales"
-    })
-  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "user",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "name-registration-user",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        inputId: "nameInput",
-        label: "Nombre",
-        inputPlaceHolder: "Nombre"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        inputId: "lastNameInput",
-        label: "Apellido",
-        inputPlaceHolder: "Apellido"
-      })]
-    }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Ingrese su nombre"
-    }), emptyLastName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Ingrese sus apellidos"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-      inputType: "text",
-      inputId: "emailInput",
-      label: "Correo electrónico",
-      inputPlaceHolder: "username@contentoh.com"
-    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Ingrese su correo"
-    }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Ingrese un correo v\xE1lido"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-      inputType: "text",
-      inputId: "jobInput",
-      label: "Puesto laboral",
-      inputPlaceHolder: "Puesto dentro de la empresa"
-    }), emptyJob && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Ingrese su puesto"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-      text: "Teléfono",
-      headerType: "input-name-header"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "phone-registration-user",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-        name: "select",
-        className: "phone-options",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          children: "+52"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          children: "+54"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          children: "+57"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          children: "+506"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          children: "+593"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          children: "+503"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          children: "+504"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          children: "+507"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-          children: "+51"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInput.GeneralInput, {
-        inputId: "phoneInput",
-        inputType: "text",
-        inputPlaceholder: "Teléfono"
-      })]
-    }), emptyPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Ingrese su n\xFAmero de tel\xE9fono"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-      text: "País",
-      headerType: "input-name-header"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-      name: "select",
-      className: "country-options",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value1",
-        selected: true,
-        children: "Selecciona tu pa\xEDs"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value2",
-        children: "Argentina"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value3",
-        children: "Colombia"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value2",
-        children: "Ecuador"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value3",
-        children: "El Salvador"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value2",
-        children: "Honduras"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value3",
-        children: "M\xE9xico"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value2",
-        children: "Panam\xE1"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value3",
-        children: "Per\xFA"
-      })]
-    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Seleccione su pa\xEDs"
-    })]
-  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "button-end",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-      buttonType: "general-default-button",
-      label: "Enviar",
-      onClick: function onClick(e) {
-        return validate(e);
-      }
-    })
-  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "progress-bar",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "progress-bar-first-step"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "progress-bar-registration"
-    })]
-  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-    text: "Paso 1",
-    headerType: "date-header",
-    color: _variables.GlobalColors.s4
-  }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "new-login",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-      className: "pre-registro",
-      children: ["\xBFYa tienes una cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: " Inicia Sesi\xF3n"
-      })]
-    })
-  }, "7")];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "home-retailer",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselImagesLogin.CarouselImagesLogin, {
-        panelImg: imageArrayCarousel,
-        panelText: textCarousel,
-        panelColor: backogroundColorCarousel
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "home-login-retailer",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        componentsArray: loginRight,
-        panelType: "home-login",
-        panelColor: _variables.GlobalColors.white
-      })
-    })]
-  });
-};
-
-exports.RegistrationLoginFirstStep = RegistrationLoginFirstStep;

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

@@ -1,20 +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 _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  .user {\n    .name-registration-user {\n      display: flex;\n      justify-content: space-between;\n      input {\n        width: 160px;\n      }\n    }\n    .input-name-header {\n      margin-bottom: 4px;\n      margin-top: 12px;\n    }\n    .phone-registration-user {\n      display: flex;\n      justify-content: space-between;\n      .phone-options {\n        width: 80px;\n      }\n      input {\n        width: 100%;\n      }\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    .country-options,\n    .phone-options {\n      width: 100%;\n      border: 1px solid ", ";\n      font-family: ", ";\n      color: ", ";\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 15px;\n      padding: 10px;\n      outline: none;\n      border-radius: 2px;\n      resize: none;\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n  }\n  .button-end {\n    text-align: end;\n    .general-default-button {\n      width: 160px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  .progress-bar {\n    width: 100%;\n    height: 8px;\n    display: flex;\n    justify-content: space-between;\n    .progress-bar-first-step {\n      width: 33.33%;\n      background-color: rgb(196, 196, 196);\n    }\n    .progress-bar-registration {\n      background-color: rgb(226, 226, 226);\n      width: 66.66%;\n    }\n  }\n  .date-header {\n    .new-login {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
-
-exports.Container = Container;