contentoh-components-library 21.0.31 → 21.0.32

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

@@ -0,0 +1,205 @@
+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 { Loading } from "../../atoms/Loading";
+import { Navigate } from "react-router-dom";
+import { Auth } from "aws-amplify";
+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;
+    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 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,
+              },
+            }
+          );
+          const userGroupValue =
+            typeof userGroup === "string" ? userGroup : userGroup[0];
+          if (userGroupValue === "usuario_contentoh") {
+            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);
+        setLoading(false);
+        if (error.code === "NotAuthorizedException") {
+          setSignInError("NotAuthorizedException");
+        } else if (error.code === "UserNotConfirmedException") {
+          sessionStorage.setItem(
+            "email",
+            JSON.stringify(
+              document.querySelector("#usernameInput").value.trim()
+            )
+          );
+          sessionStorage.setItem("email", JSON.stringify(email));
+          props.setPaso(5);
+        } else {
+          setSignInError("Error");
+        }
+      }
+    }
+  };
+  useEffect(() => {
+    sessionStorage.getItem("resetPasswordProcess") &&
+      sessionStorage.removeItem("resetPasswordProcess");
+  }, []);
+  return loading ? (
+    <Loading />
+  ) : (
+    <>
+      <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"}
+            />
+          </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>
+          <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 && <Navigate to={{ pathname: "/dashboard" }} />}
+    </>
+  );
+};

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

@@ -0,0 +1,78 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: "white";
+  display: flex;
+  height: 100%;
+  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: 20px;
+      }
+    }
+    .password {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    .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};
+        span {
+          color: ${GlobalColors.secondary_magenta};
+        }
+      }
+    }
+  }
+  .main-container {
+    max-width: 80%;
+    max-height: 80%;
+  }
+`;

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

@@ -5,24 +5,20 @@ import { StatusTag } from "../../atoms/StatusTag/index";
 import { Button } from "../../atoms/GeneralButton";
 import { useEffect, useState } from "react";
 import { AsignationOption } from "../../atoms/AsignationOption/index";
-import { getProfilePicture } from "../../../global-files/data";
 
 export const StatusAsignationInfo = ({
   status = "-",
+  src,
   imagesSection,
   setImageLayout,
+  asignationsList,
   percent = 0,
-  assignationsImages,
-  setAssignation,
-  isRetailer,
-  downloadImages,
-  askToDeleteImages,
+  saveImages,
+  deleteImages,
   id = "default-id",
-  onClickSave,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
-  const [layout, setLayout] = useState(false);
-  const [assignationType, setAssignationType] = useState("facilitator");
+  const [layout, setLayout] = useState(true);
 
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
@@ -39,22 +35,18 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
-      <Button
-        buttonType={"circular-button save-button"}
-        onClick={onClickSave}
-      />
       {imagesSection && (
         <div className="images-buttons">
           <Button
-            buttonType={"circular-button delete-button"}
+            buttonType={"circular-button save-button"}
             onClick={() => {
-              askToDeleteImages && askToDeleteImages();
+              saveImages && saveImages();
             }}
           />
           <Button
-            buttonType={"circular-button download-button"}
+            buttonType={"circular-button delete-button"}
             onClick={() => {
-              downloadImages();
+              deleteImages && deleteImages();
             }}
           />
           <Button
@@ -67,20 +59,14 @@ export const StatusAsignationInfo = ({
         </div>
       )}
       <StatusTag statusType={status} ovalForm={true} />
-      <div className="assignations-container">
-        {assignationsImages?.assignations?.map((assignation, index) => (
-          <Avatar
-            key={index + "-" + assignation.id}
-            imageType={"small-image"}
-            image={getProfilePicture(assignation.id, 20, 20)}
-            altText="user profile image"
-            onClick={() => {
-              setShowAsignationPanel(true);
-              setAssignationType(assignation?.collaboratorType);
-            }}
-          />
-        ))}
-      </div>
+      <Avatar
+        imageType={"small-image"}
+        image={src}
+        altText="user profile image"
+        onClick={() => {
+          setShowAsignationPanel(true);
+        }}
+      />
       <ScreenHeader
         text={"Asig."}
         color={"#969696"}
@@ -100,41 +86,31 @@ export const StatusAsignationInfo = ({
             </div>
           </div>
           <div className="asignations-list">
-            {assignationsImages?.collaborators !== undefined ? (
-              assignationsImages?.collaborators[assignationType]?.map(
-                (asignation, index) => (
-                  <AsignationOption
-                    key={index + "-" + asignation.name}
-                    profileImage={getProfilePicture(
-                      asignation?.id_user,
-                      40,
-                      40
-                    )}
-                    onClick={() => {
-                      setAssignation(assignationType, asignation?.id_user);
-                    }}
-                    name={asignation.name}
-                  />
-                )
-              )
+            {asignationsList !== undefined ? (
+              asignationsList.map((asigantion, index) => (
+                <AsignationOption
+                  profileImage={asignation.image}
+                  asignationType={asignation.asignationType}
+                  name={asignation.name}
+                  team={asigantion.team}
+                />
+              ))
             ) : (
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          {isRetailer === 1 && (
-            <div className="default-asignations-list">
-              <AsignationOption
-                asignationType={"provider"}
-                name={"Solicitar a"}
-                team={"Proveedor"}
-              />
-              <AsignationOption
-                asignationType={"team"}
-                name={"Solicitar a"}
-                team={"Content-oh!"}
-              />
-            </div>
-          )}
+          <div className="default-asignations-list">
+            <AsignationOption
+              asignationType={"provider"}
+              name={"Solicitar a"}
+              team={"Proveedor"}
+            />
+            <AsignationOption
+              asignationType={"team"}
+              name={"Solicitar a"}
+              team={"Content-oh!"}
+            />
+          </div>
         </div>
       )}
     </Container>

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

@@ -16,22 +16,16 @@ export const Container = styled.div`
     }
   }
 
-  .assignations-container {
-    display: flex;
-    cursor: pointer;
-  }
-
   .asignation-panel {
     background: ${GlobalColors.s2};
     border: 1px solid ${GlobalColors.s3};
     box-sizing: border-box;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
     border-radius: 4px;
-    padding: 10px 8px;
+    padding: 10px;
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
-    z-index: 10;
 
     .asignation-header {
       display: flex;
@@ -59,6 +53,7 @@ export const Container = styled.div`
 
     .asignations-list {
       min-height: 40px;
+      border-bottom: 1px solid ${GlobalColors.s3};
 
       .no-asignations {
         padding: 5px;
@@ -71,12 +66,7 @@ export const Container = styled.div`
 
       & + * {
         margin-top: 10px;
-        border-top: 1px solid ${GlobalColors.s3};
       }
     }
-
-    .default-asignations-list {
-      padding-top: 10px;
-    }
   }
 `;

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

@@ -3,28 +3,15 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { StatusAsignationInfo } from "../StatusAsignationInfo";
 import { GlobalColors } from "../../../global-files/variables";
 
-export const TableHeader = ({
-  imagesStatus,
-  activeImage,
-  assignationsImages,
-  setAssignation,
-  isRetailer,
-  onClickSave,
-}) => {
+export const TableHeader = ({ headerInfo, activeImage }) => {
   return (
     <Container>
       <ScreenHeader
-        text={activeImage?.name || "-"}
+        text={activeImage?.imageName}
         color={GlobalColors.s5}
         headerType={"input-name-header"}
       />
-      <StatusAsignationInfo
-        status={imagesStatus}
-        assignationsImages={assignationsImages}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        onClickSave={onClickSave}
-      />
+      <StatusAsignationInfo status={headerInfo?.status} src={headerInfo?.src} />
     </Container>
   );
 };

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

@@ -7,11 +7,6 @@ export const Container = styled.div`
   padding-bottom: 5px;
   border-bottom: 1px solid ${GlobalColors.s2};
 
-  .input-name-header {
-    overflow: auto;
-    max-width: 40%;
-    white-space: nowrap;
-  }
   .status-asignation-info {
     display: flex;
     align-items: center;

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

@@ -8,18 +8,6 @@ export const TagAndInput = ({
   value,
   inputPlaceHolder,
   inputId,
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  articleId,
-  version,
-  index,
-  isRequired,
-  dinamicHeight,
-  inputCols,
-  inputRows,
-  maxChar,
 }) => {
   return (
     <Container
@@ -32,19 +20,7 @@ export const TagAndInput = ({
         inputId={inputId}
         inputType={inputType}
         inputValue={value}
-        index={index}
-        isRequired={isRequired}
         inputPlaceholder={inputPlaceHolder}
-        updatedDescriptions={updatedDescriptions}
-        setUpdatedDescriptions={setUpdatedDescriptions}
-        updatedDatasheets={updatedDatasheets}
-        setUpdatedDatasheets={setUpdatedDatasheets}
-        articleId={articleId}
-        version={version}
-        dinamicHeight={dinamicHeight}
-        inputCols={inputCols}
-        inputRows={inputRows}
-        maxChar={maxChar}
       />
     </Container>
   );

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

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

@@ -0,0 +1,78 @@
+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 = () => {
+  const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
+  const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState();
+  const inputPositions = [1, 2, 3, 4, 5, 6];
+
+  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">
+      <ScreenHeader
+        text={"Ingresa el código de verificación enviado a:"}
+        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>
+      )}
+    </div>,
+    <div className="resend-code" key="4">
+      <p>Reenviar código de verificación</p>
+    </div>,
+    <div className="button-center" key="5">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) =>
+          validate(inputCodeVerificationAll, setEmptyVerificationCode)
+        }
+      />
+    </div>,
+    <div className="reset-password" key="6">
+      <p>Regresar...</p>
+    </div>,
+  ];
+  return (
+    <Container>
+      <GradientPanel
+        componentsArray={loginRight}
+        panelType={"home-login"}
+        panelColor={GlobalColors.white}
+      />
+    </Container>
+  );
+};