contentoh-components-library 8.0.0 → 10.0.1

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

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 100%;
+  width: ${({ bar }) => (bar ? 200 : 58)}px;
+  box-sizing: border-box;
+  padding: 23px 10px 70px 10px;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: auto;
+  border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
+  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
+  scrollbar-width: none;
+  display: flex;
+  text-align: center;
+  img {
+    cursor: pointer;
+    width:"25px" !important;
+  }
+  .navbar-top {
+    & + * {
+      margin-top: 15px;
+    }
+    .option {
+      div {
+        height: 38px;
+        display: flex;
+        justify-content: center;
+        border-radius: 100%;
+        & + * {
+          margin-top: 12px;
+        }
+      }
+      div:hover {
+        background: #e33aa9;
+      }
+    }
+    .logo {
+      cursor: default;
+      & + * {
+        margin-top: 225%;
+      }
+    }
+  }
+`;

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

@@ -2,8 +2,6 @@ import { useState } from "react";
 
 //Components
 import { Container } from "./styles";
-import { Avatar } from "../../atoms/Avatar";
-import { DropDownButton } from "../../atoms/DropDownButton";
 import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useEffect } from "react";
@@ -14,10 +12,12 @@ export const AvatarAndValidation = ({
   validation,
   activeRetailer,
   setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
+  showValidationButtons,
+  approve,
+  reject,
+  approveAll,
+  rejectAll,
+  showApproveRejectAll,
 }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [buttonType, setButtonType] = useState(
@@ -48,21 +48,26 @@ export const AvatarAndValidation = ({
           activeRetailer={activeRetailer}
           setActiveRetailer={setActiveRetailer}
         />
-        <DropDownButton />
-        {approveRejectButtons() &&
-          (auditorAssigned() || (userAssigned && userAssigned())) && (
-            <Button
-              buttonType={`circular-button ${buttonType}`}
-              onClick={() => setShowValidationPanel(true)}
-            />
-          )}
+        {showValidationButtons && (
+          <Button
+            buttonType={`circular-button ${buttonType}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowValidationPanel(true);
+            }}
+          />
+        )}
       </div>
       {showValidationPanel && (
         <ValidationPanel
           id="validation-panel"
           setOptionClicked={setButtonType}
           setShowValidationPanel={setShowValidationPanel}
-          sendToFacilitator={sendToFacilitator}
+          approve={approve}
+          reject={reject}
+          approveAll={approveAll}
+          rejectAll={rejectAll}
+          showApproveRejectAll={showApproveRejectAll}
         />
       )}
     </Container>

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

@@ -0,0 +1,17 @@
+import { CarouselImagesLogin } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/molecules/CarouselImagesLogin",
+  component: CarouselImagesLogin,
+};
+
+const Template = (args) => <CarouselImagesLogin {...args} />;
+
+export const CarouselImagesLoginDefault = Template.bind({});
+CarouselImagesLoginDefault.args = {
+  panelImg:[LoginImage, Login2, Login3],
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};

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

@@ -0,0 +1,65 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { useEffect } from "react";
+
+export const CarouselImagesLogin = ({
+  panelImg = [],
+  panelText,
+  panelColor,
+}) => {
+  const carouselStart = () => {
+    const images = panelImg;
+    let i = 1;
+    const img1 = document.querySelector("#img1");
+    const img2 = document.querySelector("#img2");
+    const divIndicadores = document.querySelector("#indicadores");
+    for (let index = 0; index < images.length; index++) {
+      const div = document.createElement("div");
+      div.classList.add("circles");
+      div.id = index;
+      divIndicadores.appendChild(div);
+    }
+    img1.src = images[0];
+    const circulos = document.querySelectorAll(".circles");
+    circulos[0].classList.add("resaltado");
+    const slideshow = () => {
+      img2.src = images[i];
+      const circulo_actual = Array.from(circulos).find((el) => el.id == i);
+      Array.from(circulos).forEach((cir) => cir.classList.remove("resaltado"));
+      circulo_actual.classList.add("resaltado");
+      img1.classList.add("right");
+      img2.classList.add("active");
+      i++;
+      if (i == images.length) {
+        i = 0;
+      }
+      setTimeout(() => {
+        img1.src = img2.src;
+        img2.classList.remove("active");
+        img1.classList.remove("right");
+      }, 1000);
+    };
+    setInterval(slideshow, 4000);
+  };
+
+  useEffect(() => {
+    carouselStart();
+  }, []);
+
+  return (
+    <Container panelColor={panelColor}>
+      <div id="slideshow">
+        <img id="img1" />
+        <img id="img2" />
+      </div>
+      <ScreenHeader
+        fontFamily={FontFamily.Raleway}
+        color={GlobalColors.white}
+        headerType={"product-name-header"}
+        text={panelText}
+      />
+      <div id="indicadores"></div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  background: ${({ panelColor }) =>
+    panelColor
+      ? panelColor
+      : "linear-gradient(180deg,#ffffff 0%,rgba(255, 255, 255, 0.887706) 49.27%,rgba(255, 255, 255, 0) 100%),#d43594"};
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  #slideshow {
+    position: relative;
+    height: 65%;
+    img {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 8%;
+      left: 0;
+    }
+    #img2 {
+      left: 100%;
+    }
+    .right {
+      transform: translate(-100%, 0);
+      transition: all 1s;
+    }
+    .active {
+      left: 0 !important;
+      transition: all 1s;
+    }
+  }
+  .product-name-header {
+    position: absolute;
+    bottom: 16%;
+    right: 50%;
+    transform: translateX(50%);
+  }
+  #indicadores {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 7%;
+    .circles {
+      background-color: white;
+      border: white 2px solid;
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      margin: 0 5px;
+      border-radius: 50%;
+      &.resaltado {
+      background-color: rgba(255, 255, 255, 0);
+      transition: background-color 0.8s;
+    }
+    }
+  }
+`;

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,85 @@
+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 validate = async (e) => {
+    let valid = true;
+    setShowErrors(true);
+    e.preventDefault();
+    const email = document.querySelector("#emailInput").value.trim();
+    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 props.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/GalleryElement/index.js

@@ -12,11 +12,15 @@ export const GalleryElement = ({
   gridLayout = false,
   id = "chk-default",
   label,
-  index,
+  number,
   imageInputs,
   imageType,
   imagePackagingType,
   changeImage,
+  selectedImages,
+  setSelectedImages,
+  setCheckAll,
+  setSocketType,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -31,6 +35,20 @@ export const GalleryElement = ({
     }
   };
 
+  const checkOnChange = (e) => {
+    const chkGlobal = document.getElementById("check-all-images");
+    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    let temp = selectedImages.slice();
+    e.target.checked
+      ? temp.push(image)
+      : (temp = temp.filter((img) => image.id !== img.id));
+    let counter = 0;
+    checkboxList?.forEach((chk) => chk.checked && counter++);
+    chkGlobal.checked = checkboxList.length === counter;
+    setCheckAll(checkboxList.length === counter);
+    setSelectedImages(temp);
+  };
+
   useEffect(() => {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
@@ -40,7 +58,7 @@ export const GalleryElement = ({
   return (
     <Container className={gridLayout ? "grid-gallery" : "row-gallery"}>
       <div className="buttons-container">
-        <CheckBox id={id} label={label} />
+        <CheckBox id={id} label={label} onChange={(e) => checkOnChange(e)} />
       </div>
       <div className="image-container">
         <ProductImage
@@ -59,14 +77,16 @@ export const GalleryElement = ({
               <Select
                 width="100%"
                 placeholder="Tipo de toma"
-                options={imageInputs}
+                options={imageInputs?.filter(
+                  (img) => img.value === image.image_id || !img.active
+                )}
                 valueSelected={image.image_id}
                 onChange={(e) => {
                   changeImage({
                     action: "changeImageInfo",
                     attribute: "image_id",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />
@@ -80,7 +100,7 @@ export const GalleryElement = ({
                     action: "changeImageInfo",
                     attribute: "image_type",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />
@@ -94,7 +114,7 @@ export const GalleryElement = ({
                     action: "changeImageInfo",
                     attribute: "packing_type",
                     value: +e.target.value,
-                    index: index,
+                    index: number,
                   });
                 }}
               />

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

@@ -1,11 +1,17 @@
 import { Container } from "./styles";
 import { CheckBox } from "../../atoms/CheckBox";
 
-export const GalleryHeader = () => {
+export const GalleryHeader = ({ setCheckAll, setSelectedImages }) => {
+  const checkAll = (e) => {
+    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    checkboxList.forEach((chk) => (chk.checked = e.target.checked));
+    setCheckAll(e.target.checked);
+    if (!e.target.checked) setSelectedImages([]);
+  };
   return (
     <Container>
       <div>
-        <CheckBox />
+        <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
       </div>
       <p className="image-header">Image</p>
       <p className="image-name">Nombre</p>

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

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

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

@@ -0,0 +1,84 @@
+import { Container, ItemPasswordStrength, Password } from "./styles";
+import { useEffect, useState } from "react";
+import { TagAndInput } from "../TagAndInput";
+
+export const LoginPasswordStrength = ({
+  emptyPassword,
+  emptyConfirmPassword,
+  matchPasswords,
+  required,
+}) => {
+  const [passwordStrength, setPasswordStrength] = useState(0);
+  let upperCaseLetters = /[A-Z]/g;
+  let numbers = /[0-9]/g;
+  let specialChar = /[‘!’,‘@’,‘#’,‘$’,‘%’,‘^’,‘&’,‘*’]/g;
+
+  const updateInfo = (e) => {
+    switch (e.target.id) {
+      case "newPasswordInput":
+        setPasswordStrength(0);
+        if (e.target.value.length >= 8) {
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        }
+        //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
+        e.target.value.match(upperCaseLetters) &&
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        e.target.value.match(numbers) &&
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        e.target.value.match(specialChar) &&
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        break;
+      default:
+        return;
+    }
+  };
+
+  return (
+    <Container>
+      <div className="user">
+        <TagAndInput
+          inputType={"password"}
+          inputId={"newPasswordInput"}
+          label={"Ingrese su nueva contraseña"}
+          isRequired={required}
+          inputOnChange={updateInfo}
+        />
+        {emptyPassword && (
+          <label>La contraseña debe ser minimo de 8 caracteres</label>
+        )}
+      </div>
+      <div className="divPasswordStrength">
+        <ItemPasswordStrength paso={1}>
+          <Password level={1} passwordStrength={passwordStrength} />
+          {passwordStrength === 1 && <p>Baja</p>}
+        </ItemPasswordStrength>
+        <ItemPasswordStrength paso={2}>
+          <Password level={2} passwordStrength={passwordStrength} />
+          {passwordStrength === 2 && <p>Regular</p>}
+        </ItemPasswordStrength>
+        <ItemPasswordStrength paso={3}>
+          <Password level={3} passwordStrength={passwordStrength} />
+          {passwordStrength === 3 && <p>Segura</p>}
+        </ItemPasswordStrength>
+        <ItemPasswordStrength paso={4}>
+          <Password level={4} passwordStrength={passwordStrength} />
+          {passwordStrength === 4 && <p>Fuerte</p>}
+        </ItemPasswordStrength>
+      </div>
+      <div className="user">
+        <TagAndInput
+          inputType={"password"}
+          inputId={"confirmPasswordInput"}
+          label={"Confirme la nueva contraseña"}
+          isRequired={required}
+        />
+        {emptyConfirmPassword && !emptyPassword && (
+          <label>Confirme la contraseña</label>
+        )}
+        {!emptyConfirmPassword && !emptyPassword && !matchPasswords && (
+          <label>La contraseña no coincide</label>
+        )}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,91 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+  margin-bottom: 15px;
+  .divPasswordStrength {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 30px;
+    & + * {
+      margin-top: 40px;
+    }
+  }
+  label {
+    color: red;
+    margin-top: 3px;
+    margin-left: 15px;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 11px;
+  }
+  & + * {
+    margin-top: 20px;
+  }
+`;
+
+export const Password = styled.div`
+  height: 8px;
+  width: 100%;
+  background-color: ${(props) => {
+    switch (props.passwordStrength) {
+      case 0:
+        return "#F0F0F0";
+      case 1:
+        if (props.level === 1) {
+          return "#E67432";
+        } else {
+          return "#F0F0F0";
+        }
+      case 2:
+        if (props.level <= 2) {
+          return "#EDD34D";
+        } else {
+          return "#F0F0F0";
+        }
+      case 3:
+        if (props.level <= 3) {
+          return "#71DE56";
+        } else {
+          return "#F0F0F0";
+        }
+      case 4:
+        if (props.level <= 4) {
+          return "#71DE56";
+        } else {
+          return "#F0F0F0";
+        }
+      default:
+        return;
+    }
+  }};
+`;
+
+export const ItemPasswordStrength = styled.div`
+  width: 24%;
+  position: relative;
+  p {
+    margin-top: 1.5%;
+    font-weight: 700;
+    display: flex;
+    justify-content: flex-end;
+    font-size: 11px;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    color: ${(props) => {
+      switch (props.paso) {
+        case 1:
+          return "#E67432";
+        case 2:
+          return "#EDD34D";
+        case 3:
+          return "#71DE56";
+        case 4:
+          return "#71DE56";
+      }
+    }};
+  }
+`;

package/src/components/molecules/LogoLoading/Loading.stories.js

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

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

@@ -0,0 +1,12 @@
+import { Container } from "./styles";
+import { Loading } from "../../atoms/Loading";
+import { LogoImage } from "../../atoms/LogoImage";
+
+export const LogoLoading = () => {
+  return (
+    <Container>
+      <LogoImage/>
+      <Loading/>
+    </Container>
+  );
+};