contentoh-components-library 21.6.35 → 21.6.37

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 && (

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

@@ -208,6 +208,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/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);
@@ -1064,17 +1131,73 @@ const RetailerProductEditionView = ({
         await saveDescriptions(token);
         break;
       case "Ficha técnica": {
-        // Guardar un padre con hijos abre la decisión de propagar. Sin este
-        // paso el cambio se queda solo en el padre y los hijos se van
-        // separando de él sin que nadie lo note.
-        const esPadre = hijosDelProducto > 0;
         const cambios = cambiosDeFichaTecnica();
 
-        if (esPadre && cambios.length > 0) {
-          setPreparandoPropagacion(true);
-          loadFamily()
-            .then(() => setPendingPropagation({ cambios }))
-            .finally(() => setPreparandoPropagacion(false));
+        if (cambios.length === 0) {
+          await saveDatasheets(token);
+          break;
+        }
+
+        /*
+          Guardar un padre con hijos abre la decisión de propagar. Sin este paso
+          el cambio se queda solo en el padre y los hijos se van separando de él
+          sin que nadie lo note.
+
+          Si tiene hijos se resuelve AQUÍ, esperando la respuesta, en vez de
+          mirar la copia en memoria. `family` es una consulta asíncrona: si
+          todavía no llegó, o si falló, `hijosDelProducto` vale 0 — o sea que
+          «todavía no sé» se leía igual que «no tiene hijos», y el padre se
+          guardaba sin ofrecer la propagación. En silencio, que es lo peor: el
+          usuario creía haber bajado el cambio a los hijos.
+
+          La ficha de la aplicación de clientes no tiene el problema porque ahí
+          `state.product.variantsCount` viene del listado; aquí el producto sale
+          del endpoint de reportes, que no trae el parentesco.
+        */
+        setPreparandoPropagacion(true);
+        let familia = null;
+        try {
+          familia = await loadFamily(true);
+        } finally {
+          setPreparandoPropagacion(false);
+        }
+
+        // No se pudo saber si tiene hijos. Guardar de todas formas repetiría el
+        // defecto que se está corrigiendo, así que se dice y se deja la decisión.
+        if (!familia || familia.error) {
+          dispatch({
+            type: "SET_MODAL",
+            payload: {
+              show: true,
+              title: "No se pudo consultar la familia",
+              message:
+                "No pudimos saber si este producto tiene hijos, así que no sabemos si hay que bajarles el cambio. Vuelve a intentar el guardado; si sigue fallando, guarda y revisa los hijos a mano.",
+              image: warningIcon,
+              buttons: [
+                {
+                  text: "Entendido",
+                  buttonType: "general-white-button",
+                  action: () =>
+                    dispatch({ type: "SET_MODAL", payload: { show: false } }),
+                },
+                {
+                  text: "Guardar solo este producto",
+                  buttonType: "general-button-default",
+                  action: () => {
+                    dispatch({ type: "SET_MODAL", payload: { show: false } });
+                    saveDatasheets(token);
+                  },
+                },
+              ],
+            },
+          });
+          return;
+        }
+
+        const hijos = (familia.variants ?? []).filter((v) => !v.isCurrent);
+
+        if (hijos.length > 0) {
+          setPendingPropagation({ cambios });
           return;
         }
 
@@ -1857,6 +1980,14 @@ const RetailerProductEditionView = ({
             onLinked={handleOnLinkedVariants}
           />
         )}
+        {porDesvincular && (
+          <UnlinkVariantModal
+            {...porDesvincular}
+            token={token}
+            onClose={() => setPorDesvincular(null)}
+            onUnlinked={handleOnUnlinked}
+          />
+        )}
         {showRejectModal && (
           <Modal
             title={
@@ -2117,43 +2248,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";