contentoh-components-library 21.6.57 → 21.6.59

package/src/components/pages/CreatorsProductEdition/sections/tokens.js

@@ -0,0 +1,63 @@
+import { FontFamily, GlobalColors } from "../../../../global-files/variables";
+import { STATUS_DICTIONARY } from "../../../../global-files/statusDictionary";
+
+/*
+  Colores y tipografía de la edición de producto, en un solo lugar para las
+  secciones hechas con MUI. Son los mismos de los componentes originales
+  (Status, FeatureTag, TabSection, ScreenHeader...): el diseño no cambia.
+*/
+
+export const COLORS = GlobalColors;
+export const FONTS = FontFamily;
+
+/** Color de fondo de la etiqueta de estatus, como en `atoms/Status/styles.js`. */
+const STATUS_COLORS = {
+  CA: GlobalColors.in_progress,
+  IE: GlobalColors.in_progress,
+  GLD: GlobalColors.in_progress,
+  R: GlobalColors.reception,
+  AS: GlobalColors.reception,
+  SAC: GlobalColors.reception,
+  PA: GlobalColors.reception,
+  AA: GlobalColors.finished,
+  AP: GlobalColors.finished,
+  AC: GlobalColors.finished,
+  AAC: GlobalColors.finished,
+  ACA: GlobalColors.finished,
+  RA: GlobalColors.rejected_status,
+  RC: GlobalColors.rejected_status,
+  RP: GlobalColors.rejected_status,
+  RAC: GlobalColors.rejected_status,
+  RCA: GlobalColors.rejected_status,
+  Dat: GlobalColors.s4,
+  Dsc: GlobalColors.s4,
+  Imgs: GlobalColors.s4,
+  FAP: GlobalColors.exported,
+  Ex: GlobalColors.exported,
+  DDI: GlobalColors.original_purpura,
+  TAB: GlobalColors.deep_gray,
+  Pt: GlobalColors.s2,
+};
+
+/** "RA/AS" se pinta con el color de la primera parte, igual que el original. */
+export const statusColor = (status) =>
+  STATUS_COLORS[String(status ?? "").replace(/\/.*/, "")] ?? GlobalColors.s3;
+
+/** Nombre legible: "RA/AS" → "Rechazado Auditor / Asignado". */
+export const statusName = (status) => {
+  if (!status) return null;
+  const names = String(status)
+    .split("/")
+    .map((key) => STATUS_DICTIONARY[key]?.name)
+    .filter(Boolean);
+  return names.length > 0 ? names.join(" / ") : null;
+};
+
+export const retailerImage = (retailer) =>
+  retailer?.image ||
+  `https://content-management-images.s3.amazonaws.com/retailers/${
+    retailer?.id ?? retailer?.id_retailer
+  }.png`;
+
+/** El id de una cadena llega como `id` o como `id_retailer` según el origen. */
+export const retailerId = (retailer) => retailer?.id ?? retailer?.id_retailer;

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

@@ -0,0 +1,111 @@
+import { CreatorsProductEdition } from "../index";
+import { withMockApi } from "../mocks/mockApi";
+
+/*
+  Historias con datos locales: no le pegan a ninguna API, así que funcionan
+  siempre, sin token ni producto vivo en dev. Las respuestas están en
+  `mocks/api.fixtures.js`. Guardar, aprobar o rechazar se acepta sin hacer
+  nada (queda en la consola como `[mock API]`).
+
+  El producto y los usuarios salen de las historias de RetailerProductEdition
+  para que las dos vistas se comparen con lo mismo. El token va solo porque la
+  pantalla lo exige: aquí no sale a ningún lado.
+*/
+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/CreatorsProductEdition",
+  component: CreatorsProductEdition,
+  decorators: [withMockApi()],
+  parameters: { layout: "fullscreen" },
+};
+
+// Como en la app: la pantalla vive en una caja de altura fija que no se
+// desplaza. El scroll tiene que darlo la propia pantalla, en todos los tamaños.
+const Template = (args) => (
+  <div style={{ height: "100vh", display: "flex", overflow: "hidden" }}>
+    <CreatorsProductEdition {...args} />
+  </div>
+);
+
+const base = {
+  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,
+};
+
+const celular = { viewport: { defaultViewport: "mobile2" } };
+
+// --- Especialista de edición (rol 8): pestaña de imágenes -------------------
+
+export const EspecialistaImagenes = Template.bind({});
+EspecialistaImagenes.args = {
+  ...base,
+  tabsSections: ImageEditor.args.tabsSections,
+  user: ImageEditor.args.user,
+};
+
+export const EspecialistaImagenesCelular = Template.bind({});
+EspecialistaImagenesCelular.args = EspecialistaImagenes.args;
+EspecialistaImagenesCelular.parameters = celular;
+
+// --- Especialista de textos (rol 7): descripción ----------------------------
+
+export const EspecialistaTextos = Template.bind({});
+EspecialistaTextos.args = {
+  ...base,
+  tabsSections: TextEditor.args.tabsSections,
+  user: TextEditor.args.user,
+};
+
+export const EspecialistaTextosCelular = Template.bind({});
+EspecialistaTextosCelular.args = EspecialistaTextos.args;
+EspecialistaTextosCelular.parameters = celular;
+
+// --- Auditor QA (rol 6): las tres pestañas ----------------------------------
+
+export const AuditorQA = Template.bind({});
+AuditorQA.args = {
+  ...base,
+  tabsSections: TODAS_LAS_PESTAÑAS,
+  user: Auditor.args.user,
+};
+
+export const AuditorQACelular = Template.bind({});
+AuditorQACelular.args = AuditorQA.args;
+AuditorQACelular.parameters = celular;
+
+// Del Sol en "AC": el auditor asignado ve el botón para validar o rechazar.
+export const AuditorPorEvaluar = Template.bind({});
+AuditorPorEvaluar.args = AuditorQA.args;
+AuditorPorEvaluar.decorators = [withMockApi({ delSolStatus: "AC" })];
+
+// --- Variantes ---------------------------------------------------------------
+
+// Padre con dos hijos y en un grupo de variantes.
+export const ConVariantes = Template.bind({});
+ConVariantes.args = EspecialistaTextos.args;
+ConVariantes.decorators = [withMockApi({ familia: "padre", grupo: true })];
+
+// Hijo de otro producto: no ofrece ligar ni agrupar.
+export const HijoDeOtro = Template.bind({});
+HijoDeOtro.args = EspecialistaTextos.args;
+HijoDeOtro.decorators = [withMockApi({ familia: "hijo" })];
+
+// --- Casos límite -----------------------------------------------------------
+
+export const SinImagenes = Template.bind({});
+SinImagenes.args = EspecialistaImagenes.args;
+SinImagenes.decorators = [withMockApi({ images: false })];
+
+export const ErrorAlCargar = Template.bind({});
+ErrorAlCargar.args = EspecialistaImagenes.args;
+ErrorAlCargar.decorators = [withMockApi({ failLoad: true })];

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

@@ -0,0 +1,85 @@
+import { CreatorsProductEdition } from "../index";
+import { withRealApi } from "../mocks/mockApi";
+
+/*
+  Historias contra la API real de dev. El token y los usuarios se importan de
+  las historias de RetailerProductEdition para no duplicarlos; los productos
+  reales están en `products.js`.
+
+  Dependen de que el token siga sirviendo y el producto exista en dev: si una
+  falla al cargar, revisar primero eso. Las historias con datos locales, que no
+  dependen de nada, están en `CreatorsProductEdition.stories.js`.
+*/
+import { ImageEditor } from "../../RetailerProductEdition/stories/ImageEditor.stories";
+import { Auditor } from "../../RetailerProductEdition/stories/Auditor.stories";
+import { TextEditor } from "../../RetailerProductEdition/stories/TextEditor.stories";
+import { CAMISA_WALMART_MG, RELOJ_CUATRO_CADENAS, VENTILADOR_THD } from "./products";
+
+export default {
+  title: "Components/pages/CreatorsProductEdition/API real",
+  component: CreatorsProductEdition,
+  // Por si se llega desde una historia con datos locales: la API real.
+  decorators: [withRealApi],
+};
+
+const Template = (args) => <CreatorsProductEdition {...args} />;
+
+// Una historia por producto y rol. Para verla en tablet o celular, usar el
+// selector de viewport de la barra de Storybook.
+
+/*
+  Producto por omisión: el ventilador de The Home Depot Golden. El token es el
+  de las historias de RetailerProductEdition; los usuarios también, así que no
+  son los asignados a este producto y la pantalla puede mostrar menos botones
+  de los que vería el especialista o el auditor real.
+*/
+const base = {
+  token: ImageEditor.args.token,
+  productSelected: VENTILADOR_THD,
+};
+
+export const Imagenes = Template.bind({});
+Imagenes.args = {
+  ...base,
+  tabsSections: ImageEditor.args.tabsSections,
+  user: ImageEditor.args.user,
+};
+
+export const Textos = Template.bind({});
+Textos.args = {
+  ...base,
+  tabsSections: TextEditor.args.tabsSections,
+  user: TextEditor.args.user,
+};
+
+export const AuditorQA = Template.bind({});
+AuditorQA.args = {
+  ...base,
+  tabsSections: Auditor.args.tabsSections,
+  user: Auditor.args.user,
+};
+
+// --- Otros productos --------------------------------------------------------
+
+// Camisa de Walmart MG: solo imágenes; ficha técnica y descripciones "NS".
+export const CamisaSoloImagenes = Template.bind({});
+CamisaSoloImagenes.args = {
+  ...Imagenes.args,
+  productSelected: CAMISA_WALMART_MG,
+};
+
+// Reloj con cuatro cadenas en el artículo, pero su orden solo trae Sanborns:
+// el selector muestra únicamente las cadenas de la orden.
+export const RelojCuatroCadenas = Template.bind({});
+RelojCuatroCadenas.args = {
+  ...Imagenes.args,
+  productSelected: RELOJ_CUATRO_CADENAS,
+};
+
+// Yogurt de Del Sol y Oxxo (dos cadenas), el producto de ImageEditor.
+export const YogurtDosCadenas = Template.bind({});
+YogurtDosCadenas.args = { ...ImageEditor.args };
+
+// Maceta de The Home Depot Golden con el auditor, como en Auditor.stories.
+export const MacetaAuditor = Template.bind({});
+MacetaAuditor.args = { ...Auditor.args };