contentoh-components-library 21.0.24 → 21.0.28

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.24",
+  "version": "21.0.28",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@storybook/addon-postcss": "^2.0.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "aws-amplify": "^4.3.21",
     "axios": "^0.25.0",
     "babel-preset-react-app": "^10.0.1",
     "chart.js": "^3.7.1",
@@ -16,6 +17,7 @@
     "react-chartjs-2": "^4.1.0",
     "react-dom": "^17.0.2",
     "react-image-fallback": "^8.0.0",
+    "react-router-dom": "^6.3.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.0.1"
   },
@@ -67,10 +69,11 @@
     "@storybook/addon-essentials": "^6.4.1",
     "@storybook/addon-links": "^6.4.1",
     "@storybook/react": "^6.4.1",
+    "auth": "^0.0.9",
     "auto": "^10.36.5",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.3.3",
-    "contentoh-components-library": "^21.0.21",
+    "contentoh-components-library": "^21.0.26",
     "cross-env": "^7.0.3",
     "storybook-css-modules-preset": "^1.1.1"
   },

package/src/components/atoms/Loading/Loading.stories.js

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

package/src/components/atoms/Loading/index.js

@@ -0,0 +1,13 @@
+import { Container } from "./styles";
+
+export const Loading = () => {
+  return (
+    <Container >
+      <div className="loader">
+        <span className="first"></span>
+        <span className="second"></span>
+        <span className="third"></span>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  .loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    span {
+      display: inline-block;
+      border-radius: 100%;
+      margin-left: 5px;
+      opacity: 1;
+    }
+    .first {
+      background-color: #ff75cf;
+    }
+    .second {
+      background-color: #e33aa9;
+    }
+    .third {
+      background-color: #b12d84;
+    }
+    span:nth-child(1) {
+      width: 16px;
+      height: 16px;
+      animation: opacitychange 1s ease-in-out infinite;
+    }
+    span:nth-child(2) {
+      width: 18px;
+      height: 18px;
+
+      animation: opacitychange 1s ease-in-out 0.33s infinite;
+    }
+    span:nth-child(3) {
+      width: 20px;
+      height: 20px;
+
+      animation: opacitychange 1s ease-in-out 0.66s infinite;
+    }
+    @keyframes opacitychange {
+      0%,
+      100% {
+        opacity: 0;
+      }
+      60% {
+        opacity: 1;
+      }
+    }
+  }
+`;

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

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

@@ -0,0 +1,87 @@
+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 [upgradePlanRedirect, setUpgradePlanRedirect] = useState(false);
+  //upgradePlanRedirect && (<Redirect/>
+  const validate = async (e) => {
+    let valid = true;
+    setShowErrors(true);
+    e.preventDefault();
+    const email = document.querySelector("#emailInput").value;
+    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 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

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

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

@@ -0,0 +1,259 @@
+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 [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 [emptyCountry, setEmptyCountry] = useState(true);
+  const [showErrors, setShowErrors] = useState(false);
+  const [regError, setRegError] = useState(false);
+  const [phoneFormatError, setPhoneFormatError] = useState(false);
+  const [emailFormatError, setEmailFormatError] = 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);
+      setEmptyPosition(false);
+      setEmptyCountry(false);
+      setEmptyPhone(false);
+    }
+
+    sessionStorage.getItem("resetPasswordProcess") &&
+      sessionStorage.getItem("resetPasswordProcess");
+  }, []);
+
+  let paisesEsp = [
+    "Argentina",
+    "Colombia",
+    "Costa Rica",
+    "Ecuador",
+    "El Salvador",
+    "Honduras",
+    "México",
+    "Panamá",
+    "Perú",
+  ];
+  const updateInfo = (e, newValue) => {
+    let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+    switch (e.target.id) {
+      case "nombreInput":
+        nuevoUsuario.name = newValue;
+        newValue === "" ? setEmptyName(true) : setEmptyName(false);
+        break;
+      case "apellidoInput":
+        nuevoUsuario.lastName = newValue;
+        newValue === "" ? setEmptyLastName(true) : setEmptyLastName(false);
+        break;
+      case "emailInput":
+        nuevoUsuario.email = newValue;
+        newValue === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+        if (
+          !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+            newValue
+          )
+        ) {
+          setEmailFormatError(true);
+        } else {
+          setEmailFormatError(false);
+        }
+        break;
+      case "puestoInput":
+        nuevoUsuario.position = newValue;
+        newValue === "" ? setEmptyPosition(true) : setEmptyPosition(false);
+        break;
+      case "telSelect":
+        Array.from(newValue).forEach((digit, i) => {
+          newValue.charCodeAt(i) < 48
+            ? setPhoneFormatError(true)
+            : setPhoneFormatError(false);
+          newValue.charCodeAt(i) > 57
+            ? setPhoneFormatError(true)
+            : setPhoneFormatError(false);
+        });
+        nuevoUsuario.phone = `${JSON.parse(
+          sessionStorage.getItem("countryCode")
+        )}${newValue}`;
+        newValue === "" ? setEmptyPhone(true) : setEmptyPhone(false);
+        break;
+      case "paisSelect":
+        nuevoUsuario.country = newValue;
+        newValue === "" || newValue === "Selecciona tu país"
+          ? setEmptyCountry(true)
+          : setEmptyCountry(false);
+        break;
+      case "countryCodeSelect":
+        sessionStorage.setItem("countryCode", JSON.stringify(newValue));
+        nuevoUsuario.phone = `${JSON.parse(
+          sessionStorage.getItem("countryCode")
+        )}${document.querySelector("#telSelect").value}`;
+        break;
+      default:
+        return;
+    }
+    sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+  };
+
+  const validateForm = (evt) => {
+    let valid = true;
+    evt.preventDefault();
+    setShowErrors(true);
+    emptyName && (valid = false);
+    emptyLastName && (valid = false);
+    emptyEmail && (valid = false);
+    emptyPosition && (valid = false);
+    emptyPhone && (valid = false);
+    emptyCountry && (valid = false);
+    phoneFormatError && (valid = false);
+    emailFormatError && (valid = false);
+    !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"}
+        />
+        <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>
+        <GradientPanel
+          componentsArray={loginRight}
+          panelType={"home-login"}
+          panelColor={GlobalColors.white}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,81 @@
+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;
+      }
+    }
+    .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;
+      }
+    }
+  }
+`;

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 = {};