contentoh-components-library 21.0.38 → 21.0.41

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

@@ -6,7 +6,6 @@ export const LoginPasswordStrength = ({
   emptyPassword,
   emptyConfirmPassword,
   matchPasswords,
-  onChange,
   required,
 }) => {
   const [passwordStrength, setPasswordStrength] = useState(0);
@@ -40,8 +39,6 @@ export const LoginPasswordStrength = ({
         newValue.match(specialChar) &&
           setPasswordStrength((passwordStrength) => passwordStrength + 1);
         break;
-      case "confirmPasswordInput":
-        break;
       default:
         return;
     }
@@ -55,7 +52,6 @@ export const LoginPasswordStrength = ({
           inputId={"newPasswordInput"}
           label={"Ingrese su nueva contraseña"}
           required={required}
-          onChange={onChange}
         />
         {emptyPassword && (
           <label>La contraseña debe ser minimo de 8 caracteres</label>
@@ -85,7 +81,6 @@ export const LoginPasswordStrength = ({
           inputId={"confirmPasswordInput"}
           label={"Confirme la nueva contraseña"}
           required={required}
-          onChange={onChange}
         />
         {emptyConfirmPassword && !emptyPassword && (
           <label>Confirme la contraseña</label>

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

@@ -14,11 +14,10 @@ export const RegistrationFirstStep = (props) => {
   const [emptyEmail, setEmptyEmail] = useState(false);
   const [emptyJob, setEmptyJob] = useState(false);
   const [emptyPhone, setEmptyPhone] = useState(false);
-  const [emptyCountry, setEmptyCountry] = useState(true);
-  const [showErrors, setShowErrors] = useState(false);
-  const [regError, setRegError] = useState(false);
+  const [emptyCountry, setEmptyCountry] = useState(false);
+  const [invalidEmail, setInvalidEmail] = useState(false);
   const [phoneFormatError, setPhoneFormatError] = useState(false);
-  const [emailFormatError, setEmailFormatError] = useState(false);
+  const [regError, setRegError] = useState(false);
 
   useEffect(() => {
     JSON.parse(sessionStorage.getItem("nuevoRegistro")).name === "" &&
@@ -32,86 +31,74 @@ export const RegistrationFirstStep = (props) => {
       setEmptyCountry(false);
       setEmptyPhone(false);
     }
-
     sessionStorage.getItem("resetPasswordProcess") &&
       sessionStorage.getItem("resetPasswordProcess");
   }, []);
+  const validate = (evt) => {
+    let valid = true;
+    evt.preventDefault();
+    const name = document.querySelector("#nameInput").value;
+    const lastName = document.querySelector("#lastNameInput").value;
+    const email = document.querySelector("#emailInput").value;
+    const job = document.querySelector("#jobInput").value;
+    const phone = document.querySelector("#phoneInput").value;
+    const 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);
+    let invalidPhone = true;
+    country === "value" ? setEmptyCountry(true) : setEmptyCountry(false);
+    Array.from(phone).forEach((digit, i) => {
+      phone.charCodeAt(i) < 48
+        ? setPhoneFormatError(true)
+        : (invalidPhone = false);
+      phone.charCodeAt(i) > 57
+        ? setPhoneFormatError(true)
+        : (invalidPhone = false);
+    });
+    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;
 
-  const updateInfo = (e, newValue) => {
+    return valid;
+  };
+  const validateForm = (evt, valid) => {
+    evt.preventDefault();
     let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
-    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((digit, i) => {
-          newValue.charCodeAt(i) < 48
-            ? setPhoneFormatError(true)
-            : setPhoneFormatError(false);
-          newValue.charCodeAt(i) > 57
-            ? setPhoneFormatError(true)
-            : setPhoneFormatError(false);
-        });
-        nuevoUsuario.phone = `${JSON.parse(
-          sessionStorage.getItem("countryCodeSelect")
-        )}${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 = `${JSON.parse(
-          sessionStorage.getItem("countryCode")
-        )}${document.querySelector("#phoneInput").value}`;
-        break;
-      default:
-        return;
+    if (valid) {
+      sessionStorage.setItem("countryCode", JSON.stringify(countryCode));
+      nuevoUsuario.name = name;
+      nuevoUsuario.lastName = lastName;
+      nuevoUsuario.email = email;
+      nuevoUsuario.position = job;
+      nuevoUsuario.phone = `${JSON.parse(
+        sessionStorage.getItem("countryCode")
+      )}${phone}`;
+      nuevoUsuario.country = country;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+      !regError && valid && props.setPaso((paso) => props.paso + 1);
+      regError && valid && props.setPaso(4);
     }
-    sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
   };
 
-  const validateForm = (evt) => {
-    let valid = true;
-    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((paso) => props.paso + 1);
-    regError && valid && props.setPaso(4);
-  };
   const loginRight = [
     <LogoImage key="1" />,
     <div className="credenciales" key={"2"}>
@@ -128,57 +115,40 @@ export const RegistrationFirstStep = (props) => {
           inputId={"nameInput"}
           label={"Nombre"}
           inputPlaceHolder={"Nombre"}
-          defaultValue={
-            JSON.parse(sessionStorage.getItem("nuevoRegistro")).name
-          }
-          required={required}
-          onInput={(e) => updateInfo(e, e.target.value)}
+          required={"required"}
         />
         <TagAndInput
           inputType={"text"}
           inputId={"lastNameInput"}
           label={"Apellido"}
           inputPlaceHolder={"Apellido"}
-          defaultValue={
-            JSON.parse(sessionStorage.getItem("nuevoRegistro")).lastName
-          }
-          required={required}
-          onChange={(e) => updateInfo(e, e.target.value)}
+          required={"required"}
         />
       </div>
-      {emptyName && showErrors && <label>Ingrese su nombre</label>}
-      {emptyLastName && showErrors && <label>Ingrese sus apellidos</label>}
+      {emptyName && <label>Ingrese su nombre</label>}
+      {emptyLastName && <label>Ingrese sus apellidos</label>}
       <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={(e) => updateInfo(e, e.target.value)}
+        required={"required"}
       />
       {regError &&
         JSON.parse(sessionStorage.getItem("registrationError")) ===
           "emailExists" && (
           <label>Ya existe una cuenta asociada a este correo</label>
         )}
-      {emptyEmail && showErrors && <label>Ingrese su email</label>}
-      {emailFormatError && showErrors && !emptyEmail && (
-        <label>Ingrese un correo válido</label>
-      )}
+      {emptyEmail && <label>Ingrese su email</label>}
+      {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
       <TagAndInput
         inputType={"text"}
         inputId={"jobInput"}
         label={"Puesto laboral"}
         inputPlaceHolder={"Puesto dentro de la empresa"}
-        defaultValue={
-          JSON.parse(sessionStorage.getItem("nuevoRegistro")).position
-        }
-        required={required}
-        onChange={(e) => updateInfo(e, e.target.value)}
+        required={"required"}
       />
-      {emptyJob && showErrors && <label>Ingrese su puesto</label>}
+      {emptyJob && <label>Ingrese su puesto</label>}
       <ScreenHeader text={"Teléfono"} headerType={"input-name-header"} />
       <div className="phone-registration-user">
         <select name="select" className="phone-options" id="countryCodeSelect">
@@ -196,54 +166,40 @@ export const 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={(e) => updateInfo(e, e.target.value)}
+          required={"required"}
         />
       </div>
       {regError &&
         JSON.parse(sessionStorage.getItem("registrationError")) ===
           "phoneFormatError" && <label>Introduzca un número válido</label>}
-      {emptyPhone && showErrors && <label>Ingrese su número de teléfono</label>}
-      {phoneFormatError && showErrors && (
+      {emptyPhone && <label>Ingrese su número de teléfono</label>}
+      {phoneFormatError && (
         <label>Introduzca un número valido ( Solo numeros )</label>
       )}
       <ScreenHeader text={"País"} headerType={"input-name-header"} />
-      <select
-        name="select"
-        className="country-options"
-        id="countrySelect"
-        defaultValue={
-          JSON.parse(sessionStorage.getItem("nuevoRegistro")).country
-        }
-        onChange={(e) => updateInfo(e, e.target.value)}
-      >
-        <option value="value1" selected>
+      <select name="select" className="country-options" id="countrySelect">
+        <option value="value" selected>
           Selecciona tu país
         </option>
-        <option value="value2">Argentina</option>
-        <option value="value3">Colombia</option>
-        <option value="value2">Ecuador</option>
-        <option value="value3">El Salvador</option>
-        <option value="value2">Honduras</option>
-        <option value="value3">México</option>
-        <option value="value2">Panamá</option>
-        <option value="value3">Perú</option>
+        <option value="Argentina">Argentina</option>
+        <option value="Colombia">Colombia</option>
+        <option value="Ecuador">Ecuador</option>
+        <option value="El Salvador">El Salvador</option>
+        <option value="Honduras">Honduras</option>
+        <option value="México">México</option>
+        <option value="Panamá">Panamá</option>
+        <option value="Perú">Perú</option>
       </select>
-      {emptyEmail && showErrors && <label>Seleccione su país</label>}
+      {emptyCountry && <label>Seleccione su país</label>}
     </div>,
     <div className="button-end" key="4">
       <Button
         buttonType={"general-default-button"}
         label={"Enviar"}
-        onClick={(e) => validateForm(e)}
+        onClick={(e) => {
+          let flag = validate(e);
+          validateForm(e, flag);
+        }}
       />
     </div>,
     <div className="progress-bar" key="5">
@@ -264,13 +220,11 @@ export const RegistrationFirstStep = (props) => {
   ];
   return (
     <Container>
-      <div>
-        <GradientPanel
-          componentsArray={loginRight}
-          panelType={"home-login"}
-          panelColor={GlobalColors.white}
-        />
-      </div>
+      <GradientPanel
+        componentsArray={loginRight}
+        panelType={"home-login"}
+        panelColor={GlobalColors.white}
+      />
     </Container>
   );
 };

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

@@ -78,4 +78,7 @@ export const Container = styled.div`
       }
     }
   }
-`;
+  .pre-registro {
+    cursor: pointer;
+  }
+`;

package/src/components/molecules/RegistrationSecondStep/index.js

@@ -1,6 +1,6 @@
 import { Container } from "./styles";
 import { GradientPanel } from "../../atoms/GradientPanel";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 import { Button } from "../../atoms/GeneralButton";
@@ -8,46 +8,27 @@ import { LoginPasswordStrength } from "../../molecules/LoginPasswordStrength";
 import { LogoImage } from "../../atoms/LogoImage";
 
 export const RegistrationSecondStep = (props) => {
-  const [passwordStrength, setPasswordStrenght] = useState(0);
-  const [passwordFinal, setPasswordFinal] = useState("");
-  const [repeatedPassword, setRepeatedPassword] = useState("");
-  const [passwordMatches, setPasswordMatches] = useState(false);
-  const [passwordToShort, setPasswordToShort] = useState(true);
-  const [showErrors, setShowErrors] = useState(false);
   const [privacyCheck, setPrivacyCheck] = useState(false);
   const [termsCheck, setTermsCheck] = useState(false);
-
   const [emptyPassword, setEmptyPassword] = useState(false);
   const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
   const [matchPasswords, setMatchPasswords] = useState(true);
-
   let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
-  let upperCaseLetters = /[A-Z]/g;
-  let numbers = /[0-9]/g;
-  let specialChar = /['!','@','#','$','%','^','&','*']/g;
-
-  // on passwordFinal update
-  useEffect(() => {
-    passwordFinal === repeatedPassword
-      ? setPasswordMatches(true)
-      : setPasswordMatches(false);
-    passwordFinal.length < 8
-      ? setPasswordToShort(true)
-      : setPasswordToShort(false);
-  }, [passwordFinal, repeatedPassword]);
 
-  // on repeatedPassword update
-  useEffect(() => {
-    passwordFinal === repeatedPassword
-      ? setPasswordMatches(true)
-      : setPasswordMatches(false);
-    repeatedPassword === ""
-      ? setEmptyConfirmPassword(true)
-      : setEmptyConfirmPassword(false);
-  }, [passwordFinal, repeatedPassword]);
-
-  const updateInfo = (e, newValue) => {
+  const validateForm = (evt, valid) => {
+    evt.preventDefault();
+    const password = document.querySelector("#newPasswordInput").value;
+    if (valid) {
+      !termsCheck && (valid = false);
+      !privacyCheck && (valid = false);
+      nuevoUsuario.password = password;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+      valid && props.setPaso(3);
+    }
+  };
+  const validate = (e) => {
     e.preventDefault();
+    let valid = true;
     const password = document.querySelector("#newPasswordInput").value;
     password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
     const confirmPassword = document.querySelector(
@@ -56,48 +37,18 @@ export const RegistrationSecondStep = (props) => {
     confirmPassword === ""
       ? setEmptyConfirmPassword(true)
       : setEmptyConfirmPassword(false);
-    if (password === confirmPassword) {
-      setMatchPasswords(true);
-    } else {
-      setMatchPasswords(false);
-    }
-    switch (e.target.id) {
-      case "passwordInput":
-        setPasswordStrenght(0);
-        if (newValue.length > 8) {
-          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
-        }
-        //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
-        newValue.match(upperCaseLetters) &&
-          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
-        newValue.match(numbers) &&
-          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
-        newValue.match(specialChar) &&
-          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
-        //Actualizar value de la contraseña y guardar en sessionStorage
-        setPasswordFinal(newValue);
-        nuevoUsuario.password = newValue;
-        sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
-        break;
-      case "confirmPasswordInput":
-        setRepeatedPassword(newValue);
-        break;
-      default:
-        return;
-    }
+    password === confirmPassword
+      ? setMatchPasswords(true)
+      : setMatchPasswords(false);
+    if (
+      password.length < 8 ||
+      confirmPassword === "" ||
+      password !== confirmPassword
+    ) {
+      valid = false;
+    } 
+    return valid;
   };
-  const validateForm = (evt) => {
-    evt.preventDefault();
-    setShowErrors(true);
-    let valid = true;
-    passwordToShort && (valid = false);
-    emptyConfirmPassword && (valid = false);
-    !passwordMatches && (valid = false);
-    !termsCheck && (valid = false);
-    !privacyCheck && (valid = false);
-    valid && props.setPaso(3);
-  };
-  
   const loginRight = [
     <LogoImage key="1" />,
     <div className="credenciales" key={"2"}>
@@ -113,12 +64,13 @@ export const RegistrationSecondStep = (props) => {
       emptyConfirmPassword={emptyConfirmPassword}
       matchPasswords={matchPasswords}
       textTittle={"Ingresa tus credenciales"}
-      onChange={(e) => updateInfo(e, e.target.value)}
-      required={required}
+      required={"required"}
     />,
-    <label className="label-terms" key={"4"}>Términos y condiciones</label>,
+    <label className="label-terms" key={"4"}>
+      Términos y condiciones
+    </label>,
     <div className="checkbox-terms" key={"5"}>
-      <input type="checkbox" />
+      <input type="checkbox" onClick={(e) => setTermsCheck(e.target.checked)} />
       <ScreenHeader
         text={
           "Conoce nuestros termnios y condiciones de cada uno de nuestros servicios. Si tienes algunda duda o comentario escríbenos."
@@ -126,19 +78,32 @@ export const RegistrationSecondStep = (props) => {
         headerType={"date-header"}
       />
     </div>,
-    <label className="label-terms" key={"6"}>Aviso de privacidad</label>,
+    <label className="label-terms" key={"6"}>
+      Aviso de privacidad
+    </label>,
     <div className="checkbox-terms" key={"7"}>
-      <input type="checkbox" />
+      <input
+        type="checkbox"
+        onClick={(e) => setPrivacyCheck(e.target.checked)}
+      />
       <ScreenHeader
         text={"Todos los datos estan protegidos."}
         headerType={"date-header"}
       />
+      {!termsCheck && !!privacyCheck && (
+        <label>
+          Seleccione los terminos y condiciones y el Aviso de privacidad
+        </label>
+      )}
     </div>,
     <div className="button-end" key="8">
       <Button
         buttonType={"general-default-button"}
         label={"Enviar"}
-        onClick={(e) => validate(e)}
+        onClick={(e) => {
+          let flag = validate(e);
+          validateForm(e, flag);
+        }}
       />
     </div>,
     <div className="progress-bar" key={"9"}>
@@ -160,11 +125,11 @@ export const RegistrationSecondStep = (props) => {
   ];
   return (
     <Container>
-        <GradientPanel
-          panelColor={GlobalColors.white}
-          componentsArray={loginRight}
-          panelType={"home-login"}
-        ></GradientPanel>
+      <GradientPanel
+        panelColor={GlobalColors.white}
+        componentsArray={loginRight}
+        panelType={"home-login"}
+      ></GradientPanel>
     </Container>
   );
-};
+};

package/src/components/molecules/RegistrationThirdStep/index.js

@@ -12,8 +12,10 @@ export const RegistrationThirdStep = () => {
   const [emptyBussinesName, setEmptyBussinesName] = useState(false);
   const [emptyRFC, setEmptyRFC] = useState(false);
   const [emptyFiscalAddress, setEmptyFiscalAddress] = useState(false);
-  const validate = async (e) => {
+
+  const validate = (e) => {
     e.preventDefault();
+    let valid = true;
     const commercialName = document.querySelector("#commercialNameInput").value;
     const bussinesName = document.querySelector("#bussinesNameInput").value;
     const RFC = document.querySelector("#rfcInput").value;
@@ -28,7 +30,18 @@ export const RegistrationThirdStep = () => {
     FiscalAddress === ""
       ? setEmptyFiscalAddress(true)
       : setEmptyFiscalAddress(false);
+    if (
+      commercialName === "" ||
+      bussinesName === "" ||
+      RFC === "" ||
+      FiscalAddress === ""
+    ) {
+      valid = false;
+    }
+    valid && sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoRegistro));
+    valid && props.setPaso(props.paso + 1);
   };
+
   const loginRight = [
     <LogoImage key="1" />,
     <div className="credenciales" key={"2"}>

package/src/components/molecules/SignInLogin/styles.js

@@ -65,6 +65,7 @@ export const Container = styled.div`
         font-size: 13px;
         line-height: 24px;
         color: ${GlobalColors.s5};
+        cursor: pointer;
         span {
           color: ${GlobalColors.secondary_magenta};
         }

package/src/components/molecules/TagAndInput/index.js

@@ -9,8 +9,6 @@ export const TagAndInput = ({
   inputPlaceHolder,
   inputId,
   required,
-  onChange,
-  defaultValue,
 }) => {
   return (
     <Container
@@ -25,8 +23,6 @@ export const TagAndInput = ({
         inputValue={value}
         inputPlaceholder={inputPlaceHolder}
         required={required}
-        onChange={onChange}
-        defaultValue={defaultValue}
       />
     </Container>
   );