contentoh-components-library 21.6.57 → 21.6.59

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

@@ -0,0 +1,178 @@
+import styled, { createGlobalStyle } from "styled-components";
+import { Footer as PropagateFooter } from "../../organisms/PropagateChangesModal/styles";
+import { Footer as GroupFooter } from "../../organisms/VariantGroupModal/styles";
+import { Footer as LinkFooter } from "../../organisms/LinkVariantsModal/styles";
+import { Footer as UnlinkFooter } from "../../organisms/UnlinkVariantModal/styles";
+import {
+  StyledDialog as ChangeStatusDialog,
+  ScopeButtonGroup,
+  FooterActions as ChangeStatusFooter,
+} from "../../organisms/ChangeStatusModal/styles";
+
+/*
+  Estilos de la edición de producto de Creators.
+
+  Parte de `RetailerProductEdition/styles.js` (mismo diseño) y agrega lo que la
+  hace responsiva. Tres tamaños, los mismos que usa MUI por omisión:
+
+    - celular  (< 600px): una columna, un solo scroll para toda la pantalla.
+    - tablet   (600-899px): igual, con más aire.
+    - desktop  (>= 900px): las dos columnas de siempre, cada una con su scroll.
+
+  Varios hijos (ImagePreviewer, ImageDataTable, InputGroup...) traen anchos fijos
+  y la regla es no tocarlos. Donde estorban se ajustan DESDE AQUÍ, con selectores
+  acotados a esta página. Las fases siguientes los van reemplazando por MUI y
+  estos ajustes desaparecen con ellos.
+*/
+
+export const BREAKPOINTS = {
+  tablet: 600,
+  desktop: 900,
+};
+
+const mobile = `@media (max-width: ${BREAKPOINTS.tablet - 1}px)`;
+const belowDesktop = `@media (max-width: ${BREAKPOINTS.desktop - 1}px)`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  box-sizing: border-box;
+
+  /* El scroll lo lleva SIEMPRE este contenedor, como en la vista original: en
+     la app la pantalla vive dentro de un layout de altura fija, y si se dejara
+     al documento, en celular no habría nada que desplazar. */
+  ${belowDesktop} {
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* Sin overscroll-behavior: contain. Al llegar al final, el scroll tiene
+       que poder pasar al contenedor de afuera (el lienzo de Storybook, o la
+       página si la app la mete en algo que se desplaza); con contain se queda
+       atorado y no hay forma de ver lo que está debajo. */
+  }
+
+  .data-container {
+    display: flex;
+    flex: 0%;
+    gap: 16px;
+    min-width: 0;
+    height: calc(100% - ${({ headerTop }) => headerTop}px);
+    padding: 0 12px 12px;
+    box-sizing: border-box;
+
+    ${belowDesktop} {
+      flex-direction: column;
+      flex: none;
+      height: auto;
+    }
+
+    ${mobile} {
+      padding: 0 8px 12px;
+      gap: 12px;
+    }
+
+    .image-data-panel {
+      flex: 0 0 clamp(280px, 30%, 360px);
+      min-width: 0;
+
+      ${belowDesktop} {
+        flex: 0 0 auto;
+        width: 100%;
+      }
+
+      ${mobile} {
+        max-width: 480px;
+        align-self: center;
+      }
+    }
+
+    .product-information {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      ${belowDesktop} {
+        height: auto;
+      }
+
+      /* Cabecera, pestañas y grupos de inputs: que puedan encogerse en vez de
+         empujar la página hacia los lados. */
+      & > * {
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      .services-information-container {
+        height: 100%;
+        min-width: 0;
+        overflow: auto;
+
+        ${belowDesktop} {
+          height: auto;
+          overflow: visible;
+        }
+      }
+
+    }
+  }
+
+  /* Modales de variantes (se reutilizan tal cual). Su pie pone el resumen y
+     tres botones en una sola fila; en celular no cabe y el botón principal se
+     sale del panel. Aquí el resumen va en su propia fila y los botones se
+     reparten el ancho. */
+  ${mobile} {
+    ${PropagateFooter}, ${GroupFooter}, ${LinkFooter}, ${UnlinkFooter} {
+      flex-wrap: wrap;
+      padding: 12px 16px;
+
+      .resumen,
+      .summary {
+        flex: 1 1 100%;
+      }
+
+      .actions {
+        flex: 1 1 100%;
+        margin-left: 0;
+      }
+
+      button {
+        flex: 1 1 0;
+        min-width: 0;
+        height: auto;
+        min-height: 38px;
+        padding: 6px 10px;
+      }
+    }
+  }
+`;
+
+/*
+  Ajustes en celular para `ChangeStatusModal`, que se reutiliza tal cual. Es un
+  Dialog de MUI y se pinta en un portal, fuera de `Container`, así que no lo
+  alcanzan los selectores de arriba: va como estilo global, que solo existe
+  mientras esta pantalla está montada. Los tres botones de «Alcance del cambio»
+  no caben en una fila y se encimaban.
+*/
+export const ReusedModalsStyles = createGlobalStyle`
+  ${mobile} {
+    ${ChangeStatusDialog} .MuiDialog-paper {
+      margin: 16px;
+      max-height: calc(100% - 32px);
+    }
+
+    ${ChangeStatusDialog} ${ScopeButtonGroup} {
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+
+    ${ChangeStatusDialog} ${ChangeStatusFooter} {
+      padding: 12px 16px;
+    }
+  }
+`;

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

@@ -268,6 +268,7 @@ ProviderProductEditionFromProducts.args = {
     retailers: [],
   },
   showSurvey: (v) => v && alert("se muestra"),
+  enableDigitalAssets: true,
 };
 
 export const ProviderProductEditionFromTasks = Template.bind({});

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

@@ -12,6 +12,13 @@ import errorIcon from "../../../../assets/images/genericModal/errorModal.svg";
 import warningIcon from "../../../../assets/images/genericModal/genericModalWarning.svg";
 import AWS from "aws-sdk";
 import { v4 as uuidv4 } from "uuid";
+import {
+  assetKey,
+  buildSavePayload,
+  isPersisted,
+  toPayload,
+} from "../../../../global-files/digital-assets/assets.adapter";
+import { selectAssetsToSave } from "../../../../global-files/digital-assets/assets.reducer";
 
 const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
 const REGION = "us-east-1";
@@ -404,6 +411,198 @@ export const ProviderProductEditionProvider = ({ children }) => {
     dispatch({ type: "SET_SAVING", payload: false });
   };
 
+  /*
+    Registra en la base los activos que ACABAN de subirse, sin esperar a que el
+    usuario guarde.
+
+    Es una corrección de expectativa, no una comodidad: al ver la barra de
+    progreso llegar al final, cualquiera da por hecho que el activo ya quedó
+    ligado al producto. Si entonces cierra la ficha, el archivo se queda en S3
+    sin fila en la base —invisible y sin forma de recuperarlo desde la
+    pantalla—.
+
+    Manda SOLO las altas recién subidas, con `updateAssets` y `deleteAssets`
+    vacíos. Un reetiquetado o un borrado que el usuario todavía no confirmó no
+    se aplica por haber soltado otro archivo: el botón de guardar sigue siendo
+    quien decide sobre esos.
+  */
+  const registerUploadedAssets = async (token, uploaded = []) => {
+    const listos = uploaded.filter((asset) => asset.src && !isPersisted(asset));
+    if (listos.length === 0) return;
+
+    const data = {
+      articleId: state.product?.id_article,
+      newAssets: listos.map(toPayload),
+      updateAssets: [],
+      deleteAssets: [],
+    };
+
+    if (state.product?.orderId || state.product?.id_order) {
+      data.orderId = state.product?.orderId || state.product?.id_order;
+    }
+
+    try {
+      const res = await axios.put(
+        process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,
+        data,
+        { params: { asset: true }, headers: { Authorization: token } },
+      );
+
+      if (res.data.statusCode !== 200) throw new Error("Respuesta inesperada");
+
+      const body = JSON.parse(res.data.body);
+      const guardados = body.assets ?? [];
+
+      /*
+        Se le pone a cada activo el id que le tocó, emparejando por la clave de
+        S3, que es única.
+
+        A propósito NO se reemplaza la lista entera con lo que devolvió el
+        backend: eso borraría el rastro de lo que el usuario cambió o borró y
+        todavía no ha guardado. Aquí solo se completa lo que faltaba.
+      */
+      listos.forEach((asset) => {
+        const fila = guardados.find((row) => row.src === asset.src);
+        if (!fila) return;
+        dispatch({
+          type: "PATCH_ASSET",
+          payload: { key: assetKey(asset), changes: { id: fila.id, url: fila.url } },
+        });
+      });
+    } catch (error) {
+      console.log("Error registering assets:", error);
+      /*
+        El archivo SÍ está en S3; lo que falló es la fila. Se marca en el activo
+        y no en un modal porque el usuario puede estar soltando más archivos:
+        interrumpirlo con un diálogo por cada fallo sería peor que dejarlo
+        señalado en su renglón, donde además se ve cuál falló.
+      */
+      listos.forEach((asset) => dispatch({
+        type: "PATCH_ASSET",
+        payload: {
+          key: assetKey(asset),
+          changes: {
+            status: "error",
+            error: "Se subió el archivo pero no se pudo guardar. Usa el botón de guardar.",
+          },
+        },
+      }));
+    }
+  };
+
+  /*
+    Guarda los activos digitales: registra los nuevos, manda los cambios y pide
+    las bajas.
+
+    Va aparte de `updateImages` y no dentro, aunque las dos bandejas vivan en la
+    misma pestaña. Un activo no pasa por ninguna de las reglas de una imagen —ni
+    tipo de toma, ni obligatoriedad, ni cupo por cadena— y el backend los escribe
+    en otra tabla. Mezclarlos obligaría a partir en dos cada validación de
+    `updateImages`, que ya es la función más delicada de este archivo.
+
+    Igual que con las imágenes, aquí NO viaja ningún binario: el archivo ya está
+    en S3 y esto solo registra metadatos. Mandar el archivo en el cuerpo devuelve
+    413.
+  */
+  const saveAssets = async (token) => {
+    const payload = buildSavePayload(selectAssetsToSave(state));
+    const { newAssets, updateAssets, deleteAssets } = payload;
+
+    if (!newAssets.length && !updateAssets.length && !deleteAssets.length) {
+      return false;
+    }
+
+    /*
+      Un activo nuevo sin `key` es un archivo que todavía no llegó a S3.
+      Registrarlo crearía una fila apuntando a un objeto que no existe: la
+      bandeja lo mostraría y al descargarlo daría 404, sin forma de saber por qué.
+      Mejor no guardar nada y decirlo.
+    */
+    const sinSubir = newAssets.filter((asset) => !asset.key);
+    if (sinSubir.length > 0) {
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Faltan archivos por subir",
+          message: `${sinSubir.length} activo(s) todavía no se han subido. Espera a que termine la carga e intenta de nuevo.`,
+          image: warningIcon,
+        },
+      });
+      return false;
+    }
+
+    dispatch({ type: "SET_SAVING", payload: true });
+
+    // Sin `version`: un activo general es el mismo para todas las versiones del
+    // producto, así que ni la fila ni la clave de S3 la llevan.
+    const data = {
+      articleId: state.product?.id_article,
+      newAssets,
+      updateAssets,
+      deleteAssets,
+    };
+
+    if (state.product?.orderId || state.product?.id_order) {
+      data.orderId = state.product?.orderId || state.product?.id_order;
+    }
+
+    try {
+      const res = await axios.put(
+        process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,
+        data,
+        {
+          params: { asset: true },
+          headers: { Authorization: token },
+        },
+      );
+
+      if (res.data.statusCode === 200) {
+        // Se olvida qué cambió y qué se borró: lo que hay en pantalla ya es lo
+        // que hay en la base. Sin esto, el siguiente guardado reenviaría todo.
+        dispatch({ type: "CLEAR_ASSETS_TRACKING" });
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "",
+            message: "Activos digitales guardados con éxito",
+            image: successIcon,
+          },
+        });
+        /*
+          Devuelve `true` para que quien llama recargue.
+
+          Es imprescindible, no cortesía: los activos recién creados siguen en
+          memoria con su id temporal y sin el id de la base. Sin recargar, el
+          siguiente guardado los volvería a mandar como nuevos y se duplicarían.
+          Es exactamente el problema que ya tuvieron las imágenes.
+        */
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      console.log("Error saving assets:", error);
+      dispatch({
+        type: "SET_ERRORS",
+        payload: [...state.errors, error],
+      });
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Error",
+          message: "Hubo un error al guardar los activos digitales",
+          image: errorIcon,
+        },
+      });
+      return false;
+    } finally {
+      dispatch({ type: "SET_SAVING", payload: false });
+    }
+  };
+
   const createComment = async (body, token) => {
     const concept = getConceptByTab(state.active_tab);
     const data = {
@@ -427,6 +626,8 @@ export const ProviderProductEditionProvider = ({ children }) => {
     saveDescriptions,
     updateImages,
     deleteImages,
+    saveAssets,
+    registerUploadedAssets,
     handleOnDownloadImages,
     createComment,
   };

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

@@ -18,6 +18,11 @@ import {
   activeStateInitialState,
   activeStateReducer,
 } from "./reducers/active-state";
+import { ASSET_ACTIONS } from "../../../../global-files/digital-assets/assets.actions";
+import {
+  assetsInitialState,
+  assetsReducer,
+} from "../../../../global-files/digital-assets/assets.reducer";
 
 // Initial state
 export const initialState = {
@@ -25,6 +30,7 @@ export const initialState = {
   ...productInitialState,
   ...inputsInitialState,
   ...activeStateInitialState,
+  ...assetsInitialState,
 };
 
 // Action types
@@ -33,6 +39,7 @@ export const ACTIONS = {
   ...PRODUCT_ACTIONS,
   ...INPUTS_ACTIONS,
   ...ACTIVE_STATE_ACTIONS,
+  ...ASSET_ACTIONS,
 };
 
 // Reducer function
@@ -58,5 +65,10 @@ export const productEditionReducer = (state, action) => {
     return activeStateResult;
   }
 
+  const assetsResult = assetsReducer(state, action);
+  if (assetsResult !== null) {
+    return assetsResult;
+  }
+
   return state;
 };