contentoh-components-library 21.6.55 → 21.6.56

package/src/components/organisms/DigitalAssetsTray/index.js

@@ -0,0 +1,189 @@
+import { useDropzone } from "react-dropzone";
+
+import { Container } from "./styles";
+import { GalleryAssetElement } from "../../molecules/GalleryAssetElement";
+import { GalleryHeader } from "../../molecules/GalleryHeader";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import {
+  MAX_ASSETS_PER_PRODUCT,
+  acceptedFormatsLabel,
+  buildDropzoneAccept,
+} from "../../../global-files/digital-assets/assetTypes";
+
+const CHECK_ALL_ID = "check-all-assets";
+const ITEM_SELECTOR = "[id^='gallery-asset-']";
+
+/**
+ * Bandeja de activos digitales: soltar archivos, verlos, reetiquetarlos y
+ * quitarlos.
+ *
+ * Tiene su propio dropzone en vez de compartir el de las imágenes porque los
+ * formatos aceptados son distintos: mezclarlos dejaría soltar un PDF sobre la
+ * bandeja de fotos y un JPG sobre la de activos.
+ *
+ * No guarda ni sube nada. Recibe el estado ya armado por `useDigitalAssets`,
+ * así que cuando se defina el contrato del backend solo hay que conectarle las
+ * llamadas; la interfaz no cambia.
+ */
+export const DigitalAssetsTray = ({
+  assets = [],
+  notices = [],
+  unsaved = { nuevos: 0, modificados: 0, borrados: 0, total: 0 },
+  remaining = MAX_ASSETS_PER_PRODUCT,
+  addFiles,
+  removeAsset,
+  changeAssetType,
+  clearNotices,
+  selectedAssets = [],
+  setSelectedAssets,
+  setCheckAll,
+  gridLayout = false,
+  readOnly = false,
+  emptyMessage = "Este producto no tiene activos digitales",
+}) => {
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    accept: buildDropzoneAccept(),
+    noKeyboard: true,
+    multiple: true,
+    noClick: true,
+    disabled: readOnly,
+    onDrop: (acceptedFiles) => addFiles?.(acceptedFiles),
+  });
+
+  const noticesBy = (level) => notices.filter((item) => item.level === level);
+
+  /*
+    Se desglosa en vez de mostrar solo el número: "3 cambios sin guardar" no le
+    dice al usuario qué perdería si se va, y no es lo mismo dejar sin guardar un
+    borrado que un archivo nuevo.
+  */
+  const detalleSinGuardar = [
+    unsaved.nuevos && `${unsaved.nuevos} nuevo${unsaved.nuevos > 1 ? "s" : ""}`,
+    unsaved.modificados && `${unsaved.modificados} modificado${unsaved.modificados > 1 ? "s" : ""}`,
+    unsaved.borrados && `${unsaved.borrados} por borrar`,
+  ].filter(Boolean).join(" · ");
+
+  return (
+    <Container>
+      <div className="tray-toolbar">
+        {/* La lista completa son 27 formatos: no cabe en una línea, así que va
+            en el title y en el texto solo las familias. */}
+        <p className="tray-hint" title={`Formatos permitidos: ${acceptedFormatsLabel()}`}>
+          Arrastra aquí videos, 360, GIF, documentos, hojas de cálculo o archivos
+          editables. Quedan {remaining} de {MAX_ASSETS_PER_PRODUCT}.
+        </p>
+        {!readOnly && (
+          <ButtonV2
+            label={"Agregar activos"}
+            type={"pink"}
+            size={12}
+            onClick={open}
+          />
+        )}
+      </div>
+
+      {/*
+        Rechazos y advertencias se separan en dos paneles.
+
+        Mezclarlos en rojo haría creer que un archivo que sí entró tampoco
+        sirvió: un .mov se guarda y se descarga bien, solo que el navegador no
+        lo reproduce. Son mensajes distintos y merecen colores distintos.
+      */}
+      {unsaved.total > 0 && (
+        <div className="tray-unsaved" role="status">
+          <span className="tray-unsaved-dot" />
+          <p>
+            <strong>
+              {unsaved.total} cambio{unsaved.total > 1 ? "s" : ""} sin guardar
+            </strong>
+            {detalleSinGuardar && <span className="tray-unsaved-detail"> — {detalleSinGuardar}</span>}
+          </p>
+        </div>
+      )}
+
+      {noticesBy("error").length > 0 && (
+        <div className="tray-notice tray-notice-error">
+          <div className="tray-notice-head">
+            <p>No se pudieron agregar {noticesBy("error").length} archivo(s):</p>
+            <button type="button" onClick={clearNotices} title="Cerrar">
+              ×
+            </button>
+          </div>
+          <ul>
+            {noticesBy("error").map((item, index) => (
+              <li key={`err-${item.name}-${index}`}>{item.message}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {noticesBy("warning").length > 0 && (
+        <div className="tray-notice tray-notice-warning">
+          <div className="tray-notice-head">
+            <p>Se agregaron, pero ten en cuenta:</p>
+            <button type="button" onClick={clearNotices} title="Cerrar">
+              ×
+            </button>
+          </div>
+          <ul>
+            {noticesBy("warning").map((item, index) => (
+              <li key={`warn-${item.name}-${index}`}>{item.message}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {!gridLayout && assets.length > 0 && (
+        <GalleryHeader
+          variant="asset"
+          checkAllId={CHECK_ALL_ID}
+          itemSelector={ITEM_SELECTOR}
+          setCheckAll={setCheckAll}
+          setSelectedImages={setSelectedAssets}
+        />
+      )}
+
+      <div
+        {...getRootProps({
+          className: `dropzone ${isDragActive ? "drag-active" : ""}`.trim(),
+        })}
+      >
+        <input {...getInputProps()} />
+        {isDragActive && (
+          <div className="drag-overlay">
+            <p>Suelta los activos aquí</p>
+          </div>
+        )}
+        <aside className={gridLayout ? "tray-grid" : "tray-rows"}>
+          {assets.map((asset, index) => (
+            <GalleryAssetElement
+              key={asset.id ?? asset.tempId}
+              asset={asset}
+              index={index}
+              gridLayout={gridLayout}
+              checkAllId={CHECK_ALL_ID}
+              itemSelector={ITEM_SELECTOR}
+              selectedAssets={selectedAssets}
+              setSelectedAssets={setSelectedAssets}
+              setCheckAll={setCheckAll}
+              changeAsset={({ value }) => changeAssetType?.(index, value)}
+              onRemove={removeAsset}
+              readOnly={readOnly}
+            />
+          ))}
+        </aside>
+
+        {assets.length === 0 && (
+          <div className="tray-empty">
+            <p>{emptyMessage}</p>
+            {!readOnly && (
+              <p className="tray-empty-hint">
+                Arrástralos aquí o usa «Agregar activos».
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,183 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+/* El dropzone replica el de la bandeja de imágenes para que arrastrar se sienta
+   igual en las dos. */
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .tray-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .tray-hint {
+    margin: 0;
+    font-family: ${FontFamily.Lato};
+    font-size: 12px;
+    line-height: 18px;
+    color: ${GlobalColors.s4};
+  }
+
+  /*
+    Aviso de cambios sin guardar. Va arriba del listado y no junto al botón de
+    guardar, que vive en otra barra: el usuario mira la bandeja, no el menú.
+  */
+  .tray-unsaved {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    border-radius: 6px;
+    border: 1px solid ${GlobalColors.in_progress};
+    background: rgba(237, 154, 77, 0.08);
+
+    p {
+      margin: 0;
+      font-family: ${FontFamily.Lato};
+      font-size: 12px;
+      line-height: 18px;
+      color: ${GlobalColors.s5};
+    }
+
+    strong {
+      font-family: ${FontFamily.Raleway_600};
+      color: ${GlobalColors.in_progress};
+    }
+  }
+
+  .tray-unsaved-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: ${GlobalColors.in_progress};
+    flex-shrink: 0;
+  }
+
+  .tray-unsaved-detail {
+    color: ${GlobalColors.s4};
+  }
+
+  .tray-notice {
+    border-radius: 6px;
+    padding: 8px 12px;
+    border: 1px solid;
+
+    .tray-notice-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      p {
+        margin: 0;
+        font-family: ${FontFamily.Raleway_600};
+        font-size: 12px;
+      }
+
+      button {
+        border: none;
+        background: none;
+        cursor: pointer;
+        font-size: 16px;
+        line-height: 1;
+        color: inherit;
+      }
+    }
+
+    ul {
+      margin: 4px 0 0;
+      padding-left: 18px;
+    }
+
+    li {
+      font-family: ${FontFamily.Lato};
+      font-size: 12px;
+      line-height: 18px;
+      color: ${GlobalColors.s5};
+    }
+  }
+
+  /* Rojo = no entró. Ámbar = entró, pero hay algo que saber. */
+  .tray-notice-error {
+    border-color: ${GlobalColors.secondary_magenta};
+    background: rgba(${GlobalColors.rgb_color_pink}, 0.05);
+    color: ${GlobalColors.secondary_magenta};
+  }
+
+  .tray-notice-warning {
+    border-color: ${GlobalColors.in_progress};
+    background: rgba(237, 154, 77, 0.08);
+    color: ${GlobalColors.in_progress};
+  }
+
+  .dropzone {
+    position: relative;
+    width: 100%;
+    min-height: 160px;
+    transition: all 0.5s ease;
+
+    &.drag-active {
+      background-color: rgba(${GlobalColors.rgb_color_pink}, 0.05);
+      border: 2px dashed ${GlobalColors.color_pink};
+      border-radius: 8px;
+
+      aside {
+        opacity: 0.3;
+        pointer-events: none;
+      }
+    }
+
+    .drag-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+
+      p {
+        font-family: ${FontFamily.AvenirNext};
+        font-size: 16px;
+        color: ${GlobalColors.color_pink};
+      }
+    }
+  }
+
+  .tray-rows {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tray-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .tray-empty {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    width: 80%;
+
+    p {
+      margin: 0;
+      font-family: ${FontFamily.Lato};
+      font-size: 16px;
+      color: ${GlobalColors.gray};
+    }
+
+    .tray-empty-hint {
+      margin-top: 6px;
+      font-size: 13px;
+      color: ${GlobalColors.s4};
+    }
+  }
+`;

package/src/components/organisms/ImagePreviewer/index.js

@@ -13,6 +13,7 @@ export const ImagePreviewer = ({
       <EditionActiveImage
         img={activeImage?.src}
         altText={activeImage?.name}
+        ext={activeImage?.ext}
         setShowModal={setShowModal}
       />
       <ImageSelector images={imagesArray} setActiveImage={setActiveImage} />

package/src/components/organisms/ProductImageModal/index.js

@@ -48,6 +48,7 @@ export const ProductImageModal = ({
               images?.values[activeImage]?.srcDB
             }
             altText={images?.values[activeImage]?.name}
+            ext={images?.values[activeImage]?.ext}
             imageType={"expanded-modal-image"}
           />
         </div>

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

@@ -13,6 +13,13 @@ import successIcon from "../../../../assets/images/genericModal/genericModalChec
 import errorIcon from "../../../../assets/images/genericModal/errorModal.svg";
 import warningIcon from "../../../../assets/images/genericModal/genericModalWarning.svg";
 import { getConceptByTab } from "../utils";
+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";
@@ -555,6 +562,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 = {
@@ -583,6 +782,8 @@ export const ProviderProductEditionProvider = ({ children }) => {
     updateImages,
     saveImageAttrs,
     deleteImages,
+    saveAssets,
+    registerUploadedAssets,
     handleOnDownloadImages,
     createComment,
   };

package/src/components/pages/RetailerProductEdition/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;
 };