contentoh-components-library 21.1.21 → 21.1.24

package/src/components/pages/RegistrationLoginFirstStep/index.js

@@ -1,160 +0,0 @@
-import { Container } from "./styles";
-import { GradientPanel } from "../../atoms/GradientPanel";
-import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
-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";
-import { GeneralInput } from "../../atoms/GeneralInput";
-
-export const RegistrationLoginFirstStep = ({
-  imageArrayCarousel = [],
-  textCarousel,
-  backogroundColorCarousel,
-}) => {
-  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 [invalidEmail, setInvalidEmail] = useState(false);
-
-  const validate = async (e) => {
-    e.preventDefault();
-    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;
-    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);
-  };
-  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"}
-        />
-        <TagAndInput
-          inputType={"text"}
-          inputId={"lastNameInput"}
-          label={"Apellido"}
-          inputPlaceHolder={"Apellido"}
-        />
-      </div>
-      {emptyName && <label>Ingrese su nombre</label>}
-      {emptyLastName && <label>Ingrese sus apellidos</label>}
-      <TagAndInput
-        inputType={"text"}
-        inputId={"emailInput"}
-        label={"Correo electrónico"}
-        inputPlaceHolder={"username@contentoh.com"}
-      />
-      {emptyEmail && <label>Ingrese su correo</label>}
-      {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
-      <TagAndInput
-        inputType={"text"}
-        inputId={"jobInput"}
-        label={"Puesto laboral"}
-        inputPlaceHolder={"Puesto dentro de la empresa"}
-      />
-      {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">
-          <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"}
-        />
-      </div>
-      {emptyPhone && <label>Ingrese su número de teléfono</label>}
-      <ScreenHeader text={"País"} headerType={"input-name-header"} />
-      <select name="select" className="country-options">
-        <option value="value1" 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>
-      </select>
-      {emptyEmail && <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">
-        ¿Ya tienes una cuenta?<span> Inicia Sesión</span>
-      </p>
-    </div>,
-  ];
-  return (
-    <Container>
-      <div className="home-retailer">
-        <CarouselImagesLogin
-          panelImg={imageArrayCarousel}
-          panelText={textCarousel}
-          panelColor={backogroundColorCarousel}
-        />
-      </div>
-      <div className="home-login-retailer">
-        <GradientPanel
-          componentsArray={loginRight}
-          panelType={"home-login"}
-          panelColor={GlobalColors.white}
-        />
-      </div>
-    </Container>
-  );
-};

package/src/components/pages/RegistrationLoginFirstStep/styles.js

@@ -1,85 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  .user {
-    .name-registration-user {
-      display: flex;
-      justify-content: space-between;
-      input {
-        width: 160px;
-      }
-    }
-    .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;
-      }
-    }
-  }
-  .home-login-retailer,
-  .home-retailer {
-    width: 50%;
-  }
-`;