contentoh-components-library 21.6.56 → 21.6.57

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

@@ -0,0 +1,247 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabsBar = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _ServiceActions = require("./ServiceActions");
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Barra de pestañas (Descripción / Ficha técnica / Imágenes) y sus acciones:
+  ayuda, versión, estatus, guardar, borrar/descargar/cambiar vista de imágenes y
+  asignaciones.
+
+  Reemplaza a `organisms/FullTabsMenu` (TabsMenu + StatusAsignationInfo) con
+  los mismos props y el mismo comportamiento, hecho con MUI:
+    - las pestañas se desplazan de lado si no caben;
+    - si no caben junto a las pestañas, las acciones bajan a su propia fila
+      (las acciones son `ServiceActions`, compartido con el panel de imagen);
+    - cambiar de pestaña con cambios sin guardar pide confirmación.
+*/
+var tabSx = {
+  fontFamily: _tokens.FONTS.Raleway_500,
+  textTransform: "none",
+  fontSize: {
+    xs: 13,
+    sm: 14
+  },
+  lineHeight: "21px",
+  whiteSpace: "nowrap",
+  color: _tokens.COLORS.s5,
+  minWidth: {
+    xs: 0,
+    sm: 149
+  },
+  minHeight: 36,
+  px: {
+    xs: 0.5,
+    sm: 0
+  },
+  pb: "5px",
+  alignItems: "flex-start",
+  borderBottom: "2px solid ".concat(_tokens.COLORS.s3),
+  transition: "font-size 0.1s",
+  "&.Mui-selected": {
+    color: _tokens.COLORS.s5,
+    fontSize: {
+      xs: 14,
+      sm: 18
+    }
+  }
+};
+
+var TabsBar = function TabsBar(_ref) {
+  var _tabs$find;
+
+  var _ref$tabsSections = _ref.tabsSections,
+      tabsSections = _ref$tabsSections === void 0 ? {} : _ref$tabsSections,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? "" : _ref$status,
+      activeTab = _ref.activeTab,
+      setActiveTab = _ref.setActiveTab,
+      imageLayout = _ref.imageLayout,
+      setImageLayout = _ref.setImageLayout,
+      assig = _ref.assig,
+      setAssignation = _ref.setAssignation,
+      isRetailer = _ref.isRetailer,
+      downloadImages = _ref.downloadImages,
+      askToDeleteImages = _ref.askToDeleteImages,
+      onClickSave = _ref.onClickSave,
+      showSaveButton = _ref.showSaveButton,
+      canAssign = _ref.canAssign,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      images = _ref.images,
+      _ref$updatedDescripti = _ref.updatedDescriptions,
+      updatedDescriptions = _ref$updatedDescripti === void 0 ? [] : _ref$updatedDescripti,
+      _ref$updatedDatasheet = _ref.updatedDatasheets,
+      updatedDatasheets = _ref$updatedDatasheet === void 0 ? [] : _ref$updatedDatasheet,
+      _ref$updatedImages = _ref.updatedImages,
+      updatedImages = _ref$updatedImages === void 0 ? [] : _ref$updatedImages,
+      setUpdatedDescriptions = _ref.setUpdatedDescriptions,
+      setUpdatedDatasheets = _ref.setUpdatedDatasheets,
+      setImages = _ref.setImages;
+  var tabs = Object.keys(tabsSections);
+  var initialTab = (_tabs$find = tabs.find(function (key) {
+    return tabsSections[key];
+  })) !== null && _tabs$find !== void 0 ? _tabs$find : tabs[0];
+  var currentTab = tabs.includes(activeTab) ? activeTab : initialTab;
+  var isImagesTab = currentTab === "Imágenes"; // En celular las pestañas se reparten a lo ancho: con tres caben todas y no
+  // queda ninguna escondida detrás de la flecha de desplazamiento.
+
+  var isPhone = (0, _material.useMediaQuery)("(max-width:599.95px)"); // --- Cambio de pestaña con cambios sin guardar ---------------------------
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      pendingTab = _useState2[0],
+      setPendingTab = _useState2[1];
+
+  var hasUnsavedChanges = function hasUnsavedChanges() {
+    var _images$values, _images$values$filter;
+
+    return updatedDescriptions.length > 0 || updatedDatasheets.length > 0 || updatedImages.length > 0 || (images === null || images === void 0 ? void 0 : (_images$values = images.values) === null || _images$values === void 0 ? void 0 : (_images$values$filter = _images$values.filter(function (f) {
+      return !f.id;
+    })) === null || _images$values$filter === void 0 ? void 0 : _images$values$filter.length) > 0;
+  };
+
+  var requestTab = function requestTab(tab) {
+    if (tab === currentTab) return;
+    if (hasUnsavedChanges()) setPendingTab(tab);else setActiveTab(tab);
+  };
+
+  var confirmTabChange = function confirmTabChange() {
+    // Igual que TabsMenu: al aceptar se descartan los cambios pendientes.
+    setActiveTab(pendingTab);
+    setUpdatedDescriptions && setUpdatedDescriptions([]);
+    setUpdatedDatasheets && setUpdatedDatasheets([]);
+    setImages && setImages({});
+    setPendingTab(null);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      mb: "14px",
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      flexWrap: "wrap",
+      alignItems: "flex-end",
+      justifyContent: "space-between",
+      columnGap: 2,
+      rowGap: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, {
+        value: currentTab !== null && currentTab !== void 0 ? currentTab : false,
+        onChange: function onChange(_, tab) {
+          return requestTab(tab);
+        },
+        variant: isPhone && tabs.length <= 3 ? "fullWidth" : "scrollable",
+        scrollButtons: "auto",
+        allowScrollButtonsMobile: true,
+        TabIndicatorProps: {
+          sx: {
+            bgcolor: _tokens.COLORS.magenta_s2,
+            height: 2
+          }
+        },
+        sx: {
+          flex: "1 1 auto",
+          maxWidth: "100%",
+          minHeight: 36,
+          minWidth: 0,
+          "& .MuiTabs-flexContainer": {
+            gap: "10px"
+          }
+        },
+        children: tabs.map(function (tab) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, {
+            value: tab,
+            label: tab,
+            disableRipple: true,
+            sx: tabSx
+          }, tab);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceActions.ServiceActions, {
+        status: status,
+        imagesSection: isImagesTab,
+        imageLayout: imageLayout,
+        setImageLayout: setImageLayout,
+        assig: assig,
+        setAssignation: setAssignation,
+        isRetailer: isRetailer,
+        downloadImages: downloadImages,
+        askToDeleteImages: askToDeleteImages,
+        onClickSave: onClickSave,
+        showSaveButton: showSaveButton,
+        canAssign: canAssign,
+        version: version,
+        setShowVersionSelector: setShowVersionSelector,
+        resetKey: currentTab
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open: Boolean(pendingTab),
+      onClose: function onClose() {
+        return setPendingTab(null);
+      },
+      maxWidth: "xs",
+      fullWidth: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogTitle, {
+        sx: {
+          fontFamily: _tokens.FONTS.Raleway_600,
+          color: _tokens.COLORS.s5
+        },
+        children: "Cambios sin Guardar"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContentText, {
+          sx: {
+            fontFamily: _tokens.FONTS.AvenirNext
+          },
+          children: "Est\xE1s cambiando de vista y aun no guardas cambios \xBFEst\xE1s seguro?"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
+        sx: {
+          px: 3,
+          pb: 2
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: function onClick() {
+            return setPendingTab(null);
+          },
+          sx: {
+            color: _tokens.COLORS.s5,
+            textTransform: "none"
+          },
+          children: "Cancelar"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "contained",
+          disableElevation: true,
+          onClick: confirmTabChange,
+          sx: {
+            textTransform: "none",
+            borderRadius: "20px",
+            bgcolor: _tokens.COLORS.magenta_s2,
+            "&:hover": {
+              bgcolor: _tokens.COLORS.secondary_magenta
+            }
+          },
+          children: "Aceptar"
+        })]
+      })]
+    })]
+  });
+};
+
+exports.TabsBar = TabsBar;

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

@@ -0,0 +1,389 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VariantsPanel = void 0;
+
+var _material = require("@mui/material");
+
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+
+var _ArrowDropUp = _interopRequireDefault(require("@mui/icons-material/ArrowDropUp"));
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Variantes del producto: padre/hijo (ligar, ver la familia, desvincular) y
+  agrupación de variantes (agrupar, ver el grupo, salir del grupo).
+
+  Reemplaza el marcado de la vista original (clases variants-actions,
+  variants-family, family-row...) con MUI, con el mismo comportamiento. Los dos
+  mecanismos siguen separados a propósito: padre/hijo es herencia; el grupo es
+  solo un código compartido, y juntarlos haría creer que agrupar hereda algo.
+*/
+// Rosa ContentOh, el mismo del modal de ligar productos.
+var PINK = "#E13AA8";
+
+var OutlineButton = function OutlineButton(_ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+    variant: "outlined",
+    size: "small",
+    onClick: onClick,
+    sx: {
+      borderColor: PINK,
+      color: PINK,
+      borderRadius: "6px",
+      px: "12px",
+      py: "5px",
+      minHeight: 0,
+      lineHeight: 1.3,
+      textTransform: "none",
+      fontFamily: _tokens.FONTS.Raleway_600,
+      fontSize: 11,
+      "&:hover": {
+        borderColor: PINK,
+        bgcolor: "rgba(".concat(_tokens.COLORS.rgb_color_pink, ", 0.06)")
+      }
+    },
+    children: children
+  });
+};
+
+var ToggleLink = function ToggleLink(_ref2) {
+  var open = _ref2.open,
+      onClick = _ref2.onClick,
+      children = _ref2.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Link, {
+    component: "button",
+    type: "button",
+    "aria-expanded": open,
+    onClick: onClick,
+    sx: {
+      display: "inline-flex",
+      alignItems: "center",
+      fontFamily: _tokens.FONTS.Raleway_500,
+      fontSize: 11,
+      color: _tokens.COLORS.gray,
+      textDecorationColor: "currentColor"
+    },
+    children: [children, open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropUp.default, {
+      fontSize: "small"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {
+      fontSize: "small"
+    })]
+  });
+};
+
+var SmallLink = function SmallLink(_ref3) {
+  var onClick = _ref3.onClick,
+      title = _ref3.title,
+      children = _ref3.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+    component: "button",
+    type: "button",
+    title: title,
+    onClick: onClick,
+    sx: {
+      flexShrink: 0,
+      px: "6px",
+      py: "4px",
+      fontFamily: _tokens.FONTS.Raleway_500,
+      fontSize: 10,
+      color: _tokens.COLORS.gray,
+      whiteSpace: "nowrap",
+      textDecorationColor: "currentColor",
+      "&:hover": {
+        color: PINK
+      }
+    },
+    children: children
+  });
+};
+/** Fila de la familia: el botón navega; "Desvincular" queda FUERA de él. */
+
+
+var FamilyRow = function FamilyRow(_ref4) {
+  var role = _ref4.role,
+      name = _ref4.name,
+      upc = _ref4.upc,
+      disabled = _ref4.disabled,
+      current = _ref4.current,
+      onOpen = _ref4.onOpen,
+      action = _ref4.action;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: "4px",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+      disabled: disabled,
+      onClick: onOpen,
+      sx: {
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        flexWrap: {
+          xs: "wrap",
+          sm: "nowrap"
+        },
+        alignItems: "baseline",
+        justifyContent: "flex-start",
+        columnGap: 1,
+        rowGap: "2px",
+        px: 1,
+        py: "6px",
+        borderRadius: "4px",
+        textAlign: "left",
+        fontFamily: _tokens.FONTS.Raleway_500,
+        fontSize: 12,
+        color: _tokens.COLORS.deep_gray,
+        "&:hover:not(:disabled)": {
+          bgcolor: _tokens.COLORS.s2
+        },
+        "&.Mui-disabled": {
+          opacity: 0.7
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "span",
+        sx: {
+          minWidth: 96,
+          fontSize: 10,
+          color: current ? _tokens.COLORS.gray : PINK
+        },
+        children: role
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "span",
+        sx: {
+          flex: 1,
+          minWidth: 0,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "span",
+        sx: {
+          fontSize: 11,
+          color: _tokens.COLORS.gray
+        },
+        children: upc
+      })]
+    }), action]
+  });
+};
+
+var Note = function Note(_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+    sx: {
+      m: 0,
+      fontFamily: _tokens.FONTS.Raleway_500,
+      fontSize: 11,
+      color: _tokens.COLORS.gray
+    },
+    children: children
+  });
+};
+
+var FamilyBox = function FamilyBox(_ref6) {
+  var open = _ref6.open,
+      children = _ref6.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
+    in: open,
+    unmountOnExit: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+      variant: "outlined",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        mb: "10px",
+        p: 1,
+        borderColor: _tokens.COLORS.s2,
+        borderRadius: "6px"
+      },
+      children: children
+    })
+  });
+};
+
+var VariantsPanel = function VariantsPanel(_ref7) {
+  var _variantGroup$members, _family$variants, _family$variants2;
+
+  var product = _ref7.product,
+      esHijoDeOtro = _ref7.esHijoDeOtro,
+      hijosDelProducto = _ref7.hijosDelProducto,
+      family = _ref7.family,
+      showFamily = _ref7.showFamily,
+      setShowFamily = _ref7.setShowFamily,
+      loadFamily = _ref7.loadFamily,
+      loadingVariant = _ref7.loadingVariant,
+      avisoFamilia = _ref7.avisoFamilia,
+      openFamilyMember = _ref7.openFamilyMember,
+      setPorDesvincular = _ref7.setPorDesvincular,
+      setShowLinkVariants = _ref7.setShowLinkVariants,
+      puedeAgruparse = _ref7.puedeAgruparse,
+      variantGroup = _ref7.variantGroup,
+      showGroup = _ref7.showGroup,
+      setShowGroup = _ref7.setShowGroup,
+      setShowGroupModal = _ref7.setShowGroupModal,
+      handleOnLeaveGroup = _ref7.handleOnLeaveGroup;
+
+  var toggleFamily = function toggleFamily() {
+    setShowFamily(function (abierto) {
+      return !abierto;
+    });
+    loadFamily();
+  };
+
+  var opening = function opening(articleId, label) {
+    return loadingVariant === articleId ? "Abriendo…" : label;
+  };
+
+  var otherMembers = ((_variantGroup$members = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.members) !== null && _variantGroup$members !== void 0 ? _variantGroup$members : []).filter(function (miembro) {
+    return !miembro.isCurrent;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      flexWrap: "wrap",
+      alignItems: "center",
+      gap: "10px",
+      sx: {
+        mb: 1
+      },
+      children: [!esHijoDeOtro && /*#__PURE__*/(0, _jsxRuntime.jsx)(OutlineButton, {
+        onClick: function onClick() {
+          return setShowLinkVariants(true);
+        },
+        children: "Ligar productos"
+      }), !esHijoDeOtro && hijosDelProducto > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleLink, {
+        open: showFamily,
+        onClick: toggleFamily,
+        children: [hijosDelProducto, " hijo", hijosDelProducto === 1 ? "" : "s"]
+      }), esHijoDeOtro && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleLink, {
+        open: showFamily,
+        onClick: toggleFamily,
+        children: "Hijo de otro producto"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FamilyBox, {
+      open: showFamily,
+      children: [!family && /*#__PURE__*/(0, _jsxRuntime.jsx)(Note, {
+        children: "Cargando familia\u2026"
+      }), (family === null || family === void 0 ? void 0 : family.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Note, {
+        children: "No se pudo cargar la familia de este producto."
+      }), (family === null || family === void 0 ? void 0 : family.parent) && /*#__PURE__*/(0, _jsxRuntime.jsx)(FamilyRow, {
+        role: opening(family.parent.articleId, "Producto padre"),
+        name: family.parent.name,
+        upc: family.parent.upc,
+        disabled: loadingVariant !== null,
+        onOpen: function onOpen() {
+          return openFamilyMember(family.parent.articleId);
+        },
+        action: /*#__PURE__*/(0, _jsxRuntime.jsx)(SmallLink, {
+          title: "Dejar de ser hijo de este producto",
+          onClick: function onClick() {
+            return setPorDesvincular({
+              mode: "self",
+              childArticleId: product === null || product === void 0 ? void 0 : product.id_article,
+              childName: product === null || product === void 0 ? void 0 : product.name,
+              childUpc: product === null || product === void 0 ? void 0 : product.upc,
+              parentName: family.parent.name,
+              parentUpc: family.parent.upc
+            });
+          },
+          children: "Desvincular"
+        })
+      }), family === null || family === void 0 ? void 0 : (_family$variants = family.variants) === null || _family$variants === void 0 ? void 0 : _family$variants.map(function (variant) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(FamilyRow, {
+          role: opening(variant.articleId, variant.isCurrent ? "Estás aquí" : "Hijo"),
+          name: variant.name,
+          upc: variant.upc,
+          current: variant.isCurrent,
+          disabled: variant.isCurrent || loadingVariant !== null,
+          onOpen: function onOpen() {
+            return openFamilyMember(variant.articleId);
+          },
+          action: // Solo cuando esta ficha ES el padre: si hay `parent`, lo que se
+          // lista son hermanos.
+          !family.parent && !variant.isCurrent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SmallLink, {
+            title: "Desvincular este hijo",
+            onClick: function onClick() {
+              return setPorDesvincular({
+                mode: "child",
+                childArticleId: variant.articleId,
+                childName: variant.name,
+                childUpc: variant.upc,
+                parentName: product === null || product === void 0 ? void 0 : product.name,
+                parentUpc: product === null || product === void 0 ? void 0 : product.upc
+              });
+            },
+            children: "Desvincular"
+          }) : null
+        }, variant.articleId);
+      }), family && !family.error && !((_family$variants2 = family.variants) !== null && _family$variants2 !== void 0 && _family$variants2.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Note, {
+        children: "Este producto no tiene hijos."
+      }), avisoFamilia && /*#__PURE__*/(0, _jsxRuntime.jsx)(Note, {
+        children: avisoFamilia
+      })]
+    }), puedeAgruparse && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: "10px",
+        sx: {
+          mb: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OutlineButton, {
+          onClick: function onClick() {
+            return setShowGroupModal(true);
+          },
+          children: variantGroup !== null && variantGroup !== void 0 && variantGroup.group ? "Cambiar de grupo" : "Agrupar variantes"
+        }), (variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleLink, {
+          open: showGroup,
+          onClick: function onClick() {
+            return setShowGroup(function (abierto) {
+              return !abierto;
+            });
+          },
+          children: ["Variante ", variantGroup.group]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(FamilyBox, {
+        open: showGroup && Boolean(variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group),
+        children: [otherMembers.map(function (miembro) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(FamilyRow, {
+            role: opening(miembro.articleId, "Variante"),
+            name: miembro.name,
+            upc: miembro.upc,
+            disabled: loadingVariant !== null,
+            onOpen: function onOpen() {
+              return openFamilyMember(miembro.articleId);
+            }
+          }, miembro.articleId);
+        }), otherMembers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Note, {
+          children: ["Este producto es el \xFAnico en el grupo ", variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group, "."]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SmallLink, {
+            title: "Quitar este producto del grupo",
+            onClick: handleOnLeaveGroup,
+            children: "Quitar del grupo"
+          })
+        })]
+      })]
+    })]
+  });
+};
+
+exports.VariantsPanel = VariantsPanel;