contentoh-components-library 21.6.31 → 21.6.32

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: 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 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 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, _variables.GlobalColors.s2, 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, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
 
 exports.Container = Container;

package/package.json

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

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

@@ -185,7 +185,6 @@ const RetailerProductEditionView = ({
   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);
 
@@ -787,8 +786,8 @@ const RetailerProductEditionView = ({
     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 variantesDelProducto = 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 esVarianteDeOtro = family?.error
+    ? !!state.product?.parentArticleId
+    : !!family?.parent;
+
+  /*
+    En Creators la lista de familia es INFORMATIVA: no se salta a otra variante.
+
+    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 variante 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
@@ -932,7 +936,7 @@ const RetailerProductEditionView = ({
         // 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
         // separando de él sin que nadie lo note.
-        const esPadre = state.product?.variantsCount > 0;
+        const esPadre = variantesDelProducto > 0;
         const cambios = cambiosDeFichaTecnica();
 
         if (esPadre && cambios.length > 0) {
@@ -1928,7 +1932,7 @@ const RetailerProductEditionView = ({
           <div className="product-information">
             {/* Solo si el producto NO es ya variante de alguien: ligarlo otra vez
                 devolvería VARIANT_ALREADY_LINKED sin excepción. */}
-            {!state.product?.parentArticleId && (
+            {!esVarianteDeOtro && (
               <div className="variants-actions">
                 <button
                   type="button"
@@ -1937,7 +1941,7 @@ const RetailerProductEditionView = ({
                 >
                   Ligar productos
                 </button>
-                {state.product?.variantsCount > 0 && (
+                {variantesDelProducto > 0 && (
                   <button
                     type="button"
                     className="variants-count"
@@ -1947,15 +1951,15 @@ const RetailerProductEditionView = ({
                       loadFamily();
                     }}
                   >
-                    {state.product.variantsCount} variante
-                    {state.product.variantsCount === 1 ? "" : "s"}
+                    {variantesDelProducto} variante
+                    {variantesDelProducto === 1 ? "" : "s"}
                     <span aria-hidden="true">{showFamily ? " ▴" : " ▾"}</span>
                   </button>
                 )}
               </div>
             )}
 
-            {state.product?.parentArticleId && (
+            {esVarianteDeOtro && (
               <div className="variants-actions">
                 <button
                   type="button"
@@ -1983,40 +1987,24 @@ 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í" : "Variante"}
                     </span>
                     <span className="name">{variant.name}</span>
                     <span className="upc">{variant.upc}</span>
-                  </button>
+                  </div>
                 ))}
 
                 {family && !family.error && !family.variants?.length && (

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;