contentoh-components-library 21.6.61 → 21.6.63

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

@@ -1,1237 +0,0 @@
-"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;