contentoh-components-library 21.6.57 → 21.6.59

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

@@ -0,0 +1,19 @@
+import { ProviderProductEditionProvider } from "../RetailerProductEdition/context/provider-product-edition.context";
+import { CreatorsProductEditionView } from "./CreatorsProductEditionView";
+
+/**
+ * Edición de producto de Creators, responsiva (celular, tablet y desktop).
+ *
+ * Reemplazo de `RetailerProductEdition` con los mismos props:
+ * `tabsSections`, `productSelected`, `user`, `token`, `location` y
+ * `enableDigitalAssets`. Comparte el contexto (reducer y guardados) con la vista
+ * original; la lógica del componente es una copia en
+ * `hooks/useCreatorsProductEdition.js`.
+ */
+export const CreatorsProductEdition = (props) => {
+  return (
+    <ProviderProductEditionProvider>
+      <CreatorsProductEditionView {...props} />
+    </ProviderProductEditionProvider>
+  );
+};

package/src/components/pages/CreatorsProductEdition/mocks/api.fixtures.js

@@ -0,0 +1,357 @@
+/*
+  Respuestas de la API para las historias de CreatorsProductEdition.
+
+  Capturadas de dev (producto 144814, orden 10421, versión 3) el 2026-09-28 y
+  recortadas: la lista de tomas de imagen se dejó en seis. Los nombres del
+  personal se reemplazaron por genéricos: esta librería se publica en npm.
+
+  Cada respuesta conserva la envoltura que devuelve su lambda —unas mandan
+  `{ statusCode, body: "<json>" }` y otras `{ data }` directo—, porque el código
+  de la vista depende de esa forma.
+*/
+
+const ARTICLE_ID = 144814;
+const VERSION = 3;
+
+/** Envoltura de `integration: lambda`: el cuerpo viaja como cadena. */
+const lambda = (body) => ({
+  statusCode: 200,
+  headers: { "Access-Control-Allow-Origin": "*" },
+  body: JSON.stringify(body),
+});
+
+const RETAILERS = {
+  36: { id: 36, name: "Oxxo", country: "México", id_region: 1, is_active: 1, active: 1 },
+  38: { id: 38, name: "Del Sol", country: "México", id_region: 1, is_active: 1, active: 1 },
+};
+
+const comment = (id, concept, message) => ({
+  id,
+  user_id: 425,
+  article_id: ARTICLE_ID,
+  order_id: 10421,
+  message,
+  timestamp: "2025-11-15T21:12:00.000Z",
+  completed: 0,
+  version_id: VERSION,
+  concept,
+});
+
+const descriptionInputs = [
+  {
+    id_version: VERSION,
+    id: 4592,
+    id_retailer: 38,
+    name: "Header Del Sol",
+    id_description_type: null,
+    description:
+      "Encabezado: Nombre genérico del producto + Marca + Sub Marca (Opcional) + Modelo / Estilo / Tipo / Talla / Color / Capacidad / Tamaño / Edad Mínimo 40 Máximo 70 Caracteres",
+    min_words: null,
+    max_words: null,
+    min_chars: 40,
+    max_chars: 70,
+    type: "Alfanumérico",
+    active: 1,
+    required: true,
+    value: "Yoghurt Danone Frutas Selectas con trozos de fresa 120 g",
+    ai_generated: false,
+    isOverridden: false,
+    inheritable: true,
+  },
+  {
+    id_version: VERSION,
+    id: 4593,
+    id_retailer: 38,
+    name: "Descripción Comercial del Producto Del Sol",
+    id_description_type: null,
+    description: "Descripción Comercial",
+    min_words: null,
+    max_words: null,
+    min_chars: null,
+    max_chars: 1200,
+    type: "Alfanumérico",
+    active: 1,
+    required: true,
+    value:
+      "Yoghurt batido con trozos de fresa, ahora con más fruta y una textura más cremosa. Ideal para el desayuno o como colación.",
+    ai_generated: false,
+    isOverridden: false,
+    inheritable: true,
+  },
+];
+
+const service = (id_retailer, serviceName, status, task_user_group_id) => ({
+  id_order: 10421,
+  id_retailer,
+  id_article: ARTICLE_ID,
+  service: serviceName,
+  quantity: 1,
+  price: 0,
+  id_user: 1989,
+  datasheet_common: null,
+  discount: null,
+  status,
+  task_user_group_id,
+  is_billing: 0,
+  last_modified: "2025-11-15T21:10:26.000Z",
+  is_active: 1,
+  deleted_by: null,
+  deleted_at: null,
+  final_version_id: null,
+  retailerToProvider: null,
+  is_retailer: 0,
+  retailersId: null,
+});
+
+// Tomas de imagen: seis de las 36 que devuelve dev, con su orden por cadena.
+const IMAGE_INPUTS = [
+  { id: 1, name: "Central (frente comercial)", required: 1 },
+  { id: 11, name: "Hero image", required: 0 },
+  { id: 3, name: "Trasera (back)", required: 0 },
+  { id: 2, name: "Fuera del empaque / Abierto interior", required: 0 },
+  { id: 12, name: "Tabla nutrimental / ingredientes", required: 0 },
+  { id: 15, name: "Zoom", required: 0 },
+].map((input) => ({
+  vertical_dpi: null,
+  horizontal_dpi: null,
+  vertical_px: null,
+  horizontal_px: null,
+  ...input,
+}));
+
+const imageValue = (id, id_image, src, size) => ({
+  id,
+  status: null,
+  id_image,
+  packing_type: null,
+  image_type: null,
+  id_article: ARTICLE_ID,
+  src: `id-${ARTICLE_ID}/${VERSION}/${src}`,
+  timestamp: "2026-02-11T19:12:38.000Z",
+  id_version: VERSION,
+  width: size,
+  height: size,
+  scene_type: null,
+  image_shot_type: null,
+  last_modified: "2026-08-25T14:31:27.000Z",
+  has_leyend: 0,
+  onb_status: 1,
+  onb_comments: "",
+});
+
+const upcAttribute = {
+  id: 683,
+  name: "UPC",
+  is_datasheet: 1,
+  is_new_attribute: 0,
+  last_modified_by: 275,
+  created_at: "2026-07-01T13:56:44.000Z",
+  updated_at: "2026-07-01T13:56:44.000Z",
+  is_active: 1,
+  value: "400080029609",
+};
+
+const users = (role, count) => ({
+  data: Array.from({ length: count }, (_, i) => ({
+    name: `${role} ${i + 1}`,
+    last_name: null,
+    id_user: 9000 + i,
+  })),
+});
+
+const member = (articleId, name, upc, isCurrent = false) => ({ articleId, name, upc, isCurrent });
+
+const buildFamily = (familia) => {
+  if (familia === "padre") {
+    return {
+      articleId: ARTICLE_ID,
+      isVariant: false,
+      parent: null,
+      variants: [
+        member(144821, "Yoghurt Frutas Selectas durazno 120 g", "400080029630"),
+        member(144822, "Yoghurt Frutas Selectas mango 120 g con un nombre bastante largo", "400080029647"),
+      ],
+    };
+  }
+  if (familia === "hijo") {
+    return {
+      articleId: ARTICLE_ID,
+      isVariant: true,
+      parent: member(144800, "Yoghurt Frutas Selectas (línea)", "400080029500"),
+      variants: [
+        member(ARTICLE_ID, "Producto 300080", "400080029609", true),
+        member(144821, "Yoghurt Frutas Selectas durazno 120 g", "400080029630"),
+      ],
+    };
+  }
+  return { articleId: ARTICLE_ID, isVariant: false, parent: null, variants: [] };
+};
+
+/**
+ * Crea las respuestas.
+ *   - `images: false` simula un producto sin imágenes.
+ *   - `delSolStatus` cambia el estatus de los tres servicios de Del Sol; con
+ *     "AC" el auditor asignado puede validar o rechazar.
+ *   - `familia`: "padre" (este producto con dos hijos) o "hijo" (este producto
+ *     es hijo de otro, con un hermano).
+ *   - `grupo`: el producto está en un grupo de variantes con otros dos.
+ */
+export const buildFixtures = ({ images = true, delSolStatus, familia, grupo = false } = {}) => ({
+  comments: {
+    description: lambda({ message: "OK", data: [comment(15886, "description", "Revisar la longitud del header.")], order: null }),
+    datasheet: lambda({ message: "OK", data: [comment(15885, "datasheet", "Rechazo")], order: null }),
+    images: lambda({ message: "OK", data: [], order: null }),
+  },
+  datasheets: lambda({
+    message: "ok",
+    data: {
+      36: { retailer: RETAILERS[36], data: {} },
+      38: {
+        retailer: RETAILERS[38],
+        data: { 6: { groupId: "6", dataGroup: "Información Básica del Producto", inputs: ["683_38"] } },
+      },
+      inputs: {
+        "683_38": {
+          id: 683,
+          name: "UPC",
+          min_chars: null,
+          max_chars: 14,
+          type: "Numérico",
+          id_group: 6,
+          required: true,
+          description: "Código de Barras del Producto, GTIN, UPC",
+          option_list: null,
+          value: "400080029609",
+          onb_status: 1,
+          onb_comments: null,
+          ai_generated: 0,
+          isOverridden: false,
+          inheritable: false,
+          active: 1,
+          commercial_model: null,
+        },
+      },
+      variant: { isVariant: false, parentArticleId: null, parent: null },
+    },
+  }),
+  descriptions: lambda({
+    message: "OK",
+    data: [
+      { ...RETAILERS[36], inputs: [] },
+      { ...RETAILERS[38], inputs: descriptionInputs },
+    ],
+    inputsGeneral: Object.fromEntries(descriptionInputs.map((input) => [input.id, input])),
+    variant: { isVariant: false, parentArticleId: null, parent: null },
+  }),
+  users: {
+    4: { data: [{ name: "Coordinador Textos", last_name: null, id_user: 423 }] },
+    5: { data: [{ name: "Coordinador Imágenes", last_name: null, id_user: 424 }] },
+    6: { data: [{ name: "Auditor QA", last_name: null, id_user: 425 }, ...users("Auditor", 2).data] },
+    7: { data: [{ name: "Especialista Textos", last_name: null, id_user: 426 }, ...users("Especialista textos", 3).data] },
+    8: { data: [{ name: "Especialista Edición", last_name: null, id_user: 427 }, ...users("Especialista edición", 3).data] },
+  },
+  family: lambda(buildFamily(familia)),
+  group: lambda(
+    grupo
+      ? {
+          articleId: ARTICLE_ID,
+          group: "YOG-FRESA",
+          members: [
+            member(ARTICLE_ID, "Producto 300080", "400080029609", true),
+            member(144815, "Yoghurt Frutas Selectas fresa 4 pack", "400080029616"),
+            member(144816, "Yoghurt Frutas Selectas fresa 1 kg", "400080029623"),
+          ],
+        }
+      : { articleId: ARTICLE_ID, group: null, members: [] },
+  ),
+  services: lambda({
+    message: "OK",
+    data: [
+      service(36, "datasheet", "RA/AS", 2),
+      service(36, "description", "RA/AS", 2),
+      service(36, "images", "AA", 5),
+      service(38, "datasheet", delSolStatus ?? "RA/AS", 2),
+      service(38, "description", delSolStatus ?? "RA/AS", 2),
+      service(38, "images", delSolStatus ?? "AA", 5),
+    ],
+  }),
+  percentages: lambda([
+    {
+      id_article: ARTICLE_ID,
+      version: VERSION,
+      relations: [
+        {
+          id_retailer: 38,
+          id_category: 3513,
+          datasheet: { required: 100, general: 100 },
+          descriptions: { required: 100, general: 100 },
+          images: {
+            required: 100,
+            general: 80.01,
+            details: {
+              mandatoryShots: { total: 1, completed: 1, percentage: 100 },
+              optionalShots: { total: 5, completed: 2, percentage: 40 },
+              namingAttributes: { total: 1, completed: 1, percentage: 100 },
+            },
+          },
+          percentagesGeneral: { required: 100, general: 69.43 },
+        },
+      ],
+      summary: { totalRelations: 1, averageRequired: 100, averageGeneral: 69.43 },
+    },
+  ]),
+  images: lambda({
+    message: "OK",
+    data: {
+      retailers: [{ ...RETAILERS[38], min: 2, max: 5 }],
+      attrForImgs: { 38: [upcAttribute], general: [upcAttribute] },
+      imagePackagingType: [
+        { id: 1, name: "Embalaje adicional", deliverable_value: "0", status: 1 },
+        { id: 2, name: "En paquete", deliverable_value: "1", status: 1 },
+        { id: 3, name: "Producto expuesto", deliverable_value: "2", status: 1 },
+        { id: 4, name: "Embalaje multiforme", deliverable_value: "3", status: 1 },
+        { id: 5, name: "Si no es una imagen / no corresponde", deliverable_value: "X", status: 1 },
+      ],
+      imageType: [
+        { id: 1, name: "Fotografía del producto", deliverable_value: "A", status: 1 },
+        { id: 2, name: "Render", deliverable_value: "R", status: 1 },
+      ],
+      imageShotType: [
+        { id: 1, type_shot: "SKU", status: 1 },
+        { id: 2, type_shot: "SKU.1", status: 1 },
+        { id: 3, type_shot: "SKU.2", status: 1 },
+      ],
+      inputs: IMAGE_INPUTS,
+      retailerMandatories: [
+        [{ id_retailer: 38, id_category: 3506, id_image: 1, order: 1, priority: 1, mandatory: 1 }],
+      ],
+      inputsByRetailer: [
+        IMAGE_INPUTS.map((input, index) => ({
+          id_retailer: 38,
+          id_category: 3513,
+          id_image: input.id,
+          order: index + 1,
+          priority: 1,
+          mandatory: input.required,
+        })),
+      ],
+      values: images
+        ? [
+            imageValue(1070155, 1, "1-4f5e3461-395f-4a66-b676-c0a4fb9a3069.jpg", 250),
+            imageValue(1070366, 11, "11-b522d019-e845-4921-b28f-5ce4e3c135ba.jpg", 3000),
+            imageValue(1070367, 3, "3-37a15352-c6e9-47db-a0fa-ca277c571b1c.jpg", 3000),
+          ]
+        : [],
+      assets: [],
+    },
+    retailerWithoutInputs: [],
+  }),
+  // Historial de versiones del producto (`REACT_APP_VERSIONS_ENDPOINT`).
+  versions: lambda({
+    data: [
+      { version: 1, article_status: null, timestamp: null },
+      { version: 2, article_status: "AP", timestamp: "2026-05-14T17:20:00.000Z" },
+      { version: VERSION, article_status: null, timestamp: "2026-08-02T15:05:00.000Z" },
+    ],
+  }),
+});

package/src/components/pages/CreatorsProductEdition/mocks/mockApi.js

@@ -0,0 +1,144 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+import { buildFixtures } from "./api.fixtures";
+
+/*
+  API falsa para las historias: reemplaza el adaptador de axios mientras la
+  historia está montada. Toda la pantalla (contexto, utils, modales) usa la
+  instancia por omisión de axios y nadie usa `fetch`, así que con esto basta y
+  no hace falta ninguna dependencia nueva.
+
+  Lo que no reconoce responde 200 vacío y lo avisa en la consola: así una
+  llamada nueva no rompe la historia y se nota qué falta simular.
+*/
+
+const reply = (config, data, status = 200) =>
+  new Promise((resolve) =>
+    // Un poco de latencia para ver el skeleton y los estados de carga.
+    setTimeout(
+      () => resolve({ data, status, statusText: "OK", headers: {}, config, request: {} }),
+      150,
+    ),
+  );
+
+const pathOf = (url = "") => {
+  try {
+    const { pathname, searchParams } = new URL(url, "http://mock");
+    // `/dev/articles-data/images` → `articles-data/images`
+    return { path: pathname.replace(/^\/[^/]+\//, ""), params: searchParams };
+  } catch {
+    return { path: url, params: new URLSearchParams() };
+  }
+};
+
+const ok = { statusCode: 200, body: JSON.stringify({ message: "OK" }) };
+
+export const createMockAdapter = ({
+  images = true,
+  failLoad = false,
+  delSolStatus,
+  familia,
+  grupo,
+} = {}) => {
+  const fx = buildFixtures({ images, delSolStatus, familia, grupo });
+
+  return (config) => {
+    const method = (config.method || "get").toUpperCase();
+    const { path, params } = pathOf(config.url);
+    const query = { ...Object.fromEntries(params), ...(config.params || {}) };
+
+    if (failLoad && path === "services") {
+      return reply(config, { statusCode: 500, body: JSON.stringify({ message: "Error simulado" }) }, 500).then(
+        (response) => Promise.reject(Object.assign(new Error("Request failed with status code 500"), { response })),
+      );
+    }
+
+    if (method === "GET" && path === "comments") return reply(config, fx.comments[query.concept] ?? fx.comments.images);
+    if (path === "articles-data/datasheets") return reply(config, fx.datasheets);
+    if (method === "GET" && path === "articles-data/descriptions") return reply(config, fx.descriptions);
+    if (path === "articles-data/images") return reply(config, fx.images);
+    if (method === "GET" && path === "users") return reply(config, fx.users[query.fetchRole] ?? { data: [] });
+    if (path === "variants/family") return reply(config, fx.family);
+    if (path === "variants/group") return reply(config, fx.group);
+    if (method === "GET" && path === "services") return reply(config, fx.services);
+    if (method === "GET" && path === "versions") return reply(config, fx.versions);
+    if (path === "percentages") return reply(config, fx.percentages);
+    // Sin versión auditable ni observación: con la API real de dev estas dos
+    // fallan por CORS, así que la pantalla ya sabe vivir sin ellas.
+    if (method === "GET" && path === "version-manager") {
+      return reply(config, { statusCode: 200, body: JSON.stringify({ data: null }) });
+    }
+    if (method === "GET" && path === "articles-observations/read-observation") {
+      return reply(config, { statusCode: 200, body: JSON.stringify({ data: [{ observations: "" }] }) });
+    }
+
+    // Guardados, evaluaciones y demás escrituras: se aceptan sin hacer nada.
+    if (method !== "GET") {
+      console.info(`[mock API] ${method} ${path}`, config.data);
+      return reply(config, ok);
+    }
+
+    console.warn(`[mock API] sin simular: ${method} ${path}`, query);
+    return reply(config, { statusCode: 200, body: JSON.stringify({ message: "OK", data: [] }) });
+  };
+};
+
+const realAdapter = () => {
+  if (!axios.defaults.__realAdapter) axios.defaults.__realAdapter = axios.defaults.adapter;
+  return axios.defaults.__realAdapter;
+};
+
+let activeMock = null;
+
+/*
+  Monta la API falsa ANTES que la pantalla: el adaptador se cambia durante el
+  render, y los efectos de los hijos —que son los que piden los datos— corren
+  después.
+
+  Dos detalles que no son adorno:
+    - Se aplica en CADA render, no solo al montar. Al cambiar de historia desde
+      el menú, React reutiliza este mismo componente con otras `options` (por
+      ejemplo, de "Error al cargar" a otra): si solo se aplicara al montar, la
+      historia nueva seguiría con la API de la anterior.
+    - Al desmontarse solo restaura si nadie más tomó el relevo. El render de la
+      historia nueva ocurre ANTES que la limpieza de la vieja; restaurar a ciegas
+      le quitaría la API falsa a la historia que acaba de entrar.
+*/
+const MockApi = ({ options, children }) => {
+  const [id] = useState(() => Symbol("mock-api"));
+  const key = JSON.stringify(options ?? {});
+  realAdapter();
+  if (activeMock?.id !== id || activeMock.key !== key) {
+    axios.defaults.adapter = createMockAdapter(options);
+    activeMock = { id, key };
+  }
+  useEffect(
+    () => () => {
+      if (activeMock?.id === id) {
+        axios.defaults.adapter = realAdapter();
+        activeMock = null;
+      }
+    },
+    [id],
+  );
+  return children;
+};
+
+/**
+ * Decorador de Storybook que envuelve la historia en la API falsa. La `key`
+ * obliga a remontar la pantalla cuando cambian las opciones, para que vuelva a
+ * pedir los datos con la API nueva.
+ */
+export const withMockApi = (options) => (Story) => (
+  <MockApi key={JSON.stringify(options ?? {})} options={options}>
+    <Story />
+  </MockApi>
+);
+
+/** Decorador para las historias contra dev: garantiza el adaptador real. */
+export const withRealApi = (Story) => {
+  axios.defaults.adapter = realAdapter();
+  activeMock = null;
+  return <Story />;
+};

package/src/components/pages/CreatorsProductEdition/sections/CommentBox.jsx

@@ -0,0 +1,183 @@
+import { useState } from "react";
+import { Box, Button, Paper, Stack, TextField, Typography } from "@mui/material";
+
+import successIcon from "../../../../assets/images/genericModal/genericModalCheck.svg";
+import errorIcon from "../../../../assets/images/genericModal/errorModal.svg";
+
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Caja de comentario y botones de acción ("Cambio de Estatus", "Enviar
+  evaluación").
+
+  Reemplaza a TagAndInput (Quill) + Commentary + los botones de la vista
+  original. El comentario se guarda con el mismo `createComment` y los mismos
+  avisos que `handleOnSubmitComment`, pero leyendo el campo controlado en lugar
+  del DOM de Quill. Con eso se va un defecto del original: solo guardaba el
+  primer párrafo (`.ql-editor > p`), así que un comentario de dos párrafos
+  perdía el segundo.
+*/
+
+const MAX_CHARS = 999;
+
+/*
+  Se guarda el texto tal cual, con sus saltos de línea: los comentarios se
+  pintan como texto (`white-space: pre-wrap`), no como HTML, y es el mismo
+  formato que ya usa el mensaje de rechazo (convierte los <br> de Quill a \n).
+*/
+const toCommentText = (text) => text.trim();
+
+const pill = {
+  borderRadius: "30px",
+  px: "25px",
+  py: "10px",
+  minHeight: 40,
+  textTransform: "none",
+  fontSize: 18,
+  lineHeight: "22px",
+  boxShadow: "none",
+  whiteSpace: "nowrap",
+  "&:hover": { boxShadow: "none", opacity: 0.7 },
+};
+
+export const CommentBox = ({
+  comment,
+  crossComment,
+  createComment,
+  token,
+  dispatch,
+  showChangeStatus,
+  onOpenChangeStatus,
+  showSendEvaluation,
+  canSendEvaluation,
+  onSendEvaluation,
+}) => {
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+
+  const notify = (payload) => dispatch({ type: "SET_MODAL", payload: { show: true, ...payload } });
+
+  const submit = async () => {
+    if (!text.trim()) return;
+    setSending(true);
+    try {
+      await createComment(toCommentText(text), token);
+      setText("");
+      notify({ title: "", message: "Comentario guardado con éxito", image: successIcon });
+    } catch (error) {
+      console.error("Error saving comment:", error);
+      notify({ title: "Error", message: "Hubo un error al guardar el comentario", image: errorIcon });
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Stack
+      direction={{ xs: "column", sm: "row" }}
+      alignItems={{ xs: "stretch", sm: "flex-end" }}
+      justifyContent="space-between"
+      flexWrap="wrap"
+      gap={1.5}
+      sx={{ py: "10px", minWidth: 0 }}
+    >
+      {!comment ? (
+        <Stack
+          direction={{ xs: "column", md: "row" }}
+          alignItems={{ xs: "stretch", md: "flex-end" }}
+          gap={1}
+          sx={{ flex: 1, minWidth: 0 }}
+        >
+          <Box sx={{ width: { xs: "100%", md: "min(500px, 100%)" } }}>
+            <Typography
+              component="label"
+              htmlFor="commentary-box-input"
+              sx={{ display: "block", mb: 0.5, fontFamily: FONTS.Raleway, fontSize: 14, color: COLORS.color_gray }}
+            >
+              Caja de Comentario
+            </Typography>
+            <TextField
+              id="commentary-box-input"
+              multiline
+              minRows={4}
+              maxRows={8}
+              fullWidth
+              value={text}
+              onChange={(e) => setText(e.target.value.slice(0, MAX_CHARS))}
+              helperText={`${text.length}/${MAX_CHARS}`}
+              FormHelperTextProps={{ sx: { textAlign: "right", mx: 0 } }}
+              InputProps={{ sx: { fontFamily: FONTS.AvenirNext, fontSize: 13, borderRadius: "3px" } }}
+            />
+          </Box>
+          <Button
+            variant="outlined"
+            disabled={!text.trim() || sending}
+            onClick={submit}
+            sx={{
+              ...pill,
+              mb: { md: "23px" },
+              fontSize: 16,
+              borderColor: COLORS.s5,
+              color: COLORS.s5,
+              "&:hover": { ...pill["&:hover"], borderColor: COLORS.s5 },
+            }}
+          >
+            {sending ? "Enviando…" : "Enviar comentario"}
+          </Button>
+        </Stack>
+      ) : (
+        <Paper
+          variant="outlined"
+          sx={{ flex: 1, minWidth: 0, maxWidth: { md: 500 }, minHeight: 80, p: "10px", borderColor: COLORS.s2 }}
+        >
+          <Typography
+            sx={{
+              whiteSpace: "pre-wrap",
+              overflowWrap: "anywhere",
+              fontFamily: FONTS.AvenirNext,
+              fontSize: 12,
+              lineHeight: "15px",
+              color: COLORS.deep_gray,
+              textDecoration: crossComment ? "line-through" : "none",
+            }}
+          >
+            {comment?.message}
+          </Typography>
+        </Paper>
+      )}
+
+      {(showChangeStatus || showSendEvaluation) && (
+        <Stack gap={2} sx={{ flexShrink: 0 }}>
+          {showChangeStatus && (
+            <Button
+              id="button-change-status"
+              variant="contained"
+              onClick={onOpenChangeStatus}
+              sx={{ ...pill, bgcolor: "#E33AA9", "&:hover": { ...pill["&:hover"], bgcolor: "#E33AA9" } }}
+            >
+              Cambio de Estatus
+            </Button>
+          )}
+          {showSendEvaluation && (
+            // Igual que el original: gris y deshabilitado mientras no se pueda
+            // enviar (evaluación sin terminar o faltan requeridos).
+            <Button
+              variant="contained"
+              disabled={!canSendEvaluation}
+              onClick={onSendEvaluation}
+              sx={{
+                ...pill,
+                bgcolor: "#71de56",
+                color: COLORS.white,
+                "&:hover": { ...pill["&:hover"], bgcolor: "#71de56" },
+                "&.Mui-disabled": { bgcolor: "grey", color: COLORS.white },
+              }}
+            >
+              Enviar evaluación
+            </Button>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+};