contentoh-components-library 21.6.21 → 21.6.23

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

@@ -262,3 +262,123 @@ export const Footer = styled.div`
     cursor: default;
   }
 `;
+
+export const SectionHead = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+
+  .toggle {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+    text-align: left;
+  }
+
+  .toggle .count {
+    font-family: ${FontFamily.Raleway_500};
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+  }
+
+  .all {
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+    font-family: ${FontFamily.Raleway_500};
+    font-size: 11px;
+    color: ${GlobalColors.original_magenta};
+    text-decoration: underline;
+  }
+`;
+
+export const ImageGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
+  gap: 8px;
+  margin-bottom: 16px;
+
+  label {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 6px;
+    border: 1px solid ${GlobalColors.s2};
+    border-radius: 6px;
+    cursor: pointer;
+  }
+
+  label.picked {
+    border-color: ${GlobalColors.original_magenta};
+    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.06);
+  }
+
+  label input {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+  }
+
+  label img {
+    width: 100%;
+    height: 72px;
+    object-fit: contain;
+    background-color: ${GlobalColors.s2};
+    border-radius: 4px;
+  }
+
+  label span {
+    font-size: 10px;
+    color: ${GlobalColors.gray};
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+export const AddRetailer = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+
+  select {
+    flex: 1;
+    height: 32px;
+    padding: 0 8px;
+    border: 1px solid ${GlobalColors.s2};
+    border-radius: 6px;
+    font-family: ${FontFamily.Raleway};
+    font-size: 12px;
+    color: ${GlobalColors.deep_gray};
+    background-color: ${GlobalColors.white};
+  }
+
+  button {
+    height: 32px;
+    padding: 0 14px;
+    border: 1px solid ${GlobalColors.original_magenta};
+    border-radius: 6px;
+    background: none;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 12px;
+    color: ${GlobalColors.original_magenta};
+    cursor: pointer;
+  }
+
+  button:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+`;

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

@@ -159,9 +159,22 @@ export const ProviderProductEditionProvider = ({ children }) => {
           type: "SET_UPDATED_DATASHEETS_INPUTS",
           payload: [],
         });
+        // En una variante, todo atributo que el hijo 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 =
+          state.services?.datasheets?.variant?.isVariant ??
+          !!state.product?.parentArticleId;
+
         dispatch({
           type: "UPDATE_DATASHEETS_INPUTS",
-          payload: state.updated_datasheets_inputs,
+          payload: esVariante
+            ? state.updated_datasheets_inputs.map((item) => ({
+                ...item,
+                isOverridden: 1,
+              }))
+            : state.updated_datasheets_inputs,
         });
 
         // Mostrar modal de éxito

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

@@ -76,6 +76,8 @@ const ProviderProductEditionView = ({
   const [boxData, setBoxData] = useState(null);
   const [showModal, setShowModal] = useState(false);
   const [showLinkVariants, setShowLinkVariants] = useState(false);
+  const [family, setFamily] = useState(null);
+  const [showFamily, setShowFamily] = useState(false);
   const [showRejectModal, setShowRejectModal] = useState(false);
   const [headerTop, setHeaderTop] = useState(0);
   const [assig, setAssig] = useState({});
@@ -697,6 +699,88 @@ const ProviderProductEditionView = ({
     });
   };
 
+  /*
+    Trae la familia del producto: sus variantes, o sus hermanas 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, 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;
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/family`,
+        { articleId: state.product?.id_article },
+        { headers: { Authorization: token } }
+      );
+      setFamily(readPayload(res));
+    } catch (error) {
+      console.error("loadFamily: ", error);
+      setFamily({ variants: [], parent: null, error: true });
+    }
+  };
+
+  const openVariant = (articleId) => {
+    // Se navega igual que el resto de la app, con el id en la ruta. Inventar
+    // otra forma de abrir un producto es inventar otra forma de que se rompa.
+    window.location.assign(`/products/${articleId}/datasheet`);
+  };
+
+  /*
+    Refresca la ficha después de ligar, sin recargar la página.
+
+    Recargar no servía: el producto de esta pantalla viene del listado —por
+    sessionStorage—, así que tras el refresh volvía el mismo objeto de antes y el
+    contador seguía mostrando el número viejo. Además una recarga se lleva lo que
+    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
+    desaparece porque la jerarquía es de un solo nivel.
+  */
+  const handleOnLinkedVariants = (result) => {
+    if (!result) return;
+
+    const updatedProduct =
+      result.mode === "children"
+        ? {
+            ...state.product,
+            variantsCount:
+              (state.product?.variantsCount ?? 0) +
+              (result.linked ?? []).length,
+          }
+        : {
+            ...state.product,
+            parentArticleId: result.parentArticleId ?? null,
+            variantsCount: 0,
+          };
+
+    dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
+    // La lista cacheada quedó vieja: se descarta para que vuelva a pedirse.
+    setFamily(null);
+
+    // 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,
+    // que es justo el síntoma que se reportó.
+    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) {
+      // 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);
+    }
+  };
+
   /*
     Acción "Volver a heredar del producto" de los chips de herencia.
 
@@ -1190,9 +1274,11 @@ const ProviderProductEditionView = ({
             articleName={state.product?.name}
             articleUpc={state.product?.upc}
             activeRetailerId={state.active_retailer?.id_retailer}
+            retailersAvailable={state.product?.retailersAvailable}
+            categoriesAvailable={state.product?.categoriesAvailable}
             token={token}
             onClose={() => setShowLinkVariants(false)}
-            onLinked={() => window.location.reload()}
+            onLinked={handleOnLinkedVariants}
           />
         )}
         {showModal && (
@@ -1395,10 +1481,82 @@ const ProviderProductEditionView = ({
                     Ligar productos
                   </button>
                   {state.product?.variantsCount > 0 && (
-                    <span className="variants-count">
+                    <button
+                      type="button"
+                      className="variants-count"
+                      aria-expanded={showFamily}
+                      onClick={() => {
+                        setShowFamily((abierto) => !abierto);
+                        loadFamily();
+                      }}
+                    >
                       {state.product.variantsCount} variante
                       {state.product.variantsCount === 1 ? "" : "s"}
-                    </span>
+                      <span aria-hidden="true">{showFamily ? " ▴" : " ▾"}</span>
+                    </button>
+                  )}
+                </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. */}
+              {state.product?.parentArticleId && (
+                <div className="variants-actions">
+                  <button
+                    type="button"
+                    className="variants-count"
+                    aria-expanded={showFamily}
+                    onClick={() => {
+                      setShowFamily((abierto) => !abierto);
+                      loadFamily();
+                    }}
+                  >
+                    Variante de otro producto
+                    <span aria-hidden="true">{showFamily ? " ▴" : " ▾"}</span>
+                  </button>
+                </div>
+              )}
+
+              {showFamily && (
+                <div className="variants-family">
+                  {!family && <p className="loading">Cargando familia…</p>}
+
+                  {family?.error && (
+                    <p className="loading">
+                      No se pudo cargar la familia de este producto.
+                    </p>
+                  )}
+
+                  {family?.parent && (
+                    <button
+                      type="button"
+                      className="family-row parent"
+                      onClick={() => openVariant(family.parent.articleId)}
+                    >
+                      <span className="role">Producto padre</span>
+                      <span className="name">{family.parent.name}</span>
+                      <span className="upc">{family.parent.upc}</span>
+                    </button>
+                  )}
+
+                  {family?.variants?.map((variant) => (
+                    <button
+                      key={variant.articleId}
+                      type="button"
+                      className={`family-row${variant.isCurrent ? " current" : ""}`}
+                      disabled={variant.isCurrent}
+                      onClick={() => openVariant(variant.articleId)}
+                    >
+                      <span className="role">
+                        {variant.isCurrent ? "Estás aquí" : "Variante"}
+                      </span>
+                      <span className="name">{variant.name}</span>
+                      <span className="upc">{variant.upc}</span>
+                    </button>
+                  ))}
+
+                  {family && !family.error && !family.variants?.length && (
+                    <p className="loading">Este producto no tiene variantes.</p>
                   )}
                 </div>
               )}

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

@@ -178,9 +178,77 @@ export const Container = styled.div`
     }
 
     .variants-count {
+      border: none;
+      background: none;
+      padding: 0;
+      cursor: pointer;
+      font-family: ${FontFamily.Raleway_500};
+      font-size: 11px;
+      color: ${GlobalColors.gray};
+      text-decoration: underline;
+    }
+  }
+
+  .variants-family {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 10px;
+    padding: 8px;
+    border: 1px solid ${GlobalColors.s2};
+    border-radius: 6px;
+
+    .loading {
+      margin: 0;
       font-family: ${FontFamily.Raleway_500};
       font-size: 11px;
       color: ${GlobalColors.gray};
     }
+
+    .family-row {
+      display: flex;
+      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;
+      font-size: 10px;
+      color: ${GlobalColors.original_magenta};
+    }
+
+    .family-row.current .role {
+      color: ${GlobalColors.gray};
+    }
+
+    .family-row .name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .family-row .upc {
+      font-size: 11px;
+      color: ${GlobalColors.gray};
+    }
   }
 `;