contentoh-components-library 21.6.55 → 21.6.57

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

@@ -0,0 +1,379 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductHeader = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _LocalPolice = _interopRequireDefault(require("@mui/icons-material/LocalPolice"));
+
+var _LocalPoliceOutlined = _interopRequireDefault(require("@mui/icons-material/LocalPoliceOutlined"));
+
+var _acceptIcon = _interopRequireDefault(require("../../../../assets/images/generalButton/acceptIcon.svg"));
+
+var _rejectIcon = _interopRequireDefault(require("../../../../assets/images/generalButton/rejectIcon.svg"));
+
+var _nullIcon = _interopRequireDefault(require("../../../../assets/images/generalButton/nullIcon.svg"));
+
+var _RetailerMenu = require("./RetailerMenu");
+
+var _StatusChip = require("./StatusChip");
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Cabecera del producto: nombre, estatus, completitud, fecha, datos (UPC, SKU,
+  categoría, proveedor), selector de cadena y botón de evaluación.
+
+  Reemplaza a `organisms/FullProductNameHeader` (y a sus hijos ProductNameHeader,
+  FeaturesBar, AvatarAndValidation, ValidationPanel) con los mismos props y el
+  mismo comportamiento, hecho con MUI y responsivo: en pantallas chicas las
+  filas se acomodan en varias líneas en vez de salirse.
+*/
+var getTime = function getTime(date) {
+  return date ? new Date(date).toLocaleDateString() : "";
+};
+
+var FeatureTag = function FeatureTag(_ref) {
+  var feature = _ref.feature,
+      value = _ref.value;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    component: "span",
+    sx: {
+      display: "inline-flex",
+      alignItems: "baseline",
+      gap: "5px",
+      maxWidth: "100%",
+      minHeight: 26,
+      px: "5px",
+      py: "4px",
+      boxSizing: "border-box",
+      bgcolor: _tokens.COLORS.s2,
+      borderRadius: "3px"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      component: "span",
+      sx: {
+        fontFamily: _tokens.FONTS.Raleway_500,
+        fontSize: 14,
+        lineHeight: "18px",
+        color: _tokens.COLORS.original_magenta,
+        flexShrink: 0
+      },
+      children: feature
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      component: "span",
+      sx: {
+        fontFamily: _tokens.FONTS.AvenirNext,
+        fontSize: 12,
+        lineHeight: "16px",
+        letterSpacing: "-0.015em",
+        color: _tokens.COLORS.color_gray,
+        minWidth: 0,
+        overflowWrap: "anywhere"
+      },
+      children: value
+    })]
+  });
+};
+
+var CompletenessBadges = function CompletenessBadges(_ref2) {
+  var percent = _ref2.percent;
+  var rounded = Math.round(percent !== null && percent !== void 0 ? percent : 0);
+  var complete = rounded >= 100;
+  var showPercent = percent || percent === 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [percent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      arrow: true,
+      title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: "Campos requeridos"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Este nuevo icono te indicar\xE1 cuando completes todos los campos requeridos"]
+      }),
+      children: complete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalPolice.default, {
+        sx: {
+          fontSize: 30,
+          color: _tokens.COLORS.color_pink,
+          cursor: "pointer"
+        }
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalPoliceOutlined.default, {
+        sx: {
+          fontSize: 30,
+          color: _tokens.COLORS.s3,
+          cursor: "pointer"
+        }
+      })
+    }) : null, showPercent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      arrow: true,
+      title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: "Porcentaje de requeridos"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Este porcentaje indica la completitud de los atributos requeridos para todos los servicios."]
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        component: "span",
+        sx: {
+          px: "6px",
+          height: 27,
+          lineHeight: "27px",
+          borderRadius: "15px",
+          bgcolor: complete ? _tokens.COLORS.color_pink : _tokens.COLORS.s3,
+          color: _tokens.COLORS.white,
+          fontFamily: _tokens.FONTS.AvenirNext,
+          fontWeight: 600,
+          fontSize: 14
+        },
+        children: [rounded, "%"]
+      })
+    })]
+  });
+};
+
+var EvaluationMenu = function EvaluationMenu(_ref3) {
+  var approve = _ref3.approve,
+      reject = _ref3.reject,
+      approveAll = _ref3.approveAll,
+      rejectAll = _ref3.rejectAll,
+      showApproveRejectAll = _ref3.showApproveRejectAll;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      anchor = _useState2[0],
+      setAnchor = _useState2[1];
+
+  var close = function close() {
+    return setAnchor(null);
+  }; // Como en ValidationPanel: cada opción dispara su acción y el panel se cierra.
+
+
+  var option = function option(icon, label, action) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      onClick: function onClick() {
+        close();
+        action && action();
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+        sx: {
+          minWidth: 30
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: icon,
+          alt: "",
+          width: 20,
+          height: 20
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+        primary: label,
+        primaryTypographyProps: {
+          sx: {
+            fontFamily: _tokens.FONTS.AvenirNext,
+            fontSize: 13,
+            color: _tokens.COLORS.s5,
+            whiteSpace: "normal"
+          }
+        }
+      })]
+    }, label);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: "Evaluar",
+      arrow: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        "aria-label": "Evaluar",
+        size: "small",
+        onClick: function onClick(e) {
+          return setAnchor(e.currentTarget);
+        },
+        sx: {
+          width: 25,
+          height: 25,
+          p: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _nullIcon.default,
+          alt: "",
+          width: 25,
+          height: 25
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Menu, {
+      anchorEl: anchor,
+      open: Boolean(anchor),
+      onClose: close,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: {
+          mt: 1,
+          maxWidth: "calc(100vw - 24px)"
+        }
+      },
+      children: [option(_acceptIcon.default, "Validado", approve), option(_rejectIcon.default, "Rechazado", reject), showApproveRejectAll && option(_acceptIcon.default, "Validar todo y enviar a evaluación", approveAll), showApproveRejectAll && option(_rejectIcon.default, "Rechazar todo y enviar a evaluación", rejectAll)]
+    })]
+  });
+};
+
+var ProductHeader = function ProductHeader(_ref4) {
+  var _headerData$article3, _headerData$article3$, _headerData$article3$2, _headerData$categoryR, _headerData$categoryR2, _headerData$categoryR3, _headerData$categoryR4, _headerData$article4, _headerData$article5, _headerData$article6, _headerData$article7, _headerData$article8;
+
+  var headerData = _ref4.headerData,
+      percent = _ref4.percent,
+      activeRetailer = _ref4.activeRetailer,
+      setActiveRetailer = _ref4.setActiveRetailer,
+      showValidationButtons = _ref4.showValidationButtons,
+      approve = _ref4.approve,
+      reject = _ref4.reject,
+      approveAll = _ref4.approveAll,
+      rejectAll = _ref4.rejectAll,
+      servicesData = _ref4.servicesData,
+      showApproveRejectAll = _ref4.showApproveRejectAll,
+      _ref4$showStatus = _ref4.showStatus,
+      showStatus = _ref4$showStatus === void 0 ? true : _ref4$showStatus;
+
+  // Misma fuente de cadenas que FullProductNameHeader: desde tareas llega el
+  // orden por cadena; si no, la relación categoría-cadena del artículo.
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      retailers = _useState4[0],
+      setRetailers = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var _headerData$article, _ref5;
+
+    var fromTasks = Boolean(headerData.statusByRetailer);
+    var categoryRetailer = headerData.categoryRetailer || ((_headerData$article = headerData.article) === null || _headerData$article === void 0 ? void 0 : _headerData$article.categoryRetailer);
+    setRetailers((_ref5 = fromTasks ? headerData.categoryRetailerInOrder : categoryRetailer) !== null && _ref5 !== void 0 ? _ref5 : []);
+  }, [servicesData]);
+  var retailerIndex = (0, _react.useMemo)(function () {
+    var _headerData$article2, _source$findIndex;
+
+    var source = (headerData === null || headerData === void 0 ? void 0 : (_headerData$article2 = headerData.article) === null || _headerData$article2 === void 0 ? void 0 : _headerData$article2.categoryRetailer) || (headerData === null || headerData === void 0 ? void 0 : headerData.categoryRetailerInOrder) || (headerData === null || headerData === void 0 ? void 0 : headerData.categoryRetailer);
+    return (_source$findIndex = source === null || source === void 0 ? void 0 : source.findIndex(function (retailer) {
+      return (retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer) === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id);
+    })) !== null && _source$findIndex !== void 0 ? _source$findIndex : -1;
+  }, [activeRetailer, headerData]);
+  var status = showStatus ? (headerData === null || headerData === void 0 ? void 0 : headerData.version_status) || (headerData === null || headerData === void 0 ? void 0 : headerData.status) || (headerData === null || headerData === void 0 ? void 0 : headerData.article_status) : null;
+  var category = ((headerData === null || headerData === void 0 ? void 0 : (_headerData$article3 = headerData.article) === null || _headerData$article3 === void 0 ? void 0 : (_headerData$article3$ = _headerData$article3.categoryRetailer) === null || _headerData$article3$ === void 0 ? void 0 : (_headerData$article3$2 = _headerData$article3$[retailerIndex]) === null || _headerData$article3$2 === void 0 ? void 0 : _headerData$article3$2.category_name) || (headerData === null || headerData === void 0 ? void 0 : (_headerData$categoryR = headerData.categoryRetailerInOrder) === null || _headerData$categoryR === void 0 ? void 0 : (_headerData$categoryR2 = _headerData$categoryR[retailerIndex]) === null || _headerData$categoryR2 === void 0 ? void 0 : _headerData$categoryR2.category) || (headerData === null || headerData === void 0 ? void 0 : (_headerData$categoryR3 = headerData.categoryRetailer) === null || _headerData$categoryR3 === void 0 ? void 0 : (_headerData$categoryR4 = _headerData$categoryR3[retailerIndex]) === null || _headerData$categoryR4 === void 0 ? void 0 : _headerData$categoryR4.category) || headerData.categoryName || "").replace(/\|/g, " | ");
+  var features = [{
+    feature: "UPC",
+    value: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article4 = headerData.article) === null || _headerData$article4 === void 0 ? void 0 : _headerData$article4.upc) || (headerData === null || headerData === void 0 ? void 0 : headerData.upc)
+  }, {
+    feature: "SKU",
+    value: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article5 = headerData.article) === null || _headerData$article5 === void 0 ? void 0 : _headerData$article5.sku) || (headerData === null || headerData === void 0 ? void 0 : headerData.sku)
+  }, {
+    feature: "Categoría",
+    value: category
+  }, {
+    feature: "Prov",
+    value: headerData === null || headerData === void 0 ? void 0 : (_headerData$article6 = headerData.article) === null || _headerData$article6 === void 0 ? void 0 : _headerData$article6.company_name
+  }].filter(function (item) {
+    return item.value;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    component: "header",
+    sx: {
+      mb: "17px",
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      columnGap: "10px",
+      rowGap: 0.5,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "h2",
+        sx: {
+          fontFamily: _tokens.FONTS.Raleway,
+          fontWeight: 500,
+          fontSize: {
+            xs: 20,
+            sm: 24
+          },
+          lineHeight: {
+            xs: "28px",
+            sm: "36px"
+          },
+          letterSpacing: "-0.015em",
+          color: _tokens.COLORS.color_gray,
+          mt: "8px",
+          minWidth: 0,
+          overflowWrap: "anywhere"
+        },
+        children: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article7 = headerData.article) === null || _headerData$article7 === void 0 ? void 0 : _headerData$article7.name) || (headerData === null || headerData === void 0 ? void 0 : headerData.name)
+      }), status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusChip.StatusChip, {
+        status: status
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CompletenessBadges, {
+        percent: percent
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "span",
+        sx: {
+          fontFamily: _tokens.FONTS.AvenirNext,
+          fontSize: 13,
+          lineHeight: "18px",
+          color: _tokens.COLORS.s4
+        },
+        children: getTime((headerData === null || headerData === void 0 ? void 0 : (_headerData$article8 = headerData.article) === null || _headerData$article8 === void 0 ? void 0 : _headerData$article8.timestamp) || (headerData === null || headerData === void 0 ? void 0 : headerData.timestamp))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      gap: 1,
+      sx: {
+        mt: 0.5
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+        direction: "row",
+        flexWrap: "wrap",
+        gap: "8px",
+        sx: {
+          minWidth: 0
+        },
+        children: features.map(function (item) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(FeatureTag, (0, _objectSpread2.default)({}, item), item.feature);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        gap: 1,
+        sx: {
+          flexShrink: 0
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RetailerMenu.RetailerMenu, {
+          retailers: retailers,
+          activeRetailer: activeRetailer,
+          setActiveRetailer: setActiveRetailer
+        }), showValidationButtons && /*#__PURE__*/(0, _jsxRuntime.jsx)(EvaluationMenu, {
+          approve: approve,
+          reject: reject,
+          approveAll: approveAll,
+          rejectAll: rejectAll,
+          showApproveRejectAll: showApproveRejectAll
+        })]
+      })]
+    })]
+  });
+};
+
+exports.ProductHeader = ProductHeader;

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

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductMedia = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _PlayCircleFilled = _interopRequireDefault(require("@mui/icons-material/PlayCircleFilled"));
+
+var _assetTypes = require("../../../../global-files/digital-assets/assetTypes");
+
+var _defaultProductImage = _interopRequireDefault(require("../../../../assets/images/defaultImages/defaultProductImage.png"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Imagen o video de producto, con MUI. Hace lo mismo que `atoms/ProductImage`:
+
+    - El tipo se decide por `ext`; la URL no sirve porque apunta al
+      redimensionador de CloudFront y no conserva la extensión. El regex sobre la
+      URL queda de respaldo, igual que en el original.
+    - Una miniatura de video NO lleva controles (no caben y se tragan el clic):
+      se muestra el primer fotograma, un botón de play y la duración.
+    - Si la imagen no carga, se muestra la imagen por defecto.
+*/
+var isVideo = function isVideo(_ref) {
+  var src = _ref.src,
+      ext = _ref.ext;
+  return ext ? (0, _assetTypes.resolvePreviewKind)({
+    ext: ext
+  }) === _assetTypes.ASSET_PREVIEW.VIDEO : /\.mp4($|[?#])/i.test(src || "");
+};
+
+var ProductMedia = function ProductMedia(_ref2) {
+  var src = _ref2.src,
+      ext = _ref2.ext,
+      _ref2$alt = _ref2.alt,
+      alt = _ref2$alt === void 0 ? "" : _ref2$alt,
+      _ref2$thumbnail = _ref2.thumbnail,
+      thumbnail = _ref2$thumbnail === void 0 ? false : _ref2$thumbnail,
+      sx = _ref2.sx;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      failed = _useState2[0],
+      setFailed = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      duration = _useState4[0],
+      setDuration = _useState4[1];
+
+  var fill = {
+    width: "100%",
+    height: "100%",
+    objectFit: "contain",
+    display: "block"
+  };
+
+  if (isVideo({
+    src: src,
+    ext: ext
+  })) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: (0, _objectSpread2.default)({
+        position: "relative",
+        width: "100%",
+        height: "100%"
+      }, sx),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "video",
+        src: thumbnail ? "".concat(src, "#t=0.5") : src,
+        controls: !thumbnail,
+        muted: thumbnail,
+        playsInline: true,
+        preload: "metadata",
+        onLoadedMetadata: function onLoadedMetadata(e) {
+          return setDuration(e.target.duration);
+        },
+        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fill), {}, {
+          bgcolor: "#000",
+          pointerEvents: thumbnail ? "none" : "auto"
+        })
+      }), thumbnail && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleFilled.default, {
+          "aria-hidden": true,
+          sx: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            fontSize: 24,
+            color: "rgba(255,255,255,0.9)",
+            filter: "drop-shadow(0 0 2px rgba(0,0,0,0.6))",
+            pointerEvents: "none"
+          }
+        }), duration ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          component: "span",
+          sx: {
+            position: "absolute",
+            right: 3,
+            bottom: 3,
+            px: "4px",
+            borderRadius: "3px",
+            bgcolor: "rgba(0,0,0,0.75)",
+            color: "#fff",
+            fontSize: 9,
+            lineHeight: "13px",
+            pointerEvents: "none"
+          },
+          children: (0, _assetTypes.formatDuration)(duration)
+        }) : null]
+      })]
+    });
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    component: "img",
+    src: failed || !src ? _defaultProductImage.default : src,
+    alt: alt,
+    onError: function onError() {
+      return setFailed(true);
+    },
+    sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fill), sx)
+  });
+};
+
+exports.ProductMedia = ProductMedia;

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

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetailerMenu = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+
+var _ArrowDropUp = _interopRequireDefault(require("@mui/icons-material/ArrowDropUp"));
+
+var _data = require("../../../../global-files/data");
+
+var _StatusChip = require("./StatusChip");
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/**
+ * Selector de la cadena activa. Reemplaza a `molecules/RetailerSelector` con el
+ * mismo comportamiento:
+ *   - el logo de la cadena activa abre la lista;
+ *   - la activa se marca en rosa suave y con el círculo verde;
+ *   - una cadena cuyo estatus de servicios es "NA" no se puede elegir.
+ */
+var RetailerMenu = function RetailerMenu(_ref) {
+  var _ref$retailers = _ref.retailers,
+      retailers = _ref$retailers === void 0 ? [] : _ref$retailers,
+      activeRetailer = _ref.activeRetailer,
+      setActiveRetailer = _ref.setActiveRetailer;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      anchor = _useState2[0],
+      setAnchor = _useState2[1];
+
+  var activeId = (0, _tokens.retailerId)(activeRetailer);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+      "aria-label": "Cambiar de cadena",
+      "aria-haspopup": "menu",
+      "aria-expanded": Boolean(anchor),
+      onClick: function onClick(e) {
+        return (retailers === null || retailers === void 0 ? void 0 : retailers.length) > 0 && setAnchor(e.currentTarget);
+      },
+      sx: {
+        borderRadius: "14px",
+        pr: 0.25
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+        src: (0, _tokens.retailerImage)(activeRetailer),
+        alt: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.name,
+        sx: {
+          width: 26,
+          height: 26,
+          bgcolor: _tokens.COLORS.s2
+        }
+      }), anchor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropUp.default, {
+        sx: {
+          color: _tokens.COLORS.s4
+        }
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {
+        sx: {
+          color: _tokens.COLORS.s4
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
+      anchorEl: anchor,
+      open: Boolean(anchor),
+      onClose: function onClose() {
+        return setAnchor(null);
+      },
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: {
+          mt: 1,
+          bgcolor: _tokens.COLORS.s2,
+          border: "1px solid ".concat(_tokens.COLORS.s3),
+          maxWidth: "calc(100vw - 24px)"
+        }
+      },
+      children: retailers.map(function (retailer, index) {
+        var isActive = (0, _tokens.retailerId)(retailer) != null && (0, _tokens.retailerId)(retailer) === activeId;
+        var status = retailer !== null && retailer !== void 0 && retailer.services ? (0, _data.getNewStatus)(retailer.services) : null;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+          selected: isActive,
+          onClick: function onClick() {
+            if (status === "NA") return;
+            setActiveRetailer(retailer);
+            setAnchor(null);
+          },
+          sx: {
+            gap: 1.25,
+            borderRadius: "3px",
+            mx: 0.75,
+            "&.Mui-selected, &.Mui-selected:hover": {
+              backgroundColor: "rgba(".concat(_tokens.COLORS.rgb_color_pink, ", 0.1)")
+            },
+            "&.Mui-selected:hover": {
+              backgroundColor: "rgba(".concat(_tokens.COLORS.rgb_color_pink, ", 0.18)")
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
+            sx: {
+              minWidth: 0
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+              src: (0, _tokens.retailerImage)(retailer),
+              alt: retailer === null || retailer === void 0 ? void 0 : retailer.name,
+              sx: {
+                width: 26,
+                height: 26,
+                bgcolor: _tokens.COLORS.white
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+            primary: retailer === null || retailer === void 0 ? void 0 : retailer.name,
+            secondary: retailer === null || retailer === void 0 ? void 0 : retailer.team,
+            primaryTypographyProps: {
+              sx: {
+                fontFamily: _tokens.FONTS.AvenirNext,
+                fontWeight: 500,
+                fontSize: 14,
+                color: _tokens.COLORS.s5,
+                whiteSpace: "normal"
+              }
+            }
+          }), status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusChip.StatusChip, {
+            status: status
+          }), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            "aria-label": "Cadena activa",
+            sx: {
+              width: 20,
+              height: 20,
+              flexShrink: 0,
+              borderRadius: "50%",
+              bgcolor: _tokens.COLORS.exported
+            }
+          })]
+        }, "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name));
+      })
+    })]
+  });
+};
+
+exports.RetailerMenu = RetailerMenu;