contentoh-components-library 21.6.50 → 21.6.51

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import axios from "axios";
 import { useDropzone } from "react-dropzone";
@@ -30,8 +30,6 @@ 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";
@@ -41,14 +39,12 @@ 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";
@@ -105,19 +101,62 @@ 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,
@@ -126,8 +165,6 @@ const RetailerProductEditionView = ({
     saveDescriptions,
     updateImages,
     deleteImages,
-    saveAssets,
-    registerUploadedAssets,
     handleOnDownloadImages,
     createComment,
   } = useProviderProductEdition();
@@ -161,6 +198,7 @@ const RetailerProductEditionView = ({
   const [variantGroup, setVariantGroup] = useState(null);
   const [showGroup, setShowGroup] = useState(false);
   const [showGroupModal, setShowGroupModal] = useState(false);
+
   // Qué vínculo se está por romper, o null si no hay diálogo abierto. Guarda al
   // HIJO, que es quien lleva la relación y lo que pide la acción `unlink`.
   const [porDesvincular, setPorDesvincular] = useState(null);
@@ -266,54 +304,6 @@ 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,
@@ -356,7 +346,6 @@ const RetailerProductEditionView = ({
         updateApprovedInputsImages={(item) =>
           console.log("updateApprovedInputsImages", item)
         }
-        onSelect={() => handleOnChangeCurrentImage(index)}
       />
     ));
   };
@@ -623,6 +612,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",
@@ -631,7 +626,7 @@ const RetailerProductEditionView = ({
           descriptions: services[1],
           images: {
             ...services[2],
-            values: orderedValues,
+            values: orderedValuesWithThumbs,
           },
         },
       });
@@ -648,12 +643,7 @@ const RetailerProductEditionView = ({
       // Setear inputs del retailer activo directamente (evita cascada)
       dispatch({
         type: "SET_DATASHEETS_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 ?? {}],
+        payload: [datasheetsActiveRetailer, services[0].inputs],
       });
 
       dispatch({
@@ -665,23 +655,10 @@ const RetailerProductEditionView = ({
         type: "SET_IMAGES_VALUES",
         payload: {
           ...services[2],
-          values: filteredValues,
+          values: filteredValuesWithThumbs,
         },
       });
 
-      /*
-        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",
@@ -827,8 +804,7 @@ 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());
 
     return canEvaluateAsFacilitator || canEvaluateAsAuditor;
   };
@@ -849,29 +825,7 @@ 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`.
@@ -909,7 +863,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);
@@ -949,6 +903,20 @@ const RetailerProductEditionView = ({
     ? !!state.product?.parentArticleId
     : !!family?.parent;
 
+  /*
+    Un hijo no se agrupa como variante (decisión de producto, 2026-09-25).
+
+    Agrupar declara «estos son el mismo producto en otra presentación», y un
+    hijo ya declaró de dónde deriva. El servidor lo rechaza con
+    VARIANT_GROUP_NOT_FOR_CHILD, así que ofrecer el botón sería ofrecer algo
+    que siempre falla.
+
+    Se apoya en `esHijoDeOtro` y no en `state.product` porque en esta pantalla
+    el producto sale de sessionStorage: la señal buena es la familia recién
+    consultada, con el producto solo como respaldo si esa consulta falló.
+  */
+  const puedeAgruparse = !esHijoDeOtro;
+
   /*
     Abre otro producto de la familia.
 
@@ -985,9 +953,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 });
 
@@ -996,7 +964,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) {
@@ -1006,7 +974,7 @@ const RetailerProductEditionView = ({
             ...guardado,
             variantsCount: updatedProduct.variantsCount,
             parentArticleId: updatedProduct.parentArticleId ?? null,
-          }),
+          })
         );
       }
     } catch (error) {
@@ -1047,7 +1015,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);
@@ -1070,7 +1038,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);
@@ -1105,7 +1073,7 @@ const RetailerProductEditionView = ({
         {
           params: { filterByIdArticle: articleId, includeFilters: false },
           headers: { Authorization: token },
-        },
+        }
       );
 
       // read-order-services responde { total, data: [...] }. La vista trae una
@@ -1113,12 +1081,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;
       }
@@ -1131,7 +1099,7 @@ const RetailerProductEditionView = ({
           ArticleId: encontrado.article.id_article,
           categoryId: encontrado.article.id_article,
           product: [encontrado],
-        }),
+        })
       );
 
       window.location.assign("/EditProducts");
@@ -1156,8 +1124,7 @@ const RetailerProductEditionView = ({
         ? {
             ...state.product,
             variantsCount:
-              (state.product?.variantsCount ?? 0) +
-              (result.linked ?? []).length,
+              (state.product?.variantsCount ?? 0) + (result.linked ?? []).length,
           }
         : {
             ...state.product,
@@ -1181,7 +1148,7 @@ const RetailerProductEditionView = ({
     */
     try {
       const guardado = JSON.parse(
-        sessionStorage.getItem("productSelected") ?? "null",
+        sessionStorage.getItem("productSelected") ?? "null"
       );
 
       if (guardado) {
@@ -1191,7 +1158,7 @@ const RetailerProductEditionView = ({
             ...guardado,
             variantsCount: updatedProduct.variantsCount,
             parentArticleId: updatedProduct.parentArticleId ?? null,
-          }),
+          })
         );
       }
     } catch (error) {
@@ -1233,10 +1200,7 @@ 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";
@@ -1250,7 +1214,7 @@ const RetailerProductEditionView = ({
             ? { descriptions: [Number(attributeId)] }
             : { attributes: [Number(attributeId)] }),
         },
-        { headers: { Authorization: token } },
+        { headers: { Authorization: token } }
       );
 
       const data = readPayload(res);
@@ -1377,7 +1341,20 @@ const RetailerProductEditionView = ({
           return;
         }
 
-        const hijos = (familia.variants ?? []).filter((v) => !v.isCurrent);
+        /*
+          Un HIJO no propaga a nadie, y hay que decirlo explícitamente.
+
+          `familia.variants` mira la familia desde el PADRE —eso es lo correcto
+          para navegar entre hermanos— así que desde la ficha de un hijo esa
+          lista son sus HERMANOS. Leerla como «los destinos de este producto»
+          hacía que el diálogo le ofreciera heredar a sus hermanos. El servidor
+          resolvía los destinos por su cuenta y no escribía nada, de modo que el
+          usuario elegía, guardaba, y no pasaba nada: un no-operativo silencioso.
+        */
+        const esHijo = !!familia?.parent;
+        const hijos = esHijo
+          ? []
+          : (familia.variants ?? []).filter((v) => !v.isCurrent);
 
         /*
           También cuentan las compañeras de grupo: un producto puede no tener
@@ -1385,10 +1362,12 @@ 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
         );
 
-        if (hijos.length > 0 || companeras.length > 0) {
+        // Un hijo tampoco puede estar agrupado desde 2026-09-25, así que para
+        // él no queda ningún destino posible.
+        if (!esHijo && (hijos.length > 0 || companeras.length > 0)) {
           setPendingPropagation({ cambios });
           return;
         }
@@ -1397,16 +1376,6 @@ 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:
@@ -1430,98 +1399,7 @@ 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",
@@ -2235,25 +2113,7 @@ const RetailerProductEditionView = ({
       </Container>
     );
 
-  /*
-    `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
-  )
+  if (state.loading || !state.services || !state.product)
     return (
       <>
         <ProductEditionSkeleton />
@@ -2271,9 +2131,13 @@ const RetailerProductEditionView = ({
         {pendingPropagation && (
           <PropagateChangesModal
             changedAttributes={pendingPropagation.cambios}
-            variants={(family?.variants ?? []).filter((v) => !v.isCurrent)}
+            variants={
+              esHijoDeOtro
+                ? []
+                : (family?.variants ?? []).filter((v) => !v.isCurrent)
+            }
             groupMembers={(variantGroup?.members ?? []).filter(
-              (m) => !m.isCurrent,
+              (m) => !m.isCurrent
             )}
             groupCode={variantGroup?.group ?? null}
             saving={state.saving}
@@ -2490,18 +2354,8 @@ 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}
@@ -2688,6 +2542,7 @@ const RetailerProductEditionView = ({
                 herencia y tiene jerarquía; esto es solo un código compartido
                 que dice "estos son el mismo producto en otra presentación".
                 Juntarlos haría creer que agrupar hereda algo, que no pasa. */}
+            {puedeAgruparse && (
             <div className="variants-actions">
               <button
                 type="button"
@@ -2709,8 +2564,9 @@ const RetailerProductEditionView = ({
                 </button>
               )}
             </div>
+            )}
 
-            {showGroup && variantGroup?.group && (
+            {puedeAgruparse && showGroup && variantGroup?.group && (
               <div className="variants-family">
                 {(variantGroup.members ?? [])
                   .filter((miembro) => !miembro.isCurrent)
@@ -2807,13 +2663,7 @@ const RetailerProductEditionView = ({
               setShowVersionSelector={setShowVersionSelector}
               // setSelectedImages={setSelectedImages} prop pasada asi: FullTabsMenu -> TabsMenu Pero en TabsMenu no se espera ninguna prop setSelectedImages
               // actions
-              // 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
-              }
+              downloadImages={handleOnDownloadImages}
               askToDeleteImages={handleOnAskToDeleteImages}
               showSaveButton={isAuditorAssigned() || isUserAssignedToService()}
               onClickSave={handleOnClickSave}
@@ -2891,36 +2741,7 @@ const RetailerProductEditionView = ({
                   {state.active_tab === "Imágenes" &&
                     (state.product?.images_status !== "NS" ? (
                       <>
-                        {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 && (
+                        {!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"
@@ -2928,76 +2749,74 @@ const RetailerProductEditionView = ({
                             // shotThd={shotThd} // No se usa?
                           />
                         )}
-                        {currentTray === TRAYS.IMAGES && (
-                          <section
-                            className="container"
-                            style={{ position: "relative" }}
+                        <section
+                          className="container"
+                          style={{ position: "relative" }}
+                        >
+                          <div
+                            {...getRootProps({
+                              className: `dropzone ${
+                                isDragActive ? "drag-active" : ""
+                              }`,
+                            })}
                           >
+                            <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
-                              {...getRootProps({
-                                className: `dropzone ${
-                                  isDragActive ? "drag-active" : ""
-                                }`,
-                              })}
+                              style={{
+                                position: "absolute",
+                                top: "50%",
+                                left: "50%",
+                                transform: "translate(-50%, -50%)",
+                                textAlign: "center",
+                                padding: "40px",
+                                width: "80%",
+                                maxWidth: "500px",
+                                fontFamily: "Arial, sans-serif",
+                              }}
                             >
-                              <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
+                              <p
                                 style={{
-                                  position: "absolute",
-                                  top: "50%",
-                                  left: "50%",
-                                  transform: "translate(-50%, -50%)",
-                                  textAlign: "center",
-                                  padding: "40px",
-                                  width: "80%",
-                                  maxWidth: "500px",
-                                  fontFamily: "Arial, sans-serif",
+                                  fontSize: "18px",
+                                  color: "#666",
+                                  marginBottom: "16px",
                                 }}
                               >
+                                Este producto no tiene imágenes
+                              </p>
+                              {isAuditorAssigned() ||
+                              isUserAssignedToService() ? (
                                 <p
                                   style={{
-                                    fontSize: "18px",
-                                    color: "#666",
-                                    marginBottom: "16px",
+                                    fontSize: "14px",
+                                    color: "#999",
+                                    marginBottom: "20px",
                                   }}
                                 >
-                                  Este producto no tiene imágenes
-                                </p>
-                                {isAuditorAssigned() ||
-                                isUserAssignedToService() ? (
-                                  <p
+                                  Arrastra las imágenes aquí o{" "}
+                                  <span
+                                    onClick={open}
                                     style={{
-                                      fontSize: "14px",
-                                      color: "#999",
-                                      marginBottom: "20px",
+                                      color: "#007bff",
+                                      cursor: "pointer",
+                                      textDecoration: "underline",
                                     }}
                                   >
-                                    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>
-                        )}
+                                    haz clic para abrir el explorador de
+                                    archivos
+                                  </span>
+                                </p>
+                              ) : null}
+                            </div>
+                          )}
+                        </section>
                       </>
                     ) : (
                       <ScreenHeader