contentoh-components-library 21.6.33 → 21.6.35

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

@@ -18,9 +18,9 @@ var _templateObject;
 // Rosa ContentOh, el mismo del modal de ligar productos.
 var PINK = "#E13AA8";
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .action-buttons{\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n        }\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 90%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n      position: relative;\n      transition: all 0.5s ease;\n\n      &.drag-active {\n        background-color: rgba(", ", 0.05);\n        border: 2px dashed ", ";\n        border-radius: 8px;\n\n        aside {\n          opacity: 0.3;\n          pointer-events: none;\n        }\n      }\n\n      .drag-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgba(", ", 0.1);\n        border-radius: 8px;\n        pointer-events: none;\n        z-index: 10;\n\n        p {\n          font-family: ", ";\n          font-size: 24px;\n          font-weight: 600;\n          color: ", ";\n          text-align: center;\n          padding: 20px;\n          background-color: ", ";\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n\n  .variants-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 8px;\n\n    .link-variants {\n      border: 1px solid ", ";\n      border-radius: 6px;\n      background: none;\n      padding: 6px 12px;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      cursor: pointer;\n    }\n\n    .variants-count {\n      border: none;\n      background: none;\n      padding: 0;\n      cursor: pointer;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .variants-family {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-bottom: 10px;\n    padding: 8px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n\n    .loading {\n      margin: 0;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n    }\n\n    .family-row {\n      display: flex;\n      align-items: baseline;\n      gap: 8px;\n      padding: 6px 8px;\n      border-radius: 4px;\n      text-align: left;\n      font-family: ", ";\n      font-size: 12px;\n      color: ", ";\n    }\n\n\n    .family-row .role {\n      min-width: 96px;\n      font-size: 10px;\n      color: ", ";\n    }\n\n    .family-row.current .role {\n      color: ", ";\n    }\n\n    .family-row .name {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .family-row .upc {\n      font-size: 11px;\n      color: ", ";\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .action-buttons{\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n        }\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 90%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n      position: relative;\n      transition: all 0.5s ease;\n\n      &.drag-active {\n        background-color: rgba(", ", 0.05);\n        border: 2px dashed ", ";\n        border-radius: 8px;\n\n        aside {\n          opacity: 0.3;\n          pointer-events: none;\n        }\n      }\n\n      .drag-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgba(", ", 0.1);\n        border-radius: 8px;\n        pointer-events: none;\n        z-index: 10;\n\n        p {\n          font-family: ", ";\n          font-size: 24px;\n          font-weight: 600;\n          color: ", ";\n          text-align: center;\n          padding: 20px;\n          background-color: ", ";\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n\n  .variants-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 8px;\n\n    .link-variants {\n      border: 1px solid ", ";\n      border-radius: 6px;\n      background: none;\n      padding: 6px 12px;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      cursor: pointer;\n    }\n\n    .variants-count {\n      border: none;\n      background: none;\n      padding: 0;\n      cursor: pointer;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .variants-family {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-bottom: 10px;\n    padding: 8px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n\n    .loading {\n      margin: 0;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n    }\n\n    .family-row {\n      display: flex;\n      align-items: baseline;\n      gap: 8px;\n      padding: 6px 8px;\n      border: none;\n      border-radius: 4px;\n      background: none;\n      cursor: pointer;\n      text-align: left;\n      font-family: ", ";\n      font-size: 12px;\n      color: ", ";\n    }\n\n    .family-row:hover:not(:disabled) {\n      background-color: ", ";\n    }\n\n    .family-row:disabled {\n      cursor: default;\n      opacity: 0.7;\n    }\n\n    .family-row .role {\n      min-width: 96px;\n      font-size: 10px;\n      color: ", ";\n    }\n\n    .family-row.current .role {\n      color: ", ";\n    }\n\n    .family-row .name {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .family-row .upc {\n      font-size: 11px;\n      color: ", ";\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
 
 exports.Container = Container;

package/dist/components/pages/RetailerProductEdition/utils.js

@@ -145,10 +145,15 @@ var normalizeProduct = function normalizeProduct(product) {
 
   var retailersIdsInOrder = productData.statusByRetailer ? productData.statusByRetailer.map(function (status) {
     return status.retailer_id;
-  }) : [];
-  var categoryRetailerInOrder = categoryRetailerNormalized.filter(function (rel) {
+  }) : []; // Un producto sin ninguna relación de cadena+categoría activa llega con
+  // `categoryRetailer` en null, y filtrar sobre null tumbaba la pantalla entera.
+  // Se vuelve alcanzable al saltar entre productos de una familia, que es cuando
+  // se abren fichas que nadie eligió desde el listado. Se conserva el null para
+  // no cambiar lo que ya leen los consumidores.
+
+  var categoryRetailerInOrder = categoryRetailerNormalized ? categoryRetailerNormalized.filter(function (rel) {
     return retailersIdsInOrder.includes(rel.id_retailer);
-  });
+  }) : null;
   return {
     id_article: productData.id_article || article.id_article || 0,
     upc: productData.upc || article.upc || null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.33",
+  "version": "21.6.35",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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
@@ -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,

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

@@ -185,6 +185,10 @@ const RetailerProductEditionView = ({
   const [showLinkVariants, setShowLinkVariants] = useState(false);
   const [family, setFamily] = useState(null);
   const [showFamily, setShowFamily] = useState(false);
+  const [loadingVariant, setLoadingVariant] = 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);
   const [pendingPropagation, setPendingPropagation] = useState(null);
   const [preparandoPropagacion, setPreparandoPropagacion] = useState(false);
 
@@ -833,24 +837,78 @@ const RetailerProductEditionView = ({
     : !!family?.parent;
 
   /*
-    En Creators la lista de familia es INFORMATIVA: no se salta a otro producto.
+    Abre otro producto de la familia.
+
+    Cambiar la URL no basta: esta pantalla no lee el producto de la ruta sino de
+    sessionStorage —el router hace JSON.parse(sessionStorage.productSelected) y
+    se lo pasa como prop—, así que navegar sin precargar dejaría la URL nueva
+    mostrando el producto anterior. Por eso primero se trae el destino y se
+    escriben las tres llaves que el listado escribe al hacer clic en una fila
+    (productSelected, version, productEdit), y solo entonces se navega.
+
+    Se pide a /ordered-services y no a read-articles-v2, que es lo que usa la
+    aplicación de clientes: aquel filtra por la compañía del usuario y el equipo
+    interno es de ContentOh trabajando productos de sus clientes, así que ahí no
+    devolvería nada. /ordered-services es el mismo endpoint del listado de esta
+    aplicación, así que el objeto llega con la forma exacta que normalizeProduct
+    espera —con `article` anidado, `statusByRetailer` y `categoryRetailer`—.
+
+    Un producto de la familia puede no estar en ninguna orden de trabajo: la
+    relación padre/hijo vive en `article` y no exige haber pasado por ContentOh.
+    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.
+  */
+  const openFamilyMember = async (articleId) => {
+    setLoadingVariant(articleId);
+    setAvisoFamilia(null);
+    try {
+      const res = await axios.get(
+        `${process.env.REACT_APP_ORDERED_SERVICES_ENDPOINT}`,
+        {
+          params: { filterByIdArticle: articleId, includeFilters: false },
+          headers: { Authorization: token },
+        }
+      );
 
-    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.
+      // read-order-services responde { total, data: [...] }. La vista trae una
+      // fila por orden, así que puede haber varias del mismo artículo; llegan
+      // ordenadas por order_id DESC y la primera es la orden más reciente.
+      const { data } = readPayload(res) ?? {};
+      const encontrado = (data ?? []).find(
+        (item) => Number(item?.article?.id_article) === Number(articleId)
+      );
 
-    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.
+      if (!encontrado) {
+        setAvisoFamilia(
+          "Ese producto no está en ninguna orden de trabajo, así que no se puede abrir desde aquí."
+        );
+        return;
+      }
 
-    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).
-  */
+      sessionStorage.setItem("productSelected", JSON.stringify(encontrado));
+      sessionStorage.setItem("version", JSON.stringify(encontrado.version));
+      sessionStorage.setItem(
+        "productEdit",
+        JSON.stringify({
+          ArticleId: encontrado.article.id_article,
+          categoryId: encontrado.article.id_article,
+          product: [encontrado],
+        })
+      );
+
+      window.location.assign("/EditProducts");
+    } catch (error) {
+      console.error("openFamilyMember: ", error);
+      setAvisoFamilia("No se pudo abrir ese producto. Intenta de nuevo.");
+    } finally {
+      setLoadingVariant(null);
+    }
+  };
 
   /*
-    Refresca tras ligar, sin recargar: el producto sale de sessionStorage, así que
-    un refresh devolvería el mismo objeto y el contador seguiría igual.
+    Refresca tras ligar, sin recargar la página: el producto sale de
+    sessionStorage, así que un F5 devolvería el mismo objeto y el contador
+    seguiría igual.
   */
   const handleOnLinkedVariants = (result) => {
     if (!result) return;
@@ -869,13 +927,62 @@ const RetailerProductEditionView = ({
           };
 
     dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
-    setFamily(null);
 
+    /*
+      En sessionStorage se PARCHEA lo guardado; no se reemplaza.
+
+      Lo que hay ahí es el producto tal como lo devuelve el listado de esta
+      aplicación: con `article` anidado, `statusByRetailer`, `categoryRetailer`
+      y los servicios. `updatedProduct` es la versión aplanada que usa esta
+      pantalla, y escribirla encima tiraba todo eso: al siguiente F5 la ficha se
+      reconstruía desde un objeto mutilado —sin relaciones de cadena, sin
+      estatus por cadena— aunque en pantalla se viera bien hasta entonces.
+
+      De ligar solo cambian dos cosas, y son las dos que se copian aquí.
+    */
     try {
-      sessionStorage.setItem("productSelected", JSON.stringify(updatedProduct));
+      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) {
+      // Un sessionStorage inaccesible no debe tumbar la pantalla: el estado en
+      // memoria ya quedó bien y es lo que el usuario está viendo.
       console.error("linkVariants/sessionStorage: ", error);
     }
+
+    /*
+      Volver a preguntar, no vaciar.
+
+      Antes esto hacía `setFamily(null)` para invalidar la caché, y en esta
+      pantalla eso tenía el efecto contrario al buscado: el bloque de parentesco
+      se decide con `esHijoDeOtro`, que sale de `family`, no del producto. Con
+      `family` en null el bloque desaparecía, así que después de ligar la
+      pantalla se quedaba SIN ninguna señal de que el producto ya tenía padre
+      —justo lo que el usuario acababa de hacer—.
+    */
+    loadFamily(true);
+
+    /*
+      Y se recargan los servicios, porque ligar cambia la herencia de cada campo
+      en el servidor: al planchar, lo que era propio pasa a heredado y los chips
+      tienen que decirlo. Sin esto la ficha sigue mostrando el estado anterior
+      hasta que alguien cierra y vuelve a abrir el producto.
+
+      Sin `enableLoading` para no parpadear el esqueleto encima de una pantalla
+      que ya está pintada.
+    */
+    loadData(false);
   };
 
   /*
@@ -2011,29 +2118,49 @@ const RetailerProductEditionView = ({
                 )}
 
                 {family?.parent && (
-                  <div className="family-row parent">
-                    <span className="role">Producto padre</span>
+                  <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>
-                  </div>
+                  </button>
                 )}
 
                 {family?.variants?.map((variant) => (
-                  <div
+                  <button
                     key={variant.articleId}
-                    className={`family-row${variant.isCurrent ? " current" : ""}`}
+                    type="button"
+                    className={`family-row${
+                      variant.isCurrent ? " current" : ""
+                    }`}
+                    disabled={variant.isCurrent || loadingVariant !== null}
+                    onClick={() => openFamilyMember(variant.articleId)}
                   >
                     <span className="role">
-                      {variant.isCurrent ? "Estás aquí" : "Hijo"}
+                      {loadingVariant === variant.articleId
+                        ? "Abriendo…"
+                        : variant.isCurrent
+                        ? "Estás aquí"
+                        : "Hijo"}
                     </span>
                     <span className="name">{variant.name}</span>
                     <span className="upc">{variant.upc}</span>
-                  </div>
+                  </button>
                 ))}
 
                 {family && !family.error && !family.variants?.length && (
                   <p className="loading">Este producto no tiene hijos.</p>
                 )}
+
+                {avisoFamilia && <p className="loading">{avisoFamilia}</p>}
               </div>
             )}
 

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

@@ -220,13 +220,24 @@ 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;

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

@@ -96,9 +96,16 @@ export const normalizeProduct = (product) => {
     ? productData.statusByRetailer.map((status) => status.retailer_id)
     : [];
 
-  const categoryRetailerInOrder = categoryRetailerNormalized.filter((rel) =>
-    retailersIdsInOrder.includes(rel.id_retailer)
-  );
+  // Un producto sin ninguna relación de cadena+categoría activa llega con
+  // `categoryRetailer` en null, y filtrar sobre null tumbaba la pantalla entera.
+  // Se vuelve alcanzable al saltar entre productos de una familia, que es cuando
+  // se abren fichas que nadie eligió desde el listado. Se conserva el null para
+  // no cambiar lo que ya leen los consumidores.
+  const categoryRetailerInOrder = categoryRetailerNormalized
+    ? categoryRetailerNormalized.filter((rel) =>
+        retailersIdsInOrder.includes(rel.id_retailer)
+      )
+    : null;
 
   return {
     id_article: productData.id_article || article.id_article || 0,

package/dist/ai/prompts/attribute.prompt.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generateAttributePrompt = void 0;
-
-var generateAttributePrompt = function generateAttributePrompt(_ref) {
-  var _ref$upc = _ref.upc,
-      upc = _ref$upc === void 0 ? 0 : _ref$upc,
-      _ref$inputName = _ref.inputName,
-      inputName = _ref$inputName === void 0 ? "" : _ref$inputName,
-      _ref$description = _ref.description,
-      description = _ref$description === void 0 ? "" : _ref$description,
-      _ref$currentValue = _ref.currentValue,
-      currentValue = _ref$currentValue === void 0 ? "" : _ref$currentValue,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      _ref$category = _ref.category,
-      category = _ref$category === void 0 ? "" : _ref$category,
-      _ref$retailer = _ref.retailer,
-      retailer = _ref$retailer === void 0 ? "" : _ref$retailer,
-      _ref$maxChar = _ref.maxChar,
-      maxChar = _ref$maxChar === void 0 ? 100 : _ref$maxChar;
-  return "\n    Eres un especialista en la generaci\xF3n, optimizaci\xF3n, mejora y captura de atributos de la ficha t\xE9cnica de productos para cat\xE1logos en l\xEDnea.\n    Tu tarea es crear atributos claros, concisos y relevantes que resalten las caracter\xEDsticas y beneficios del producto, utilizando un lenguaje preciso y adaptado al p\xFAblico objetivo.\n\n    Datos del producto:\n    - UPC: ".concat(upc, "\n    - Nombre del producto: ").concat(name, "\n    - Categor\xEDa: ").concat(category, "\n    - Nombre del atributo: ").concat(inputName, "\n    - Requerimiento del atributo: ").concat(description, "\n    - Valor actual del atributo: ").concat(currentValue, "\n    - Cadena comercial dirigida: ").concat(retailer, "\n\n    Instrucciones:\n    1. Analiza el nombre del producto y la categor\xEDa para entender su contexto.\n    2. Analiza la descripci\xF3n del atributo actual del producto.\n    3. Identifica la informaci\xF3n clave del atributo que sean relevantes y \xFAtiles para los clientes potenciales.\n    4. Genera una lista de atributos que:\n      - Cumplan con la descripcion del atributo proporcionada, no inventes datos o cambies el contexto de lo que pide la descripci\xF3n del atributo.\n      - Sean claros y f\xE1ciles de entender.\n      - Destaquen las caracter\xEDsticas y beneficios clave del producto.\n      - Utilicen un lenguaje preciso y adaptado al p\xFAblico objetivo.\n      - Mantengan un tono profesional y coherente con la marca.\n      - Aumenten la probabilidad de compra del producto.\n      - No excedan los ").concat(maxChar, " caracteres en total.\n      - Si existe ejemplo en la descripci\xF3n del atributo, sigue el mismo formato para generar los atributos.\n    5. No incluyas emojis ni signos especiales (*/+\xB4!\xA1?\xBF)\n    6. No repitas el encabezado: ").concat(inputName, "\n    7. No incluyas call to action, ejemplo: \"!Compra ya!\" \"!Da click!\" \"!Apurate!\"\n\n    Aseg\xFArate de que los atributos generados cumplan con todas las instrucciones proporcionadas.\n\n    No lo olvides, el objetivo principal es mejorar la captura de atributos para la ficha t\xE9cnica del producto para atraer, convencer y dar la informaci\xF3n completa a los clientes potenciales que puedan realizar una compra.\n  ");
-};
-
-exports.generateAttributePrompt = generateAttributePrompt;

package/dist/ai/prompts/description.prompt.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generateDescriptionPrompt = void 0;
-
-// Cadena y Proveedor
-
-/**
- * La cadena ${cadena} tiene estas reglas ${reglas} para el tipo de descripcion que es: ${descripcion}
-*/
-var generateDescriptionPrompt = function generateDescriptionPrompt(_ref) {
-  var _ref$upc = _ref.upc,
-      upc = _ref$upc === void 0 ? 0 : _ref$upc,
-      _ref$inputName = _ref.inputName,
-      inputName = _ref$inputName === void 0 ? "" : _ref$inputName,
-      _ref$description = _ref.description,
-      description = _ref$description === void 0 ? "" : _ref$description,
-      _ref$currentValue = _ref.currentValue,
-      currentValue = _ref$currentValue === void 0 ? "" : _ref$currentValue,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      _ref$category = _ref.category,
-      category = _ref$category === void 0 ? "" : _ref$category,
-      _ref$retailer = _ref.retailer,
-      retailer = _ref$retailer === void 0 ? "" : _ref$retailer,
-      _ref$maxChar = _ref.maxChar,
-      maxChar = _ref$maxChar === void 0 ? 100 : _ref$maxChar;
-  return "\n    Eres un especialista en la generaci\xF3n, optimizaci\xF3n y mejora de descripciones de productos para cat\xE1logos en l\xEDnea.\n    Tu tarea es crear descripciones claras, concisas y atractivas que resalten las caracter\xEDsticas y beneficios del producto, utilizando un lenguaje persuasivo y adaptado al p\xFAblico objetivo.\n\n    Datos del producto:\n    - UPC: ".concat(upc, "\n    - Nombre del producto: ").concat(name, "\n    - Categor\xEDa: ").concat(category, "\n    - Encabezado de la descripci\xF3n: ").concat(inputName, "\n    - Requerimiento de la descripcion: ").concat(description, "\n    - Descripcion actual del producto: ").concat(currentValue, "\n    - Cadena comercial dirigida: ").concat(retailer, "\n\n    Instrucciones:\n    1. Analiza la descripci\xF3n actual del producto en caso de tenerla.\n    2. Identifica \xE1reas de mejora, como claridad, concisi\xF3n, atractivo y relevancia.\n    3. Genera una descripci\xF3n que:\n      - Sea clara y f\xE1cil de entender.\n      - Destaque las caracter\xEDsticas y beneficios clave del producto.\n      - Utilice un lenguaje persuasivo y adaptado al p\xFAblico objetivo.\n      - Mantenga un tono profesional y coherente con la marca.\n      - No exceda los ").concat(maxChar, " caracteres.\n      - Aumente la probabilidad de compra del producto, utilizando persuasi\xF3n en la necesidad de compra del producto.\n    4. No incluyas emojis ni signos especiales (*/+\xB4!\xA1?\xBF)\n    5. No repitas el encabezado: ").concat(inputName, "\n    6. No incluyas call to action, ejemplo: \"!Compra ya!\" \"!Da click!\" \"!Apurate!\"\n\n\n    Aseg\xFArate de que la descripci\xF3n generada cumpla con todas las instrucciones proporcionadas.\n\n    No lo olvides, el objetivo principal es mejorar la descripci\xF3n del producto para atraer y convencer a los clientes potenciales de realizar una compra. Eres un experto en marketing y redacci\xF3n persuasiva.\n\n    Nota: No estas hablando con los clientes, estas descripciones ir\xE1n en la tienda de E-commerce de la cadena comercial. No realices saludos, despedidas, sugerencias\n  ");
-};
-
-exports.generateDescriptionPrompt = generateDescriptionPrompt;

package/dist/ai/schemas/attribute.schema.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var schema = {
-  type: "object",
-  properties: {
-    results: {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          label: {
-            type: "string"
-          },
-          value: {
-            type: "string"
-          }
-        }
-      },
-      maxItems: 3
-    },
-    compliance_warnings: {
-      type: "array",
-      items: {
-        type: "string"
-      }
-    }
-  },
-  required: ["results"]
-};
-var _default = schema;
-exports.default = _default;

package/dist/ai/schemas/description.schema.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var schema = {
-  type: "object",
-  properties: {
-    results: {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          value: {
-            type: "string"
-          }
-        }
-      },
-      minItems: 1,
-      maxItems: 3
-    }
-  },
-  required: ["results"]
-};
-var _default = schema;
-exports.default = _default;