contentoh-components-library 21.6.30 → 21.6.31

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

@@ -15,9 +15,12 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-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"])), function (_ref) {
+// 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: 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);
+}, _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, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
 
 exports.Container = Container;

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

@@ -126,6 +126,8 @@ var sendMessage = /*#__PURE__*/function () {
 exports.sendMessage = sendMessage;
 
 var normalizeProduct = function normalizeProduct(product) {
+  var _ref5, _productData$parentAr, _ref6, _productData$parent, _ref7, _productData$variants;
+
   // Handle case where product might be wrapped in a product property
   var productData = product.product || product;
   var article = productData.article || {};
@@ -161,6 +163,12 @@ var normalizeProduct = function normalizeProduct(product) {
     percentages: productData.percentages || null,
     summary: productData.summary || null,
     version: productData.version || 0,
+    // Parentesco. read-articles-v2 ya lo devuelve; sin arrastrarlo hasta aquí la
+    // pantalla no puede saber si el producto pertenece a una familia.
+    // `?? null` en vez de `|| null`: variantsCount 0 es un dato válido.
+    parentArticleId: (_ref5 = (_productData$parentAr = productData.parentArticleId) !== null && _productData$parentAr !== void 0 ? _productData$parentAr : article.parentArticleId) !== null && _ref5 !== void 0 ? _ref5 : null,
+    parent: (_ref6 = (_productData$parent = productData.parent) !== null && _productData$parent !== void 0 ? _productData$parent : article.parent) !== null && _ref6 !== void 0 ? _ref6 : null,
+    variantsCount: (_ref7 = (_productData$variants = productData.variantsCount) !== null && _productData$variants !== void 0 ? _productData$variants : article.variantsCount) !== null && _ref7 !== void 0 ? _ref7 : 0,
     id_order: productData.orderId || productData.id_order || 0,
     status: productData.status || null,
     datasheet_status: productData.datasheet_status || null,

package/package.json

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

package/src/components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx

@@ -137,13 +137,20 @@ export const ProviderProductEditionProvider = ({ children }) => {
     }
   };
 
-  const saveDatasheets = async (token) => {
+  /*
+    `propagation` es opcional y solo lo manda la ficha de un producto padre, con
+    lo que el usuario eligió en el diálogo. Sin ese bloque el backend no propaga
+    nada: bajar un cambio a las variantes es una decisión, no un efecto
+    secundario de guardar.
+  */
+  const saveDatasheets = async (token, propagation) => {
     if (state.updated_datasheets_inputs.length === 0) return;
     dispatch({ type: "SET_SAVING", payload: true });
 
     const dataObject = {
       articleId: state.product?.id_article,
       articleData: state.updated_datasheets_inputs,
+      ...(propagation ? { propagation } : {}),
     };
 
     if (state.product?.id_order) {
@@ -174,9 +181,22 @@ export const ProviderProductEditionProvider = ({ children }) => {
           type: "SET_UPDATED_DATASHEETS_INPUTS",
           payload: [],
         });
+        // En una variante, todo atributo que el hijo toca deja de ser heredado:
+        // update-articles-data le pone is_overridden = 1 en la base. Sin
+        // reflejarlo aquí, el chip sigue diciendo "Heredado" hasta la siguiente
+        // carga de la ficha, y el usuario ve una marca que ya es falsa.
+        const esVariante =
+          state.services?.datasheets?.variant?.isVariant ??
+          !!state.product?.parentArticleId;
+
         dispatch({
           type: "UPDATE_DATASHEETS_INPUTS",
-          payload: state.updated_datasheets_inputs,
+          payload: esVariante
+            ? state.updated_datasheets_inputs.map((item) => ({
+                ...item,
+                isOverridden: 1,
+              }))
+            : state.updated_datasheets_inputs,
         });
 
         // Contar cuántos campos requeridos que antes estaban vacíos ahora tienen valor

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

@@ -50,6 +50,9 @@ import { InputGroup } from "../../organisms/InputGroup";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
 import { VersionSelector } from "../../organisms/VersionSelector";
 import { Modal } from "../../organisms/Modal";
+import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
+import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
+import { readPayload } from "../../organisms/LinkVariantsModal/api";
 
 import successIcon from "../../../assets/images/genericModal/genericModalCheck.svg";
 import errorIcon from "../../../assets/images/genericModal/errorModal.svg";
@@ -178,6 +181,14 @@ const RetailerProductEditionView = ({
   const [statusArray, setStatusArray] = useState([]);
   const [rejectAll, setRejectAll] = useState(false);
 
+  // Variantes: mismo comportamiento que la ficha de la aplicación de clientes.
+  const [showLinkVariants, setShowLinkVariants] = useState(false);
+  const [family, setFamily] = useState(null);
+  const [showFamily, setShowFamily] = useState(false);
+  const [loadingVariant, setLoadingVariant] = useState(null);
+  const [pendingPropagation, setPendingPropagation] = useState(null);
+  const [preparandoPropagacion, setPreparandoPropagacion] = useState(false);
+
   const [auditServices, setAuditServices] = useState([]);
   const [auditDatasheets, setAuditDatasheets] = useState([]);
   const [auditDescriptions, setAuditDescriptions] = useState([]);
@@ -771,16 +782,170 @@ const RetailerProductEditionView = ({
     }
   };
 
+  /*
+    Trae la familia: las variantes del producto, o sus hermanas si el abierto es
+    una de ellas. Se pide al abrir la sección y no al montar la pantalla: la
+    mayoría de los productos no son familia.
+  */
+  const loadFamily = async () => {
+    if (family) return family;
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/family`,
+        { articleId: state.product?.id_article },
+        { headers: { Authorization: token } }
+      );
+      const data = readPayload(res);
+      setFamily(data);
+      return data;
+    } catch (error) {
+      console.error("loadFamily: ", error);
+      setFamily({ variants: [], parent: null, error: true });
+      return null;
+    }
+  };
+
+  /*
+    Abre otra variante. Esta pantalla lee el producto de sessionStorage, no de la
+    URL, así que hay que dejarlo ahí antes de navegar; si no, cambia la dirección
+    y sigue mostrando el producto anterior.
+
+    Se pide por ID y no por UPC: hay 12,024 UPC repetidos entre artículos activos
+    y 5,579 de esos casos caen dentro de la misma compañía.
+  */
+  const openVariant = async (articleId) => {
+    setLoadingVariant(articleId);
+    try {
+      const res = await axios.get(`${process.env.REACT_APP_NEW_ARTICLES_ENDPOINT}`, {
+        params: { listType: "general", filterByArticleId: articleId },
+        headers: { Authorization: token },
+      });
+
+      const { data } = readPayload(res);
+      const encontrado = (data ?? []).find(
+        (item) => Number(item.id_article) === Number(articleId)
+      );
+
+      if (encontrado) {
+        sessionStorage.setItem(
+          "productSelected",
+          JSON.stringify({
+            ...encontrado,
+            article: { id_article: encontrado.id_article },
+          })
+        );
+      }
+    } catch (error) {
+      // Se navega igual: dejar el clic sin efecto parecería que no responde.
+      console.error("openVariant: ", error);
+    } finally {
+      setLoadingVariant(null);
+      window.location.assign("/EditProducts");
+    }
+  };
+
+  /*
+    Refresca tras ligar, sin recargar: el producto sale de sessionStorage, así que
+    un refresh devolvería el mismo objeto y el contador seguiría igual.
+  */
+  const handleOnLinkedVariants = (result) => {
+    if (!result) return;
+
+    const updatedProduct =
+      result.mode === "children"
+        ? {
+            ...state.product,
+            variantsCount:
+              (state.product?.variantsCount ?? 0) + (result.linked ?? []).length,
+          }
+        : {
+            ...state.product,
+            parentArticleId: result.parentArticleId ?? null,
+            variantsCount: 0,
+          };
+
+    dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
+    setFamily(null);
+
+    try {
+      sessionStorage.setItem("productSelected", JSON.stringify(updatedProduct));
+    } catch (error) {
+      console.error("linkVariants/sessionStorage: ", error);
+    }
+  };
+
+  /*
+    Acción "Volver a heredar" de los chips. Repinta en sitio con lo que devuelve
+    el endpoint: recargar la ficha se llevaría lo que haya sin guardar.
+  */
+  const handleOnRestoreInheritance = async (attributeId) => {
+    if (!attributeId || !state.product?.id_article) return;
+
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/restore`,
+        { articleId: state.product.id_article, attributes: [Number(attributeId)] },
+        { headers: { Authorization: token } }
+      );
+
+      const data = readPayload(res);
+
+      dispatch({
+        type: "UPDATE_DATASHEETS_INPUTS",
+        payload: (data.values || []).map((item) => ({
+          attributeId: item.id,
+          value: item.value,
+          isOverridden: 0,
+        })),
+      });
+    } catch (error) {
+      console.error("restoreInheritance: ", error);
+    }
+  };
+
+  /*
+    Los atributos recién tocados, con el nombre que ve el usuario:
+    `updated_datasheets_inputs` solo trae { attributeId, value }.
+  */
+  const cambiosDeFichaTecnica = () => {
+    const retailerId = state.active_retailer?.id_retailer;
+    const inputs = state.services?.datasheets?.inputs ?? {};
+
+    return (state.updated_datasheets_inputs ?? []).map((item) => {
+      const input = inputs[`${item.attributeId}_${retailerId}`];
+      return {
+        id: Number(item.attributeId),
+        name: input?.name ?? `Atributo ${item.attributeId}`,
+        value: item.value,
+      };
+    });
+  };
+
   const handleOnClickSave = async () => {
-    if (state.saving) return;
+    if (state.saving || preparandoPropagacion) return;
 
     switch (state.active_tab) {
       case "Descripción":
         await saveDescriptions(token);
         break;
-      case "Ficha técnica":
+      case "Ficha técnica": {
+        // Guardar un padre con variantes abre la decisión de propagar. Sin este
+        // paso el cambio se queda solo en el padre y las variantes se van
+        // separando de él sin que nadie lo note.
+        const esPadre = state.product?.variantsCount > 0;
+        const cambios = cambiosDeFichaTecnica();
+
+        if (esPadre && cambios.length > 0) {
+          setPreparandoPropagacion(true);
+          loadFamily()
+            .then(() => setPendingPropagation({ cambios }))
+            .finally(() => setPreparandoPropagacion(false));
+          return;
+        }
+
         await saveDatasheets(token);
         break;
+      }
       case "Imágenes":
         await updateImages(token);
         break;
@@ -1534,6 +1699,29 @@ const RetailerProductEditionView = ({
       state={state}
     >
       <Container headerTop={headerTop}>
+        {pendingPropagation && (
+          <PropagateChangesModal
+            changedAttributes={pendingPropagation.cambios}
+            variants={(family?.variants ?? []).filter((v) => !v.isCurrent)}
+            saving={state.saving}
+            onCancel={() => setPendingPropagation(null)}
+            onConfirm={(propagation) => {
+              setPendingPropagation(null);
+              saveDatasheets(token, propagation ?? undefined);
+            }}
+          />
+        )}
+        {showLinkVariants && (
+          <LinkVariantsModal
+            articleId={state.product?.id_article}
+            articleName={state.product?.name}
+            articleUpc={state.product?.upc}
+            activeRetailerId={state.active_retailer?.id_retailer}
+            token={token}
+            onClose={() => setShowLinkVariants(false)}
+            onLinked={handleOnLinkedVariants}
+          />
+        )}
         {showRejectModal && (
           <Modal
             title={
@@ -1738,6 +1926,105 @@ const RetailerProductEditionView = ({
           </div>
 
           <div className="product-information">
+            {/* Solo si el producto NO es ya variante de alguien: ligarlo otra vez
+                devolvería VARIANT_ALREADY_LINKED sin excepción. */}
+            {!state.product?.parentArticleId && (
+              <div className="variants-actions">
+                <button
+                  type="button"
+                  className="link-variants"
+                  onClick={() => setShowLinkVariants(true)}
+                >
+                  Ligar productos
+                </button>
+                {state.product?.variantsCount > 0 && (
+                  <button
+                    type="button"
+                    className="variants-count"
+                    aria-expanded={showFamily}
+                    onClick={() => {
+                      setShowFamily((abierto) => !abierto);
+                      loadFamily();
+                    }}
+                  >
+                    {state.product.variantsCount} variante
+                    {state.product.variantsCount === 1 ? "" : "s"}
+                    <span aria-hidden="true">{showFamily ? " ▴" : " ▾"}</span>
+                  </button>
+                )}
+              </div>
+            )}
+
+            {state.product?.parentArticleId && (
+              <div className="variants-actions">
+                <button
+                  type="button"
+                  className="variants-count"
+                  aria-expanded={showFamily}
+                  onClick={() => {
+                    setShowFamily((abierto) => !abierto);
+                    loadFamily();
+                  }}
+                >
+                  Variante de otro producto
+                  <span aria-hidden="true">{showFamily ? " ▴" : " ▾"}</span>
+                </button>
+              </div>
+            )}
+
+            {showFamily && (
+              <div className="variants-family">
+                {!family && <p className="loading">Cargando familia…</p>}
+
+                {family?.error && (
+                  <p className="loading">
+                    No se pudo cargar la familia de este producto.
+                  </p>
+                )}
+
+                {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>
+                )}
+
+                {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í"
+                        : "Variante"}
+                    </span>
+                    <span className="name">{variant.name}</span>
+                    <span className="upc">{variant.upc}</span>
+                  </button>
+                ))}
+
+                {family && !family.error && !family.variants?.length && (
+                  <p className="loading">Este producto no tiene variantes.</p>
+                )}
+              </div>
+            )}
+
             <FullProductNameHeader
               // states
               headerData={state.product}
@@ -1845,6 +2132,8 @@ const RetailerProductEditionView = ({
                               activeSection={state.active_tab}
                               inputGroup={dataGroup}
                               dataInputs={state.datasheets_inputs[1]}
+                              variant={state.services?.datasheets?.variant}
+                              onRestoreInheritance={handleOnRestoreInheritance}
                               auditInputs={auditDatasheets[1]}
                               updatedDatasheets={
                                 state.updated_datasheets_inputs

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

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
+// Rosa ContentOh, el mismo del modal de ligar productos.
+const PINK = "#E13AA8";
+
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -166,4 +169,97 @@ export const Container = styled.div`
       }
     }
   }
+
+  .variants-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+
+    .link-variants {
+      border: 1px solid ${PINK};
+      border-radius: 6px;
+      background: none;
+      padding: 6px 12px;
+      font-family: ${FontFamily.Raleway_600};
+      font-size: 11px;
+      color: ${PINK};
+      cursor: pointer;
+    }
+
+    .variants-count {
+      border: none;
+      background: none;
+      padding: 0;
+      cursor: pointer;
+      font-family: ${FontFamily.Raleway_500};
+      font-size: 11px;
+      color: ${GlobalColors.gray};
+      text-decoration: underline;
+    }
+  }
+
+  .variants-family {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 10px;
+    padding: 8px;
+    border: 1px solid ${GlobalColors.s2};
+    border-radius: 6px;
+
+    .loading {
+      margin: 0;
+      font-family: ${FontFamily.Raleway_500};
+      font-size: 11px;
+      color: ${GlobalColors.gray};
+    }
+
+    .family-row {
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+      padding: 6px 8px;
+      border: none;
+      border-radius: 4px;
+      background: none;
+      cursor: pointer;
+      text-align: left;
+      font-family: ${FontFamily.Raleway_500};
+      font-size: 12px;
+      color: ${GlobalColors.deep_gray};
+    }
+
+    .family-row:hover:not(:disabled) {
+      background-color: ${GlobalColors.s2};
+    }
+
+    .family-row:disabled {
+      cursor: default;
+      opacity: 0.7;
+    }
+
+    .family-row .role {
+      min-width: 96px;
+      font-size: 10px;
+      color: ${PINK};
+    }
+
+    .family-row.current .role {
+      color: ${GlobalColors.gray};
+    }
+
+    .family-row .name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .family-row .upc {
+      font-size: 11px;
+      color: ${GlobalColors.gray};
+    }
+  }
 `;
+

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

@@ -114,6 +114,14 @@ export const normalizeProduct = (product) => {
     percentages: productData.percentages || null,
     summary: productData.summary || null,
     version: productData.version || 0,
+
+    // Parentesco. read-articles-v2 ya lo devuelve; sin arrastrarlo hasta aquí la
+    // pantalla no puede saber si el producto pertenece a una familia.
+    // `?? null` en vez de `|| null`: variantsCount 0 es un dato válido.
+    parentArticleId:
+      productData.parentArticleId ?? article.parentArticleId ?? null,
+    parent: productData.parent ?? article.parent ?? null,
+    variantsCount: productData.variantsCount ?? article.variantsCount ?? 0,
     id_order: productData.orderId || productData.id_order || 0,
     status: productData.status || null,
     datasheet_status: productData.datasheet_status || null,