contentoh-components-library 21.6.61 → 21.6.62

package/dist/components/pages/ProductEdition/services.test.js

@@ -1,195 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _vitest = require("vitest");
-
-var _services = require("./services");
-
-/**
- * Lista lateral de la edición a partir de GET /product-services.
- *
- *   npx vitest run src/components/pages/ProductEdition
- */
-var person = function person(id_user, name) {
-  return {
-    id_user: id_user,
-    name: name,
-    last_name: "Prueba"
-  };
-};
-
-var status = function status(status_name) {
-  var extra = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return (0, _objectSpread2.default)({
-    status_name: status_name,
-    display_name: status_name,
-    color: null
-  }, extra);
-};
-
-var productServices = {
-  article_id: 10,
-  order_id: 500,
-  services: [{
-    service_name: "datasheet",
-    display_name: "Ficha técnica",
-    category: {
-      category_name: "texts"
-    },
-    status_flow: {
-      flow_name: "workflow",
-      flow_type: "workflow"
-    },
-    is_legacy: true,
-    status: status("PA"),
-    retailers: [{
-      id_retailer: 58,
-      status: status("PA")
-    }, {
-      id_retailer: 59,
-      status: status("RA/AS")
-    }],
-    roles: ["especialist", "facilitator", "auditor"],
-    assignees: {
-      especialist: person(426, "Textos"),
-      facilitator: person(901, "Coord"),
-      auditor: person(903, "QA")
-    },
-    actions: {
-      set_status: false,
-      assign: false
-    }
-  }, {
-    service_name: "productPurchase",
-    display_name: "Compra de producto",
-    icon_name: null,
-    category: {
-      category_name: "logistics"
-    },
-    status_flow: {
-      flow_name: "checkbox",
-      flow_type: "simple"
-    },
-    is_legacy: false,
-    per_retailer: false,
-    status: status("PE", {
-      display_name: "Pendiente",
-      color: "#FFAA00",
-      is_final: false
-    }),
-    retailers: [{
-      id_retailer: 0,
-      status: status("PE", {
-        display_name: "Pendiente",
-        color: "#FFAA00",
-        is_final: false
-      })
-    }],
-    status_options: [status("PE"), status("HE", {
-      is_final: true
-    })],
-    roles: ["especialist"],
-    assignees: {
-      especialist: person(426, "Textos"),
-      facilitator: null,
-      auditor: null
-    },
-    actions: {
-      set_status: true,
-      assign: true
-    }
-  }]
-};
-(0, _vitest.describe)("buildServicesFromApi", function () {
-  var specialist = {
-    id_user: 426,
-    id_role: 7
-  };
-  (0, _vitest.it)("toma el estatus de la cadena activa; si no está en ella, el general", function () {
-    var _buildServicesFromApi = (0, _services.buildServicesFromApi)({
-      productServices: productServices,
-      user: specialist,
-      activeRetailerId: 59
-    }),
-        _buildServicesFromApi2 = (0, _slicedToArray2.default)(_buildServicesFromApi, 2),
-        datasheet = _buildServicesFromApi2[0],
-        purchase = _buildServicesFromApi2[1];
-
-    (0, _vitest.expect)(datasheet.status).toBe("RA/AS");
-    (0, _vitest.expect)(purchase.status).toBe("PE");
-  });
-  (0, _vitest.it)("los de siempre conservan su pestaña; los del catálogo usan su bloque y la vista simple", function () {
-    var _buildServicesFromApi3 = (0, _services.buildServicesFromApi)({
-      productServices: productServices,
-      user: specialist,
-      activeRetailerId: 58
-    }),
-        _buildServicesFromApi4 = (0, _slicedToArray2.default)(_buildServicesFromApi3, 2),
-        datasheet = _buildServicesFromApi4[0],
-        purchase = _buildServicesFromApi4[1];
-
-    (0, _vitest.expect)(datasheet).toMatchObject({
-      tab: "Ficha técnica",
-      group: "texts",
-      is_catalog: false
-    });
-    (0, _vitest.expect)(purchase).toMatchObject({
-      tab: null,
-      group: "logistics",
-      view: "simple",
-      icon: "purchase",
-      status_label: "Pendiente",
-      status_color: "#FFAA00",
-      status_flow_type: "simple",
-      is_catalog: true
-    });
-    (0, _vitest.expect)(purchase.api).toBe(productServices.services[1]);
-  });
-  (0, _vitest.it)("«Míos» y «te toca» salen del equipo del servicio", function () {
-    var _buildServicesFromApi5 = (0, _services.buildServicesFromApi)({
-      productServices: productServices,
-      user: specialist,
-      activeRetailerId: 59
-    }),
-        _buildServicesFromApi6 = (0, _slicedToArray2.default)(_buildServicesFromApi5, 2),
-        datasheet = _buildServicesFromApi6[0],
-        purchase = _buildServicesFromApi6[1]; // RA/AS: le toca a la especialista asignada.
-
-
-    (0, _vitest.expect)(datasheet).toMatchObject({
-      mine: true,
-      pending: true
-    }); // Flujo simple sin terminar: le toca a su especialista.
-
-    (0, _vitest.expect)(purchase).toMatchObject({
-      mine: true,
-      pending: true
-    });
-
-    var _buildServicesFromApi7 = (0, _services.buildServicesFromApi)({
-      productServices: productServices,
-      user: {
-        id_user: 1
-      },
-      activeRetailerId: 59
-    }),
-        _buildServicesFromApi8 = (0, _slicedToArray2.default)(_buildServicesFromApi7, 2),
-        other = _buildServicesFromApi8[1];
-
-    (0, _vitest.expect)(other).toMatchObject({
-      mine: false,
-      pending: false
-    });
-  });
-  (0, _vitest.it)("sin respuesta del backend, lista vacía", function () {
-    (0, _vitest.expect)((0, _services.buildServicesFromApi)({
-      productServices: null,
-      user: specialist
-    })).toEqual([]);
-  });
-});

package/src/components/organisms/ServicesNavigation/ServiceToolbar.jsx

@@ -1,143 +0,0 @@
-import { Box, Button, Stack, Typography } from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
-
-import {
-  COLORS,
-  FONT_STACK,
-  TITLE_STACK,
-  PersonAvatar,
-  ServiceIcon,
-  StatusChip,
-  outlineButtonSx,
-  primaryButtonSx,
-} from "./ui";
-import { ROLE_LABELS, fullName, groupLabel, isMine } from "./model";
-
-/*
-  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.
-*/
-
-const Team = ({ assignees = {}, userId }) => (
-  <Stack direction="row" alignItems="center" spacing={1.5} sx={{ flexWrap: "wrap", rowGap: 0.5 }}>
-    {Object.entries(ROLE_LABELS).map(([role, label]) => {
-      const user = assignees[role];
-      const isMe = Boolean(user) && user.id_user === userId;
-      return (
-        <Stack key={role} direction="row" alignItems="center" spacing={0.75}>
-          <PersonAvatar user={user} isMe={isMe} size={24} title={user ? `${label}: ${fullName(user)}` : `${label}: sin asignar`} />
-          <Box sx={{ lineHeight: 1.1 }}>
-            <Typography sx={{ fontFamily: FONT_STACK, fontSize: 10, color: COLORS.s4, textTransform: "uppercase", letterSpacing: "0.05em" }}>
-              {label}
-            </Typography>
-            <Typography sx={{ fontFamily: FONT_STACK, fontSize: 12, fontWeight: isMe ? 700 : 400, color: user ? COLORS.s5 : COLORS.s3 }}>
-              {user ? (isMe ? "Tú" : user.name) : "Sin asignar"}
-            </Typography>
-          </Box>
-        </Stack>
-      );
-    })}
-  </Stack>
-);
-
-export const ServiceToolbar = ({
-  service,
-  isSummary = false,
-  summaryCounts,
-  onOpenRail,
-  userId,
-}) => {
-  const canSave = !isSummary && service && isMine(service, userId);
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexWrap: "wrap",
-        alignItems: "center",
-        columnGap: 2,
-        rowGap: 1.25,
-        pb: 1.5,
-        mb: 2,
-        borderBottom: `2px solid ${COLORS.s2}`,
-      }}
-    >
-      {onOpenRail && (
-        <Button onClick={onOpenRail} startIcon={<MenuIcon sx={{ fontSize: 18 }} />} sx={outlineButtonSx}>
-          Servicios
-        </Button>
-      )}
-
-      <Stack direction="row" alignItems="center" spacing={1.25} sx={{ minWidth: 0, flex: "1 1 260px" }}>
-        <Box
-          sx={{
-            width: 36,
-            height: 36,
-            borderRadius: "10px",
-            bgcolor: COLORS.s2,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-          }}
-        >
-          <ServiceIcon icon={isSummary ? "summary" : service?.icon} sx={{ fontSize: 20, color: COLORS.magenta_s2 }} />
-        </Box>
-        <Box sx={{ minWidth: 0 }}>
-          <Typography
-            sx={{
-              fontFamily: FONT_STACK,
-              fontSize: 11,
-              fontWeight: 700,
-              letterSpacing: "0.06em",
-              textTransform: "uppercase",
-              color: COLORS.s4,
-            }}
-          >
-            {isSummary ? "Todos los servicios" : groupLabel(service?.group)}
-          </Typography>
-          <Stack direction="row" alignItems="center" spacing={1} sx={{ minWidth: 0 }}>
-            <Typography
-              component="h3"
-              sx={{
-                fontFamily: TITLE_STACK,
-                fontWeight: 500,
-                fontSize: 20,
-                lineHeight: "26px",
-                color: COLORS.s5,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
-            >
-              {isSummary ? "Resumen" : service?.display_name}
-            </Typography>
-            {!isSummary && service && <StatusChip status={service.status} oval />}
-          </Stack>
-        </Box>
-      </Stack>
-
-      {isSummary ? (
-        summaryCounts && (
-          <Typography sx={{ fontFamily: FONT_STACK, fontSize: 13, color: COLORS.s4 }}>
-            {summaryCounts.total} servicios · {summaryCounts.pending} te{" "}
-            {summaryCounts.pending === 1 ? "toca" : "tocan"} a ti
-          </Typography>
-        )
-      ) : (
-        <Team assignees={service?.assignees} userId={userId} />
-      )}
-
-      <Stack direction="row" spacing={1} sx={{ ml: "auto" }}>
-        {canSave && (
-          <Button variant="contained" startIcon={<SaveOutlinedIcon sx={{ fontSize: 18 }} />} sx={primaryButtonSx}>
-            Guardar
-          </Button>
-        )}
-      </Stack>
-    </Box>
-  );
-};

package/src/components/organisms/ServicesNavigation/ServicesNavigation.stories.js

@@ -1,101 +0,0 @@
-import { ServicesNavigation } from "./index";
-import { DEMO_PRODUCT, DEMO_USERS, TWENTY_SERVICES, buildServices } from "./catalog";
-import { SUMMARY } from "./model";
-
-/*
-  Prototipo de la navegación por servicios en la edición de producto.
-  Datos de ejemplo: no le pega a ninguna API.
-
-  Cada historia es el mismo producto visto por una persona distinta. Lo que hay
-  que probar es la navegación: la lista lateral, «Míos / Todos», el Resumen y,
-  en las de imágenes, el selector de servicio dentro de la vista.
-*/
-
-export default {
-  title: "Prototipos/Navegación por servicios",
-  // Id sin acento, para que la liga de cada historia se pueda compartir.
-  id: "prototipos-navegacion-servicios",
-  component: ServicesNavigation,
-  parameters: { layout: "fullscreen" },
-};
-
-// Como en la app: la edición vive en una caja de altura fija.
-const Template = (args) => (
-  <div style={{ height: "100vh", display: "flex", overflow: "hidden" }}>
-    <ServicesNavigation {...args} />
-  </div>
-);
-
-const { ana, carlos, diana, helena } = DEMO_USERS;
-
-const FOUR_SERVICES = buildServices([
-  ["datasheet", "AS", { especialist: ana }],
-  ["description", "RA/AS", { especialist: ana }],
-  ["images", "PA"],
-  ["translation", "CA", { especialist: diana }],
-]);
-
-/** El producto solo lleva Traducción: no hay lista, abre directo en ella. */
-export const SoloTraduccion = Template.bind({});
-SoloTraduccion.storyName = "Solo Traducción";
-SoloTraduccion.args = {
-  product: DEMO_PRODUCT,
-  services: buildServices([["translation", "CA", { especialist: diana }]]),
-  currentUser: diana,
-  currentUserRole: "Especialista de traducción",
-};
-
-/** Caso de hoy (3 o 4 servicios), visto por la coordinadora: ve todos. */
-export const CuatroServiciosCoordinadora = Template.bind({});
-CuatroServiciosCoordinadora.storyName = "4 servicios · coordinadora";
-CuatroServiciosCoordinadora.args = {
-  product: DEMO_PRODUCT,
-  services: FOUR_SERVICES,
-  currentUser: helena,
-  currentUserRole: "Coordinadora",
-};
-
-/** Mismo producto, visto por la especialista de textos: «Míos» por omisión. */
-export const CuatroServiciosEspecialistaTextos = Template.bind({});
-CuatroServiciosEspecialistaTextos.storyName = "4 servicios · especialista de textos";
-CuatroServiciosEspecialistaTextos.args = {
-  product: DEMO_PRODUCT,
-  services: FOUR_SERVICES,
-  currentUser: ana,
-  currentUserRole: "Especialista de textos",
-};
-
-/** 20 servicios; el especialista de imágenes solo ve sus 3 hasta que pide «Todos». */
-export const VeinteServiciosEspecialistaImagenes = Template.bind({});
-VeinteServiciosEspecialistaImagenes.storyName = "20 servicios · especialista de imágenes";
-VeinteServiciosEspecialistaImagenes.args = {
-  product: DEMO_PRODUCT,
-  services: TWENTY_SERVICES,
-  currentUser: carlos,
-  currentUserRole: "Especialista de imágenes",
-};
-
-/** 20 servicios vistos por la coordinadora: entra al Resumen. */
-export const VeinteServiciosCoordinadora = Template.bind({});
-VeinteServiciosCoordinadora.storyName = "20 servicios · coordinadora";
-VeinteServiciosCoordinadora.args = {
-  product: DEMO_PRODUCT,
-  services: TWENTY_SERVICES,
-  currentUser: helena,
-  currentUserRole: "Coordinadora",
-  initialService: SUMMARY,
-};
-
-/** La lista contraída a íconos, para dejarle todo el ancho al editor. */
-export const VeinteServiciosListaContraida = Template.bind({});
-VeinteServiciosListaContraida.storyName = "20 servicios · lista contraída";
-VeinteServiciosListaContraida.args = {
-  ...VeinteServiciosEspecialistaImagenes.args,
-  initialCollapsed: true,
-};
-
-/** En celular la lista se abre como panel con el botón «Servicios». */
-export const VeinteServiciosCelular = Template.bind({});
-VeinteServiciosCelular.storyName = "20 servicios · celular";
-VeinteServiciosCelular.args = VeinteServiciosEspecialistaImagenes.args;
-VeinteServiciosCelular.parameters = { viewport: { defaultViewport: "mobile2" } };