contentoh-components-library 21.6.43 → 21.6.45

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

@@ -40,6 +40,7 @@ import { ImagePreviewer } from "../../organisms/ImagePreviewer";
 import { InputGroup } from "../../organisms/InputGroup";
 import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
 import { UnlinkVariantModal } from "../../organisms/UnlinkVariantModal";
+import { VariantGroupModal } from "../../organisms/VariantGroupModal";
 import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
 import { readPayload } from "../../organisms/LinkVariantsModal/api";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
@@ -85,6 +86,15 @@ const ProviderProductEditionView = ({
   const [family, setFamily] = useState(null);
   const [showFamily, setShowFamily] = useState(false);
   const [loadingVariant, setLoadingVariant] = useState(null);
+
+  /*
+    Agrupación de variantes. Vive aparte del padre/hijo de arriba a propósito:
+    son mecanismos independientes y un producto puede tener los dos. Padre/hijo
+    es herencia; esto es solo una agrupación por un código compartido.
+  */
+  const [variantGroup, setVariantGroup] = useState(null);
+  const [showGroup, setShowGroup] = useState(false);
+  const [showGroupModal, setShowGroupModal] = useState(false);
   const [pendingPropagation, setPendingPropagation] = useState(null);
   const [preparandoPropagacion, setPreparandoPropagacion] = useState(false);
   const [preparandoEdicionMultiple, setPreparandoEdicionMultiple] =
@@ -941,6 +951,72 @@ const ProviderProductEditionView = ({
     setLinkNonce((n) => n + 1);
   };
 
+  /*
+    Trae el grupo de variantes del producto y sus miembros.
+
+    Se pide al montar y no al abrir el desplegable —al contrario que la familia
+    padre/hijo— porque aquí el conteo no viene en el producto: `variant_group`
+    no lo devuelven los endpoints del listado, así que sin esta llamada la ficha
+    no sabría ni si el producto está agrupado.
+  */
+  const loadVariantGroup = async (forzar = false) => {
+    if (variantGroup && !forzar) return variantGroup;
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/group`,
+        { articleId: state.product?.id_article },
+        { headers: { Authorization: token } }
+      );
+      const data = readPayload(res);
+      setVariantGroup(data);
+      return data;
+    } catch (error) {
+      console.error("loadVariantGroup: ", error);
+      setVariantGroup({ group: null, members: [], error: true });
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    if (!state.product?.id_article) return;
+    loadVariantGroup(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.product?.id_article]);
+
+  // Saca el producto del grupo. Los demás miembros siguen agrupados entre ellos;
+  // si era el último, el grupo deja de existir, porque no vive en ninguna tabla.
+  const handleOnLeaveGroup = async () => {
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/leave`,
+        { articleId: state.product?.id_article },
+        { headers: { Authorization: token } }
+      );
+      setVariantGroup(readPayload(res));
+      setShowGroup(false);
+    } catch (error) {
+      console.error("leaveVariantGroup: ", error);
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Variantes",
+          message: "No se pudo quitar el producto del grupo. Intenta de nuevo.",
+          image: warningIcon,
+          // Con `buttons` vacío el modal se queda sin forma de cerrarse.
+          buttons: [
+            {
+              text: "Entendido",
+              buttonType: "general-white-button",
+              action: () =>
+                dispatch({ type: "SET_MODAL", payload: { show: false } }),
+            },
+          ],
+        },
+      });
+    }
+  };
+
   const openVariant = async (articleId) => {
     setLoadingVariant(articleId);
     try {
@@ -1585,6 +1661,20 @@ const ProviderProductEditionView = ({
             onLinked={handleOnLinkedVariants}
           />
         )}
+        {showGroupModal && (
+          <VariantGroupModal
+            articleId={state.product?.id_article}
+            articleName={state.product?.name}
+            articleUpc={state.product?.upc}
+            currentGroup={variantGroup?.group ?? null}
+            token={token}
+            onClose={() => setShowGroupModal(false)}
+            onSaved={(result) => {
+              setVariantGroup(result);
+              setShowGroup(true);
+            }}
+          />
+        )}
         {porDesvincular && (
           <UnlinkVariantModal
             {...porDesvincular}
@@ -1947,6 +2037,80 @@ const ProviderProductEditionView = ({
                   )}
                 </div>
               )}
+              {/* AGRUPACIÓN DE VARIANTES.
+
+                  Bloque aparte del de padre/hijo, y a propósito: son
+                  mecanismos independientes y un producto puede tener los dos.
+                  Padre/hijo es herencia y tiene jerarquía; esto es solo un
+                  código compartido que dice "estos son el mismo producto en
+                  otra presentación". Mezclarlos en una sola caja haría creer
+                  que agrupar hereda algo, que es justo lo que no pasa. */}
+              <div className="variants-actions">
+                <button
+                  type="button"
+                  className="link-variants"
+                  onClick={() => setShowGroupModal(true)}
+                >
+                  {variantGroup?.group ? "Cambiar de grupo" : "Agrupar variantes"}
+                </button>
+
+                {variantGroup?.group && (
+                  <button
+                    type="button"
+                    className="variants-count"
+                    aria-expanded={showGroup}
+                    onClick={() => setShowGroup((abierto) => !abierto)}
+                  >
+                    Variante {variantGroup.group}
+                    <span aria-hidden="true">{showGroup ? " ▴" : " ▾"}</span>
+                  </button>
+                )}
+              </div>
+
+              {showGroup && variantGroup?.group && (
+                <div className="variants-family">
+                  {/* Los hermanos de grupo NO se listan como padre/hijo: aquí
+                      nadie hereda de nadie, así que no hay rol que mostrar,
+                      solo de qué productos se trata. */}
+                  {(variantGroup.members ?? [])
+                    .filter((miembro) => !miembro.isCurrent)
+                    .map((miembro) => (
+                      <div className="family-item" key={miembro.articleId}>
+                        <button
+                          type="button"
+                          className="family-row"
+                          disabled={loadingVariant !== null}
+                          onClick={() => openVariant(miembro.articleId)}
+                        >
+                          <span className="role">
+                            {loadingVariant === miembro.articleId
+                              ? "Abriendo…"
+                              : "Variante"}
+                          </span>
+                          <span className="name">{miembro.name}</span>
+                          <span className="upc">{miembro.upc}</span>
+                        </button>
+                      </div>
+                    ))}
+
+                  {(variantGroup.members ?? []).filter((m) => !m.isCurrent)
+                    .length === 0 && (
+                    <p className="loading">
+                      Este producto es el único en el grupo {variantGroup.group}.
+                    </p>
+                  )}
+
+                  <button
+                    type="button"
+                    className="desvincular"
+                    title="Quitar este producto del grupo"
+                    onClick={handleOnLeaveGroup}
+                  >
+                    Quitar del grupo
+                  </button>
+                </div>
+              )}
+
               <FullProductNameHeader
                 headerData={state.product}
                 percent={state.active_percentage?.percentagesGeneral?.required}

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

@@ -52,6 +52,7 @@ import { VersionSelector } from "../../organisms/VersionSelector";
 import { Modal } from "../../organisms/Modal";
 import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
 import { UnlinkVariantModal } from "../../organisms/UnlinkVariantModal";
+import { VariantGroupModal } from "../../organisms/VariantGroupModal";
 import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
 import { readPayload } from "../../organisms/LinkVariantsModal/api";
 
@@ -186,6 +187,15 @@ const RetailerProductEditionView = ({
   const [family, setFamily] = useState(null);
   const [showFamily, setShowFamily] = useState(false);
   const [loadingVariant, setLoadingVariant] = useState(null);
+
+  /*
+    Agrupación de variantes. Aparte del padre/hijo a propósito: son mecanismos
+    independientes y un producto puede tener los dos. Padre/hijo es herencia;
+    esto es solo un código compartido.
+  */
+  const [variantGroup, setVariantGroup] = useState(null);
+  const [showGroup, setShowGroup] = useState(false);
+  const [showGroupModal, setShowGroupModal] = useState(false);
   // 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);
@@ -975,6 +985,68 @@ const RetailerProductEditionView = ({
     loadData(false);
   };
 
+  /*
+    Trae el grupo de variantes y sus miembros.
+
+    Al montar, no al abrir el desplegable: `variant_group` no lo devuelve el
+    endpoint del listado, así que sin esta llamada la ficha no sabe si el
+    producto está agrupado.
+  */
+  const loadVariantGroup = async (forzar = false) => {
+    if (variantGroup && !forzar) return variantGroup;
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/group`,
+        { articleId: state.product?.id_article },
+        { headers: { Authorization: token } }
+      );
+      const data = readPayload(res);
+      setVariantGroup(data);
+      return data;
+    } catch (error) {
+      console.error("loadVariantGroup: ", error);
+      setVariantGroup({ group: null, members: [], error: true });
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    if (!state.product?.id_article) return;
+    loadVariantGroup(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.product?.id_article]);
+
+  const handleOnLeaveGroup = async () => {
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/leave`,
+        { articleId: state.product?.id_article },
+        { headers: { Authorization: token } }
+      );
+      setVariantGroup(readPayload(res));
+      setShowGroup(false);
+    } catch (error) {
+      console.error("leaveVariantGroup: ", error);
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Variantes",
+          message: "No se pudo quitar el producto del grupo. Intenta de nuevo.",
+          image: warningIcon,
+          buttons: [
+            {
+              text: "Entendido",
+              buttonType: "general-white-button",
+              action: () =>
+                dispatch({ type: "SET_MODAL", payload: { show: false } }),
+            },
+          ],
+        },
+      });
+    }
+  };
+
   const openFamilyMember = async (articleId) => {
     setLoadingVariant(articleId);
     setAvisoFamilia(null);
@@ -2030,6 +2102,20 @@ const RetailerProductEditionView = ({
             onLinked={handleOnLinkedVariants}
           />
         )}
+        {showGroupModal && (
+          <VariantGroupModal
+            articleId={state.product?.id_article}
+            articleName={state.product?.name}
+            articleUpc={state.product?.upc}
+            currentGroup={variantGroup?.group ?? null}
+            token={token}
+            onClose={() => setShowGroupModal(false)}
+            onSaved={(result) => {
+              setVariantGroup(result);
+              setShowGroup(true);
+            }}
+          />
+        )}
         {porDesvincular && (
           <UnlinkVariantModal
             {...porDesvincular}
@@ -2392,6 +2478,76 @@ const RetailerProductEditionView = ({
               </div>
             )}
 
+            {/* AGRUPACIÓN DE VARIANTES.
+
+                Bloque aparte del de padre/hijo a propósito: son mecanismos
+                independientes y un producto puede tener los dos. Padre/hijo es
+                herencia y tiene jerarquía; esto es solo un código compartido
+                que dice "estos son el mismo producto en otra presentación".
+                Juntarlos haría creer que agrupar hereda algo, que no pasa. */}
+            <div className="variants-actions">
+              <button
+                type="button"
+                className="link-variants"
+                onClick={() => setShowGroupModal(true)}
+              >
+                {variantGroup?.group ? "Cambiar de grupo" : "Agrupar variantes"}
+              </button>
+
+              {variantGroup?.group && (
+                <button
+                  type="button"
+                  className="variants-count"
+                  aria-expanded={showGroup}
+                  onClick={() => setShowGroup((abierto) => !abierto)}
+                >
+                  Variante {variantGroup.group}
+                  <span aria-hidden="true">{showGroup ? " ▴" : " ▾"}</span>
+                </button>
+              )}
+            </div>
+
+            {showGroup && variantGroup?.group && (
+              <div className="variants-family">
+                {(variantGroup.members ?? [])
+                  .filter((miembro) => !miembro.isCurrent)
+                  .map((miembro) => (
+                    <div className="family-item" key={miembro.articleId}>
+                      <button
+                        type="button"
+                        className="family-row"
+                        disabled={loadingVariant !== null}
+                        onClick={() => openFamilyMember(miembro.articleId)}
+                      >
+                        <span className="role">
+                          {loadingVariant === miembro.articleId
+                            ? "Abriendo…"
+                            : "Variante"}
+                        </span>
+                        <span className="name">{miembro.name}</span>
+                        <span className="upc">{miembro.upc}</span>
+                      </button>
+                    </div>
+                  ))}
+
+                {(variantGroup.members ?? []).filter((m) => !m.isCurrent)
+                  .length === 0 && (
+                  <p className="loading">
+                    Este producto es el único en el grupo {variantGroup.group}.
+                  </p>
+                )}
+
+                <button
+                  type="button"
+                  className="desvincular"
+                  title="Quitar este producto del grupo"
+                  onClick={handleOnLeaveGroup}
+                >
+                  Quitar del grupo
+                </button>
+              </div>
+            )}
+
             <FullProductNameHeader
               // states
               headerData={state.product}

package/src/global-files/data.js

@@ -35,8 +35,30 @@ export const getRetailerServices = async (
     const images = JSON.parse(responseArray[2].data.body).data;
 
     images.values = images?.values?.map((value) => {
-      value.name = images.inputs.find((e) => e.id === value.image_id)?.name;
-      return getImage(value);
+      /**
+       * La fila de `rel_article_image` trae la columna `id_image`; el resto del
+       * front lee `image_id`. Sin normalizarlo aquí queda `undefined`, y eso
+       * rompe DOS cosas a la vez:
+       *
+       *   - `getImage` toma su rama `else` y deja `src` con la clave cruda de
+       *     S3 en lugar de la URL de CloudFront, así que la etiqueta <img>
+       *     apunta a una ruta relativa.
+       *   - el filtro `filteredValues` de `RetailerProductEdition` compara
+       *     `value.image_id` contra las reglas del retailer, no encuentra
+       *     coincidencia y descarta la imagen.
+       *
+       * Resultado: la pantalla dice «Este producto no tiene imágenes» aunque la
+       * fila exista y el archivo esté en S3. Antes de guardar sí se veía, porque
+       * el objeto que arma el front al elegir el archivo sí trae `image_id`.
+       */
+      const normalized = {
+        ...value,
+        image_id: value.image_id ?? value.id_image,
+      };
+      normalized.name = images.inputs.find(
+        (e) => e.id === normalized.image_id
+      )?.name;
+      return getImage(normalized);
     });
 
     return [datasheets, descriptions, images];
@@ -47,7 +69,13 @@ export const getRetailerServices = async (
 
 export const getImage = (imageGeneral, width = 250, height = 250) => {
   try {
-    const image = imageGeneral;
+    // `id_image` es el nombre de la columna en base de datos; `image_id` el que
+    // usa el front. Se acepta cualquiera de los dos para que la URL se arme
+    // igual, venga la imagen del backend o del estado local.
+    const image = {
+      ...imageGeneral,
+      image_id: imageGeneral.image_id ?? imageGeneral.id_image,
+    };
     const ext = image.src.split(".");
     const uuid = ext[0].split("-");
     return {

package/src/index.js

@@ -90,6 +90,7 @@ 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/VariantGroupModal/index";
 export * from "./components/organisms/ProductImageModal/index";
 export * from "./components/organisms/Chat/index";
 export * from "./components/organisms/Modal/index";