contentoh-components-library 12.0.0 → 12.1.17

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

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

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

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

@@ -0,0 +1,135 @@
+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) {
+      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>
+  );
+};

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

@@ -0,0 +1,64 @@
+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 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    .general-default-button {
+      width: 160px;
+    }
+    .terms{
+      margin-bottom: 5px;
+    }
+    & + * {
+      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,130 @@
+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 = (props) => {
+  const [emptyCommercialName, setEmptyCommercialName] = useState(false);
+  const [emptyBussinesName, setEmptyBussinesName] = useState(false);
+  const [emptyRFC, setEmptyRFC] = useState(false);
+  const [emptyFiscalAddress, setEmptyFiscalAddress] = useState(false);
+
+  let nuevoRegistro = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+
+  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;
+    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);
+    if (
+      commercialName === "" ||
+      bussinesName === "" ||
+      RFC === "" ||
+      FiscalAddress === ""
+    ) {
+      valid = false;
+    }
+    if (valid) {
+      nuevoRegistro.commercialName = commercialName;
+      nuevoRegistro.companyName = bussinesName;
+      nuevoRegistro.rfc = RFC;
+      nuevoRegistro.adress = FiscalAddress;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoRegistro));
+      props.setPaso(props.paso + 1);
+    }
+  };
+
+  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>
+  );
+};