contentoh-components-library 21.6.55 → 21.6.57

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import axios from "axios";
 import { useDropzone } from "react-dropzone";
@@ -30,6 +30,8 @@ import {
   getServicesData,
 } from "../../../global-files/data";
 import { useCloseModal } from "../../../global-files/customHooks";
+import { useDigitalAssets } from "../../../global-files/digital-assets/useDigitalAssets";
+import { countUnsavedAssets } from "../../../global-files/digital-assets/assets.reducer";
 
 import { Button } from "../../atoms/GeneralButton";
 import { GenericModal } from "../../atoms/GenericModal";
@@ -39,12 +41,14 @@ import { ButtonV2 } from "../../atoms/ButtonV2";
 
 import { GalleryElement } from "../../molecules/GalleryElement";
 import { GalleryHeader } from "../../molecules/GalleryHeader";
+import { GalleryTrayTabs, TRAYS } from "../../molecules/GalleryTrayTabs";
 import { HeaderTop } from "../../molecules/HeaderTop";
 import { TagAndInput } from "../../molecules/TagAndInput/index";
 
 import { FullProductNameHeader } from "../../organisms/FullProductNameHeader";
 import { FullTabsMenu } from "../../organisms/FullTabsMenu";
 import { ImageDataTable } from "../../organisms/ImageDataTable";
+import { DigitalAssetsTray } from "../../organisms/DigitalAssetsTray";
 import { ImagePreviewer } from "../../organisms/ImagePreviewer";
 import { InputGroup } from "../../organisms/InputGroup";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
@@ -101,62 +105,19 @@ function obtenerDuracionVideoBase64(base64Data) {
   });
 }
 
-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 = {},
   user = {},
   token,
   location,
+  /*
+    Activos digitales (360, video, gif, pdf). Apagado por omisión: la interfaz
+    ya está, pero el backend no existe todavía, así que la bandeja solo puede
+    mostrar lo que el usuario acaba de soltar y nada se guarda. La aplicación
+    que consuma la librería lo enciende cuando el backend esté listo.
+  */
+  enableDigitalAssets = false,
 }) => {
   const {
     state,
@@ -165,6 +126,8 @@ const RetailerProductEditionView = ({
     saveDescriptions,
     updateImages,
     deleteImages,
+    saveAssets,
+    registerUploadedAssets,
     handleOnDownloadImages,
     createComment,
   } = useProviderProductEdition();
@@ -304,6 +267,54 @@ const RetailerProductEditionView = ({
 
   const [openChangeStatusModal, setOpenChangeStatusModal] = useState(false);
 
+  /*
+    Bandeja de activos digitales. La lista vive en el reducer de la ficha
+    (`state.assets_values`), igual que las imágenes, para que el guardado del
+    contexto pueda leerla. El hook solo aporta validación y ciclo de vida.
+
+    Sigue vacía porque todavía no hay de dónde leerla: cuando exista el endpoint
+    se llama a `replaceAll` desde `loadData` y el resto de la pantalla no cambia.
+  */
+  const [assetNotices, setAssetNotices] = useState([]);
+  const digitalAssets = useDigitalAssets({
+    assets: state.assets_values,
+    dispatch,
+    notices: assetNotices,
+    setNotices: setAssetNotices,
+    // Con los dos, la subida a S3 arranca sola al soltar los archivos. Sin
+    // ellos —en Storybook, por ejemplo— la bandeja funciona igual pero no sube.
+    articleId: state.product?.id_article ?? null,
+    token,
+    // Al terminar la subida el activo queda registrado solo, sin esperar al
+    // botón de guardar: con la barra llena, nadie supone que falta un paso.
+    onUploaded: (uploaded) => registerUploadedAssets(token, uploaded),
+  });
+  const [activeTray, setActiveTray] = useState(TRAYS.IMAGES);
+  const currentTray = enableDigitalAssets ? activeTray : TRAYS.IMAGES;
+
+  /*
+    De qué artículo se cargaron ya los activos.
+
+    `loadData` se vuelve a ejecutar cada vez que cambia la cadena activa, pero los
+    activos son generales: no dependen de la cadena ni de la versión, así que la
+    respuesta sería idéntica. Volver a cargarlos borraría los archivos que el
+    usuario acaba de soltar y todavía no guarda —sin aviso y sin forma de
+    recuperarlos—. Por eso se cargan una sola vez por artículo.
+  */
+  const assetsLoadedFor = useRef(null);
+
+  const handleOnSetSelectedAssets = (assets) =>
+    dispatch({
+      type: "SET_SELECTED_ASSETS",
+      payload: assets,
+    });
+
+  const handleOnSetAllAssetsChecked = (isChecked) =>
+    dispatch({
+      type: "TOGGLE_CHECK_ALL_ASSETS",
+      payload: isChecked,
+    });
+
   const thumbs = () => {
     const imageInputs = state.images_values?.inputs?.map((e) => ({
       value: e?.id,
@@ -346,6 +357,7 @@ const RetailerProductEditionView = ({
         updateApprovedInputsImages={(item) =>
           console.log("updateApprovedInputsImages", item)
         }
+        onSelect={() => handleOnChangeCurrentImage(index)}
       />
     ));
   };
@@ -614,12 +626,6 @@ 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",
@@ -628,7 +634,7 @@ const RetailerProductEditionView = ({
           descriptions: services[1],
           images: {
             ...services[2],
-            values: orderedValuesWithThumbs,
+            values: orderedValues,
           },
         },
       });
@@ -645,7 +651,12 @@ const RetailerProductEditionView = ({
       // Setear inputs del retailer activo directamente (evita cascada)
       dispatch({
         type: "SET_DATASHEETS_INPUTS",
-        payload: [datasheetsActiveRetailer, services[0].inputs],
+        // `services[0]?` por lo mismo que el fallback de arriba: la lectura de
+        // fichas puede volver sin datos para esa cadena y categoría. Arriba ya
+        // se contemplaba; aquí no, y como este dispatch va ANTES de
+        // SET_IMAGES_VALUES, reventar aquí dejaba la ficha cargando para
+        // siempre — con las imágenes ya traídas y sin pintar.
+        payload: [datasheetsActiveRetailer, services[0]?.inputs ?? {}],
       });
 
       dispatch({
@@ -657,10 +668,23 @@ const RetailerProductEditionView = ({
         type: "SET_IMAGES_VALUES",
         payload: {
           ...services[2],
-          values: filteredValuesWithThumbs,
+          values: filteredValues,
         },
       });
 
+      /*
+        Activos digitales. `services[2].assets` todavía no existe en la
+        respuesta del backend: hasta que exista, esto no hace nada, y el día que
+        llegue la bandeja se llena sola sin tocar nada más.
+      */
+      if (
+        Array.isArray(services[2].assets) &&
+        assetsLoadedFor.current !== id_article
+      ) {
+        assetsLoadedFor.current = id_article;
+        digitalAssets.replaceAll(services[2].assets);
+      }
+
       // Calcular campos requeridos sin valor
       dispatch({
         type: "SET_MISSING_REQUIRED_FIELDS",
@@ -810,7 +834,8 @@ const RetailerProductEditionView = ({
     const canEvaluateAsAuditor =
       state.services_data.every((srv) =>
         ["AC", "RP", "RCA"].includes(srv?.status?.replace(/.*\//, "")),
-      ) && ([1, 6].includes(user.id_role) || isAuditorAssigned());
+      ) &&
+      ([1, 6].includes(user.id_role) || isAuditorAssigned());
 
     const canEvaluateAC =
       services.length > 0 &&
@@ -836,7 +861,29 @@ const RetailerProductEditionView = ({
     return currentStatus;
   };
 
+  /*
+    Guarda los activos y recarga si algo se escribió.
+
+    La recarga no es opcional: un activo recién creado sigue en memoria con su
+    id temporal y sin el id de la base. Sin volver a leer, el siguiente guardado
+    lo mandaría otra vez como nuevo y se duplicaría. Poner el ref en `null` es
+    lo que permite que `loadData` lo vuelva a traer —normalmente los activos se
+    cargan una sola vez por artículo—.
+  */
+  const handleOnSaveAssets = async () => {
+    const guardado = await saveAssets(token);
+    if (!guardado) return;
+
+    assetsLoadedFor.current = null;
+    await loadData(false);
+  };
+
   const handleOnClickSaveImages = async () => {
+    if (currentTray === TRAYS.ASSETS) {
+      await handleOnSaveAssets();
+      return;
+    }
+
     if (state.product?.services?.images === 1) {
       /**
        * `updateImages` y NO `saveImageAttrs`.
@@ -874,7 +921,7 @@ const RetailerProductEditionView = ({
       const res = await axios.post(
         `${process.env.REACT_APP_VARIANTS_ENDPOINT}/family`,
         { articleId: state.product?.id_article },
-        { headers: { Authorization: token } }
+        { headers: { Authorization: token } },
       );
       const data = readPayload(res);
       setFamily(data);
@@ -964,9 +1011,9 @@ const RetailerProductEditionView = ({
       result.mode === "self"
         ? { ...state.product, parentArticleId: null, variantsCount: 0 }
         : {
-          ...state.product,
-          variantsCount: Math.max((state.product?.variantsCount ?? 1) - 1, 0),
-        };
+            ...state.product,
+            variantsCount: Math.max((state.product?.variantsCount ?? 1) - 1, 0),
+          };
 
     dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
 
@@ -975,7 +1022,7 @@ const RetailerProductEditionView = ({
     // aplanada de esta pantalla lo dejaría mutilado en el siguiente F5.
     try {
       const guardado = JSON.parse(
-        sessionStorage.getItem("productSelected") ?? "null"
+        sessionStorage.getItem("productSelected") ?? "null",
       );
 
       if (guardado) {
@@ -985,7 +1032,7 @@ const RetailerProductEditionView = ({
             ...guardado,
             variantsCount: updatedProduct.variantsCount,
             parentArticleId: updatedProduct.parentArticleId ?? null,
-          })
+          }),
         );
       }
     } catch (error) {
@@ -1026,7 +1073,7 @@ const RetailerProductEditionView = ({
       const res = await axios.post(
         `${process.env.REACT_APP_VARIANTS_ENDPOINT}/group`,
         { articleId: state.product?.id_article },
-        { headers: { Authorization: token } }
+        { headers: { Authorization: token } },
       );
       const data = readPayload(res);
       setVariantGroup(data);
@@ -1049,7 +1096,7 @@ const RetailerProductEditionView = ({
       const res = await axios.post(
         `${process.env.REACT_APP_VARIANTS_ENDPOINT}/leave`,
         { articleId: state.product?.id_article },
-        { headers: { Authorization: token } }
+        { headers: { Authorization: token } },
       );
       setVariantGroup(readPayload(res));
       setShowGroup(false);
@@ -1084,7 +1131,7 @@ const RetailerProductEditionView = ({
         {
           params: { filterByIdArticle: articleId, includeFilters: false },
           headers: { Authorization: token },
-        }
+        },
       );
 
       // read-order-services responde { total, data: [...] }. La vista trae una
@@ -1092,12 +1139,12 @@ const RetailerProductEditionView = ({
       // ordenadas por order_id DESC y la primera es la orden más reciente.
       const { data } = readPayload(res) ?? {};
       const encontrado = (data ?? []).find(
-        (item) => Number(item?.article?.id_article) === Number(articleId)
+        (item) => Number(item?.article?.id_article) === Number(articleId),
       );
 
       if (!encontrado) {
         setAvisoFamilia(
-          "Ese producto no está en ninguna orden de trabajo, así que no se puede abrir desde aquí."
+          "Ese producto no está en ninguna orden de trabajo, así que no se puede abrir desde aquí.",
         );
         return;
       }
@@ -1110,7 +1157,7 @@ const RetailerProductEditionView = ({
           ArticleId: encontrado.article.id_article,
           categoryId: encontrado.article.id_article,
           product: [encontrado],
-        })
+        }),
       );
 
       window.location.assign("/EditProducts");
@@ -1135,7 +1182,8 @@ const RetailerProductEditionView = ({
         ? {
             ...state.product,
             variantsCount:
-              (state.product?.variantsCount ?? 0) + (result.linked ?? []).length,
+              (state.product?.variantsCount ?? 0) +
+              (result.linked ?? []).length,
           }
         : {
             ...state.product,
@@ -1159,7 +1207,7 @@ const RetailerProductEditionView = ({
     */
     try {
       const guardado = JSON.parse(
-        sessionStorage.getItem("productSelected") ?? "null"
+        sessionStorage.getItem("productSelected") ?? "null",
       );
 
       if (guardado) {
@@ -1169,7 +1217,7 @@ const RetailerProductEditionView = ({
             ...guardado,
             variantsCount: updatedProduct.variantsCount,
             parentArticleId: updatedProduct.parentArticleId ?? null,
-          })
+          }),
         );
       }
     } catch (error) {
@@ -1211,7 +1259,10 @@ const RetailerProductEditionView = ({
     `rel_article_description` y la ficha técnica en `article_data`: el endpoint
     recibe una lista o la otra.
   */
-  const handleOnRestoreInheritance = async (attributeId, kind = "attribute") => {
+  const handleOnRestoreInheritance = async (
+    attributeId,
+    kind = "attribute",
+  ) => {
     if (!attributeId || !state.product?.id_article) return;
 
     const esDescripcion = kind === "description";
@@ -1225,7 +1276,7 @@ const RetailerProductEditionView = ({
             ? { descriptions: [Number(attributeId)] }
             : { attributes: [Number(attributeId)] }),
         },
-        { headers: { Authorization: token } }
+        { headers: { Authorization: token } },
       );
 
       const data = readPayload(res);
@@ -1428,7 +1479,7 @@ const RetailerProductEditionView = ({
           puede copiar igual. Si no se miraran, guardar no ofrecería nada.
         */
         const companeras = (variantGroup?.members ?? []).filter(
-          (m) => !m.isCurrent
+          (m) => !m.isCurrent,
         );
 
         // Un hijo tampoco puede estar agrupado desde 2026-09-25, así que para
@@ -1442,6 +1493,16 @@ const RetailerProductEditionView = ({
         break;
       }
       case "Imágenes":
+        /*
+          Se guarda la bandeja que el usuario tiene a la vista. Guardar las dos
+          de golpe haría que, estando en activos, `updateImages` enviara también
+          los cambios de imágenes que el usuario quizá no dio por terminados —y
+          al revés—. El botón guarda lo que se está viendo.
+        */
+        if (currentTray === TRAYS.ASSETS) {
+          await handleOnSaveAssets();
+          return;
+        }
         await updateImages(token);
         break;
       default:
@@ -1465,7 +1526,98 @@ const RetailerProductEditionView = ({
     });
   };
 
+  /*
+    Descarga de activos: los seleccionados, o todos si no hay selección — el
+    mismo criterio que usa la descarga de imágenes.
+
+    Solo se descarga lo que ya está en S3. Un activo recién soltado vive como
+    referencia al archivo del disco del usuario: "descargarlo" le devolvería el
+    archivo que él mismo acaba de elegir, lo cual no tiene sentido.
+  */
+  const handleOnDownloadAssets = () => {
+    const seleccion = state.selected_assets.length
+      ? state.selected_assets
+      : state.assets_values;
+
+    const descargables = seleccion.filter((asset) => asset.id && asset.url);
+
+    if (descargables.length === 0) {
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Nada que descargar",
+          message:
+            "Los activos seleccionados todavía no se han guardado. Guárdalos primero.",
+          image: warningIcon,
+        },
+      });
+      return;
+    }
+
+    descargables.forEach((asset) => saveAs(asset.url, asset.name));
+  };
+
+  /*
+    Borrado en lote de activos.
+
+    A diferencia de las imágenes, que se borran contra el backend en el momento,
+    los activos se quitan de la bandeja y su baja viaja en el mismo PUT del
+    guardado (`deleteAssets`). Es lo que permite al usuario deshacerse de un
+    borrado por error: basta con no guardar. El mensaje lo dice, para que nadie
+    se quede pensando que ya se aplicó.
+  */
+  const handleOnAskToDeleteAssets = () => {
+    if (state.selected_assets.length === 0) {
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Eliminar activos digitales",
+          message: "No has seleccionado ningún activo para eliminar.",
+          image: warningIcon,
+        },
+      });
+      return;
+    }
+
+    const seleccionados = state.selected_assets;
+
+    dispatch({
+      type: "SET_MODAL",
+      payload: {
+        show: true,
+        title: "Eliminar activos digitales",
+        message: `Se quitarán ${seleccionados.length} activo(s) de la bandeja. El borrado se aplica al guardar.`,
+        image: warningIcon,
+        buttons: [
+          {
+            text: "Cancelar",
+            buttonType: "general-white-button",
+            action: () =>
+              dispatch({ type: "SET_MODAL", payload: { show: false } }),
+          },
+          {
+            text: "Eliminar",
+            buttonType: "general-button-default",
+            action: () => {
+              dispatch({ type: "SET_MODAL", payload: { show: false } });
+              seleccionados.forEach((asset) =>
+                digitalAssets.removeAsset(asset),
+              );
+            },
+          },
+        ],
+      },
+    });
+  };
+
   const handleOnAskToDeleteImages = () => {
+    if (currentTray === TRAYS.ASSETS) {
+      handleOnAskToDeleteAssets();
+      return;
+    }
+
     if (state.selected_images.length === 0) {
       dispatch({
         type: "SET_MODAL",
@@ -2198,7 +2350,25 @@ const RetailerProductEditionView = ({
       </Container>
     );
 
-  if (state.loading || !state.services || !state.product)
+  /*
+    `images_values` entra al guard junto a `services` y `product`.
+
+    React 17 no agrupa los dispatch que van después de un `await`: cada uno
+    re-renderiza al instante. En `loadData` el orden es SET_SERVICES →
+    …_INPUTS → SET_IMAGES_VALUES, así que había renders intermedios con
+    `services` ya puesto —el guard los dejaba pasar— y el resto todavía en null.
+    El cuerpo de abajo lee `datasheets_inputs[1]`, `descriptions_inputs[0]` y
+    `images_values.values` sin protección, y tumbaba la pantalla entera.
+
+    Se comprueba `images_values` y no cada uno: es el ÚLTIMO que `loadData`
+    despacha, así que si ya está, los anteriores también.
+  */
+  if (
+    state.loading ||
+    !state.services ||
+    !state.product ||
+    !state.images_values
+  )
     return (
       <>
         <ProductEditionSkeleton />
@@ -2223,7 +2393,7 @@ const RetailerProductEditionView = ({
                 : (family?.variants ?? []).filter((v) => !v.isCurrent)
             }
             groupMembers={(variantGroup?.members ?? []).filter(
-              (m) => !m.isCurrent
+              (m) => !m.isCurrent,
             )}
             groupCode={variantGroup?.group ?? null}
             saving={state.saving}
@@ -2460,8 +2630,18 @@ const RetailerProductEditionView = ({
         <div className="data-container">
           <div className="image-data-panel">
             <ImagePreviewer
+              /*
+                `images_values` puede ser null en pleno render.
+
+                React 17 no agrupa los dispatch que van después de un `await`:
+                cada uno re-renderiza al instante. En `loadData`, `SET_SERVICES`
+                se despacha antes que `SET_IMAGES_VALUES`, así que hay un render
+                en el que `services` ya existe —y por eso el guard de arriba deja
+                pasar— pero las imágenes todavía no. Sin las interrogaciones,
+                ese render intermedio tumba la pantalla entera.
+              */
               activeImage={
-                state.images_values.values[state.current_image] ?? {}
+                state.images_values?.values?.[state.current_image] ?? {}
               }
               imagesArray={state.images_values || []}
               setActiveImage={handleOnChangeCurrentImage}
@@ -2769,7 +2949,13 @@ const RetailerProductEditionView = ({
               setShowVersionSelector={setShowVersionSelector}
               // setSelectedImages={setSelectedImages} prop pasada asi: FullTabsMenu -> TabsMenu Pero en TabsMenu no se espera ninguna prop setSelectedImages
               // actions
-              downloadImages={handleOnDownloadImages}
+              // El botón actúa sobre la bandeja visible: en activos descargaba
+              // las imágenes del producto, que no es lo que el usuario pidió.
+              downloadImages={
+                currentTray === TRAYS.ASSETS
+                  ? handleOnDownloadAssets
+                  : handleOnDownloadImages
+              }
               askToDeleteImages={handleOnAskToDeleteImages}
               showSaveButton={isAuditorAssigned() || isUserAssignedToService()}
               onClickSave={handleOnClickSave}
@@ -2847,7 +3033,36 @@ const RetailerProductEditionView = ({
                   {state.active_tab === "Imágenes" &&
                     (state.product?.images_status !== "NS" ? (
                       <>
-                        {!imageLayout && (
+                        {enableDigitalAssets && (
+                          <GalleryTrayTabs
+                            activeTray={currentTray}
+                            setActiveTray={setActiveTray}
+                            imagesCount={
+                              state.images_values?.values?.length ?? 0
+                            }
+                            assetsCount={digitalAssets.assets.length}
+                          />
+                        )}
+                        {currentTray === TRAYS.ASSETS && (
+                          <section
+                            className="container"
+                            style={{ position: "relative" }}
+                          >
+                            <DigitalAssetsTray
+                              {...digitalAssets}
+                              unsaved={countUnsavedAssets(state)}
+                              gridLayout={imageLayout}
+                              readOnly={
+                                !isAuditorAssigned() &&
+                                !isUserAssignedToService()
+                              }
+                              selectedAssets={state.selected_assets}
+                              setSelectedAssets={handleOnSetSelectedAssets}
+                              setCheckAll={handleOnSetAllAssetsChecked}
+                            />
+                          </section>
+                        )}
+                        {currentTray === TRAYS.IMAGES && !imageLayout && (
                           <GalleryHeader
                             checkAll={state.all_image_checked} // Determina si el checkbox "Seleccionar todo" está marcado
                             setCheckAll={handleOnSetCheckAll} // Toggler de true o false para el checkbox "Seleccionar todo"
@@ -2855,74 +3070,76 @@ const RetailerProductEditionView = ({
                             // shotThd={shotThd} // No se usa?
                           />
                         )}
-                        <section
-                          className="container"
-                          style={{ position: "relative" }}
-                        >
-                          <div
-                            {...getRootProps({
-                              className: `dropzone ${
-                                isDragActive ? "drag-active" : ""
-                              }`,
-                            })}
+                        {currentTray === TRAYS.IMAGES && (
+                          <section
+                            className="container"
+                            style={{ position: "relative" }}
                           >
-                            <input {...getInputProps()} />
-                            {isDragActive && (
-                              <div className="drag-overlay">
-                                <p>Suelta las imágenes aquí</p>
-                              </div>
-                            )}
-                            <aside>{thumbs()}</aside>
-                          </div>
-                          {state.images_values?.values.length === 0 && (
                             <div
-                              style={{
-                                position: "absolute",
-                                top: "50%",
-                                left: "50%",
-                                transform: "translate(-50%, -50%)",
-                                textAlign: "center",
-                                padding: "40px",
-                                width: "80%",
-                                maxWidth: "500px",
-                                fontFamily: "Arial, sans-serif",
-                              }}
+                              {...getRootProps({
+                                className: `dropzone ${
+                                  isDragActive ? "drag-active" : ""
+                                }`,
+                              })}
                             >
-                              <p
+                              <input {...getInputProps()} />
+                              {isDragActive && (
+                                <div className="drag-overlay">
+                                  <p>Suelta las imágenes aquí</p>
+                                </div>
+                              )}
+                              <aside>{thumbs()}</aside>
+                            </div>
+                            {state.images_values?.values?.length === 0 && (
+                              <div
                                 style={{
-                                  fontSize: "18px",
-                                  color: "#666",
-                                  marginBottom: "16px",
+                                  position: "absolute",
+                                  top: "50%",
+                                  left: "50%",
+                                  transform: "translate(-50%, -50%)",
+                                  textAlign: "center",
+                                  padding: "40px",
+                                  width: "80%",
+                                  maxWidth: "500px",
+                                  fontFamily: "Arial, sans-serif",
                                 }}
                               >
-                                Este producto no tiene imágenes
-                              </p>
-                              {isAuditorAssigned() ||
-                              isUserAssignedToService() ? (
                                 <p
                                   style={{
-                                    fontSize: "14px",
-                                    color: "#999",
-                                    marginBottom: "20px",
+                                    fontSize: "18px",
+                                    color: "#666",
+                                    marginBottom: "16px",
                                   }}
                                 >
-                                  Arrastra las imágenes aquí o{" "}
-                                  <span
-                                    onClick={open}
+                                  Este producto no tiene imágenes
+                                </p>
+                                {isAuditorAssigned() ||
+                                isUserAssignedToService() ? (
+                                  <p
                                     style={{
-                                      color: "#007bff",
-                                      cursor: "pointer",
-                                      textDecoration: "underline",
+                                      fontSize: "14px",
+                                      color: "#999",
+                                      marginBottom: "20px",
                                     }}
                                   >
-                                    haz clic para abrir el explorador de
-                                    archivos
-                                  </span>
-                                </p>
-                              ) : null}
-                            </div>
-                          )}
-                        </section>
+                                    Arrastra las imágenes aquí o{" "}
+                                    <span
+                                      onClick={open}
+                                      style={{
+                                        color: "#007bff",
+                                        cursor: "pointer",
+                                        textDecoration: "underline",
+                                      }}
+                                    >
+                                      haz clic para abrir el explorador de
+                                      archivos
+                                    </span>
+                                  </p>
+                                ) : null}
+                              </div>
+                            )}
+                          </section>
+                        )}
                       </>
                     ) : (
                       <ScreenHeader