contentoh-components-library 21.6.12 → 21.6.14

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

@@ -238,8 +238,12 @@ const ProviderProductEditionView = ({
           }),
         ]);
 
-        const percentages =
-          JSON.parse(percentageRes?.[0]?.body)?.[0]?.relations ?? [];
+        const percentageRaw = percentageRes?.[0];
+        const percentages = (
+          Array.isArray(percentageRaw)
+            ? percentageRaw[0]?.relations
+            : JSON.parse(percentageRaw?.body ?? "null")?.[0]?.relations
+        ) ?? [];
 
         const orderMap =
           services[2].inputsByRetailer ??
@@ -307,11 +311,15 @@ const ProviderProductEditionView = ({
 
         dispatch({ type: "SET_PERCENTAGES", payload: percentages });
 
+        const activePercentage =
+          percentages.find(({ id_retailer: rId }) => rId === id_retailer) ||
+          state.product.percentages?.find(
+            ({ id_retailer: rId }) => rId === id_retailer,
+          );
+
         dispatch({
           type: "SET_ACTIVE_PERCENTAGES",
-          payload: percentages.find(
-            ({ id_retailer: rId }) => rId === id_retailer,
-          ),
+          payload: activePercentage,
         });
       } catch (error) {
         console.error("Error fetching data:", error);
@@ -343,14 +351,18 @@ const ProviderProductEditionView = ({
       if (state.services.datasheets) {
         const retailerDatasheets =
           state.services.datasheets[state.active_retailer.id_retailer];
-        const datasheetsActiveRetailer = {
-          ...retailerDatasheets,
-          data: Object.values(retailerDatasheets.data),
-        };
-        dispatch({
-          type: "SET_DATASHEETS_INPUTS",
-          payload: [datasheetsActiveRetailer, state.services.datasheets.inputs],
-        });
+        if (retailerDatasheets) {
+          const datasheetsActiveRetailer = {
+            ...retailerDatasheets,
+            data: Object.values(retailerDatasheets.data),
+          };
+          dispatch({
+            type: "SET_DATASHEETS_INPUTS",
+            payload: [datasheetsActiveRetailer, state.services.datasheets.inputs],
+          });
+        } else {
+          dispatch({ type: "SET_DATASHEETS_INPUTS", payload: [] });
+        }
       }
 
       if (state.services.descriptions) {
@@ -1319,7 +1331,7 @@ const ProviderProductEditionView = ({
             <div className="product-information">
               <FullProductNameHeader
                 headerData={state.product}
-                percent={state.active_percentage.percentagesGeneral.required}
+                percent={state.active_percentage?.percentagesGeneral?.required}
                 activeRetailer={{
                   id: state.active_retailer?.id_retailer,
                   name: state.active_retailer?.retailer,
@@ -1333,6 +1345,7 @@ const ProviderProductEditionView = ({
                 approve={() => handleOnSendEvaluation("A")}
                 reject={handleOnReject}
                 setActiveRetailer={handleOnChangeActiveRetailer}
+                showStatus={false}
               />
               <FullTabsMenu
                 tabsSections={tabsSections}
@@ -1375,21 +1388,28 @@ const ProviderProductEditionView = ({
                   <>
                     {state.active_tab === "Descripción" &&
                       (state.product?.description_status !== "NS" ? (
-                        <InputGroup
-                          activeSection={state.active_tab}
-                          inputGroup={state.descriptions_inputs[0]}
-                          updatedDescriptions={
-                            state.updated_descriptions_inputs
-                          }
-                          articleId={state.product?.id_article}
-                          version={state.product.version}
-                          isShowbox={false}
-                          dinamicHeight={true}
-                          setUpdatedDescriptions={
-                            handleOnSetUpdatedDescriptions
-                          }
-                          updateApprovedInputs={handleOnUpdateApprovedInputs} // No se usa?
-                        />
+                        state.descriptions_inputs?.[0] ? (
+                          <InputGroup
+                            activeSection={state.active_tab}
+                            inputGroup={state.descriptions_inputs[0]}
+                            updatedDescriptions={
+                              state.updated_descriptions_inputs
+                            }
+                            articleId={state.product?.id_article}
+                            version={state.product.version}
+                            isShowbox={false}
+                            dinamicHeight={true}
+                            setUpdatedDescriptions={
+                              handleOnSetUpdatedDescriptions
+                            }
+                            updateApprovedInputs={handleOnUpdateApprovedInputs}
+                          />
+                        ) : (
+                          <ScreenHeader
+                            text={"No hay descripción para esta cadena"}
+                            headerType={"input-name-header"}
+                          />
+                        )
                       ) : (
                         <ScreenHeader
                           text={"No cuentas con este servicio"}
@@ -1400,43 +1420,50 @@ const ProviderProductEditionView = ({
                     {state.active_tab === "Ficha técnica" &&
                       (state.product?.datasheet_status !== "NS" ? (
                         <>
-                          {state.datasheets_inputs[0]?.data?.map(
-                            (dataGroup, index) => (
-                              <InputGroup
-                                index={index}
-                                key={
-                                  index + "-" + state.active_retailer.retailer
-                                }
-                                articleId={state.product.id_article}
-                                version={state.version}
-                                activeSection={state.active_tab}
-                                inputGroup={dataGroup}
-                                dataInputs={state.datasheets_inputs[1] ?? []}
-                                activeRetailer={
-                                  state.services.datasheets[
-                                    state.active_retailer.id_retailer
-                                  ]
-                                }
-                                groupData={
-                                  state.services.datasheets[
-                                    state.active_retailer.id_retailer
-                                  ].data
-                                }
-                                updatedDatasheets={
-                                  state.updated_datasheets_inputs
-                                }
-                                setUpdatedDatasheets={
-                                  handleOnSetUpdatedDatasheets
-                                }
-                                isShowbox={true}
-                                setUpdatedBoxData={(e) => {
-                                  setBoxData(e);
-                                }}
-                                updateApprovedInputs={
-                                  handleOnUpdateApprovedInputs // No se usa?
-                                }
-                              />
-                            ),
+                          {state.datasheets_inputs?.[0]?.data?.length > 0 ? (
+                            state.datasheets_inputs[0].data.map(
+                              (dataGroup, index) => (
+                                <InputGroup
+                                  index={index}
+                                  key={
+                                    index + "-" + state.active_retailer.retailer
+                                  }
+                                  articleId={state.product.id_article}
+                                  version={state.version}
+                                  activeSection={state.active_tab}
+                                  inputGroup={dataGroup}
+                                  dataInputs={state.datasheets_inputs[1] ?? []}
+                                  activeRetailer={
+                                    state.services.datasheets[
+                                      state.active_retailer.id_retailer
+                                    ]
+                                  }
+                                  groupData={
+                                    state.services.datasheets[
+                                      state.active_retailer.id_retailer
+                                    ]?.data
+                                  }
+                                  updatedDatasheets={
+                                    state.updated_datasheets_inputs
+                                  }
+                                  setUpdatedDatasheets={
+                                    handleOnSetUpdatedDatasheets
+                                  }
+                                  isShowbox={true}
+                                  setUpdatedBoxData={(e) => {
+                                    setBoxData(e);
+                                  }}
+                                  updateApprovedInputs={
+                                    handleOnUpdateApprovedInputs
+                                  }
+                                />
+                              ),
+                            )
+                          ) : (
+                            <ScreenHeader
+                              text={"No hay ficha técnica para esta cadena"}
+                              headerType={"input-name-header"}
+                            />
                           )}
                         </>
                       ) : (

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

@@ -24,9 +24,13 @@ export const normalizeProduct = (product) => {
     productData.statusByRetailer || {}
   ).map((id) => parseInt(id, 10));
 
-  const categoryRetailerInOrder = categoryRetailerNormalized.filter((rel) =>
-    retailersIdsFromStatusByRetailer.includes(rel.id_retailer)
-  );
+  const categoryRetailerInOrder = categoryRetailerNormalized
+    ? retailersIdsFromStatusByRetailer.length > 0
+      ? categoryRetailerNormalized.filter((rel) =>
+          retailersIdsFromStatusByRetailer.includes(rel.id_retailer)
+        )
+      : categoryRetailerNormalized
+    : [];
 
   return {
     // from products

package/src/components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx

@@ -11,6 +11,7 @@ import { v4 as uuidv4 } from "uuid";
 
 import successIcon from "../../../../assets/images/genericModal/genericModalCheck.svg";
 import errorIcon from "../../../../assets/images/genericModal/errorModal.svg";
+import warningIcon from "../../../../assets/images/genericModal/genericModalWarning.svg";
 import { getConceptByTab } from "../utils";
 
 const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
@@ -230,7 +231,11 @@ export const ProviderProductEditionProvider = ({ children }) => {
   };
 
   const updateImages = async (token) => {
-    if (state.updated_images_values.length === 0) return;
+    // Imágenes/videos recién agregados a la galería (aún sin id en BD).
+    const newImages = state.images_values?.values?.filter((e) => !e.id) || [];
+    // Salir solo si no hay nada que crear ni que actualizar.
+    if (state.updated_images_values.length === 0 && newImages.length === 0)
+      return;
     const updatedImages = state.updated_images_values;
 
     const attrForImgs = state.images_values?.attrForImgs || {};
@@ -282,10 +287,16 @@ export const ProviderProductEditionProvider = ({ children }) => {
 
       try {
         const promiseArray = data.articleData.map((e) => {
-          const file = Buffer.from(
-            e.src.replace(/^data:image\/\w+;base64,/, ""),
-            "base64",
-          );
+          const file =
+            e.ext === "mp4"
+              ? Buffer.from(
+                  (e.video_src || "").replace(/^data:video\/\w+;base64,/, ""),
+                  "base64",
+                )
+              : Buffer.from(
+                  e.src.replace(/^data:image\/\w+;base64,/, ""),
+                  "base64",
+                );
           const params = {
             ACL: "public-read",
             Body: file,
@@ -298,8 +309,12 @@ export const ProviderProductEditionProvider = ({ children }) => {
         await Promise.all(promiseArray);
 
         // Eliminar el buffer base64 antes de enviar al endpoint para evitar error 413
-        data.articleData = data.articleData.map(({ src, ...rest }) => rest);
-        data.updateImages = data.updateImages.map(({ src, ...rest }) => rest);
+        data.articleData = data.articleData.map(
+          ({ src, video_src, ...rest }) => rest,
+        );
+        data.updateImages = data.updateImages.map(
+          ({ src, video_src, ...rest }) => rest,
+        );
 
         const res = await axios.put(
           process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,

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

@@ -60,6 +60,7 @@ import imagesSent from "../../../assets/images/modalsSVGs/uploadingImages.svg";
 
 import { Container } from "./styles";
 import { Commentary } from "../../atoms/Commentary";
+import generateThumbnail from "./generateThumnail";
 
 import { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
 import ChangeStatusModal from "../../organisms/ChangeStatusModal";
@@ -80,9 +81,69 @@ const allowedAccountsToViewChangeStatus = [
   "kikije1467@mtlcz.com", //IMÁGENES
   "karafe3218@mom2kid.com", //TEXTOS
   "ladiboh785@mi166.com", //QA
-
 ];
 
+function obtenerDuracionVideoBase64(base64Data) {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.src = base64Data;
+    video.addEventListener("loadedmetadata", () => {
+      resolve(video.duration);
+    });
+    video.addEventListener("error", reject);
+  });
+}
+
+function convertirVideoABase64(url) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    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 () {
+          resolve(reader.result);
+        };
+        reader.readAsDataURL(blob);
+      } else {
+        reject(new Error("Error al cargar el video"));
+      }
+    };
+    xhr.onerror = function () {
+      reject(new Error("Error de red al cargar el video"));
+    };
+    xhr.send();
+  });
+}
+
+// Para videos ya guardados, `getImage` deja en `src` una URL del
+// redimensionador de imágenes que no sirve para mp4. Descargamos el video
+// desde S3 (srcDB) y generamos un thumbnail JPEG para mostrarlo en la galería.
+async function regenerateVideoThumbnails(values) {
+  if (!Array.isArray(values)) return values;
+  return Promise.all(
+    values.map(async (value) => {
+      if (value?.ext !== "mp4" || !value?.srcDB) return value;
+      try {
+        const base64 = await convertirVideoABase64(
+          "https://" +
+            process.env.REACT_APP_IMAGES_BUCKET +
+            ".s3.amazonaws.com/" +
+            value.srcDB,
+        );
+        const videoSrc = "data:video/mp4;base64," + base64.split(",")[1];
+        const thumbnail = await generateThumbnail(videoSrc, 2);
+        return { ...value, src: thumbnail };
+      } catch (error) {
+        console.error("Error al generar thumbnail del video:", error);
+        return value;
+      }
+    }),
+  );
+}
+
 const RetailerProductEditionView = ({
   tabsSections,
   productSelected = {},
@@ -124,7 +185,7 @@ const RetailerProductEditionView = ({
 
   const [compare, setCompare] = useState(false);
   const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
-    accept: "image/*",
+    accept: "image/*, video/mp4",
     noKeyboard: true,
     multiple: true,
     noClick: true,
@@ -139,8 +200,48 @@ const RetailerProductEditionView = ({
           const fileDataURL = e.target.result;
 
           const img = new Image();
-          img.src = fileDataURL;
 
+          if (fileExtension === "mp4") {
+            try {
+              const duracion = await obtenerDuracionVideoBase64(fileDataURL);
+              if (duracion <= 10 || duracion >= 600) {
+                dispatch({
+                  type: "SET_MODAL",
+                  payload: {
+                    show: true,
+                    title: "Hubo un error al subir el video",
+                    message:
+                      "Los videos deben durar entre 15 segundos y 10 minutos",
+                    image: errorIcon,
+                  },
+                });
+                return;
+              }
+
+              img.src = await generateThumbnail(fileDataURL, 2);
+              img.onload = function () {
+                const newImg = {
+                  src: img.src,
+                  name: fileName,
+                  ext: fileExtension,
+                  width: img.width,
+                  height: img.height,
+                  video_src: fileDataURL,
+                  isApproved: true, // VALIDAR QUE SOLO SEA PARA RADIOSHACK
+                };
+
+                dispatch({
+                  type: "ADD_IMAGE_VALUE",
+                  payload: newImg,
+                });
+              };
+            } catch (error) {
+              console.error("Error al obtener la duración del video:", error);
+            }
+            return;
+          }
+
+          img.src = fileDataURL;
           img.onload = function () {
             const width = img.width;
             const height = img.height;
@@ -150,6 +251,7 @@ const RetailerProductEditionView = ({
               ext: fileExtension,
               width: width,
               height: height,
+              video_src: "",
               isApproved: true, // VALIDAR QUE SOLO SEA PARA RADIOSHACK
             };
 
@@ -220,11 +322,13 @@ const RetailerProductEditionView = ({
 
   const initializeProduct = async () => {
     try {
-      const product = productSelected ? productSelected : JSON.parse(sessionStorage.getItem("productSelected"));
+      const product = productSelected
+        ? productSelected
+        : JSON.parse(sessionStorage.getItem("productSelected"));
 
       const productNormalized = normalizeProduct(product);
 
-      console.log({productNormalized});
+      console.log({ productNormalized });
 
       dispatch({
         type: "SET_PRODUCT",
@@ -401,6 +505,8 @@ const RetailerProductEditionView = ({
       });
       dispatch({ type: "SET_COMMENTS", payload: commentsMap });
 
+      console.log("services", services);
+
       // Ordenamiento de imágenes
       const orderMap = services[2].inputsByRetailer
         .flat()
@@ -436,6 +542,12 @@ const RetailerProductEditionView = ({
         );
       });
 
+      // Regenerar thumbnails de videos guardados para que se muestren.
+      const orderedValuesWithThumbs =
+        await regenerateVideoThumbnails(orderedValues);
+      const filteredValuesWithThumbs =
+        await regenerateVideoThumbnails(filteredValues);
+
       // Dispatch consolidado
       dispatch({
         type: "SET_SERVICES",
@@ -444,7 +556,7 @@ const RetailerProductEditionView = ({
           descriptions: services[1],
           images: {
             ...services[2],
-            values: orderedValues,
+            values: orderedValuesWithThumbs,
           },
         },
       });
@@ -473,7 +585,7 @@ const RetailerProductEditionView = ({
         type: "SET_IMAGES_VALUES",
         payload: {
           ...services[2],
-          values: filteredValues,
+          values: filteredValuesWithThumbs,
         },
       });
 
@@ -750,10 +862,11 @@ const RetailerProductEditionView = ({
         );
 
         const newStatuses = JSON.parse(res.data.body);
-        const serviceStatus = newStatuses.newServiceStatus[articleId][`${concept}Status`];
+        const serviceStatus =
+          newStatuses.newServiceStatus[articleId][`${concept}Status`];
         const articleStatus = newStatuses.newArticleStatus[articleId];
 
-        console.log({newStatuses});
+        console.log({ newStatuses });
 
         // Actualizar el producto con los nuevos estados
         const updatedStatusByRetailer = state.product.statusByRetailer.map(
@@ -782,7 +895,8 @@ const RetailerProductEditionView = ({
             image: successIcon,
           },
         });
-      } else { //Caso del botón "Enviar evaluación"
+      } else {
+        //Caso del botón "Enviar evaluación"
 
         //Se construye el mensaje y se actualiza el estatus
 
@@ -809,12 +923,13 @@ const RetailerProductEditionView = ({
       }
 
       if (res.data.statusCode === 200) {
-
-        const { newStatus, newOrderStatus, newArticleStatus } = JSON.parse( res.data.body );
+        const { newStatus, newOrderStatus, newArticleStatus } = JSON.parse(
+          res.data.body,
+        );
 
         const articleStatus = newArticleStatus[articleId];
 
-        console.log({newArticleStatus});
+        console.log({ newArticleStatus });
 
         // const retailers = state.product.categoryRetailer.map((r) => ({
         //   id: r.id_retailer,
@@ -840,12 +955,13 @@ const RetailerProductEditionView = ({
         // };
         // await sendMessage(messageData);
 
-        const updatedStatusByRetailerForSend = state.product.statusByRetailer.map((item) => {
-          if (item.retailer_id === retailerId && item.service === concept) {
-            return { ...item, status: newStatus };
-          }
-          return item;
-        });
+        const updatedStatusByRetailerForSend =
+          state.product.statusByRetailer.map((item) => {
+            if (item.retailer_id === retailerId && item.service === concept) {
+              return { ...item, status: newStatus };
+            }
+            return item;
+          });
 
         const updatedProduct = {
           ...state.product,
@@ -856,9 +972,12 @@ const RetailerProductEditionView = ({
 
         //Actualizamos el services_data en el servicio específico del retailer actual
 
-        const updatedServicesData = state.services_data?.map(service => ({
+        const updatedServicesData = state.services_data?.map((service) => ({
           ...service,
-          status: service?.id_retailer === retailerId && service?.service === concept ? newStatus : service?.status
+          status:
+            service?.id_retailer === retailerId && service?.service === concept
+              ? newStatus
+              : service?.status,
         }));
 
         const sessionProduct = sessionStorage.getItem("productSelected");
@@ -929,11 +1048,18 @@ const RetailerProductEditionView = ({
       const conceptArray = getConceptsByRole(user.id_role);
 
       state.services_data?.forEach((ret, idx) => {
-        const { service: retailer_service, id_retailer, status: status_retailer_service } = ret;
+        const {
+          service: retailer_service,
+          id_retailer,
+          status: status_retailer_service,
+        } = ret;
 
         const lastStatusLevel = status_retailer_service?.replace(/.*\//, "");
 
-        if (conceptArray.includes(retailer_service) && statusArray?.includes(lastStatusLevel)) {
+        if (
+          conceptArray.includes(retailer_service) &&
+          statusArray?.includes(lastStatusLevel)
+        ) {
           const data = {
             articleId: state.product.id_article,
             orderId: state.product.id_order,
@@ -981,7 +1107,11 @@ const RetailerProductEditionView = ({
         payload: updatedProduct,
       });
 
-      const updatedServicesData = state.services_data.map(service => conceptArray.includes(service.service) ? { ...service, status: status } : service);
+      const updatedServicesData = state.services_data.map((service) =>
+        conceptArray.includes(service.service)
+          ? { ...service, status: status }
+          : service,
+      );
 
       dispatch({
         type: "SET_SERVICES_DATA",
@@ -1142,8 +1272,9 @@ const RetailerProductEditionView = ({
     switch (id_rol) {
       case 7:
       case 8:
-
-        const canSendEvaluation = statusArray.includes(statusBySelectedRetailerService);
+        const canSendEvaluation = statusArray.includes(
+          statusBySelectedRetailerService,
+        );
 
         // const conditionTwo = statusArray.includes(product?.status);
 
@@ -1180,7 +1311,7 @@ const RetailerProductEditionView = ({
   };
 
   const handleOnChangeProductVersion = (version) => {
-    console.log('se cambia la version')
+    console.log("se cambia la version");
     dispatch({
       type: "SET_PRODUCT_VERSION",
       payload: version,
@@ -1310,12 +1441,12 @@ const RetailerProductEditionView = ({
             </Box>
           </div>
         </div>
-      </Container> 
+      </Container>
     );
   };
 
   useEffect(() => {
-    console.log({stateProduct: state.product})
+    console.log({ stateProduct: state.product });
   }, [state.product]);
 
   if (state.loading || !state.services || !state.product)
@@ -1789,16 +1920,16 @@ const RetailerProductEditionView = ({
                   )}
 
                   <div className="action-buttons">
-                    {
-                      allowedAccountsToViewChangeStatus.includes(user?.email) && (
-                        <Button
-                          buttonType={"general-pink-button"}
-                          label={"Cambio de Estatus"}
-                          onClick={() => setOpenChangeStatusModal(true)}
-                          id="button-change-status"
-                        />
-                      )
-                    }
+                    {allowedAccountsToViewChangeStatus.includes(
+                      user?.email,
+                    ) && (
+                      <Button
+                        buttonType={"general-pink-button"}
+                        label={"Cambio de Estatus"}
+                        onClick={() => setOpenChangeStatusModal(true)}
+                        id="button-change-status"
+                      />
+                    )}
                     {[7, 8].includes(user.id_role) && (
                       <Button
                         buttonType={

package/src/global-files/data.js

@@ -201,5 +201,6 @@ export const getServicesData = async ({ articleId, orderId, end, token }) => {
     }
   );
 
-  return JSON.parse(servicesResponse?.data?.body).data;
+  const body = servicesResponse?.data?.body;
+  return body ? JSON.parse(body).data ?? [] : [];
 };