contentoh-components-library 12.0.0 → 12.1.17

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

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 50%;
+  height: 100%;
+  .user {
+    .input-name-header {
+      margin-top: 10px;
+    }
+  }
+  .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-step-check {
+      width: 66.66%;
+      background-color: ${GlobalColors.exported};
+    }
+    .progress-bar-registration {
+      background-color: rgb(196, 196, 196);
+      width: 33.33%;
+    }
+  }
+  .date-header {
+    margin-left: 66.66%;
+    .new-login {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+  }
+`;

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

@@ -2,11 +2,13 @@ import { Container } from "./styles";
 import { Avatar } from "../../atoms/Avatar";
 import { useEffect, useState } from "react";
 import { AsignationOption } from "../../atoms/AsignationOption";
+import { DropDownButton } from "../../atoms/DropDownButton";
 
 export const RetailerSelector = ({
   retailers,
   activeRetailer,
   setActiveRetailer,
+  showStatus,
 }) => {
   const [retailersPanel, setRetailersPanel] = useState(false);
 
@@ -30,11 +32,12 @@ export const RetailerSelector = ({
         altText={activeRetailer?.name}
         imageType={"medium-image"}
         onClick={() => {
-          retailers.length > 1 && setRetailersPanel(!retailersPanel);
+          retailers?.length > 0 && setRetailersPanel(!retailersPanel);
           if (retailersPanel)
             document.removeEventListener("click", closeRetailersPanel, false);
         }}
       />
+      <DropDownButton active={retailersPanel} />
       {retailersPanel && (
         <div className="retailers-panel">
           {retailers.map((retailer, index) => (
@@ -45,6 +48,7 @@ export const RetailerSelector = ({
               asignationType={null}
               name={retailer?.name}
               team={retailer?.team}
+              services={retailer?.services}
               onClick={() => {
                 setActiveRetailer(retailer);
                 document.removeEventListener(
@@ -54,6 +58,8 @@ export const RetailerSelector = ({
                 );
                 setRetailersPanel(false);
               }}
+              active={retailer.id === activeRetailer.id}
+              showStatus={showStatus}
             />
           ))}
         </div>

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

@@ -3,6 +3,9 @@ import { GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
   position: relative;
+  cursor: pointer;
+  display: flex;
+
   .retailers-panel {
     background: ${GlobalColors.s2};
     border: 1px solid ${GlobalColors.s3};

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

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

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

@@ -0,0 +1,226 @@
+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 { LogoLoading } from "../LogoLoading";
+import { Redirect } from "react-router-dom";
+import showPassword from "../../../assets/images/editField/showPassword.png";
+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.trim();
+    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 props.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,
+              },
+            }
+          );
+          if (userGroup[0] === props.users) {
+            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.code);
+        setLoading(false);
+        if (error.code === "NotAuthorizedException") {
+          setSignInError("NotAuthorizedException");
+        } else if (error.code === "UserNotConfirmedException") {
+          sessionStorage.setItem("email", JSON.stringify(email));
+          props.setPaso(5);
+        } else {
+          setSignInError("Error");
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    sessionStorage.getItem("resetPasswordProcess") &&
+      sessionStorage.removeItem("resetPasswordProcess");
+  }, []);
+  useEffect(() => {
+    if (upgradePlanRedirect) setLoading(false);
+  }, [upgradePlanRedirect]);
+
+  const closeEye = (e) => {
+    const input = document.getElementById("passwordInput");
+    const eye = document.getElementById("Eye");
+    if (input.type === "password") {
+      input.type = "text";
+      eye.style.opacity = 0.8;
+    } else {
+      input.type = "password";
+      eye.style.opacity = 0.2;
+    }
+  };
+
+  return loading ? (
+    <LogoLoading />
+  ) : (
+    <>
+      <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"}
+            />
+            <img
+              src={showPassword}
+              alt="show password"
+              className="icon"
+              id="Eye"
+              onClick={(e) => {
+                closeEye(e);
+              }}
+            ></img>
+          </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>
+          {props.registration && (
+            <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 && <Redirect to={{ pathname: "/dashboard" }} />}
+    </>
+  );
+};

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

@@ -0,0 +1,120 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: "white";
+  display: flex;
+  height: 100vh;
+  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: 45px;
+      }
+    }
+    .password {
+      & + * {
+        margin-top: 20px;
+      }
+      &:hover {
+        border: 1px solid ${GlobalColors.magenta_s2};
+      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+      position: relative;
+      width: 100%;
+      border: 1px solid ${GlobalColors.s2};
+      .input-container {
+        h2 {
+          position: absolute;
+          top: -25px;
+          left: 0;
+        }
+      }
+      #passwordInput {
+        width: 100%;
+        background-color: white;
+        position: absolute;
+        top: 8px;
+        left: 0;
+        right: 0;
+        bottom: 8px;
+        box-sizing: border-box;
+        border: none;
+      }
+      .icon {
+        position: absolute;
+        height: 60%;
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+        opacity: 0.3;
+        cursor: pointer;
+      }
+      .icon:hover {
+        opacity: 0.8;
+      }
+    }
+    .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};
+        cursor: pointer;
+        span {
+          color: ${GlobalColors.secondary_magenta};
+        }
+      }
+    }
+  }
+  .main-container {
+    max-width: 80%;
+    max-height: 80%;
+  }
+`;

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

@@ -11,20 +11,18 @@ export const StatusAsignationInfo = ({
   status = "-",
   imagesSection,
   setImageLayout,
-  asignationsList,
   percent = 0,
-  activeTab,
-  deleteImages,
-  saveDatasheets,
-  saveDescriptions,
-  updateImages,
   assignationsImages,
   setAssignation,
   isRetailer,
+  downloadImages,
+  askToDeleteImages,
   id = "default-id",
+  onClickSave,
+  showSaveButton,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
-  const [layout, setLayout] = useState(true);
+  const [layout, setLayout] = useState(false);
   const [assignationType, setAssignationType] = useState("facilitator");
 
   const closeAsignations = (e) => {
@@ -42,31 +40,27 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
-      <Button
-        buttonType={"circular-button save-button"}
-        onClick={() => {
-          switch (activeTab) {
-            case "Descripción":
-              saveDescriptions && saveDescriptions();
-              break;
-            case "Ficha técnica":
-              saveDatasheets && saveDatasheets();
-              break;
-            case "Imágenes":
-              updateImages && updateImages();
-              break;
-
-            default:
-              break;
-          }
-        }}
-      />
+      {status !== "-" && <StatusTag statusType={status} ovalForm={true} />}
+      {showSaveButton && (
+        <Button
+          buttonType={"circular-button save-button"}
+          onClick={onClickSave}
+        />
+      )}
       {imagesSection && (
         <div className="images-buttons">
+          {showSaveButton && (
+            <Button
+              buttonType={"circular-button delete-button"}
+              onClick={() => {
+                askToDeleteImages && askToDeleteImages();
+              }}
+            />
+          )}
           <Button
-            buttonType={"circular-button delete-button"}
+            buttonType={"circular-button download-button"}
             onClick={() => {
-              deleteImages && deleteImages();
+              downloadImages();
             }}
           />
           <Button
@@ -78,7 +72,6 @@ export const StatusAsignationInfo = ({
           />
         </div>
       )}
-      <StatusTag statusType={status} ovalForm={true} />
       <div className="assignations-container">
         {assignationsImages?.assignations?.map((assignation, index) => (
           <Avatar
@@ -133,7 +126,7 @@ export const StatusAsignationInfo = ({
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          {isRetailer === 0 && (
+          {isRetailer === 1 && (
             <div className="default-asignations-list">
               <AsignationOption
                 asignationType={"provider"}

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

@@ -9,11 +9,13 @@ export const TableHeader = ({
   assignationsImages,
   setAssignation,
   isRetailer,
+  onClickSave,
+  showSaveButton,
 }) => {
   return (
     <Container>
       <ScreenHeader
-        text={activeImage?.name}
+        text={activeImage?.name || "-"}
         color={GlobalColors.s5}
         headerType={"input-name-header"}
       />
@@ -22,6 +24,8 @@ export const TableHeader = ({
         assignationsImages={assignationsImages}
         setAssignation={setAssignation}
         isRetailer={isRetailer}
+        onClickSave={onClickSave}
+        showSaveButton={showSaveButton}
       />
     </Container>
   );

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

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

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

@@ -19,6 +19,12 @@ export const TagAndInput = ({
   dinamicHeight,
   inputCols,
   inputRows,
+  maxChar,
+  required,
+  optionList,
+  description,
+  inputOnChange,
+  color,
 }) => {
   return (
     <Container
@@ -26,7 +32,14 @@ export const TagAndInput = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      <ScreenHeader text={label} headerType={"input-name-header"} />
+      <div className="title-container">
+        <ScreenHeader
+          text={label}
+          headerType={"input-name-header"}
+          color={color}
+        />
+        <span className="tooltip">{label}</span>
+      </div>
       <GeneralInput
         inputId={inputId}
         inputType={inputType}
@@ -43,6 +56,11 @@ export const TagAndInput = ({
         dinamicHeight={dinamicHeight}
         inputCols={inputCols}
         inputRows={inputRows}
+        maxChar={maxChar}
+        required={required}
+        optionList={optionList}
+        description={description}
+        inputOnChange={inputOnChange}
       />
     </Container>
   );

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

@@ -1,9 +1,37 @@
 import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
+  .title-container {
+    position: relative;
+
+    .tooltip {
+      display: none;
+      position: absolute;
+      background-color: ${GlobalColors.white};
+      color: ${({ color }) => (color ? color : GlobalColors.s5)};
+      font-family: ${FontFamily.Raleway};
+      font-size: 14px;
+      line-height: 19px;
+      left: 0;
+      top: 0;
+      height: fit-content;
+      transition: display 2s;
+    }
+
+    &:hover {
+      .tooltip {
+        display: block;
+      }
+    }
+  }
+
   & > :first-child {
     & + * {
       margin-top: ${({ inputType }) => (inputType !== "textarea" ? 4 : 15)}px;
     }
   }
+  & + * {
+    margin-top: ${({ inputType }) => (inputType !== "textarea" ? 0 : 10)}px;
+  }
 `;

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