contentoh-components-library 12.0.0 → 12.1.17

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,9 +1,37 @@
 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-${statusType} ${ovalForm && "oval-form"}`}>
-      <p>{statusType}</p>
+    <Container
+      className={`status-${getShortStatus(statusType)} ${
+        ovalForm && "oval-form"
+      }`}
+    >
+      <p>{getShortStatus(statusType)}</p>
     </Container>
   );
 };

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

@@ -2,7 +2,8 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  width: 30px;
+  width: fit-content;
+  padding: 0 10px;
   height: 20px;
   background-color: ${GlobalColors.s3};
   border-radius: 3px;
@@ -16,18 +17,22 @@ export const Container = styled.div`
   }
 
   &.status-As,
-  &.status-P {
+  &.status-P,
+  &.status-IN_PROGRESS,
+  &.status-QF {
     background-color: ${GlobalColors.in_progress};
   }
 
   &.status-Pr,
-  &.status-Rr {
+  &.status-Rr,
+  &.status-Rc {
     background-color: ${GlobalColors.reception};
   }
 
   &.status-AA,
   &.status-AP,
-  &.status-AC {
+  &.status-AC,
+  &.status-AF {
     background-color: ${GlobalColors.finished};
   }
 

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { Container } from "./styles";
+import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
+import iconProduct from "../../../assets/images/verticalSideMenuMainPage/iconProduct.svg";
+import iconGroup from "../../../assets/images/verticalSideMenuMainPage/iconGroup.svg";
+import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
+import iconSpeedometer from "../../../assets/images/verticalSideMenuMainPage/iconSpeedometer.svg";
+import iconTask from "../../../assets/images/verticalSideMenuMainPage/iconTask.svg";
+import openMenu from "../../../assets/images/verticalSideMenuMainPage/openMenu.svg";
+import React, { useState, useEffect, useCallback } from "react";
+
+export const VerticalSideMenuMainPage = () => {
+  const [trueBar, setTrueBar] = useState(false);
+  const active = () => {
+    //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
+  };
+  return (
+    <Container bar={trueBar}>
+      <div className="navbar-top">
+        <img
+          src={trueBar ? iconLogoContentoh : iconLogo}
+          alt="Logo"
+          className="logo"
+        ></img>
+        <div className="option">
+          <div>
+            <img src={iconSpeedometer} alt="Speed Meter" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconProduct} alt="Focus Product" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconGroup} alt="Group" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconLogo} alt="Logo" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconTask} alt="Task" width={"25px"}></img>
+          </div>
+        </div>
+      </div>
+      <div>
+        <img
+          src={openMenu}
+          alt="Open Menu"
+          onClick={() => {
+            setTrueBar(true);
+            active();
+          }}
+        ></img>
+      </div>
+    </Container>
+  );
+};

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,9 @@ export const AvatarAndValidation = ({
   validation,
   activeRetailer,
   setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
+  showValidationButtons,
+  approve,
+  reject,
 }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [buttonType, setButtonType] = useState(
@@ -48,21 +45,23 @@ 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}
         />
       )}
     </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",
+};