contentoh-components-library 21.6.23 → 21.6.25

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

@@ -2,6 +2,25 @@ import styled from "styled-components";
 import "../../../global-files/global-styles.css";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
+// Rosa ContentOh. Va aquí y no en variables.js porque cambiar la constante
+// global tocaría todos los componentes que ya la usan; este modal es lo que hay
+// que alinear con la marca.
+const PINK = "#E13AA8";
+const PINK_RGB = "225, 58, 168";
+
+// accent-color pinta el relleno de checkboxes y radios con el color de marca en
+// vez del azul del sistema, sin reemplazarlos por divs: siguen siendo controles
+// nativos, con su foco y su navegación por teclado intactos.
+const controls = `
+  input[type="checkbox"],
+  input[type="radio"] {
+    accent-color: ${PINK};
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+  }
+`;
+
 export const Overlay = styled.div`
   position: fixed;
   inset: 0;
@@ -13,6 +32,7 @@ export const Overlay = styled.div`
 `;
 
 export const Panel = styled.div`
+  ${controls}
   display: flex;
   flex-direction: column;
   width: min(680px, 92vw);
@@ -33,13 +53,13 @@ export const Header = styled.div`
   h2 {
     margin: 0;
     font-family: ${FontFamily.Raleway_700};
-    font-size: 16px;
+    font-size: 17px;
     color: ${GlobalColors.deep_gray};
   }
 
   p {
     margin: 4px 0 0;
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.gray};
   }
 
@@ -47,7 +67,7 @@ export const Header = styled.div`
     border: none;
     background: none;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 21px;
     line-height: 1;
     color: ${GlobalColors.gray};
   }
@@ -65,16 +85,16 @@ export const ModeSwitch = styled.div`
     border: 1px solid ${GlobalColors.s2};
     background-color: ${GlobalColors.white};
     font-family: ${FontFamily.Raleway_600};
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.gray};
     cursor: pointer;
     text-align: left;
   }
 
   button.active {
-    border-color: ${GlobalColors.original_magenta};
-    color: ${GlobalColors.original_magenta};
-    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.08);
+    border-color: ${PINK};
+    color: ${PINK};
+    background-color: rgba(${PINK_RGB}, 0.08);
   }
 `;
 
@@ -82,6 +102,25 @@ export const Body = styled.div`
   flex: 1;
   overflow-y: auto;
   padding: 0 24px;
+
+  .apply-all {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 12px;
+    padding: 10px 12px;
+    border-radius: 6px;
+    background-color: ${GlobalColors.s2};
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+    cursor: pointer;
+  }
+
+  .apply-all .hint {
+    display: block;
+    font-size: 12px;
+    color: ${GlobalColors.gray};
+  }
 `;
 
 export const SearchRow = styled.form`
@@ -96,7 +135,7 @@ export const SearchRow = styled.form`
     border: 1px solid ${GlobalColors.s2};
     border-radius: 6px;
     font-family: ${FontFamily.Raleway};
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.deep_gray};
   }
 
@@ -105,10 +144,10 @@ export const SearchRow = styled.form`
     padding: 0 18px;
     border: none;
     border-radius: 6px;
-    background-color: ${GlobalColors.original_magenta};
+    background-color: ${PINK};
     color: ${GlobalColors.white};
     font-family: ${FontFamily.Raleway_600};
-    font-size: 12px;
+    font-size: 13px;
     cursor: pointer;
   }
 
@@ -135,20 +174,28 @@ export const List = styled.ul`
     gap: 10px;
     padding: 10px 12px;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.deep_gray};
   }
 
   .meta {
     display: block;
-    font-size: 11px;
+    font-size: 12px;
     color: ${GlobalColors.gray};
   }
 
+  .logo {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+    border-radius: 3px;
+    flex-shrink: 0;
+  }
+
   .count {
     margin-left: auto;
-    font-size: 11px;
-    color: ${GlobalColors.original_magenta};
+    font-size: 12px;
+    color: ${PINK};
     white-space: nowrap;
   }
 `;
@@ -159,7 +206,7 @@ export const AttributeList = styled(List)`
 
   .note {
     display: block;
-    font-size: 10px;
+    font-size: 11px;
     font-style: italic;
     color: ${GlobalColors.gray};
   }
@@ -167,7 +214,7 @@ export const AttributeList = styled(List)`
   .value {
     margin-left: auto;
     max-width: 45%;
-    font-size: 11px;
+    font-size: 12px;
     color: ${GlobalColors.gray};
     overflow: hidden;
     text-overflow: ellipsis;
@@ -181,7 +228,7 @@ export const Section = styled.div`
   h3 {
     margin: 0 0 8px;
     font-family: ${FontFamily.Raleway_600};
-    font-size: 13px;
+    font-size: 14px;
     color: ${GlobalColors.deep_gray};
   }
 
@@ -190,14 +237,14 @@ export const Section = styled.div`
     align-items: flex-start;
     gap: 8px;
     padding: 6px 0;
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.deep_gray};
     cursor: pointer;
   }
 
   label.choice span.hint {
     display: block;
-    font-size: 11px;
+    font-size: 12px;
     color: ${GlobalColors.gray};
   }
 `;
@@ -206,14 +253,14 @@ export const Message = styled.p`
   margin: 0 0 12px;
   padding: 10px 12px;
   border-radius: 6px;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 1.4;
   background-color: ${GlobalColors.s2};
   color: ${GlobalColors.deep_gray};
 
   &.error {
-    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.1);
-    color: ${GlobalColors.original_magenta};
+    background-color: rgba(${PINK_RGB}, 0.1);
+    color: ${PINK};
   }
 `;
 
@@ -226,7 +273,7 @@ export const Footer = styled.div`
   border-top: 1px solid ${GlobalColors.s2};
 
   .summary {
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.gray};
   }
 
@@ -241,7 +288,7 @@ export const Footer = styled.div`
     padding: 0 18px;
     border-radius: 6px;
     font-family: ${FontFamily.Raleway_600};
-    font-size: 12px;
+    font-size: 13px;
     cursor: pointer;
   }
 
@@ -253,7 +300,7 @@ export const Footer = styled.div`
 
   button.primary {
     border: none;
-    background-color: ${GlobalColors.original_magenta};
+    background-color: ${PINK};
     color: ${GlobalColors.white};
   }
 
@@ -263,45 +310,6 @@ export const Footer = styled.div`
   }
 `;
 
-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));
@@ -320,8 +328,12 @@ export const ImageGrid = styled.div`
   }
 
   label.picked {
-    border-color: ${GlobalColors.original_magenta};
-    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.06);
+    border-color: ${PINK};
+    background-color: rgba(${PINK_RGB}, 0.06);
+  }
+
+  label.locked {
+    cursor: default;
   }
 
   label input {
@@ -339,7 +351,7 @@ export const ImageGrid = styled.div`
   }
 
   label span {
-    font-size: 10px;
+    font-size: 11px;
     color: ${GlobalColors.gray};
     text-align: center;
     overflow: hidden;
@@ -350,17 +362,19 @@ export const ImageGrid = styled.div`
 
 export const AddRetailer = styled.div`
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 16px;
 
   select {
-    flex: 1;
+    flex: 1 1 140px;
+    min-width: 0;
     height: 32px;
     padding: 0 8px;
     border: 1px solid ${GlobalColors.s2};
     border-radius: 6px;
     font-family: ${FontFamily.Raleway};
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.deep_gray};
     background-color: ${GlobalColors.white};
   }
@@ -368,17 +382,159 @@ export const AddRetailer = styled.div`
   button {
     height: 32px;
     padding: 0 14px;
-    border: 1px solid ${GlobalColors.original_magenta};
+    border: 1px solid ${PINK};
     border-radius: 6px;
     background: none;
     font-family: ${FontFamily.Raleway_600};
-    font-size: 12px;
-    color: ${GlobalColors.original_magenta};
+    font-size: 13px;
+    color: ${PINK};
     cursor: pointer;
   }
 
+  select:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
   button:disabled {
     opacity: 0.4;
     cursor: default;
   }
 `;
+
+export const Block = styled.section`
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid ${GlobalColors.s2};
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+
+  h3 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 8px;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 14px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  h3 .paso {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: ${PINK};
+    color: ${GlobalColors.white};
+    font-size: 11px;
+  }
+`;
+
+export const Choices = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 10px;
+
+  label {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 4px 0;
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+    cursor: pointer;
+  }
+
+  label .hint {
+    display: block;
+    font-size: 12px;
+    color: ${GlobalColors.gray};
+  }
+`;
+
+export const Paging = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: -8px 0 16px;
+  font-family: ${FontFamily.Raleway_500};
+  font-size: 12px;
+  color: ${GlobalColors.gray};
+
+  button {
+    border: 1px solid ${GlobalColors.s2};
+    border-radius: 6px;
+    background: none;
+    padding: 5px 12px;
+    cursor: pointer;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 12px;
+    color: ${PINK};
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+`;
+
+export const Tabs = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid ${GlobalColors.s2};
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 200px;
+    padding: 6px 10px;
+    border: 1px solid ${GlobalColors.s2};
+    border-radius: 6px;
+    background-color: ${GlobalColors.white};
+    cursor: pointer;
+    font-family: ${FontFamily.Raleway_500};
+    font-size: 12px;
+    color: ${GlobalColors.gray};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  button.active {
+    border-color: ${PINK};
+    color: ${PINK};
+    background-color: rgba(${PINK_RGB}, 0.08);
+  }
+
+  button .orden {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: ${GlobalColors.s2};
+    font-size: 10px;
+    flex-shrink: 0;
+  }
+
+  button.active .orden {
+    background-color: ${PINK};
+    color: ${GlobalColors.white};
+  }
+
+  button .listo {
+    color: ${PINK};
+    flex-shrink: 0;
+  }
+`;

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

@@ -78,6 +78,7 @@ const ProviderProductEditionView = ({
   const [showLinkVariants, setShowLinkVariants] = useState(false);
   const [family, setFamily] = useState(null);
   const [showFamily, setShowFamily] = useState(false);
+  const [loadingVariant, setLoadingVariant] = useState(null);
   const [showRejectModal, setShowRejectModal] = useState(false);
   const [headerTop, setHeaderTop] = useState(0);
   const [assig, setAssig] = useState({});
@@ -722,10 +723,64 @@ const ProviderProductEditionView = ({
     }
   };
 
-  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`);
+  /*
+    Abre otra variante 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
+    cambia la barra de direcciones y deja el producto anterior en pantalla.
+
+    Por eso primero se trae el producto por su ID —no por su UPC: hay 12,024 UPC
+    repetidos entre artículos activos y 5,579 de esos casos caen dentro de la
+    misma compañía, así que el UPC no identifica— y se deja en sessionStorage con
+    la misma forma que usa el listado. Después se navega.
+
+    Es un rodeo, y lo es porque el origen del dato está mal puesto. Arreglarlo de
+    raíz —que la ficha lea de la URL— toca todas las plataformas y no cabe aquí.
+  */
+  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 },
+        }
+      );
+
+      // read-articles-v2 responde { count, data: [...] }.
+      const { data } = readPayload(res);
+      const encontrado = (data ?? []).find(
+        (item) => Number(item.id_article) === Number(articleId)
+      );
+
+      if (encontrado) {
+        sessionStorage.setItem(
+          "productSelected",
+          JSON.stringify({
+            ...encontrado,
+            article: { id_article: encontrado.id_article },
+          })
+        );
+        sessionStorage.setItem(
+          "productEdit",
+          JSON.stringify({
+            ArticleId: encontrado.id_article,
+            idCategory: encontrado.id_category,
+            product: encontrado,
+          })
+        );
+      }
+    } catch (error) {
+      // Si la consulta falla se navega igual: la pantalla mostrará el producto
+      // que hubiera en sessionStorage, que es el comportamiento de siempre.
+      // Peor sería dejar el clic sin efecto y que pareciera que no responde.
+      console.error("openVariant: ", error);
+    } finally {
+      setLoadingVariant(null);
+      window.location.assign(`/products/${articleId}/datasheet`);
+    }
   };
 
   /*
@@ -1274,8 +1329,6 @@ 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={handleOnLinkedVariants}
@@ -1531,9 +1584,14 @@ const ProviderProductEditionView = ({
                     <button
                       type="button"
                       className="family-row parent"
+                      disabled={loadingVariant !== null}
                       onClick={() => openVariant(family.parent.articleId)}
                     >
-                      <span className="role">Producto padre</span>
+                      <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>
                     </button>
@@ -1544,11 +1602,15 @@ const ProviderProductEditionView = ({
                       key={variant.articleId}
                       type="button"
                       className={`family-row${variant.isCurrent ? " current" : ""}`}
-                      disabled={variant.isCurrent}
+                      disabled={variant.isCurrent || loadingVariant !== null}
                       onClick={() => openVariant(variant.articleId)}
                     >
                       <span className="role">
-                        {variant.isCurrent ? "Estás aquí" : "Variante"}
+                        {loadingVariant === variant.articleId
+                          ? "Abriendo…"
+                          : variant.isCurrent
+                          ? "Estás aquí"
+                          : "Variante"}
                       </span>
                       <span className="name">{variant.name}</span>
                       <span className="upc">{variant.upc}</span>

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

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
+// Rosa ContentOh, el mismo del modal de ligar productos.
+const PINK = "#E13AA8";
+
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -167,13 +170,13 @@ export const Container = styled.div`
     margin-bottom: 8px;
 
     .link-variants {
-      border: 1px solid ${GlobalColors.original_magenta};
+      border: 1px solid ${PINK};
       border-radius: 6px;
       background: none;
       padding: 6px 12px;
       font-family: ${FontFamily.Raleway_600};
       font-size: 11px;
-      color: ${GlobalColors.original_magenta};
+      color: ${PINK};
       cursor: pointer;
     }
 
@@ -232,7 +235,7 @@ export const Container = styled.div`
     .family-row .role {
       min-width: 96px;
       font-size: 10px;
-      color: ${GlobalColors.original_magenta};
+      color: ${PINK};
     }
 
     .family-row.current .role {