contentoh-components-library 21.1.51 → 21.1.52

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

@@ -13,7 +13,12 @@ export const HeaderTop = ({ setHeaderTop }) => {
   return (
     <Container ref={headerTop}>
       <ScreenHeader text="Edición de producto" />
-      <Button buttonType="close-button" />
+      <Button
+        buttonType="close-button"
+        onClick={() => {
+          window.location.href = `/products`;
+        }}
+      />
     </Container>
   );
 };

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

@@ -19,12 +19,27 @@ export const RetailerSelector = ({
     }
   };
 
+  const getRetailerImage = async () => {
+    console.log(
+      `https://content-management-images.s3.amazonaws.com/retailers/${activeRetailer.id}.png`
+    );
+    activeRetailer.image = `https://content-management-images.s3.amazonaws.com/retailers/${activeRetailer.id}.png`;
+    retailers.forEach(
+      (retailer) =>
+        (retailer.image = `https://content-management-images.s3.amazonaws.com/retailers/${retailer.id}.png`)
+    );
+  };
+
   useEffect(() => {
     if (retailersPanel) {
       document.addEventListener("click", closeRetailersPanel, false);
     }
   }, [retailersPanel]);
 
+  useEffect(() => {
+    getRetailerImage();
+  }, [activeRetailer]);
+
   return (
     <Container id="retailers-assignation">
       <Avatar

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

@@ -6,6 +6,11 @@ import { Button } from "../../atoms/GeneralButton";
 import { useEffect, useState } from "react";
 import { AsignationOption } from "../../atoms/AsignationOption/index";
 import { getProfilePicture } from "../../../global-files/data";
+import { SliderToolTip } from "../../atoms/SliderToolTip";
+import InfoIcon from "../../../assets/images/sliderToolTip/infoIcon.svg";
+import Slide1 from "../../../assets/images/sliderToolTip/slide21.svg";
+import Slide2 from "../../../assets/images/sliderToolTip/slide22.svg";
+import Slide3 from "../../../assets/images/sliderToolTip/slide23.svg";
 
 export const StatusAsignationInfo = ({
   status = "-",
@@ -20,6 +25,7 @@ export const StatusAsignationInfo = ({
   id = "default-id",
   onClickSave,
   showSaveButton,
+  canAssign,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
   const [layout, setLayout] = useState(false);
@@ -31,6 +37,26 @@ export const StatusAsignationInfo = ({
       setShowAsignationPanel(false);
     }
   };
+  const slidefront = [
+    {
+      slide: Slide1,
+      title: "Valida tu producto en cada activo digital",
+      description:
+        "Al solicitar a Content-oh! podrás validar la información, imágenes y documentación de tu producto, esto hará más sencillo que puedas aprobar o rechazar el contenido.",
+    },
+    {
+      slide: Slide2,
+      title: "Aprueba o rechaza con un clic",
+      description:
+        "Cuando termines de revisar tu información, elige si aproebas o rechazas, esto enviara una notificiación a nuestro equipo, para continuar o corregir el producto.",
+    },
+    {
+      slide: Slide3,
+      title: "Estatus de tu producto en el proceso",
+      description:
+        "La mayor parte del proceso podrás identificar que estatus tiene tu producto, esto dara visibilidad a todo tu equipo para saber la etapa se encuentra.",
+    },
+  ];
 
   useEffect(() => {
     if (showAsignationPanel) {
@@ -40,6 +66,12 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
+      <SliderToolTip
+        infoIcon={InfoIcon}
+        slidefront={slidefront}
+        iconSize={"medium-image"}
+        slidePosition={"bottom-slide"}
+      ></SliderToolTip>
       {status !== "-" && <StatusTag statusType={status} ovalForm={true} />}
       {showSaveButton && (
         <Button
@@ -92,7 +124,7 @@ export const StatusAsignationInfo = ({
         fontFamily={"Avenir Next"}
         headerType={"input-name-header"}
       />
-      {showAsignationPanel && (
+      {showAsignationPanel && canAssign && (
         <div className="asignation-panel">
           <div className="asignation-header">
             <div className="asignation-status">

package/src/components/organisms/FullProductNameHeader/index.js

@@ -81,4 +81,4 @@ export const FullProductNameHeader = ({
       </div>
     </Container>
   );
-};
+};

package/src/components/organisms/FullTabsMenu/index.js

@@ -16,6 +16,7 @@ export const FullTabsMenu = ({
   askToDeleteImages,
   onClickSave,
   showSaveButton,
+  canAssign,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -27,6 +28,7 @@ export const FullTabsMenu = ({
         setActiveTab={setActiveTab}
       />
       <StatusAsignationInfo
+      canAssign={canAssign}
         status={status}
         activeTab={activeTab}
         setImageLayout={setImageLayout}

package/src/components/pages/ProviderProductEdition/index.js

@@ -33,6 +33,13 @@ import { Link } from "react-router-dom";
 import face from "../../../assets/images/defaultImages/defaultProfileImage.svg";
 import errorModal from "../../../assets/images/genericModal/errorModal.svg";
 import { GlobalModal } from "../../organisms/GlobalModal/index";
+import { SliderToolTip } from "../../atoms/SliderToolTip";
+import InfoIcon from "../../../assets/images/sliderToolTip/infoIcon.svg";
+import Slide1_1 from "../../../assets/images/sliderToolTip/slide1.svg";
+import Slide1_2 from "../../../assets/images/sliderToolTip/slide2.svg";
+import Slide1_3 from "../../../assets/images/sliderToolTip/slide3.svg";
+import Slide1_4 from "../../../assets/images/sliderToolTip/slide4.svg";
+import Slide1_5 from "../../../assets/images/sliderToolTip/slide5.svg";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs } = state;
@@ -973,6 +980,35 @@ export const ProviderProductEdition = ({
     setSaving(loading);
   }, [loading]);
 
+  const slidefront = [
+    {
+      slide: Slide1_1,
+      description:
+        "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.",
+    },
+    {
+      slide: Slide1_2,
+      description:
+        "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.",
+    },
+    {
+      slide: Slide1_3,
+      description:
+        "Revisa el contenido que deseas solicilitar, valida y tambien puedes agregar contenido extra, traducciones, o simplemente completar el checkout.",
+    },
+    {
+      slide: Slide1_4,
+      description:
+        "Elige el tipo de entrega de tu producto, puedes ser recolección en el lugar o por el contrario puedes dejarlo en nuestras oficinas.",
+    },
+    {
+      slide: Slide1_5,
+      title: "Bienvenido al modo Content-oh!",
+      description:
+        "Finalmente elige la forma de pago que más te guste, procede con el pago y listo.",
+    },
+  ];
+
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
@@ -1309,14 +1345,22 @@ export const ProviderProductEdition = ({
                   </Link>
                 </button>
               ) : (
-                <Button
-                  onClick={() => {
-                    setShowContentohRequestModal &&
-                      setShowContentohRequestModal(true);
-                  }}
-                  buttonType="general-default-button"
-                  label="Enviar a Content-oh!"
-                />
+                <>
+                  <SliderToolTip
+                    infoIcon={InfoIcon}
+                    slidefront={slidefront}
+                    iconSize={"big-image"}
+                    slidePosition={"top-slide"}
+                  ></SliderToolTip>
+                  <Button
+                    onClick={() => {
+                      setShowContentohRequestModal &&
+                        setShowContentohRequestModal(true);
+                    }}
+                    buttonType="general-default-button"
+                    label="Enviar a Content-oh!"
+                  />
+                </>
               )}
             </div>
           )}
@@ -1397,4 +1441,4 @@ export const ProviderProductEdition = ({
       )}
     </Container>
   );
-};
+};

package/src/components/pages/ProviderProductEdition/styles.js

@@ -115,4 +115,4 @@ export const Container = styled.div`
       width: 100%;
     }
   }
-`;
+`;

package/src/components/pages/RetailerProductEdition/index.js

@@ -808,7 +808,7 @@ export const RetailerProductEdition = ({
     const data = {
       articleId: product?.article?.id_article,
       orderId: product?.orderId,
-      message: body,
+      message: body?.replace(/<.*?\/?>/gm, ""),
       concept: concept,
       version: version,
     };
@@ -1164,7 +1164,7 @@ export const RetailerProductEdition = ({
             onClickSave={() =>
               product?.services?.images === 1 && updateImages()
             }
-            showSaveButton={userAssigned()}
+            showSaveButton={auditorAssigned() || userAssigned()}
           />
         </div>
         <div className="product-information">
@@ -1256,6 +1256,7 @@ export const RetailerProductEdition = ({
             }}
           />
           <FullTabsMenu
+            canAssign={![7, 8].includes(user.id_role)}
             tabsSections={tabsSections}
             status={retailerStatus}
             activeTab={activeTab}
@@ -1266,7 +1267,7 @@ export const RetailerProductEdition = ({
             assig={assig[activeTab]}
             setAssignation={setAssignation}
             isRetailer={isRetailer}
-            showSaveButton={userAssigned()}
+            showSaveButton={auditorAssigned() || userAssigned()}
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":
@@ -1394,7 +1395,7 @@ export const RetailerProductEdition = ({
                 ) : (
                   <div className="feedback-box">
                     <Commentary
-                      comment={comment.message}
+                      comment={comment?.message?.replace(/<.*?\/?>/gm, "")}
                       reviewed={crossComment}
                     />
                     <Button
@@ -1449,4 +1450,4 @@ export const RetailerProductEdition = ({
       )}
     </Container>
   );
-};
+};

package/src/components/pages/RetailerProductEdition/styles.js

@@ -20,7 +20,7 @@ export const Container = styled.div`
     }
 
     .product-information {
-      width: 100%;
+      width: calc(100% - 341px);
       display: flex;
       flex-direction: column;
 

package/src/index.js

@@ -22,7 +22,6 @@ export * from "./components/atoms/SliderToolTip/index";
 export * from "./components/atoms/StatusTag/index";
 export * from "./components/atoms/TabSection/index";
 export * from "./components/atoms/ValidationPanel/index";
-export * from "./components/atoms/VerticalSideMenuMainPage/index";
 
 //molecules
 export * from "./components/molecules/AvatarAndValidation/index";

package/src/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js

@@ -1,17 +0,0 @@
-import { RegistrationLoginFirstStep } 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/pages/RegistrationLoginFirstStep",
-  component: RegistrationLoginFirstStep,
-};
-const Template = (args) => <RegistrationLoginFirstStep {...args} />;
-
-export const RegistrationLoginFirstStepDefault = Template.bind({});
-
-RegistrationLoginFirstStepDefault.args = {
-  imageArrayCarousel: [LoginImage, Login2, Login3],
-  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
-};

package/src/components/pages/RegistrationLoginFirstStep/index.js

@@ -1,160 +0,0 @@
-import { Container } from "./styles";
-import { GradientPanel } from "../../atoms/GradientPanel";
-import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
-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";
-import { GeneralInput } from "../../atoms/GeneralInput";
-
-export const RegistrationLoginFirstStep = ({
-  imageArrayCarousel = [],
-  textCarousel,
-  backogroundColorCarousel,
-}) => {
-  const [emptyName, setEmptyName] = useState(false);
-  const [emptyLastName, setEmptyLastName] = useState(false);
-  const [emptyEmail, setEmptyEmail] = useState(false);
-  const [emptyJob, setEmptyJob] = useState(false);
-  const [emptyPhone, setEmptyPhone] = useState(false);
-  const [invalidEmail, setInvalidEmail] = useState(false);
-
-  const validate = async (e) => {
-    e.preventDefault();
-    const name = document.querySelector("#nameInput").value;
-    const lastName = document.querySelector("#lastNameInput").value;
-    const email = document.querySelector("#emailInput").value;
-    const job = document.querySelector("#jobInput").value;
-    const phone = document.querySelector("#phoneInput").value;
-    name === "" ? setEmptyName(true) : setEmptyName(false);
-    lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
-    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-    job === "" ? setEmptyJob(true) : setEmptyJob(false);
-    phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
-    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
-      email
-    )
-      ? setInvalidEmail(true)
-      : setInvalidEmail(false);
-  };
-  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">
-      <div className="name-registration-user">
-        <TagAndInput
-          inputType={"text"}
-          inputId={"nameInput"}
-          label={"Nombre"}
-          inputPlaceHolder={"Nombre"}
-        />
-        <TagAndInput
-          inputType={"text"}
-          inputId={"lastNameInput"}
-          label={"Apellido"}
-          inputPlaceHolder={"Apellido"}
-        />
-      </div>
-      {emptyName && <label>Ingrese su nombre</label>}
-      {emptyLastName && <label>Ingrese sus apellidos</label>}
-      <TagAndInput
-        inputType={"text"}
-        inputId={"emailInput"}
-        label={"Correo electrónico"}
-        inputPlaceHolder={"username@contentoh.com"}
-      />
-      {emptyEmail && <label>Ingrese su correo</label>}
-      {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
-      <TagAndInput
-        inputType={"text"}
-        inputId={"jobInput"}
-        label={"Puesto laboral"}
-        inputPlaceHolder={"Puesto dentro de la empresa"}
-      />
-      {emptyJob && <label>Ingrese su puesto</label>}
-      <ScreenHeader text={"Teléfono"} headerType={"input-name-header"} />
-      <div className="phone-registration-user">
-        <select name="select" className="phone-options">
-          <option>+52</option>
-          <option>+54</option>
-          <option>+57</option>
-          <option>+506</option>
-          <option>+593</option>
-          <option>+503</option>
-          <option>+504</option>
-          <option>+507</option>
-          <option>+51</option>
-        </select>
-        <GeneralInput
-          inputId={"phoneInput"}
-          inputType={"text"}
-          inputPlaceholder={"Teléfono"}
-        />
-      </div>
-      {emptyPhone && <label>Ingrese su número de teléfono</label>}
-      <ScreenHeader text={"País"} headerType={"input-name-header"} />
-      <select name="select" className="country-options">
-        <option value="value1" selected>
-          Selecciona tu país
-        </option>
-        <option value="value2">Argentina</option>
-        <option value="value3">Colombia</option>
-        <option value="value2">Ecuador</option>
-        <option value="value3">El Salvador</option>
-        <option value="value2">Honduras</option>
-        <option value="value3">México</option>
-        <option value="value2">Panamá</option>
-        <option value="value3">Perú</option>
-      </select>
-      {emptyEmail && <label>Seleccione su país</label>}
-    </div>,
-    <div className="button-end" key="4">
-      <Button
-        buttonType={"general-default-button"}
-        label={"Enviar"}
-        onClick={(e) => validate(e)}
-      />
-    </div>,
-    <div className="progress-bar" key="5">
-      <div className="progress-bar-first-step"></div>
-      <div className="progress-bar-registration"></div>
-    </div>,
-    <ScreenHeader
-      text={"Paso 1"}
-      headerType={"date-header"}
-      color={GlobalColors.s4}
-      key="6"
-    />,
-    <div className="new-login" key="7">
-      <p className="pre-registro">
-        ¿Ya tienes una cuenta?<span> Inicia Sesión</span>
-      </p>
-    </div>,
-  ];
-  return (
-    <Container>
-      <div className="home-retailer">
-        <CarouselImagesLogin
-          panelImg={imageArrayCarousel}
-          panelText={textCarousel}
-          panelColor={backogroundColorCarousel}
-        />
-      </div>
-      <div className="home-login-retailer">
-        <GradientPanel
-          componentsArray={loginRight}
-          panelType={"home-login"}
-          panelColor={GlobalColors.white}
-        />
-      </div>
-    </Container>
-  );
-};

package/src/components/pages/RegistrationLoginFirstStep/styles.js

@@ -1,85 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  .user {
-    .name-registration-user {
-      display: flex;
-      justify-content: space-between;
-      input {
-        width: 160px;
-      }
-    }
-    .input-name-header {
-      margin-bottom: 4px;
-      margin-top: 12px;
-    }
-    .phone-registration-user {
-      display: flex;
-      justify-content: space-between;
-      .phone-options {
-        width: 80px;
-      }
-      input {
-        width: 100%;
-      }
-      & + * {
-        margin-top: 10px;
-      }
-    }
-    .country-options,
-    .phone-options {
-      width: 100%;
-      border: 1px solid ${GlobalColors.s2};
-      font-family: ${FontFamily.AvenirNext};
-      color: ${GlobalColors.s4};
-      font-weight: normal;
-      font-size: 12px;
-      line-height: 15px;
-      padding: 10px;
-      outline: none;
-      border-radius: 2px;
-      resize: none;
-      &:focus {
-        border: 1px solid ${GlobalColors.magenta_s2};
-      }
-    }
-  }
-  .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-first-step {
-      width: 33.33%;
-      background-color: rgb(196, 196, 196);
-    }
-    .progress-bar-registration {
-      background-color: rgb(226, 226, 226);
-      width: 66.66%;
-    }
-  }
-  .date-header {
-    .new-login {
-      & + * {
-        margin-top: 20px;
-      }
-    }
-  }
-  .home-login-retailer,
-  .home-retailer {
-    width: 50%;
-  }
-`;