contentoh-components-library 21.5.12 → 21.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.5.12",
+  "version": "21.5.13",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/assets/images/Icons/save-white-gray.svg

@@ -1,4 +1,4 @@
-<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="34" height="34" rx="17" fill="#F0F0F0"/>
 <mask id="mask0_346_670" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="14" height="14">
 <rect x="10" y="10" width="14" height="14" fill="#D9D9D9"/>

package/src/assets/images/Icons/save-white.svg

@@ -1,4 +1,4 @@
-<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="34" height="34" rx="17" fill="#E33AA9"/>
 <mask id="mask0_346_670" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="14" height="14">
 <rect x="10" y="10" width="14" height="14" fill="#D9D9D9"/>

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: 2px;
+    border-radius: 5px;
     resize: none;
 
     &:focus {

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

@@ -2,15 +2,28 @@ 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 }) => {
-  return (
-    <Container className={imageType}>
-      <ReactImageFallback
-        src={img}
-        fallbackImage={defaultProductImage}
-        alt={altText}
-        onClick={onClick}
-      />
-    </Container>
-  );
+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>
+    );
+  }
 };

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

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

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

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import { CheckBox } from "../../atoms/CheckBox";
 import { Container, TH, TD } from "./styles";
+import { Tooltip } from "../../atoms/Tooltip";
 
-export const Table = ({ columns, data, withCheckbox }) => {
+export const Table = ({ columns, data, withCheckbox, withTooltip=false }) => {
   const [rowsChecked, setRowsChecked] = useState([]);
 
   function handlerSelectAll(evt) {
@@ -40,7 +41,16 @@ export const Table = ({ columns, data, withCheckbox }) => {
                 withCheckbox={withCheckbox}
                 {...column}
               >
-                {column.Header}
+              {column.description && withTooltip ? (
+                  <Tooltip
+                    componentTooltip={<span>{column.description}</span>}
+                    position="topCenter"
+                  >
+                    <span>{column.Header}</span>
+                  </Tooltip>
+                ) : (
+                  <span>{column.Header}</span>
+                )}
               </TH>
             ))}
           </tr>

package/src/components/organisms/Table/styles.js

@@ -21,7 +21,7 @@ export const Container = styled.div`
       top: 0;
       height: 45px;
       position: sticky;
-      z-index: 5;
+      z-index: 2;
       & > tr {
         background-color: #f7f7fc;
         border-radius: 5px 5px 0px 0px;
@@ -66,6 +66,7 @@ export const Container = styled.div`
       font-style: normal;
       font-weight: 400;
       line-height: normal;
+      gap:5px;
     }
     display: flex;
     align-items: center;
@@ -78,12 +79,12 @@ export const TH = styled.th`
   min-height: ${({ height }) => height ?? "auto"};
   min-width: ${({ width }) => width ?? "auto"};
   position: sticky;
-  left: 20px;
+  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
   ${({ fixedToLeft, withCheckbox }) =>
     fixedToLeft >= 0 &&
     css`
       left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 5;
+      z-index: 10;
     `}
 `;
 
@@ -98,7 +99,7 @@ export const TD = styled.td`
   vertical-align: middle;
   z-index: 5;
   position: sticky;
-  left: 20px;
+  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
   .content {
     white-space: nowrap;
     overflow: hidden;
@@ -108,6 +109,6 @@ export const TD = styled.td`
     fixedToLeft >= 0 &&
     css`
       left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 5;
+      z-index: 10;
     `}
 `;

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

@@ -9,9 +9,9 @@ const Template = (args) => <MultipleEdition {...args} />;
 export const MultipleEditionDefault = Template.bind({});
 
 MultipleEditionDefault.args = {
-  articles: [121151,121152],//[216, 238, 239],
-  versions: [1,1],
+  articles: [121219],//[216, 238, 239],
+  versions: [1],
   //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJjM2FlNjRiMC0yNDcxLTQ1MmQtOGExYi04OGFkNWIxNjRjOWQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNjU0ODk3OCwibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA2NTUyNTc4LCJpYXQiOjE3MDY1NDg5NzgsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.RPiGAf-R2eEqdsfAbKKC7uX57t1JTEIZ3rgJZZNQ6wnJm8hfDKk1aa1fOqGZMDVw_peoq_XyZQWvmsJ8pRexWxO05oLZchn1n_gml6rapq2WqVap1CYyj2k2aBEGJo5CZzWGFp8VVXn9nl9pm8AsFjjfCAQGFaKB_5iMeNCPYt_vXXQ-LAOwkjzoAP6ujmlpJMVMsXoCaabWH7t5Z8akNO0eS0KAscL5EPDl_MmjqV_2PeBXl1KYAU-uJbdSG1xRiSV_nqJ23B4TAkERDfouCfd3ysLMrlRxkcsQd9xOvrt9fQMlrJqrCuf6RoD12pgqSRIxk_cOa4NFm6SKwCwRnw"
-  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmZTVlNWI4YS03N2ZjLTRmNmQtYWY0Yy0yZjVmZmY0ZjQ4ZGUiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImZlNWU1YjhhLTc3ZmMtNGY2ZC1hZjRjLTJmNWZmZjRmNDhkZSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhNDkxNjFjNC0yZTE5LTQ0N2YtYWUwNy1hNTQ3YzU1MTM3NmMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNTk2ODExNywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwNTk3MTcxNywiaWF0IjoxNzA1OTY4MTE3LCJlbWFpbCI6InJldGFpbGVybWVyY2hhbnRzY29udGVudG9oQGFsbGZyZWVtYWlsLm5ldCJ9.fAOa4nlswhCyYsznuS2YBPGluqd6ok7V_TR1tdu6v9KBbN0Q5AJQZFVVJz2F4P8629_FAPjKybbz0gkv7-YHu0z7dqwDOIyve4Agr8YCgoPJi4Fw4whzcULBI122IejHZqSE6YnA2Ry6VOnxkBOJRetBu6oYwGUxfLJ5s2wTGkxStzA8VTDp9QH9kFNt2AUR7yyjMmzK3QT9E7Hvi60IjfWQbKBQpkn2VKkb2ClfJFi81LeFV5vmH9a8OiK7PyHvW82ascs-n3QuV8HgByR-Sgl8sX9CjZArmPGxeLNxS3MaYkLpx1vieOJaG2hotXyQXkx2eTNJUAYnnT10Ixskfg"
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI2ZTY5MTNjZS01MTc1LTRhOWItYjhlYS1iMGNhMDk4Yjc0M2EiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjZlNjkxM2NlLTUxNzUtNGE5Yi1iOGVhLWIwY2EwOThiNzQzYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIwN2JjM2E5Mi02ZmY4LTQ5NDctYWU3ZS0yZjkxNWE4OWE0N2IiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcxMzE5NzkyMiwibmFtZSI6IkplZmUgQ29tZXJjaWFsIiwicGhvbmVfbnVtYmVyIjoiKzUyMzMzMzIzMjIzMzMiLCJleHAiOjE3MTMyMDE1MjIsImlhdCI6MTcxMzE5NzkyMiwiZW1haWwiOiJqZWZlY29tZXJjaWFsQGFsbGZyZWVtYWlsLm5ldCJ9.pRmu4LHck97IR2lvsZNa7ehSMs7bDFrxJqqKn-FgiAeLhZPCJA7SMyWDQKvKH9QFNwQOXI4cNm653CPTvK1jOMFDa7RCaliT4mRlfgrU44EGb-GCr5sfg-97Wqd-kO4hNkJH7x7WvagjHNRL8uD_iMwfUIrZUcUIPRF1b1zl-bHc6WOJDqtyRcdh8NpQ4y63V11USlPvZrcimo4_iJ6re9ductEOwuTPPE30kj88N9J70nWk4dvKKHrC-BTFnt5PSped7nK55FVjg8uIfqpRtTVBtMfVq6zQp0CMjnpiD2yR93YUpSzeNZJ1Sz-pOij5K1RpVXrLHrghWY4ny9QFTg"
   //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkMzE0ODYyYy02OTYxLTQ5YjktODMwOC1hMDM3Mzg1MjUwYzAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMjQxMTc0MSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwMjQxNTM0MSwiaWF0IjoxNzAyNDExNzQxLCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.O4Lr5HZLuueNNY1FxqrRBaQZKMgnTXY9IG7KAMkhWO20Dxnfj253sqOme36AbqIAsCQBy77GmnZtTAFs0uF9QBfEDzZXRQ1xcctboGZ9U235LlLdz-BNGoH5QCRXeZsZdXJ1M7yL8IvIdEnXkFC0WYcUMWMRUc6K6vgOvmCCQhzOr-uW-2nsLBGjBb7Tj_okViYvT0Lupo5Z0Z9Xc20oOWnVmrSuaYa1-b4AjOjEOnETA9usnRa6blOVOkHqi5fX8u11ejczINxNBtoizMPOQROuzuuPTvHrl17ae8JkNoxVCJe5ZdfRrUN1lwUXnOZim7QhNg8YR_uvPs_EJRIwfw",
 };

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

@@ -111,7 +111,10 @@ export const MultipleEdition = ({ articles, versions, onClose, token }) => {
         <img
           src={closeMagenta}
           alt="Cerrar"
-          onClick={() => onClose && onClose()}
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+          //onClick={() => onClose && onClose()}
         />{" "}
       </div>{" "}
       <div className="table">
@@ -119,6 +122,7 @@ export const MultipleEdition = ({ articles, versions, onClose, token }) => {
           withCheckbox
           columns={currentData.columns}
           data={currentData.data}
+          withTooltip={true}
         />{" "}
       </div>{" "}
       {modalFromTable} <Modal {...modal} />{" "}

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

@@ -37,6 +37,8 @@ export const Container = styled.div`
   }
   
   .buttons-container{
+    display: flex;
+    flex-direction: column;
     background: white;
     width: max-content;
     padding: 8px;
@@ -44,7 +46,7 @@ export const Container = styled.div`
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
     border-radius: 3px;
     position: absolute;
-    top: -10%;
+    top: 0;
     left: 50px;
     z-index: 100;
   }
@@ -61,7 +63,7 @@ export const Container = styled.div`
     font-size: 13px;
     line-height: 18px;
     background-color: white;
-
+    margin-right:5px;
     img {
       & + p {
         margin-left: 7px;
@@ -71,16 +73,12 @@ export const Container = styled.div`
     &:hover {
       border-radius: 10px;
     }
-
-    & + * {
-      margin-top: 8px;
-    }
   }
 
   .validation-option {
+    display: flex;
     width: 82px;
     height: 20px;
-    display: flex;
     align-items: center;
     border: none;
     cursor: pointer;
@@ -122,7 +120,7 @@ export const Container = styled.div`
     line-height: 15px;
     padding: 10px;
     outline: none;
-    border-radius: 2px;
+    border-radius: 5px;
     resize: none;
 
     &:focus {
@@ -130,6 +128,34 @@ export const Container = styled.div`
     }
   }
 
+  .general-input {
+    width: 100%;
+    height:27px;
+    max-height:100px;
+  }
+
+  .select-edition-multiple {
+    padding: 5px 10px;
+    border-radius: 5px;
+    gap: 10px;
+    border:1px solid ${GlobalColors.gray_light};
+    border-width: 1px 2px 1px 1px;
+    outline: none;
+    border-image: initial;
+    width: 100%;
+    min-height:27px;
+    cursor: pointer;
+    color: ${GlobalColors.deep_gray};
+    font-size: 12px;
+    line-height: 21px;
+    overflow:hidden; 
+    white-space:nowrap; 
+    text-overflow:ellipsis;
+    :focus{
+      border:1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+
   .tooltip {
     position: relative;
     display: inline-block;

package/src/components/pages/MultipleEdition/utils.js

@@ -11,6 +11,9 @@ import infoIcon from "../../../assets/images/Icons/info.svg";
 import saveWhite from "../../../assets/images/Icons/save-white.svg";
 import saveWhiteGray from "../../../assets/images/Icons/save-white-gray.svg";
 import { DockSharp } from "@mui/icons-material";
+import React, { useState } from 'react';
+import nullIcon from "../../../assets/images/generalButton/nullIcon.svg";
+import { Tooltip } from "../../atoms/Tooltip";
 
 // variables
 export const optionsSelect = [
@@ -500,9 +503,37 @@ export function setDataColumns(
               accessor: `${attributeId + "-" + ret.id}`,
               width: "200px",
               style: styleData,
+              description: rules[attributeId].description,
             });
           }
         });
+
+        const handleChangeOptions = (attributeId, newValue) => {
+          const updatedAttributes = Object.values(item.attributes).map((attr) => {
+            if (attr.attributeId === attributeId) {
+              return { ...attr, value: newValue };
+            }
+            return attr;
+          });
+          const updatedAttributesObject = {};
+          updatedAttributes.forEach((attr) => {
+            updatedAttributesObject[attr.attributeId] = attr;
+          });
+          return updatedAttributesObject;
+        };
+
+
+        
+        const inputTypeValue = (type) => {
+          switch (type) {
+            case "Booleano":
+              return "checkbox";
+            case "Numérico":
+              return "number";
+            default:
+              return "text";
+          }
+        };
         Object.values(item.attributes).forEach((des) => {
           const props = {
             inputId:
@@ -518,7 +549,45 @@ export function setDataColumns(
               "-" +
               item.version,
             value: des.value,
+            inputType:inputTypeValue(des.type),
           };
+          let inputComponent;
+          if (des.option_list.length>0) {
+            inputComponent = (
+              <select
+                id={
+                  item.id +
+                  "_" +
+                  rules[des.attributeId].attributeId +
+                  "_" +
+                  item.version
+                }
+                name={
+                  item.id +
+                  "-" +
+                  rules[des.attributeId].attributeId +
+                  "-" +
+                  item.version
+                }
+                className="select-edition-multiple"
+                defaultValue={des.value}
+                onChange={(e) =>{
+                  handleChangeOptions(des.attributeId, e.target.value)}
+                }
+              >
+              <option value="" selected disabled>Selecciona una opción</option>
+                {des.option_list.map((option, index) => (
+                  <option key={index} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            );
+            
+          } else {
+            inputComponent = <TagAndInput {...props} />;
+          }
+        
           if (
             !attributesReviewed.find(
               (e) =>
@@ -568,38 +637,47 @@ export function setDataColumns(
                       src={acceptIcon}
                       alt="accept button"
                     />
-                  )}{" "}
+                  )}
                 {attributesReviewed[index].isReviewed &&
                   !attributesReviewed[index].isApproved && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        des.attributeId +
-                        "_" +
-                        item.version
-                      }
-                      src={rejectIcon}
-                      alt="reject button"
-                    />
-                  )}{" "}
+                  <Tooltip position="topCenter" componentTooltip={<span>Debes aprobar o rechazar para continuar</span>}>
+                    <div>
+                      <img
+                        id={
+                          "button_" +
+                          item.id +
+                          "_" +
+                          des.attributeId +
+                          "_" +
+                          item.version
+                        }
+                        src={nullIcon}
+                        alt="null button"
+                      />
+                    </div>
+                  </Tooltip>
+                  )}
                 {typeof des.isApproved === "undefined" &&
                   !attributesReviewed[index].isReviewed && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        des.attributeId +
-                        "_" +
-                        item.version
-                      }
-                      src={rejectIcon}
-                      alt="reject button"
-                    />
+                    <Tooltip position="topCenter" componentTooltip={<span>Debes aprobar o rechazar para continuar</span>}>
+                    <div>
+                      <img
+                        id={
+                          "button_" +
+                          item.id +
+                          "_" +
+                          des.attributeId +
+                          "_" +
+                          item.version
+                        }
+                        src={nullIcon}
+                        alt="null button"
+                      />
+                    </div>
+                  </Tooltip>
+                   
                   )}
-              </button>{" "}
+              </button>
               {showValidationPanel &&
                 attributeSelected.articleId === item.id &&
                 attributeSelected.attributeId === des.attributeId &&
@@ -630,11 +708,11 @@ export function setDataColumns(
                   </div>
                 )}{" "}
               {des.comment && <div class="tooltip">
-               <TagAndInput {...props} />
+              {inputComponent}
                 <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>
               </div>}
               {!des.comment && <div>
-               <TagAndInput {...props} />
+                {inputComponent}
                </div>}
             </>
           );
@@ -674,9 +752,11 @@ export function setDataColumns(
               accessor: `${descriptionId}`,
               width: "250px",
               style: styleData,
+              description:rules[ret.id][descriptionId].description
             });
           }
         });
+        
         currentData[`retailer${ret.id}-save`] = (
           <button
             onClick={() => {
@@ -968,31 +1048,3 @@ async function updateArticleData(
   }
 }
 
-/**
-             * Componentes para guardar y validación multiple
-             * <img
-                        src={saveWhite}
-                        alt="Guardar"
-                        onClick={() => {
-                          const params = {
-                            section, data: dataServices[section], token, callbackToInitData, setModal,
-                          };
-                          saveData(params);
-                        }}
-                      />
-
-                      <SelectV2
-                        items={optionsSelect}
-                        triggerType="click"
-                        selectButton={{
-                          type: "whiteS3",
-                          label: "Validación masiva",
-                          size: 12,
-                        }}
-                        typeSelectItems="labelOnly"
-                        borderType="oval"
-                        onChange={(selectedItems) => {
-                          console.log(selectedItems);
-                        }}
-                      />
-             */

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

@@ -764,7 +764,7 @@ export const ProductEditionv2 = ({
     const duplicated = imagesList?.filter((image) => {
       return imagesListTemp[image?.image_id];
     });
-
+    console.log(imagesList)
     const attrForImgs = Object.values(images?.attrForImgs);
     attrForImgs.pop();
     const data = {

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

@@ -0,0 +1,21 @@
+import React, { useRef, useState } from 'react';
+
+function generateThumbnail(videoSrc, timeInSeconds) {
+    return new Promise((resolve, reject) => {
+      const video = document.createElement('video');
+      video.crossOrigin = 'anonymous'; // Necessary for CORS-enabled videos
+      video.src = videoSrc;
+      video.currentTime = timeInSeconds; // Set the time to capture the desired frame
+      video.addEventListener('loadeddata', () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+        const dataURL = canvas.toDataURL('image/jpeg'); // Change format if needed
+        resolve(dataURL);
+      });
+      video.addEventListener('error', reject);
+    });
+  }
+  
+export default generateThumbnail;