contentoh-components-library 21.6.60 → 21.6.61

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

@@ -0,0 +1,1237 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SummaryView = exports.ServiceView = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _ImageOutlined = _interopRequireDefault(require("@mui/icons-material/ImageOutlined"));
+
+var _CloudUploadOutlined = _interopRequireDefault(require("@mui/icons-material/CloudUploadOutlined"));
+
+var _PlayCircleOutline = _interopRequireDefault(require("@mui/icons-material/PlayCircleOutline"));
+
+var _InsertDriveFileOutlined = _interopRequireDefault(require("@mui/icons-material/InsertDriveFileOutlined"));
+
+var _LockOutlined = _interopRequireDefault(require("@mui/icons-material/LockOutlined"));
+
+var _ErrorOutline = _interopRequireDefault(require("@mui/icons-material/ErrorOutline"));
+
+var _ArrowForward = _interopRequireDefault(require("@mui/icons-material/ArrowForward"));
+
+var _ui = require("./ui");
+
+var _model = require("./model");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Vistas de trabajo del prototipo. Una por tipo de entregable, no una por
+  servicio: Descripción, SEO y Header de ficha usan la de textos; Foto, Edición
+  y Resize, la de imágenes. El contenido es de ejemplo: lo que se muestra es
+  cómo se navega y qué ve cada quien, no el editor final.
+*/
+var baseStatus = function baseStatus(status) {
+  return String(status !== null && status !== void 0 ? status : "").split("/")[0];
+};
+
+var isRejected = function isRejected(status) {
+  return String(status !== null && status !== void 0 ? status : "").split("/").some(function (part) {
+    return ["RA", "RC", "RP", "RCA", "RAC"].includes(part);
+  });
+};
+
+var DONE = ["Ex", "FAP"];
+/* ------------------------------------------------------------------------ */
+
+/* Piezas comunes                                                           */
+
+/* ------------------------------------------------------------------------ */
+
+var Panel = function Panel(_ref) {
+  var title = _ref.title,
+      aside = _ref.aside,
+      children = _ref.children,
+      sx = _ref.sx;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: (0, _objectSpread2.default)({
+      border: "1px solid ".concat(_ui.COLORS.s2),
+      borderRadius: "10px",
+      bgcolor: _ui.COLORS.white,
+      p: 2,
+      mb: 2
+    }, sx),
+    children: [(title || aside) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "baseline",
+      spacing: 1,
+      sx: {
+        mb: 1.5,
+        flexWrap: "wrap",
+        rowGap: 0.5
+      },
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontFamily: _ui.TITLE_STACK,
+          fontWeight: 600,
+          fontSize: 15,
+          color: _ui.COLORS.s5
+        },
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          flex: 1
+        }
+      }), aside]
+    }), children]
+  });
+};
+
+var Note = function Note(_ref2) {
+  var icon = _ref2.icon,
+      _ref2$tone = _ref2.tone,
+      tone = _ref2$tone === void 0 ? "info" : _ref2$tone,
+      children = _ref2.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: 1,
+      p: 1.5,
+      mb: 2,
+      borderRadius: "8px",
+      bgcolor: tone === "error" ? "rgba(215, 77, 237, 0.08)" : _ui.COLORS.blue_light,
+      border: "1px solid ".concat(tone === "error" ? "rgba(215, 77, 237, 0.35)" : _ui.COLORS.s2)
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        color: tone === "error" ? _ui.COLORS.rejected_status : _ui.COLORS.s4,
+        display: "flex",
+        mt: "1px"
+      },
+      children: icon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        fontFamily: _ui.FONT_STACK,
+        fontSize: 13,
+        lineHeight: "19px",
+        color: _ui.COLORS.s5
+      },
+      children: children
+    })]
+  });
+};
+
+var REJECTION_COMMENTS = {
+  description: "Falta mencionar la garantía en la descripción larga.",
+  edition: "La toma de empaque tiene sombra: el fondo debe ser blanco puro.",
+  aplusPlatinum: "El banner principal no respeta la guía de marca de la cadena."
+};
+
+var RejectionNote = function RejectionNote(_ref3) {
+  var _statusName, _REJECTION_COMMENTS$s;
+
+  var service = _ref3.service;
+  return isRejected(service.status) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(Note, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorOutline.default, {
+      sx: {
+        fontSize: 18
+      }
+    }),
+    tone: "error",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("b", {
+      children: [(_statusName = (0, _ui.statusName)(service.status)) !== null && _statusName !== void 0 ? _statusName : "Rechazado", "."]
+    }), " ", "\xAB", (_REJECTION_COMMENTS$s = REJECTION_COMMENTS[service.service_name]) !== null && _REJECTION_COMMENTS$s !== void 0 ? _REJECTION_COMMENTS$s : "Revisa los comentarios y vuelve a enviar.", "\xBB"]
+  }) : null;
+};
+
+var DropZone = function DropZone(_ref4) {
+  var label = _ref4.label,
+      hint = _ref4.hint,
+      sx = _ref4.sx;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+    sx: (0, _objectSpread2.default)({
+      width: "100%",
+      minHeight: 120,
+      display: "flex",
+      flexDirection: "column",
+      gap: 0.75,
+      border: "1.5px dashed ".concat(_ui.COLORS.magenta_s2),
+      borderRadius: "10px",
+      bgcolor: "rgba(227, 58, 169, 0.04)",
+      color: _ui.COLORS.magenta_s2,
+      p: 2,
+      "&:hover": {
+        bgcolor: "rgba(227, 58, 169, 0.08)"
+      }
+    }, sx),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudUploadOutlined.default, {
+      sx: {
+        fontSize: 28
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        fontFamily: _ui.FONT_STACK,
+        fontSize: 13,
+        fontWeight: 700
+      },
+      children: label
+    }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+        textAlign: "center"
+      }),
+      children: hint
+    })]
+  });
+};
+
+var CountedField = function CountedField(_ref5) {
+  var label = _ref5.label,
+      _ref5$value = _ref5.value,
+      initial = _ref5$value === void 0 ? "" : _ref5$value,
+      max = _ref5.max,
+      _ref5$rows = _ref5.rows,
+      rows = _ref5$rows === void 0 ? 1 : _ref5$rows,
+      _ref5$required = _ref5.required,
+      required = _ref5$required === void 0 ? false : _ref5$required,
+      placeholder = _ref5.placeholder;
+
+  var _useState = (0, _react.useState)(initial),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var over = max && value.length > max;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+      sx: _ui.labelSx,
+      children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "span",
+        sx: {
+          color: _ui.COLORS.magenta_s2
+        },
+        children: " *"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+      fullWidth: true,
+      size: "small",
+      multiline: rows > 1,
+      minRows: rows > 1 ? rows : undefined,
+      value: value,
+      placeholder: placeholder,
+      onChange: function onChange(event) {
+        return setValue(event.target.value);
+      },
+      sx: _ui.fieldSx
+    }), max && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+      sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+        textAlign: "right",
+        mt: 0.25,
+        color: over ? _ui.COLORS.rejected_status : _ui.COLORS.s4
+      }),
+      children: [value.length, " / ", max]
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+/* Resumen                                                                  */
+
+/* ------------------------------------------------------------------------ */
+
+
+var StatTile = function StatTile(_ref6) {
+  var value = _ref6.value,
+      label = _ref6.label,
+      color = _ref6.color;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      flex: "1 1 120px",
+      border: "1px solid ".concat(_ui.COLORS.s2),
+      borderRadius: "10px",
+      p: 1.5,
+      bgcolor: _ui.COLORS.white
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      spacing: 0.75,
+      children: [color && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          width: 8,
+          height: 8,
+          borderRadius: "50%",
+          bgcolor: color
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontFamily: _ui.TITLE_STACK,
+          fontWeight: 600,
+          fontSize: 24,
+          lineHeight: "30px",
+          color: _ui.COLORS.s5
+        },
+        children: value
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: _ui.captionSx,
+      children: label
+    })]
+  });
+};
+
+var SummaryView = function SummaryView(_ref7) {
+  var services = _ref7.services,
+      userId = _ref7.userId,
+      onSelect = _ref7.onSelect;
+  var pending = services.filter(function (service) {
+    return (0, _model.isPendingFor)(service, userId);
+  }).length;
+  var rejected = services.filter(function (service) {
+    return isRejected(service.status);
+  }).length;
+  var done = services.filter(function (service) {
+    return DONE.includes(baseStatus(service.status));
+  }).length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      spacing: 1.5,
+      sx: {
+        mb: 2,
+        flexWrap: "wrap",
+        rowGap: 1.5
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatTile, {
+        value: services.length,
+        label: "Servicios contratados"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatTile, {
+        value: pending,
+        label: "Te tocan a ti",
+        color: _ui.COLORS.magenta_s2
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatTile, {
+        value: rejected,
+        label: "Rechazados",
+        color: _ui.COLORS.rejected_status
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatTile, {
+        value: done,
+        label: "Terminados",
+        color: _ui.COLORS.exported
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Panel, {
+      title: "Avance",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        "aria-hidden": "true",
+        sx: {
+          display: "flex",
+          gap: "3px",
+          height: 10
+        },
+        children: (0, _model.groupServices)(services).flatMap(function (group) {
+          return group.services;
+        }).map(function (service) {
+          var _statusName2;
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            title: "".concat(service.display_name, " \xB7 ").concat((_statusName2 = (0, _ui.statusName)(service.status)) !== null && _statusName2 !== void 0 ? _statusName2 : service.status),
+            sx: {
+              flex: "1 1 0",
+              minWidth: 4,
+              borderRadius: "3px",
+              bgcolor: (0, _ui.serviceStatusColor)(service)
+            }
+          }, service.service_name);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+          mt: 0.75
+        }),
+        children: "Cada segmento es un servicio, con el color de su estatus, en el orden de la lista."
+      })]
+    }), (0, _model.groupServices)(services).map(function (group) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+        title: group.label,
+        aside: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: _ui.captionSx,
+          children: group.services.length
+        }),
+        sx: {
+          p: 1,
+          pt: 1.5
+        },
+        children: group.services.map(function (service) {
+          var _service$assignees;
+
+          var especialist = (_service$assignees = service.assignees) === null || _service$assignees === void 0 ? void 0 : _service$assignees.especialist;
+          var mine = (0, _model.isPendingFor)(service, userId);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+            onClick: function onClick() {
+              return onSelect(service.service_name);
+            },
+            sx: {
+              width: "100%",
+              display: "grid",
+              gridTemplateColumns: {
+                xs: "minmax(0, 1fr) auto",
+                sm: "minmax(0, 1.6fr) 72px minmax(0, 1fr) 16px 84px 20px"
+              },
+              alignItems: "center",
+              columnGap: 1.5,
+              px: 1,
+              py: 1,
+              borderRadius: "8px",
+              textAlign: "left",
+              "&:hover": {
+                bgcolor: _ui.COLORS.s1
+              },
+              "& + &": {
+                borderTop: "1px solid ".concat(_ui.COLORS.s2)
+              }
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1,
+              sx: {
+                minWidth: 0
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
+                icon: service.icon,
+                sx: {
+                  color: _ui.COLORS.s4
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                noWrap: true,
+                sx: {
+                  fontFamily: _ui.FONT_STACK,
+                  fontSize: 14,
+                  color: _ui.COLORS.color_gray
+                },
+                children: service.display_name
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.StatusChip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _ui.serviceStatusProps)(service)), {}, {
+                oval: true
+              }))
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              noWrap: true,
+              sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+                display: {
+                  xs: "none",
+                  sm: "block"
+                }
+              }),
+              children: especialist ? (0, _model.fullName)(especialist) : "Sin especialista"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                display: {
+                  xs: "none",
+                  sm: "flex"
+                }
+              },
+              children: mine && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PendingDot, {})
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+                display: {
+                  xs: "none",
+                  sm: "block"
+                }
+              }),
+              children: service.updated_at
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowForward.default, {
+              sx: {
+                display: {
+                  xs: "none",
+                  sm: "block"
+                },
+                fontSize: 16,
+                color: _ui.COLORS.s3
+              }
+            })]
+          }, service.service_name);
+        })
+      }, group.key);
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+/* Ficha técnica                                                            */
+
+/* ------------------------------------------------------------------------ */
+
+
+exports.SummaryView = SummaryView;
+var ATTRIBUTES = [{
+  label: "Marca",
+  value: "Norteña Pro",
+  required: true
+}, {
+  label: "Modelo",
+  value: "NP-2040",
+  required: true
+}, {
+  label: "Voltaje",
+  value: "20 V",
+  required: true
+}, {
+  label: "Tipo de batería",
+  value: "Ion de litio",
+  required: true
+}, {
+  label: "Velocidad máxima",
+  value: "1 500 rpm"
+}, {
+  label: "Peso",
+  value: "1.4 kg"
+}, {
+  label: "Garantía",
+  value: "2 años",
+  required: true
+}, {
+  label: "Contenido de la caja",
+  value: "",
+  required: true
+}];
+
+var AttributesView = function AttributesView(_ref8) {
+  var service = _ref8.service,
+      retailerName = _ref8.retailerName;
+  var required = ATTRIBUTES.filter(function (item) {
+    return item.required;
+  });
+  var filled = required.filter(function (item) {
+    return item.value;
+  }).length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RejectionNote, {
+      service: service
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+      title: "Atributos de ".concat(retailerName),
+      aside: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        sx: _ui.captionSx,
+        children: [filled, " de ", required.length, " requeridos completos"]
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "1fr",
+            md: "1fr 1fr"
+          },
+          gap: 2
+        },
+        children: ATTRIBUTES.map(function (item) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(CountedField, {
+            label: item.label,
+            value: item.value,
+            required: item.required
+          }, item.label);
+        })
+      })
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+/* Textos (Descripción, SEO, Header de ficha)                               */
+
+/* ------------------------------------------------------------------------ */
+
+
+var LONG_DESCRIPTION = "Perfora madera, metal y plástico sin cables. El motor de 20 V llega a 1 500 rpm y el embrague de 21 posiciones evita barrir tornillos. Incluye dos baterías de ion de litio de 2 Ah, cargador rápido y estuche.";
+var TEXT_FIELDS = {
+  description: [{
+    label: "Descripción corta",
+    max: 150,
+    rows: 2,
+    required: true,
+    value: "Taladro inalámbrico de 20 V con dos baterías de ion de litio y cargador rápido."
+  }, {
+    label: "Descripción larga",
+    max: 1000,
+    rows: 5,
+    required: true,
+    value: LONG_DESCRIPTION
+  }, {
+    label: "Puntos clave",
+    max: 400,
+    rows: 3,
+    value: "• Motor de 1 500 rpm\n• Dos baterías de 2 Ah\n• Luz LED de trabajo"
+  }],
+  datasheetHeader: [{
+    label: "Encabezado de la ficha",
+    max: 120,
+    rows: 2,
+    required: true,
+    value: "Taladro inalámbrico 20 V | Norteña Pro NP-2040"
+  }],
+  seo: [{
+    label: "Título SEO",
+    max: 60,
+    required: true,
+    value: "Taladro inalámbrico 20 V con 2 baterías | Norteña Pro"
+  }, {
+    label: "Meta descripción",
+    max: 155,
+    rows: 3,
+    required: true,
+    value: "",
+    placeholder: "Resumen para buscadores"
+  }, {
+    label: "Palabras clave",
+    max: 200,
+    rows: 2,
+    value: "taladro inalámbrico, taladro 20v, herramienta eléctrica"
+  }]
+};
+
+var TextView = function TextView(_ref9) {
+  var _TEXT_FIELDS$service$;
+
+  var service = _ref9.service,
+      retailerName = _ref9.retailerName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RejectionNote, {
+      service: service
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+      title: "".concat(service.display_name, " para ").concat(retailerName),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+        spacing: 2,
+        children: ((_TEXT_FIELDS$service$ = TEXT_FIELDS[service.service_name]) !== null && _TEXT_FIELDS$service$ !== void 0 ? _TEXT_FIELDS$service$ : TEXT_FIELDS.description).map(function (field) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(CountedField, (0, _objectSpread2.default)({}, field), field.label);
+        })
+      })
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+/* Traducción                                                               */
+
+/* ------------------------------------------------------------------------ */
+
+
+var TRANSLATION_ROWS = [{
+  label: "Nombre del producto",
+  source: "Taladro inalámbrico 20 V con 2 baterías",
+  target: "20V Cordless Drill with 2 Batteries"
+}, {
+  label: "Descripción corta",
+  source: "Taladro inalámbrico de 20 V con dos baterías de ion de litio y cargador rápido.",
+  target: "20V cordless drill with two lithium-ion batteries and a fast charger."
+}, {
+  label: "Descripción larga",
+  source: LONG_DESCRIPTION,
+  target: ""
+}, {
+  label: "Puntos clave",
+  source: "• Motor de 1 500 rpm\n• Dos baterías de 2 Ah\n• Luz LED de trabajo",
+  target: ""
+}, {
+  label: "Contenido de la caja",
+  source: "Taladro, 2 baterías, cargador y estuche",
+  target: "Drill, 2 batteries, charger and carrying case"
+}];
+
+var LanguagePill = function LanguagePill(_ref10) {
+  var children = _ref10.children,
+      strong = _ref10.strong;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    component: "span",
+    sx: {
+      px: 1.25,
+      height: 26,
+      display: "inline-flex",
+      alignItems: "center",
+      borderRadius: "13px",
+      fontFamily: _ui.FONT_STACK,
+      fontSize: 12,
+      fontWeight: 700,
+      bgcolor: strong ? _ui.COLORS.s5 : _ui.COLORS.s2,
+      color: strong ? _ui.COLORS.white : _ui.COLORS.s5
+    },
+    children: children
+  });
+};
+
+var TranslationView = function TranslationView(_ref11) {
+  var service = _ref11.service,
+      hasSourceServices = _ref11.hasSourceServices;
+  var done = TRANSLATION_ROWS.filter(function (row) {
+    return row.target;
+  }).length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RejectionNote, {
+      service: service
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Note, {
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LockOutlined.default, {
+        sx: {
+          fontSize: 18
+        }
+      }),
+      children: ["El texto original viene de la Descripci\xF3n y la Ficha t\xE9cnica del producto y aqu\xED solo se lee.", hasSourceServices ? " Si hay que corregirlo, se hace en esos servicios." : " Este producto no tiene esos servicios contratados: su contenido sirve de base, pero no aparecen en la lista."]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Panel, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 1,
+        component: "span",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LanguagePill, {
+          children: "Espa\xF1ol (M\xE9xico)"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowForward.default, {
+          sx: {
+            fontSize: 16,
+            color: _ui.COLORS.s4
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LanguagePill, {
+          strong: true,
+          children: "Ingl\xE9s (EE. UU.)"
+        })]
+      }),
+      aside: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          minWidth: 150
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+          sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+            textAlign: "right"
+          }),
+          children: [done, " de ", TRANSLATION_ROWS.length, " campos traducidos"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
+          variant: "determinate",
+          value: done / TRANSLATION_ROWS.length * 100,
+          sx: {
+            mt: 0.5,
+            height: 4,
+            borderRadius: 2,
+            bgcolor: _ui.COLORS.s2,
+            "& .MuiLinearProgress-bar": {
+              bgcolor: _ui.COLORS.magenta_s2
+            }
+          }
+        })]
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: {
+            xs: "none",
+            md: "grid"
+          },
+          gridTemplateColumns: "1fr 1fr",
+          columnGap: 2,
+          mb: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+            fontWeight: 700,
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          }),
+          children: "Original \xB7 solo lectura"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+            fontWeight: 700,
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          }),
+          children: "Traducci\xF3n"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+        spacing: 2,
+        children: TRANSLATION_ROWS.map(function (row) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: _ui.labelSx,
+              children: row.label
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                display: "grid",
+                gridTemplateColumns: {
+                  xs: "1fr",
+                  md: "1fr 1fr"
+                },
+                gap: 1.5
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  p: "8.5px 14px",
+                  borderRadius: "6px",
+                  bgcolor: _ui.COLORS.s1,
+                  border: "1px solid ".concat(_ui.COLORS.s2),
+                  fontFamily: _ui.FONT_STACK,
+                  fontSize: 14,
+                  lineHeight: "23px",
+                  color: _ui.COLORS.gray,
+                  whiteSpace: "pre-line"
+                },
+                children: row.source
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CountedField, {
+                label: "",
+                value: row.target,
+                rows: row.source.length > 80 || row.source.includes("\n") ? 3 : 1,
+                placeholder: "Pendiente de traducir"
+              })]
+            })]
+          }, row.label);
+        })
+      })]
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+/* Imágenes (Imágenes, Foto, Edición, Resize, Adaptaciones, Imagen premium) */
+
+/* ------------------------------------------------------------------------ */
+
+
+var SHOTS = ["Frente", "Reverso", "Lateral", "Empaque", "En uso", "Detalle", "Ambiente", "Medidas"];
+var TILE_STATES = {
+  ready: {
+    label: "Lista",
+    color: _ui.COLORS.finished
+  },
+  pending: {
+    label: "Pendiente",
+    color: _ui.COLORS.s4
+  },
+  rejected: {
+    label: "Rechazada",
+    color: _ui.COLORS.rejected_status
+  }
+};
+
+var tileState = function tileState(service, index) {
+  var base = baseStatus(service.status);
+  if (["Ex", "FAP", "AA", "AP", "AC", "ACA", "AAC"].includes(base)) return "ready";
+  if (["PA", "R"].includes(base)) return "pending";
+  if (isRejected(service.status) && index === 3) return "rejected";
+  return index < 5 ? "ready" : "pending";
+};
+
+var ImagesView = function ImagesView(_ref12) {
+  var service = _ref12.service,
+      imageServices = _ref12.imageServices,
+      onSelect = _ref12.onSelect,
+      userId = _ref12.userId;
+  var states = SHOTS.map(function (_, index) {
+    return tileState(service, index);
+  });
+  var ready = states.filter(function (state) {
+    return state === "ready";
+  }).length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [imageServices.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        mb: 2
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+          mb: 1
+        }),
+        children: ["Las im\xE1genes del producto son las mismas para ", imageServices.length, " servicios. Elige en cu\xE1l trabajas:"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          flexWrap: "wrap",
+          rowGap: 1
+        },
+        children: imageServices.map(function (item) {
+          var active = item.service_name === service.service_name;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+            "aria-pressed": active,
+            onClick: function onClick() {
+              return onSelect(item.service_name);
+            },
+            sx: {
+              gap: 0.75,
+              height: 32,
+              px: 1.5,
+              borderRadius: "16px",
+              fontFamily: _ui.FONT_STACK,
+              fontSize: 13,
+              fontWeight: active ? 700 : 400,
+              color: active ? _ui.COLORS.magenta_s2 : _ui.COLORS.s5,
+              bgcolor: active ? _ui.COLORS.white : _ui.COLORS.s2,
+              border: "1px solid ".concat(active ? _ui.COLORS.magenta_s2 : _ui.COLORS.s2)
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
+              icon: item.icon,
+              sx: {
+                fontSize: 16,
+                color: "inherit"
+              }
+            }), item.display_name, (0, _model.isPendingFor)(item, userId) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PendingDot, {
+              size: 7,
+              withTooltip: false
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.StatusChip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _ui.serviceStatusProps)(item)), {}, {
+              oval: true
+            }))]
+          }, item.service_name);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RejectionNote, {
+      service: service
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+      title: "".concat(service.display_name, " \xB7 ").concat(SHOTS.length, " tomas"),
+      aside: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        sx: _ui.captionSx,
+        children: [ready, " listas para este servicio"]
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(132px, 1fr))",
+          gap: 1.5
+        },
+        children: [SHOTS.map(function (shot, index) {
+          var state = TILE_STATES[states[index]];
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              border: "1px solid ".concat(states[index] === "rejected" ? _ui.COLORS.rejected_status : _ui.COLORS.s2),
+              borderRadius: "8px",
+              overflow: "hidden",
+              bgcolor: _ui.COLORS.white
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                aspectRatio: "1 / 1",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "linear-gradient(135deg, ".concat(_ui.COLORS.blue_light, ", ").concat(_ui.COLORS.s2, ")")
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageOutlined.default, {
+                sx: {
+                  fontSize: 34,
+                  color: _ui.COLORS.s3
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 0.75,
+              sx: {
+                px: 1,
+                py: 0.75
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                noWrap: true,
+                sx: {
+                  flex: 1,
+                  fontFamily: _ui.FONT_STACK,
+                  fontSize: 12,
+                  color: _ui.COLORS.color_gray
+                },
+                children: shot
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  width: 7,
+                  height: 7,
+                  borderRadius: "50%",
+                  bgcolor: state.color
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  fontFamily: _ui.FONT_STACK,
+                  fontSize: 11,
+                  color: state.color
+                },
+                children: state.label
+              })]
+            })]
+          }, shot);
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropZone, {
+          label: "Subir im\xE1genes",
+          hint: "JPG o PNG",
+          sx: {
+            minHeight: 0,
+            aspectRatio: "1 / 1.22"
+          }
+        })]
+      })
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+/* Video                                                                    */
+
+/* ------------------------------------------------------------------------ */
+
+
+var VIDEOS = [{
+  name: "Video demostrativo",
+  length: "0:45",
+  state: "ready"
+}, {
+  name: "Unboxing",
+  length: "1:20",
+  state: "pending"
+}];
+
+var VideoView = function VideoView(_ref13) {
+  var service = _ref13.service;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RejectionNote, {
+      service: service
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+      title: "Videos del producto",
+      aside: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: _ui.captionSx,
+        children: "MP4, hasta 500 MB"
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+          gap: 1.5
+        },
+        children: [VIDEOS.map(function (video) {
+          var state = TILE_STATES[video.state];
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              border: "1px solid ".concat(_ui.COLORS.s2),
+              borderRadius: "8px",
+              overflow: "hidden"
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                aspectRatio: "16 / 9",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                bgcolor: _ui.COLORS.deep_gray
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleOutline.default, {
+                sx: {
+                  fontSize: 40,
+                  color: _ui.COLORS.white,
+                  opacity: 0.85
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 0.75,
+              sx: {
+                px: 1.25,
+                py: 1
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+                noWrap: true,
+                sx: {
+                  flex: 1,
+                  fontFamily: _ui.FONT_STACK,
+                  fontSize: 13,
+                  color: _ui.COLORS.color_gray
+                },
+                children: [video.name, " \xB7 ", video.length]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  width: 7,
+                  height: 7,
+                  borderRadius: "50%",
+                  bgcolor: state.color
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  fontFamily: _ui.FONT_STACK,
+                  fontSize: 11,
+                  color: state.color
+                },
+                children: state.label
+              })]
+            })]
+          }, video.name);
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropZone, {
+          label: "Subir video",
+          hint: "Arrastra el archivo o haz clic",
+          sx: {
+            aspectRatio: "16 / 11.5"
+          }
+        })]
+      })
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+/* Archivos (diseño, 360°, reportes, carga en cadena)                       */
+
+/* ------------------------------------------------------------------------ */
+
+
+var FILES = {
+  brandstore: [["brandstore_taladro_v2.zip", "Versión 2 · 10/10/2026 · 4.2 MB"], ["brandstore_taladro_v1.zip", "Versión 1 · 03/10/2026 · 4.0 MB"]],
+  aplusPlatinum: [["aplus_taladro_v1.html", "Versión 1 · 09/10/2026 · 380 KB"]],
+  golden: [["golden_thd_taladro_borrador.zip", "Borrador · 12/10/2026 · 2.1 MB"]],
+  quality: [["reporte_calidad_11096.pdf", "Versión 1 · 11/10/2026 · 640 KB"]],
+  audit: [],
+  secodatReview: [["revision_secodat_11096.xlsx", "Versión final · 06/10/2026 · 85 KB"]]
+};
+
+var FilesView = function FilesView(_ref14) {
+  var _FILES$service$servic, _service$deliverable;
+
+  var service = _ref14.service;
+  var files = (_FILES$service$servic = FILES[service.service_name]) !== null && _FILES$service$servic !== void 0 ? _FILES$service$servic : [];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RejectionNote, {
+      service: service
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Panel, {
+      title: "Entregable: ".concat((_service$deliverable = service.deliverable) !== null && _service$deliverable !== void 0 ? _service$deliverable : "Archivo"),
+      aside: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        sx: _ui.captionSx,
+        children: [files.length, " ", files.length === 1 ? "archivo" : "archivos"]
+      }),
+      children: [files.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+          mb: 1.5
+        }),
+        children: "A\xFAn no hay entregables para este servicio."
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+        sx: {
+          mb: 1.5
+        },
+        children: files.map(function (_ref15) {
+          var _ref16 = (0, _slicedToArray2.default)(_ref15, 2),
+              name = _ref16[0],
+              meta = _ref16[1];
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 1.5,
+            sx: {
+              py: 1.25,
+              "& + &": {
+                borderTop: "1px solid ".concat(_ui.COLORS.s2)
+              }
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                width: 36,
+                height: 36,
+                borderRadius: "8px",
+                bgcolor: _ui.COLORS.s2,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InsertDriveFileOutlined.default, {
+                sx: {
+                  fontSize: 20,
+                  color: _ui.COLORS.s4
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                flex: 1,
+                minWidth: 0
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                noWrap: true,
+                sx: {
+                  fontFamily: _ui.FONT_STACK,
+                  fontSize: 14,
+                  color: _ui.COLORS.color_gray
+                },
+                children: name
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: _ui.captionSx,
+                children: meta
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.outlineButtonSx), {}, {
+                height: 28,
+                px: 1.5,
+                fontSize: 12
+              }),
+              children: "Descargar"
+            })]
+          }, name);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropZone, {
+        label: "Subir entregable",
+        hint: "PDF, ZIP, HTML o im\xE1genes"
+      })]
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+
+var ServiceView = function ServiceView(_ref17) {
+  var selected = _ref17.selected,
+      service = _ref17.service,
+      services = _ref17.services,
+      userId = _ref17.userId,
+      onSelect = _ref17.onSelect,
+      retailerName = _ref17.retailerName;
+
+  if (selected === _model.SUMMARY || !service) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SummaryView, {
+      services: services,
+      userId: userId,
+      onSelect: onSelect
+    });
+  }
+
+  switch (service.view) {
+    case "attributes":
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(AttributesView, {
+        service: service,
+        retailerName: retailerName
+      }, service.service_name);
+
+    case "text":
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextView, {
+        service: service,
+        retailerName: retailerName
+      }, service.service_name);
+
+    case "translation":
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(TranslationView, {
+        service: service,
+        hasSourceServices: services.some(function (item) {
+          return ["description", "datasheet"].includes(item.service_name);
+        })
+      });
+
+    case "images":
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImagesView, {
+        service: service,
+        imageServices: services.filter(function (item) {
+          return item.view === "images";
+        }),
+        onSelect: onSelect,
+        userId: userId
+      });
+
+    case "video":
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoView, {
+        service: service
+      });
+
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(FilesView, {
+        service: service
+      }, service.service_name);
+  }
+};
+
+exports.ServiceView = ServiceView;