contentoh-components-library 21.6.49 → 21.6.50

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/organisms/PropagateChangesModal/index.js

@@ -10,6 +10,7 @@ import {
   Note,
   Footer,
 } from "./styles";
+import { soloPropagables } from "./non-propagable";
 
 /*
   Diálogo de propagación al guardar un producto padre.
@@ -38,7 +39,7 @@ import {
 const UMBRAL_SEGUNDO_PLANO = 20;
 
 export const PropagateChangesModal = ({
-  changedAttributes = [],
+  changedAttributes: cambiosRecibidos = [],
   variants = [],
   groupMembers = [],
   groupCode = null,
@@ -46,6 +47,15 @@ export const PropagateChangesModal = ({
   onConfirm,
   saving = false,
 }) => {
+  /*
+    Segundo filtro, a propósito redundante: quien llama ya debería quitarlos —de
+    eso depende que el diálogo no se abra por un cambio que no propaga nada—,
+    pero ofrecer el UPC y descartarlo en el servidor es exactamente el camino
+    por el que un usuario concluye que la propagación no sirve. Vale más
+    repetirlo aquí que confiar en que ningún llamador futuro lo olvide.
+  */
+  const changedAttributes = soloPropagables(cambiosRecibidos);
+
   const [chosenAttributes, setChosenAttributes] = useState([]);
 
   /*

package/src/components/organisms/PropagateChangesModal/non-propagable.js

@@ -0,0 +1,29 @@
+/*
+  Atributos que la propagación nunca copia.
+
+  UPC y SKU son la IDENTIDAD del producto, y una variante existe precisamente
+  porque la suya es distinta: el acuerdo lo dice literal —"cambian UPC/color/
+  talla"—. Bajarlos del padre dejaría dos productos con el mismo código de
+  barras, que es lo contrario de una variante.
+
+  El servidor ya los descarta y esa es la defensa de verdad: la exclusión vive
+  allá, no aquí, y aunque esta pantalla los mandara no se copiarían. Lo de este
+  archivo es otra cosa —que el diálogo no los OFREZCA—, porque ofrecer una
+  opción que se descarta en silencio es peor que no ofrecerla: el usuario elige
+  el UPC, guarda, no ve error, y concluye que la propagación está rota.
+
+  Los ids son los mismos que `variants/utils/constants.js` en el backend. Están
+  duplicados porque no hay un contrato compartido entre repos; si allá cambian,
+  aquí hay que cambiarlos.
+*/
+export const UPC_ATTRIBUTE_ID = 683;
+export const SKU_ATTRIBUTE_ID = 40001;
+
+export const NON_PROPAGABLE_ATTRIBUTES = [UPC_ATTRIBUTE_ID, SKU_ATTRIBUTE_ID];
+
+/**
+ * Quita de una lista de cambios los que no se pueden propagar.
+ * @param {Array<{id: number}>} cambios
+ */
+export const soloPropagables = (cambios = []) =>
+  cambios.filter((c) => !NON_PROPAGABLE_ATTRIBUTES.includes(Number(c?.id)));

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

@@ -42,6 +42,7 @@ import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
 import { UnlinkVariantModal } from "../../organisms/UnlinkVariantModal";
 import { VariantGroupModal } from "../../organisms/VariantGroupModal";
 import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
+import { soloPropagables } from "../../organisms/PropagateChangesModal/non-propagable";
 import { readPayload } from "../../organisms/LinkVariantsModal/api";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
 import { VersionSelector } from "../../organisms/VersionSelector";
@@ -712,7 +713,7 @@ const ProviderProductEditionView = ({
     const retailerId = state.active_retailer?.id_retailer;
     const inputs = state.services?.datasheets?.inputs ?? {};
 
-    return (state.updated_datasheets_inputs ?? []).map((item) => {
+    const cambios = (state.updated_datasheets_inputs ?? []).map((item) => {
       const input = inputs[`${item.attributeId}_${retailerId}`];
       return {
         id: Number(item.attributeId),
@@ -720,6 +721,14 @@ const ProviderProductEditionView = ({
         value: item.value,
       };
     });
+
+    /*
+      UPC y SKU se quitan aquí y no dentro del diálogo porque esta lista también
+      decide SI el diálogo se abre. Editar solo el UPC no tiene nada que
+      propagar, así que preguntarlo sería pedirle al usuario una decisión sobre
+      un conjunto vacío.
+    */
+    return soloPropagables(cambios);
   };
 
   const handleOnClickSave = () => {