contentoh-components-library 21.6.57 → 21.6.59

package/src/components/pages/CreatorsProductEdition/hooks/useCreatorsProductEdition.js

@@ -0,0 +1,2238 @@
+/**
+ * Lógica de la edición de producto de Creators.
+ *
+ * COPIA LITERAL de `RetailerProductEdition/index.js` (commit ff06fba), líneas
+ * 122-317, 365-2182 y 2309-2320: todo lo que no es JSX. Se copió en vez de
+ * compartirse porque la vista actual no se puede tocar. Consecuencia: un fix
+ * en RetailerProductEdition hay que portarlo aquí a mano. Para ver qué cambió
+ * desde la copia:
+ *
+ *   git diff ff06fba -- src/components/pages/RetailerProductEdition/index.js
+ *
+ * Lo único que no se copió: `thumbs` (JSX de la galería, vive en la vista) y
+ * el skeleton. El botón de "comentario revisado" se dejó fuera a propósito:
+ * en el original llama a `commentRevised()`, que no existe.
+ */
+import { useEffect, useRef, useState } from "react";
+
+import axios from "axios";
+import { useDropzone } from "react-dropzone";
+import { saveAs } from "file-saver";
+
+import { useProviderProductEdition } from "../../RetailerProductEdition/context/provider-product-edition.context";
+import { getMinorStatusFromRetailer } from "../../RetailerProductEdition/context/reducers/product";
+import {
+  normalizeProduct,
+  getConceptByTab,
+  getAuditVersion,
+  getInputsData,
+  createMessage,
+  sendMessage,
+  translateConcept,
+  getStatusArrayForUser,
+  getConceptsByRole,
+  buildCollaboratorAssignations,
+  calculateRequiredNull,
+} from "../../RetailerProductEdition/utils";
+import generateThumbnail from "../../RetailerProductEdition/generateThumnail";
+
+import {
+  fetchUsers,
+  getPercentage,
+  getRetailerServices,
+  getServicesData,
+} from "../../../../global-files/data";
+import { useDigitalAssets } from "../../../../global-files/digital-assets/useDigitalAssets";
+
+import { TRAYS } from "../../../molecules/GalleryTrayTabs";
+import { soloPropagables } from "../../../organisms/PropagateChangesModal/non-propagable";
+import { readPayload } from "../../../organisms/LinkVariantsModal/api";
+
+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 attributesSent from "../../../../assets/images/modalsSVGs/attributesSent.svg";
+import descriptionSent from "../../../../assets/images/modalsSVGs/descriptionSent.svg";
+import imagesSent from "../../../../assets/images/modalsSVGs/uploadingImages.svg";
+
+
+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);
+  });
+}
+
+export const useCreatorsProductEdition = ({
+  tabsSections,
+  productSelected = {},
+  user = {},
+  token,
+  location,
+  enableDigitalAssets = false,
+}) => {
+  const {
+    state,
+    dispatch,
+    saveDatasheets,
+    saveDescriptions,
+    updateImages,
+    deleteImages,
+    saveAssets,
+    registerUploadedAssets,
+    handleOnDownloadImages,
+    createComment,
+  } = useProviderProductEdition();
+
+  const isRetailer = user?.is_retailer;
+
+  /*
+    El original usaba `useCloseModal("version-selector")`: cierra con cualquier
+    clic cuyo destino no esté dentro de `#version-selector`. En el diálogo de
+    nueva versión, el botón de «Versión personalizada» desaparece al cambiar de
+    paso antes de que llegue ese clic al documento, así que parecía un clic
+    fuera y se cerraba todo. El Drawer de `VersionDrawer` ya se cierra al tocar
+    fuera o con Escape.
+  */
+  const [showVersionSelector, setShowVersionSelector] = useState(false);
+  const [auditableVersion, setAuditableVersion] = useState(null);
+  const [headerTop, setHeaderTop] = useState(0);
+  const [shotThd, setShotThd] = useState(false);
+  const [observation, setObservation] = useState();
+  const [showRejectModal, setShowRejectModal] = useState(false);
+  const [isObservationVisible, setObservationVisible] = useState(false);
+  const [imageLayout, setImageLayout] = useState(false);
+  const [crossComment, setCrossComment] = useState(false);
+  const [statusArray, setStatusArray] = useState([]);
+  const [rejectAll, setRejectAll] = useState(false);
+
+  // Padre/hijo: mismo comportamiento que la ficha de la aplicación de clientes.
+  const [showLinkVariants, setShowLinkVariants] = useState(false);
+  const [family, setFamily] = useState(null);
+  const [showFamily, setShowFamily] = useState(false);
+  const [loadingVariant, setLoadingVariant] = useState(null);
+
+  /*
+    Agrupación de variantes. Aparte del padre/hijo a propósito: son mecanismos
+    independientes y un producto puede tener los dos. Padre/hijo es herencia;
+    esto es solo un código compartido.
+  */
+  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);
+  // Por qué un salto no se pudo hacer. Vive aparte de `family.error` porque no
+  // es un fallo al leer la familia, sino al abrir uno de sus miembros.
+  const [avisoFamilia, setAvisoFamilia] = useState(null);
+  const [pendingPropagation, setPendingPropagation] = useState(null);
+  const [preparandoPropagacion, setPreparandoPropagacion] = useState(false);
+
+  const [auditServices, setAuditServices] = useState([]);
+  const [auditDatasheets, setAuditDatasheets] = useState([]);
+  const [auditDescriptions, setAuditDescriptions] = useState([]);
+  const [showModal, setShowModal] = useState(false);
+
+  const [compare, setCompare] = useState(false);
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    accept: "image/*, video/mp4",
+    noKeyboard: true,
+    multiple: true,
+    noClick: true,
+    onDrop: (acceptedFiles) => {
+      acceptedFiles.map((file) => {
+        const reader = new FileReader();
+        reader.fileName = file.name;
+
+        reader.onload = async function (e) {
+          const fileName = e.target.fileName;
+          const fileExtension = fileName.split(".").pop();
+          const fileDataURL = e.target.result;
+
+          const img = new Image();
+
+          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;
+            const newImg = {
+              src: fileDataURL,
+              name: fileName,
+              ext: fileExtension,
+              width: width,
+              height: height,
+              video_src: "",
+              isApproved: true, // VALIDAR QUE SOLO SEA PARA RADIOSHACK
+            };
+
+            dispatch({
+              type: "ADD_IMAGE_VALUE",
+              payload: newImg,
+            });
+          };
+        };
+
+        reader.onerror = function (error) {
+          console.error("dropzoneError: ", error);
+        };
+
+        reader.readAsDataURL(file);
+        return file;
+      });
+    },
+  });
+
+  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 initializeProduct = async () => {
+    try {
+      const product = productSelected
+        ? productSelected
+        : JSON.parse(sessionStorage.getItem("productSelected"));
+
+      const productNormalized = normalizeProduct(product);
+
+
+      dispatch({
+        type: "SET_PRODUCT",
+        payload: productNormalized,
+      });
+      dispatch({
+        type: "SET_ACTIVE_RETAILER",
+        payload: productNormalized.categoryRetailerInOrder[0],
+      });
+      setShotThd(
+        [58, 59, 60, 61].includes(
+          productNormalized.categoryRetailerInOrder[0].id_retailer,
+        ),
+      );
+
+      // Los estatus evaluables salen del rol UNIDO a la asignación. Solo por
+      // rol, quien produce y además audita no tenía 'AC' en la lista y el
+      // envío se quedaba sin nada que mandar.
+      setStatusArray(getStatusArrayForUser(user, productNormalized));
+
+      // Cargar usuarios y asignaciones
+      const users = await fetchUsers(token);
+      if (users.length > 0) {
+        dispatch({
+          type: "SET_COLLABORATOR_ASSIGNATIONS",
+          payload: buildCollaboratorAssignations(productNormalized, users),
+        });
+      }
+
+      const { id_article } = productNormalized;
+      if (id_article) {
+        // Aislado: si version-manager falla (p. ej. CORS) no debe impedir
+        // que se cargue la observación de abajo.
+        try {
+          await getAuditVersion(id_article, setAuditableVersion, token);
+        } catch (auditError) {
+          console.warn(
+            "No se pudo obtener la versión auditable:",
+            auditError.message,
+          );
+        }
+      }
+
+      if (id_article && productNormalized.id_order) {
+        const response = await axios.get(
+          process.env.REACT_APP_READ_OBSERVATION,
+          {
+            params: {
+              articleId: id_article,
+              orderId: productNormalized.id_order,
+            },
+            headers: {
+              Authorization: sessionStorage.getItem("jwt"),
+            },
+          },
+        );
+        const parseData = JSON.parse(response.data.body).data[0];
+        setObservation(parseData.observations);
+      }
+    } catch (error) {
+      console.error("Error setting product data: ", error);
+    }
+  };
+
+  // Setter del producto y carga inicial (optimizado para evitar cascada)
+  useEffect(() => {
+    initializeProduct();
+  }, []);
+
+  const loadAuditableData = async () => {
+    const auditServices = await getRetailerServices(
+      state.product?.id_article,
+      state.product?.categoryName,
+      parseInt(state.product?.id_category),
+      auditableVersion.version,
+      token,
+    );
+    // getRetailerServices puede devolver undefined si falla; no seguimos.
+    if (!Array.isArray(auditServices)) return;
+    getInputsData(
+      auditServices,
+      { id: state.active_retailer.id_retailer },
+      setAuditDatasheets,
+      setAuditDescriptions,
+    );
+    setAuditServices(auditServices);
+  };
+
+  useEffect(() => {
+    if (auditableVersion) {
+      loadAuditableData();
+    }
+  }, [auditableVersion]);
+
+  const loadData = async (enableLoading = true, versionSelected = null) => {
+    try {
+      if (enableLoading) dispatch({ type: "SET_LOADING", payload: true });
+      dispatch({ type: "SET_ERRORS", payload: [] });
+
+      const { id_article, version, id_order } = state.product;
+      const { category, id_category, id_retailer } = state.active_retailer;
+
+      // Payloads y headers
+      const data = [
+        {
+          id_article,
+          version: versionSelected ? versionSelected : version,
+          relations: [
+            {
+              id_retailer,
+              id_category,
+            },
+          ],
+        },
+      ];
+
+      const headers = { Authorization: token };
+
+      const [services, percentagesRes, servicesDataRes, commentsResponse] =
+        await Promise.all([
+          getRetailerServices(
+            id_article,
+            category,
+            id_category,
+            versionSelected ?? version,
+            token,
+            id_retailer,
+          ),
+          getPercentage({ data, headers }),
+          getServicesData({
+            articleId: id_article,
+            orderId: id_order,
+            end: true,
+            token,
+          }),
+          // Obtener comentarios en paralelo
+          Promise.all([
+            axios.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
+              params: {
+                articleId: id_article,
+                concept: "description",
+                orderIdColab: id_order,
+                version: versionSelected ?? version,
+              },
+            }),
+            axios.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
+              params: {
+                articleId: id_article,
+                concept: "datasheet",
+                orderIdColab: id_order,
+                version: versionSelected ?? version,
+              },
+            }),
+            axios.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
+              params: {
+                articleId: id_article,
+                concept: "images",
+                orderIdColab: id_order,
+                version: versionSelected ?? version,
+              },
+            }),
+          ]),
+        ]);
+
+      // getRetailerServices se traga sus errores y devuelve undefined cuando
+      // alguna de sus llamadas falla. Si eso pasa, validamos aquí para lanzar
+      // un error controlado en vez de reventar más abajo en services[2]/services[0]
+      // y dejar la pantalla colgada en el skeleton para siempre.
+      if (!Array.isArray(services) || services.length < 3 || !services[2]) {
+        throw new Error(
+          "No se pudieron cargar los servicios del producto. Inténtalo de nuevo.",
+        );
+      }
+
+      dispatch({
+        type: "SET_RETAILER_STATUS",
+        payload: servicesDataRes.map((service) => ({
+          retailer_id: service?.id_retailer,
+          service: service?.service,
+          status: service?.status,
+          task_user_group_id: service?.task_user_group_id,
+        })),
+      });
+
+      // Extraer relaciones del response. getPercentage se traga sus errores y
+      // devuelve undefined (p. ej. si CORS bloquea el endpoint), así que el
+      // JSON.parse va protegido para no tumbar toda la carga.
+      let percentages = [];
+      try {
+        percentages =
+          JSON.parse(percentagesRes?.[0]?.body)?.[0]?.relations ?? [];
+      } catch (e) {
+        console.warn("No se pudieron parsear los porcentajes:", e.message);
+      }
+
+      // Procesar comentarios
+      let commentsMap = {};
+      commentsResponse.forEach((commentRes) => {
+        const commentData = JSON.parse(commentRes?.data?.body).data[0];
+        if (commentData) {
+          const tab = translateConcept(commentData.concept);
+          commentsMap[tab] = commentData;
+        }
+      });
+      dispatch({ type: "SET_COMMENTS", payload: commentsMap });
+
+
+      // Ordenamiento de imágenes
+      const orderMap = services[2].inputsByRetailer
+        .flat()
+        .reduce((acc, item) => {
+          acc[item.id_image] = item.order;
+          return acc;
+        }, {});
+
+      const orderedValues = [...services[2].values].sort((a, b) => {
+        const orderA = orderMap[a.image_id] ?? Number.MAX_SAFE_INTEGER;
+        const orderB = orderMap[b.image_id] ?? Number.MAX_SAFE_INTEGER;
+        return orderA - orderB;
+      });
+
+      // Procesamiento de inputs del retailer activo (evita cascada con state.services)
+      // El retailer activo puede no traer datasheets; usamos data vacía como fallback
+      // para no reventar en Object.values(undefined).
+      const retailerDatasheets = services[0]?.[id_retailer];
+      const datasheetsActiveRetailer = {
+        ...retailerDatasheets,
+        data: Object.values(retailerDatasheets?.data ?? {}),
+      };
+
+      const descriptionsActiveRetailer = services[1].filter(
+        (item) => item.id === id_retailer,
+      );
+
+      /**
+       * El id del retailer activo viene con dos nombres según de dónde salga:
+       * `categoryRetailerInOrder` lo trae como `id_retailer`, mientras que los
+       * retailers de `read-data-images` lo traen como `id`. Si se compara solo
+       * contra uno, al cambiar de cadena el otro queda `undefined`, la
+       * comparación es siempre falsa y `filteredValues` sale vacío — la imagen
+       * existe, el backend la devuelve, y aun así no se pinta ninguna.
+       */
+      const activeRetailerId = id_retailer ?? state.active_retailer?.id;
+
+      const filteredValues = services[2].values.filter((value) => {
+        return services[2].inputsByRetailer.some((retailerInput) =>
+          retailerInput.some(
+            (input) =>
+              Number(input.id_retailer) === Number(activeRetailerId) &&
+              Number(input.id_image) === Number(value.image_id),
+          ),
+        );
+      });
+
+      // Dispatch consolidado
+      dispatch({
+        type: "SET_SERVICES",
+        payload: {
+          datasheets: services[0],
+          descriptions: services[1],
+          images: {
+            ...services[2],
+            values: orderedValues,
+          },
+        },
+      });
+
+      dispatch({ type: "SET_PERCENTAGES", payload: percentages });
+      dispatch({
+        type: "SET_ACTIVE_PERCENTAGES",
+        payload: percentages.find(
+          ({ id_retailer: rId }) => rId === id_retailer,
+        ),
+      });
+      dispatch({ type: "SET_SERVICES_DATA", payload: servicesDataRes });
+
+      // 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 ?? {}],
+      });
+
+      dispatch({
+        type: "SET_DESCRIPTIONS_INPUTS",
+        payload: descriptionsActiveRetailer,
+      });
+
+      dispatch({
+        type: "SET_IMAGES_VALUES",
+        payload: {
+          ...services[2],
+          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",
+        payload: calculateRequiredNull(services, servicesDataRes, id_retailer),
+      });
+
+      // Auditable
+      if (auditableVersion && id_retailer) {
+        loadAuditableData();
+      }
+    } catch (error) {
+      console.error("Error loading data: ", error);
+      dispatch({ type: "SET_ERRORS", payload: [error.message] });
+    } finally {
+      dispatch({ type: "SET_LOADING", payload: false });
+    }
+  };
+
+  useEffect(() => {
+    if (state.active_retailer) {
+      loadData();
+    }
+  }, [state.active_retailer]);
+
+  const handleOnChangeCurrentImage = (index) => {
+    if (typeof index === "number") {
+      dispatch({ type: "SET_CURRENT_IMAGE", payload: index });
+    } else if (typeof index === "object") {
+      dispatch({ type: "CHANGE_ATTR_VALUE", payload: index });
+    }
+  };
+
+  const handleOnShowModalGallery = () => {
+    dispatch({
+      type: "SET_ACTIVE_TAB",
+      payload: "Imágenes",
+    });
+    setShowModal(true);
+  };
+
+  const handleOnChangeActiveRetailer = (retailer) => {
+    dispatch({
+      type: "SET_ACTIVE_RETAILER",
+      payload: retailer,
+    });
+  };
+
+  const handleOnChangeActiveTab = (tab) => {
+    dispatch({
+      type: "SET_ACTIVE_TAB",
+      payload: tab,
+    });
+  };
+
+  const handleOnToggleImageLayout = () => {
+    setImageLayout(!imageLayout);
+  };
+
+  const handleOnToggleObservation = () => {
+    setObservationVisible(!isObservationVisible);
+  };
+
+  const handleOnHideObservation = () => {
+    setObservationVisible(false);
+  };
+
+  const isAuditorAssigned = () => {
+    return state.product?.id_auditor === user?.id_user;
+  };
+
+  /**
+   * ¿Ocupo este slot EN ESTE producto?
+   *
+   * La calidad en la que actúas sale de la ASIGNACIÓN, no del rol. Con la
+   * estructura nueva de Creators, quien produce un servicio también lo valida:
+   * un especialista de textos puede ser el auditor del mismo producto y tiene
+   * que recorrer las dos fases, AS -> AC como especialista y AC -> AA como QA.
+   */
+  const isAssignedAs = (rol, concept) => {
+    const assigned = state.product?.[`id_${concept}_${rol}`];
+    return !!assigned && assigned === user?.id_user;
+  };
+
+  const isUserAssignedToService = (tab, rol) => {
+    const concept = getConceptByTab(state.active_tab);
+
+    const allowedRoles = [1, 4, 5, 6, 7, 8];
+    const validUser = allowedRoles.includes(user?.id_role);
+
+    const isAdmin = user.id_role === 1;
+    if (isAdmin) return true;
+
+    // Sin `rol` explícito se prueba por asignación, no por rol. Antes se
+    // infería del `id_role`: un rol 6 caía en `id_<concept>_undefined` —columna
+    // inexistente, siempre falso— y un rol 7 solo podía ser especialista, nunca
+    // auditor. Es el mismo defecto que se corrigió en el backend.
+    const isAssigned = rol
+      ? isAssignedAs(rol, concept)
+      : isAssignedAs("especialist", concept) ||
+        isAssignedAs("facilitator", concept);
+
+    return isAssigned && validUser;
+  };
+
+  const canShowSingleEvaluationButtons = (action) => {
+    let concept = getConceptByTab(action || state.active_tab);
+
+    const retailerStatus = state.services_data
+      ?.find(
+        (srv) =>
+          srv.id_retailer === state.active_retailer?.id_retailer &&
+          srv.service === concept,
+      )
+      ?.status?.replace(/.*\//, "");
+
+    // Se SUMA la vía por asignación a la que ya había por rol; no la
+    // reemplaza. Así los coordinadores y el administrador conservan su acceso
+    // tal cual, y el especialista que además es auditor alcanza la segunda fase.
+    const canEvaluateAsFacilitator =
+      retailerStatus === "IE" &&
+      ([1, 4, 5].includes(user.id_role) ||
+        isAssignedAs("facilitator", concept));
+
+    const canEvaluateAsAuditor =
+      ["AC", "RP", "RCA", "SAC"].includes(retailerStatus) &&
+      ([1, 6].includes(user.id_role) || isAuditorAssigned());
+
+    // Los roles 7 y 8 también pueden validar/rechazar lo que está en AC.
+    const canEvaluateAC =
+      retailerStatus === "AC" && [7, 8].includes(user.id_role);
+
+    return canEvaluateAsFacilitator || canEvaluateAsAuditor || canEvaluateAC;
+  };
+
+  const canShowBulkEvaluationButtons = () => {
+    const concepts = getConceptsByRole(user.id_role);
+
+    const services = state.services_data.filter(({ service }) =>
+      concepts.includes(service),
+    );
+
+    const canEvaluateAsFacilitator =
+      services.every((srv) => srv?.status?.replace(/.*\//, "") === "IE") &&
+      ([1, 4, 5].includes(user.id_role) ||
+        services.some(({ service }) => isAssignedAs("facilitator", service)));
+
+    const canEvaluateAsAuditor =
+      state.services_data.every((srv) =>
+        ["AC", "RP", "RCA"].includes(srv?.status?.replace(/.*\//, "")),
+      ) &&
+      ([1, 6].includes(user.id_role) || isAuditorAssigned());
+
+    const canEvaluateAC =
+      services.length > 0 &&
+      services.every((srv) => srv?.status?.replace(/.*\//, "") === "AC") &&
+      [7, 8].includes(user.id_role);
+
+    return canEvaluateAsFacilitator || canEvaluateAsAuditor || canEvaluateAC;
+  };
+
+  const getStatusByCurrentServiceAndRetailer = () => {
+    const { statusByRetailer } = state.product;
+    if (!statusByRetailer) return "-";
+
+    const currentService = getConceptByTab(state.active_tab);
+    const currentRetailer = state.active_retailer.id_retailer;
+    const currentStatus =
+      statusByRetailer.filter(
+        (item) =>
+          item.retailer_id === currentRetailer &&
+          item.service === currentService,
+      )[0]?.status || "-";
+
+    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`.
+       *
+       * `saveImageAttrs` manda `articleData: []` fijo, así que las imágenes
+       * nuevas nunca llegaban al backend: el archivo se subía a S3 —eso lo hace
+       * el front por su cuenta— pero `saveImages` no se ejecutaba y la fila de
+       * `rel_article_image` nunca se creaba. Como la pantalla lee de esa tabla,
+       * la imagen no aparecía después de guardar.
+       *
+       * `updateImages` cubre las dos cosas: manda `attrReqImgs` con los
+       * atributos requeridos y además `articleData` con las imágenes nuevas y
+       * `updateImages` con las existentes. Es la misma función que ya usaba el
+       * botón de guardar del menú de pestañas (`handleOnClickSave`), así que
+       * ambos caminos quedan consistentes.
+       */
+      await updateImages(token);
+      // Recargar para que la pantalla refleje lo que quedó guardado, igual que
+      // `handleOnClickSave`. Sin esto el estado local se queda con la imagen sin
+      // su `id` de base de datos: la vista no muestra lo persistido y, al volver
+      // a guardar, el front la manda otra vez como nueva y el backend la omite
+      // por duplicada — así que el `src` nunca se actualizaba.
+      await loadData(false);
+    }
+  };
+
+  /*
+    Trae la familia: los hijos del producto, o sus hermanos si el abierto es
+    una de ellas. Se pide al abrir la sección y no al montar la pantalla: la
+    mayoría de los productos no son familia.
+  */
+  const loadFamily = async (forzar = false) => {
+    if (family && !forzar) return family;
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/family`,
+        { articleId: state.product?.id_article },
+        { headers: { Authorization: token } },
+      );
+      const data = readPayload(res);
+      setFamily(data);
+      return data;
+    } catch (error) {
+      console.error("loadFamily: ", error);
+      setFamily({ variants: [], parent: null, error: true });
+      return null;
+    }
+  };
+
+  /*
+    En Creators el parentesco se pregunta, no viene con el producto.
+
+    Su listado sale del endpoint de reportes, que no trae `variantsCount` ni
+    `parentArticleId`: esas columnas se agregaron a las vistas pero DynamoDB no
+    las tiene hasta que se corra el recorrido de datos. Y aunque las tuviera,
+    dependería de lo actualizado que esté ese recorrido.
+
+    Preguntar a `family` cuesta una llamada por ficha y da el dato de la base, no
+    de una copia. Además aplica el alcance del perfil (§5.1): al equipo interno le
+    devuelve los productos solicitados a ContentOh, que es justo lo que puede
+    tocar.
+  */
+  useEffect(() => {
+    if (!state.product?.id_article) return;
+    loadFamily(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.product?.id_article]);
+
+  // El conteo sale de la familia recién consultada, no del producto.
+  const hijosDelProducto = family?.error
+    ? 0
+    : (family?.variants ?? []).filter((v) => !v.isCurrent).length;
+
+  const esHijoDeOtro = family?.error
+    ? !!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.
+
+    Cambiar la URL no basta: esta pantalla no lee el producto de la ruta sino de
+    sessionStorage —el router hace JSON.parse(sessionStorage.productSelected) y
+    se lo pasa como prop—, así que navegar sin precargar dejaría la URL nueva
+    mostrando el producto anterior. Por eso primero se trae el destino y se
+    escriben las tres llaves que el listado escribe al hacer clic en una fila
+    (productSelected, version, productEdit), y solo entonces se navega.
+
+    Se pide a /ordered-services y no a read-articles-v2, que es lo que usa la
+    aplicación de clientes: aquel filtra por la compañía del usuario y el equipo
+    interno es de ContentOh trabajando productos de sus clientes, así que ahí no
+    devolvería nada. /ordered-services es el mismo endpoint del listado de esta
+    aplicación, así que el objeto llega con la forma exacta que normalizeProduct
+    espera —con `article` anidado, `statusByRetailer` y `categoryRetailer`—.
+
+    Un producto de la familia puede no estar en ninguna orden de trabajo: la
+    relación padre/hijo vive en `article` y no exige haber pasado por ContentOh.
+    En ese caso no hay nada que abrir aquí, y se dice en vez de navegar a una
+    pantalla que mostraría el producto equivocado.
+  */
+  /*
+    Después de desvincular, esta ficha cambia de forma: si se soltó de su padre
+    vuelve a poder ligar, y si soltó a un hijo pierde uno de la cuenta. En esta
+    pantalla el bloque de parentesco se decide con `family`, así que hay que
+    repreguntarla —vaciarla lo haría desaparecer, que es el error que ya se
+    cometió una vez aquí—.
+  */
+  const handleOnUnlinked = (result) => {
+    if (!result) return;
+
+    const updatedProduct =
+      result.mode === "self"
+        ? { ...state.product, parentArticleId: null, variantsCount: 0 }
+        : {
+            ...state.product,
+            variantsCount: Math.max((state.product?.variantsCount ?? 1) - 1, 0),
+          };
+
+    dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
+
+    // Se PARCHEA lo guardado: ahí vive el producto con la forma del listado
+    // —`article` anidado, servicios, cadenas— y escribir encima la versión
+    // aplanada de esta pantalla lo dejaría mutilado en el siguiente F5.
+    try {
+      const guardado = JSON.parse(
+        sessionStorage.getItem("productSelected") ?? "null",
+      );
+
+      if (guardado) {
+        sessionStorage.setItem(
+          "productSelected",
+          JSON.stringify({
+            ...guardado,
+            variantsCount: updatedProduct.variantsCount,
+            parentArticleId: updatedProduct.parentArticleId ?? null,
+          }),
+        );
+      }
+    } catch (error) {
+      console.error("unlinkVariant/sessionStorage: ", error);
+    }
+
+    /*
+      Si ya no queda familia, se cierra el desplegable: su botón desaparece con
+      el vínculo, y dejarlo abierto pinta una caja que dice «no tiene hijos» y
+      que nadie puede cerrar.
+    */
+    if (
+      !updatedProduct.parentArticleId &&
+      (updatedProduct.variantsCount ?? 0) === 0
+    ) {
+      setShowFamily(false);
+    }
+
+    loadFamily(true);
+
+    // Al desvincular el servidor pone `is_overridden = 0` en todas las
+    // versiones, así que los chips de herencia tienen que dejar de dibujarse.
+    // Sin `enableLoading` para no parpadear el esqueleto encima de una pantalla
+    // que ya está pintada.
+    loadData(false);
+  };
+
+  /*
+    Trae el grupo de variantes y sus miembros.
+
+    Al montar, no al abrir el desplegable: `variant_group` no lo devuelve el
+    endpoint del listado, así que sin esta llamada la ficha no sabe si el
+    producto está agrupado.
+  */
+  const loadVariantGroup = async (forzar = false) => {
+    if (variantGroup && !forzar) return variantGroup;
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/group`,
+        { articleId: state.product?.id_article },
+        { headers: { Authorization: token } },
+      );
+      const data = readPayload(res);
+      setVariantGroup(data);
+      return data;
+    } catch (error) {
+      console.error("loadVariantGroup: ", error);
+      setVariantGroup({ group: null, members: [], error: true });
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    if (!state.product?.id_article) return;
+    loadVariantGroup(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.product?.id_article]);
+
+  const handleOnLeaveGroup = async () => {
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/leave`,
+        { articleId: state.product?.id_article },
+        { headers: { Authorization: token } },
+      );
+      setVariantGroup(readPayload(res));
+      setShowGroup(false);
+    } catch (error) {
+      console.error("leaveVariantGroup: ", error);
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Variantes",
+          message: "No se pudo quitar el producto del grupo. Intenta de nuevo.",
+          image: warningIcon,
+          buttons: [
+            {
+              text: "Entendido",
+              buttonType: "general-white-button",
+              action: () =>
+                dispatch({ type: "SET_MODAL", payload: { show: false } }),
+            },
+          ],
+        },
+      });
+    }
+  };
+
+  const openFamilyMember = async (articleId) => {
+    setLoadingVariant(articleId);
+    setAvisoFamilia(null);
+    try {
+      const res = await axios.get(
+        `${process.env.REACT_APP_ORDERED_SERVICES_ENDPOINT}`,
+        {
+          params: { filterByIdArticle: articleId, includeFilters: false },
+          headers: { Authorization: token },
+        },
+      );
+
+      // read-order-services responde { total, data: [...] }. La vista trae una
+      // fila por orden, así que puede haber varias del mismo artículo; llegan
+      // 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),
+      );
+
+      if (!encontrado) {
+        setAvisoFamilia(
+          "Ese producto no está en ninguna orden de trabajo, así que no se puede abrir desde aquí.",
+        );
+        return;
+      }
+
+      sessionStorage.setItem("productSelected", JSON.stringify(encontrado));
+      sessionStorage.setItem("version", JSON.stringify(encontrado.version));
+      sessionStorage.setItem(
+        "productEdit",
+        JSON.stringify({
+          ArticleId: encontrado.article.id_article,
+          categoryId: encontrado.article.id_article,
+          product: [encontrado],
+        }),
+      );
+
+      window.location.assign("/EditProducts");
+    } catch (error) {
+      console.error("openFamilyMember: ", error);
+      setAvisoFamilia("No se pudo abrir ese producto. Intenta de nuevo.");
+    } finally {
+      setLoadingVariant(null);
+    }
+  };
+
+  /*
+    Refresca tras ligar, sin recargar la página: el producto sale de
+    sessionStorage, así que un F5 devolvería el mismo objeto y el contador
+    seguiría igual.
+  */
+  const handleOnLinkedVariants = (result) => {
+    if (!result) return;
+
+    const updatedProduct =
+      result.mode === "children"
+        ? {
+            ...state.product,
+            variantsCount:
+              (state.product?.variantsCount ?? 0) +
+              (result.linked ?? []).length,
+          }
+        : {
+            ...state.product,
+            parentArticleId: result.parentArticleId ?? null,
+            variantsCount: 0,
+          };
+
+    dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
+
+    /*
+      En sessionStorage se PARCHEA lo guardado; no se reemplaza.
+
+      Lo que hay ahí es el producto tal como lo devuelve el listado de esta
+      aplicación: con `article` anidado, `statusByRetailer`, `categoryRetailer`
+      y los servicios. `updatedProduct` es la versión aplanada que usa esta
+      pantalla, y escribirla encima tiraba todo eso: al siguiente F5 la ficha se
+      reconstruía desde un objeto mutilado —sin relaciones de cadena, sin
+      estatus por cadena— aunque en pantalla se viera bien hasta entonces.
+
+      De ligar solo cambian dos cosas, y son las dos que se copian aquí.
+    */
+    try {
+      const guardado = JSON.parse(
+        sessionStorage.getItem("productSelected") ?? "null",
+      );
+
+      if (guardado) {
+        sessionStorage.setItem(
+          "productSelected",
+          JSON.stringify({
+            ...guardado,
+            variantsCount: updatedProduct.variantsCount,
+            parentArticleId: updatedProduct.parentArticleId ?? null,
+          }),
+        );
+      }
+    } catch (error) {
+      // Un sessionStorage inaccesible no debe tumbar la pantalla: el estado en
+      // memoria ya quedó bien y es lo que el usuario está viendo.
+      console.error("linkVariants/sessionStorage: ", error);
+    }
+
+    /*
+      Volver a preguntar, no vaciar.
+
+      Antes esto hacía `setFamily(null)` para invalidar la caché, y en esta
+      pantalla eso tenía el efecto contrario al buscado: el bloque de parentesco
+      se decide con `esHijoDeOtro`, que sale de `family`, no del producto. Con
+      `family` en null el bloque desaparecía, así que después de ligar la
+      pantalla se quedaba SIN ninguna señal de que el producto ya tenía padre
+      —justo lo que el usuario acababa de hacer—.
+    */
+    loadFamily(true);
+
+    /*
+      Y se recargan los servicios, porque ligar cambia la herencia de cada campo
+      en el servidor: al planchar, lo que era propio pasa a heredado y los chips
+      tienen que decirlo. Sin esto la ficha sigue mostrando el estado anterior
+      hasta que alguien cierra y vuelve a abrir el producto.
+
+      Sin `enableLoading` para no parpadear el esqueleto encima de una pantalla
+      que ya está pintada.
+    */
+    loadData(false);
+  };
+
+  /*
+    Acción "Volver a heredar" de los chips. Repinta en sitio con lo que devuelve
+    el endpoint: recargar la ficha se llevaría lo que haya sin guardar.
+  */
+  /*
+    `kind` distingue de qué pestaña salió el chip. Las descripciones viven en
+    `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",
+  ) => {
+    if (!attributeId || !state.product?.id_article) return;
+
+    const esDescripcion = kind === "description";
+
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/restore`,
+        {
+          articleId: state.product.id_article,
+          ...(esDescripcion
+            ? { descriptions: [Number(attributeId)] }
+            : { attributes: [Number(attributeId)] }),
+        },
+        { headers: { Authorization: token } },
+      );
+
+      const data = readPayload(res);
+
+      if (esDescripcion) {
+        dispatch({
+          type: "UPDATE_DESCRIPTIONS_INPUTS",
+          payload: (data.descriptionValues || []).map((item) => ({
+            attributeId: item.id_description,
+            value: item.value,
+            isOverridden: 0,
+          })),
+        });
+        return;
+      }
+
+      dispatch({
+        type: "UPDATE_DATASHEETS_INPUTS",
+        payload: (data.values || []).map((item) => ({
+          attributeId: item.id,
+          value: item.value,
+          isOverridden: 0,
+        })),
+      });
+    } catch (error) {
+      console.error("restoreInheritance: ", error);
+    }
+  };
+
+  /*
+    Los atributos recién tocados, con el nombre que ve el usuario:
+    `updated_datasheets_inputs` solo trae { attributeId, value }.
+  */
+  const cambiosDeFichaTecnica = () => {
+    const retailerId = state.active_retailer?.id_retailer;
+    const inputs = state.services?.datasheets?.inputs ?? {};
+
+    const cambios = (state.updated_datasheets_inputs ?? []).map((item) => {
+      const input = inputs[`${item.attributeId}_${retailerId}`];
+      return {
+        id: Number(item.attributeId),
+        name: input?.name ?? `Atributo ${item.attributeId}`,
+        value: item.value,
+      };
+    });
+
+    /*
+      UPC y SKU se quitan aquí y no dentro del diálogo porque esta lista también
+      decide SI el diálogo se abre. Editar solo el UPC no tiene nada que
+      propagar, así que preguntarlo sería pedirle al usuario una decisión sobre
+      un conjunto vacío.
+    */
+    return soloPropagables(cambios);
+  };
+
+  /*
+    Lo que se acaba de editar en la pestaña de descripciones.
+
+    Va aparte de `cambiosDeFichaTecnica` porque son tablas distintas y el
+    endpoint recibe una lista o la otra. Aquí NO se filtran UPC ni SKU: esos son
+    atributos de ficha técnica y no aparecen en esta pestaña.
+  */
+  const cambiosDeDescripciones = () => {
+    const retailerId = state.active_retailer?.id_retailer;
+    const inputs = state.services?.descriptions?.inputs ?? {};
+
+    return (state.updated_descriptions_inputs ?? []).map((item) => {
+      const input = inputs[`${item.attributeId}_${retailerId}`];
+      return {
+        id: Number(item.attributeId),
+        name: input?.name ?? `Descripción ${item.attributeId}`,
+        value: item.value,
+      };
+    });
+  };
+
+  const handleOnClickSave = async () => {
+    if (state.saving || preparandoPropagacion) return;
+
+    switch (state.active_tab) {
+      case "Descripción": {
+        /*
+          Guardar una descripción en un padre también abre la decisión de
+          propagar. Sin esto, el hijo heredaba la descripción al ligarse y se
+          quedaba con la versión vieja en cuanto el padre la corregía, sin que
+          nadie lo notara.
+        */
+        const cambiosDesc = cambiosDeDescripciones();
+        const companerasDesc = (variantGroup?.members ?? []).filter(
+          (m) => !m.isCurrent
+        );
+
+        if (esHijoDeOtro || cambiosDesc.length === 0) {
+          await saveDescriptions(token);
+          break;
+        }
+
+        setPreparandoPropagacion(true);
+        let familiaDesc = null;
+        try {
+          familiaDesc = await loadFamily(true);
+        } finally {
+          setPreparandoPropagacion(false);
+        }
+
+        const hijosDesc = (familiaDesc?.variants ?? []).filter(
+          (v) => !v.isCurrent
+        );
+
+        if (hijosDesc.length > 0 || companerasDesc.length > 0) {
+          setPendingPropagation({ cambios: cambiosDesc, kind: "description" });
+          return;
+        }
+
+        await saveDescriptions(token);
+        break;
+      }
+      case "Ficha técnica": {
+        const cambios = cambiosDeFichaTecnica();
+
+        if (cambios.length === 0) {
+          await saveDatasheets(token);
+          break;
+        }
+
+        /*
+          Guardar un padre con hijos abre la decisión de propagar. Sin este paso
+          el cambio se queda solo en el padre y los hijos se van separando de él
+          sin que nadie lo note.
+
+          Si tiene hijos se resuelve AQUÍ, esperando la respuesta, en vez de
+          mirar la copia en memoria. `family` es una consulta asíncrona: si
+          todavía no llegó, o si falló, `hijosDelProducto` vale 0 — o sea que
+          «todavía no sé» se leía igual que «no tiene hijos», y el padre se
+          guardaba sin ofrecer la propagación. En silencio, que es lo peor: el
+          usuario creía haber bajado el cambio a los hijos.
+
+          La ficha de la aplicación de clientes no tiene el problema porque ahí
+          `state.product.variantsCount` viene del listado; aquí el producto sale
+          del endpoint de reportes, que no trae el parentesco.
+        */
+        setPreparandoPropagacion(true);
+        let familia = null;
+        try {
+          familia = await loadFamily(true);
+        } finally {
+          setPreparandoPropagacion(false);
+        }
+
+        // No se pudo saber si tiene hijos. Guardar de todas formas repetiría el
+        // defecto que se está corrigiendo, así que se dice y se deja la decisión.
+        if (!familia || familia.error) {
+          dispatch({
+            type: "SET_MODAL",
+            payload: {
+              show: true,
+              title: "No se pudo consultar la familia",
+              message:
+                "No pudimos saber si este producto tiene hijos, así que no sabemos si hay que bajarles el cambio. Vuelve a intentar el guardado; si sigue fallando, guarda y revisa los hijos a mano.",
+              image: warningIcon,
+              buttons: [
+                {
+                  text: "Entendido",
+                  buttonType: "general-white-button",
+                  action: () =>
+                    dispatch({ type: "SET_MODAL", payload: { show: false } }),
+                },
+                {
+                  text: "Guardar solo este producto",
+                  buttonType: "general-button-default",
+                  action: () => {
+                    dispatch({ type: "SET_MODAL", payload: { show: false } });
+                    saveDatasheets(token);
+                  },
+                },
+              ],
+            },
+          });
+          return;
+        }
+
+        /*
+          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
+          hijos y aun así pertenecer a un grupo de variantes, y el cambio se les
+          puede copiar igual. Si no se miraran, guardar no ofrecería nada.
+        */
+        const companeras = (variantGroup?.members ?? []).filter(
+          (m) => !m.isCurrent,
+        );
+
+        // 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, kind: "datasheet" });
+          return;
+        }
+
+        await saveDatasheets(token);
+        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:
+        break;
+    }
+
+    await loadData(false);
+  };
+
+  const handleOnSetUpdatedDescriptions = (items) => {
+    dispatch({
+      type: "SET_UPDATED_DESCRIPTIONS_INPUTS",
+      payload: items,
+    });
+  };
+
+  const handleOnSetUpdatedDatasheets = (items) => {
+    dispatch({
+      type: "SET_UPDATED_DATASHEETS_INPUTS",
+      payload: items,
+    });
+  };
+
+  /*
+    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",
+        payload: {
+          show: true,
+          title: "Eliminar imágenes",
+          message: "No has seleccionado ninguna imagen para eliminar.",
+          image: warningIcon,
+        },
+      });
+      return;
+    }
+
+    dispatch({
+      type: "SET_MODAL",
+      payload: {
+        show: true,
+        title: "Eliminar imágenes",
+        message:
+          "¿Estás seguro de que deseas eliminar las imágenes seleccionadas?",
+        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 } });
+              deleteImages(token);
+            },
+          },
+        ],
+      },
+    });
+  };
+
+  const handleOnApproveSingleService = async () => {
+    await sendSingleEvaluation("A");
+  };
+
+  const handleOnRejectSingleService = () => {
+    setShowRejectModal(true);
+  };
+
+  const sendSingleEvaluation = async (result) => {
+    if (state.saving) return;
+
+    dispatch({ type: "SET_SAVING", payload: true });
+
+    const concept = getConceptByTab(state.active_tab);
+
+    const articleId = state.product.id_article;
+    const orderId = state.product.id_order ?? state.product.orderId;
+    const sectionStatusKey = `${concept}_status`;
+    const evalStatus = state.product[sectionStatusKey];
+    const retailerId = state.active_retailer?.id_retailer;
+
+    let data = { articleId, orderId, concept, evalStatus, retailerId };
+    let res;
+    let message;
+    let icon;
+
+    const activeTab = state.active_tab;
+
+    try {
+      //Esto solo se ejecutará cuando se aprueba o rechaza desde el modal superior derecho
+      if (result) {
+        data.result = result;
+        data.retailerId = retailerId;
+
+        res = await axios.put(
+          `${process.env.REACT_APP_EVALUATION_ENDPOINT}`,
+          data,
+          {
+            headers: {
+              Authorization: token,
+            },
+          },
+        );
+
+        const newStatuses = JSON.parse(res.data.body);
+        const serviceStatus =
+          newStatuses.newServiceStatus[articleId][`${concept}Status`];
+        const articleStatus = newStatuses.newArticleStatus[articleId];
+
+
+        // Actualizar el producto con los nuevos estados
+        const updatedStatusByRetailer = state.product.statusByRetailer.map(
+          (item) =>
+            item.retailer_id === retailerId && item.service === concept
+              ? { ...item, status: serviceStatus }
+              : item,
+        );
+
+        const updatedProduct = {
+          ...state.product,
+          statusByRetailer: updatedStatusByRetailer,
+          status: getMinorStatusFromRetailer(updatedStatusByRetailer),
+        };
+
+        dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
+
+        // Mostrar modal de éxito
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "",
+            message:
+              result === "A" ? "Aprobado con éxito" : "Rechazado con éxito",
+            image: successIcon,
+          },
+        });
+      } else {
+        //Caso del botón "Enviar evaluación"
+
+        //Se construye el mensaje y se actualiza el estatus
+
+        const specialistDone = ["RC", "RA", "CA"].includes(evalStatus);
+
+        if (specialistDone) {
+          message = `${activeTab} enviada a facilitador`;
+          icon =
+            activeTab === "Descripción"
+              ? descriptionSent
+              : activeTab === "Ficha técnica"
+              ? attributesSent
+              : imagesSent;
+        } else if (["IE", "AC", "RP", "RCA"].includes(evalStatus)) {
+          message = "Evaluación enviada";
+          icon = successIcon;
+        }
+
+        res = await axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
+          headers: {
+            Authorization: token,
+          },
+        });
+      }
+
+      if (res.data.statusCode === 200) {
+        const { newStatus, newOrderStatus, newArticleStatus } = JSON.parse(
+          res.data.body,
+        );
+
+        const articleStatus = newArticleStatus[articleId];
+
+
+        // const retailers = state.product.categoryRetailer.map((r) => ({
+        //   id: r.id_retailer,
+        //   name: r.retailerName,
+        // }));
+        // const messageToChat = createMessage(
+        //   retailers,
+        //   retailerId,
+        //   evalStatus,
+        //   newStatus,
+        //   activeTab,
+        // );
+
+        // const messageData = {
+        //   paramsBody: {
+        //     id: articleId,
+        //     version: state.product.version,
+        //     items: [{ type: "status", value: messageToChat }],
+        //     retailerId: retailerId,
+        //     status: state.product.status,
+        //   },
+        //   paramsHeader: { Authorization: token },
+        // };
+        // 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 updatedProduct = {
+          ...state.product,
+          [`${concept}_status`]: newStatus,
+          statusByRetailer: updatedStatusByRetailerForSend,
+          status: getMinorStatusFromRetailer(updatedStatusByRetailerForSend),
+        };
+
+        //Actualizamos el services_data en el servicio específico del retailer actual
+
+        const updatedServicesData = state.services_data?.map((service) => ({
+          ...service,
+          status:
+            service?.id_retailer === retailerId && service?.service === concept
+              ? newStatus
+              : service?.status,
+        }));
+
+        const sessionProduct = sessionStorage.getItem("productSelected");
+
+        if (sessionProduct) {
+          const productInSession = JSON.parse(sessionProduct);
+          const updatedProductInSession = {
+            ...productInSession,
+            [`${concept}_status`]: newStatus,
+            statusByRetailer: state.product.statusByRetailer.map((item) => {
+              if (item.retailer_id === retailerId && item.service === concept) {
+                return { ...item, status: newStatus };
+              }
+              return item;
+            }),
+          };
+          sessionStorage.setItem(
+            "productSelected",
+            JSON.stringify(updatedProductInSession),
+          );
+        }
+
+        if (message) {
+          dispatch({
+            type: "SET_MODAL",
+            payload: {
+              show: true,
+              title: "",
+              message: message,
+              image: successIcon,
+            },
+          });
+        }
+
+        dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
+        dispatch({ type: "SET_SERVICES_DATA", payload: updatedServicesData });
+      }
+    } catch (error) {
+      console.error("Error sending evaluation:", error);
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Error",
+          message: "Hubo un error al procesar la evaluación",
+          image: errorIcon,
+        },
+      });
+    } finally {
+      dispatch({ type: "SET_SAVING", payload: false });
+    }
+  };
+
+  const handleOnApproveAllServices = async () => {
+    await sendBulkEvaluation("A");
+  };
+
+  const handleOnRejectAllServices = () => {
+    setRejectAll(true);
+    setShowRejectModal(true);
+  };
+
+  const sendBulkEvaluation = async (result) => {
+    dispatch({ type: "SET_SAVING", payload: true });
+    try {
+      const evaluationArray = [];
+
+      const conceptArray = getConceptsByRole(user.id_role);
+
+      state.services_data?.forEach((ret, idx) => {
+        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)
+        ) {
+          const data = {
+            articleId: state.product.id_article,
+            orderId: state.product.id_order,
+            concept: retailer_service,
+            result,
+            evalStatus: status_retailer_service,
+            retailerId: id_retailer,
+          };
+
+          evaluationArray.push(
+            axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
+              headers: {
+                Authorization: token,
+              },
+            }),
+          );
+        }
+      });
+
+      await Promise.all(evaluationArray);
+
+      // Sin una sola petición no hubo evaluación. Seguir de largo es lo que
+      // pintaba el estatus nuevo y anunciaba éxito mientras la base no se
+      // enteraba: el cambio se veía en pantalla y no existía. Un no-op tiene
+      // que decirlo, no fingir que funcionó.
+      if (evaluationArray.length === 0) {
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "Error",
+            message:
+              "No hay servicios que puedas evaluar en el estatus actual.",
+            image: errorIcon,
+          },
+        });
+        return;
+      }
+
+      const status = `${result}A`;
+
+      // Actualizar el statusByRetailer para todos los retailers y conceptos
+      const updatedStatusByRetailer = state.product.statusByRetailer.map(
+        (item) =>
+          conceptArray.includes(item.service) ? { ...item, status } : item,
+      );
+
+      // Actualizar el producto con los nuevos estados
+      const updatedProduct = {
+        ...state.product,
+        article_status: status,
+        status: getMinorStatusFromRetailer(updatedStatusByRetailer),
+        datasheet_status:
+          state.product.datasheet_status === "NA" ? "NA" : status,
+        description_status:
+          state.product.description_status === "NA" ? "NA" : status,
+        images_status: state.product.images_status === "NA" ? "NA" : status,
+        statusByRetailer: updatedStatusByRetailer,
+      };
+
+      dispatch({
+        type: "SET_PRODUCT",
+        payload: updatedProduct,
+      });
+
+      const updatedServicesData = state.services_data.map((service) =>
+        conceptArray.includes(service.service)
+          ? { ...service, status: status }
+          : service,
+      );
+
+      dispatch({
+        type: "SET_SERVICES_DATA",
+        payload: updatedServicesData,
+      });
+
+      // sessionStorage.setItem(
+      //   "productSelected",
+      //   JSON.stringify(updatedProduct),
+      // );
+      // sessionStorage.setItem(
+      //   "productEdit",
+      //   JSON.stringify({
+      //     ArticleId: updatedProduct.id_article,
+      //     idCategory: updatedProduct.id_category,
+      //     product: updatedProduct,
+      //   }),
+      // );
+
+      // Mostrar modal de éxito
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "",
+          message:
+            result === "A"
+              ? "Todos los servicios aprobados con éxito"
+              : "Todos los servicios rechazados con éxito",
+          image: successIcon,
+        },
+      });
+    } catch (error) {
+      console.error("Error in bulk evaluation:", error);
+    } finally {
+      dispatch({ type: "SET_SAVING", payload: false });
+    }
+  };
+
+  const handleOnChangeAssignations = async (assignationType, assignationId) => {
+    const concept = getConceptByTab(state.active_tab);
+    const data = {
+      articleList: [
+        {
+          orderId: state.product.id_order,
+          articleId: state.product.id_article,
+        },
+      ],
+      concept: concept,
+      userId: assignationId,
+    };
+
+    await axios({
+      method: "post",
+      url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
+      data,
+      headers: {
+        Authorization: token,
+      },
+    });
+
+    const updatedProduct = {
+      ...state.product,
+      [`id_${concept}_${assignationType}`]: assignationId,
+    };
+
+    dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
+  };
+
+  const handleOnSetAssignation = () => {
+    console.log("handleOnSetAssignation - pendiente de implementar");
+  };
+
+  const handleOnSetImages = () => {
+    console.log("handleOnSetImages - pendiente de implementar");
+  };
+
+  const handleOnSetCheckAll = (isChecked) => {
+    dispatch({ type: "TOGGLE_CHECK_ALL_IMAGES", payload: isChecked });
+  };
+
+  const handleOnSetSelectedImages = () => {
+    /*
+    Esta función no se utiliza actualmente.
+
+    En la versión anterior se usaban dos funciones distintas para el checkbox
+    "Seleccionar todo":
+    - Una para cambiar el valor booleano del checkbox.
+    - Otra para actualizar el array de imágenes seleccionadas.
+
+    En la versión actual se unificó la lógica en una sola función,
+    `handleOnSetCheckAll`, que recibe el valor `true` o `false` del checkbox
+    "Seleccionar todo" y, a partir de este, agrega o elimina todas las imágenes
+    del array de imágenes seleccionadas.
+  */
+    // Sin uso: la selección se maneja con handleOnSetCheckAll.
+  };
+  const handleOnSubmitComment = async (e) => {
+    e.preventDefault();
+    const commentText = document.querySelector(
+      "#commentary-box .ql-container .ql-editor > p",
+    ).innerHTML;
+    try {
+      await createComment(commentText, token);
+
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "",
+          message: "Comentario guardado con éxito",
+          image: successIcon,
+        },
+      });
+    } catch (error) {
+      console.error("Error saving comment:", error);
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Error",
+          message: "Hubo un error al guardar el comentario",
+          image: errorIcon,
+        },
+      });
+    }
+  };
+
+  const handleOnSendEvaluationToFacilitator = () => {
+    sendSingleEvaluation();
+  };
+
+  const isEvaluationFinished = (id_rol, tab, statusArray) => {
+    const servicesData = state.services_data;
+    const activeRetailer = state.active_retailer;
+    const product = state.product;
+    const concept = getConceptByTab(tab);
+
+    const servicesByTab = servicesData?.filter(
+      (serv) => serv.service === concept,
+    );
+
+    const statusBySelectedRetailerService = servicesByTab
+      ?.find((serv) => serv.id_retailer === activeRetailer?.id_retailer)
+      ?.status?.replace(/.*\//, "");
+
+    const currentProducStatus = product?.[`${concept}_status`]?.replace(
+      /.*\//,
+      "",
+    );
+
+    const unvalidated = ["IE", "CA"].includes(currentProducStatus);
+    const auditorUnvalidated = !["RA", "AA", "ACA", "AP"].includes(
+      currentProducStatus,
+    );
+
+    let result;
+    switch (id_rol) {
+      case 7:
+      case 8:
+        // AC se valida/rechaza desde el panel, no se reenvía con "Enviar evaluación".
+        const canSendEvaluation =
+          statusBySelectedRetailerService !== "AC" &&
+          statusArray.includes(statusBySelectedRetailerService);
+
+        // const conditionTwo = statusArray.includes(product?.status);
+
+        // const conditionThree =
+        //   servicesByTab.filter((service) =>
+        //     statusArray.includes(service.status?.replace(/.*\//, "")),
+        //   ).length === servicesByTab.length;
+
+        // return (canSendEvaluation && conditionTwo) || conditionThree;
+
+        return canSendEvaluation;
+
+      case 4:
+      case 5:
+        const filteredSrv45 = servicesByTab?.filter((serv) =>
+          statusArray.includes(serv?.status),
+        );
+        const condition45 =
+          unvalidated &&
+          ["CA", "IE"].includes(product?.status) &&
+          filteredSrv45?.length === servicesByTab?.length;
+        return condition45;
+      case 6:
+        const statusInArray = statusArray.includes(product?.status);
+        const allSrvValid = srv?.every((serv) =>
+          ["RA", "AA", "AP", "ACA"].includes(serv?.status),
+        );
+        const condition6 = statusInArray && allSrvValid && auditorUnvalidated;
+        return condition6;
+      default:
+        return false;
+    }
+  };
+
+  const handleOnChangeProductVersion = (version) => {
+    dispatch({
+      type: "SET_PRODUCT_VERSION",
+      payload: version,
+    });
+
+    loadData(true, version);
+  };
+
+  const handleRetryLoad = () => {
+    dispatch({ type: "SET_ERRORS", payload: [] });
+    if (state.active_retailer) {
+      loadData();
+    } else {
+      initializeProduct();
+    }
+  };
+
+  return {
+    isRetailer,
+    digitalAssets,
+    currentTray,
+    assetsLoadedFor,
+    handleOnSetSelectedAssets,
+    handleOnSetAllAssetsChecked,
+    initializeProduct,
+    loadAuditableData,
+    loadData,
+    handleOnChangeCurrentImage,
+    handleOnShowModalGallery,
+    handleOnChangeActiveRetailer,
+    handleOnChangeActiveTab,
+    handleOnToggleImageLayout,
+    handleOnToggleObservation,
+    handleOnHideObservation,
+    isAuditorAssigned,
+    isAssignedAs,
+    isUserAssignedToService,
+    canShowSingleEvaluationButtons,
+    canShowBulkEvaluationButtons,
+    getStatusByCurrentServiceAndRetailer,
+    handleOnSaveAssets,
+    handleOnClickSaveImages,
+    loadFamily,
+    hijosDelProducto,
+    esHijoDeOtro,
+    puedeAgruparse,
+    handleOnUnlinked,
+    loadVariantGroup,
+    handleOnLeaveGroup,
+    openFamilyMember,
+    handleOnLinkedVariants,
+    handleOnRestoreInheritance,
+    cambiosDeFichaTecnica,
+    cambiosDeDescripciones,
+    handleOnClickSave,
+    handleOnSetUpdatedDescriptions,
+    handleOnSetUpdatedDatasheets,
+    handleOnDownloadAssets,
+    handleOnAskToDeleteAssets,
+    handleOnAskToDeleteImages,
+    handleOnApproveSingleService,
+    handleOnRejectSingleService,
+    sendSingleEvaluation,
+    handleOnApproveAllServices,
+    handleOnRejectAllServices,
+    sendBulkEvaluation,
+    handleOnChangeAssignations,
+    handleOnSetAssignation,
+    handleOnSetImages,
+    handleOnSetCheckAll,
+    handleOnSetSelectedImages,
+    handleOnSubmitComment,
+    handleOnSendEvaluationToFacilitator,
+    isEvaluationFinished,
+    handleOnChangeProductVersion,
+    handleRetryLoad,
+    showVersionSelector,
+    setShowVersionSelector,
+    auditableVersion,
+    setAuditableVersion,
+    headerTop,
+    setHeaderTop,
+    shotThd,
+    setShotThd,
+    observation,
+    setObservation,
+    showRejectModal,
+    setShowRejectModal,
+    isObservationVisible,
+    setObservationVisible,
+    imageLayout,
+    setImageLayout,
+    crossComment,
+    setCrossComment,
+    statusArray,
+    setStatusArray,
+    rejectAll,
+    setRejectAll,
+    showLinkVariants,
+    setShowLinkVariants,
+    family,
+    setFamily,
+    showFamily,
+    setShowFamily,
+    loadingVariant,
+    setLoadingVariant,
+    variantGroup,
+    setVariantGroup,
+    showGroup,
+    setShowGroup,
+    showGroupModal,
+    setShowGroupModal,
+    porDesvincular,
+    setPorDesvincular,
+    avisoFamilia,
+    setAvisoFamilia,
+    pendingPropagation,
+    setPendingPropagation,
+    preparandoPropagacion,
+    setPreparandoPropagacion,
+    auditServices,
+    setAuditServices,
+    auditDatasheets,
+    setAuditDatasheets,
+    auditDescriptions,
+    setAuditDescriptions,
+    showModal,
+    setShowModal,
+    compare,
+    setCompare,
+    openChangeStatusModal,
+    setOpenChangeStatusModal,
+    assetNotices,
+    setAssetNotices,
+    activeTray,
+    setActiveTray,
+    state,
+    dispatch,
+    saveDatasheets,
+    saveDescriptions,
+    updateImages,
+    deleteImages,
+    saveAssets,
+    registerUploadedAssets,
+    handleOnDownloadImages,
+    createComment,
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    open,
+  };
+};