contentoh-components-library 21.0.26 → 21.0.27

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

@@ -0,0 +1,97 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { useState } from "react";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { Button } from "../../atoms/GeneralButton";
+import { LoginPasswordStrength } from "../../molecules/LoginPasswordStrength";
+import { LogoImage } from "../../atoms/LogoImage";
+
+export const RegistrationSecondStep = () => {
+  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;
+    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+    const confirmPassword = document.querySelector(
+      "#confirmPasswordInput"
+    ).value;
+    confirmPassword === ""
+      ? setEmptyConfirmPassword(true)
+      : setEmptyConfirmPassword(false);
+    if (password === confirmPassword) {
+      setMatchPasswords(true);
+    } else {
+      setMatchPasswords(false);
+    }
+  };
+  const loginRight = [
+    <LogoImage key="1" />,
+    <div className="credenciales" key={"2"}>
+      <ScreenHeader
+        fontFamily={FontFamily.AvenirNext}
+        color={GlobalColors.s5}
+        text={"Ingresa tus credenciales"}
+      />
+    </div>,
+    <LoginPasswordStrength
+      key={"3"}
+      emptyPassword={emptyPassword}
+      emptyConfirmPassword={emptyConfirmPassword}
+      matchPasswords={matchPasswords}
+      textTittle={"Ingresa tus credenciales"}
+    />,
+    <label className="label-terms" key={"4"}>Términos y condiciones</label>,
+    <div className="checkbox-terms" key={"5"}>
+      <input type="checkbox" />
+      <ScreenHeader
+        text={
+          "Conoce nuestros termnios y condiciones de cada uno de nuestros servicios. Si tienes algunda duda o comentario escríbenos."
+        }
+        headerType={"date-header"}
+      />
+    </div>,
+    <label className="label-terms" key={"6"}>Aviso de privacidad</label>,
+    <div className="checkbox-terms" key={"7"}>
+      <input type="checkbox" />
+      <ScreenHeader
+        text={"Todos los datos estan protegidos."}
+        headerType={"date-header"}
+      />
+    </div>,
+    <div className="button-end" key="8">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+    <div className="progress-bar" key={"9"}>
+      <div className="progress-bar-first-step-check"></div>
+      <div className="progress-bar-second-step"></div>
+      <div className="progress-bar-registration"></div>
+    </div>,
+    <ScreenHeader
+      text={"Paso 2"}
+      headerType={"date-header"}
+      color={GlobalColors.s4}
+      key={"10"}
+    />,
+    <div className="new-login" key="11">
+      <p className="pre-registro">
+        ¿Aún no tienes cuenta?<span> Regístrate</span>
+      </p>
+    </div>,
+  ];
+  return (
+    <Container>
+        <GradientPanel
+          panelColor={GlobalColors.white}
+          componentsArray={loginRight}
+          panelType={"home-login"}
+        ></GradientPanel>
+    </Container>
+  );
+};

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

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 50%;
+  height: 100vh;
+  .button-end {
+    text-align: end;
+    .general-default-button {
+      width: 160px;
+    }
+    & + * {
+      margin-top: 10px;
+    }
+  }
+  .progress-bar {
+    width: 100%;
+    height: 8px;
+    display: flex;
+    justify-content: space-between;
+    .progress-bar-first-step-check {
+      width: 33.33%;
+      background-color: ${GlobalColors.exported};
+    }
+    .progress-bar-second-step {
+      width: 33.33%;
+      background-color: rgb(196, 196, 196);
+    }
+    .progress-bar-registration {
+      background-color: rgb(226, 226, 226);
+      width: 33.33%;
+    }
+  }
+  .date-header {
+    margin-left: 33.33%;
+  }
+  .checkbox-terms {
+    display: flex;
+    margin-bottom: 5px;
+    input {
+      cursor: pointer;
+      & + * {
+        margin-left: 15px;
+      }
+    }
+  }
+  .label-terms {
+    color: rgb(129, 115, 147);
+    font-size: 13px;
+    line-height: 24px;
+    font-weight: 700;
+    cursor: pointer;
+    margin-left: 25px;
+    & + * {
+      margin-top: 5px;
+    }
+  }
+`;

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

@@ -0,0 +1,11 @@
+import { RegistrationThirdStep } from "./index";
+
+export default {
+  title: "Components/molecules/RegistrationThirdStep",
+  component: RegistrationThirdStep,
+};
+const Template = (args) => <RegistrationThirdStep {...args} />;
+
+export const RegistrationThirdStepDefault = Template.bind({});
+
+RegistrationThirdStepDefault.args = {};

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

@@ -0,0 +1,109 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { useState } from "react";
+import { LogoImage } from "../../atoms/LogoImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { TagAndInput } from "../../molecules/TagAndInput";
+import { Button } from "../../atoms/GeneralButton";
+
+export const RegistrationThirdStep = () => {
+  const [emptyCommercialName, setEmptyCommercialName] = useState(false);
+  const [emptyBussinesName, setEmptyBussinesName] = useState(false);
+  const [emptyRFC, setEmptyRFC] = useState(false);
+  const [emptyFiscalAddress, setEmptyFiscalAddress] = useState(false);
+  const validate = async (e) => {
+    e.preventDefault();
+    const commercialName = document.querySelector("#commercialNameInput").value;
+    const bussinesName = document.querySelector("#bussinesNameInput").value;
+    const RFC = document.querySelector("#rfcInput").value;
+    const FiscalAddress = document.querySelector("#fiscalAddressInput").value;
+    commercialName === ""
+      ? setEmptyCommercialName(true)
+      : setEmptyCommercialName(false);
+    bussinesName === ""
+      ? setEmptyBussinesName(true)
+      : setEmptyBussinesName(false);
+    RFC === "" ? setEmptyRFC(true) : setEmptyRFC(false);
+    FiscalAddress === ""
+      ? setEmptyFiscalAddress(true)
+      : setEmptyFiscalAddress(false);
+  };
+  const loginRight = [
+    <LogoImage key="1" />,
+    <div className="credenciales" key={"2"}>
+      <ScreenHeader
+        fontFamily={FontFamily.AvenirNext}
+        color={GlobalColors.s5}
+        text={"Ingresa tus credenciales"}
+      />
+    </div>,
+    <div className="user" key="3">
+      <TagAndInput
+        inputType={"text"}
+        inputId={"commercialNameInput"}
+        label={"Nombre comercial"}
+        inputPlaceHolder={"Nombre comercial"}
+      />
+      {emptyCommercialName && (
+        <label>Ingrese el nombre comercial de la empresa</label>
+      )}
+      <TagAndInput
+        inputType={"text"}
+        inputId={"bussinesNameInput"}
+        label={"Razón social"}
+        inputPlaceHolder={"Razón social"}
+      />
+      {emptyBussinesName && (
+        <label>Ingrese la razón social de la empresa</label>
+      )}
+      <TagAndInput
+        inputType={"text"}
+        inputId={"rfcInput"}
+        label={"RFC"}
+        inputPlaceHolder={"RFC"}
+      />
+      {emptyRFC && <label>El RFC es requerido</label>}
+      <TagAndInput
+        inputType={"text"}
+        inputId={"fiscalAddressInput"}
+        label={"Direccion fiscal"}
+        inputPlaceHolder={"Dirección fiscal"}
+      />
+      {emptyFiscalAddress && (
+        <label>Ingrese la direccion fiscal de la empresa</label>
+      )}
+    </div>,
+    <div className="button-end" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+    <div className="progress-bar" key="5">
+      <div className="progress-bar-step-check"></div>
+      <div className="progress-bar-registration"></div>
+    </div>,
+    <ScreenHeader
+      text={"Paso 3"}
+      headerType={"date-header"}
+      color={GlobalColors.s4}
+      key="6"
+    />,
+    <div className="new-login" key="7">
+      <p className="pre-registro">
+        ¿Ya tienes una cuenta?<span> Inicia Sesión</span>
+      </p>
+    </div>,
+  ];
+  return (
+    <Container>
+      <GradientPanel
+        componentsArray={loginRight}
+        panelType={"home-login"}
+        panelColor={GlobalColors.white}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 50%;
+  height: 100%;
+  .user {
+    .input-name-header {
+      margin-top: 10px;
+    }
+  }
+  .button-end {
+    text-align: end;
+    .general-default-button {
+      width: 160px;
+    }
+    & + * {
+      margin-top: 10px;
+    }
+  }
+  .progress-bar {
+    width: 100%;
+    height: 8px;
+    display: flex;
+    justify-content: space-between;
+    .progress-bar-step-check {
+      width: 66.66%;
+      background-color: ${GlobalColors.exported};
+    }
+    .progress-bar-registration {
+      background-color: rgb(196, 196, 196);
+      width: 33.33%;
+    }
+  }
+  .date-header {
+    margin-left: 66.66%;
+    .new-login {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+  }
+`;

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

@@ -5,75 +5,197 @@ import { Button } from "../../atoms/GeneralButton/index";
 import { CheckBox } from "../../atoms/CheckBox/index";
 import { TagAndInput } from "../TagAndInput";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { Loading } from "../../atoms/Loading";
+import { Redirect } from "react-router-dom";
 
-export const SignInLogin = () => {
+export const SignInLogin = (props) => {
   const [emptyEmail, setEmptyEmail] = useState(false);
   const [invalidEmail, setInvalidEmail] = useState(false);
   const [emptyPassword, setEmptyPassword] = useState(false);
+  const [showErrors, setShowErrors] = useState(true);
+  const [signInError, setSignInError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [upgradePlanRedirect, setUpgradePlanRedirect] = useState(false);
   const validate = async (e) => {
+    setSignInError("");
+    setShowErrors(true);
     e.preventDefault();
+    let valid = true;
     const email = document.querySelector("#emailInput").value;
     const password = document.querySelector("#passwordInput").value;
-    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-    password === "" ? setEmptyPassword(true) : setEmptyPassword(false);
     !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
       email
     )
       ? setInvalidEmail(true)
       : setInvalidEmail(false);
+    if (email === "") {
+      valid = false;
+      setEmptyEmail(true);
+    } else {
+      setEmptyEmail(false);
+    }
+    if (password === "") {
+      valid = false;
+      setEmptyPassword(true);
+    } else {
+      setEmptyPassword(false);
+    }
+    if (valid) {
+      try {
+        setLoading(true);
+        const session = await Auth.signIn(email, password);
+        if (session.challengeName === "NEW_PASSWORD_REQUIRED") {
+          props.setUser(session);
+          props.setPaso(8);
+        } else {
+          const userGroup =
+            session.signInUserSession.accessToken.payload["cognito:groups"];
+          const response = await axios.get(
+            process.env.REACT_APP_USER_ENDPOINT,
+            {
+              headers: {
+                Authorization: session.signInUserSession.idToken.jwtToken,
+              },
+            }
+          );
+          const userGroupValue =
+            typeof userGroup === "string" ? userGroup : userGroup[0];
+          if (userGroupValue === "usuario_contentoh") {
+            sessionStorage.setItem("auth", true);
+            sessionStorage.setItem(
+              "jwt",
+              session.signInUserSession.idToken.jwtToken
+            );
+            const user = JSON.parse(response.data.body).data[0];
+            const company = JSON.parse(response.data.body).data[1];
+            caches.keys().then((names) => {
+              names.forEach((name) => {
+                caches.delete(name);
+              });
+            });
+            user.src = `https://${
+              process.env.REACT_APP_IMAGES_PROFILE_BUCKET
+            }.s3.amazonaws.com/id-${user.id_user}/${
+              user.id_user
+            }.png?${new Date().getTime()}`;
+            sessionStorage.setItem("user", JSON.stringify(user));
+            sessionStorage.setItem("company", JSON.stringify(company));
+            setUpgradePlanRedirect(true);
+          } else {
+            setSignInError("NotAuthorizedException");
+            setLoading(false);
+          }
+        }
+      } catch (error) {
+        console.log(error);
+        setLoading(false);
+        if (error.code === "NotAuthorizedException") {
+          setSignInError("NotAuthorizedException");
+        } else if (error.code === "UserNotConfirmedException") {
+          sessionStorage.setItem(
+            "email",
+            JSON.stringify(
+              document.querySelector("#usernameInput").value.trim()
+            )
+          );
+          sessionStorage.setItem("email", JSON.stringify(email));
+          props.setPaso(5);
+        } else {
+          setSignInError("Error");
+        }
+      }
+    }
   };
-  return (
-    <Container className={"home-login"}>
-      <div className="main-container">
-        <LogoImage />
-        <div className="credenciales">
-          <ScreenHeader
-            fontFamily={FontFamily.AvenirNext}
-            color={GlobalColors.s5}
-            text={"Ingresa tus credenciales"}
-          />
+  useEffect(() => {
+    sessionStorage.getItem("resetPasswordProcess") &&
+      sessionStorage.removeItem("resetPasswordProcess");
+  }, []);
+  return loading ? (
+    <Loading />
+  ) : (
+    <>
+      <Container className={"home-login"}>
+        <div className="main-container">
+          <LogoImage />
+          <div className="credenciales">
+            <ScreenHeader
+              fontFamily={FontFamily.AvenirNext}
+              color={GlobalColors.s5}
+              text={"Ingresa tus credenciales"}
+            />
+          </div>
+          <div className="user">
+            <TagAndInput
+              inputType={"text"}
+              label={"Nombre de usuario"}
+              inputPlaceHolder={"username@contentoh.com"}
+              inputId={"emailInput"}
+            />
+          </div>
+          {showErrors && emptyEmail && <label>Ingrese su correo</label>}
+          {invalidEmail && !emptyEmail && (
+            <label>Ingrese un correo válido</label>
+          )}
+          <div className="password">
+            <TagAndInput
+              inputType={"password"}
+              label={"Contraseña"}
+              inputPlaceHolder={"Escribe tu contraseña"}
+              inputId={"passwordInput"}
+            />
+          </div>
+          {showErrors && emptyPassword && <label>Ingrese su contraseña</label>}
+          <div className="select">
+            <CheckBox
+              label={"Mantener sesión activada"}
+              id={"chk-default"}
+              className="active-left"
+            />
+            <p onClick={() => props.setPaso(10)} className="active-right">Olvide mi contraseña</p>
+          </div>
+          {showErrors && signInError === "NotAuthorizedException" && (
+            <label>Correo o contraseña incorrectos</label>
+          )}
+          {showErrors && signInError === "Error" && (
+            <label>Ha habido un problema al iniciar sesión</label>
+          )}
+          <div className="button-right">
+            <Button
+              buttonType={"general-default-button"}
+              label={"Iniciar sesión"}
+              onClick={(e) => validate(e)}
+            />
+          </div>
+          <div className="new-login">
+            <p
+              className="pre-registro"
+              onClick={() => {
+                props.setPaso(1);
+                sessionStorage.setItem(
+                  "nuevoRegistro",
+                  JSON.stringify({
+                    name: "",
+                    lastName: "",
+                    email: "",
+                    position: "",
+                    country: "",
+                    phone: "",
+                    commercialName: "",
+                    companyName: "",
+                    rfc: "",
+                    adress: "",
+                  })
+                );
+                sessionStorage.setItem("countryCode", JSON.stringify("+52"));
+              }}
+            >
+              ¿Aún no tienes cuenta?<span> Regístrate</span>
+            </p>
+          </div>
         </div>
-        <div className="user">
-          <TagAndInput
-            inputType={"text"}
-            label={"Nombre de usuario"}
-            inputPlaceHolder={"username@contentoh.com"}
-            inputId={"emailInput"}
-          />
-        </div>
-        {emptyEmail && <label>Ingrese su correo</label>}
-        {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
-        <div className="password">
-          <TagAndInput
-            inputType={"text"}
-            label={"Contraseña"}
-            inputPlaceHolder={"Escribe tu contraseña"}
-            inputId={"passwordInput"}
-          />
-        </div>
-        {emptyPassword && <label>Ingrese su contraseña</label>}
-        <div className="select">
-          <CheckBox
-            label={"Mantener sesión activada"}
-            id={"chk-default"}
-            className="active-left"
-          />
-          <p className="active-right">Olvide mi contraseña</p>
-        </div>
-        <div className="button-right">
-          <Button
-            buttonType={"general-default-button"}
-            label={"Iniciar sesión"}
-            onClick={(e) => validate(e)}
-          />
-        </div>
-        <div className="new-login">
-          <p className="pre-registro">
-            ¿Aún no tienes cuenta?<span> Regístrate</span>
-          </p>
-        </div>
-      </div>
-    </Container>
+      </Container>
+      {upgradePlanRedirect && <Redirect to={{ pathname: "/dashboard" }} />}
+    </>
   );
 };

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

@@ -5,6 +5,7 @@ export const Container = styled.div`
   background: "white";
   display: flex;
   height: 100%;
+  width: 50%;
   justify-content: center;
   align-items: center;
   label {

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

@@ -0,0 +1,11 @@
+import { VerificationCodeResetPasswordLogin } from "./index";
+
+export default {
+  title: "Components/molecules/VerificationCodeResetPasswordLogin",
+  component: VerificationCodeResetPasswordLogin,
+};
+const Template = (args) => <VerificationCodeResetPasswordLogin {...args} />;
+
+export const VerificationCodeResetPasswordLoginDefault = Template.bind({});
+
+VerificationCodeResetPasswordLoginDefault.args = {};

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

@@ -0,0 +1,78 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { useEffect, useState } from "react";
+import { LogoImage } from "../../atoms/LogoImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { GeneralInput } from "../../atoms/GeneralInput";
+import { Button } from "../../atoms/GeneralButton";
+import { validateInput, validate } from "./utils";
+
+export const VerificationCodeResetPasswordLogin = () => {
+  const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
+  const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState();
+  const inputPositions = [1, 2, 3, 4, 5, 6];
+
+  useEffect(() => {
+    setInputCodeVerificationAll(
+      document.querySelectorAll("[id^='verificationCodeInput']")
+    );
+  }, []);
+
+  const loginRight = [
+    <LogoImage key="1" />,
+    <div className="credenciales" key={"2"}>
+      <ScreenHeader
+        fontFamily={FontFamily.AvenirNext}
+        color={GlobalColors.s5}
+        text={"Ingresa tus credenciales"}
+      />
+    </div>,
+    <div className="user" key="3">
+      <ScreenHeader
+        text={"Ingresa el código de verificación enviado a:"}
+        headerType={"input-name-header"}
+      />
+      <div className="verification-code">
+        {inputPositions.map((position) => (
+          <GeneralInput
+            inputId={`verificationCodeInput${position}`}
+            inputType={"text"}
+            inputPlaceholder={"X"}
+            validateInput={validateInput}
+            inputsArray={inputCodeVerificationAll}
+            position={position}
+            maxLength="1"
+          />
+        ))}
+      </div>
+      {emptyVerificationCode && (
+        <label>Ingrese su código de verificación</label>
+      )}
+    </div>,
+    <div className="resend-code" key="4">
+      <p>Reenviar código de verificación</p>
+    </div>,
+    <div className="button-center" key="5">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) =>
+          validate(inputCodeVerificationAll, setEmptyVerificationCode)
+        }
+      />
+    </div>,
+    <div className="reset-password" key="6">
+      <p>Regresar...</p>
+    </div>,
+  ];
+  return (
+    <Container>
+      <GradientPanel
+        componentsArray={loginRight}
+        panelType={"home-login"}
+        panelColor={GlobalColors.white}
+      />
+    </Container>
+  );
+};