contentoh-components-library 21.6.60 → 21.6.61

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

@@ -0,0 +1,387 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildProductServices = exports.assignablesFor = exports.applyProductServicesChange = exports.PEOPLE = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _excluded = ["legacy", "flow", "retailers", "roles", "assignees", "actions"];
+
+/*
+  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.
+*/
+var ARTICLE_ID = 144814;
+var ORDER_ID = 10421;
+var 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
+  }
+};
+var OPTIONS = {
+  checkbox: ["PE", "HE"],
+  progress: ["SE", "EP", "TE"]
+};
+var WEIGHT = {
+  PA: 1,
+  "RA/AS": 7,
+  AA: 10,
+  PE: 2,
+  SE: 2,
+  EP: 3,
+  HE: 99,
+  TE: 99
+};
+var 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
+  }
+};
+exports.PEOPLE = PEOPLE;
+var RETAILER_NAMES = {
+  0: "Sin cadena",
+  36: "Oxxo",
+  38: "Del Sol"
+};
+
+var retailer = function retailer(id, statusName) {
+  var _STATUS$statusName;
+
+  return {
+    id_retailer: id,
+    retailer_name: RETAILER_NAMES[id],
+    quantity: 1,
+    status: (_STATUS$statusName = STATUS[statusName]) !== null && _STATUS$statusName !== void 0 ? _STATUS$statusName : null
+  };
+};
+
+var generalOf = function generalOf(retailers) {
+  return retailers.filter(function (item) {
+    return item.status;
+  }).reduce(function (low, item) {
+    return !low || WEIGHT[item.status.status_name] < WEIGHT[low.status_name] ? item.status : low;
+  }, null);
+};
+
+var service = function service(_ref) {
+  var _OPTIONS$flow$map, _OPTIONS$flow;
+
+  var _ref$legacy = _ref.legacy,
+      legacy = _ref$legacy === void 0 ? false : _ref$legacy,
+      flow = _ref.flow,
+      retailers = _ref.retailers,
+      roles = _ref.roles,
+      assignees = _ref.assignees,
+      actions = _ref.actions,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _objectSpread2.default)({
+    icon_name: null,
+    deliverable_type: null,
+    has_workflow: flow !== "flag",
+    requires_qa: roles.includes("auditor"),
+    per_retailer: !retailers.some(function (item) {
+      return 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 = (_OPTIONS$flow = OPTIONS[flow]) === null || _OPTIONS$flow === void 0 ? void 0 : _OPTIONS$flow.map(function (name) {
+      return STATUS[name];
+    })) !== null && _OPTIONS$flow$map !== void 0 ? _OPTIONS$flow$map : [],
+    retailers: retailers,
+    roles: roles,
+    assignees: (0, _objectSpread2.default)({
+      especialist: null,
+      facilitator: null,
+      auditor: null
+    }, assignees),
+    actions: actions
+  }, rest);
+};
+
+var category = function category(category_name, display_name) {
+  return {
+    category_name: category_name,
+    display_name: display_name
+  };
+};
+/** Respuesta de GET /product-services (el cuerpo, sin la envoltura de la lambda). */
+
+
+var buildProductServices = function buildProductServices() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      delSolStatus = _ref2.delSolStatus;
+
+  return {
+    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 !== null && delSolStatus !== void 0 ? 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 !== null && delSolStatus !== void 0 ? 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 !== null && delSolStatus !== void 0 ? 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). */
+
+
+exports.buildProductServices = buildProductServices;
+
+var assignablesFor = function assignablesFor(role) {
+  return Object.values(PEOPLE).filter(function (person) {
+    return (role === "facilitator" ? [4, 5] : [7, 8]).includes(person.id_role);
+  }).map(function (person) {
+    return {
+      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). */
+
+
+exports.assignablesFor = assignablesFor;
+
+var applyProductServicesChange = function applyProductServicesChange(body, action, data) {
+  var target = body.services.find(function (item) {
+    return item.service_name === (data === null || data === void 0 ? void 0 : data.serviceName);
+  });
+  if (!target) return {
+    statusCode: 404,
+    message: "El producto no tiene ese servicio en esta orden."
+  };
+
+  if (action === "set-status") {
+    var status = STATUS[data.statusName];
+    if (!status) return {
+      statusCode: 400,
+      message: "Estatus no válido."
+    };
+    target.retailers.forEach(function (item) {
+      if (!data.retailerIds || data.retailerIds.includes(item.id_retailer)) item.status = status;
+    });
+    target.status = generalOf(target.retailers);
+    return {
+      statusCode: 200
+    };
+  }
+
+  if (action === "assign") {
+    var _PEOPLE$data$userId;
+
+    target.assignees[data.role] = data.userId ? (_PEOPLE$data$userId = PEOPLE[data.userId]) !== null && _PEOPLE$data$userId !== void 0 ? _PEOPLE$data$userId : {
+      id_user: data.userId
+    } : null;
+    return {
+      statusCode: 200
+    };
+  }
+
+  return {
+    statusCode: 400,
+    message: "Acci\xF3n no v\xE1lida: ".concat(action, ".")
+  };
+};
+
+exports.applyProductServicesChange = applyProductServicesChange;

package/dist/components/pages/CreatorsProductEdition/sections/StatusChip.js

@@ -15,19 +15,28 @@ var _jsxRuntime = require("react/jsx-runtime");
  * 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.
  */
 var StatusChip = function StatusChip(_ref) {
+  var _ref2;
+
   var status = _ref.status,
       _ref$oval = _ref.oval,
-      oval = _ref$oval === void 0 ? false : _ref$oval;
-  var label = status !== null && status !== void 0 ? status : "NS";
+      oval = _ref$oval === void 0 ? false : _ref$oval,
+      labelProp = _ref.label,
+      color = _ref.color,
+      title = _ref.title;
+  var label = (_ref2 = labelProp !== null && labelProp !== void 0 ? labelProp : status) !== null && _ref2 !== void 0 ? _ref2 : "NS";
   var chip = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
     label: label,
     size: "small",
     sx: {
       height: 20,
       borderRadius: oval ? "10px" : "3px",
-      backgroundColor: (0, _tokens.statusColor)(status),
+      backgroundColor: color !== null && color !== void 0 ? color : (0, _tokens.statusColor)(status),
       color: _tokens.COLORS.white,
       fontFamily: _tokens.FONTS.Lato,
       fontSize: 12,
@@ -38,7 +47,7 @@ var StatusChip = function StatusChip(_ref) {
       }
     }
   });
-  var name = (0, _tokens.statusName)(status);
+  var name = title !== null && title !== void 0 ? title : (0, _tokens.statusName)(status);
   return name ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
     title: name,
     arrow: true,

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

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TodosLosServicios = exports.EspecialistaTextos = exports.EspecialistaImagenesCelular = exports.EspecialistaImagenes = exports.ConServiciosDeEjemplo = exports.AuditorQA = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _mockApi = require("../CreatorsProductEdition/mocks/mockApi");
+
+var _catalog = require("../../organisms/ServicesNavigation/catalog");
+
+var _ImageEditor = require("../RetailerProductEdition/stories/ImageEditor.stories");
+
+var _TextEditor = require("../RetailerProductEdition/stories/TextEditor.stories");
+
+var _Auditor = require("../RetailerProductEdition/stories/Auditor.stories");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  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.
+*/
+var _default = {
+  title: "Components/pages/ProductEdition",
+  component: _index.ProductEdition,
+  decorators: [(0, _mockApi.withMockApi)()],
+  parameters: {
+    layout: "fullscreen"
+  }
+}; // Como en la app: la pantalla vive en una caja de altura fija.
+
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      height: "100vh",
+      display: "flex",
+      overflow: "hidden"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductEdition, (0, _objectSpread2.default)({}, args))
+  });
+};
+
+var base = {
+  app: "creators",
+  token: _ImageEditor.ImageEditor.args.token,
+  productSelected: _ImageEditor.ImageEditor.args.productSelected,
+  enableDigitalAssets: true
+};
+var 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). */
+
+var 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. */
+
+var EspecialistaImagenes = Template.bind({});
+exports.EspecialistaImagenes = EspecialistaImagenes;
+EspecialistaImagenes.storyName = "Especialista de imágenes";
+EspecialistaImagenes.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+  tabsSections: _ImageEditor.ImageEditor.args.tabsSections,
+  user: _ImageEditor.ImageEditor.args.user
+});
+/** Especialista de textos (rol 7): Ficha técnica y Descripción. */
+
+var EspecialistaTextos = Template.bind({});
+exports.EspecialistaTextos = EspecialistaTextos;
+EspecialistaTextos.storyName = "Especialista de textos";
+EspecialistaTextos.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+  tabsSections: _TextEditor.TextEditor.args.tabsSections,
+  user: _TextEditor.TextEditor.args.user
+});
+/** Auditor QA (rol 6): asignado a todo el producto, ve los tres servicios. */
+
+var AuditorQA = Template.bind({});
+exports.AuditorQA = AuditorQA;
+AuditorQA.storyName = "Auditor QA";
+AuditorQA.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+  tabsSections: TODAS_LAS_PESTAÑAS,
+  user: _Auditor.Auditor.args.user
+});
+/** Auditor con servicios de ejemplo: así se ve con más de los tres de siempre. */
+
+var ConServiciosDeEjemplo = Template.bind({});
+exports.ConServiciosDeEjemplo = ConServiciosDeEjemplo;
+ConServiciosDeEjemplo.storyName = "Con servicios de ejemplo";
+ConServiciosDeEjemplo.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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.
+ */
+
+var TodosLosServicios = Template.bind({});
+exports.TodosLosServicios = TodosLosServicios;
+TodosLosServicios.storyName = "Todos los servicios";
+TodosLosServicios.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, AuditorQA.args), {}, {
+  demoServices: (0, _catalog.allCatalogServices)({
+    exclude: ["datasheet", "description", "images"]
+  })
+});
+/** En celular la lista se abre como panel con el botón «Servicios». */
+
+var EspecialistaImagenesCelular = Template.bind({});
+exports.EspecialistaImagenesCelular = EspecialistaImagenesCelular;
+EspecialistaImagenesCelular.storyName = "Especialista de imágenes · celular";
+EspecialistaImagenesCelular.args = EspecialistaImagenes.args;
+EspecialistaImagenesCelular.parameters = {
+  viewport: {
+    defaultViewport: "mobile2"
+  }
+};