contentoh-components-library 21.5.1 → 21.5.3

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

@@ -5,8 +5,6 @@ import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
 import nullIcon from "../../../assets/images/generalButton/nullIcon.svg";
 import openModalIcon from "../../../assets/images/generalButton/openModal.svg";
 import closeIcon from "../../../assets/images/generalButton/closeIcon.svg";
-import closeIconv2 from "../../../assets/images/generalButton/closeIconv2.svg";
-import closeIconWhite from "../../../assets/images/generalButton/closeIconWhite.svg";
 import rowsLayout from "../../../assets/images/generalButton/rowLayout.svg";
 import gridLayout from "../../../assets/images/generalButton/gridLayout.svg";
 import arrowIcon from "../../../assets/images/arrow/arrowIcon.svg";
@@ -146,24 +144,6 @@ export const Container = styled.button`
     background-image: url(${closeIcon});
   }
 
-  &.close-buttonv2 {
-    width: 52px;
-    height: 52px;
-    background-color: transparent;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-image: url(${closeIconv2});
-  }
-
-  &.close-button-white {
-    width: 52px;
-    height: 52px;
-    background-color: transparent;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-image: url(${closeIconWhite});
-  }
-
   &.open-modal-button {
     background-color: transparent;
     border: none;
@@ -206,30 +186,4 @@ export const Container = styled.button`
       opacity: 1;
     }
   }
-  &.general-button-rec {
-    background:#85BC5B;
-    color: ${GlobalColors.white};
-    padding: 4px 5px;
-    border-radius: 3px;
-    font-size: 10px;
-    height: 20px;
-    line-height: 12px;
-    text-align: center;
-  }
-
-  &.general-button-sol {
-    background-color: #e33aa9;
-    border: none;
-    border-radius: 50px;
-    color: ${GlobalColors.white};
-    height: 34px;
-    font-family: Avenir Next;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 12px;
-    line-height: 14px;
-    padding: 10px 15px;
-    cursor: pointer;
-  }
 `;
-

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

@@ -107,7 +107,6 @@ export const GeneralInput = ({
           id={`dropdown${inputId}`}
           onChange={(e) => onHandleChange(e)}
           defaultValue={textValue.value}
-          disabled={disabled}
         >
           <option value="">{description}</option>
           {JSON.parse(optionList || "[]").map((element, index) => (
@@ -121,7 +120,6 @@ export const GeneralInput = ({
           id={inputId}
           onChange={(e) => onHandleChange(e)}
           defaultChecked={textValue.value === "true" ? true : false}
-          disabled={disabled}
         />
       ) : inputType !== "textarea" ? (
         <input
@@ -150,7 +148,6 @@ export const GeneralInput = ({
           setUpdatedDescriptions={setUpdatedDescriptions}
           maxChar={maxChar}
           isRequired={isRequired}
-          disabled={disabled}
         />
       )}
       <p>{description}</p>

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

@@ -25,7 +25,7 @@ export const Container = styled.div`
     line-height: 15px;
     padding: 10px;
     outline: none;
-    border-radius: 5px;
+    border-radius: 2px;
     resize: none;
 
     &:focus {
@@ -65,22 +65,4 @@ export const Container = styled.div`
       background-color: #ededfc;
     }
   }
-
-  .btnReviewState {
-    display: "flex";
-    flex-direction: "column";
-    border: 1px solid lightgray;
-    border-radius: 3px;
-    z-index: 1000;
-    /* position: absolute; */
-  }
-
-  .btnReviewState button {
-    border: none;
-    background: white;
-    border-radius: 3px;
-  }
-  .btnReviewState button:hover {
-    background: lightgray;
-  }
 `;

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

@@ -11,7 +11,6 @@ export const InputFormatter = ({
   setUpdatedDescriptions,
   isRequired,
   maxChar,
-  disabled,
 }) => {
   const [inputValue, setInputValue] = useState(mainValue);
   const [selection, setSelection] = useState(false);
@@ -118,7 +117,7 @@ export const InputFormatter = ({
         id={inputId + ""}
         ref={(el) => setQuill(el)}
         defaultValue={getValue(inputValue)}
-        readOnly={disabled}
+        //disabled={!props.enableInputs}
         modules={{ toolbar: ["bold"] }}
         onKeyPress={(e) => {
           if (charsCounter >= maxLength && e.key !== "Backspace") {

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

@@ -6,15 +6,15 @@ export const Container = styled.div`
     background-color: ${GlobalColors.white};
     border: 1px solid
       ${({ focus, isRequired }) =>
-        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.gray_light};
+        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.s3};
     position: relative;
-    border-radius: 5px;
+    border-radius: 2px;
 
     .ql-toolbar {
       background-color: ${GlobalColors.s2};
       position: absolute;
       z-index: 10;
-      border: 1px solid ${GlobalColors.gray_light};
+      border: 1px solid ${GlobalColors.s3};
       width: 45px;
       height: 45px;
       border-radius: 4px;
@@ -30,10 +30,6 @@ export const Container = styled.div`
       strong {
         font-family: ${FontFamily.Raleway_900};
       }
-
-      .ql-editor{
-        padding: 8px 10px;
-      }
     }
   }
   .description-limit {
@@ -41,6 +37,5 @@ export const Container = styled.div`
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.deep_gray};
     text-align: right;
-    margin-top: 5px;
   }
-`;
+`;

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

@@ -2,28 +2,15 @@ import { Container } from "./styles";
 import ReactImageFallback from "react-image-fallback";
 import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
 
-export const ProductImage = ({ img, imageType, altText, onClick}) => {
-  // Expresión regular para validar que los últimos tres caracteres sean ".mp4"
-  const regex = /\.mp4$/;
-  if (regex.test(img)){
-    return (
-      <Container className={imageType}>
-        <video controls width="100%" height="auto">
-        <source src= {img} type="video/mp4" />
-        </video>
-      </Container>
-    );
-  }
-  else{
-    return (
-      <Container className={imageType}>
-         <ReactImageFallback
-          src={img}
-          fallbackImage={defaultProductImage}
-          alt={altText}
-          onClick={onClick}
-        />
-      </Container>
-    );
-  }
+export const ProductImage = ({ img, imageType, altText, onClick }) => {
+  return (
+    <Container className={imageType}>
+      <ReactImageFallback
+        src={img}
+        fallbackImage={defaultProductImage}
+        alt={altText}
+        onClick={onClick}
+      />
+    </Container>
+  );
 };

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

@@ -27,9 +27,6 @@ export const Container = styled.div`
   }
 
   &.catalogue-image-big-size {
-    display: flex; 
-    justify-content: center; 
-    align-items: center; 
     img {
       width: 179px;
       height: 179px;
@@ -56,9 +53,6 @@ export const Container = styled.div`
   &.expanded-modal-image {
     width: 710px;
     height: 710px;
-    display: flex; 
-    justify-content: center; 
-    align-items: center; 
 
     img {
       width: 710px;
@@ -66,4 +60,3 @@ export const Container = styled.div`
     }
   }
 `;
-

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

@@ -46,7 +46,7 @@ export const Slider = styled.div`
   }
   &.bottom-slide {
     top: 100%;
-    right: calc(100% + -100px);
+    right: calc(100% + -70px);
   }
   ul,
   li {

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

@@ -1,6 +1,6 @@
 import { Container } from "./styles";
 
-export const TabSection = ({ label, active, onClick}) => {
+export const TabSection = ({ label, active, onClick }) => {
   return (
     <Container className={active && "active"} onClick={onClick}>
       <p>{label}</p>

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

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
 export const Container = styled.div`
   font-family: ${FontFamily.Raleway_500};
   color: ${GlobalColors.s5};
@@ -10,10 +11,12 @@ export const Container = styled.div`
   padding-bottom: 5px;
   transition: 0.1s all;
   cursor: pointer;
+
   &.active {
     font-size: 18px;
     border-bottom: 2px solid ${GlobalColors.magenta_s2};
   }
+
   & + * {
     margin-left: 10px;
   }

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

@@ -1,8 +1,8 @@
 import { Container } from "./styles";
 import IconInfo from "../../../assets/images/Icons/info.svg";
 import TextField from "@mui/material/TextField";
-import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
-import { styled } from "@mui/material/styles";
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const BoxAttribute = (props) => {
@@ -29,7 +29,7 @@ export const BoxAttribute = (props) => {
   ))(({ theme }) => ({
     [`& .${tooltipClasses.tooltip}`]: {
       backgroundColor: GlobalColors.white,
-      color: "rgba(0, 0, 0, 0.87)",
+      color: 'rgba(0, 0, 0, 0.87)',
       boxShadow: theme.shadows[1],
       fontSize: 11,
       fontFamily: `${FontFamily.Roboto}, sans-serif`,
@@ -37,41 +37,34 @@ export const BoxAttribute = (props) => {
   }));
   return (
     <>
-      <Container
+       <Container
         id={id}
         key={key}
         className={className}
         borderType={borderType}
       >
-        <LightTooltip
-          title={
-            <div className="container-tooltip">
-              <p className="container-tooltip">{description}</p>
-            </div>
-          }
-        >
-          <Container className="">
-            <img className="icon" src={IconInfo} alt="iconInfo" />
-          </Container>
+        <LightTooltip title={
+              <div className="container-tooltip">
+                <p className="container-tooltip">{description}</p>
+              </div>
+            }>
+              <Container className="">
+                <img className="icon" src={IconInfo} alt="iconInfo" />
+              </Container>
         </LightTooltip>
-        <span>
-          {text}
-          <span className={required ? "required-text" : ""}>
-            {required ? "*" : ""}
-          </span>
-        </span>
-        <TextField
-          hiddenLabel
-          key={props.id}
-          name={props.id}
-          value={atributos[props.id]}
-          onChange={handleInputChange}
-          className="caja-borde"
-          variant="outlined"
-          size="small"
-          type="number"
-          required={required}
-        />
+        <span>{text}<span className={required ? 'required-text' : ''}>{required ? '*' : ''}</span></span>
+          <TextField
+            hiddenLabel
+            key={props.id}
+            name={props.id}
+            value={atributos[props.id]}
+            onChange={handleInputChange}
+            className="caja-borde"
+            variant="outlined"
+            size="small"
+            type="number"
+            required={required}
+          />
       </Container>
     </>
   );

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

@@ -4,7 +4,7 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 export const Container = styled.div`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap:4px;
   #atr-alto {
     display: flex;
     align-items: center;

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

@@ -1,29 +1,28 @@
 import { Container, ContainerIcon } from "./styles";
 import { Button } from "@mui/material";
 
-export const BoxButtons = ({
-  showAdd,
-  onAdd,
-  onDelete,
-  isTheFirstBox,
-  index,
-}) => {
+export const BoxButtons = ({ showAdd, onAdd, onDelete, isTheFirstBox, index  }) => {
+  console.log("index",index)
   return (
-    <Container index={index}>
-      {!isTheFirstBox && (
-        <Button variant="outlined" className="button-circle" onClick={onDelete}>
-          <ContainerIcon>
-            <span className="iconos-out">delete_forever</span>
-          </ContainerIcon>
-        </Button>
-      )}
-      {showAdd && (
-        <Button onClick={onAdd} variant="outlined" className="button-circle">
-          <ContainerIcon>
-            <span className="iconos-out iconos-grises">add</span>
-          </ContainerIcon>
-        </Button>
-      )}
-    </Container>
+      <Container index={index}>
+        {!isTheFirstBox && (
+          <Button
+            variant="outlined"
+            className="button-circle"
+            onClick={onDelete}
+          >
+            <ContainerIcon>
+              <span className="iconos-out">delete_forever</span>
+            </ContainerIcon>
+          </Button>
+        )}
+        {showAdd && (
+          <Button onClick={onAdd} variant="outlined" className="button-circle">
+            <ContainerIcon>
+              <span className="iconos-out iconos-grises">add</span>
+            </ContainerIcon>
+          </Button>
+        )}
+      </Container>
   );
 };

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

@@ -27,7 +27,7 @@ export const CarouselImagesLogin = ({
       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");
+      circulo_actual.classList.add("resaltado");
       img1.classList.add("right");
       img2.classList.add("active");
       i++;

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

@@ -5,9 +5,6 @@ import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useState, useEffect } from "react";
 import Select from "../../atoms/Select";
-import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
-import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
-import { Tooltip } from "../../atoms/Tooltip";
 
 export const GalleryElement = ({
   image,
@@ -24,25 +21,8 @@ export const GalleryElement = ({
   setCheckAll,
   auditImages,
   compare,
-  updateApprovedInputsImages,
 }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
-  const [showDivStates, setShowDivStates] = useState({});
-  const [imageStates, setImageStates] = useState({});
-
-  const handleImgClick = (inputId) => {
-    setShowDivStates((prevStates) => ({
-      ...prevStates,
-      [inputId]: !prevStates[inputId],
-    }));
-  };
-  const changeImageBtn = (inputId, action) => {
-    setImageStates((prevStates) => ({
-      ...prevStates,
-      [inputId]: action === "validate",
-    }));
-    updateApprovedInputsImages(inputId);
-  };
 
   const closeValidationPanel = (e) => {
     if (
@@ -77,7 +57,7 @@ export const GalleryElement = ({
   const isEquals = (value, auditValue) => {
     return value === auditValue;
   };
-  //TOMAR EL image_id
+
   return (
     <Container
       className={`${gridLayout ? "grid-gallery" : "row-gallery"} ${
@@ -161,61 +141,6 @@ export const GalleryElement = ({
                   });
                 }}
               />
-
-              {image?.isApproved === false && (
-                <div
-                  style={{
-                    display: "flex",
-                    "justify-content": "center",
-                    "align-items": "center",
-                  }}
-                >
-                  <Tooltip
-                    componentTooltip={
-                      <>
-                        <p>
-                          <b>Comentarios:</b>
-                        </p>
-                        <p>{image.comment}</p>
-                      </>
-                    }
-                    children={
-                      !image.isApproved && (
-                        <img
-                          src={
-                            imageStates[image.image_id]
-                              ? acceptIcon
-                              : rejectIcon
-                          }
-                          alt={"botón rechazar"}
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleImgClick(image.image_id)}
-                        />
-                      )
-                    }
-                    classNameTooltip={"container-tooltip"}
-                  />
-                  {showDivStates[image.image_id] && (
-                    <div className="btnReviewState">
-                      <div>
-                        <button
-                          id="aceptbtn"
-                          onClick={() =>
-                            changeImageBtn(image.image_id, "validate")
-                          }
-                        >
-                          <img
-                            src={acceptIcon}
-                            alt="acept button"
-                            style={{ cursor: "pointer" }}
-                          />
-                          Validar
-                        </button>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
             </>
           )}
         </div>

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

@@ -21,7 +21,6 @@ export const GalleryHeader = ({ setCheckAll, setSelectedImages, shotThd }) => {
       <p className="">Tipo de toma</p>
       <p className="">Tipo de imagen</p>
       <p className="">Tipo de empaque</p>
-      <p className="">Estatus</p>
     </Container>
   );
 };

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

@@ -4,13 +4,10 @@ import { Button } from "../../atoms/GeneralButton/index";
 import { useEffect, useRef } from "react";
 import { Chat } from "../../organisms/Chat";
 import auditIcon from "../../../../src/assets/images/generalButton/Icono AB.svg";
-import { useState } from "react";
-import { render } from "@testing-library/react";
 
 export const HeaderTop = ({
   setHeaderTop,
   withChat,
-  chatType,
   productSelected,
   token,
   auditableVersion,
@@ -19,51 +16,16 @@ export const HeaderTop = ({
   activeRetailer,
 }) => {
   const headerTop = useRef();
-  const [chat, setChat] = useState(null);
-  const [chatData, setChatData] = useState(null);
-
-  useEffect(() => {
-    if (activeRetailer.id && productSelected && token.length) {
-      setChatData({
-        id: productSelected?.article?.id_article || productSelected?.id_article,
-        version: productSelected?.version,
-        retailerId: activeRetailer?.id,
-        status: productSelected?.status,
-        userToken: token,
-      });
-    }
-  }, [activeRetailer, productSelected, token]);
-
-  useEffect(() => {
-    if (chatType) renderChat(chatType);
-  }, [chatData, chatType]);
 
   useEffect(() => {
     setHeaderTop && setHeaderTop(headerTop.current.clientHeight);
   }, []);
 
-  const renderChat = (chatType) => {
-    switch (chatType) {
-      case "product_status":
-        chatData &&
-          setChat(
-            <Chat
-              chatType="product_status"
-              chatContainerType="popUp"
-              chatData={{
-                id: chatData?.id,
-                version: chatData?.version,
-                retailerId: chatData?.retailerId,
-                status: chatData?.status,
-                userToken: chatData?.userToken,
-              }}
-              size={18}
-              activeRetailer={activeRetailer}
-            />
-          );
-        break;
-      default:
-        setChat(
+  return (
+    <Container ref={headerTop}>
+      <ScreenHeader text="Edición de producto" />
+      <div className="buttons-container">
+        {withChat && (
           <Chat
             chatType="merchant_product"
             chatContainerType="popUp"
@@ -75,16 +37,8 @@ export const HeaderTop = ({
             size={18}
             activeRetailer={activeRetailer}
           />
-        );
-        break;
-    }
-  };
+        )}
 
-  return (
-    <Container ref={headerTop}>
-      <ScreenHeader text="Edición de producto" />
-      <div className="buttons-container">
-        {withChat && chat}
         {isAuditor && auditableVersion && (
           <Button
             buttonType="general-white-button circular-button"