contentoh-components-library 21.0.70 → 21.0.73

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

@@ -1,44 +0,0 @@
-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/SignInLogin.stories.js

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

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

@@ -1,226 +0,0 @@
-import { Container } from "./styles";
-import { LogoImage } from "../../atoms/LogoImage/index";
-import { ScreenHeader } from "../../atoms/ScreenHeader/index";
-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, useEffect } from "react";
-import { LogoLoading } from "../LogoLoading";
-import { Redirect } from "react-router-dom";
-import showPassword from "../../../assets/images/editField/showPassword.png";
-import axios from "axios";
-
-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.trim();
-    const password = document.querySelector("#passwordInput").value;
-    !/^[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 props.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,
-              },
-            }
-          );
-          if (userGroup[0] === props.users) {
-            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.code);
-        setLoading(false);
-        if (error.code === "NotAuthorizedException") {
-          setSignInError("NotAuthorizedException");
-        } else if (error.code === "UserNotConfirmedException") {
-          sessionStorage.setItem("email", JSON.stringify(email));
-          props.setPaso(5);
-        } else {
-          setSignInError("Error");
-        }
-      }
-    }
-  };
-
-  useEffect(() => {
-    sessionStorage.getItem("resetPasswordProcess") &&
-      sessionStorage.removeItem("resetPasswordProcess");
-  }, []);
-  useEffect(() => {
-    if (upgradePlanRedirect) setLoading(false);
-  }, [upgradePlanRedirect]);
-
-  const closeEye = (e) => {
-    const input = document.getElementById("passwordInput");
-    const eye = document.getElementById("Eye");
-    if (input.type === "password") {
-      input.type = "text";
-      eye.style.opacity = 0.8;
-    } else {
-      input.type = "password";
-      eye.style.opacity = 0.2;
-    }
-  };
-
-  return loading ? (
-    <LogoLoading />
-  ) : (
-    <>
-      <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"}
-            />
-            <img
-              src={showPassword}
-              alt="show password"
-              className="icon"
-              id="Eye"
-              onClick={(e) => {
-                closeEye(e);
-              }}
-            ></img>
-          </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>
-          {props.registration && (
-            <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>
-      </Container>
-      {upgradePlanRedirect && <Redirect to={{ pathname: "/dashboard" }} />}
-    </>
-  );
-};

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

@@ -1,120 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  background: "white";
-  display: flex;
-  height: 100vh;
-  width: 50%;
-  justify-content: center;
-  align-items: center;
-  label {
-    color: red;
-    margin-top: 3px;
-    margin-left: 15px;
-    font-family: ${FontFamily.Raleway_700};
-    font-size: 11px;
-    & + * {
-      margin-top: 12px;
-    }
-  }
-
-  &.home-login {
-    .credenciales {
-      & + * {
-        margin-top: 30px;
-      }
-    }
-    .user {
-      & + * {
-        margin-top: 45px;
-      }
-    }
-    .password {
-      & + * {
-        margin-top: 20px;
-      }
-      &:hover {
-        border: 1px solid ${GlobalColors.magenta_s2};
-      }
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 40px;
-      position: relative;
-      width: 100%;
-      border: 1px solid ${GlobalColors.s2};
-      .input-container {
-        h2 {
-          position: absolute;
-          top: -25px;
-          left: 0;
-        }
-      }
-      #passwordInput {
-        width: 100%;
-        background-color: white;
-        position: absolute;
-        top: 8px;
-        left: 0;
-        right: 0;
-        bottom: 8px;
-        box-sizing: border-box;
-        border: none;
-      }
-      .icon {
-        position: absolute;
-        height: 60%;
-        position: absolute;
-        top: 50%;
-        right: 8px;
-        transform: translateY(-50%);
-        opacity: 0.3;
-        cursor: pointer;
-      }
-      .icon:hover {
-        opacity: 0.8;
-      }
-    }
-    .select {
-      display: flex;
-      justify-content: space-between;
-      .active-right {
-        font-family: ${FontFamily.AvenirNext};
-        font-weight: 500;
-        font-size: 13px;
-        line-height: 24px;
-        letter-spacing: -0.015em;
-        color: ${GlobalColors.s5};
-        cursor: pointer;
-      }
-      & + * {
-        margin-top: 50px;
-      }
-    }
-    .button-right {
-      text-align: right;
-      & + * {
-        margin-top: 55px;
-      }
-    }
-    .new-login {
-      p {
-        font-family: ${FontFamily.AvenirNext};
-        text-align: right;
-        font-weight: 500;
-        font-size: 13px;
-        line-height: 24px;
-        color: ${GlobalColors.s5};
-        cursor: pointer;
-        span {
-          color: ${GlobalColors.secondary_magenta};
-        }
-      }
-    }
-  }
-  .main-container {
-    max-width: 80%;
-    max-height: 80%;
-  }
-`;

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

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

@@ -1,170 +0,0 @@
-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 = (props) => {
-  const [resend, setResend] = useState(false);
-  const [awsError, setAwsError] = useState("");
-  const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
-  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, flag) => {
-    let valid = true;
-    e.preventDefault();
-    let code = "";
-    if (awsError === "" && !flag) {
-      inputPositions.map(
-        (position) =>
-          (code =
-            code +
-            document.querySelector(`#verificationCodeInput${position}`).value)
-      );
-      if (sessionStorage.getItem("resetError")) {
-        JSON.parse(sessionStorage.getItem("confirmationCode")) === code &&
-          (valid = false);
-      }
-      sessionStorage.setItem("confirmationCode", JSON.stringify(code));
-      valid &&
-      !sessionStorage.getItem("resetPasswordProcess") &&
-      props.setPaso(6);
-      valid &&
-      sessionStorage.getItem("resetPasswordProcess") &&
-      props.setPaso(8);
-    }
-  };
-
-  const validateResend = async (e) => {
-    e.preventDefault();
-    const email = JSON.parse(sessionStorage.getItem("email"));
-    try {
-      await props.Auth.forgotPassword(email);
-      sessionStorage.setItem("email", JSON.stringify(email));
-      sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
-      props.setPaso(5);
-      setResend(true);
-    } catch (err) {
-      setAwsError(err.code);
-      console.log(err.message);
-    }
-  };
-
-  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">
-      {sessionStorage.getItem("email") && (
-        <ScreenHeader
-          text={`Ingrese el código de verificación enviado a: ${JSON.parse(
-            sessionStorage.getItem("email")
-          )}`}
-          headerType={"input-name-header"}
-        />
-      )}
-      {!sessionStorage.getItem("email") && (
-        <ScreenHeader
-           text={`Ingrese código de verificación enviado a: ${
-             JSON.parse(sessionStorage.getItem("nuevoRegistro")).email
-           }`}
-          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>
-      )}
-      {sessionStorage.getItem("resetError") && (
-        <label>Código de verifiación incorrecto</label>
-      )}
-      {props.confirmationError === "LimitExceededException" &&
-        !emptyVerificationCode && (
-          <label>Haz realizado demasiados intentos, intentalo más tarde</label>
-        )}
-      {props.confirmationError === "CodeMismatchException" &&
-        !emptyVerificationCode && (
-          <label>Código de verificación incorrecto</label>
-        )}
-      {props.confirmationError === "ExpiredCodeException" &&
-        !emptyVerificationCode && (
-          <label>El código ingresado está expirado</label>
-        )}
-      {props.confirmationError === "InternalErrorException" &&
-        !emptyVerificationCode && (
-          <label>Algo salió mal, porfavor vuelva a intentarlo</label>
-        )}
-      {awsError === "LimitExceededException" && (
-        <label>Haz realizado demasiados intentos, intentalo más tarde</label>
-      )}
-      {awsError === "InternalErrorException" && (
-        <label>Algo salió mal, porfavor vuelva a intentarlo</label>
-      )}
-      {resend && awsError === "" && (
-        <label className="resendTrue">
-          Se reenvió el código de verificación correctamente
-        </label>
-      )}
-    </div>,
-    <div className="resend-code" key="4">
-      <p onClick={(e) => validateResend(e)}>Reenviar código de verificación</p>
-    </div>,
-    <div className="button-center" key="5">
-      <Button
-        buttonType={"general-default-button"}
-        label={"Enviar"}
-        onClick={(e) => {
-          let flag = validate(inputCodeVerificationAll);
-          checkCode(e, flag);
-          setEmptyVerificationCode(flag);
-        }}
-      />
-    </div>,
-    <div className="reset-password" key="6">
-       <p onClick={() => props.setPaso(10)}>Regresar...</p> 
-    </div>,
-  ];
-  return (
-    <Container>
-      <GradientPanel
-        componentsArray={loginRight}
-        panelType={"home-login"}
-        panelColor={GlobalColors.white}
-      />
-    </Container>
-  );
-};

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

@@ -1,51 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  height: 100vh;
-  width: 50%;
-  align-items: center;
-  justify-content: center;
-  .button-center {
-    text-align: center;
-    .general-default-button {
-      width: 160px;
-    }
-  }
-  .reset-password {
-    text-align: center;
-    margin: 15px !important;
-    color: ${GlobalColors.secondary_magenta};
-    cursor: pointer;
-    font-weight: bold;
-    font-family: ${FontFamily.Raleway};
-    font-size: 13px;
-  }
-  .resend-code {
-    margin-top: 8px !important;
-    color: ${GlobalColors.magenta_s2};
-    font-family: ${FontFamily.AvenirNext};
-    font-size: 11px;
-    text-decoration: underline rgb(228, 81, 172);
-    cursor: pointer;
-    & + * {
-      margin-top: 30px;
-    }
-  }
-  .verification-code {
-    display: flex;
-    text-align: center;
-    margin: auto;
-    margin-top: 10px;
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    input {
-      width: 70%;
-      text-align: center;
-    }
-  }
-`;

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

@@ -1,54 +0,0 @@
-/**
- *
- * @param {event} e event received triggered by verification code input
- * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
- * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
- */
-export const validateInput = (e, index, inputsArray) => {
-  let isValid = false;
-  const inputNotEmpty = e.target.value.length > 0;
-  if (inputNotEmpty) {
-    if (validateInputNumber(e) !== null) {
-      isValid = true;
-      nextInputFocus(inputsArray, index++);
-    }
-  }
-  return isValid ? e.target.value : "";
-};
-
-/**
- *
- * @param {event} e event received triggered by verification code input
- * @returns {boolean} if digit is a number
- */
-const validateInputNumber = (e) => {
-  return (e.target.value || String.fromCharCode(e.keyCode)).match(/[0-9]{1}/);
-};
-
-/**
- *
- * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
- * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
- * changes focus to next input if digit typed is a number and there wasn't any before
- */
-const nextInputFocus = (inputsArray, index) => {
-  const button = document.getElementsByClassName("general-default-button");
-
-  inputsArray?.length && index === inputsArray?.length
-    ? button[0].focus()
-    : inputsArray[index]?.focus();
-};
-
-/**
- *
- * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to check if there's any empty)
- * @param {function} setEmptyVerificationCode function to update flag which handles if there's an empty char
- * updates emptyVerificationFlag from father component
- */
-export const validate = (inputsArray) => {
-  let contInputEmpty = 0;
-  inputsArray.forEach((element) => {
-    element.value === "" ? 0 : contInputEmpty++;
-  });
-  return contInputEmpty !== inputsArray.length  
-};