contentoh-components-library 21.0.71 → 21.0.74

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

@@ -1,44 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  height: 100%;
-  width: ${({ bar }) => (bar ? 200 : 58)}px;
-  box-sizing: border-box;
-  padding: 23px 10px 55px 10px;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: auto;
-  border-radius:  ${({ bar }) => (bar ? 20 : 50)}px;
-  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
-  scrollbar-width: none;
-  display: flex;
-  text-align: center;
-  img {
-    cursor: pointer;
-  }
-  .navbar-top {
-    & + * {
-      margin-top: 15px;
-    }
-    .option {
-      div {
-        & + * {
-          margin-top: 12px;
-        }
-      }
-      .icon {
-        padding: 5px 0px;
-        border-radius: 100%;
-      }
-      .icon:hover{
-        background: #e33aa9;
-      }
-    }
-    .logo {
-      cursor: default;
-      & + * {
-        margin-top: 225%;
-      }
-    }
-  }
-`;

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

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

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

@@ -1,85 +0,0 @@
-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 EmailResetPasswordLogin = (props) => {
-  const [emptyEmail, setEmptyEmail] = useState(false);
-  const [invalidEmail, setInvalidEmail] = useState(false);
-  const [showErrors, setShowErrors] = useState(false);
-  const [awsError, setAwsError] = useState("");
-
-  const validate = async (e) => {
-    let valid = true;
-    setShowErrors(true);
-    e.preventDefault();
-    const email = document.querySelector("#emailInput").value.trim();
-    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
-      email
-    )
-      ? setInvalidEmail(true)
-      : setInvalidEmail(false);
-    emptyEmail && (valid = false);
-    invalidEmail && (valid = false);
-    if (valid) {
-      try {
-        await props.Auth.forgotPassword(email);
-        sessionStorage.setItem("email", JSON.stringify(email));
-        sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
-        props.setPaso(5);
-      } catch (err) {
-        setAwsError(err.code);
-      }
-    }
-  };
-
-  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={"emailInput"}
-        label={"Nombre de usuario"}
-        inputPlaceHolder={"username@contentoh.com"}
-      />
-      {showErrors && emptyEmail && <label>Ingrese su correo</label>}
-      {showErrors && invalidEmail && !emptyEmail && (
-        <label>Ingrese un correo valido</label>
-      )}
-      {showErrors && awsError === "LimitExceededException" && (
-        <label>Has cambiado la contraseña recientemente, intenta despues</label>
-      )}
-    </div>,
-    <div className="button-center" key="4">
-      <Button
-        buttonType={"general-default-button"}
-        label={"Enviar"}
-        onClick={(e) => validate(e)}
-      />
-    </div>,
-    <div className="back-login" key="5">
-      <p onClick={() => props.setPaso(7)}>Regresar...</p>
-    </div>,
-  ];
-  return (
-    <Container>
-      <GradientPanel
-        componentsArray={loginRight}
-        panelType={"home-login"}
-        panelColor={GlobalColors.white}
-      />
-    </Container>
-  );
-};

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

@@ -1,23 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  width: 50%;
-  height: 100vh;
-    .button-center {
-      text-align: center;
-      .general-default-button {
-        width: 160px;
-      }
-    }
-    .back-login {
-      text-align: center;
-      margin: 15px !important;
-      color: ${GlobalColors.secondary_magenta};
-      cursor: pointer;
-      font-weight: bold;
-      font-family: ${FontFamily.Raleway};
-      font-size: 13px;
-    }
-`;

package/src/components/molecules/LogoLoading/Loading.stories.js

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

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

@@ -1,12 +0,0 @@
-import { Container } from "./styles";
-import { Loading } from "../../atoms/Loading";
-import { LogoImage } from "../../atoms/LogoImage";
-
-export const LogoLoading = () => {
-  return (
-    <Container>
-      <LogoImage/>
-      <Loading/>
-    </Container>
-  );
-};

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

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  height: 100vh;
-  width: 50%;
-  padding-top: 25%;
-  .logo {
-    text-align: center;
-    img {
-      width: 65%;
-    }
-  }
-  .loading {
-    height: 10%;
-  }
-`;

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

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

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

@@ -1,227 +0,0 @@
-import { Container } from "./styles";
-import { GradientPanel } from "../../atoms/GradientPanel";
-import { useState, useEffect } 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";
-import { GeneralInput } from "../../atoms/GeneralInput";
-
-export const RegistrationFirstStep = (props) => {
-  const [emptyName, setEmptyName] = useState(false);
-  const [emptyLastName, setEmptyLastName] = useState(false);
-  const [emptyEmail, setEmptyEmail] = useState(false);
-  const [emptyJob, setEmptyJob] = useState(false);
-  const [emptyPhone, setEmptyPhone] = useState(false);
-  const [emptyCountry, setEmptyCountry] = useState(false);
-  const [invalidEmail, setInvalidEmail] = useState(false);
-  const [phoneFormatError, setPhoneFormatError] = useState(false);
-  const [regError, setRegError] = useState(false);
-
-  useEffect(() => {
-    JSON.parse(sessionStorage.getItem("nuevoRegistro")).name === "" &&
-      sessionStorage.removeItem("registrationError");
-    sessionStorage.getItem("registrationError") && setRegError(true);
-    if (sessionStorage.getItem("registrationError")) {
-      setEmptyName(false);
-      setEmptyLastName(false);
-      setEmptyEmail(false);
-      setEmptyJob(false);
-      setEmptyCountry(false);
-      setEmptyPhone(false);
-    }
-    sessionStorage.getItem("resetPasswordProcess") &&
-      sessionStorage.getItem("resetPasswordProcess");
-  }, []);
-  const validate = (evt) => {
-    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;
-    const countryCode = document.querySelector("#countryCodeSelect").value;
-    let valid = true;
-    evt.preventDefault();
-    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;
-    let 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 = `${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);
-    }
-  };
-
-  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">
-      <div className="name-registration-user">
-        <TagAndInput
-          inputType={"text"}
-          inputId={"nameInput"}
-          label={"Nombre"}
-          inputPlaceHolder={"Nombre"}
-          required={"required"}
-        />
-        <TagAndInput
-          inputType={"text"}
-          inputId={"lastNameInput"}
-          label={"Apellido"}
-          inputPlaceHolder={"Apellido"}
-          required={"required"}
-        />
-      </div>
-      {emptyName && <label>Ingrese su nombre</label>}
-      {emptyLastName && (
-        <label className="lastname">Ingrese sus apellidos</label>
-      )}
-      <TagAndInput
-        inputType={"text"}
-        inputId={"emailInput"}
-        label={"Correo electrónico"}
-        inputPlaceHolder={"username@contentoh.com"}
-        required={"required"}
-      />
-      {regError &&
-        JSON.parse(sessionStorage.getItem("registrationError")) ===
-          "emailExists" && (
-          <label>Ya existe una cuenta asociada a este correo</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"}
-        required={"required"}
-      />
-      {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">
-          <option>+52</option>
-          <option>+54</option>
-          <option>+57</option>
-          <option>+506</option>
-          <option>+593</option>
-          <option>+503</option>
-          <option>+504</option>
-          <option>+507</option>
-          <option>+51</option>
-        </select>
-        <GeneralInput
-          inputId={"phoneInput"}
-          inputType={"text"}
-          inputPlaceholder={"Teléfono"}
-          required={"required"}
-        />
-      </div>
-      {regError &&
-        JSON.parse(sessionStorage.getItem("registrationError")) ===
-          "phoneFormatError" && <label>Introduzca un número válido</label>}
-      {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">
-        <option value="value" selected>
-          Selecciona tu país
-        </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>
-      {emptyCountry && <label>Seleccione su país</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-first-step"></div>
-      <div className="progress-bar-registration"></div>
-    </div>,
-    <ScreenHeader
-      text={"Paso 1"}
-      headerType={"date-header"}
-      color={GlobalColors.s4}
-      key="6"
-    />,
-    <div className="new-login" key="7">
-      <p className="pre-registro" onClick={() => props.setPaso(7)}>
-        ¿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/RegistrationFirstStep/styles.js

@@ -1,87 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  width: 50%;
-  height: 100vh;
-  .user {
-    .name-registration-user {
-      display: flex;
-      justify-content: space-between;
-      input {
-        width: 160px;
-      }
-    }
-    .lastname {
-      margin-left: 69%;
-    }
-    .input-name-header {
-      margin-bottom: 4px;
-      margin-top: 12px;
-    }
-    .phone-registration-user {
-      display: flex;
-      justify-content: space-between;
-      .phone-options {
-        width: 80px;
-      }
-      input {
-        width: 100%;
-      }
-      & + * {
-        margin-top: 10px;
-      }
-    }
-    .country-options,
-    .phone-options {
-      width: 100%;
-      border: 1px solid ${GlobalColors.s2};
-      font-family: ${FontFamily.AvenirNext};
-      color: ${GlobalColors.s4};
-      font-weight: normal;
-      font-size: 12px;
-      line-height: 15px;
-      padding: 10px;
-      outline: none;
-      border-radius: 2px;
-      resize: none;
-      &:focus {
-        border: 1px solid ${GlobalColors.magenta_s2};
-      }
-    }
-  }
-  .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 {
-      width: 33.33%;
-      background-color: rgb(196, 196, 196);
-    }
-    .progress-bar-registration {
-      background-color: rgb(226, 226, 226);
-      width: 66.66%;
-    }
-  }
-  .date-header {
-    .new-login {
-      & + * {
-        margin-top: 20px;
-      }
-    }
-  }
-  .pre-registro {
-    cursor: pointer;
-  }
-`;

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

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

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

@@ -1,136 +0,0 @@
-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 = (props) => {
-  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"));
-
-  const validateForm = (evt, valid) => {
-    evt.preventDefault();
-    const password = document.querySelector("#newPasswordInput").value;
-    !termsCheck && (valid = false);
-    !privacyCheck && (valid = false);
-    if (valid) {
-      console.log(valid)
-      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(
-      "#confirmPasswordInput"
-    ).value;
-    confirmPassword === ""
-      ? setEmptyConfirmPassword(true)
-      : setEmptyConfirmPassword(false);
-    password === confirmPassword
-      ? setMatchPasswords(true)
-      : setMatchPasswords(false);
-    if (
-      password.length < 8 ||
-      confirmPassword === "" ||
-      password !== confirmPassword
-    ) {
-      valid = false;
-    }
-    return valid;
-  };
-  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"}
-      required={"required"}
-    />,
-    <label className="label-terms" key={"4"}>
-      Términos y condiciones
-    </label>,
-    <div className="checkbox-terms" key={"5"}>
-      <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."
-        }
-        headerType={"date-header"}
-      />
-    </div>,
-    <label className="label-terms" key={"6"}>
-      Aviso de privacidad
-    </label>,
-    <div className="checkbox-terms" key={"7"}>
-      <input
-        type="checkbox"
-        onClick={(e) => setPrivacyCheck(e.target.checked)}
-      />
-      <ScreenHeader
-        text={"Todos los datos estan protegidos."}
-        headerType={"date-header"}
-      />
-    </div>,
-    <div className="button-end" key="8">
-      {(!termsCheck || !privacyCheck) && (
-        <label className="terms">
-          *Aceptar los términos y condiciones y el aviso de privacidad
-        </label>
-      )}
-      <Button
-        buttonType={"general-default-button"}
-        label={"Enviar"}
-        onClick={(e) => {
-          let flag = validate(e);
-          validateForm(e, flag);
-        }}
-      />
-    </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>
-  );
-};