contentoh-components-library 21.6.50 → 21.6.52

package/package.json

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

package/src/components/atoms/IconFile/index.js

@@ -11,8 +11,6 @@ import {
   faFileAudio as IconFileAudio,
   faFileLines as IconFileDefault,
   faFileVideo as IconFileVideo,
-  faSwatchbook as IconFileDesign,
-  faFilm as IconFileMotion,
 } from "@fortawesome/free-solid-svg-icons";
 import React, { useRef } from "react";
 import { CustomIcon } from "../CustomIcon";
@@ -43,30 +41,8 @@ export const IconFile = (props) => {
     // file csv
     csv: { icon: IconFileCsv, type: "csv" },
     // file image
+    svg: { icon: IconFileImg, type: "image" },
     gif: { icon: IconFileImg, type: "image" },
-    jpg: { icon: IconFileImg, type: "image" },
-    jpeg: { icon: IconFileImg, type: "image" },
-    png: { icon: IconFileImg, type: "image" },
-    webp: { icon: IconFileImg, type: "image" },
-
-    // archivos de diseño editables: no se pueden previsualizar en el navegador,
-    // así que el icono es lo único que distingue uno de otro en la bandeja.
-    psd: { icon: IconFileDesign, type: "design" },
-    psb: { icon: IconFileDesign, type: "design" },
-    ai: { icon: IconFileDesign, type: "design" },
-    eps: { icon: IconFileDesign, type: "design" },
-    indd: { icon: IconFileDesign, type: "design" },
-    idml: { icon: IconFileDesign, type: "design" },
-    sketch: { icon: IconFileDesign, type: "design" },
-    fig: { icon: IconFileDesign, type: "design" },
-    xd: { icon: IconFileDesign, type: "design" },
-    afphoto: { icon: IconFileDesign, type: "design" },
-    afdesign: { icon: IconFileDesign, type: "design" },
-    svg: { icon: IconFileDesign, type: "design" },
-
-    // proyectos de animación y edición de video
-    aep: { icon: IconFileMotion, type: "motion" },
-    prproj: { icon: IconFileMotion, type: "motion" },
     // file pdf
     pdf: { icon: IconFilePdf, type: "pdf" },
     // file power point
@@ -84,7 +60,6 @@ export const IconFile = (props) => {
     rar: { icon: IconFileZip, type: "zip" },
     zip: { icon: IconFileZip, type: "zip" },
     tar: { icon: IconFileZip, type: "zip" },
-    "7z": { icon: IconFileZip, type: "zip" },
 
     // file code
     xml: { icon: IconFileCode, type: "code" },
@@ -105,8 +80,6 @@ export const IconFile = (props) => {
     // file video
     avi: { icon: IconFileVideo, type: "video" },
     mp4: { icon: IconFileVideo, type: "video" },
-    mov: { icon: IconFileVideo, type: "video" },
-    webm: { icon: IconFileVideo, type: "video" },
     mpeg: { icon: IconFileVideo, type: "video" },
     mpg: { icon: IconFileVideo, type: "video" },
     wmv: { icon: IconFileVideo, type: "video" },

package/src/components/atoms/IconFile/styles.js

@@ -52,14 +52,6 @@ export const Container = styled.div`
     color: #1c778e;
     border-color: #1c778e;
   }
-  &.icon-design .icon {
-    color: #2a5cb8;
-    border-color: #2a5cb8;
-  }
-  &.icon-motion .icon {
-    color: #6d3fc0;
-    border-color: #6d3fc0;
-  }
   &.icon-video .icon {
     color: #a15bb1;
     border-color: #a15bb1;

package/src/components/atoms/ProductImage/ProductImage.stories.js

@@ -26,41 +26,3 @@ ProductImageDefault.args = {
   imageType: "main-image",
   altText: "default image",
 };
-
-/*
-  Las escalas de video, lado a lado. Las cuatro primeras son miniaturas: sin
-  controles, con su duración y un botón de play, y todo el recuadro clicable.
-  Las dos últimas son reproductores de verdad.
-*/
-const VIDEO =
-  "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
-
-const Escala = ({ imageType }) => (
-  <figure style={{ margin: 0 }}>
-    <ProductImage
-      img={VIDEO}
-      ext="mp4"
-      imageType={imageType}
-      altText="video de producto"
-      onClick={() => console.log("clic en", imageType)}
-    />
-    <figcaption style={{ fontFamily: "Lato", fontSize: 11, marginTop: 4 }}>
-      {imageType}
-    </figcaption>
-  </figure>
-);
-
-export const VideoMiniaturas = () => (
-  <div style={{ display: "flex", gap: 24, alignItems: "flex-start" }}>
-    <Escala imageType="carousel-image" />
-    <Escala imageType="catalogue-image-small-size" />
-    <Escala imageType="catalogue-modal-image" />
-    <Escala imageType="catalogue-image-big-size" />
-  </div>
-);
-
-export const VideoReproductor = () => (
-  <div style={{ display: "flex", gap: 24, alignItems: "flex-start" }}>
-    <Escala imageType="main-image" />
-  </div>
-);

package/src/components/atoms/ProductImage/index.js

@@ -1,104 +1,29 @@
-import { useState } from "react";
-import ReactImageFallback from "react-image-fallback";
-
 import { Container } from "./styles";
-import {
-  ASSET_PREVIEW,
-  formatDuration,
-  resolvePreviewKind,
-} from "../../../global-files/digital-assets/assetTypes";
+import ReactImageFallback from "react-image-fallback";
 import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
 
-/*
-  Tamaños en los que un video se muestra como miniatura y no como reproductor.
-
-  Los controles nativos del navegador necesitan alrededor de 150px de ancho
-  para ser usables; en un recuadro de 60 o de 85 se pintan encimados y no se
-  puede ni dar play. Peor aún, un <video> con controles se traga el clic, así
-  que un video en el carrusel no se podía ni seleccionar: `onClick` nunca
-  llegaba a correr.
-
-  En estos tamaños se muestra el primer fotograma con su duración y un botón de
-  play, y el recuadro completo lleva al visor grande, que es donde el video sí
-  se ve y se controla.
-*/
-const THUMBNAIL_TYPES = [
-  "carousel-image",
-  "catalogue-image-small-size",
-  "catalogue-image-big-size",
-  "catalogue-modal-image",
-];
-
-const PlayBadge = () => (
-  <span className="play-badge" aria-hidden="true">
-    <svg viewBox="0 0 24 24">
-      <circle cx="12" cy="12" r="11" />
-      <polygon points="9.5,7.5 17,12 9.5,16.5" />
-    </svg>
-  </span>
-);
-
-/**
- * Imagen —o video— de producto.
- *
- * El tipo de archivo se decide por `ext`/`mime` cuando quien llama los conoce.
- * Antes se comprobaba con `/\.mp4$/` sobre la URL, y nunca acertaba: la URL
- * guardada apunta al redimensionador de CloudFront y no conserva la extensión.
- * El regex queda solo como respaldo para los llamadores que aún mandan `img`
- * a secas.
- */
-export const ProductImage = ({ img, imageType, altText, onClick, ext, mime, poster }) => {
-  // La duración no está en la base: se toma de los metadatos, que el navegador
-  // ya descarga por el `preload="metadata"`. No cuesta una petición extra.
-  const [duration, setDuration] = useState(null);
-
-  const kind =
-    ext || mime
-      ? resolvePreviewKind({ ext, mime })
-      : /\.mp4($|[?#])/i.test(img || "")
-        ? ASSET_PREVIEW.VIDEO
-        : ASSET_PREVIEW.IMAGE;
-
-  if (kind === ASSET_PREVIEW.VIDEO) {
-    const isThumbnail = THUMBNAIL_TYPES.includes(imageType);
-
+export const ProductImage = ({ img, imageType, altText, onClick}) => {
+  // Expresión regular para validar que los últimos tres caracteres sean ".mp4"
+  const regex = /\.mp4$/;
+  if (regex.test(img)){
     return (
-      <Container
-        className={`${imageType} ${isThumbnail ? "video-thumbnail" : "video-player"}`}
-        onClick={isThumbnail ? onClick : undefined}
-      >
-        <video
-          // `#t=0.5` hace que el navegador muestre el fotograma del medio
-          // segundo en lugar de un cuadro negro, sin descargar el archivo
-          // completo.
-          src={poster ? img : `${img}#t=0.5`}
-          poster={poster || undefined}
-          controls={!isThumbnail}
-          muted={isThumbnail}
-          playsInline
-          preload="metadata"
-          onLoadedMetadata={(e) => setDuration(e.target.duration)}
+      <Container className={imageType}>
+        <video controls width="100%" height="auto">
+        <source src= {img} type="video/mp4" />
+        </video>
+      </Container>
+    );
+  }
+  else{
+    return (
+      <Container className={imageType}>
+         <ReactImageFallback
+          src={img}
+          fallbackImage={defaultProductImage}
+          alt={altText}
+          onClick={onClick}
         />
-        {isThumbnail && (
-          <>
-            <PlayBadge />
-            {duration ? (
-              <span className="video-duration">{formatDuration(duration)}</span>
-            ) : null}
-          </>
-        )}
       </Container>
     );
   }
-
-  return (
-    <Container className={imageType}>
-      <ReactImageFallback
-        src={img}
-        fallbackImage={defaultProductImage}
-        alt={altText}
-        onClick={onClick}
-      />
-    </Container>
-  );
 };

package/src/components/atoms/ProductImage/styles.js

@@ -1,92 +1,14 @@
 import styled from "styled-components";
-import { FontFamily } from "../../../global-files/variables";
 
 export const Container = styled.div`
   width: fit-content;
 
-  img,
-  video {
+  img {
     object-fit: contain;
   }
 
-  /*
-    Miniatura de video: fotograma quieto, con su duración y un botón de play.
-    El clic lo recibe el contenedor, no el <video>, para que lleve al visor
-    grande en vez de quedarse peleando con los controles.
-  */
-  &.video-thumbnail {
-    position: relative;
-    cursor: pointer;
-
-    video {
-      pointer-events: none;
-      background: #000;
-    }
-
-    .play-badge {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 32px;
-      height: 32px;
-      pointer-events: none;
-
-      svg {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-
-      circle {
-        fill: rgba(0, 0, 0, 0.55);
-      }
-
-      polygon {
-        fill: #ffffff;
-      }
-    }
-
-    &:hover .play-badge circle {
-      fill: rgba(0, 0, 0, 0.75);
-    }
-
-    .video-duration {
-      position: absolute;
-      right: 4px;
-      bottom: 4px;
-      padding: 0 4px;
-      border-radius: 3px;
-      background: rgba(0, 0, 0, 0.75);
-      color: #ffffff;
-      font-family: ${FontFamily.Lato};
-      font-size: 10px;
-      line-height: 15px;
-      pointer-events: none;
-    }
-  }
-
-  /* En 60px un badge de 32 tapa el fotograma completo. */
-  &.catalogue-image-small-size.video-thumbnail .play-badge {
-    width: 20px;
-    height: 20px;
-  }
-
-  &.carousel-image.video-thumbnail {
-    .play-badge {
-      width: 22px;
-      height: 22px;
-    }
-
-    .video-duration {
-      font-size: 9px;
-      line-height: 13px;
-    }
-  }
-
   &.carousel-image {
-    img,
-    video {
+    img {
       width: 85px;
       height: 55px;
       cursor: pointer;
@@ -98,8 +20,7 @@ export const Container = styled.div`
   }
 
   &.main-image {
-    img,
-    video {
+    img {
       width: 340px;
       height: 295px;
     }
@@ -109,16 +30,14 @@ export const Container = styled.div`
     display: flex; 
     justify-content: center; 
     align-items: center; 
-    img,
-    video {
+    img {
       width: 179px;
       height: 179px;
     }
   }
 
   &.catalogue-image-small-size {
-    img,
-    video {
+    img {
       width: 60px;
       height: 60px;
     }
@@ -128,9 +47,7 @@ export const Container = styled.div`
     flex: 1 0 50%;
     cursor: pointer;
 
-    img,
-
-    video {
+    img {
       width: 168px;
       height: 108px;
     }
@@ -143,9 +60,7 @@ export const Container = styled.div`
     justify-content: center; 
     align-items: center; 
 
-    img,
-
-    video {
+    img {
       width: 710px;
       height: 710px;
     }

package/src/components/molecules/EditionActiveImage/index.js

@@ -2,10 +2,10 @@ import { Container } from "./styles";
 import { ProductImage } from "../../atoms/ProductImage/index";
 import { Button } from "../../atoms/GeneralButton/index";
 
-export const EditionActiveImage = ({ img, altText, setShowModal, ext }) => {
+export const EditionActiveImage = ({ img, altText, setShowModal }) => {
   return (
     <Container>
-      <ProductImage img={img} imageType="main-image" altText={altText} ext={ext} />
+      <ProductImage img={img} imageType="main-image" altText={altText} />
       <Button
         buttonType="open-modal-button"
         onClick={() => setShowModal(true)}

package/src/components/molecules/GalleryElement/index.js

@@ -25,7 +25,6 @@ export const GalleryElement = ({
   auditImages,
   compare,
   updateApprovedInputsImages,
-  onSelect,
 }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [showDivStates, setShowDivStates] = useState({});
@@ -94,15 +93,7 @@ export const GalleryElement = ({
         <ProductImage
           img={compare ? auditImages?.values[number]?.src : image?.src}
           altText={image?.altText}
-          // Sin `ext`, un video se pinta como <img> rota: la URL guardada no
-          // conserva la extensión del archivo.
-          ext={compare ? auditImages?.values[number]?.ext : image?.ext}
           imageType={`catalogue-image-${gridLayout ? "big" : "small"}-size`}
-          // La miniatura de un video ya no lleva controles, así que el clic es
-          // la única forma de llegar al visor grande. Se aplica también a las
-          // imágenes: dos recuadros idénticos donde solo uno responde al clic
-          // sería peor que no responder ninguno.
-          onClick={onSelect}
         />
         <div className="information-container">
           <p>{image?.name}</p>

package/src/components/molecules/GalleryHeader/index.js

@@ -1,80 +1,28 @@
 import { Container } from "./styles";
 import { CheckBox } from "../../atoms/CheckBox";
 
-/*
-  Las columnas de la bandeja dependen de qué se está listando: un PDF no tiene
-  "tipo de toma" ni alto por ancho, y una foto no tiene "tipo de activo".
-  Estaban escritas a mano en el marcado, así que la única forma de cambiarlas
-  era duplicar el componente.
-
-  El preset `image` reproduce exactamente las columnas y clases de antes, para
-  que la bandeja de imágenes se vea idéntica sin que nadie tenga que pasar nada.
-*/
-export const GALLERY_COLUMNS = {
-  image: {
-    template: "0.1fr 1fr 1fr 1fr 1fr 1fr",
-    columns: [
-      { key: "preview", label: "Imagen", className: "image-header" },
-      { key: "name", label: "Nombre", className: "image-name" },
-      { key: "size", label: "Tamaño", className: "image-size" },
-      { key: "format", label: "Formato", className: "image-format" },
-      {
-        key: "legend",
-        label: "¿Tiene leyenda?",
-        className: "image-description",
-      },
-      { key: "shotType", label: "Tipo de toma", className: "shoot-type" },
-    ],
-  },
-  asset: {
-    template: "0.1fr 1fr 1fr 1fr 1fr",
-    columns: [
-      { key: "preview", label: "Activo", className: "asset-header" },
-      { key: "name", label: "Nombre", className: "asset-name" },
-      { key: "weight", label: "Peso", className: "asset-weight" },
-      { key: "format", label: "Formato", className: "asset-format" },
-      { key: "assetType", label: "Tipo de activo", className: "asset-type" },
-    ],
-  },
-};
-
-/**
- * Encabezado de la bandeja, con su casilla de "seleccionar todo".
- *
- * `checkAllId` e `itemSelector` se pueden cambiar porque imágenes y activos
- * conviven en la misma pestaña: si las dos listas compartieran el id de la
- * casilla global, marcar todas las imágenes marcaría también los activos.
- */
-export const GalleryHeader = ({
-  setCheckAll,
-  setSelectedImages,
-  shotThd,
-  variant = "image",
-  columns,
-  checkAllId = "check-all-images",
-  itemSelector = "[id^='gallery-element-']",
-}) => {
-  const preset = GALLERY_COLUMNS[variant] ?? GALLERY_COLUMNS.image;
-  const visibleColumns = columns ?? preset.columns;
-
+export const GalleryHeader = ({ setCheckAll, setSelectedImages, shotThd }) => {
   const checkAll = (e) => {
-    const checkboxList = document.querySelectorAll(itemSelector);
+    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
     checkboxList.forEach((chk) => (chk.checked = e.target.checked));
     setCheckAll(e.target.checked);
     if (!e.target.checked) setSelectedImages([]);
   };
-
   return (
-    <Container template={preset.template}>
+    <Container>
       <div className="checkbox">
-        <CheckBox id={checkAllId} onChange={(e) => checkAll(e)} />
+        <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
       </div>
       <div className="information">
-        {visibleColumns.map((column) => (
-          <p key={column.key} className={column.className}>
-            {column.label}
-          </p>
-        ))}
+        <p className="image-header">Imagen</p>
+        <p className="image-name">Nombre</p>
+        <p className="image-size">Tamaño</p>
+        <p className="image-format">Formato</p>
+        <p className="image-description">¿Tiene leyenda?</p>
+        <p className="shoot-type">Tipo de toma</p>
+        {/* <p className="">Tipo de imagen</p> */}
+        {/* <p className="">Tipo de empaque</p> */}
+        {/* <p className="">Estatus</p> */}
       </div>
     </Container>
   );

package/src/components/molecules/GalleryHeader/styles.js

@@ -15,8 +15,7 @@ export const Container = styled.div`
   .information{
     width: 90%;
     display: grid;
-    /* Lo define el preset de columnas; el valor por defecto es el de imágenes. */
-    grid-template-columns: ${({ template }) => template || "0.1fr 1fr 1fr 1fr 1fr 1fr"};
+    grid-template-columns: 0.1fr 1fr 1fr 1fr 1fr 1fr;
   }
     .image-header{
 

package/src/components/molecules/ImageSelector/index.js

@@ -13,7 +13,6 @@ export const ImageSelector = ({
           key={index}
           img={image.src}
           altText={image.altText}
-          ext={image.ext}
           imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
           onClick={() => setActiveImage(index)}
         />

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

@@ -13,7 +13,6 @@ 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,7 +48,6 @@ 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

@@ -40,6 +40,9 @@ const UMBRAL_SEGUNDO_PLANO = 20;
 
 export const PropagateChangesModal = ({
   changedAttributes: cambiosRecibidos = [],
+  // Qué se está propagando. El componente sirve a las dos pestañas y solo
+  // cambia cómo se nombra lo que el usuario acaba de editar.
+  kind = "datasheet",
   variants = [],
   groupMembers = [],
   groupCode = null,
@@ -56,6 +59,10 @@ export const PropagateChangesModal = ({
   */
   const changedAttributes = soloPropagables(cambiosRecibidos);
 
+  const esDescripcion = kind === "description";
+  const sustantivo = esDescripcion ? "descripción" : "atributo";
+  const plural = esDescripcion ? "descripciones" : "atributos";
+
   const [chosenAttributes, setChosenAttributes] = useState([]);
 
   /*
@@ -177,9 +184,9 @@ export const PropagateChangesModal = ({
             {" pueden recibir este cambio"}
           </h2>
           <p>
-            Cambiaste {changedAttributes.length} atributo
-            {changedAttributes.length === 1 ? "" : "s"}. Elige cuáles se copian y
-            a quiénes; el resto se guarda solo en este producto.
+            Cambiaste {changedAttributes.length}{" "}
+            {changedAttributes.length === 1 ? sustantivo : plural}. Elige cuáles
+            se copian y a quiénes; el resto se guarda solo en este producto.
           </p>
         </Header>
 

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

@@ -49,7 +49,7 @@ export const useProviderProductEdition = () => {
 export const ProviderProductEditionProvider = ({ children }) => {
   const [state, dispatch] = useReducer(productEditionReducer, initialState);
 
-  const saveDescriptions = async (token) => {
+  const saveDescriptions = async (token, propagation) => {
     if (state.updated_descriptions_inputs.length === 0) return;
 
     dispatch({ type: "SET_SAVING", payload: true });
@@ -57,6 +57,7 @@ export const ProviderProductEditionProvider = ({ children }) => {
     const dataObject = {
       articleId: state.product?.id_article,
       articleData: state.updated_descriptions_inputs,
+      ...(propagation ? { propagation } : {}),
     };
 
     // Marcar todos los items como aprobados