contentoh-components-library 21.0.40 → 21.0.41

package/dist/components/organisms/ChangePassword/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  width: 50%;\n  height: 100vh;\n  .button-center {\n    text-align: center;\n    position: absolute;\n    bottom: 5%;\n    left: calc(75% - 80px);\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    //text-align: center;\n    position: absolute;\n    bottom: 5%;\n    left: 14%;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
 
 exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.40",
+  "version": "21.0.41",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -77,7 +77,7 @@
     "auto": "^10.36.5",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.3.3",
-    "contentoh-components-library": "^21.0.26",
+    "contentoh-components-library": "^21.0.40",
     "cross-env": "^7.0.3",
     "storybook-css-modules-preset": "^1.1.1"
   },

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

@@ -14,9 +14,7 @@ export const GeneralInput = ({
   inputsArray,
   maxLength,
   inputSize,
-  onChange,
   required,
-  defaultValue,
 }) => {
   const [textValue, setTextValue] = useState({ value: inputValue ?? "" });
 
@@ -45,9 +43,7 @@ export const GeneralInput = ({
           value={textValue.value}
           onInput={(e) => onHandleChange(e)}
           maxLength={maxLength && maxLength}
-          onChange={onChange}
           required={required}
-          defaultValue={defaultValue}
         />
       ) : (
         <textarea

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

@@ -7,7 +7,7 @@ export const Container = styled.div`
   width: 50%;
   position: relative;
   img {
-    width: 80%;
+    width: 70%;
     position: absolute;
     bottom: 55%;
     left: 10%;
@@ -20,7 +20,7 @@ export const Container = styled.div`
     width: 50%;
     position: absolute;
     bottom: 45%;
-    left:25%;
+    left:15%;
     span {
       display: inline-block;
       border-radius: 100%;

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

@@ -26,7 +26,6 @@ export const EmailResetPasswordLogin = (props) => {
       : setInvalidEmail(false);
     emptyEmail && (valid = false);
     invalidEmail && (valid = false);
-
     if (valid) {
       try {
         await props.Auth.forgotPassword(email);

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

@@ -34,8 +34,7 @@ export const RegistrationFirstStep = (props) => {
     sessionStorage.getItem("resetPasswordProcess") &&
       sessionStorage.getItem("resetPasswordProcess");
   }, []);
-
-  const validateForm = (evt) => {
+  const validate = (evt) => {
     let valid = true;
     evt.preventDefault();
     const name = document.querySelector("#nameInput").value;
@@ -44,7 +43,6 @@ export const RegistrationFirstStep = (props) => {
     const job = document.querySelector("#jobInput").value;
     const phone = document.querySelector("#phoneInput").value;
     const country = document.querySelector("#countrySelect").value;
-    const countryCode = document.querySelector("#countryCodeSelect").value;
     name === "" ? setEmptyName(true) : setEmptyName(false);
     lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
     email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
@@ -55,28 +53,37 @@ export const RegistrationFirstStep = (props) => {
     )
       ? setInvalidEmail(true)
       : setInvalidEmail(false);
-    country === "" || country === "+ tu país"
-      ? setEmptyCountry(true)
-      : setEmptyCountry(false);
+    let invalidPhone = true;
+    country === "value" ? setEmptyCountry(true) : setEmptyCountry(false);
     Array.from(phone).forEach((digit, i) => {
       phone.charCodeAt(i) < 48
         ? setPhoneFormatError(true)
-        : setPhoneFormatError(false);
+        : (invalidPhone = false);
       phone.charCodeAt(i) > 57
         ? setPhoneFormatError(true)
-        : setPhoneFormatError(false);
+        : (invalidPhone = false);
     });
-    let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
     if (
-      !emptyName ||
-      !emptyLastName ||
-      !emptyEmail ||
-      !emptyJob ||
-      !emptyPhone ||
-      !emptyCountry ||
-      !invalidEmail ||
-      !phoneFormatError
+      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;
+
+    return valid;
+  };
+  const validateForm = (evt, valid) => {
+    evt.preventDefault();
+    let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+    if (valid) {
       sessionStorage.setItem("countryCode", JSON.stringify(countryCode));
       nuevoUsuario.name = name;
       nuevoUsuario.lastName = lastName;
@@ -89,10 +96,6 @@ export const RegistrationFirstStep = (props) => {
       sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
       !regError && valid && props.setPaso((paso) => props.paso + 1);
       regError && valid && props.setPaso(4);
-      console.log("rediring");
-    } else {
-      valid = false;
-      console.log("code");
     }
   };
 
@@ -175,25 +178,28 @@ export const RegistrationFirstStep = (props) => {
       )}
       <ScreenHeader text={"País"} headerType={"input-name-header"} />
       <select name="select" className="country-options" id="countrySelect">
-        <option value="value1" selected>
+        <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 && <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">

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

@@ -75,10 +75,10 @@ export const Container = styled.div`
     .new-login {
       & + * {
         margin-top: 20px;
-        p {
-          cursor: pointer;
-        }
       }
     }
   }
+  .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"}
     />,
-    <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/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>
   );

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

@@ -12,18 +12,20 @@ export const VerificationCodeResetPasswordLogin = (props) => {
   const [resend, setResend] = useState(false);
   const [awsError, setAwsError] = useState("");
   const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
-  const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState();
+  const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState(
+    document.querySelectorAll("[id^='verificationCodeInput']")
+  );
   const inputPositions = [1, 2, 3, 4, 5, 6];
 
   useEffect(() => {
     props.confirmationError !== "" && setEmptyVerificationCode(false);
   }, [props.confirmationError]);
 
-  const checkCode = (e) => {
+  const checkCode = (e, flag) => {
     let valid = true;
     e.preventDefault();
     let code = "";
-    if (awsError === "" && !emptyVerificationCode) {
+    if (awsError === "" && !flag) {
       inputPositions.map(
         (position) =>
           (code =
@@ -35,19 +37,18 @@ export const VerificationCodeResetPasswordLogin = (props) => {
           (valid = false);
       }
       sessionStorage.setItem("confirmationCode", JSON.stringify(code));
-      setEmptyVerificationCode(false);
       valid &&
-        !sessionStorage.getItem("resetPasswordProcess") &&
-        props.setPaso(6);
+      !sessionStorage.getItem("resetPasswordProcess") &&
+      props.setPaso(6);
       valid &&
-        sessionStorage.getItem("resetPasswordProcess") &&
-        props.setPaso(8);
+      sessionStorage.getItem("resetPasswordProcess") &&
+      props.setPaso(8);
     }
   };
 
   const validateResend = async (e) => {
     e.preventDefault();
-    //const email = JSON.parse(sessionStorage.getItem("email"));
+    const email = JSON.parse(sessionStorage.getItem("email"));
     try {
       await props.Auth.forgotPassword(email);
       sessionStorage.setItem("email", JSON.stringify(email));
@@ -86,9 +87,9 @@ export const VerificationCodeResetPasswordLogin = (props) => {
       )}
       {!sessionStorage.getItem("email") && (
         <ScreenHeader
-          text={`Ingrese código de verificación enviado a: ${
-            JSON.parse(sessionStorage.getItem("nuevoRegistro")).email
-          }`}
+           text={`Ingrese código de verificación enviado a: ${
+             JSON.parse(sessionStorage.getItem("nuevoRegistro")).email
+           }`}
           headerType={"input-name-header"}
         />
       )}
@@ -147,13 +148,14 @@ export const VerificationCodeResetPasswordLogin = (props) => {
         buttonType={"general-default-button"}
         label={"Enviar"}
         onClick={(e) => {
-          validate(inputCodeVerificationAll, setEmptyVerificationCode);
-          checkCode(e);
+          let flag = validate(inputCodeVerificationAll);
+          checkCode(e, flag);
+          setEmptyVerificationCode(flag);
         }}
       />
     </div>,
     <div className="reset-password" key="6">
-      <p onClick={() => props.setPaso(10)}>Regresar...</p>
+       <p onClick={() => props.setPaso(10)}>Regresar...</p> 
     </div>,
   ];
   return (

package/src/components/molecules/VerificationCodeResetPasswordLogin/utils.js

@@ -45,12 +45,10 @@ const nextInputFocus = (inputsArray, index) => {
  * @param {function} setEmptyVerificationCode function to update flag which handles if there's an empty char
  * updates emptyVerificationFlag from father component
  */
-export const validate = (inputsArray, setEmptyVerificationCode) => {
+export const validate = (inputsArray) => {
   let contInputEmpty = 0;
   inputsArray.forEach((element) => {
     element.value === "" ? 0 : contInputEmpty++;
   });
-  contInputEmpty === inputsArray.length
-    ? setEmptyVerificationCode(false)
-    : setEmptyVerificationCode(true);
+  return contInputEmpty !== inputsArray.length  
 };

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

@@ -7,15 +7,17 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 import { GradientPanel } from "../../atoms/GradientPanel";
 
-export const ChangePassword = () => {
+export const ChangePassword = (props) => {
+  
   const [emptyPassword, setEmptyPassword] = useState(false);
   const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
   const [matchPasswords, setMatchPasswords] = useState(true);
+
   const validate = async (e) => {
     e.preventDefault();
-    const password = document.querySelector("#newPasswordInput").value;
+    let password = document.querySelector("#newPasswordInput").value;
     password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
-    const confirmPassword = document.querySelector(
+    let confirmPassword = document.querySelector(
       "#confirmPasswordInput"
     ).value;
     confirmPassword === ""
@@ -26,7 +28,18 @@ export const ChangePassword = () => {
     } else {
       setMatchPasswords(false);
     }
+    let valid = true;
+    emptyPassword && (valid = false);
+    emptyConfirmPassword && (valid = false);
+    !matchPasswords && (valid = false);
+    if (valid) {
+      sessionStorage.setItem("newPassword", JSON.stringify(password));
+      !sessionStorage.getItem("resetPasswordProcess")
+        ? props.setPaso(9)
+        : props.setPaso(11);
+    }
   };
+
   const loginRight = [
     <LogoImage key="1" />,
     <div className="credenciales" key={"2"}>

package/src/components/organisms/ChangePassword/styles.js

@@ -5,10 +5,10 @@ export const Container = styled.div`
   width: 50%;
   height: 100vh;
   .button-center {
-    text-align: center;
+    //text-align: center;
     position: absolute;
     bottom: 5%;
-    left: calc(75% - 80px);
+    left: 14%;
     .general-default-button {
       width: 160px;
     }