contentoh-components-library 21.6.35 → 21.6.36

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

@@ -51,6 +51,7 @@ import { ProductImageModal } from "../../organisms/ProductImageModal";
 import { VersionSelector } from "../../organisms/VersionSelector";
 import { Modal } from "../../organisms/Modal";
 import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
+import { UnlinkVariantModal } from "../../organisms/UnlinkVariantModal";
 import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
 import { readPayload } from "../../organisms/LinkVariantsModal/api";
 
@@ -186,6 +187,9 @@ const RetailerProductEditionView = ({
   const [family, setFamily] = useState(null);
   const [showFamily, setShowFamily] = useState(false);
   const [loadingVariant, setLoadingVariant] = useState(null);
+  // Qué vínculo se está por romper, o null si no hay diálogo abierto. Guarda al
+  // HIJO, que es quien lleva la relación y lo que pide la acción `unlink`.
+  const [porDesvincular, setPorDesvincular] = useState(null);
   // Por qué un salto no se pudo hacer. Vive aparte de `family.error` porque no
   // es un fallo al leer la familia, sino al abrir uno de sus miembros.
   const [avisoFamilia, setAvisoFamilia] = useState(null);
@@ -858,6 +862,69 @@ const RetailerProductEditionView = ({
     En ese caso no hay nada que abrir aquí, y se dice en vez de navegar a una
     pantalla que mostraría el producto equivocado.
   */
+  /*
+    Después de desvincular, esta ficha cambia de forma: si se soltó de su padre
+    vuelve a poder ligar, y si soltó a un hijo pierde uno de la cuenta. En esta
+    pantalla el bloque de parentesco se decide con `family`, así que hay que
+    repreguntarla —vaciarla lo haría desaparecer, que es el error que ya se
+    cometió una vez aquí—.
+  */
+  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 });
+
+    // Se PARCHEA lo guardado: ahí vive el producto con la forma del listado
+    // —`article` anidado, servicios, cadenas— y escribir encima la versión
+    // aplanada de esta pantalla lo dejaría mutilado en el siguiente F5.
+    try {
+      const guardado = JSON.parse(
+        sessionStorage.getItem("productSelected") ?? "null"
+      );
+
+      if (guardado) {
+        sessionStorage.setItem(
+          "productSelected",
+          JSON.stringify({
+            ...guardado,
+            variantsCount: updatedProduct.variantsCount,
+            parentArticleId: updatedProduct.parentArticleId ?? null,
+          })
+        );
+      }
+    } 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);
+
+    // Al desvincular el servidor pone `is_overridden = 0` en todas las
+    // versiones, así que los chips de herencia tienen que dejar de dibujarse.
+    // Sin `enableLoading` para no parpadear el esqueleto encima de una pantalla
+    // que ya está pintada.
+    loadData(false);
+  };
+
   const openFamilyMember = async (articleId) => {
     setLoadingVariant(articleId);
     setAvisoFamilia(null);
@@ -1857,6 +1924,14 @@ const RetailerProductEditionView = ({
             onLinked={handleOnLinkedVariants}
           />
         )}
+        {porDesvincular && (
+          <UnlinkVariantModal
+            {...porDesvincular}
+            token={token}
+            onClose={() => setPorDesvincular(null)}
+            onUnlinked={handleOnUnlinked}
+          />
+        )}
         {showRejectModal && (
           <Modal
             title={
@@ -2117,43 +2192,90 @@ const RetailerProductEditionView = ({
                   </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; desde un padre, sobre cada hijo. A un hermano no:
+                    para eso se abre su ficha. */}
                 {family?.parent && (
-                  <button
-                    type="button"
-                    className="family-row parent"
-                    disabled={loadingVariant !== null}
-                    onClick={() => openFamilyMember(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={() => openFamilyMember(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={() => openFamilyMember(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={() => openFamilyMember(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. */}
+                    {!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 && (

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

@@ -215,6 +215,36 @@ export const Container = styled.div`
       color: ${GlobalColors.gray};
     }
 
+    /* La fila es un botón que navega; desvincular tiene que quedar FUERA de
+       él —un botón dentro de otro no es HTML válido y el clic se confunde—. */
+    .family-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .family-item .family-row {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .desvincular {
+      flex-shrink: 0;
+      border: none;
+      background: none;
+      padding: 4px 6px;
+      cursor: pointer;
+      font-family: ${FontFamily.Raleway_500};
+      font-size: 10px;
+      color: ${GlobalColors.gray};
+      text-decoration: underline;
+      white-space: nowrap;
+    }
+
+    .desvincular:hover {
+      color: ${PINK};
+    }
+
     .family-row {
       display: flex;
       align-items: baseline;

package/src/index.js

@@ -89,6 +89,7 @@ export * from "./components/organisms/ImagesGroup/index";
 export * from "./components/organisms/InputGroup/index";
 export * from "./components/organisms/LinkVariantsModal/index";
 export * from "./components/organisms/PropagateChangesModal/index";
+export * from "./components/organisms/UnlinkVariantModal/index";
 export * from "./components/organisms/ProductImageModal/index";
 export * from "./components/organisms/Chat/index";
 export * from "./components/organisms/Modal/index";