contentoh-components-library 21.6.34 → 21.6.36

package/dist/components/pages/RetailerProductEdition/styles.js

@@ -18,9 +18,9 @@ var _templateObject;
 // Rosa ContentOh, el mismo del modal de ligar productos.
 var PINK = "#E13AA8";
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .action-buttons{\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n        }\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 90%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n      position: relative;\n      transition: all 0.5s ease;\n\n      &.drag-active {\n        background-color: rgba(", ", 0.05);\n        border: 2px dashed ", ";\n        border-radius: 8px;\n\n        aside {\n          opacity: 0.3;\n          pointer-events: none;\n        }\n      }\n\n      .drag-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgba(", ", 0.1);\n        border-radius: 8px;\n        pointer-events: none;\n        z-index: 10;\n\n        p {\n          font-family: ", ";\n          font-size: 24px;\n          font-weight: 600;\n          color: ", ";\n          text-align: center;\n          padding: 20px;\n          background-color: ", ";\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n\n  .variants-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 8px;\n\n    .link-variants {\n      border: 1px solid ", ";\n      border-radius: 6px;\n      background: none;\n      padding: 6px 12px;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      cursor: pointer;\n    }\n\n    .variants-count {\n      border: none;\n      background: none;\n      padding: 0;\n      cursor: pointer;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .variants-family {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-bottom: 10px;\n    padding: 8px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n\n    .loading {\n      margin: 0;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n    }\n\n    .family-row {\n      display: flex;\n      align-items: baseline;\n      gap: 8px;\n      padding: 6px 8px;\n      border-radius: 4px;\n      text-align: left;\n      font-family: ", ";\n      font-size: 12px;\n      color: ", ";\n    }\n\n\n    .family-row .role {\n      min-width: 96px;\n      font-size: 10px;\n      color: ", ";\n    }\n\n    .family-row.current .role {\n      color: ", ";\n    }\n\n    .family-row .name {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .family-row .upc {\n      font-size: 11px;\n      color: ", ";\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .action-buttons{\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n        }\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 90%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n      position: relative;\n      transition: all 0.5s ease;\n\n      &.drag-active {\n        background-color: rgba(", ", 0.05);\n        border: 2px dashed ", ";\n        border-radius: 8px;\n\n        aside {\n          opacity: 0.3;\n          pointer-events: none;\n        }\n      }\n\n      .drag-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgba(", ", 0.1);\n        border-radius: 8px;\n        pointer-events: none;\n        z-index: 10;\n\n        p {\n          font-family: ", ";\n          font-size: 24px;\n          font-weight: 600;\n          color: ", ";\n          text-align: center;\n          padding: 20px;\n          background-color: ", ";\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n\n  .variants-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 8px;\n\n    .link-variants {\n      border: 1px solid ", ";\n      border-radius: 6px;\n      background: none;\n      padding: 6px 12px;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      cursor: pointer;\n    }\n\n    .variants-count {\n      border: none;\n      background: none;\n      padding: 0;\n      cursor: pointer;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .variants-family {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-bottom: 10px;\n    padding: 8px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n\n    .loading {\n      margin: 0;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n    }\n\n    /* La fila es un bot\xF3n que navega; desvincular tiene que quedar FUERA de\n       \xE9l \u2014un bot\xF3n dentro de otro no es HTML v\xE1lido y el clic se confunde\u2014. */\n    .family-item {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .family-item .family-row {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .desvincular {\n      flex-shrink: 0;\n      border: none;\n      background: none;\n      padding: 4px 6px;\n      cursor: pointer;\n      font-family: ", ";\n      font-size: 10px;\n      color: ", ";\n      text-decoration: underline;\n      white-space: nowrap;\n    }\n\n    .desvincular:hover {\n      color: ", ";\n    }\n\n    .family-row {\n      display: flex;\n      align-items: baseline;\n      gap: 8px;\n      padding: 6px 8px;\n      border: none;\n      border-radius: 4px;\n      background: none;\n      cursor: pointer;\n      text-align: left;\n      font-family: ", ";\n      font-size: 12px;\n      color: ", ";\n    }\n\n    .family-row:hover:not(:disabled) {\n      background-color: ", ";\n    }\n\n    .family-row:disabled {\n      cursor: default;\n      opacity: 0.7;\n    }\n\n    .family-row .role {\n      min-width: 96px;\n      font-size: 10px;\n      color: ", ";\n    }\n\n    .family-row.current .role {\n      color: ", ";\n    }\n\n    .family-row .name {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .family-row .upc {\n      font-size: 11px;\n      color: ", ";\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
 
 exports.Container = Container;

package/dist/components/pages/RetailerProductEdition/utils.js

@@ -145,10 +145,15 @@ var normalizeProduct = function normalizeProduct(product) {
 
   var retailersIdsInOrder = productData.statusByRetailer ? productData.statusByRetailer.map(function (status) {
     return status.retailer_id;
-  }) : [];
-  var categoryRetailerInOrder = categoryRetailerNormalized.filter(function (rel) {
+  }) : []; // Un producto sin ninguna relación de cadena+categoría activa llega con
+  // `categoryRetailer` en null, y filtrar sobre null tumbaba la pantalla entera.
+  // Se vuelve alcanzable al saltar entre productos de una familia, que es cuando
+  // se abren fichas que nadie eligió desde el listado. Se conserva el null para
+  // no cambiar lo que ya leen los consumidores.
+
+  var categoryRetailerInOrder = categoryRetailerNormalized ? categoryRetailerNormalized.filter(function (rel) {
     return retailersIdsInOrder.includes(rel.id_retailer);
-  });
+  }) : null;
   return {
     id_article: productData.id_article || article.id_article || 0,
     upc: productData.upc || article.upc || null,

package/dist/index.js

@@ -1122,7 +1122,7 @@ Object.keys(_index85).forEach(function (key) {
   });
 });
 
-var _index86 = require("./components/organisms/ProductImageModal/index");
+var _index86 = require("./components/organisms/UnlinkVariantModal/index");
 
 Object.keys(_index86).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1135,7 +1135,7 @@ Object.keys(_index86).forEach(function (key) {
   });
 });
 
-var _index87 = require("./components/organisms/Chat/index");
+var _index87 = require("./components/organisms/ProductImageModal/index");
 
 Object.keys(_index87).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1148,7 +1148,7 @@ Object.keys(_index87).forEach(function (key) {
   });
 });
 
-var _index88 = require("./components/organisms/Modal/index");
+var _index88 = require("./components/organisms/Chat/index");
 
 Object.keys(_index88).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1161,7 +1161,7 @@ Object.keys(_index88).forEach(function (key) {
   });
 });
 
-var _index89 = require("./components/organisms/OrderDetail/index");
+var _index89 = require("./components/organisms/Modal/index");
 
 Object.keys(_index89).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1174,6 +1174,19 @@ Object.keys(_index89).forEach(function (key) {
   });
 });
 
+var _index90 = require("./components/organisms/OrderDetail/index");
+
+Object.keys(_index90).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index90[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index90[key];
+    }
+  });
+});
+
 var _RangeCalendar = require("./components/organisms/RangeCalendar");
 
 Object.keys(_RangeCalendar).forEach(function (key) {
@@ -1200,28 +1213,28 @@ Object.keys(_TableResizable).forEach(function (key) {
   });
 });
 
-var _index90 = require("./components/organisms/SideModal/index");
+var _index91 = require("./components/organisms/SideModal/index");
 
-Object.keys(_index90).forEach(function (key) {
+Object.keys(_index91).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index90[key]) return;
+  if (key in exports && exports[key] === _index91[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index90[key];
+      return _index91[key];
     }
   });
 });
 
-var _index91 = require("./components/organisms/GridProducts/index");
+var _index92 = require("./components/organisms/GridProducts/index");
 
-Object.keys(_index91).forEach(function (key) {
+Object.keys(_index92).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index91[key]) return;
+  if (key in exports && exports[key] === _index92[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index91[key];
+      return _index92[key];
     }
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.34",
+  "version": "21.6.36",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/organisms/UnlinkVariantModal/index.js

@@ -0,0 +1,141 @@
+import { useState } from "react";
+import axios from "axios";
+
+import { readPayload, ApiError } from "../LinkVariantsModal/api";
+import { Overlay, Panel, Header, Body, Message, Footer } from "./styles";
+
+/*
+  Confirmación para romper un vínculo padre/hijo.
+
+  El servidor ya sabía hacerlo desde el principio —POST /variants/unlink—, pero
+  no había forma de pedirlo desde ninguna pantalla: la única manera de deshacer
+  una liga era DESACTIVAR al padre, que suelta a todos los hijos de golpe y no
+  se puede revertir. Esto es la versión de a uno.
+
+  La acción se pide siempre con el id del HIJO, que es quien tiene el vínculo en
+  `article.parent_article_id`. Por eso las dos direcciones —un hijo que se suelta
+  y un padre que suelta a un hijo— son la misma llamada; lo único que cambia es
+  el texto, porque no es lo mismo lo que el usuario cree estar haciendo.
+
+  props (* requerido):
+    - *childArticleId: el hijo que pierde el vínculo
+    - childName / childUpc: para nombrarlo en el diálogo
+    - parentName / parentUpc: de quién se desprende
+    - mode: "self" (esta ficha deja de ser hija) | "child" (esta ficha suelta a un hijo)
+    - *token, endpoint
+    - *onClose, onUnlinked
+*/
+export const UnlinkVariantModal = ({
+  childArticleId,
+  childName,
+  childUpc,
+  parentName,
+  parentUpc,
+  mode = "self",
+  token,
+  endpoint = process.env.REACT_APP_VARIANTS_ENDPOINT,
+  onClose,
+  onUnlinked,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const nombreHijo = childName || `Producto ${childArticleId}`;
+  const nombrePadre = parentName || "el producto padre";
+
+  const submit = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await axios.post(
+        `${endpoint}/unlink`,
+        { articleIds: [childArticleId] },
+        { headers: { Authorization: token } }
+      );
+
+      const data = readPayload(res);
+      onUnlinked?.({ ...data, mode, childArticleId });
+      onClose?.();
+    } catch (err) {
+      // El transporte siempre responde 200; el error de negocio viaja dentro.
+      setError(
+        err instanceof ApiError || err?.name === "ApiError"
+          ? err.message
+          : "No se pudo desvincular. Intenta de nuevo."
+      );
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Overlay onClick={loading ? undefined : onClose}>
+      <Panel onClick={(event) => event.stopPropagation()}>
+        <Header>
+          <h2>
+            {mode === "self"
+              ? "Dejar de ser hijo de otro producto"
+              : "Desvincular este hijo"}
+          </h2>
+          <p>
+            {mode === "self" ? (
+              <>
+                «{nombreHijo}» dejará de colgar de «{nombrePadre}»
+                {parentUpc ? ` (UPC ${parentUpc})` : ""}.
+              </>
+            ) : (
+              <>
+                «{nombreHijo}»{childUpc ? ` (UPC ${childUpc})` : ""} dejará de
+                colgar de este producto.
+              </>
+            )}
+          </p>
+        </Header>
+
+        <Body>
+          <ul>
+            {/* Lo primero que la gente teme, y no pasa. */}
+            <li>
+              <strong>No se borra nada.</strong> Todo lo que heredó —atributos,
+              descripciones, imágenes y cadenas— se queda como información
+              propia del producto.
+            </li>
+            <li>
+              Desaparecen las marcas de «Heredado» y «Propio»: sin padre dejan de
+              querer decir algo.
+            </li>
+            <li>
+              Deja de recibir la propagación
+              {mode === "self" ? " de su padre" : " de este producto"}: lo que se
+              edite de un lado ya no baja al otro.
+            </li>
+            <li className="aviso">
+              Volver a ligarlos es a mano, y hay que elegir otra vez qué hereda.
+              Desvincular no se deshace solo.
+            </li>
+          </ul>
+        </Body>
+
+        {error && <Message>{error}</Message>}
+
+        <Footer>
+          <button
+            type="button"
+            className="secondary"
+            onClick={onClose}
+            disabled={loading}
+          >
+            Cancelar
+          </button>
+          <button
+            type="button"
+            className="primary"
+            onClick={submit}
+            disabled={loading}
+          >
+            {loading ? "Desvinculando…" : "Desvincular"}
+          </button>
+        </Footer>
+      </Panel>
+    </Overlay>
+  );
+};

package/src/components/organisms/UnlinkVariantModal/styles.js

@@ -0,0 +1,106 @@
+import styled from "styled-components";
+
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+const PINK = "#E13AA8";
+
+export const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(40, 31, 51, 0.4);
+`;
+
+export const Panel = styled.div`
+  width: min(460px, 92vw);
+  border-radius: 10px;
+  background-color: ${GlobalColors.white};
+  font-family: ${FontFamily.Raleway};
+  overflow: hidden;
+`;
+
+export const Header = styled.div`
+  padding: 18px 22px 10px;
+
+  h2 {
+    margin: 0;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 16px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  p {
+    margin: 6px 0 0;
+    font-size: 13px;
+    line-height: 1.4;
+    color: ${GlobalColors.gray};
+  }
+`;
+
+export const Body = styled.div`
+  padding: 4px 22px 8px;
+
+  ul {
+    margin: 0;
+    padding-left: 18px;
+  }
+
+  li {
+    margin-bottom: 6px;
+    font-size: 13px;
+    line-height: 1.4;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  /* Lo único que no se puede deshacer solo va marcado: el resto son
+     consecuencias, esta es una advertencia. */
+  li.aviso {
+    color: ${PINK};
+  }
+`;
+
+export const Message = styled.p`
+  margin: 8px 22px 0;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background-color: rgba(225, 58, 168, 0.1);
+  font-size: 13px;
+  line-height: 1.4;
+  color: ${PINK};
+`;
+
+export const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 22px 20px;
+
+  button {
+    height: 38px;
+    padding: 0 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 13px;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .secondary {
+    border: 1px solid ${GlobalColors.s2};
+    background: none;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  .primary {
+    border: 1px solid ${PINK};
+    background-color: ${PINK};
+    color: ${GlobalColors.white};
+  }
+`;

package/src/components/pages/ProviderProductEdition/index.js

@@ -39,6 +39,7 @@ import { ImageDataTable } from "../../organisms/ImageDataTable";
 import { ImagePreviewer } from "../../organisms/ImagePreviewer";
 import { InputGroup } from "../../organisms/InputGroup";
 import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
+import { UnlinkVariantModal } from "../../organisms/UnlinkVariantModal";
 import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
 import { readPayload } from "../../organisms/LinkVariantsModal/api";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
@@ -781,8 +782,8 @@ const ProviderProductEditionView = ({
     productos no son familia, y una llamada por ficha para no mostrar nada es
     peso que paga todo el mundo por el caso de unos pocos.
   */
-  const loadFamily = async () => {
-    if (family) return family;
+  const loadFamily = async (forzar = false) => {
+    if (family && !forzar) return family;
     try {
       const res = await axios.post(
         `${process.env.REACT_APP_VARIANTS_ENDPOINT}/family`,
@@ -875,6 +876,71 @@ const ProviderProductEditionView = ({
     }
   };
 
+  /*
+    Qué vínculo se está por romper, o null si no hay diálogo abierto.
+
+    Guarda al HIJO, porque la relación vive en él (`article.parent_article_id`)
+    y es lo que pide la acción `unlink`. `mode` solo cambia el texto: no es lo
+    mismo soltarse de un padre que soltar a un hijo, aunque por dentro sea la
+    misma llamada.
+  */
+  const [porDesvincular, setPorDesvincular] = useState(null);
+
+  /*
+    Después de desvincular, esta ficha cambia de forma.
+
+    Si el producto se soltó de su padre, deja de ser hijo y vuelve a poder ligar
+    —el botón reaparece—. Si soltó a un hijo, pierde uno de la cuenta. En los dos
+    casos hay que repreguntar la familia: lo que se ve en la lista ya no es lo
+    que hay en el servidor.
+  */
+  const handleOnUnlinked = (result) => {
+    if (!result) return;
+
+    const updatedProduct =
+      result.mode === "self"
+        ? { ...state.product, parentArticleId: null, variantsCount: 0 }
+        : {
+          ...state.product,
+          variantsCount: Math.max((state.product?.variantsCount ?? 1) - 1, 0),
+        };
+
+    dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
+
+    try {
+      sessionStorage.setItem("productSelected", JSON.stringify(updatedProduct));
+
+      const productEdit = JSON.parse(sessionStorage.getItem("productEdit"));
+      if (productEdit) {
+        sessionStorage.setItem(
+          "productEdit",
+          JSON.stringify({ ...productEdit, product: updatedProduct })
+        );
+      }
+    } catch (error) {
+      console.error("unlinkVariant/sessionStorage: ", error);
+    }
+
+    /*
+      Si ya no queda familia, se cierra el desplegable: su botón desaparece con
+      el vínculo, y dejarlo abierto pinta una caja que dice «no tiene hijos» y
+      que nadie puede cerrar.
+    */
+    if (
+      !updatedProduct.parentArticleId &&
+      (updatedProduct.variantsCount ?? 0) === 0
+    ) {
+      setShowFamily(false);
+    }
+
+    loadFamily(true);
+
+    // Y los servicios: al desvincular, el servidor pone `is_overridden = 0` en
+    // todas las versiones, así que los chips de herencia tienen que dejar de
+    // dibujarse. Sin esto la ficha sigue mostrándolos hasta que se recarga.
+    setLinkNonce((n) => n + 1);
+  };
+
   const openVariant = async (articleId) => {
     setLoadingVariant(articleId);
     try {
@@ -950,8 +1016,14 @@ const ProviderProductEditionView = ({
           };
 
     dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
-    // La lista cacheada quedó vieja: se descarta para que vuelva a pedirse.
-    setFamily(null);
+    /*
+      Se vuelve a pedir, no se vacía.
+
+      `setFamily(null)` invalidaba la caché, pero la lista solo se pide al pulsar
+      el desplegable: si estaba abierto al ligar, se quedaba en «Cargando
+      familia…» para siempre, porque ya nadie iba a volver a pedirla.
+    */
+    loadFamily(true);
     // Y los servicios, para que los chips reflejen la herencia recién creada.
     setLinkNonce((n) => n + 1);
 
@@ -1513,6 +1585,14 @@ const ProviderProductEditionView = ({
             onLinked={handleOnLinkedVariants}
           />
         )}
+        {porDesvincular && (
+          <UnlinkVariantModal
+            {...porDesvincular}
+            token={token}
+            onClose={() => setPorDesvincular(null)}
+            onUnlinked={handleOnUnlinked}
+          />
+        )}
         {showModal && (
           <ProductImageModal
             images={state.images_values}
@@ -1759,43 +1839,92 @@ const ProviderProductEditionView = ({
                     </p>
                   )}
 
+                  {/* Desvincular se ofrece donde se ve el vínculo, y solo en
+                      la dirección que corresponde a esta ficha: desde un hijo,
+                      sobre su padre —«me suelto»—; desde un padre, sobre cada
+                      hijo. A un hermano no: para eso se abre su ficha, donde la
+                      acción dice lo que de verdad va a pasar. */}
                   {family?.parent && (
-                    <button
-                      type="button"
-                      className="family-row parent"
-                      disabled={loadingVariant !== null}
-                      onClick={() => openVariant(family.parent.articleId)}
-                    >
-                      <span className="role">
-                        {loadingVariant === family.parent.articleId
-                          ? "Abriendo…"
-                          : "Producto padre"}
-                      </span>
-                      <span className="name">{family.parent.name}</span>
-                      <span className="upc">{family.parent.upc}</span>
-                    </button>
+                    <div className="family-item">
+                      <button
+                        type="button"
+                        className="family-row parent"
+                        disabled={loadingVariant !== null}
+                        onClick={() => openVariant(family.parent.articleId)}
+                      >
+                        <span className="role">
+                          {loadingVariant === family.parent.articleId
+                            ? "Abriendo…"
+                            : "Producto padre"}
+                        </span>
+                        <span className="name">{family.parent.name}</span>
+                        <span className="upc">{family.parent.upc}</span>
+                      </button>
+
+                      <button
+                        type="button"
+                        className="desvincular"
+                        title="Dejar de ser hijo de este producto"
+                        onClick={() =>
+                          setPorDesvincular({
+                            mode: "self",
+                            childArticleId: state.product?.id_article,
+                            childName: state.product?.name,
+                            childUpc: state.product?.upc,
+                            parentName: family.parent.name,
+                            parentUpc: family.parent.upc,
+                          })
+                        }
+                      >
+                        Desvincular
+                      </button>
+                    </div>
                   )}
 
                   {family?.variants?.map((variant) => (
-                    <button
-                      key={variant.articleId}
-                      type="button"
-                      className={`family-row${
-                        variant.isCurrent ? " current" : ""
-                      }`}
-                      disabled={variant.isCurrent || loadingVariant !== null}
-                      onClick={() => openVariant(variant.articleId)}
-                    >
-                      <span className="role">
-                        {loadingVariant === variant.articleId
-                          ? "Abriendo…"
-                          : variant.isCurrent
-                          ? "Estás aquí"
-                          : "Hijo"}
-                      </span>
-                      <span className="name">{variant.name}</span>
-                      <span className="upc">{variant.upc}</span>
-                    </button>
+                    <div className="family-item" key={variant.articleId}>
+                      <button
+                        type="button"
+                        className={`family-row${
+                          variant.isCurrent ? " current" : ""
+                        }`}
+                        disabled={variant.isCurrent || loadingVariant !== null}
+                        onClick={() => openVariant(variant.articleId)}
+                      >
+                        <span className="role">
+                          {loadingVariant === variant.articleId
+                            ? "Abriendo…"
+                            : variant.isCurrent
+                            ? "Estás aquí"
+                            : "Hijo"}
+                        </span>
+                        <span className="name">{variant.name}</span>
+                        <span className="upc">{variant.upc}</span>
+                      </button>
+
+                      {/* Solo cuando esta ficha ES el padre: si hay `parent`, lo
+                          que se lista son hermanos y este producto no manda
+                          sobre su vínculo. */}
+                      {!family.parent && !variant.isCurrent && (
+                        <button
+                          type="button"
+                          className="desvincular"
+                          title="Desvincular este hijo"
+                          onClick={() =>
+                            setPorDesvincular({
+                              mode: "child",
+                              childArticleId: variant.articleId,
+                              childName: variant.name,
+                              childUpc: variant.upc,
+                              parentName: state.product?.name,
+                              parentUpc: state.product?.upc,
+                            })
+                          }
+                        >
+                          Desvincular
+                        </button>
+                      )}
+                    </div>
                   ))}
 
                   {family && !family.error && !family.variants?.length && (