contentoh-components-library 21.6.61 → 21.6.62

package/src/components/organisms/ServicesWorkspace/servicesModel.js

@@ -1,203 +0,0 @@
-/*
-  Modelo de servicios de un producto para la edición.
-
-  Misma lógica que la tabla de productos de Creators (ServicesCell/rowServices):
-  un servicio se identifica por `service_name`, se agrupa en etapas por su
-  estatus base y se pinta con los mismos colores, para que el usuario reconozca
-  lo que vio en la tabla al entrar a la edición.
-
-  Fuentes, en orden:
-    1. `serviceStatuses` (listado ligero, view=summary): un elemento por servicio.
-    2. Los tres estatus de siempre (datasheet/description/images_status).
-    3. `demo_services`: servicios de ejemplo para revisar el diseño (ver demo.js).
-*/
-
-/** Servicios que tienen editor propio en esta pantalla, y su pestaña. */
-export const EDITOR_TABS = {
-  description: "Descripción",
-  datasheet: "Ficha técnica",
-  images: "Imágenes",
-};
-
-const LEGACY = [
-  { service_name: "datasheet", display_name: "Ficha técnica", statusKey: "datasheet_status" },
-  { service_name: "description", display_name: "Descripción", statusKey: "description_status" },
-  { service_name: "images", display_name: "Imágenes", statusKey: "images_status" },
-];
-
-const NOT_REQUESTED = [undefined, null, "", "NS", "NULL", "-"];
-
-export const STATUS_NAMES = {
-  PA: "Por asignar",
-  AS: "Asignado",
-  R: "Recibido",
-  CA: "Capturando",
-  IE: "Información enviada",
-  RC: "Rechazado coordinador",
-  AC: "Aprobado coordinador",
-  RA: "Rechazado auditor",
-  AA: "Aprobado auditor",
-  RP: "Rechazado proveedor",
-  AP: "Aprobado proveedor",
-  ACA: "Aprobado cadena",
-  RCA: "Rechazado cadena",
-  SAC: "Solicitud auditoría Content-oh!",
-  AAC: "Aprobado auditoría Content-oh!",
-  RAC: "Rechazado auditoría Content-oh!",
-  FAP: "Finalización auditoría por proveedor",
-  Ex: "Exportado",
-  REG: "Registrado",
-};
-
-const baseStatus = (status) => String(status ?? "").split("/")[0];
-
-export const getStatusName = (status) =>
-  STATUS_NAMES[status] ?? STATUS_NAMES[baseStatus(status)] ?? status ?? "Sin estatus";
-
-/** Mismos colores que la tabla de Creators (helper.getStatusColor). */
-export const getStatusColor = (status) => {
-  switch (baseStatus(status)) {
-    case "R":
-    case "PA":
-    case "SAC":
-      return "#E67432";
-    case "ACA":
-    case "AC":
-    case "AP":
-    case "AA":
-    case "AAC":
-      return "#18A0FB";
-    case "RC":
-    case "RA":
-    case "RCA":
-    case "RP":
-    case "RAC":
-      return "#D74DED";
-    case "CA":
-    case "AS":
-    case "IE":
-      return "#ED9A4D";
-    case "Ex":
-    case "FAP":
-      return "#71DE56";
-    default:
-      return "#D4D1D7";
-  }
-};
-
-export const SERVICE_STAGES = [
-  { stage_name: "pending", display_name: "Por asignar", singular: "por asignar", plural: "por asignar", statuses: ["R", "PA"] },
-  { stage_name: "in_progress", display_name: "En proceso", singular: "en proceso", plural: "en proceso", statuses: ["AS", "CA", "IE"] },
-  { stage_name: "rejected", display_name: "Rechazados", singular: "rechazado", plural: "rechazados", statuses: ["RC", "RA", "RP", "RCA", "RAC"] },
-  { stage_name: "review", display_name: "En revisión y aprobación", singular: "en revisión", plural: "en revisión", statuses: ["AC", "AA", "AP", "ACA", "SAC", "AAC"] },
-  { stage_name: "done", display_name: "Terminados", singular: "terminado", plural: "terminados", statuses: ["Ex", "FAP"] },
-  { stage_name: "registered", display_name: "Registrados (solo marca)", singular: "registrado", plural: "registrados", statuses: ["REG"] },
-].map((stage) => ({
-  ...stage,
-  color: stage.stage_name === "registered" ? "#CBCBCB" : getStatusColor(stage.statuses[0]),
-}));
-
-const STAGE_BY_NAME = Object.fromEntries(SERVICE_STAGES.map((stage) => [stage.stage_name, stage]));
-const ATTENTION_ORDER = ["rejected", "pending", "in_progress", "review", "done", "registered"];
-
-export const getServiceStage = (service) => {
-  if (!service.has_workflow) return STAGE_BY_NAME.registered;
-  const base = baseStatus(service.status);
-  return SERVICE_STAGES.find((stage) => stage.statuses.includes(base)) ?? STAGE_BY_NAME.in_progress;
-};
-
-export const groupServicesByStage = (services) =>
-  SERVICE_STAGES.map((stage) => ({
-    stage,
-    services: services.filter((service) => getServiceStage(service).stage_name === stage.stage_name),
-  })).filter((group) => group.services.length > 0);
-
-export const getAttention = (groups) => {
-  const workflow = groups.filter((group) => group.stage.stage_name !== "registered");
-  if (workflow.length > 0 && workflow.every((group) => group.stage.stage_name === "done")) {
-    return { stage: STAGE_BY_NAME.done, label: "Terminado" };
-  }
-  const first = ATTENTION_ORDER.map((name) => groups.find((group) => group.stage.stage_name === name)).find(Boolean);
-  if (!first) return null;
-  const count = first.services.length;
-  return { stage: first.stage, label: `${count} ${count === 1 ? first.stage.singular : first.stage.plural}` };
-};
-
-/** Cuál abrir primero: lo que más pide atención. */
-export const pickInitialService = (services) => {
-  const groups = groupServicesByStage(services);
-  const first = ATTENTION_ORDER.map((name) => groups.find((group) => group.stage.stage_name === name)).find(Boolean);
-  return first?.services[0]?.service_name ?? null;
-};
-
-const assigneesOf = (product, serviceName) => ({
-  especialist: product?.[`id_${serviceName}_especialist`] || null,
-  facilitator: product?.[`id_${serviceName}_facilitator`] || null,
-});
-
-/**
- * Servicios del producto (normalizado por la edición o con la forma del
- * listado): [{ service_name, display_name, status, has_workflow,
- * editor_tab, assignees: { especialist, facilitator }, is_demo }]
- */
-export const getProductServices = (product) => {
-  if (!product) return [];
-  let base;
-  if (Array.isArray(product.serviceStatuses) && product.serviceStatuses.length > 0) {
-    base = product.serviceStatuses
-      .filter((service) => !NOT_REQUESTED.includes(service.status))
-      .map((service) => {
-        const legacy = LEGACY.find((def) => def.service_name === service.service_name);
-        const displayName =
-          service.display_name && service.display_name !== service.service_name
-            ? service.display_name
-            : legacy?.display_name ?? service.service_name;
-        return {
-          service_name: service.service_name,
-          display_name: displayName,
-          status: service.status,
-          has_workflow: service.has_workflow !== false,
-        };
-      });
-  } else {
-    base = LEGACY.filter((def) => !NOT_REQUESTED.includes(product[def.statusKey])).map((def) => ({
-      service_name: def.service_name,
-      display_name: def.display_name,
-      status: product[def.statusKey],
-      has_workflow: true,
-    }));
-  }
-
-  const demo = (product.demo_services ?? []).map((service) => ({
-    service_name: service.service_name,
-    display_name: service.display_name,
-    status: service.status,
-    has_workflow: service.has_workflow !== false,
-    deliverable_type: service.deliverable_type,
-    is_demo: true,
-  }));
-
-  return [...base, ...demo].map((service) => ({
-    ...service,
-    editor_tab: EDITOR_TABS[service.service_name] ?? null,
-    assignees: service.is_demo ? {} : assigneesOf(product, service.service_name),
-  }));
-};
-
-/**
- * Estatus del servicio en cada cadena. Sale de `statusByRetailer` (detalle del
- * producto); los servicios de ejemplo lo inventan a partir del suyo.
- */
-export const getRetailerStatuses = (product, service, retailers = []) => {
-  const nameOf = (id) => retailers.find((retailer) => retailer.id_retailer === id)?.retailer ?? `Cadena ${id}`;
-  if (service.is_demo) {
-    return retailers.map((retailer, index) => ({
-      id_retailer: retailer.id_retailer,
-      retailer: retailer.retailer,
-      status: index === 0 ? service.status : baseStatus(service.status),
-    }));
-  }
-  return (product?.statusByRetailer ?? [])
-    .filter((item) => item.service === service.service_name)
-    .map((item) => ({ id_retailer: item.retailer_id, retailer: nameOf(item.retailer_id), status: item.status }));
-};

package/src/components/organisms/ServicesWorkspace/tooltipStyles.js

@@ -1,27 +0,0 @@
-/**
- * Tooltip blanco con la paleta de la plataforma (en lugar del gris oscuro de
- * MUI). Se pasa a <Tooltip {...whiteTooltipProps}>.
- */
-export const whiteTooltipProps = {
-  componentsProps: {
-    tooltip: {
-      sx: {
-        backgroundColor: "#FFFFFF",
-        color: "#262626",
-        border: "1px solid #F0EEF2",
-        borderRadius: "10px",
-        boxShadow: 4,
-        p: 1.5,
-        maxWidth: 340,
-        fontFamily: "Lato, sans-serif",
-        fontSize: 12,
-      },
-    },
-    arrow: {
-      sx: {
-        color: "#FFFFFF",
-        "&::before": { border: "1px solid #F0EEF2" },
-      },
-    },
-  },
-};

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

@@ -1,175 +0,0 @@
-/*
-  GET /product-services para las historias de la edición unificada
-  (ProductEdition): el mismo producto de api.fixtures.js (144814, orden 10421)
-  con sus tres servicios de siempre en Oxxo (36) y Del Sol (38), más tres del
-  catálogo: A+ (flujo completo, por cadena), Compra de producto en tienda
-  (casilla) y Levantamiento y recolección (avance), los dos últimos por
-  producto (cadena 0). Nombres, colores e íconos como en cat_service y
-  cat_status (docs/sql/catalog 002, 003 y 006 del backend).
-
-  `applyProductServicesChange` simula PUT /product-services/{action} sobre una
-  copia, para que la historia muestre el cambio al volver a pedir la lista.
-*/
-
-const ARTICLE_ID = 144814;
-const ORDER_ID = 10421;
-
-const STATUS = {
-  PA: { status_name: "PA", display_name: "Por asignar", color: "#E57432", flow_name: "workflow", is_final: false, progress_percent: null },
-  AA: { status_name: "AA", display_name: "Aprobado auditor", color: "#18A0FB", flow_name: "workflow", is_final: false, progress_percent: null },
-  "RA/AS": { status_name: "RA/AS", display_name: "Rechazado auditor / Asignado", color: "#D74DED", flow_name: "workflow", is_final: false, progress_percent: null },
-  PE: { status_name: "PE", display_name: "Pendiente", color: "#E57432", flow_name: "checkbox", is_final: false, progress_percent: 0 },
-  HE: { status_name: "HE", display_name: "Hecho", color: "#71DE56", flow_name: "checkbox", is_final: true, progress_percent: 100 },
-  SE: { status_name: "SE", display_name: "Sin empezar", color: "#E57432", flow_name: "progress", is_final: false, progress_percent: 0 },
-  EP: { status_name: "EP", display_name: "En proceso", color: "#ED9A4D", flow_name: "progress", is_final: false, progress_percent: 50 },
-  TE: { status_name: "TE", display_name: "Terminado", color: "#71DE56", flow_name: "progress", is_final: true, progress_percent: 100 },
-};
-
-const OPTIONS = { checkbox: ["PE", "HE"], progress: ["SE", "EP", "TE"] };
-
-const WEIGHT = { PA: 1, "RA/AS": 7, AA: 10, PE: 2, SE: 2, EP: 3, HE: 99, TE: 99 };
-
-export const PEOPLE = {
-  423: { id_user: 423, name: "Coordinador Textos", last_name: null, id_role: 4 },
-  424: { id_user: 424, name: "Coordinador Imágenes", last_name: null, id_role: 5 },
-  425: { id_user: 425, name: "Auditor QA", last_name: null, id_role: 6 },
-  426: { id_user: 426, name: "Especialista Textos", last_name: null, id_role: 7 },
-  427: { id_user: 427, name: "Especialista Edición", last_name: null, id_role: 8 },
-};
-
-const RETAILER_NAMES = { 0: "Sin cadena", 36: "Oxxo", 38: "Del Sol" };
-
-const retailer = (id, statusName) => ({
-  id_retailer: id,
-  retailer_name: RETAILER_NAMES[id],
-  quantity: 1,
-  status: STATUS[statusName] ?? null,
-});
-
-const generalOf = (retailers) =>
-  retailers
-    .filter((item) => item.status)
-    .reduce((low, item) => (!low || WEIGHT[item.status.status_name] < WEIGHT[low.status_name] ? item.status : low), null);
-
-const service = ({ legacy = false, flow, retailers, roles, assignees, actions, ...rest }) => ({
-  icon_name: null,
-  deliverable_type: null,
-  has_workflow: flow !== "flag",
-  requires_qa: roles.includes("auditor"),
-  per_retailer: !retailers.some((item) => item.id_retailer === 0),
-  is_legacy: legacy,
-  status_flow: { flow_name: flow, flow_type: flow === "workflow" || flow === "flag" ? flow : "simple" },
-  status: generalOf(retailers),
-  status_options: OPTIONS[flow]?.map((name) => STATUS[name]) ?? [],
-  retailers,
-  roles,
-  assignees: { especialist: null, facilitator: null, auditor: null, ...assignees },
-  actions,
-  ...rest,
-});
-
-const category = (category_name, display_name) => ({ category_name, display_name });
-
-/** Respuesta de GET /product-services (el cuerpo, sin la envoltura de la lambda). */
-export const buildProductServices = ({ delSolStatus } = {}) => ({
-  article_id: ARTICLE_ID,
-  order_id: ORDER_ID,
-  auditor: PEOPLE[425],
-  services: [
-    service({
-      service_name: "datasheet",
-      display_name: "Ficha técnica",
-      icon_name: "datasheet",
-      category: category("texts", "Textos"),
-      legacy: true,
-      flow: "workflow",
-      retailers: [retailer(36, "RA/AS"), retailer(38, delSolStatus ?? "RA/AS")],
-      roles: ["especialist", "facilitator", "auditor"],
-      assignees: { especialist: PEOPLE[426], facilitator: PEOPLE[423], auditor: PEOPLE[425] },
-      actions: { set_status: false, assign: false },
-    }),
-    service({
-      service_name: "description",
-      display_name: "Descripción",
-      icon_name: "description",
-      category: category("texts", "Textos"),
-      legacy: true,
-      flow: "workflow",
-      retailers: [retailer(36, "RA/AS"), retailer(38, delSolStatus ?? "RA/AS")],
-      roles: ["especialist", "facilitator", "auditor"],
-      assignees: { especialist: PEOPLE[426], facilitator: PEOPLE[423], auditor: PEOPLE[425] },
-      actions: { set_status: false, assign: false },
-    }),
-    service({
-      service_name: "images",
-      display_name: "Imágenes",
-      icon_name: "images",
-      category: category("images", "Imágenes"),
-      legacy: true,
-      flow: "workflow",
-      retailers: [retailer(36, "AA"), retailer(38, delSolStatus ?? "AA")],
-      roles: ["especialist", "facilitator", "auditor"],
-      assignees: { especialist: PEOPLE[427], facilitator: PEOPLE[424], auditor: PEOPLE[425] },
-      actions: { set_status: false, assign: false },
-    }),
-    service({
-      service_name: "aplusPlatinum",
-      display_name: "A+ / Platinum SKU",
-      icon_name: "aplus",
-      category: category("media", "Multimedia y diseño"),
-      flow: "workflow",
-      retailers: [retailer(36, "PA"), retailer(38, "PA")],
-      roles: ["especialist", "facilitator", "auditor"],
-      assignees: { auditor: PEOPLE[425] },
-      actions: { set_status: false, assign: true },
-    }),
-    service({
-      service_name: "productPurchase",
-      display_name: "Compra de producto en tienda",
-      icon_name: "purchase",
-      category: category("logistics", "Logística"),
-      flow: "checkbox",
-      retailers: [retailer(0, "PE")],
-      roles: ["especialist"],
-      assignees: { especialist: PEOPLE[427] },
-      actions: { set_status: true, assign: true },
-    }),
-    service({
-      service_name: "productPickup",
-      display_name: "Levantamiento y recolección",
-      icon_name: "pickup",
-      category: category("logistics", "Logística"),
-      flow: "progress",
-      retailers: [retailer(0, "SE")],
-      roles: ["especialist"],
-      assignees: {},
-      actions: { set_status: true, assign: true },
-    }),
-  ],
-});
-
-/** Personas que se pueden asignar (GET /service-catalog?view=assignables). */
-export const assignablesFor = (role) =>
-  Object.values(PEOPLE)
-    .filter((person) => (role === "facilitator" ? [4, 5] : [7, 8]).includes(person.id_role))
-    .map((person) => ({ id_user: person.id_user, name: person.name, email: null, id_role: person.id_role }));
-
-/** Aplica PUT /product-services/{action} sobre `body` (se modifica en su lugar). */
-export const applyProductServicesChange = (body, action, data) => {
-  const target = body.services.find((item) => item.service_name === data?.serviceName);
-  if (!target) return { statusCode: 404, message: "El producto no tiene ese servicio en esta orden." };
-  if (action === "set-status") {
-    const status = STATUS[data.statusName];
-    if (!status) return { statusCode: 400, message: "Estatus no válido." };
-    target.retailers.forEach((item) => {
-      if (!data.retailerIds || data.retailerIds.includes(item.id_retailer)) item.status = status;
-    });
-    target.status = generalOf(target.retailers);
-    return { statusCode: 200 };
-  }
-  if (action === "assign") {
-    target.assignees[data.role] = data.userId ? PEOPLE[data.userId] ?? { id_user: data.userId } : null;
-    return { statusCode: 200 };
-  }
-  return { statusCode: 400, message: `Acción no válida: ${action}.` };
-};

package/src/components/pages/ProductEdition/ProductEdition.stories.js

@@ -1,106 +0,0 @@
-import { ProductEdition } from "./index";
-import { withMockApi } from "../CreatorsProductEdition/mocks/mockApi";
-import { allCatalogServices } from "../../organisms/ServicesNavigation/catalog";
-
-/*
-  Edición de producto unificada con datos locales: no le pega a ninguna API
-  (la simula `CreatorsProductEdition/mocks`). Guardar, aprobar o rechazar se
-  acepta sin hacer nada y queda en la consola como `[mock API]`.
-
-  El producto y los usuarios son los mismos de las historias de
-  CreatorsProductEdition, para comparar las dos pantallas con lo mismo.
-*/
-import { ImageEditor } from "../RetailerProductEdition/stories/ImageEditor.stories";
-import { TextEditor } from "../RetailerProductEdition/stories/TextEditor.stories";
-import { Auditor } from "../RetailerProductEdition/stories/Auditor.stories";
-
-export default {
-  title: "Components/pages/ProductEdition",
-  component: ProductEdition,
-  decorators: [withMockApi()],
-  parameters: { layout: "fullscreen" },
-};
-
-// Como en la app: la pantalla vive en una caja de altura fija.
-const Template = (args) => (
-  <div style={{ height: "100vh", display: "flex", overflow: "hidden" }}>
-    <ProductEdition {...args} />
-  </div>
-);
-
-const base = {
-  app: "creators",
-  token: ImageEditor.args.token,
-  productSelected: ImageEditor.args.productSelected,
-  enableDigitalAssets: true,
-};
-
-const TODAS_LAS_PESTAÑAS = {
-  Descripción: true,
-  "Ficha técnica": true,
-  Imágenes: true,
-};
-
-/** Servicios del catálogo que todavía no tienen editor (vista de muestra). */
-const SERVICIOS_DE_EJEMPLO = [
-  { service_name: "translation", status: "CA" },
-  { service_name: "seo", status: "AS" },
-  { service_name: "photo", status: "Ex" },
-  { service_name: "videos", status: "IE" },
-  { service_name: "brandstore", status: "AC" },
-  { service_name: "quality", status: "PA" },
-];
-
-/** Especialista de imágenes (rol 8): «Míos» le muestra solo Imágenes. */
-export const EspecialistaImagenes = Template.bind({});
-EspecialistaImagenes.storyName = "Especialista de imágenes";
-EspecialistaImagenes.args = {
-  ...base,
-  tabsSections: ImageEditor.args.tabsSections,
-  user: ImageEditor.args.user,
-};
-
-/** Especialista de textos (rol 7): Ficha técnica y Descripción. */
-export const EspecialistaTextos = Template.bind({});
-EspecialistaTextos.storyName = "Especialista de textos";
-EspecialistaTextos.args = {
-  ...base,
-  tabsSections: TextEditor.args.tabsSections,
-  user: TextEditor.args.user,
-};
-
-/** Auditor QA (rol 6): asignado a todo el producto, ve los tres servicios. */
-export const AuditorQA = Template.bind({});
-AuditorQA.storyName = "Auditor QA";
-AuditorQA.args = {
-  ...base,
-  tabsSections: TODAS_LAS_PESTAÑAS,
-  user: Auditor.args.user,
-};
-
-/** Auditor con servicios de ejemplo: así se ve con más de los tres de siempre. */
-export const ConServiciosDeEjemplo = Template.bind({});
-ConServiciosDeEjemplo.storyName = "Con servicios de ejemplo";
-ConServiciosDeEjemplo.args = {
-  ...AuditorQA.args,
-  demoServices: SERVICIOS_DE_EJEMPLO,
-};
-
-/**
- * Auditor con todos los servicios activos de la plataforma (los de
- * `cat_service`): los tres con editor salen del producto y el resto son de
- * ejemplo, con estatus variados. Sirve para ver la lista lateral llena: los
- * cinco bloques (con Mantenimiento), el buscador y el Resumen.
- */
-export const TodosLosServicios = Template.bind({});
-TodosLosServicios.storyName = "Todos los servicios";
-TodosLosServicios.args = {
-  ...AuditorQA.args,
-  demoServices: allCatalogServices({ exclude: ["datasheet", "description", "images"] }),
-};
-
-/** En celular la lista se abre como panel con el botón «Servicios». */
-export const EspecialistaImagenesCelular = Template.bind({});
-EspecialistaImagenesCelular.storyName = "Especialista de imágenes · celular";
-EspecialistaImagenesCelular.args = EspecialistaImagenes.args;
-EspecialistaImagenesCelular.parameters = { viewport: { defaultViewport: "mobile2" } };