contentoh-components-library 21.6.57 → 21.6.58

package/package.json

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

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;
 };

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import axios from "axios";
 import { useDropzone } from "react-dropzone";
@@ -21,6 +21,8 @@ import {
   getServicesData,
 } from "../../../global-files/data";
 import { useCloseModal } from "../../../global-files/customHooks";
+import { useDigitalAssets } from "../../../global-files/digital-assets/useDigitalAssets";
+import { countUnsavedAssets } from "../../../global-files/digital-assets/assets.reducer";
 
 import { Button } from "../../atoms/GeneralButton";
 import { GenericModal } from "../../atoms/GenericModal";
@@ -30,12 +32,14 @@ import { ButtonV2 } from "../../atoms/ButtonV2";
 
 import { GalleryElement } from "../../molecules/GalleryElement";
 import { GalleryHeader } from "../../molecules/GalleryHeader";
+import { GalleryTrayTabs, TRAYS } from "../../molecules/GalleryTrayTabs";
 import { HeaderTop } from "../../molecules/HeaderTop";
 import { TagAndInput } from "../../molecules/TagAndInput/index";
 
 import { FullProductNameHeader } from "../../organisms/FullProductNameHeader";
 import { FullTabsMenu } from "../../organisms/FullTabsMenu";
 import { ImageDataTable } from "../../organisms/ImageDataTable";
+import { DigitalAssetsTray } from "../../organisms/DigitalAssetsTray";
 import { ImagePreviewer } from "../../organisms/ImagePreviewer";
 import { InputGroup } from "../../organisms/InputGroup";
 import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
@@ -67,6 +71,14 @@ const ProviderProductEditionView = ({
   showSurvey,
   company,
   addToCart,
+  /*
+    Activos digitales (360, video, gif, pdf). Apagado por omisión, igual que en
+    RetailerProductEdition: la interfaz ya está, pero mientras el backend no
+    devuelva `assets` en los servicios del producto la bandeja solo muestra lo
+    que el usuario acaba de soltar. La app que consuma la librería lo enciende
+    cuando el backend esté listo.
+  */
+  enableDigitalAssets = false,
 }) => {
   const {
     state,
@@ -75,6 +87,8 @@ const ProviderProductEditionView = ({
     saveDescriptions,
     updateImages,
     deleteImages,
+    saveAssets,
+    registerUploadedAssets,
     handleOnDownloadImages,
     createComment,
   } = useProviderProductEdition();
@@ -122,6 +136,49 @@ const ProviderProductEditionView = ({
     Imágenes: null,
   });
 
+  /*
+    Bandeja de activos digitales. La lista vive en el reducer de la ficha
+    (`state.assets_values`), igual que las imágenes, para que el guardado del
+    contexto pueda leerla. El hook solo aporta validación y ciclo de vida.
+  */
+  const [assetNotices, setAssetNotices] = useState([]);
+  const digitalAssets = useDigitalAssets({
+    assets: state.assets_values,
+    dispatch,
+    notices: assetNotices,
+    setNotices: setAssetNotices,
+    // Con los dos, la subida a S3 arranca sola al soltar los archivos. Sin
+    // ellos —en Storybook, por ejemplo— la bandeja funciona igual pero no sube.
+    articleId: state.product?.id_article ?? null,
+    token,
+    // Al terminar la subida el activo queda registrado solo, sin esperar al
+    // botón de guardar: con la barra llena, nadie supone que falta un paso.
+    onUploaded: (uploaded) => registerUploadedAssets(token, uploaded),
+  });
+  const [activeTray, setActiveTray] = useState(TRAYS.IMAGES);
+  const currentTray = enableDigitalAssets ? activeTray : TRAYS.IMAGES;
+
+  /*
+    De qué artículo se cargaron ya los activos. `state.services` se recalcula
+    cada vez que cambia la cadena activa, pero los activos son generales: no
+    dependen de la cadena, así que recargarlos borraría lo que el usuario
+    acaba de soltar y todavía no guarda. Por eso se cargan una sola vez por
+    artículo.
+  */
+  const assetsLoadedFor = useRef(null);
+
+  const handleOnSetSelectedAssets = (assets) =>
+    dispatch({
+      type: "SET_SELECTED_ASSETS",
+      payload: assets,
+    });
+
+  const handleOnSetAllAssetsChecked = (isChecked) =>
+    dispatch({
+      type: "TOGGLE_CHECK_ALL_ASSETS",
+      payload: isChecked,
+    });
+
   const [showVersionSelector, setShowVersionSelector] =
     useCloseModal("version-selector");
   const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
@@ -366,6 +423,19 @@ const ProviderProductEditionView = ({
 
         dispatch({ type: "SET_SERVICES_DATA", payload: servicesDataRes });
 
+        /*
+          Activos digitales. `services[2].assets` todavía no existe en la
+          respuesta del backend: hasta que exista, esto no hace nada, y el día
+          que llegue la bandeja se llena sola sin tocar nada más.
+        */
+        if (
+          Array.isArray(services[2].assets) &&
+          assetsLoadedFor.current !== id_article
+        ) {
+          assetsLoadedFor.current = id_article;
+          digitalAssets.replaceAll(services[2].assets);
+        }
+
         dispatch({ type: "SET_PERCENTAGES", payload: percentages });
 
         const activePercentage =
@@ -594,6 +664,27 @@ const ProviderProductEditionView = ({
     }
   };
 
+  /*
+    Guarda los activos y fuerza la recarga si algo se escribió.
+
+    Esta pantalla no tiene una función `loadData` reutilizable como
+    RetailerProductEdition: la carga de servicios vive en un `useEffect` que
+    solo se dispara por sus dependencias. `linkNonce` ya existe ahí para eso
+    mismo —forzar un refetch sin recargar la página—, así que se reutiliza en
+    vez de duplicar el mecanismo.
+
+    La recarga no es opcional: un activo recién creado sigue en memoria con su
+    id temporal y sin el id de la base. Sin volver a leer, el siguiente
+    guardado lo mandaría otra vez como nuevo y se duplicaría.
+  */
+  const handleOnSaveAssets = async () => {
+    const guardado = await saveAssets(token);
+    if (!guardado) return;
+
+    assetsLoadedFor.current = null;
+    setLinkNonce((n) => n + 1);
+  };
+
   const handleOnApproveAll = () => {
     const currentOrigin = origin[state.active_tab];
 
@@ -671,7 +762,98 @@ const ProviderProductEditionView = ({
     setShowRejectModal(true);
   };
 
+  /*
+    Descarga de activos: los seleccionados, o todos si no hay selección — el
+    mismo criterio que usa la descarga de imágenes.
+
+    Solo se descarga lo que ya está en S3. Un activo recién soltado vive como
+    referencia al archivo del disco del usuario: "descargarlo" le devolvería el
+    archivo que él mismo acaba de elegir, lo cual no tiene sentido.
+  */
+  const handleOnDownloadAssets = () => {
+    const seleccion = state.selected_assets.length
+      ? state.selected_assets
+      : state.assets_values;
+
+    const descargables = seleccion.filter((asset) => asset.id && asset.url);
+
+    if (descargables.length === 0) {
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Nada que descargar",
+          message:
+            "Los activos seleccionados todavía no se han guardado. Guárdalos primero.",
+          image: warningIcon,
+        },
+      });
+      return;
+    }
+
+    descargables.forEach((asset) => saveAs(asset.url, asset.name));
+  };
+
+  /*
+    Borrado en lote de activos.
+
+    A diferencia de las imágenes, que se borran contra el backend en el
+    momento, los activos se quitan de la bandeja y su baja viaja en el mismo
+    PUT del guardado (`deleteAssets`). Es lo que permite al usuario deshacerse
+    de un borrado por error: basta con no guardar. El mensaje lo dice, para que
+    nadie se quede pensando que ya se aplicó.
+  */
+  const handleOnAskToDeleteAssets = () => {
+    if (state.selected_assets.length === 0) {
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Eliminar activos digitales",
+          message: "No has seleccionado ningún activo para eliminar.",
+          image: warningIcon,
+        },
+      });
+      return;
+    }
+
+    const seleccionados = state.selected_assets;
+
+    dispatch({
+      type: "SET_MODAL",
+      payload: {
+        show: true,
+        title: "Eliminar activos digitales",
+        message: `Se quitarán ${seleccionados.length} activo(s) de la bandeja. El borrado se aplica al guardar.`,
+        image: warningIcon,
+        buttons: [
+          {
+            text: "Cancelar",
+            buttonType: "general-white-button",
+            action: () =>
+              dispatch({ type: "SET_MODAL", payload: { show: false } }),
+          },
+          {
+            text: "Eliminar",
+            buttonType: "general-button-default",
+            action: () => {
+              dispatch({ type: "SET_MODAL", payload: { show: false } });
+              seleccionados.forEach((asset) =>
+                digitalAssets.removeAsset(asset),
+              );
+            },
+          },
+        ],
+      },
+    });
+  };
+
   const handleOnAskToDeleteImages = () => {
+    if (currentTray === TRAYS.ASSETS) {
+      handleOnAskToDeleteAssets();
+      return;
+    }
+
     if (state.selected_images.length === 0) {
       dispatch({
         type: "SET_MODAL",
@@ -847,6 +1029,13 @@ const ProviderProductEditionView = ({
         break;
       }
       case "Imágenes":
+        // Se guarda la bandeja que el usuario tiene a la vista: guardar las
+        // dos de golpe mandaría cambios de la otra bandeja que quizá no dio
+        // por terminados.
+        if (currentTray === TRAYS.ASSETS) {
+          handleOnSaveAssets();
+          return;
+        }
         updateImages(token);
         break;
       default:
@@ -2269,7 +2458,11 @@ const ProviderProductEditionView = ({
                 updatedImages={state.updated_images_values}
                 images={state.services.images}
                 // actions
-                downloadImages={handleOnDownloadImages}
+                downloadImages={
+                  currentTray === TRAYS.ASSETS
+                    ? handleOnDownloadAssets
+                    : handleOnDownloadImages
+                }
                 askToDeleteImages={handleOnAskToDeleteImages}
                 showSaveButton={canShowSaveButton(state.product.version_status)}
                 onClickSave={handleOnClickSave}
@@ -2395,17 +2588,44 @@ const ProviderProductEditionView = ({
                     {state.active_tab === "Imágenes" &&
                       (state.product?.images_status !== "NS" ? (
                         <>
-                          {!imageLayout && (
+                          {enableDigitalAssets && (
+                            <GalleryTrayTabs
+                              activeTray={currentTray}
+                              setActiveTray={setActiveTray}
+                              imagesCount={
+                                state.images_values?.values?.length ?? 0
+                              }
+                              assetsCount={digitalAssets.assets.length}
+                            />
+                          )}
+                          {currentTray === TRAYS.ASSETS && (
+                            <section
+                              className="container"
+                              style={{ position: "relative" }}
+                            >
+                              <DigitalAssetsTray
+                                {...digitalAssets}
+                                unsaved={countUnsavedAssets(state)}
+                                gridLayout={imageLayout}
+                                readOnly={false}
+                                selectedAssets={state.selected_assets}
+                                setSelectedAssets={handleOnSetSelectedAssets}
+                                setCheckAll={handleOnSetAllAssetsChecked}
+                              />
+                            </section>
+                          )}
+                          {currentTray === TRAYS.IMAGES && !imageLayout && (
                             <GalleryHeader
                               checkAll={state.all_image_checked} // Determina si el checkbox "Seleccionar todo" está marcado
                               setCheckAll={handleOnSetCheckAll} // Toggler de true o false para el checkbox "Seleccionar todo"
                               setSelectedImages={handleOnSetSelectedImages}
                             />
                           )}
-                          <section
-                            className="container"
-                            style={{ position: "relative" }}
-                          >
+                          {currentTray === TRAYS.IMAGES && (
+                            <section
+                              className="container"
+                              style={{ position: "relative" }}
+                            >
                             <div
                               {...getRootProps({
                                 className: `dropzone ${
@@ -2467,6 +2687,7 @@ const ProviderProductEditionView = ({
                               </div>
                             )}
                           </section>
+                          )}
                         </>
                       ) : (
                         <ScreenHeader