contentoh-components-library 21.6.58 → 21.6.60

package/src/components/pages/CreatorsProductEdition/sections/ImageGallery.jsx

@@ -0,0 +1,269 @@
+import { useEffect, useState } from "react";
+import {
+  Box,
+  ButtonBase,
+  Dialog,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { FreeMode, Mousewheel } from "swiper";
+import "swiper/swiper.min.css";
+
+import acceptIcon from "../../../../assets/images/generalButton/acceptIcon.svg";
+import rejectIcon from "../../../../assets/images/generalButton/rejectIcon.svg";
+import nullIcon from "../../../../assets/images/generalButton/nullIcon.svg";
+
+import { ProductMedia } from "./ProductMedia";
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Galería de imágenes en grande.
+
+  Reemplaza a `organisms/ProductImageModal` con los mismos props y hecho con el
+  Dialog de MUI. El original ponía la imagen y un panel de 375px mínimo lado a
+  lado, así que en celular no cabía. Aquí:
+    - en desktop, imagen a la izquierda y datos + miniaturas a la derecha;
+    - en celular, pantalla completa: imagen arriba y datos debajo.
+  Se navega con las flechas del teclado o con los botones sobre la imagen.
+
+  La imagen grande es la original de S3 (`srcDB`), como en el original; las
+  miniaturas usan la versión reducida (`src`). Una imagen recién agregada aún
+  no tiene `srcDB`, así que se usa su `src` local.
+*/
+
+const bucketUrl = (image) =>
+  image?.srcDB
+    ? `https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${image.srcDB}`
+    : image?.src;
+
+const VALIDATION_ICONS = { approve: acceptIcon, reject: rejectIcon };
+
+const DataRow = ({ label, value }) => (
+  <Stack direction="row" justifyContent="space-between" gap={2} sx={{ py: "3px" }}>
+    <Typography sx={{ fontFamily: FONTS.AvenirNext, fontSize: 12, color: COLORS.s3 }}>{label}</Typography>
+    <Typography
+      sx={{ fontFamily: FONTS.AvenirNext, fontSize: 12, color: COLORS.white, textAlign: "right", overflowWrap: "anywhere" }}
+    >
+      {value || "-"}
+    </Typography>
+  </Stack>
+);
+
+const arrowSx = {
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  bgcolor: "rgba(40, 31, 51, 0.55)",
+  color: COLORS.white,
+  "&:hover": { bgcolor: "rgba(40, 31, 51, 0.8)" },
+};
+
+export const ImageGallery = ({
+  open = true,
+  images = {},
+  initialIndex = 0,
+  setShowModal,
+  sendToFacilitator,
+  approveRejectButtons = false,
+}) => {
+  const values = images?.values ?? [];
+  const [index, setIndex] = useState(initialIndex);
+  const [validation, setValidation] = useState(null);
+  const [menuAnchor, setMenuAnchor] = useState(null);
+  const isPhone = useMediaQuery("(max-width:599.95px)");
+
+  useEffect(() => {
+    if (open) setIndex(Math.min(initialIndex, Math.max(values.length - 1, 0)));
+  }, [open, initialIndex]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const image = values[index];
+  const hasMany = values.length > 1;
+  const go = (step) => setIndex((i) => (i + step + values.length) % values.length);
+  const close = () => setShowModal(false);
+
+  const onKeyDown = (e) => {
+    if (!hasMany) return;
+    if (e.key === "ArrowRight") go(1);
+    if (e.key === "ArrowLeft") go(-1);
+  };
+
+  const validate = (kind) => {
+    setMenuAnchor(null);
+    setValidation(kind);
+    sendToFacilitator && sendToFacilitator(kind === "approve" ? "A" : "R");
+  };
+
+  const shotName = images?.inputs?.find((f) => f.id === +image?.image_id)?.name;
+  const size = image?.width && image?.height ? `${image.width}x${image.height}px` : null;
+
+  return (
+    <Dialog
+      open={open}
+      onClose={close}
+      onKeyDown={onKeyDown}
+      fullScreen={isPhone}
+      maxWidth={false}
+      PaperProps={{
+        sx: {
+          m: { sm: 2 },
+          width: { sm: "min(1200px, calc(100% - 32px))" },
+          height: { sm: "min(760px, calc(100% - 32px))" },
+          maxHeight: "none",
+          borderRadius: { xs: 0, sm: "4px" },
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: { xs: "column", sm: "row" },
+          bgcolor: COLORS.deep_gray,
+        },
+      }}
+    >
+      {/* Imagen */}
+      <Box
+        sx={{
+          position: "relative",
+          flex: { xs: "0 0 auto", sm: "1 1 auto" },
+          height: { xs: "min(60vh, 100vw)", sm: "auto" },
+          minWidth: 0,
+          bgcolor: COLORS.white,
+        }}
+      >
+        {image ? (
+          <ProductMedia key={index} src={bucketUrl(image)} ext={image.ext} alt={image.name} />
+        ) : (
+          <Stack alignItems="center" justifyContent="center" sx={{ height: "100%" }}>
+            <Typography sx={{ color: COLORS.s4 }}>Sin imágenes</Typography>
+          </Stack>
+        )}
+        {hasMany && (
+          <>
+            <IconButton aria-label="Imagen anterior" onClick={() => go(-1)} sx={{ ...arrowSx, left: 8 }}>
+              <ChevronLeftIcon />
+            </IconButton>
+            <IconButton aria-label="Imagen siguiente" onClick={() => go(1)} sx={{ ...arrowSx, right: 8 }}>
+              <ChevronRightIcon />
+            </IconButton>
+          </>
+        )}
+      </Box>
+
+      {/* Datos y miniaturas */}
+      <Stack
+        sx={{
+          flex: { xs: "1 1 auto", sm: "0 0 375px" },
+          minHeight: 0,
+          p: "15px",
+          gap: 2,
+          overflowY: "auto",
+          color: COLORS.white,
+        }}
+      >
+        <Stack direction="row" alignItems="center" gap={1}>
+          <Typography
+            title={image?.name}
+            sx={{
+              flex: 1,
+              minWidth: 0,
+              fontFamily: FONTS.Raleway,
+              fontSize: 14,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {image?.name || "-"}
+          </Typography>
+          {hasMany && (
+            <Typography sx={{ fontFamily: FONTS.AvenirNext, fontSize: 12, color: COLORS.s3 }}>
+              {index + 1}/{values.length}
+            </Typography>
+          )}
+          {approveRejectButtons && (
+            <>
+              <Tooltip title="Validar" arrow>
+                <IconButton
+                  aria-label="Validar"
+                  onClick={(e) => setMenuAnchor(e.currentTarget)}
+                  sx={{ width: 30, height: 30, p: 0, border: `1px solid ${COLORS.s2}`, borderRadius: "50%" }}
+                >
+                  <Box component="img" src={VALIDATION_ICONS[validation] ?? nullIcon} alt="" sx={{ width: 16 }} />
+                </IconButton>
+              </Tooltip>
+              <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={() => setMenuAnchor(null)}>
+                <MenuItem onClick={() => validate("approve")}>
+                  <ListItemIcon>
+                    <Box component="img" src={acceptIcon} alt="" sx={{ width: 16 }} />
+                  </ListItemIcon>
+                  <ListItemText>Validado</ListItemText>
+                </MenuItem>
+                <MenuItem onClick={() => validate("reject")}>
+                  <ListItemIcon>
+                    <Box component="img" src={rejectIcon} alt="" sx={{ width: 16 }} />
+                  </ListItemIcon>
+                  <ListItemText>Rechazado</ListItemText>
+                </MenuItem>
+              </Menu>
+            </>
+          )}
+          <IconButton
+            aria-label="Cerrar"
+            onClick={close}
+            sx={{ width: 30, height: 30, color: COLORS.white, border: `1px solid ${COLORS.s2}`, borderRadius: "3px" }}
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Stack>
+
+        <Box sx={{ borderTop: `1px solid ${COLORS.s4}`, pt: 1 }}>
+          <DataRow label="Tipo de toma" value={shotName} />
+          <DataRow label="Formato" value={image?.ext} />
+          <DataRow label="Tamaño de imagen" value={size} />
+        </Box>
+
+        {hasMany && (
+          <Box sx={{ mt: { sm: "auto" } }}>
+            <Swiper
+              modules={[FreeMode, Mousewheel]}
+              slidesPerView="auto"
+              spaceBetween={6}
+              freeMode
+              mousewheel={{ forceToAxis: true }}
+              style={{ width: "100%" }}
+            >
+              {values.map((item, i) => (
+                <SwiperSlide key={`${i}-${item?.name}`} style={{ width: 85 }}>
+                  <ButtonBase
+                    aria-label={`Ver imagen ${i + 1}`}
+                    aria-pressed={i === index}
+                    onClick={() => setIndex(i)}
+                    sx={{
+                      width: 85,
+                      height: 55,
+                      borderRadius: "3px",
+                      overflow: "hidden",
+                      bgcolor: COLORS.white,
+                      outline: i === index ? `2px solid ${COLORS.magenta_s2}` : "none",
+                      outlineOffset: -2,
+                    }}
+                  >
+                    <ProductMedia src={item.src} ext={item.ext} alt={item.altText} thumbnail />
+                  </ButtonBase>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </Box>
+        )}
+      </Stack>
+    </Dialog>
+  );
+};

package/src/components/pages/CreatorsProductEdition/sections/ImagePanel.jsx

@@ -0,0 +1,332 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Box,
+  ButtonBase,
+  IconButton,
+  InputBase,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { FreeMode, Keyboard, Mousewheel } from "swiper";
+import "swiper/swiper.min.css";
+
+import openModalIcon from "../../../../assets/images/generalButton/openModal.svg";
+
+import { ProductMedia } from "./ProductMedia";
+import { ServiceActions } from "./ServiceActions";
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Panel de imagen: la imagen activa, las miniaturas y los datos de la imagen.
+
+  Reemplaza a `organisms/ImagePreviewer` (EditionActiveImage + ImageSelector) y a
+  `organisms/ImageDataTable` (TableHeader + filas), con los mismos props, hecho
+  con MUI y Swiper. Se estira al ancho de su columna en vez de medir 340px fijos:
+  en desktop ocupa el panel izquierdo y en tablet/celular va arriba del contenido.
+*/
+
+// --- Vista previa ----------------------------------------------------------
+
+const Preview = ({ imagesArray, activeImage, setActiveImage, setShowModal, currentIndex }) => {
+  const images = imagesArray?.values ?? [];
+
+  return (
+    <Box>
+      <Box
+        sx={{
+          position: "relative",
+          width: "100%",
+          // Misma proporción que el visor original (340 x 295).
+          aspectRatio: "340 / 295",
+          bgcolor: COLORS.white,
+        }}
+      >
+        <ProductMedia src={activeImage?.src} ext={activeImage?.ext} alt={activeImage?.name} />
+        <Tooltip title="Ver en grande" arrow>
+          <IconButton
+            aria-label="Ver en grande"
+            onClick={() => setShowModal(true)}
+            sx={{
+              position: "absolute",
+              right: 4,
+              bottom: 4,
+              width: 30,
+              height: 30,
+              p: 0,
+              backgroundImage: `url(${openModalIcon})`,
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "center",
+            }}
+          />
+        </Tooltip>
+      </Box>
+
+      {images.length > 0 && (
+        <Box sx={{ mt: 1 }}>
+          <Swiper
+            modules={[FreeMode, Mousewheel, Keyboard]}
+            slidesPerView="auto"
+            spaceBetween={4}
+            freeMode
+            mousewheel={{ forceToAxis: true }}
+            keyboard={{ enabled: true }}
+            style={{ width: "100%" }}
+          >
+            {images.map((image, index) => {
+              const selected = index === currentIndex;
+              return (
+                <SwiperSlide key={`${index}-${image?.name}`} style={{ width: 85 }}>
+                  <ButtonBase
+                    aria-label={`Ver imagen ${index + 1}`}
+                    aria-pressed={selected}
+                    onClick={() => setActiveImage(index)}
+                    sx={{
+                      width: 85,
+                      height: 55,
+                      borderRadius: "3px",
+                      overflow: "hidden",
+                      outline: selected ? `2px solid ${COLORS.magenta_s2}` : "none",
+                      outlineOffset: -2,
+                      bgcolor: COLORS.white,
+                    }}
+                  >
+                    <ProductMedia src={image.src} ext={image.ext} alt={image.altText} thumbnail />
+                  </ButtonBase>
+                </SwiperSlide>
+              );
+            })}
+          </Swiper>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+// --- Datos de la imagen ----------------------------------------------------
+
+const labelSx = {
+  fontFamily: FONTS.AvenirNext,
+  fontSize: 11,
+  lineHeight: "18px",
+  color: COLORS.s4,
+};
+
+const DataRow = ({ label, children }) => (
+  <TableRow sx={{ "& td, & th": { border: 0, py: "2px", px: 0 } }}>
+    <TableCell component="th" scope="row" sx={labelSx}>
+      {label}
+    </TableCell>
+    <TableCell align="right" sx={{ ...labelSx, pl: 1 }}>
+      {children}
+    </TableCell>
+  </TableRow>
+);
+
+const GrayValue = ({ children }) => (
+  <Box
+    component="span"
+    sx={{
+      display: "inline-block",
+      maxWidth: "100%",
+      px: "3px",
+      py: "1px",
+      borderRadius: "3px",
+      bgcolor: COLORS.s2,
+      color: COLORS.s5,
+      fontFamily: FONTS.AvenirNext,
+      fontSize: 11,
+      lineHeight: "19px",
+      overflowWrap: "anywhere",
+    }}
+  >
+    {children}
+  </Box>
+);
+
+/**
+ * Valor que se edita con un clic, como `atoms/LabelToInput`: se muestra como
+ * etiqueta y al hacer clic se vuelve campo de texto; al salir, vuelve a ser
+ * etiqueta. Cada cambio se avisa con el mismo payload que el original.
+ */
+const EditableValue = ({ defaultValue, onChange }) => {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(defaultValue === "" ? "-" : defaultValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => setValue(defaultValue === "" ? "-" : defaultValue), [defaultValue]);
+  useEffect(() => {
+    if (editing) inputRef.current?.focus();
+  }, [editing]);
+
+  if (!editing) {
+    return (
+      <ButtonBase
+        onClick={() => setEditing(true)}
+        aria-label="Editar valor"
+        sx={{ borderRadius: "3px", justifyContent: "flex-end", maxWidth: "100%" }}
+      >
+        <GrayValue>{value ?? "-"}</GrayValue>
+      </ButtonBase>
+    );
+  }
+
+  return (
+    <InputBase
+      inputRef={inputRef}
+      value={value ?? ""}
+      onChange={(e) => {
+        setValue(e.target.value);
+        onChange(e);
+      }}
+      onBlur={() => setEditing(false)}
+      onKeyDown={(e) => e.key === "Enter" && setEditing(false)}
+      sx={{
+        width: 120,
+        maxWidth: "100%",
+        fontFamily: FONTS.AvenirNext,
+        fontSize: 12,
+        border: `1px solid ${COLORS.s3}`,
+        borderRadius: "3px",
+        px: 0.5,
+      }}
+    />
+  );
+};
+
+const ImageData = ({
+  activeImage,
+  lists,
+  retailerSelected,
+  setImages,
+  assignationsImages,
+  imagesStatus,
+  setAssignation,
+  isRetailer,
+  onClickSave,
+  showSaveButton,
+  version,
+  setShowVersionSelector,
+  shotThd,
+}) => {
+  const shotName = lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name || "-";
+  const thdShot =
+    lists?.imageShotType?.find((f) => f.id === +activeImage?.image_shot_type)?.type_shot || "-";
+  const size =
+    activeImage?.width && activeImage.height ? `${activeImage.width}x${activeImage.height}px` : "-";
+
+  return (
+    <Paper
+      variant="outlined"
+      sx={{ mt: { xs: 2, sm: 0, md: 2 }, p: "10px", borderColor: COLORS.s2, borderRadius: "3px", minWidth: 0 }}
+    >
+      <Stack
+        direction="row"
+        alignItems="center"
+        flexWrap="wrap"
+        gap={1}
+        sx={{ pb: "5px", borderBottom: `1px solid ${COLORS.s2}` }}
+      >
+        <Typography
+          title={activeImage?.name || "-"}
+          sx={{
+            fontFamily: FONTS.Raleway,
+            fontSize: 14,
+            lineHeight: "23px",
+            color: COLORS.s5,
+            flex: "1 1 90px",
+            minWidth: 0,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {activeImage?.name || "-"}
+        </Typography>
+        {/* Igual que en la vista original: aquí no hay panel de asignación
+            (canAssign no se pasa) ni botones de imágenes. */}
+        <ServiceActions
+          status={imagesStatus}
+          assig={assignationsImages}
+          setAssignation={setAssignation}
+          isRetailer={isRetailer}
+          onClickSave={onClickSave}
+          showSaveButton={showSaveButton}
+          version={version}
+          setShowVersionSelector={setShowVersionSelector}
+        />
+      </Stack>
+
+      <Table size="small" sx={{ mt: "4px", tableLayout: "fixed" }}>
+        <TableBody>
+          <DataRow label="Tipo de toma">
+            <GrayValue>{shotName}</GrayValue>
+          </DataRow>
+          {shotThd && (
+            <DataRow label="Tipo de imagen THD">
+              <GrayValue>{thdShot}</GrayValue>
+            </DataRow>
+          )}
+          <DataRow label="Formato">{activeImage?.ext || "-"}</DataRow>
+          <DataRow label="Tamaño de imagen">{size}</DataRow>
+          {retailerSelected &&
+            lists?.attrForImgs?.general?.map((attr, index) => (
+              <DataRow key={`row-${index}-${attr?.name}`} label={attr?.name || "-"}>
+                <EditableValue
+                  defaultValue={attr?.value}
+                  onChange={(e) =>
+                    setImages({
+                      action: "changeAttrValue",
+                      value: e.target.value || "-",
+                      id: attr.id,
+                    })
+                  }
+                />
+              </DataRow>
+            ))}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+};
+
+// --- Panel completo --------------------------------------------------------
+
+export const ImagePanel = ({
+  // vista previa
+  imagesArray,
+  activeImage,
+  currentIndex,
+  setActiveImage,
+  setShowModal,
+  // datos (mismos props que ImageDataTable)
+  ...dataProps
+}) => (
+  // En tablet la imagen y sus datos van lado a lado: apilados, la imagen
+  // ocuparía todo el ancho y empujaría el contenido muy abajo.
+  <Box
+    sx={{
+      width: "100%",
+      minWidth: 0,
+      display: "grid",
+      gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "repeat(2, minmax(0, 1fr))", md: "minmax(0, 1fr)" },
+      columnGap: 2,
+      alignItems: "start",
+    }}
+  >
+    <Preview
+      imagesArray={imagesArray}
+      activeImage={activeImage}
+      currentIndex={currentIndex}
+      setActiveImage={setActiveImage}
+      setShowModal={setShowModal}
+    />
+    <ImageData activeImage={activeImage} {...dataProps} />
+  </Box>
+);