contentoh-components-library 21.6.61 → 21.6.63

package/src/components/pages/ProductEdition/ProductEditionView.jsx

@@ -1,1142 +0,0 @@
-/**
- * Edición de producto unificada (ProductEdition).
- *
- * Una sola pantalla para las dos aplicaciones; lo que cambia entre ellas son
- * los permisos (ver `permissions.js`). FASE 1: Creators (equipo Content-oh).
- *
- * Parte de la vista responsiva de CreatorsProductEdition (Jorge Alvarado) y
- * reutiliza su hook y sus secciones. Lo nuevo:
- *   - Lista lateral de servicios, a la derecha, en lugar de la barra de
- *     pestañas: solo los servicios contratados, «Míos / Todos», Resumen y
- *     punto rosa en lo que le toca a cada quien (organisms/ServicesNavigation).
- *   - Encabezado del servicio abierto (ServiceHeader): grupo, nombre y
- *     estatus; equipo con nombre y rol (ServiceTeam) y herramientas sin el
- *     botón de ayuda (ServiceTools).
- *   - Barra superior delgada con el cierre siempre visible (EditionTopBar) y
- *     panel de imagen en tarjeta (sections/ImagePanel).
- *   - Las reglas de quién puede guardar, asignar, evaluar o comentar salen de
- *     `permissions.js` en lugar de vivir dentro de la vista.
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import axios from "axios";
-import {
-  Skeleton,
-  Box,
-  Stack,
-  Typography,
-  CircularProgress,
-  Button as MuiButton,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Drawer,
-  useMediaQuery,
-} from "@mui/material";
-
-import { getConceptByTab } from "../RetailerProductEdition/utils";
-import { countUnsavedAssets } from "../../../global-files/digital-assets/assets.reducer";
-
-
-import { TRAYS } from "../../molecules/GalleryTrayTabs";
-
-import { InputGroup } from "../../organisms/InputGroup";
-import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
-import { UnlinkVariantModal } from "../../organisms/UnlinkVariantModal";
-import { VariantGroupModal } from "../../organisms/VariantGroupModal";
-import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
-import ChangeStatusModal from "../../organisms/ChangeStatusModal";
-
-import { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
-
-import errorIcon from "../../../assets/images/genericModal/errorModal.svg";
-
-import { useCreatorsProductEdition } from "../CreatorsProductEdition/hooks/useCreatorsProductEdition";
-import { allowedAccountsToViewChangeStatus } from "../CreatorsProductEdition/constants";
-import { Container, ReusedModalsStyles } from "../CreatorsProductEdition/styles";
-import { ProductHeader } from "../CreatorsProductEdition/sections/ProductHeader";
-import { ImagePanel } from "./sections/ImagePanel";
-import { EditionTopBar } from "./sections/EditionTopBar";
-import { ServiceTeam } from "./sections/ServiceTeam";
-import { ServiceTools } from "./sections/ServiceTools";
-import { CatalogServicePanel } from "./sections/CatalogServicePanel";
-import { ImagesSection } from "../CreatorsProductEdition/sections/ImagesSection";
-import { VariantsPanel } from "../CreatorsProductEdition/sections/VariantsPanel";
-import { CommentBox } from "../CreatorsProductEdition/sections/CommentBox";
-import { NoticeDialog } from "../CreatorsProductEdition/sections/NoticeDialog";
-import { RejectDialog } from "../CreatorsProductEdition/sections/RejectDialog";
-import { ImageGallery } from "../CreatorsProductEdition/sections/ImageGallery";
-import { VersionDrawer } from "../CreatorsProductEdition/sections/VersionDrawer";
-import { COLORS, FONTS } from "../CreatorsProductEdition/sections/tokens";
-
-import { ServicesRail } from "../../organisms/ServicesNavigation/ServicesRail";
-import { ServiceView } from "../../organisms/ServicesNavigation/views";
-import {
-  SUMMARY,
-  defaultFilter,
-  hasUsefulFilter,
-  initialSelection,
-  isPendingFor as isServicePending,
-} from "../../organisms/ServicesNavigation/model";
-import { ServiceHeader } from "./ServiceHeader";
-import { buildEditionServices, buildServicesFromApi } from "./services";
-import { assignService, fetchAssignables, fetchProductServices, setServiceStatus } from "./api";
-import {
-  canAssign,
-  canChangeStatus,
-  canEvaluate,
-  canSave,
-  canSendToFacilitator,
-  serviceOfTab,
-} from "./permissions";
-
-// Lado de la lista de servicios; en celular, el panel sale del mismo lado.
-const RAIL_SIDE = "right";
-
-// Aviso cuando el producto no tiene contratado el servicio de la pestaña.
-const NoService = () => (
-  <Typography sx={{ fontFamily: FONTS.Raleway, fontSize: 14, color: COLORS.s5, py: 1 }}>
-    No cuentas con este servicio
-  </Typography>
-);
-
-export const ProductEditionView = ({
-  // «creators» (equipo Content-oh). «management» (proveedor y cadena) llega
-  // en la fase 2; mientras tanto se trata igual que «creators».
-  app = "creators",
-  // Solo para historias de Storybook: servicios de muestra (opcional).
-  demoServices,
-  tabsSections,
-  productSelected = {},
-  user = {},
-  token,
-  location,
-  enableDigitalAssets = false,
-}) => {
-  const {
-    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,
-  } = useCreatorsProductEdition({
-    tabsSections,
-    productSelected,
-    user,
-    token,
-    location,
-    enableDigitalAssets,
-  });
-
-  /* ---------------------------------------------------------------------- */
-  /* Navegación por servicios                                                */
-  /* ---------------------------------------------------------------------- */
-
-  useEffect(() => {
-    if (app !== "creators") {
-      console.warn(
-        `[ProductEdition] app «${app}»: los permisos de Content Management llegan en la fase 2; por ahora se usan los de Creators.`,
-      );
-    }
-  }, [app]);
-
-  const isDesktop = useMediaQuery("(min-width:900px)");
-
-  // Auditores, para poner nombre al auditor del producto en el equipo del
-  // servicio (`collaborator_assignations` solo trae especialistas y
-  // coordinadores). Es la misma consulta que hace `fetchUsers` para el rol 6.
-  const [auditors, setAuditors] = useState([]);
-  useEffect(() => {
-    if (!token) return undefined;
-    let alive = true;
-    axios
-      .get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=6`, { headers: { Authorization: token } })
-      .then((response) => alive && setAuditors(response.data?.data ?? []))
-      .catch(() => {});
-    return () => {
-      alive = false;
-    };
-  }, [token]);
-
-  /*
-    Servicios del producto desde el backend (GET /product-services), leídos de
-    las columnas del catálogo de rel_order_services: los de siempre y los
-    nuevos, con su estatus, su equipo y lo que la persona puede hacer.
-
-    Se vuelven a pedir cuando el flujo actual cambia el producto o sus estatus
-    (evaluar, asignar, guardar), para que la lista no se quede atrás. Si el
-    endpoint no responde, la lista se arma como antes, con los campos del
-    producto (buildEditionServices). Las historias usan `demoServices`.
-  */
-  const [productServices, setProductServices] = useState(null);
-  const productServicesRequest = useRef(0);
-  const articleId = state.product?.id_article;
-  const orderId = state.product?.id_order;
-
-  const refreshProductServices = useCallback(async () => {
-    if (!token || !articleId || !orderId || demoServices) return;
-    productServicesRequest.current += 1;
-    const request = productServicesRequest.current;
-    try {
-      const data = await fetchProductServices({ articleId, orderId, token });
-      // Solo la respuesta más reciente (un producto que se abrió después gana),
-      // y solo si trae la lista: si no, se queda la que arma el producto.
-      if (request === productServicesRequest.current && Array.isArray(data?.services)) {
-        setProductServices(data);
-      }
-    } catch (error) {
-      console.warn("[ProductEdition] servicios del producto:", error?.message);
-    }
-  }, [token, articleId, orderId, demoServices]);
-
-  useEffect(() => {
-    setProductServices(null);
-  }, [articleId, orderId]);
-
-  useEffect(() => {
-    refreshProductServices();
-  }, [refreshProductServices, state.product, state.services_data]);
-
-  const services = useMemo(
-    () =>
-      productServices
-        ? buildServicesFromApi({
-            productServices,
-            user,
-            activeRetailerId: state.active_retailer?.id_retailer,
-          })
-        : buildEditionServices({
-            product: state.product,
-            user,
-            servicesData: state.services_data,
-            activeRetailerId: state.active_retailer?.id_retailer,
-            collaboratorAssignations: state.collaborator_assignations,
-            auditors,
-            demoServices,
-          }),
-    [
-      productServices,
-      state.product,
-      user,
-      state.services_data,
-      state.active_retailer,
-      state.collaborator_assignations,
-      auditors,
-      demoServices,
-    ],
-  );
-  const single = services.length === 1;
-  const showFilter = hasUsefulFilter(services, user?.id_user);
-
-  // `null` hasta que cargan los servicios; después, el servicio abierto o SUMMARY.
-  const [selected, setSelected] = useState(null);
-  const [filter, setFilter] = useState("all");
-  const [railCollapsed, setRailCollapsed] = useState(false);
-  const [railOpen, setRailOpen] = useState(false);
-  const [pendingSelection, setPendingSelection] = useState(null);
-
-  /*
-    Al cargar se abre, en este orden:
-      1. el único servicio, si solo hay uno;
-      2. lo primero que le toca a la persona;
-      3. su primer servicio, si trabaja solo algunos (un especialista);
-      4. el Resumen (quien ve todo: administración, coordinación, auditoría).
-  */
-  useEffect(() => {
-    // Se espera a `services_data`: antes, los estatus son los generales del
-    // producto y no los de la cadena activa, y se elegiría con datos viejos.
-    if (selected !== null || services.length === 0 || !state.services_data) return;
-    let first = initialSelection(services, user?.id_user);
-    const mine = services.filter((item) => item.mine);
-    if (first === SUMMARY && mine.length > 0 && mine.length < services.length) {
-      first = mine[0].service_name;
-    }
-    setFilter(defaultFilter(services, user?.id_user));
-    openService(first);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [services, state.services_data]);
-
-  // Si el hook cambia de pestaña por su cuenta, la lista lo sigue.
-  useEffect(() => {
-    const current = services.find((item) => item.service_name === selected);
-    const fromTab = serviceOfTab(state.active_tab);
-    if (current?.tab && fromTab && fromTab !== selected) setSelected(fromTab);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.active_tab]);
-
-  const selectedService = services.find((item) => item.service_name === selected) ?? null;
-  const isSummary = selected === SUMMARY;
-  const isClassic = Boolean(selectedService?.tab);
-  // Servicio del catálogo (o de siempre sin editor) que llegó del backend.
-  const catalogService = !isClassic && !isSummary && selectedService?.api ? selectedService : null;
-
-  // A quién se puede asignar en el servicio del catálogo abierto (view=assignables).
-  const [assignables, setAssignables] = useState({});
-  const catalogServiceName = catalogService?.service_name;
-  const catalogCanAssign = Boolean(catalogService?.api?.actions?.assign);
-  useEffect(() => {
-    setAssignables({});
-    if (!catalogServiceName || !catalogCanAssign || !token) return undefined;
-    let alive = true;
-    const roles = (catalogService.api.roles ?? []).filter((role) => role === "especialist" || role === "facilitator");
-    Promise.all(
-      roles.map((role) =>
-        fetchAssignables({ serviceName: catalogServiceName, role, token })
-          .then((users) => [role, users])
-          .catch(() => [role, []]),
-      ),
-    ).then((entries) => alive && setAssignables(Object.fromEntries(entries)));
-    return () => {
-      alive = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [catalogServiceName, catalogCanAssign, token]);
-
-  const handleOnSetCatalogStatus = async (statusName, retailerIds) => {
-    await setServiceStatus({
-      articleId,
-      orderId,
-      serviceName: catalogServiceName,
-      statusName,
-      retailerIds,
-      token,
-    });
-    await refreshProductServices();
-  };
-
-  const handleOnAssignCatalogService = async (role, userId) => {
-    try {
-      await assignService({ articleId, orderId, serviceName: catalogServiceName, role, userId, token });
-    } catch (error) {
-      console.warn("[ProductEdition] asignar servicio:", error?.message);
-    }
-    await refreshProductServices();
-  };
-  const activeConcept = serviceOfTab(state.active_tab);
-
-  // Permisos del servicio abierto (ver permissions.js).
-  const userCanSave = canSave(state.product, user, activeConcept);
-  const userCanEvaluate =
-    Boolean(state.product && state.services_data) &&
-    canEvaluate(state.product, user, activeConcept, getStatusByCurrentServiceAndRetailer());
-
-  const hasUnsavedChanges = () =>
-    state.updated_descriptions_inputs?.length > 0 ||
-    state.updated_datasheets_inputs?.length > 0 ||
-    state.updated_images_values?.length > 0 ||
-    state.services?.images?.values?.filter((file) => !file.id)?.length > 0;
-
-  function openService(name) {
-    const target = services.find((item) => item.service_name === name);
-    if (target?.tab && target.tab !== state.active_tab) handleOnChangeActiveTab(target.tab);
-    setSelected(name);
-    setRailOpen(false);
-  }
-
-  // Igual que la barra de pestañas: cambiar con cambios sin guardar pregunta.
-  const requestService = (name) => {
-    if (name === selected) return;
-    if (hasUnsavedChanges()) setPendingSelection(name);
-    else openService(name);
-  };
-
-  const confirmServiceChange = () => {
-    handleOnSetUpdatedDescriptions && handleOnSetUpdatedDescriptions([]);
-    handleOnSetUpdatedDatasheets && handleOnSetUpdatedDatasheets([]);
-    handleOnSetImages && handleOnSetImages({});
-    openService(pendingSelection);
-    setPendingSelection(null);
-  };
-
-  const pendingCount = services.filter((item) => isServicePending(item, user?.id_user)).length;
-
-  const renderRail = (variant) => (
-    <ServicesRail
-      variant={variant}
-      services={services}
-      selected={selected ?? SUMMARY}
-      onSelect={requestService}
-      userId={user?.id_user}
-      filter={filter}
-      onFilterChange={setFilter}
-      showFilter={showFilter}
-      collapsed={railCollapsed}
-      onToggleCollapsed={() => setRailCollapsed((value) => !value)}
-      onClose={variant === "drawer" ? () => setRailOpen(false) : undefined}
-      side={RAIL_SIDE}
-    />
-  );
-
-  const ProductEditionSkeleton = () => {
-    return (
-      <Container headerTop={0}>
-        <Box
-          px={1.5}
-          py={1}
-          pb={0}
-          display="flex"
-          alignItems="center"
-          justifyContent="space-between"
-        >
-          <Skeleton variant="text" width="min(300px, 60%)" height={40} />
-          <Stack direction="row" spacing={2}>
-            <Skeleton variant="circular" width={32} height={32} />
-          </Stack>
-        </Box>
-
-        <div className="data-container">
-          <div
-            className="image-data-panel"
-            style={{ display: "flex", flexDirection: "column", gap: "20px" }}
-          >
-            <Skeleton variant="rounded" width="100%" height={320} />
-
-            <Stack direction="row" spacing={2} justifyContent="center">
-              {[1, 2, 3, 4].map((item) => (
-                <Skeleton key={item} variant="rounded" width={60} height={80} />
-              ))}
-            </Stack>
-
-            <Box mt={2}>
-              {[1, 2, 3, 4].map((item) => (
-                <Box
-                  key={item}
-                  display="flex"
-                  justifyContent="space-between"
-                  py={1}
-                  borderBottom="1px solid #f0f0f0"
-                >
-                  <Skeleton variant="text" width="40%" />
-                  <Skeleton variant="text" width="20%" />
-                </Box>
-              ))}
-            </Box>
-          </div>
-
-          <div
-            className="product-information"
-            style={{
-              flex: 1,
-              display: "flex",
-              flexDirection: "column",
-              gap: "14px",
-            }}
-          >
-            <Box>
-              <Skeleton variant="text" width="80%" height={50} />
-              <Stack direction="row" spacing={2} alignItems="center">
-                <Skeleton variant="rounded" width="30%" height={24} />
-                <Skeleton variant="rounded" width="45%" height={24} />
-              </Stack>
-            </Box>
-
-            <Box display="flex" gap={4} pb={1}>
-              <Skeleton variant="text" width="28%" height={45} />
-              <Skeleton variant="text" width="28%" height={45} />
-              <Skeleton variant="text" width="28%" height={45} />
-            </Box>
-
-            <Box display="flex" flexDirection="column" gap={4}>
-              {[1, 2, 3].map((item) => (
-                <Box key={item}>
-                  <Box
-                    display="flex"
-                    justifyContent="space-between"
-                    alignItems="center"
-                    mb={1}
-                  >
-                    <Skeleton variant="text" width="30%" height={24} />
-                    <Skeleton
-                      variant="rounded"
-                      width="min(175px, 35%)"
-                      height={25}
-                      sx={{ borderRadius: "7.5px" }}
-                    />
-                  </Box>
-                  <Skeleton variant="rounded" width="100%" height={70} />
-                  <Box display="flex" justifyContent="flex-end" mt={0.5}>
-                    <Skeleton variant="text" width={60} />
-                  </Box>
-                </Box>
-              ))}
-            </Box>
-
-            <Box mt="auto" pt={4}>
-              <Skeleton variant="rounded" width="100%" height={120} />
-              <Box display="flex" justifyContent="flex-end" gap={2} mt={2}>
-                <Skeleton
-                  variant="rounded"
-                  width="min(180px, 45%)"
-                  height={45}
-                  sx={{ borderRadius: "24px" }}
-                />
-                <Skeleton
-                  variant="rounded"
-                  width="min(180px, 45%)"
-                  height={45}
-                  sx={{ borderRadius: "24px" }}
-                />
-              </Box>
-            </Box>
-          </div>
-        </div>
-      </Container>
-    );
-  };
-
-  // Si la carga falló y no tenemos servicios, mostramos un estado de error con
-  // opción de reintentar en vez de quedarnos colgados en el skeleton.
-  if (!state.loading && state.errors?.length > 0 && !state.services)
-    return (
-      <Container headerTop={0}>
-        <Box
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-          justifyContent="center"
-          gap={2}
-          sx={{ minHeight: "60vh", textAlign: "center", padding: "40px" }}
-        >
-          <img src={errorIcon} alt="error" width={64} height={64} />
-          <Typography sx={{ fontFamily: FONTS.Raleway, fontSize: 16, color: COLORS.s5 }}>
-            No pudimos cargar el producto
-          </Typography>
-          <Typography sx={{ color: "#666", maxWidth: 420, fontSize: 14 }}>
-            {state.errors[0] ||
-              "Ocurrió un error al cargar la información del producto."}
-          </Typography>
-          <MuiButton
-            variant="contained"
-            disableElevation
-            onClick={handleRetryLoad}
-            sx={{
-              textTransform: "none",
-              borderRadius: "20px",
-              px: 4,
-              bgcolor: COLORS.magenta_s2,
-              "&:hover": { bgcolor: COLORS.secondary_magenta },
-            }}
-          >
-            Reintentar
-          </MuiButton>
-        </Box>
-      </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
-  )
-    return (
-      <>
-        <ProductEditionSkeleton />
-      </>
-    );
-
-  return (
-    <AiProductEditionProvider
-      isCreatorsEdition={true}
-      user={user}
-      token={token}
-      state={state}
-    >
-      <Box sx={{ display: "flex", flex: 1, minWidth: 0, height: "100%", overflow: "hidden" }}>
-      <Container headerTop={headerTop}>
-        {pendingPropagation && (
-          <PropagateChangesModal
-            changedAttributes={pendingPropagation.cambios}
-            kind={pendingPropagation.kind ?? "datasheet"}
-            variants={
-              esHijoDeOtro
-                ? []
-                : (family?.variants ?? []).filter((v) => !v.isCurrent)
-            }
-            groupMembers={(variantGroup?.members ?? []).filter(
-              (m) => !m.isCurrent,
-            )}
-            groupCode={variantGroup?.group ?? null}
-            saving={state.saving}
-            onCancel={() => setPendingPropagation(null)}
-            onConfirm={(propagation) => {
-              const esDescripcion = pendingPropagation.kind === "description";
-              setPendingPropagation(null);
-
-              if (!propagation) {
-                if (esDescripcion) saveDescriptions(token);
-                else saveDatasheets(token);
-                return;
-              }
-
-              /*
-                El diálogo habla de «atributos» porque es el mismo componente
-                para las dos pestañas. Al guardar hay que ponerlo en la lista
-                que corresponde: el servidor recibe `attributes` o
-                `descriptions`, nunca una por la otra.
-              */
-              const { attributes, ...destinos } = propagation;
-
-              if (esDescripcion) {
-                saveDescriptions(token, { ...destinos, descriptions: attributes });
-              } else {
-                saveDatasheets(token, propagation);
-              }
-            }}
-          />
-        )}
-        {showLinkVariants && (
-          <LinkVariantsModal
-            articleId={state.product?.id_article}
-            articleName={state.product?.name}
-            articleUpc={state.product?.upc}
-            activeRetailerId={state.active_retailer?.id_retailer}
-            token={token}
-            onClose={() => setShowLinkVariants(false)}
-            onLinked={handleOnLinkedVariants}
-          />
-        )}
-        {showGroupModal && (
-          <VariantGroupModal
-            articleId={state.product?.id_article}
-            articleName={state.product?.name}
-            articleUpc={state.product?.upc}
-            currentGroup={variantGroup?.group ?? null}
-            token={token}
-            onClose={() => setShowGroupModal(false)}
-            onSaved={(result) => {
-              setVariantGroup(result);
-              setShowGroup(true);
-            }}
-          />
-        )}
-        {porDesvincular && (
-          <UnlinkVariantModal
-            {...porDesvincular}
-            token={token}
-            onClose={() => setPorDesvincular(null)}
-            onUnlinked={handleOnUnlinked}
-          />
-        )}
-        <RejectDialog
-          open={showRejectModal}
-          rejectAll={rejectAll}
-          onCancel={() => setShowRejectModal(false)}
-          onConfirm={async (message) => {
-            await createComment(message, token);
-            rejectAll ? sendBulkEvaluation("R") : sendSingleEvaluation("R");
-            setShowRejectModal(false);
-          }}
-        />
-        <NoticeDialog
-          modal={state.modal}
-          onClose={() =>
-            dispatch({
-              type: "SET_MODAL",
-              payload: { show: false, title: "", message: "", image: null },
-            })
-          }
-        />
-        {showModal && (
-          <ImageGallery
-            images={state.images_values}
-            initialIndex={state.current_image}
-            setShowModal={setShowModal}
-            approveRejectButtons={canShowSingleEvaluationButtons()}
-            sendToFacilitator={handleOnSendEvaluationToFacilitator}
-          />
-        )}
-        <VersionDrawer
-          open={showVersionSelector}
-          modalId={"version-selector"}
-          articleId={state.product.id_article}
-          setVersion={handleOnChangeProductVersion}
-          companyName={state.product.company}
-          currentVersion={state.product.version}
-          setShowVersionSelector={setShowVersionSelector}
-          jwt={token}
-        />
-        <EditionTopBar
-          setHeaderTop={setHeaderTop}
-          auditableVersion={auditableVersion}
-          setCompare={setCompare}
-          isAuditor={[1, 6].includes(user.id_role)}
-          withChat={location?.state?.withChat}
-          chatType={location?.state?.chatType}
-          productSelected={state.product}
-          token={token}
-          activeRetailer={{
-            id: state.active_retailer?.id_retailer,
-            name: state.active_retailer?.retailer,
-          }}
-        />
-        <div className="data-container">
-          <div className="image-data-panel">
-            <ImagePanel
-              /*
-                `images_values` puede ser null en pleno render: React 17 no
-                agrupa los dispatch que van después de un `await` y hay un render
-                con `services` puesto y las imágenes todavía no (ver el guard de
-                arriba). Por eso las interrogaciones.
-              */
-              imagesArray={state.images_values || []}
-              activeImage={state.images_values?.values?.[state.current_image] ?? {}}
-              currentIndex={state.current_image}
-              setActiveImage={handleOnChangeCurrentImage}
-              setShowModal={handleOnShowModalGallery}
-              // datos de la imagen
-              lists={state.images_values || []}
-              assignationsImages={state.collaborator_assignations["Imágenes"]}
-              imagesStatus={state.product?.images_status || "-"}
-              retailerSelected={state.active_retailer?.id_retailer}
-              isRetailer={isRetailer}
-              version={state.product.version}
-              shotThd={shotThd}
-              setShowVersionSelector={setShowVersionSelector}
-              setImages={handleOnChangeCurrentImage}
-              setAssignation={handleOnChangeAssignations}
-              onClickSave={handleOnClickSaveImages}
-              showSaveButton={userCanSave}
-            />
-          </div>
-
-          <div className="product-information">
-            <ProductHeader
-              // states
-              headerData={state.product}
-              productObservation={observation}
-              percent={
-                state.active_percentage?.percentagesGeneral?.required ?? 0
-              }
-              activeRetailer={{
-                id: state.active_retailer?.id_retailer,
-                name: state.active_retailer?.retailer,
-                image: state.active_retailer?.image,
-              }}
-              servicesData={state.services_data ? state.services_data : null}
-              isObservationVisible={isObservationVisible}
-              // actions
-              setActiveRetailer={handleOnChangeActiveRetailer}
-              approve={handleOnApproveSingleService}
-              approveAll={handleOnApproveAllServices}
-              reject={handleOnRejectSingleService}
-              rejectAll={handleOnRejectAllServices}
-              toggleObservation={handleOnToggleObservation}
-              hideObservation={handleOnHideObservation}
-              // sendToFacilitator={handleOnSendEvaluationToFacilitator} // No se usa?
-              // validations
-              // La evaluación de todos los servicios a la vez sigue en el hook
-              // (canShowBulkEvaluationButtons); pasa a permissions.js en la fase 2.
-              showApproveRejectAll={canShowBulkEvaluationButtons() || userCanSave}
-              // Validar o rechazar aplica al servicio abierto con editor: no en
-              // el Resumen ni en los servicios sin editor.
-              showValidationButtons={isClassic && userCanEvaluate && userCanSave}
-            />
-            <VariantsPanel
-              product={state.product}
-              esHijoDeOtro={esHijoDeOtro}
-              hijosDelProducto={hijosDelProducto}
-              family={family}
-              showFamily={showFamily}
-              setShowFamily={setShowFamily}
-              loadFamily={loadFamily}
-              loadingVariant={loadingVariant}
-              avisoFamilia={avisoFamilia}
-              openFamilyMember={openFamilyMember}
-              setPorDesvincular={setPorDesvincular}
-              setShowLinkVariants={setShowLinkVariants}
-              puedeAgruparse={puedeAgruparse}
-              variantGroup={variantGroup}
-              showGroup={showGroup}
-              setShowGroup={setShowGroup}
-              setShowGroupModal={setShowGroupModal}
-              handleOnLeaveGroup={handleOnLeaveGroup}
-            />
-            <ServiceHeader
-              service={selectedService}
-              isSummary={isSummary}
-              subtitle={
-                isSummary
-                  ? `${services.length} servicios · ${pendingCount} te ${pendingCount === 1 ? "toca" : "tocan"} a ti`
-                  : null
-              }
-              onOpenRail={!single && !isDesktop ? () => setRailOpen(true) : undefined}
-              team={
-                isClassic ? (
-                  <ServiceTeam
-                    assignees={selectedService.assignees}
-                    userId={user?.id_user}
-                    canAssign={canAssign(user)}
-                    assig={state.collaborator_assignations?.[state.active_tab]}
-                    // La que sí asigna (POST a asignaciones y actualiza el
-                    // producto). La barra de pestañas usaba `handleOnSetAssignation`,
-                    // que en el hook está vacía: asignar desde ahí no hacía nada.
-                    setAssignation={handleOnChangeAssignations}
-                    resetKey={state.active_tab}
-                  />
-                ) : catalogService ? (
-                  <ServiceTeam
-                    assignees={catalogService.assignees}
-                    userId={user?.id_user}
-                    roles={catalogService.api.roles}
-                    canAssign={catalogCanAssign}
-                    assig={{ collaborators: assignables }}
-                    setAssignation={handleOnAssignCatalogService}
-                    resetKey={catalogService.service_name}
-                  />
-                ) : null
-              }
-            >
-              {isClassic && (
-                <ServiceTools
-                  imagesSection={state.active_tab === "Imágenes"}
-                  imageLayout={imageLayout}
-                  setImageLayout={handleOnToggleImageLayout}
-                  // El botón actúa sobre la bandeja visible: en activos descargaba
-                  // las imágenes del producto, que no es lo que el usuario pidió.
-                  downloadImages={
-                    currentTray === TRAYS.ASSETS
-                      ? handleOnDownloadAssets
-                      : handleOnDownloadImages
-                  }
-                  askToDeleteImages={handleOnAskToDeleteImages}
-                  onClickSave={handleOnClickSave}
-                  showSaveButton={userCanSave}
-                  version={state.product.version}
-                  setShowVersionSelector={setShowVersionSelector}
-                />
-              )}
-            </ServiceHeader>
-            <div
-              className="services-information-container"
-              id="services-information-container"
-            >
-              {selected !== null && !isClassic ? (
-                <Box sx={{ pb: 2 }}>
-                  {catalogService ? (
-                    <CatalogServicePanel service={catalogService} onSetStatus={handleOnSetCatalogStatus} />
-                  ) : (
-                    <ServiceView
-                      selected={isSummary ? SUMMARY : selected}
-                      service={selectedService}
-                      services={services}
-                      userId={user?.id_user}
-                      onSelect={requestService}
-                      retailerName={state.active_retailer?.retailer}
-                    />
-                  )}
-                </Box>
-              ) : state.saving ? (
-                <Stack alignItems="center" justifyContent="center" sx={{ py: 6 }}>
-                  <CircularProgress size={32} sx={{ color: COLORS.magenta_s2 }} />
-                </Stack>
-              ) : (
-                <>
-                  {state.active_tab === "Descripción" &&
-                    (state.product?.description_status !== "NS" ? (
-                      <InputGroup
-                        activeSection={state.active_tab}
-                        inputGroup={state.descriptions_inputs[0]}
-                        updatedDescriptions={state.updated_descriptions_inputs}
-                        /* El parentesco es del producto, no del servicio: los
-                           dos endpoints lo devuelven igual. */
-                        variant={state.services?.datasheets?.variant}
-                        onRestoreInheritance={handleOnRestoreInheritance}
-                        articleId={state.product?.id_article}
-                        version={state.product.version}
-                        auditInputGroup={auditDescriptions[0]}
-                        setUpdatedDescriptions={handleOnSetUpdatedDescriptions}
-                        dinamicHeight={true}
-                        compare={compare}
-                      />
-                    ) : (
-                      <NoService />
-                    ))}
-                  {state.active_tab === "Ficha técnica" &&
-                    (state.product?.datasheet_status !== "NS" ? (
-                      <>
-                        {state.datasheets_inputs[0]?.data?.map(
-                          (dataGroup, index) => (
-                            <InputGroup
-                              key={index + "-" + state.active_retailer.retailer}
-                              articleId={state.product.id_article}
-                              version={state.version}
-                              activeSection={state.active_tab}
-                              inputGroup={dataGroup}
-                              dataInputs={state.datasheets_inputs[1]}
-                              variant={state.services?.datasheets?.variant}
-                              onRestoreInheritance={handleOnRestoreInheritance}
-                              auditInputs={auditDatasheets[1]}
-                              updatedDatasheets={
-                                state.updated_datasheets_inputs
-                              }
-                              setUpdatedDatasheets={
-                                handleOnSetUpdatedDatasheets
-                              }
-                              compare={compare}
-                            />
-                          ),
-                        )}
-                      </>
-                    ) : (
-                      <NoService />
-                    ))}
-                  {state.active_tab === "Imágenes" &&
-                    (state.product?.images_status !== "NS" ? (
-                      <ImagesSection
-                        imagesValues={state.images_values}
-                        selectedImages={state.selected_images}
-                        imageLayout={imageLayout}
-                        enableDigitalAssets={enableDigitalAssets}
-                        currentTray={currentTray}
-                        setActiveTray={setActiveTray}
-                        digitalAssets={digitalAssets}
-                        unsavedAssets={countUnsavedAssets(state)}
-                        selectedAssets={state.selected_assets}
-                        setSelectedAssets={handleOnSetSelectedAssets}
-                        setAllAssetsChecked={handleOnSetAllAssetsChecked}
-                        canEdit={userCanSave}
-                        setCheckAll={handleOnSetCheckAll}
-                        setSelectedImages={handleOnSetSelectedImages}
-                        onChangeCurrentImage={handleOnChangeCurrentImage}
-                        onUpdateImage={(item) =>
-                          dispatch({ type: "UPDATE_IMAGE_VALUE", payload: item })
-                        }
-                        onSelectImage={(item) =>
-                          dispatch({ type: "SET_SELECTED_IMAGE", payload: item })
-                        }
-                        getRootProps={getRootProps}
-                        getInputProps={getInputProps}
-                        isDragActive={isDragActive}
-                        openFilePicker={open}
-                      />
-                    ) : (
-                      <NoService />
-                    ))}
-                </>
-              )}
-            </div>
-            {isClassic &&
-              userCanSave &&
-              state.product[`${getConceptByTab(state.active_tab)}_status`] !==
-                "NS" && (
-                <CommentBox
-                  comment={state.comment}
-                  crossComment={crossComment}
-                  createComment={createComment}
-                  token={token}
-                  dispatch={dispatch}
-                  showChangeStatus={canChangeStatus(user, allowedAccountsToViewChangeStatus)}
-                  onOpenChangeStatus={() => setOpenChangeStatusModal(true)}
-                  showSendEvaluation={canSendToFacilitator(user)}
-                  // Solo para los roles 7 y 8, como en la vista original: para
-                  // el rol 6, `isEvaluationFinished` usa un `srv` que no existe
-                  // (defecto heredado) y tumbaría la pantalla.
-                  canSendEvaluation={
-                    canSendToFacilitator(user) &&
-                    isEvaluationFinished(user.id_role, state.active_tab, statusArray) &&
-                    state.missing_required_fields[state.active_tab] === 0
-                  }
-                  onSendEvaluation={handleOnSendEvaluationToFacilitator}
-                />
-              )}
-          </div>
-        </div>
-      </Container>
-      {/* Después del editor: va a la derecha y, con el teclado, se llega a él
-          después del contenido. */}
-      {!single && isDesktop && renderRail("rail")}
-      </Box>
-
-      {!single && !isDesktop && (
-        <Drawer
-          anchor={RAIL_SIDE}
-          open={railOpen}
-          onClose={() => setRailOpen(false)}
-          PaperProps={{ sx: { width: "min(320px, 88vw)" } }}
-        >
-          {renderRail("drawer")}
-        </Drawer>
-      )}
-
-      <Dialog open={Boolean(pendingSelection)} onClose={() => setPendingSelection(null)} maxWidth="xs" fullWidth>
-        <DialogTitle sx={{ fontFamily: FONTS.Raleway_600, color: COLORS.s5 }}>Cambios sin Guardar</DialogTitle>
-        <DialogContent>
-          <DialogContentText sx={{ fontFamily: FONTS.AvenirNext }}>
-            Estás cambiando de servicio y aun no guardas cambios ¿Estás seguro?
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions sx={{ px: 3, pb: 2 }}>
-          <MuiButton onClick={() => setPendingSelection(null)} sx={{ color: COLORS.s5, textTransform: "none" }}>
-            Cancelar
-          </MuiButton>
-          <MuiButton
-            variant="contained"
-            disableElevation
-            onClick={confirmServiceChange}
-            sx={{
-              textTransform: "none",
-              borderRadius: "20px",
-              bgcolor: COLORS.magenta_s2,
-              "&:hover": { bgcolor: COLORS.secondary_magenta },
-            }}
-          >
-            Aceptar
-          </MuiButton>
-        </DialogActions>
-      </Dialog>
-
-      <ReusedModalsStyles />
-      <ChangeStatusModal
-        state={state}
-        open={openChangeStatusModal}
-        onClose={() => {
-          setOpenChangeStatusModal(false);
-        }}
-        reloadData={loadData}
-        token={token}
-      />
-    </AiProductEditionProvider>
-  );
-};