contentoh-components-library 21.5.19 → 21.5.21

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

@@ -8,6 +8,7 @@ import { InputGroup } from "../../organisms/InputGroup";
 import { useEffect, useReducer, useState, useCallback } from "react";
 import { GalleryElement } from "../../molecules/GalleryElement";
 import { saveAs } from "file-saver";
+import { Commentary } from "../../atoms/Commentary";
 import {
   getRetailerServices,
   getPercentage,
@@ -93,18 +94,21 @@ const reducerImages = (state, action) => {
           inputsByRetailer[action.retailerId]?.filter((input) => {
             imageIdArray.push(input.id_image);
             valuesInitial.forEach(async (value) => {
-              if(value.ext=="mp4"){
-                convertirVideoABase64("https://" +
-                process.env.REACT_APP_IMAGES_BUCKET +
-                ".s3.amazonaws.com/" +
-                value.srcDB)
-                .then(async base64 => {
-                  const videoSrc = 'data:video/mp4;base64,' + base64.split(',')[1]; // Añade el tipo MIME adecuado
-                  value.src= await generateThumbnail(videoSrc,2);
-                })
-                .catch(error => {
-                  console.error('Error:', error);
-                });
+              if (value.ext == "mp4") {
+                convertirVideoABase64(
+                  "https://" +
+                    process.env.REACT_APP_IMAGES_BUCKET +
+                    ".s3.amazonaws.com/" +
+                    value.srcDB
+                )
+                  .then(async (base64) => {
+                    const videoSrc =
+                      "data:video/mp4;base64," + base64.split(",")[1]; // Añade el tipo MIME adecuado
+                    value.src = await generateThumbnail(videoSrc, 2);
+                  })
+                  .catch((error) => {
+                    console.error("Error:", error);
+                  });
               }
               if (value.image_id === input.id_image) orderedImages.push(value);
             });
@@ -129,22 +133,22 @@ const REGION = "us-east-1";
 function convertirVideoABase64(url) {
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    xhr.responseType = 'blob';
-    xhr.onload = function() {
+    xhr.open("GET", url, true);
+    xhr.responseType = "blob";
+    xhr.onload = function () {
       if (xhr.status === 200) {
         const blob = xhr.response;
         const reader = new FileReader();
-        reader.onloadend = function() {
+        reader.onloadend = function () {
           resolve(reader.result);
         };
         reader.readAsDataURL(blob);
       } else {
-        reject(new Error('Error al cargar el video'));
+        reject(new Error("Error al cargar el video"));
       }
     };
-    xhr.onerror = function() {
-      reject(new Error('Error de red al cargar el video'));
+    xhr.onerror = function () {
+      reject(new Error("Error de red al cargar el video"));
     };
     xhr.send();
   });
@@ -152,16 +156,15 @@ function convertirVideoABase64(url) {
 
 function obtenerDuracionVideoBase64(base64Data) {
   return new Promise((resolve, reject) => {
-    const video = document.createElement('video');
+    const video = document.createElement("video");
     video.src = base64Data;
-    video.addEventListener('loadedmetadata', () => {
+    video.addEventListener("loadedmetadata", () => {
       resolve(video.duration);
     });
-    video.addEventListener('error', reject);
+    video.addEventListener("error", reject);
   });
 }
 
-
 AWS.config.update({
   accessKeyId: process.env.REACT_APP_KUTS3,
   secretAccessKey: process.env.REACT_APP_AKUTS3,
@@ -312,7 +315,7 @@ export const RetailerProductEdition = ({
   const [auditDescriptions, setAuditDescriptions] = useState([]);
   const [auditImages, setAuditImages] = useState([]);
   const [compare, setCompare] = useState(false);
-  const [observation,setObservation] = useState();
+  const [observation, setObservation] = useState();
   const [valRejAll, setValRejAll] = useState(false);
   const [modalAlert, setModalAlert] = useState({
     show: false,
@@ -761,14 +764,13 @@ export const RetailerProductEdition = ({
           const promiseArray = [];
           data?.articleData?.forEach((e) => {
             let file;
-            if(e.ext=="mp4"){
+            if (e.ext == "mp4") {
               file = Buffer.from(
                 e.video_src.replace(/^data:video\/\w+;base64,/, ""),
                 "base64"
               );
-              e.video_src="";
-            }
-            else{
+              e.video_src = "";
+            } else {
               file = Buffer.from(
                 e.src.replace(/^data:image\/\w+;base64,/, ""),
                 "base64"
@@ -1494,7 +1496,7 @@ export const RetailerProductEdition = ({
             isObservationVisible={isObservationVisible}
             toggleObservation={toggleObservation}
             // handleClickOutside={handleClickOutside}
-             hideObservation={hideObservation}
+            hideObservation={hideObservation}
           />
           <FullTabsMenu
             tabsSections={tabsSections}
@@ -1626,9 +1628,71 @@ export const RetailerProductEdition = ({
               </>
             )}
           </div>
+          {/* {(userAssigned(activeTab) || auditorAssigned()) &&
+            product[`${getConcept(activeTab)}_status`] !== "NS" && (
+              <div className="commentary-box">
+                {[7, 8].includes(user.id_role) && (
+                  <Button
+                    buttonType={
+                      evaluationFinished(
+                        user.id_role,
+                        activeTab,
+                        statusArray
+                      ) && requiredNull[activeTab] === 0
+                        ? "general-green-button"
+                        : "general-button-disabled"
+                    }
+                    label={"Enviar evaluación"}
+                    onClick={() => sendToFacilitator()}
+                  />
+                )}
+              </div>
+            )} */}
+
           {(userAssigned(activeTab) || auditorAssigned()) &&
             product[`${getConcept(activeTab)}_status`] !== "NS" && (
               <div className="commentary-box">
+                {!comment ? (
+                  <div className="commentary">
+                    <TagAndInput
+                      label={"Caja de Comentario"}
+                      inputType={"textarea"}
+                      inputCols={80}
+                      inputRows={4}
+                      inputId={"commentary-box"}
+                      index={0}
+                    />
+                    <div className="buttons-box">
+                      <Button
+                        buttonType={"general-transparent-button"}
+                        label={"Enviar comentario"}
+                        onClick={(e) =>
+                          createComment(
+                            e,
+                            document.querySelector(
+                              "#commentary-box .ql-container .ql-editor > p"
+                            ).innerHTML,
+                            activeTab
+                          )
+                        }
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div className="feedback-box">
+                    <Commentary
+                      comment={comment?.message?.replace(/<.*?\/?>/gm, "")}
+                      reviewed={crossComment}
+                    />
+                    <Button
+                      buttonType={"circular-button accept-button"}
+                      onClick={async () => {
+                        setCrossComment(true);
+                        commentRevised();
+                      }}
+                    />
+                  </div>
+                )}
                 {[7, 8].includes(user.id_role) && (
                   <Button
                     buttonType={