contentoh-components-library 21.6.61 → 21.6.63

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/Dashboard/dashboardUtils.js

@@ -52,9 +52,9 @@ export const getCategories = async (jwt, user, company) => {
 export const formatDate = (date) => {
   const newDate = new Date(date);
   const year = newDate.getFullYear();
-  const month = newDate.getMonth() + 1;
-  const day = newDate.getDate();
-  return `${year}/${month}/${day}`;
+  const month = `${newDate.getMonth() + 1}`.padStart(2, "0");
+  const day = `${newDate.getDate()}`.padStart(2, "0");
+  return `${year}-${month}-${day}`;
 };
 
 const getCategoriesRecursive = (object) => {

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

@@ -39,9 +39,9 @@ export const Dashboard = ({ jwt, user, company }) => {
   ];
   const [applicantsFilter, setApplicantsFilter] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
+  // Total sin filtros, solo para el porcentaje de la dona.
+  const [totalUnfiltered, setTotalUnfiltered] = useState(0);
   const [isProviderFinanced] = useState(company?.financedRetailers?.length > 0);
-  const [trades, setTrades] = useState([]);
-  const [tradesSelected, setTradesSelected] = useState([]);
 
   const loadProductVersions = async (queryObject) => {
     const keys = Object.keys(queryObject);
@@ -82,127 +82,102 @@ export const Dashboard = ({ jwt, user, company }) => {
     setRetailers(retailers);
   };
 
-  const loadProductsByStatus = async (orderByStatus) => {
+  const loadProductsByStatus = async (orderByStatus, isBaseline = false) => {
     const isRetailer = user.is_retailer && company.retailers;
     const isProvider = !user.is_retailer && user.id_role === 0;
     const isCollaborator = user.id_role > 0;
-    const { ordersBydate, ordersByStatus, ordersByActive, companyTrades } =
+    const { ordersBydate, ordersByStatus = {}, ordersByActive = {} } =
       (await loadProductVersions(orderByStatus)) || {};
 
-    if (trades.length === 0) setTrades(companyTrades);
     const { total = 0, R = 0, PA = 0, Ex = 0, ACA = 0 } = ordersByStatus;
     let productsFinished = 0;
     if (isRetailer) productsFinished = Ex;
-    if (isProvider) productsFinished = ACA;
+    if (isProvider) productsFinished = ACA + Ex;
     if (isCollaborator) productsFinished = Ex + ACA;
 
-    const inProcess = Object.keys(ordersByStatus).reduce(
-      (prev, curr) =>
-        !["total", "PA", "R", "Ex", "ACA"].includes(curr)
-          ? prev + ordersByStatus[curr]
-          : prev,
-      0
-    );
+    // Lo que no está sin asignar ni terminado está en proceso, para que las
+    // tres tarjetas siempre sumen el total filtrado.
+    const unassigned = PA + R;
+    const inProcess = total - unassigned - productsFinished;
 
-    const registeredProducts = ordersByActive.registered;
-    let metricsArray = [
-      metricsData[0]
-        ? metricsData[0]
-        : { label: "Productos totales", value: total },
+    const registeredProducts = ordersByActive.registered ?? 0;
+    const metricsArray = [
+      {
+        label: "Catálogo activo",
+        value: registeredProducts,
+        hint: "Productos dados de alta y activos. No depende del filtro de fechas, que aplica a la fecha de la orden.",
+      },
+      {
+        label: "En órdenes de trabajo",
+        value: total,
+        hint: "Productos con orden de trabajo viva dentro de los filtros. Un producto en dos órdenes cuenta en cada una.",
+      },
+      { label: "Sin asignar", value: unassigned },
+      { label: "En proceso", value: inProcess },
+      { label: "Terminados", value: productsFinished },
     ];
-
-    metricsArray.push(
-      { label: "Productos activos", value: registeredProducts },
-      { label: "Productos filtrados", value: total },
-      { label: "Productos sin asignar", value: PA + R },
-      { label: "Productos en proceso", value: inProcess },
-      { label: "Productos terminados", value: productsFinished }
-    );
     setMetricsData(metricsArray);
     setTotalCount(total);
+    if (isBaseline) setTotalUnfiltered(total);
     delete ordersByStatus.total;
     setRequiredProducts(ordersBydate);
     setProductsByStatus(ordersByStatus);
   };
 
   const datesSelect = () => {
-    const today = new Date();
+    // Cada rango se calcula al momento de elegirlo y con fechas locales: si se
+    // parte de un Date compartido, los options se pisan entre sí, y
+    // new Date("2026-11-01") cae en el día anterior al oeste de UTC.
+    const applyRange = (startDate, endDate = new Date()) =>
+      setDatesRange({
+        startDate: formatDate(startDate),
+        endDate: formatDate(endDate),
+      });
+    const daysAgo = (days) => {
+      const date = new Date();
+      date.setDate(date.getDate() - days);
+      return date;
+    };
     setDateOptions([
       { id: 0, name: "Rango de fechas" },
       {
         id: 1,
         name: "Todo el tiempo",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(new Date("1900-01-01")),
-            endDate: formatDate(new Date()),
-          }),
-      },
-      {
-        id: 2,
-        name: "Hoy",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(new Date()),
-            endDate: formatDate(new Date()),
-          }),
-      },
-      {
-        id: 3,
-        name: "Ayer",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(new Date(today.setDate(today.getDate() - 1))),
-            endDate: formatDate(new Date()),
-          }),
+        function: () => applyRange(new Date(1900, 0, 1)),
       },
+      { id: 2, name: "Hoy", function: () => applyRange(new Date()) },
+      { id: 3, name: "Ayer", function: () => applyRange(daysAgo(1), daysAgo(1)) },
       {
         id: 4,
         name: "Esta semana",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(today.setDate(today.getDate() - today.getDay()))
-            ),
-            endDate: formatDate(new Date()),
-          }),
+        function: () => applyRange(daysAgo(new Date().getDay())),
       },
       {
         id: 5,
         name: "La semana pasada",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(today.setDate(today.getDate() - today.getDay() - 7))
-            ),
-            endDate: formatDate(
-              new Date(today.setDate(today.getDate() - today.getDay() + 7))
-            ),
-          }),
+        function: () => {
+          const weekday = new Date().getDay();
+          return applyRange(daysAgo(weekday + 7), daysAgo(weekday + 1));
+        },
       },
       {
         id: 6,
         name: "Este mes",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(`${today.getFullYear()}-${today.getMonth() + 1}-01`)
-            ),
-            endDate: formatDate(today),
-          }),
+        function: () => {
+          const today = new Date();
+          return applyRange(new Date(today.getFullYear(), today.getMonth(), 1));
+        },
       },
       {
         id: 7,
         name: "El mes pasado",
-        function: () =>
-          setDatesRange({
-            startDate: formatDate(
-              new Date(`${today.getFullYear()}-${today.getMonth()}-01`)
-            ),
-            endDate: formatDate(
-              new Date(`${today.getFullYear()}-${today.getMonth() + 1}-01`)
-            ),
-          }),
+        function: () => {
+          const today = new Date();
+          return applyRange(
+            new Date(today.getFullYear(), today.getMonth() - 1, 1),
+            new Date(today.getFullYear(), today.getMonth(), 0)
+          );
+        },
       },
     ]);
   };
@@ -219,7 +194,7 @@ export const Dashboard = ({ jwt, user, company }) => {
     setDatesRange({ startDate, endDate });
     setOrderByStatus(queryObject);
     setOrderByRequired(queryObject);
-    loadProductsByStatus(queryObject);
+    loadProductsByStatus(queryObject, true);
   }, []);
 
   useEffect(() => {
@@ -241,20 +216,11 @@ export const Dashboard = ({ jwt, user, company }) => {
     if (companyId.length > 0) queryObject["companyId"] = companyId.join(",");
     if (retailerId.length > 0) queryObject["retailerId"] = retailerId.join(",");
     if (categoryId.length > 0) queryObject["categoryId"] = categoryId.join(",");
-    if (tradesSelected.length > 0)
-      queryObject["trades"] = encodeURIComponent(tradesSelected.join(","));
     applicantsFilter.length > 0 &&
       (queryObject["requestedBy"] = applicantsFilter.join(","));
 
-    await loadProductsByStatus(queryObject, true);
-  }, [
-    companyId,
-    retailerId,
-    categoryId,
-    datesRange,
-    applicantsFilter,
-    tradesSelected,
-  ]);
+    await loadProductsByStatus(queryObject);
+  }, [companyId, retailerId, categoryId, datesRange, applicantsFilter]);
 
   return loading ? (
     <Loading />
@@ -319,17 +285,6 @@ export const Dashboard = ({ jwt, user, company }) => {
             defaultOption="Todos los solicitantes"
           />
         )}
-        {user.id_role === 0 && trades?.length > 0 && (
-          <CustomSelect
-            showSearchBar={true}
-            options={trades}
-            selectLabel="Todas las marcas"
-            placeHolder="Buscar marca"
-            customSelectId="trade-select"
-            parameterArray={tradesSelected}
-            setParameterArray={setTradesSelected}
-          />
-        )}
       </div>
       <div className="metric-cards">
         {metricsData.map((metric, index) => (
@@ -337,6 +292,7 @@ export const Dashboard = ({ jwt, user, company }) => {
             key={`${index}-${metric.value}`}
             label={metric.label}
             number={metric.value}
+            hint={metric.hint}
           />
         ))}
       </div>
@@ -358,7 +314,7 @@ export const Dashboard = ({ jwt, user, company }) => {
           showPercent={true}
           displayScale={false}
           totalFiltered={totalCount}
-          total={metricsData[0]?.value}
+          total={totalUnfiltered}
         />
         <DashboardMetric
           label={"Productos solicitados"}

package/src/components/pages/Dashboard/styles.js

@@ -5,11 +5,9 @@ export const Container = styled.div`
 
   .filters {
     display: flex;
-    & > * {
-      & + * {
-        margin-left: 10px;
-      }
-    }
+    flex-wrap: wrap;
+    gap: 10px;
+
     & + * {
       margin-top: 20px;
     }
@@ -17,10 +15,8 @@ export const Container = styled.div`
 
   .metric-cards {
     display: flex;
-
-    > * + * {
-      margin-left: 10px;
-    }
+    flex-wrap: wrap;
+    gap: 10px;
 
     & + * {
       margin-top: 10px;
@@ -28,10 +24,19 @@ export const Container = styled.div`
   }
 
   .metrics-main-container {
-    display: flex;
+    display: grid;
+    /* Dos paneles mientras quepan 320px cada uno; si no, uno debajo del otro.
+       El min() evita que la columna siga midiendo 320px en pantallas menores. */
+    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
+    gap: 10px;
 
-    > * + * {
-      margin-left: 10px;
+    /* Sin esto las gráficas no pueden encogerse por debajo de su ancho. */
+    > * {
+      min-width: 0;
     }
   }
+
+  @media (max-width: 600px) {
+    padding: 15px;
+  }
 `;

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";