contentoh-components-library 21.6.32 → 21.6.34

package/src/components/organisms/LinkVariantsModal/styles.js

@@ -202,22 +202,6 @@ export const List = styled.ul`
     min-width: 0;
   }
 
-  .quitar {
-    flex-shrink: 0;
-    margin-right: 10px;
-    border: none;
-    background: none;
-    padding: 2px 6px;
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 1;
-    color: ${GlobalColors.gray};
-  }
-
-  .quitar:hover {
-    color: ${PINK};
-  }
-
   .count {
     margin-left: auto;
     font-size: 12px;
@@ -288,6 +272,13 @@ export const Message = styled.p`
     background-color: rgba(${PINK_RGB}, 0.1);
     color: ${PINK};
   }
+
+  /* Aviso, no error: el padre ya tiene hijos y planchar les cambia el origen.
+     Se puede continuar, así que no usa el rosa de rechazo. */
+  &.aviso {
+    background-color: rgba(${PINK_RGB}, 0.06);
+    border-left: 3px solid ${PINK};
+  }
 `;
 
 export const Footer = styled.div`
@@ -386,29 +377,71 @@ export const ImageGrid = styled.div`
   }
 `;
 
-export const AddRetailer = styled.div`
+/*
+  Padre → hijo, dibujado.
+
+  El paso de herencia escribe en una dirección sola y hasta ahora no la decía:
+  el modo se elige en la pantalla anterior y desaparece de la vista. Con dos
+  tarjetas y una flecha se lee de un golpe, sin tener que reconstruirlo del
+  texto de cada bloque.
+*/
+export const Direction = styled.div`
   display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 8px;
-  margin-bottom: 16px;
+  align-items: stretch;
+  gap: 10px;
+  margin-bottom: 12px;
 
-  button {
-    height: 38px;
-    padding: 0 14px;
-    border: 1px solid ${PINK};
+  .lado {
+    flex: 1 1 0;
+    min-width: 0;
+    padding: 10px 12px;
+    border: 1px solid ${GlobalColors.s2};
     border-radius: 6px;
-    background: none;
+    background-color: ${GlobalColors.white};
+  }
+
+  /* El padre es el que manda en esta pantalla, y se marca como tal. */
+  .lado:first-of-type {
+    border-color: rgba(${PINK_RGB}, 0.45);
+    background-color: rgba(${PINK_RGB}, 0.05);
+  }
+
+  .rol {
+    display: block;
     font-family: ${FontFamily.Raleway_600};
-    font-size: 13px;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
     color: ${PINK};
-    cursor: pointer;
-    flex-shrink: 0;
   }
 
-  button:disabled {
-    opacity: 0.4;
-    cursor: default;
+  strong {
+    display: block;
+    margin-top: 2px;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Cuál de los dos es la ficha abierta: sin esto, al relacionar un padre no se
+     sabe de qué lado está uno. */
+  .actual {
+    display: block;
+    margin-top: 2px;
+    font-size: 11px;
+    font-style: italic;
+    color: ${GlobalColors.gray};
+  }
+
+  .flecha {
+    align-self: center;
+    flex-shrink: 0;
+    font-size: 20px;
+    line-height: 1;
+    color: ${PINK};
   }
 `;
 

package/src/components/organisms/PropagateChangesModal/index.js

@@ -15,14 +15,13 @@ import {
   Diálogo de propagación al guardar un producto padre.
 
   Aparece cuando se guardan cambios de ficha técnica en un producto que tiene
-  variantes. El backend NO propaga nada por su cuenta: solo baja a los hijos lo
-  que venga en `propagation`, y esa lista la arma esta pantalla. Guardar sin
-  abrirla, o cerrarla sin propagar, deja al padre modificado y a las variantes
-  como estaban.
+  hijos. El backend NO propaga nada por su cuenta: solo baja a los hijos lo que
+  venga en `propagation`, y esa lista la arma esta pantalla. Guardar sin abrirla,
+  o cerrarla sin propagar, deja al padre modificado y a los hijos como estaban.
 
   props (* requerido):
     - *changedAttributes: [{ id, name, value }] lo que se acaba de editar
-    - *variants: [{ articleId, name, upc }] las variantes activas del padre
+    - *variants: [{ articleId, name, upc }] los hijos activos del padre
     - *onCancel: cerrar sin guardar nada
     - *onConfirm: (propagation | null) => void
         null            → guardar solo el padre
@@ -77,16 +76,19 @@ export const PropagateChangesModal = ({
     <Overlay>
       <Panel onClick={(event) => event.stopPropagation()}>
         <Header>
-          <h2>Este producto tiene {variants.length} variante{variants.length === 1 ? "" : "s"}</h2>
+          <h2>
+            Este producto tiene {variants.length} hijo
+            {variants.length === 1 ? "" : "s"}
+          </h2>
           <p>
             Cambiaste {changedAttributes.length} atributo
-            {changedAttributes.length === 1 ? "" : "s"}. Elige cuáles bajan a las
-            variantes; el resto se guarda solo en este producto.
+            {changedAttributes.length === 1 ? "" : "s"}. Elige cuáles bajan a los
+            hijos; el resto se guarda solo en este producto.
           </p>
         </Header>
 
         <Body>
-          <h3>¿Qué se baja a las variantes?</h3>
+          <h3>¿Qué se baja a los hijos?</h3>
           <List>
             {changedAttributes.map((attribute) => (
               <li key={attribute.id}>
@@ -115,9 +117,9 @@ export const PropagateChangesModal = ({
                 onChange={() => setScope("all")}
               />
               <span>
-                A todas
+                A todos
                 <span className="hint">
-                  {variants.length} variante{variants.length === 1 ? "" : "s"} activa
+                  {variants.length} hijo{variants.length === 1 ? "" : "s"} activo
                   {variants.length === 1 ? "" : "s"}.
                 </span>
               </span>
@@ -154,16 +156,16 @@ export const PropagateChangesModal = ({
           )}
 
           {/* La diferencia con "ligar", y la que sorprende si no se dice: aquí
-              lo que la variante editó a mano NO se pisa. */}
+              lo que el hijo editó a mano NO se pisa. */}
           <Note>
-            Una variante que haya editado alguno de estos atributos por su cuenta
+            Un hijo que haya editado alguno de estos atributos por su cuenta
             conserva su valor. Para devolverlo al del padre está la acción
-            «Volver a heredar» en la ficha de esa variante.
+            «Volver a heredar» en la ficha de ese hijo.
           </Note>
 
           {enSegundoPlano && (
             <Note className="accent">
-              Son más de {UMBRAL_SEGUNDO_PLANO} variantes, así que la propagación
+              Son más de {UMBRAL_SEGUNDO_PLANO} hijos, así que la propagación
               corre en segundo plano: el guardado termina antes de que todas estén
               actualizadas.
             </Note>
@@ -173,8 +175,8 @@ export const PropagateChangesModal = ({
         <Footer>
           <span className="resumen">
             {puedePropagar
-              ? `${chosenAttributes.length} atributo(s) a ${destinatarios} variante(s).`
-              : "No se bajará nada a las variantes."}
+              ? `${chosenAttributes.length} atributo(s) a ${destinatarios} hijo(s).`
+              : "No se bajará nada a los hijos."}
           </span>
           <button
             type="button"

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

@@ -123,7 +123,7 @@ export const ProviderProductEditionProvider = ({ children }) => {
     lo que el usuario eligió en el diálogo: { attributes: [...], targetChildren }.
 
     Sin ese bloque el backend no propaga nada. Es deliberado: bajar un cambio a
-    las variantes tiene que ser una decisión, no un efecto secundario de guardar.
+    los hijos tiene que ser una decisión, no un efecto secundario de guardar.
   */
   const saveDatasheets = async (token, propagation) => {
     if (state.updated_datasheets_inputs.length === 0) return;
@@ -167,17 +167,17 @@ export const ProviderProductEditionProvider = ({ children }) => {
           type: "SET_UPDATED_DATASHEETS_INPUTS",
           payload: [],
         });
-        // En una variante, todo atributo que el hijo toca deja de ser heredado:
+        // En un hijo, todo atributo que se toca deja de ser heredado:
         // update-articles-data le pone is_overridden = 1 en la base. Si aquí solo
         // se refresca el valor, el chip sigue diciendo "Heredado" hasta la
         // siguiente carga de la ficha, y el usuario ve una marca que ya es falsa.
-        const esVariante =
+        const esHijo =
           state.services?.datasheets?.variant?.isVariant ??
           !!state.product?.parentArticleId;
 
         dispatch({
           type: "UPDATE_DATASHEETS_INPUTS",
-          payload: esVariante
+          payload: esHijo
             ? state.updated_datasheets_inputs.map((item) => ({
                 ...item,
                 isOverridden: 1,

package/src/components/pages/ProviderProductEdition/context/reducers/inputs.js

@@ -52,7 +52,19 @@ export const inputsReducer = (state, action) => {
           const updatedInput = action.payload.find(
             (updated) => updated.attributeId === input.id
           );
-          return updatedInput ? { ...input, value: updatedInput.value } : input;
+          if (!updatedInput) return input;
+
+          return {
+            ...input,
+            value: updatedInput.value,
+            // Opcional a propósito, igual que en la ficha técnica: quien solo
+            // cambia el valor no toca la marca de herencia. La usa "Volver a
+            // heredar", que sí necesita devolverla a heredada para que el chip
+            // deje de decir "Propio".
+            ...(updatedInput.isOverridden === undefined
+              ? {}
+              : { isOverridden: updatedInput.isOverridden }),
+          };
         }
       );
 

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

@@ -207,6 +207,16 @@ const ProviderProductEditionView = ({
     setProductData();
   }, []);
 
+  /*
+    Contador que fuerza a releer los servicios tras ligar.
+
+    El efecto de abajo depende de estatus, versión y cadena activa, y ligar no
+    cambia ninguno: cambia la HERENCIA de cada campo en el servidor. Al planchar,
+    lo que era propio pasa a heredado, y sin releer los chips siguen diciendo lo
+    de antes hasta que alguien cierra y reabre el producto.
+  */
+  const [linkNonce, setLinkNonce] = useState(0);
+
   // Setter de los servicios y porcentages del producto
   useEffect(() => {
     if (!state.product || !state.active_retailer) return;
@@ -363,6 +373,7 @@ const ProviderProductEditionView = ({
     state.product?.version,
     state.active_retailer,
     token,
+    linkNonce,
   ]);
 
   // Actualizador de campos del ui para que coincidan con el retailer activo
@@ -709,15 +720,15 @@ const ProviderProductEditionView = ({
         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 cambios = cambiosDeFichaTecnica();
 
         if (esPadre && cambios.length > 0) {
           // Se espera a tener la familia antes de abrir: si no, el diálogo
-          // aparece diciendo "0 variantes" hasta que llega la respuesta, que es
+          // aparece diciendo "0 hijos" hasta que llega la respuesta, que es
           // justo lo contrario de lo que va a preguntar.
           setPreparandoPropagacion(true);
           loadFamily()
@@ -763,7 +774,7 @@ const ProviderProductEditionView = ({
   };
 
   /*
-    Trae la familia del producto: sus variantes, o sus hermanas si el abierto es
+    Trae la familia del producto: sus hijos, 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
@@ -786,7 +797,7 @@ const ProviderProductEditionView = ({
   };
 
   /*
-    Abre otra variante de la familia.
+    Abre otro producto de la familia.
 
     Esta pantalla no lee el producto de la URL: lo lee de sessionStorage, donde
     lo dejó el listado al hacer clic. Así que navegar a /products/:id sin más
@@ -801,7 +812,7 @@ const ProviderProductEditionView = ({
     raíz —que la ficha lea de la URL— toca todas las plataformas y no cabe aquí.
   */
   /*
-    Abre la edición múltiple con las variantes de la familia ya cargadas.
+    Abre la edición múltiple con los hijos de la familia ya cargados.
 
     Esa pantalla lee `multipleEditionList` de sessionStorage —así la deja el
     listado al pulsar "editar varios"— y necesita el PRODUCTO COMPLETO de cada
@@ -855,7 +866,7 @@ const ProviderProductEditionView = ({
         payload: {
           show: true,
           title: "",
-          message: "No se pudieron cargar las variantes para editarlas juntas.",
+          message: "No se pudieron cargar los hijos para editarlos juntos.",
           image: errorIcon,
         },
       });
@@ -918,7 +929,7 @@ const ProviderProductEditionView = ({
     el usuario tenga sin guardar.
 
     Los dos modos tienen efectos opuestos sobre este producto: ligando hijos GANA
-    variantes; ligándose a un padre pasa a SER una, y entonces el botón de ligar
+    hijos; ligándose a un padre pasa a SER uno, y entonces el botón de ligar
     desaparece porque la jerarquía es de un solo nivel.
   */
   const handleOnLinkedVariants = (result) => {
@@ -941,6 +952,8 @@ const ProviderProductEditionView = ({
     dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
     // La lista cacheada quedó vieja: se descarta para que vuelva a pedirse.
     setFamily(null);
+    // Y los servicios, para que los chips reflejen la herencia recién creada.
+    setLinkNonce((n) => n + 1);
 
     // Y en sessionStorage, que es de donde sale el producto al recargar. Sin
     // esto el arreglo dura hasta el siguiente F5 y vuelve el contador viejo,
@@ -965,7 +978,7 @@ const ProviderProductEditionView = ({
   /*
     Acción "Volver a heredar del producto" de los chips de herencia.
 
-    La inicia la variante, no el padre, y descarta un valor capturado a mano: por
+    La inicia el hijo, no el padre, y descarta un valor capturado a mano: por
     eso el endpoint exige la lista explícita de atributos y no acepta un "todos"
     implícito.
 
@@ -973,15 +986,25 @@ const ProviderProductEditionView = ({
     alternativa —recargar la ficha— se llevaría por delante lo que el usuario
     tenga sin guardar en las otras pestañas.
   */
-  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, y lo que devuelve se repinta en su propio
+    reducer.
+  */
+  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)],
+          ...(esDescripcion
+            ? { descriptions: [Number(attributeId)] }
+            : { attributes: [Number(attributeId)] }),
         },
         { headers: { Authorization: token } }
       );
@@ -990,6 +1013,18 @@ const ProviderProductEditionView = ({
       // real viaja en el cuerpo y readPayload lo convierte en excepción.
       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) => ({
@@ -1664,7 +1699,7 @@ const ProviderProductEditionView = ({
           </div>
           <div className="product-information">
             <div className="product-information">
-              {/* Solo cuando el producto NO es ya variante de alguien: ligarlo
+              {/* Solo cuando el producto NO es ya hijo de alguien: ligarlo
                   otra vez devolvería VARIANT_ALREADY_LINKED sin excepción, y un
                   botón que siempre falla es peor que no tenerlo. Para salir de
                   una familia está la desvinculación, no este botón. */}
@@ -1687,7 +1722,7 @@ const ProviderProductEditionView = ({
                         loadFamily();
                       }}
                     >
-                      {state.product.variantsCount} variante
+                      {state.product.variantsCount} hijo
                       {state.product.variantsCount === 1 ? "" : "s"}
                       <span aria-hidden="true">{showFamily ? " ▴" : " ▾"}</span>
                     </button>
@@ -1695,8 +1730,8 @@ const ProviderProductEditionView = ({
                 </div>
               )}
 
-              {/* La ficha de una variante también necesita ver la familia: desde
-                  aquí se salta al padre o a una hermana sin pasar por el listado. */}
+              {/* La ficha de un hijo también necesita ver la familia: desde
+                  aquí se salta al padre o a un hermano sin pasar por el listado. */}
               {state.product?.parentArticleId && (
                 <div className="variants-actions">
                   <button
@@ -1708,7 +1743,7 @@ const ProviderProductEditionView = ({
                       loadFamily();
                     }}
                   >
-                    Variante de otro producto
+                    Hijo de otro producto
                     <span aria-hidden="true">{showFamily ? " ▴" : " ▾"}</span>
                   </button>
                 </div>
@@ -1756,7 +1791,7 @@ const ProviderProductEditionView = ({
                           ? "Abriendo…"
                           : variant.isCurrent
                           ? "Estás aquí"
-                          : "Variante"}
+                          : "Hijo"}
                       </span>
                       <span className="name">{variant.name}</span>
                       <span className="upc">{variant.upc}</span>
@@ -1764,10 +1799,10 @@ const ProviderProductEditionView = ({
                   ))}
 
                   {family && !family.error && !family.variants?.length && (
-                    <p className="loading">Este producto no tiene variantes.</p>
+                    <p className="loading">Este producto no tiene hijos.</p>
                   )}
 
-                  {/* Editarlas juntas evita abrir seis fichas para llenar lo
+                  {/* Editarlos juntos evita abrir seis fichas para llenar lo
                       mismo seis veces, que es el caso real de una familia. */}
                   {family?.variants?.length > 1 && (
                     <button
@@ -1778,7 +1813,7 @@ const ProviderProductEditionView = ({
                     >
                       {preparandoEdicionMultiple
                         ? "Abriendo…"
-                        : `Editar las ${family.variants.length} variantes juntas`}
+                        : `Editar los ${family.variants.length} hijos juntos`}
                     </button>
                   )}
                 </div>
@@ -1849,6 +1884,12 @@ const ProviderProductEditionView = ({
                             updatedDescriptions={
                               state.updated_descriptions_inputs
                             }
+                            /* El parentesco es del producto, no del servicio:
+                               los dos endpoints lo devuelven igual. Se toma de
+                               la ficha técnica para no depender de que la
+                               llamada de descripciones traiga el bloque. */
+                            variant={state.services?.datasheets?.variant}
+                            onRestoreInheritance={handleOnRestoreInheritance}
                             articleId={state.product?.id_article}
                             version={state.product.version}
                             isShowbox={false}

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

@@ -140,7 +140,7 @@ export const ProviderProductEditionProvider = ({ children }) => {
   /*
     `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
+    nada: bajar un cambio a los hijos es una decisión, no un efecto
     secundario de guardar.
   */
   const saveDatasheets = async (token, propagation) => {
@@ -181,17 +181,17 @@ export const ProviderProductEditionProvider = ({ children }) => {
           type: "SET_UPDATED_DATASHEETS_INPUTS",
           payload: [],
         });
-        // En una variante, todo atributo que el hijo toca deja de ser heredado:
+        // En un hijo, todo atributo que se 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 =
+        const esHijo =
           state.services?.datasheets?.variant?.isVariant ??
           !!state.product?.parentArticleId;
 
         dispatch({
           type: "UPDATE_DATASHEETS_INPUTS",
-          payload: esVariante
+          payload: esHijo
             ? state.updated_datasheets_inputs.map((item) => ({
                 ...item,
                 isOverridden: 1,

package/src/components/pages/RetailerProductEdition/context/reducers/inputs.js

@@ -61,7 +61,19 @@ export const inputsReducer = (state, action) => {
           const updatedInput = action.payload.find(
             (updated) => updated.attributeId === input.id
           );
-          return updatedInput ? { ...input, value: updatedInput.value } : input;
+          if (!updatedInput) return input;
+
+          return {
+            ...input,
+            value: updatedInput.value,
+            // Opcional a propósito, igual que en la ficha técnica: quien solo
+            // cambia el valor no toca la marca de herencia. La usa "Volver a
+            // heredar", que sí necesita devolverla a heredada para que el chip
+            // deje de decir "Propio".
+            ...(updatedInput.isOverridden === undefined
+              ? {}
+              : { isOverridden: updatedInput.isOverridden }),
+          };
         }
       );