contentoh-components-library 21.0.63 → 21.0.66

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

@@ -0,0 +1,182 @@
+import { Container, Slider } from "./styles";
+import { useEffect, useState } from "react";
+
+export const SliderToolTip = ({
+  InfoIcon,
+  Slide1,
+  Slide2,
+  Slide3,
+  Slide4,
+  Slide5,
+}) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const closeMenu = (e) => {
+    if (!e.target.closest("#div-slider") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+  useEffect(() => {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  const color = (id) => {
+    if (id === "slidea1") {
+      document.getElementById("slidea1").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea2").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+    if (id === "slidea2") {
+      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea2").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+    if (id === "slidea3") {
+      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea3").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+    if (id === "slidea4") {
+      document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea3").style.backgroundColor = "#FAFAFA";
+      document.getElementById("slidea4").style.backgroundColor = "#E33AA9";
+      document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
+    }
+    if (id === "slidea5") {
+      document.getElementById("button-slide").style.display = "flex";
+    }
+  };
+
+  return (
+    <>
+      <Container
+        className="container-slider"
+        
+      >
+        <img src={InfoIcon} alt="info icon" onClick={(e) => {
+          setShowMenu(!showMenu);
+          if (showMenu) {
+            document.removeEventListener("click", closeMenu, false);
+          }
+        }}/>
+        {showMenu && (
+        <Slider id="div-slider" >
+          <ul className="slider">
+            <li id="slide1">
+              <div>
+                <img src={Slide1} />
+              </div>
+              <p>
+                Creamos tu contenido, y todo lo que haga falta para tu producto,
+                cada sección puedes socilitar contenido enriquecido, y nosotros
+                lo haremos por ti.
+              </p>
+            </li>
+            <li id="slide2">
+              <img src={Slide2} />
+              <p>
+                Puedes agregar solicitudes de contenido enriquecido a tu carrito
+                de compra las veces que sean necesarias. Una vez completada tu
+                lista con los servicios necesitados sigue el proceso de compra
+                en checkout.
+              </p>
+            </li>
+            <li id="slide3">
+              <img src={Slide3} />
+              <p>
+                Revisa el contenido que deseas solicilitar, valida y tambien
+                puedes agregar contenido extra, traducciones, o simplemente
+                completar el checkout.
+              </p>
+            </li>
+            <li id="slide4">
+              <img src={Slide4} />
+              <p>
+                Elige el tipo de entrega de tu producto, puedes ser recolección
+                en el lugar o por el contrario puedes dejarlo en nuestras
+                oficinas.
+              </p>
+            </li>
+            <li id="slide5">
+              <div>
+                <img src={Slide5} />
+              </div>
+              <div className="lema-end">
+                <p>
+                  Finalmente elige la forma de pago que más te guste, procede
+                  con el pago y listo.
+                </p>
+                <span>Bienvenido al modo Content-oh!</span>
+              </div>
+              <button id="button-slide"
+                onClick={(e) => {
+                  document.removeEventListener("click", closeMenu, false);
+                  setShowMenu(false);
+                }}
+              >
+                Cerrar
+              </button>
+            </li>
+          </ul>
+          <ul className="menu">
+            <li>
+              <a
+                href="#slide1"
+                id="slidea1"
+                onClick={(e) => {
+                  color("slidea1");
+                }}
+              ></a>
+            </li>
+            <li>
+              <a
+                href="#slide2"
+                id="slidea2"
+                onClick={(e) => {
+                  color("slidea2");
+                }}
+              ></a>
+            </li>
+            <li>
+              <a
+                href="#slide3"
+                id="slidea3"
+                onClick={(e) => {
+                  color("slidea3");
+                }}
+              ></a>
+            </li>
+            <li>
+              <a
+                href="#slide4"
+                id="slidea4"
+                onClick={(e) => {
+                  color("slidea4");
+                }}
+              ></a>
+            </li>
+            <li>
+              <a
+                href="#slide5"
+                id="slidea5"
+                onClick={(e) => {
+                  color("slidea5");
+                }}
+              ></a>
+            </li>
+          </ul>
+        </Slider>
+      )}
+      </Container>
+      
+    </>
+  );
+};

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

@@ -0,0 +1,168 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: transparent;
+  cursor: pointer;
+  width: 40px !important;
+  margin: 9px;
+  position: relative;
+`;
+export const Slider = styled.div`
+  font-family: sans-serif;
+  margin: auto;
+  background: #281f33;
+  border-radius: 6px;
+  
+  padding: 16px;
+  padding-top: 20px;
+  box-sizing: border-box;
+  position: absolute;
+  top: calc(100% + 25px);
+  left: calc(50% - 223px / 2);
+  #div-slider {
+    width: 310px;
+  }
+  ul,
+  li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .slider {
+    position: relative;
+    max-width: 300px;
+    width: 100%;
+    height: 270px;
+    margin: 0;
+    li {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      opacity: 0;
+      width: inherit;
+      height: inherit;
+      transition: opacity 0.5s;
+      background: transparent;
+      img {
+        width: 100%;
+        height: 180px;
+        border-radius: 4px;
+        background-color: #fafafa;
+        & + * {
+          margin-top: 10px;
+        }
+      }
+      p {
+        font-family: "Avenir Next";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-align: center;
+        letter-spacing: -0.015em;
+        color: #fafafa;
+        background-color: #281f33;
+      }
+      div {
+        background-color: #fafafa;
+        height: 180px;
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        img {
+          height: 40px;
+        }
+        & + * {
+          margin-top: 13px;
+        }
+      }
+    }
+    #slide5 {
+      div {
+        height: 130px;
+        width: 100%;
+        background-color: #fafafa;
+        display: flex;
+        align-items: center;
+        border-radius: 4px;
+        img {
+          width: 100%;
+          height: 115px;
+          object-fit: contain;
+        }
+      }
+      .lema-end {
+        justify-content: center;
+        justify-content: space-evenly;
+        height: 100px;
+        background-color: #281f33;
+        flex-direction: column;
+        justify-content: space-evenly;
+        border-radius: inherit;
+        span {
+          font-family: "Avenir Next";
+          font-style: normal;
+          font-weight: 700;
+          font-size: 17px;
+          line-height: 15px;
+          text-align: center;
+          letter-spacing: -0.015em;
+          color: #fafafa;
+        }
+      }
+      button {
+        display: none;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        width: 160px;
+        height: 30px;
+        border: 1px solid #d4d1d7;
+        border-radius: 15px;
+        color: #fafafa;
+        background-color: #281f33;
+        font-family: "Avenir Next";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        letter-spacing: -0.015em;
+        position: absolute;
+        left: 22%;
+        top: 88%;
+        cursor: pointer;
+      }
+    }
+  }
+
+  li:first-child {
+    opacity: 1; /*Mostramos el primer <li>*/
+  }
+  li:target {
+    opacity: 1; /*Mostramos el primer <li>*/
+  }
+  .menu {
+    margin: 0;
+    text-align: center;
+    li {
+      display: inline-block;
+      text-align: center;
+      & + * {
+        margin-left: 15px;
+      }
+      a {
+        display: inline-block;
+        text-decoration: none;
+        background-color: #c4c4c4;
+        width: 10px;
+        height: 10px;
+        border-radius: 100%;
+      }
+      #slidea1 {
+        background-color: #e33aa9;
+      }
+    }
+  }
+`;

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

@@ -1,37 +1,9 @@
 import { Container } from "./styles";
 
 export const StatusTag = ({ statusType, ovalForm }) => {
-  const getShortStatus = (status) => {
-    switch (status) {
-      case "COMPLETED":
-        return "C";
-      case "RECEPTION":
-        return "Pr";
-      case "NULL":
-        return "-";
-      case "RECEIVED":
-        return "Rc";
-      case "IN_PROGRESS":
-        return "P";
-      case "ASSIGNED":
-        return "As";
-      case "APPROVED":
-        return "Ap";
-      case "VALIDATING":
-        return "V";
-      case "PAID_OUT":
-        return "Po";
-      default:
-        return status;
-    }
-  };
   return (
-    <Container
-      className={`status-${getShortStatus(statusType)} ${
-        ovalForm && "oval-form"
-      }`}
-    >
-      <p>{getShortStatus(statusType)}</p>
+    <Container className={`status-${statusType} ${ovalForm && "oval-form"}`}>
+      <p>{statusType}</p>
     </Container>
   );
 };

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

@@ -2,8 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  width: fit-content;
-  padding: 0 10px;
+  width: 30px;
   height: 20px;
   background-color: ${GlobalColors.s3};
   border-radius: 3px;
@@ -17,9 +16,7 @@ export const Container = styled.div`
   }
 
   &.status-As,
-  &.status-P,
-  &.status-IN_PROGRESS,
-  &.status-QF {
+  &.status-P {
     background-color: ${GlobalColors.in_progress};
   }
 
@@ -29,19 +26,10 @@ export const Container = styled.div`
   }
 
   &.status-AA,
-  &.status-AP,
-  &.status-AC,
-  &.status-AF {
+  &.status-AP {
     background-color: ${GlobalColors.finished};
   }
 
-  &.status-RA,
-  &.status-RF,
-  &.status-RP,
-  &.status-RC {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
   &.status-Dat,
   &.status-Dsc,
   &.status-Imgs {

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

@@ -7,8 +7,8 @@ export const ValidationPanel = ({
   id,
   setOptionClicked,
   setShowValidationPanel,
-  sendToFacilitator,
 }) => {
+
   const optionSelected = (option) => {
     setOptionClicked(`${option}-button`);
     setShowValidationPanel(false);
@@ -18,7 +18,7 @@ export const ValidationPanel = ({
     <Container id={id}>
       <button
         onClick={() => {
-          sendToFacilitator("A");
+          optionSelected("accept");
         }}
         className="validation-option"
       >
@@ -27,7 +27,7 @@ export const ValidationPanel = ({
       </button>
       <button
         onClick={() => {
-          sendToFacilitator("R");
+          optionSelected("reject");
         }}
         className="validation-option"
       >

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

@@ -7,18 +7,8 @@ import { DropDownButton } from "../../atoms/DropDownButton";
 import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useEffect } from "react";
-import { RetailerSelector } from "../RetailerSelector";
 
-export const AvatarAndValidation = ({
-  retailers,
-  validation,
-  activeRetailer,
-  setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
-}) => {
+export const AvatarAndValidation = ({ avatarData, validation }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
@@ -43,26 +33,18 @@ export const AvatarAndValidation = ({
   return (
     <Container>
       <div className="buttons-container">
-        <RetailerSelector
-          retailers={retailers}
-          activeRetailer={activeRetailer}
-          setActiveRetailer={setActiveRetailer}
-        />
+        <Avatar image={avatarData?.image} altText={avatarData?.altText} />
         <DropDownButton />
-        {approveRejectButtons() &&
-          (auditorAssigned() || (userAssigned && userAssigned())) && (
-            <Button
-              buttonType={`circular-button ${buttonType}`}
-              onClick={() => setShowValidationPanel(true)}
-            />
-          )}
+        <Button
+          buttonType={`circular-button ${buttonType}`}
+          onClick={() => setShowValidationPanel(true)}
+        />
       </div>
       {showValidationPanel && (
         <ValidationPanel
           id="validation-panel"
           setOptionClicked={setButtonType}
           setShowValidationPanel={setShowValidationPanel}
-          sendToFacilitator={sendToFacilitator}
         />
       )}
     </Container>

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

@@ -8,7 +8,7 @@ export const Container = styled.div`
     display: flex;
     align-items: center;
 
-    > * + * {
+    * + * {
       margin-left: 3px;
     }
   }

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

@@ -9,46 +9,43 @@ export const CarouselImagesLogin = ({
   panelColor,
 }) => {
   const carouselStart = () => {
-    addEventListener("DOMContentLoaded", () => {
-      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);
+    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;
       }
-      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);
-    });
+      setTimeout(() => {
+        img1.src = img2.src;
+        img2.classList.remove("active");
+        img1.classList.remove("right");
+      }, 1000);
+    };
+    setInterval(slideshow, 4000);
   };
-  useEffect(()=>{
+
+  useEffect(() => {
     carouselStart();
-  },[]) 
+  }, []);
 
   return (
     <Container panelColor={panelColor}>

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