contentoh-components-library 21.0.39 → 21.0.42

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

@@ -28,9 +28,7 @@ var GeneralInput = function GeneralInput(_ref) {
       inputsArray = _ref.inputsArray,
       maxLength = _ref.maxLength,
       inputSize = _ref.inputSize,
-      onChange = _ref.onChange,
-      required = _ref.required,
-      defaultValue = _ref.defaultValue;
+      required = _ref.required;
 
   var _useState = (0, _react.useState)({
     value: inputValue !== null && inputValue !== void 0 ? inputValue : ""
@@ -67,9 +65,7 @@ var GeneralInput = function GeneralInput(_ref) {
         return onHandleChange(e);
       },
       maxLength: maxLength && maxLength,
-      onChange: onChange,
-      required: required,
-      defaultValue: defaultValue
+      required: required
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
       name: inputName,
       id: inputId,

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n  }\n  &.home-panel {\n    text-align: center;\n    h2 {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 18px;\n      line-height: 21px;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  &.home-card {\n    position: relative;\n    .plan {\n      text-align: center;\n      & + * {\n        margin-top: 40px;\n      }\n    }\n    .arrowimage {\n      position: absolute;\n      top: 50px;\n      left: 40px;\n    }\n    .general-text {\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .payment-register {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-continuar {\n      text-align: center;\n      & + * {\n        margin-top: 35px;\n      }\n    }\n    .continue {\n      text-align: center;\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      letter-spacing: -0.015em;\n      text-decoration-line: underline;\n      color: ", ";\n    }\n  }\n  .main-container{\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n  }\n  &.home-panel {\n    text-align: center;\n    h2 {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 18px;\n      line-height: 21px;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n\n  &.home-login {\n    width: 100%;\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  &.home-card {\n    position: relative;\n    .plan {\n      text-align: center;\n      & + * {\n        margin-top: 40px;\n      }\n    }\n    .arrowimage {\n      position: absolute;\n      top: 50px;\n      left: 40px;\n    }\n    .general-text {\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .payment-register {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-continuar {\n      text-align: center;\n      & + * {\n        margin-top: 35px;\n      }\n    }\n    .continue {\n      text-align: center;\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      letter-spacing: -0.015em;\n      text-decoration-line: underline;\n      color: ", ";\n    }\n  }\n  .main-container{\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), function (_ref) {
   var panelColor = _ref.panelColor;
   return panelColor ? panelColor : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)";
 }, _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, function (_ref2) {

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

@@ -7,11 +7,13 @@ exports.Loading = void 0;
 
 var _styles = require("./styles");
 
+var _LogoImage = require("../LogoImage");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var Loading = function Loading() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "loader",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "first"
@@ -20,7 +22,7 @@ var Loading = function Loading() {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "third"
       })]
-    })
+    })]
   });
 };
 

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

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 50%;\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 50%;\n    span {\n      display: inline-block;\n      border-radius: 100%;\n      margin-left: 5px;\n      opacity: 1;\n    }\n    .first {\n      background-color: #ff75cf;\n    }\n    .second {\n      background-color: #e33aa9;\n    }\n    .third {\n      background-color: #b12d84;\n    }\n    span:nth-child(1) {\n      width: 16px;\n      height: 16px;\n      animation: opacitychange 1s ease-in-out infinite;\n    }\n    span:nth-child(2) {\n      width: 18px;\n      height: 18px;\n\n      animation: opacitychange 1s ease-in-out 0.33s infinite;\n    }\n    span:nth-child(3) {\n      width: 20px;\n      height: 20px;\n\n      animation: opacitychange 1s ease-in-out 0.66s infinite;\n    }\n    @keyframes opacitychange {\n      0%,\n      100% {\n        opacity: 0;\n      }\n      60% {\n        opacity: 1;\n      }\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  width: 50%;\n  position: relative;\n  img {\n    width: 60%;\n    position: absolute;\n    bottom: 55%;\n    left: 10%;\n  }\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 10%;\n    width: 50%;\n    position: absolute;\n    bottom: 45%;\n    left:10%;\n    span {\n      display: inline-block;\n      border-radius: 100%;\n      margin-left: 5px;\n      opacity: 1;\n    }\n    .first {\n      background-color: #ff75cf;\n    }\n    .second {\n      background-color: #e33aa9;\n    }\n    .third {\n      background-color: #b12d84;\n    }\n    span:nth-child(1) {\n      width: 16px;\n      height: 16px;\n      animation: opacitychange 1s ease-in-out infinite;\n    }\n    span:nth-child(2) {\n      width: 18px;\n      height: 18px;\n\n      animation: opacitychange 1s ease-in-out 0.33s infinite;\n    }\n    span:nth-child(3) {\n      width: 20px;\n      height: 20px;\n\n      animation: opacitychange 1s ease-in-out 0.66s infinite;\n    }\n    @keyframes opacitychange {\n      0%,\n      100% {\n        opacity: 0;\n      }\n      60% {\n        opacity: 1;\n      }\n    }\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/molecules/LoginPasswordStrength/index.js

@@ -21,7 +21,6 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
   var emptyPassword = _ref.emptyPassword,
       emptyConfirmPassword = _ref.emptyConfirmPassword,
       matchPasswords = _ref.matchPasswords,
-      onChange = _ref.onChange,
       required = _ref.required;
 
   var _useState = (0, _react.useState)(0),
@@ -62,9 +61,6 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
         });
         break;
 
-      case "confirmPasswordInput":
-        break;
-
       default:
         return;
     }
@@ -77,8 +73,7 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
         inputType: "password",
         inputId: "newPasswordInput",
         label: "Ingrese su nueva contraseña",
-        required: required,
-        onChange: onChange
+        required: required
       }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
         children: "La contrase\xF1a debe ser minimo de 8 caracteres"
       })]
@@ -123,8 +118,7 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
         inputType: "password",
         inputId: "confirmPasswordInput",
         label: "Confirme la nueva contraseña",
-        required: required,
-        onChange: onChange
+        required: required
       }), emptyConfirmPassword && !emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
         children: "Confirme la contrase\xF1a"
       }), !emptyConfirmPassword && !emptyPassword && !matchPasswords && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {

package/dist/components/molecules/RegistrationFirstStep/index.js

@@ -55,30 +55,25 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       emptyPhone = _useState10[0],
       setEmptyPhone = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(true),
+  var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
       emptyCountry = _useState12[0],
       setEmptyCountry = _useState12[1];
 
   var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      showErrors = _useState14[0],
-      setShowErrors = _useState14[1];
+      invalidEmail = _useState14[0],
+      setInvalidEmail = _useState14[1];
 
   var _useState15 = (0, _react.useState)(false),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      regError = _useState16[0],
-      setRegError = _useState16[1];
+      phoneFormatError = _useState16[0],
+      setPhoneFormatError = _useState16[1];
 
   var _useState17 = (0, _react.useState)(false),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      phoneFormatError = _useState18[0],
-      setPhoneFormatError = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(false),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      emailFormatError = _useState20[0],
-      setEmailFormatError = _useState20[1];
+      regError = _useState18[0],
+      setRegError = _useState18[1];
 
   (0, _react.useEffect)(function () {
     JSON.parse(sessionStorage.getItem("nuevoRegistro")).name === "" && sessionStorage.removeItem("registrationError");
@@ -96,79 +91,54 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
     sessionStorage.getItem("resetPasswordProcess") && sessionStorage.getItem("resetPasswordProcess");
   }, []);
 
-  var updateInfo = function updateInfo(e, newValue) {
-    var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+  var validate = function validate(evt) {
+    var valid = true;
+    evt.preventDefault();
+    var name = document.querySelector("#nameInput").value;
+    var lastName = document.querySelector("#lastNameInput").value;
+    var email = document.querySelector("#emailInput").value;
+    var job = document.querySelector("#jobInput").value;
+    var phone = document.querySelector("#phoneInput").value;
+    var country = document.querySelector("#countrySelect").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);
+    var invalidPhone = true;
+    country === "value" ? setEmptyCountry(true) : setEmptyCountry(false);
+    Array.from(phone).forEach(function (digit, i) {
+      phone.charCodeAt(i) < 48 ? setPhoneFormatError(true) : invalidPhone = false;
+      phone.charCodeAt(i) > 57 ? setPhoneFormatError(true) : invalidPhone = false;
+    });
 
-    switch (e.target.id) {
-      case "nameInput":
-        nuevoUsuario.name = newValue;
-        newValue === "" ? setEmptyName(true) : setEmptyName(false);
-        break;
-
-      case "lastNameInput":
-        nuevoUsuario.lastName = newValue;
-        newValue === "" ? setEmptyLastName(true) : setEmptyLastName(false);
-        break;
-
-      case "emailInput":
-        nuevoUsuario.email = newValue;
-        newValue === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-
-        if (!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(newValue)) {
-          setEmailFormatError(true);
-        } else {
-          setEmailFormatError(false);
-        }
-
-        break;
-
-      case "jobInput":
-        nuevoUsuario.position = newValue;
-        newValue === "" ? setEmptyJob(true) : setEmptyJob(false);
-        break;
-
-      case "phoneInput":
-        Array.from(newValue).forEach(function (digit, i) {
-          newValue.charCodeAt(i) < 48 ? setPhoneFormatError(true) : setPhoneFormatError(false);
-          newValue.charCodeAt(i) > 57 ? setPhoneFormatError(true) : setPhoneFormatError(false);
-        });
-        nuevoUsuario.phone = "".concat(JSON.parse(sessionStorage.getItem("countryCodeSelect"))).concat(newValue);
-        newValue === "" ? setEmptyPhone(true) : setEmptyPhone(false);
-        break;
-
-      case "countrySelect":
-        nuevoUsuario.country = newValue;
-        newValue === "" || newValue === "Selecciona tu país" ? setEmptyCountry(true) : setEmptyCountry(false);
-        break;
-
-      case "countryCodeSelect":
-        sessionStorage.setItem("countryCode", JSON.stringify(newValue));
-        nuevoUsuario.phone = "".concat(JSON.parse(sessionStorage.getItem("countryCode"))).concat(document.querySelector("#phoneInput").value);
-        break;
-
-      default:
-        return;
-    }
+    if (name === "" || lastName === "" || email === "" || job === "" || phone === "" || country === "value" || !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) || invalidPhone) {
+      valid = false;
+    } else valid = true;
 
-    sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+    return valid;
   };
 
-  var validateForm = function validateForm(evt) {
-    var valid = true;
+  var validateForm = function validateForm(evt, valid) {
+    var countryCode = document.querySelector("#countryCodeSelect").value;
     evt.preventDefault();
-    setShowErrors(true);
-    emptyName && (valid = false);
-    emptyLastName && (valid = false);
-    emptyEmail && (valid = false);
-    emptyJob && (valid = false);
-    emptyPhone && (valid = false);
-    emptyCountry && (valid = false);
-    phoneFormatError && (valid = false);
-    emailFormatError && (valid = false);
-    !regError && valid && props.setPaso(function (paso) {
-      return props.paso + 1;
-    });
-    regError && valid && props.setPaso(4);
+    var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+
+    if (valid) {
+      sessionStorage.setItem("countryCode", JSON.stringify(countryCode));
+      nuevoUsuario.name = name;
+      nuevoUsuario.lastName = lastName;
+      nuevoUsuario.email = email;
+      nuevoUsuario.position = job;
+      nuevoUsuario.phone = "".concat(JSON.parse(sessionStorage.getItem("countryCode"))).concat(phone);
+      nuevoUsuario.country = country;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+      !regError && valid && props.setPaso(function (paso) {
+        return props.paso + 1;
+      });
+      regError && valid && props.setPaso(4);
+    }
   };
 
   var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -187,54 +157,37 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
         inputId: "nameInput",
         label: "Nombre",
         inputPlaceHolder: "Nombre",
-        defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).name,
-        required: "required",
-        onInput: function onInput(e) {
-          return updateInfo(e, e.target.value);
-        }
+        required: "required"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
         inputType: "text",
         inputId: "lastNameInput",
         label: "Apellido",
         inputPlaceHolder: "Apellido",
-        defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).lastName,
-        required: "required",
-        onChange: function onChange(e) {
-          return updateInfo(e, e.target.value);
-        }
+        required: "required"
       })]
-    }), emptyName && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su nombre"
-    }), emptyLastName && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), 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",
-      required: "required",
-      defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).email,
-      id: "emailInput",
-      onChange: function onChange(e) {
-        return updateInfo(e, e.target.value);
-      }
+      required: "required"
     }), regError && JSON.parse(sessionStorage.getItem("registrationError")) === "emailExists" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ya existe una cuenta asociada a este correo"
-    }), emptyEmail && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su email"
-    }), emailFormatError && showErrors && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), 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",
-      defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).position,
-      required: "required",
-      onChange: function onChange(e) {
-        return updateInfo(e, e.target.value);
-      }
-    }), emptyJob && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      required: "required"
+    }), emptyJob && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su puesto"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "Teléfono",
@@ -268,18 +221,13 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
         inputId: "phoneInput",
         inputType: "text",
         inputPlaceholder: "Teléfono",
-        defaultValue: //phone without countryCode
-        JSON.parse(sessionStorage.getItem("nuevoRegistro")).phone.substring(JSON.parse(sessionStorage.getItem("countryCode")).length, JSON.parse(sessionStorage.getItem("nuevoRegistro")).phone.length - 1),
-        required: "required",
-        onChange: function onChange(e) {
-          return updateInfo(e, e.target.value);
-        }
+        required: "required"
       })]
     }), regError && JSON.parse(sessionStorage.getItem("registrationError")) === "phoneFormatError" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Introduzca un n\xFAmero v\xE1lido"
-    }), emptyPhone && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su n\xFAmero de tel\xE9fono"
-    }), phoneFormatError && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), phoneFormatError && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Introduzca un n\xFAmero valido ( Solo numeros )"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "País",
@@ -288,40 +236,36 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       name: "select",
       className: "country-options",
       id: "countrySelect",
-      defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).country,
-      onChange: function onChange(e) {
-        return updateInfo(e, e.target.value);
-      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value1",
+        value: "value",
         selected: true,
         children: "Selecciona tu pa\xEDs"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value2",
+        value: "Argentina",
         children: "Argentina"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value3",
+        value: "Colombia",
         children: "Colombia"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value2",
+        value: "Ecuador",
         children: "Ecuador"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value3",
+        value: "El Salvador",
         children: "El Salvador"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value2",
+        value: "Honduras",
         children: "Honduras"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value3",
+        value: "M\xE9xico",
         children: "M\xE9xico"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value2",
+        value: "Panam\xE1",
         children: "Panam\xE1"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-        value: "value3",
+        value: "Per\xFA",
         children: "Per\xFA"
       })]
-    }), emptyEmail && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyCountry && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Seleccione su pa\xEDs"
     })]
   }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -330,7 +274,8 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       buttonType: "general-default-button",
       label: "Enviar",
       onClick: function onClick(e) {
-        return validateForm(e);
+        var flag = validate(e);
+        validateForm(e, flag);
       }
     })
   }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -357,12 +302,10 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
     })
   }, "7")];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        componentsArray: loginRight,
-        panelType: "home-login",
-        panelColor: _variables.GlobalColors.white
-      })
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+      componentsArray: loginRight,
+      panelType: "home-login",
+      panelColor: _variables.GlobalColors.white
     })
   });
 };

package/dist/components/molecules/RegistrationFirstStep/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\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"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\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  .pre-registro {\n    cursor: pointer;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;