contentoh-components-library 21.6.61 → 21.6.62

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

@@ -190,13 +190,21 @@ const buildFamily = (familia) => {
 /**
  * Crea las respuestas.
  *   - `images: false` simula un producto sin imágenes.
+ *   - `imagesService: false` simula un producto sin el servicio de imágenes
+ *     contratado: sin su renglón en los servicios, el estatus queda en "NS".
  *   - `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 } = {}) => ({
+export const buildFixtures = ({
+  images = true,
+  imagesService = 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 }),
@@ -269,10 +277,14 @@ export const buildFixtures = ({ images = true, delSolStatus, familia, grupo = fa
     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),
+      ...(imagesService
+        ? [
+            service(36, "images", "AA", 5),
+            service(38, "images", delSolStatus ?? "AA", 5),
+          ]
+        : []),
     ],
   }),
   percentages: lambda([

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

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 
 import { buildFixtures } from "./api.fixtures";
-import { applyProductServicesChange, assignablesFor, buildProductServices } from "./productServices.fixtures";
 
 /*
   API falsa para las historias: reemplaza el adaptador de axios mientras la
@@ -37,17 +36,19 @@ const ok = { statusCode: 200, body: JSON.stringify({ message: "OK" }) };
 
 export const createMockAdapter = ({
   images = true,
+  imagesService = true,
   failLoad = false,
   delSolStatus,
   familia,
   grupo,
 } = {}) => {
-  const fx = buildFixtures({ images, delSolStatus, familia, grupo });
-  // Servicios del producto (edición unificada): con estado, para que un cambio
-  // de estatus o de asignación se vea al volver a pedir la lista.
-  const productServices = buildProductServices({ delSolStatus });
-  const lambdaReply = (config, statusCode, body) =>
-    reply(config, { statusCode, body: JSON.stringify(body) });
+  const fx = buildFixtures({
+    images,
+    imagesService,
+    delSolStatus,
+    familia,
+    grupo,
+  });
 
   return (config) => {
     const method = (config.method || "get").toUpperCase();
@@ -69,17 +70,6 @@ export const createMockAdapter = ({
     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 (method === "GET" && path === "product-services") return lambdaReply(config, 200, productServices);
-    if (method === "PUT" && path.startsWith("product-services/")) {
-      const action = path.split("/")[1];
-      const data = typeof config.data === "string" ? JSON.parse(config.data) : config.data;
-      const { statusCode, message } = applyProductServicesChange(productServices, action, data);
-      console.info(`[mock API] PUT ${path}`, data);
-      return lambdaReply(config, statusCode, statusCode === 200 ? { action, result: data } : { message });
-    }
-    if (method === "GET" && path === "service-catalog" && query.view === "assignables") {
-      return lambdaReply(config, 200, { users: assignablesFor(query.assignment_role) });
-    }
     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.

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

@@ -38,9 +38,22 @@ const LIST_COLUMNS = [
 // de lado dentro de su caja en vez de aplastar las columnas.
 const LIST_MIN_WIDTH = 760;
 
-const TrayTabs = ({ activeTray, setActiveTray, imagesCount, assetsCount }) => {
+const TrayTabs = ({
+  activeTray,
+  setActiveTray,
+  imagesCount,
+  assetsCount,
+  hasImagesService = true,
+}) => {
   const trays = [
-    { id: TRAYS.IMAGES, label: "Imágenes", count: imagesCount },
+    {
+      id: TRAYS.IMAGES,
+      label: "Imágenes",
+      count: imagesCount,
+      // Sin el servicio contratado no hay nada que mostrar en esa bandeja,
+      // pero se deja a la vista para que se entienda por qué.
+      disabled: !hasImagesService,
+    },
     { id: TRAYS.ASSETS, label: "Activos digitales", count: assetsCount },
   ];
   return (
@@ -58,6 +71,7 @@ const TrayTabs = ({ activeTray, setActiveTray, imagesCount, assetsCount }) => {
           <Tab
             key={tray.id}
             value={tray.id}
+            disabled={tray.disabled}
             disableRipple
             label={
               <Stack direction="row" alignItems="center" gap="6px">
@@ -87,6 +101,12 @@ const TrayTabs = ({ activeTray, setActiveTray, imagesCount, assetsCount }) => {
               letterSpacing: "-0.015em",
               color: COLORS.s4,
               "&.Mui-selected": { color: COLORS.s5, fontWeight: 600 },
+              // Igual que en `TabsBar`: el tema de Creators las pinta de rosa
+              // al pasar el ratón y aquí no se quiere.
+              "&:hover, &.Mui-selected:hover": {
+                color: COLORS.s5,
+                backgroundColor: "transparent",
+              },
             }}
           />
         );
@@ -167,6 +187,7 @@ export const ImagesSection = ({
   imageLayout,
   // bandejas
   enableDigitalAssets,
+  hasImagesService = true,
   currentTray,
   setActiveTray,
   digitalAssets,
@@ -230,6 +251,7 @@ export const ImagesSection = ({
           setActiveTray={setActiveTray}
           imagesCount={images.length}
           assetsCount={digitalAssets?.assets?.length ?? 0}
+          hasImagesService={hasImagesService}
         />
       )}
 

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

@@ -6,13 +6,9 @@ import { COLORS, FONTS, statusColor, statusName } from "./tokens";
  * Etiqueta de estatus ("RA/AS", "AA"...). Mismo color y tamaño que
  * `atoms/Status`; el nombre completo va en el tooltip. `oval` es la variante
  * redondeada de la barra de pestañas.
- *
- * `label`, `color` y `title` (opcionales) reemplazan el texto, el color y el
- * tooltip: los estatus de los flujos simples del catálogo (Pendiente, Hecho…)
- * traen los suyos desde el backend.
  */
-export const StatusChip = ({ status, oval = false, label: labelProp, color, title }) => {
-  const label = labelProp ?? status ?? "NS";
+export const StatusChip = ({ status, oval = false }) => {
+  const label = status ?? "NS";
   const chip = (
     <Chip
       label={label}
@@ -20,7 +16,7 @@ export const StatusChip = ({ status, oval = false, label: labelProp, color, titl
       sx={{
         height: 20,
         borderRadius: oval ? "10px" : "3px",
-        backgroundColor: color ?? statusColor(status),
+        backgroundColor: statusColor(status),
         color: COLORS.white,
         fontFamily: FONTS.Lato,
         fontSize: 12,
@@ -30,7 +26,7 @@ export const StatusChip = ({ status, oval = false, label: labelProp, color, titl
     />
   );
 
-  const name = title ?? statusName(status);
+  const name = statusName(status);
   return name ? (
     <Tooltip title={name} arrow placement="top">
       {chip}

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

@@ -44,6 +44,15 @@ const tabSx = {
   borderBottom: `2px solid ${COLORS.s3}`,
   transition: "font-size 0.1s",
   "&.Mui-selected": { color: COLORS.s5, fontSize: { xs: 14, sm: 18 } },
+  /*
+    El tema de MUI de Creators pinta las pestañas de rosa al pasar el ratón
+    (`MuiTab.styleOverrides.root`). Aquí no se quiere ese realce, y la librería
+    no debe depender del tema de quien la consume: se anula explícitamente.
+  */
+  "&:hover, &.Mui-selected:hover": {
+    color: COLORS.s5,
+    backgroundColor: "transparent",
+  },
 };
 
 export const TabsBar = ({

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

@@ -102,6 +102,12 @@ HijoDeOtro.decorators = [withMockApi({ familia: "hijo" })];
 
 // --- Casos límite -----------------------------------------------------------
 
+// Producto sin el servicio de imágenes contratado: la bandeja de imágenes
+// queda deshabilitada y la de activos digitales sigue siendo utilizable.
+export const SinServicioDeImagenes = Template.bind({});
+SinServicioDeImagenes.args = AuditorQA.args;
+SinServicioDeImagenes.decorators = [withMockApi({ imagesService: false })];
+
 export const SinImagenes = Template.bind({});
 SinImagenes.args = EspecialistaImagenes.args;
 SinImagenes.decorators = [withMockApi({ images: false })];

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

@@ -1,5 +1,4 @@
 import { RetailerProductEdition } from "./index";
-import { withDemoServices } from "../../organisms/ServicesWorkspace/demo";
 
 export default {
   title: "Components/pages/RetailerProductEdition",
@@ -218,14 +217,3 @@ user: {
 }
 
 };
-
-/**
- * Con la pestaña "Servicios" (la activa Creators con `showServicesTab`) y
- * servicios de ejemplo además de los tres de siempre.
- */
-export const ConPestanaServicios = Template.bind({});
-ConPestanaServicios.args = {
-  ...RetailerProductEditionDefault.args,
-  showServicesTab: true,
-  productSelected: withDemoServices(RetailerProductEditionDefault.args.productSelected, 14),
-};

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import axios from "axios";
 import { useDropzone } from "react-dropzone";
@@ -74,7 +74,6 @@ import generateThumbnail from "./generateThumnail";
 
 import { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
 import ChangeStatusModal from "../../organisms/ChangeStatusModal";
-import ServicesWorkspace from "../../organisms/ServicesWorkspace";
 
 import { Skeleton, Box, Stack } from "@mui/material";
 
@@ -106,14 +105,8 @@ function obtenerDuracionVideoBase64(base64Data) {
   });
 }
 
-/** Pestaña con todos los servicios del producto (ver organisms/ServicesWorkspace). */
-const SERVICES_TAB = "Servicios";
-
 const RetailerProductEditionView = ({
   tabsSections,
-  // Opcional para no cambiar la edición de quien no la pida (aplicación de
-  // proveedores). Creators la activa.
-  showServicesTab = false,
   productSelected = {},
   user = {},
   token,
@@ -141,13 +134,6 @@ const RetailerProductEditionView = ({
 
   const isRetailer = user?.is_retailer;
 
-  const tabs = useMemo(
-    () =>
-      showServicesTab ? { ...tabsSections, [SERVICES_TAB]: false } : tabsSections,
-    [tabsSections, showServicesTab],
-  );
-  const isServicesTab = state.active_tab === SERVICES_TAB;
-
   const [showVersionSelector, setShowVersionSelector] =
     useCloseModal("version-selector");
   const [auditableVersion, setAuditableVersion] = useState(null);
@@ -2942,7 +2928,7 @@ const RetailerProductEditionView = ({
               }
             />
             <FullTabsMenu
-              tabsSections={tabs}
+              tabsSections={tabsSections}
               status={getStatusByCurrentServiceAndRetailer()}
               activeTab={state.active_tab}
               isRetailer={isRetailer}
@@ -2989,14 +2975,6 @@ const RetailerProductEditionView = ({
                 <Loading />
               ) : (
                 <>
-                  {isServicesTab && (
-                    <ServicesWorkspace
-                      product={state.product}
-                      retailers={state.product?.categoryRetailerInOrder ?? []}
-                      canAssign={![7, 8].includes(user.id_role)}
-                      onOpenEditor={handleOnChangeActiveTab}
-                    />
-                  )}
                   {state.active_tab === "Descripción" &&
                     (state.product?.description_status !== "NS" ? (
                       <InputGroup
@@ -3172,10 +3150,7 @@ const RetailerProductEditionView = ({
                 </>
               )}
             </div>
-            {/* Comentario y cambio de estatus son de un servicio con editor;
-                en la pestaña Servicios cada servicio lleva su propio detalle. */}
-            {!isServicesTab &&
-              (isUserAssignedToService(state.active_tab) ||
+            {(isUserAssignedToService(state.active_tab) ||
               isAuditorAssigned()) &&
               state.product[`${getConceptByTab(state.active_tab)}_status`] !==
                 "NS" && (

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

@@ -148,11 +148,6 @@ export const normalizeProduct = (product) => {
     id_auditor: article.id_auditor || 0,
     statusByRetailer: productData.statusByRetailer || null,
     categoryRetailerInOrder: categoryRetailerInOrder || null,
-
-    // Servicios para la pestaña "Servicios": estatus por servicio del listado
-    // ligero de Creators (view=summary) y, en modo demo, los de ejemplo.
-    serviceStatuses: productData.serviceStatuses ?? null,
-    demo_services: productData.demo_services ?? null,
   };
 };
 

package/src/index.js

@@ -116,7 +116,6 @@ export * from "./components/pages/RegistrationLoginSecondStep";
 export * from "./components/pages/RegistrationLoginThirdStep";
 export * from "./components/pages/RetailerProductEdition";
 export * from "./components/pages/CreatorsProductEdition";
-export * from "./components/pages/ProductEdition";
 export * from "./components/pages/ProviderProductEdition";
 export * from "./components/pages/VerificationCodeResetPassword";
 export * from "./components/pages/MultipleEdition";

package/dist/components/organisms/ServicesNavigation/ServiceToolbar.js

@@ -1,210 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ServiceToolbar = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _material = require("@mui/material");
-
-var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
-
-var _SaveOutlined = _interopRequireDefault(require("@mui/icons-material/SaveOutlined"));
-
-var _ui = require("./ui");
-
-var _model = require("./model");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-/*
-  Barra del servicio abierto. Ocupa el lugar de la barra de pestañas: dice en
-  qué servicio estás, su estatus y su equipo, y lleva la acción de guardar.
-  No hay botón de «siguiente»: quien produce ya sabe qué le toca, y la lista
-  lateral lo marca con el punto rosa.
-*/
-var Team = function Team(_ref) {
-  var _ref$assignees = _ref.assignees,
-      assignees = _ref$assignees === void 0 ? {} : _ref$assignees,
-      userId = _ref.userId;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
-    direction: "row",
-    alignItems: "center",
-    spacing: 1.5,
-    sx: {
-      flexWrap: "wrap",
-      rowGap: 0.5
-    },
-    children: Object.entries(_model.ROLE_LABELS).map(function (_ref2) {
-      var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-          role = _ref3[0],
-          label = _ref3[1];
-
-      var user = assignees[role];
-      var isMe = Boolean(user) && user.id_user === userId;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: "row",
-        alignItems: "center",
-        spacing: 0.75,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PersonAvatar, {
-          user: user,
-          isMe: isMe,
-          size: 24,
-          title: user ? "".concat(label, ": ").concat((0, _model.fullName)(user)) : "".concat(label, ": sin asignar")
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          sx: {
-            lineHeight: 1.1
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            sx: {
-              fontFamily: _ui.FONT_STACK,
-              fontSize: 10,
-              color: _ui.COLORS.s4,
-              textTransform: "uppercase",
-              letterSpacing: "0.05em"
-            },
-            children: label
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            sx: {
-              fontFamily: _ui.FONT_STACK,
-              fontSize: 12,
-              fontWeight: isMe ? 700 : 400,
-              color: user ? _ui.COLORS.s5 : _ui.COLORS.s3
-            },
-            children: user ? isMe ? "Tú" : user.name : "Sin asignar"
-          })]
-        })]
-      }, role);
-    })
-  });
-};
-
-var ServiceToolbar = function ServiceToolbar(_ref4) {
-  var service = _ref4.service,
-      _ref4$isSummary = _ref4.isSummary,
-      isSummary = _ref4$isSummary === void 0 ? false : _ref4$isSummary,
-      summaryCounts = _ref4.summaryCounts,
-      onOpenRail = _ref4.onOpenRail,
-      userId = _ref4.userId;
-  var canSave = !isSummary && service && (0, _model.isMine)(service, userId);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-    sx: {
-      display: "flex",
-      flexWrap: "wrap",
-      alignItems: "center",
-      columnGap: 2,
-      rowGap: 1.25,
-      pb: 1.5,
-      mb: 2,
-      borderBottom: "2px solid ".concat(_ui.COLORS.s2)
-    },
-    children: [onOpenRail && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-      onClick: onOpenRail,
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
-        sx: {
-          fontSize: 18
-        }
-      }),
-      sx: _ui.outlineButtonSx,
-      children: "Servicios"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
-      direction: "row",
-      alignItems: "center",
-      spacing: 1.25,
-      sx: {
-        minWidth: 0,
-        flex: "1 1 260px"
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          width: 36,
-          height: 36,
-          borderRadius: "10px",
-          bgcolor: _ui.COLORS.s2,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flexShrink: 0
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
-          icon: isSummary ? "summary" : service === null || service === void 0 ? void 0 : service.icon,
-          sx: {
-            fontSize: 20,
-            color: _ui.COLORS.magenta_s2
-          }
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        sx: {
-          minWidth: 0
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            fontFamily: _ui.FONT_STACK,
-            fontSize: 11,
-            fontWeight: 700,
-            letterSpacing: "0.06em",
-            textTransform: "uppercase",
-            color: _ui.COLORS.s4
-          },
-          children: isSummary ? "Todos los servicios" : (0, _model.groupLabel)(service === null || service === void 0 ? void 0 : service.group)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "row",
-          alignItems: "center",
-          spacing: 1,
-          sx: {
-            minWidth: 0
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            component: "h3",
-            sx: {
-              fontFamily: _ui.TITLE_STACK,
-              fontWeight: 500,
-              fontSize: 20,
-              lineHeight: "26px",
-              color: _ui.COLORS.s5,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
-            },
-            children: isSummary ? "Resumen" : service === null || service === void 0 ? void 0 : service.display_name
-          }), !isSummary && service && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.StatusChip, {
-            status: service.status,
-            oval: true
-          })]
-        })]
-      })]
-    }), isSummary ? summaryCounts && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-      sx: {
-        fontFamily: _ui.FONT_STACK,
-        fontSize: 13,
-        color: _ui.COLORS.s4
-      },
-      children: [summaryCounts.total, " servicios \xB7 ", summaryCounts.pending, " te", " ", summaryCounts.pending === 1 ? "toca" : "tocan", " a ti"]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Team, {
-      assignees: service === null || service === void 0 ? void 0 : service.assignees,
-      userId: userId
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
-      direction: "row",
-      spacing: 1,
-      sx: {
-        ml: "auto"
-      },
-      children: canSave && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-        variant: "contained",
-        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SaveOutlined.default, {
-          sx: {
-            fontSize: 18
-          }
-        }),
-        sx: _ui.primaryButtonSx,
-        children: "Guardar"
-      })
-    })]
-  });
-};
-
-exports.ServiceToolbar = ServiceToolbar;