contentoh-components-library 21.2.7 → 21.2.10

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

@@ -36,146 +36,98 @@ 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: {
+      origin: "Contentoh"
+    }
   },
-  location: {},
   user: {
     id_user: 1237,
     name: "The Home",

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

@@ -1509,7 +1509,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
 
   var validateAll = /*#__PURE__*/function () {
     var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13(result) {
-      var _product$id_order2, evaluationArray, sendAll, conceptArray, dataGeneral, productTemp, retailerStatusCopy;
+      var _product$id_order2, evaluationArray, conceptArray, dataGeneral, evalResponse, userType, productTemp, retailerStatusCopy;
 
       return _regenerator.default.wrap(function _callee13$(_context13) {
         while (1) {
@@ -1518,17 +1518,18 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               _context13.prev = 0;
               setLoading(true);
               evaluationArray = [];
-              sendAll = [];
               conceptArray = ["description", "datasheet", "images"];
               dataGeneral = {
                 articleId: product.id_article,
                 orderId: (_product$id_order2 = product.id_order) !== null && _product$id_order2 !== void 0 ? _product$id_order2 : product.orderId,
-                result: result
+                result: result,
+                isAproved: result === "A"
               };
               servicesData === null || servicesData === void 0 ? void 0 : servicesData.forEach(function (ret) {
                 var service = ret.service,
                     id_retailer = ret.id_retailer;
-                var data = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, dataGeneral), {}, {
+                var data = {};
+                data = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, dataGeneral), {}, {
                   concept: service,
                   retailerId: id_retailer,
                   evalStatus: retailerStatus[id_retailer][service]
@@ -1538,26 +1539,27 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                     Authorization: token
                   }
                 }));
-                sendAll.push(_axios.default.put("".concat(process.env.REACT_APP_SEND_EVAL), data, {
-                  headers: {
-                    Authorization: token
-                  }
-                }));
               });
-              _context13.next = 9;
-              return Promise.all([].concat(evaluationArray, sendAll));
+              _context13.next = 8;
+              return Promise.all(evaluationArray);
 
-            case 9:
+            case 8:
+              evalResponse = _context13.sent;
+              console.log(evalResponse.map(function (_ref15) {
+                var data = _ref15.data;
+                return JSON.parse(data.body);
+              }));
+              userType = user.is_retailer === 1 ? "CA" : "P";
               productTemp = product;
-              productTemp.article_status = "".concat(result, "CA");
-              productTemp.datasheet_status = productTemp.datasheet_status === "NA" ? "NA" : "".concat(result, "CA");
-              productTemp.description_status = productTemp.description_status === "NA" ? "NA" : "".concat(result, "CA");
-              productTemp.images_status = productTemp.images_status === "NA" ? "NA" : "".concat(result, "CA");
+              productTemp.article_status = "".concat(result).concat(userType);
+              productTemp.datasheet_status = productTemp.datasheet_status === "NA" ? "NA" : "".concat(result).concat(userType);
+              productTemp.description_status = productTemp.description_status === "NA" ? "NA" : "".concat(result).concat(userType);
+              productTemp.images_status = productTemp.images_status === "NA" ? "NA" : "".concat(result).concat(userType);
               retailerStatusCopy = (0, _objectSpread3.default)({}, retailerStatus);
               Object.keys(retailerStatusCopy).forEach(function (key) {
                 conceptArray.forEach(function (concept) {
                   if (retailerStatusCopy[key][concept]) {
-                    retailerStatusCopy[key][concept] = "".concat(result, "CA");
+                    retailerStatusCopy[key][concept] = "".concat(result).concat(userType);
                   }
                 });
               });
@@ -1575,24 +1577,24 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                 idCategory: productTemp.article.id_category,
                 product: productTemp
               }));
-              _context13.next = 24;
+              _context13.next = 26;
               return loadData();
 
-            case 24:
-              _context13.next = 29;
+            case 26:
+              _context13.next = 31;
               break;
 
-            case 26:
-              _context13.prev = 26;
+            case 28:
+              _context13.prev = 28;
               _context13.t0 = _context13["catch"](0);
               console.log(_context13.t0);
 
-            case 29:
+            case 31:
             case "end":
               return _context13.stop();
           }
         }
-      }, _callee13, null, [[0, 26]]);
+      }, _callee13, null, [[0, 28]]);
     }));
 
     return function validateAll(_x8) {
@@ -1601,7 +1603,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
   }();
 
   var evaluationToRetailer = /*#__PURE__*/function () {
-    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(result) {
+    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(result) {
       var data, prod, statusComplete;
       return _regenerator.default.wrap(function _callee14$(_context14) {
         while (1) {
@@ -1643,7 +1645,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
     }));
 
     return function evaluationToRetailer(_x9) {
-      return _ref15.apply(this, arguments);
+      return _ref16.apply(this, arguments);
     };
   }();
 
@@ -2069,7 +2071,8 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       setVersion: setVersion,
       companyName: company.company_name,
       currentVersion: version,
-      setShowCreateVersion: setShowCreateVersion
+      setShowCreateVersion: setShowCreateVersion,
+      setShowVersionSelector: setShowVersionSelector
     }), showCreateVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreateVersion.CreateVersion, {
       idArticle: product.id_article,
       version: version,

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

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

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

@@ -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  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;