contentoh-components-library 21.6.31 → 21.6.33

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

@@ -181,11 +181,10 @@ const RetailerProductEditionView = ({
   const [statusArray, setStatusArray] = useState([]);
   const [rejectAll, setRejectAll] = useState(false);
 
-  // Variantes: mismo comportamiento que la ficha de la aplicación de clientes.
+  // Padre/hijo: 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);
 
@@ -783,12 +782,12 @@ const RetailerProductEditionView = ({
   };
 
   /*
-    Trae la familia: las variantes del producto, o sus hermanas si el abierto es
+    Trae la familia: los hijos del producto, o sus hermanos 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;
+  const loadFamily = async (forzar = false) => {
+    if (family && !forzar) return family;
     try {
       const res = await axios.post(
         `${process.env.REACT_APP_VARIANTS_ENDPOINT}/family`,
@@ -806,43 +805,48 @@ const RetailerProductEditionView = ({
   };
 
   /*
-    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.
+    En Creators el parentesco se pregunta, no viene con el producto.
 
-    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.
+    Su listado sale del endpoint de reportes, que no trae `variantsCount` ni
+    `parentArticleId`: esas columnas se agregaron a las vistas pero DynamoDB no
+    las tiene hasta que se corra el recorrido de datos. Y aunque las tuviera,
+    dependería de lo actualizado que esté ese recorrido.
+
+    Preguntar a `family` cuesta una llamada por ficha y da el dato de la base, no
+    de una copia. Además aplica el alcance del perfil (§5.1): al equipo interno le
+    devuelve los productos solicitados a ContentOh, que es justo lo que puede
+    tocar.
   */
-  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 },
-      });
+  useEffect(() => {
+    if (!state.product?.id_article) return;
+    loadFamily(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.product?.id_article]);
 
-      const { data } = readPayload(res);
-      const encontrado = (data ?? []).find(
-        (item) => Number(item.id_article) === Number(articleId)
-      );
+  // El conteo sale de la familia recién consultada, no del producto.
+  const hijosDelProducto = family?.error
+    ? 0
+    : (family?.variants ?? []).filter((v) => !v.isCurrent).length;
 
-      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");
-    }
-  };
+  const esHijoDeOtro = family?.error
+    ? !!state.product?.parentArticleId
+    : !!family?.parent;
+
+  /*
+    En Creators la lista de familia es INFORMATIVA: no se salta a otro producto.
+
+    Saltar exige precargar el producto destino, y el endpoint que hace eso en la
+    aplicación de clientes —read-articles-v2— filtra por la compañía del usuario:
+    `AND a.company_id = <la del usuario>`. El equipo interno pertenece a ContentOh
+    y trabaja productos de sus clientes, así que ahí no devuelve nada.
+
+    Navegar sin precargar sería peor que no ofrecerlo: esta pantalla lee el
+    producto de sessionStorage, así que cambiaría la URL y seguiría mostrando el
+    producto anterior, dando a entender que se cambió de producto cuando no.
+
+    Para habilitarlo hace falta una forma de traer un producto por id sin filtro
+    de compañía, respetando el alcance del perfil interno (§5.1 del contrato).
+  */
 
   /*
     Refresca tras ligar, sin recargar: el producto sale de sessionStorage, así que
@@ -878,18 +882,42 @@ const RetailerProductEditionView = ({
     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) => {
+  /*
+    `kind` distingue de qué pestaña salió el chip. Las descripciones viven en
+    `rel_article_description` y la ficha técnica en `article_data`: el endpoint
+    recibe una lista o la otra.
+  */
+  const handleOnRestoreInheritance = async (attributeId, kind = "attribute") => {
     if (!attributeId || !state.product?.id_article) return;
 
+    const esDescripcion = kind === "description";
+
     try {
       const res = await axios.post(
         `${process.env.REACT_APP_VARIANTS_ENDPOINT}/restore`,
-        { articleId: state.product.id_article, attributes: [Number(attributeId)] },
+        {
+          articleId: state.product.id_article,
+          ...(esDescripcion
+            ? { descriptions: [Number(attributeId)] }
+            : { attributes: [Number(attributeId)] }),
+        },
         { headers: { Authorization: token } }
       );
 
       const data = readPayload(res);
 
+      if (esDescripcion) {
+        dispatch({
+          type: "UPDATE_DESCRIPTIONS_INPUTS",
+          payload: (data.descriptionValues || []).map((item) => ({
+            attributeId: item.id_description,
+            value: item.value,
+            isOverridden: 0,
+          })),
+        });
+        return;
+      }
+
       dispatch({
         type: "UPDATE_DATASHEETS_INPUTS",
         payload: (data.values || []).map((item) => ({
@@ -929,10 +957,10 @@ const RetailerProductEditionView = ({
         await saveDescriptions(token);
         break;
       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
+        // 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 = state.product?.variantsCount > 0;
+        const esPadre = hijosDelProducto > 0;
         const cambios = cambiosDeFichaTecnica();
 
         if (esPadre && cambios.length > 0) {
@@ -1926,9 +1954,9 @@ const RetailerProductEditionView = ({
           </div>
 
           <div className="product-information">
-            {/* Solo si el producto NO es ya variante de alguien: ligarlo otra vez
+            {/* Solo si el producto NO es ya hijo de alguien: ligarlo otra vez
                 devolvería VARIANT_ALREADY_LINKED sin excepción. */}
-            {!state.product?.parentArticleId && (
+            {!esHijoDeOtro && (
               <div className="variants-actions">
                 <button
                   type="button"
@@ -1937,7 +1965,7 @@ const RetailerProductEditionView = ({
                 >
                   Ligar productos
                 </button>
-                {state.product?.variantsCount > 0 && (
+                {hijosDelProducto > 0 && (
                   <button
                     type="button"
                     className="variants-count"
@@ -1947,15 +1975,15 @@ const RetailerProductEditionView = ({
                       loadFamily();
                     }}
                   >
-                    {state.product.variantsCount} variante
-                    {state.product.variantsCount === 1 ? "" : "s"}
+                    {hijosDelProducto} hijo
+                    {hijosDelProducto === 1 ? "" : "s"}
                     <span aria-hidden="true">{showFamily ? " ▴" : " ▾"}</span>
                   </button>
                 )}
               </div>
             )}
 
-            {state.product?.parentArticleId && (
+            {esHijoDeOtro && (
               <div className="variants-actions">
                 <button
                   type="button"
@@ -1966,7 +1994,7 @@ const RetailerProductEditionView = ({
                     loadFamily();
                   }}
                 >
-                  Variante de otro producto
+                  Hijo de otro producto
                   <span aria-hidden="true">{showFamily ? " ▴" : " ▾"}</span>
                 </button>
               </div>
@@ -1983,44 +2011,28 @@ const RetailerProductEditionView = ({
                 )}
 
                 {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>
+                  <div className="family-row parent">
+                    <span className="role">Producto padre</span>
                     <span className="name">{family.parent.name}</span>
                     <span className="upc">{family.parent.upc}</span>
-                  </button>
+                  </div>
                 )}
 
                 {family?.variants?.map((variant) => (
-                  <button
+                  <div
                     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"}
+                      {variant.isCurrent ? "Estás aquí" : "Hijo"}
                     </span>
                     <span className="name">{variant.name}</span>
                     <span className="upc">{variant.upc}</span>
-                  </button>
+                  </div>
                 ))}
 
                 {family && !family.error && !family.variants?.length && (
-                  <p className="loading">Este producto no tiene variantes.</p>
+                  <p className="loading">Este producto no tiene hijos.</p>
                 )}
               </div>
             )}
@@ -2107,6 +2119,10 @@ const RetailerProductEditionView = ({
                         activeSection={state.active_tab}
                         inputGroup={state.descriptions_inputs[0]}
                         updatedDescriptions={state.updated_descriptions_inputs}
+                        /* El parentesco es del producto, no del servicio: los
+                           dos endpoints lo devuelven igual. */
+                        variant={state.services?.datasheets?.variant}
+                        onRestoreInheritance={handleOnRestoreInheritance}
                         articleId={state.product?.id_article}
                         version={state.product.version}
                         auditInputGroup={auditDescriptions[0]}

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

@@ -220,24 +220,13 @@ export const Container = styled.div`
       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;