contentoh-components-library 21.6.59 → 21.6.61

package/src/components/pages/ProductEdition/sections/CatalogServicePanel.jsx

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { Alert, Box, CircularProgress, MenuItem, Select, Stack, Typography } from "@mui/material";
+
+import { StatusChip } from "../../CreatorsProductEdition/sections/StatusChip";
+import { COLORS, FONTS } from "../../CreatorsProductEdition/sections/tokens";
+
+/*
+  Panel de un servicio del catálogo en la edición (los que no tienen editor):
+  su estatus en cada cadena y, si la persona puede, el selector para cambiarlo.
+
+  Sale de GET /product-services (`service.api`):
+    - Flujo simple (casilla, avance): se elige el estatus de `status_options`
+      con PUT /product-services/set-status, por cadena.
+    - Flujo completo: solo se ve; lo moverá el motor de estatus.
+    - De registro: solo se ve.
+  Los servicios de los uno por producto aparecen como «Producto» (cadena 0).
+*/
+
+const FLOW_NOTE = {
+  workflow:
+    "Este servicio sigue el flujo de aprobación (especialista, coordinador y auditor). " +
+    "Su estatus todavía no se cambia desde aquí: lo moverá el motor de estatus.",
+  flag: "Este servicio solo se registra en el producto: no cambia de estatus.",
+};
+
+const chipProps = (status) =>
+  status
+    ? { status: status.status_name, label: status.display_name ?? status.status_name, color: status.color ?? undefined }
+    : { status: null, label: "Sin estatus" };
+
+export const CatalogServicePanel = ({ service, onSetStatus }) => {
+  const api = service?.api;
+  const [savingRetailer, setSavingRetailer] = useState(null);
+  const [error, setError] = useState(null);
+  if (!api) return null;
+
+  const flowType = api.status_flow?.flow_type ?? "workflow";
+  const canSet = Boolean(api.actions?.set_status) && flowType === "simple";
+  const options = api.status_options ?? [];
+
+  const change = async (retailerId, statusName) => {
+    setError(null);
+    setSavingRetailer(retailerId);
+    try {
+      await onSetStatus(statusName, [retailerId]);
+    } catch (err) {
+      setError(err?.message ?? "No se pudo cambiar el estatus.");
+    } finally {
+      setSavingRetailer(null);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        p: 2,
+        borderRadius: "10px",
+        border: `1px solid ${COLORS.s2}`,
+        bgcolor: COLORS.white,
+        maxWidth: 720,
+      }}
+    >
+      <Typography sx={{ fontFamily: FONTS.Lato, fontSize: 14, fontWeight: 700, color: COLORS.s5, mb: 0.5 }}>
+        Estatus {api.per_retailer ? "por cadena" : "del producto"}
+      </Typography>
+      {FLOW_NOTE[flowType] && (
+        <Typography sx={{ fontFamily: FONTS.Lato, fontSize: 13, color: COLORS.s4, mb: 1.5 }}>
+          {FLOW_NOTE[flowType]}
+        </Typography>
+      )}
+
+      <Stack spacing={1}>
+        {(api.retailers ?? []).map((retailer) => (
+          <Stack
+            key={retailer.id_retailer}
+            direction="row"
+            alignItems="center"
+            spacing={1.5}
+            sx={{ py: 0.75, borderTop: `1px solid ${COLORS.s2}`, "&:first-of-type": { borderTop: "none" } }}
+          >
+            <Typography sx={{ fontFamily: FONTS.Lato, fontSize: 13, color: COLORS.s5, flex: "1 1 auto", minWidth: 0 }} noWrap>
+              {api.per_retailer ? retailer.retailer_name ?? `Cadena ${retailer.id_retailer}` : "Producto"}
+            </Typography>
+            {canSet ? (
+              <Select
+                size="small"
+                value={retailer.status?.status_name ?? ""}
+                disabled={savingRetailer !== null}
+                onChange={(event) => change(retailer.id_retailer, event.target.value)}
+                renderValue={(value) => {
+                  const option = options.find((item) => item.status_name === value) ?? retailer.status;
+                  return <StatusChip {...chipProps(option)} oval />;
+                }}
+                sx={{ minWidth: 170, fontFamily: FONTS.Lato, fontSize: 13 }}
+                inputProps={{ "aria-label": `Estatus de ${service.display_name}` }}
+              >
+                {options.map((option) => (
+                  <MenuItem key={option.status_name} value={option.status_name}>
+                    <StatusChip {...chipProps(option)} oval />
+                  </MenuItem>
+                ))}
+              </Select>
+            ) : (
+              <StatusChip {...chipProps(retailer.status)} oval />
+            )}
+            {savingRetailer === retailer.id_retailer && <CircularProgress size={16} sx={{ color: COLORS.magenta_s2 }} />}
+          </Stack>
+        ))}
+      </Stack>
+
+      {flowType === "simple" && !canSet && (
+        <Typography sx={{ fontFamily: FONTS.Lato, fontSize: 12, color: COLORS.s4, mt: 1.5 }}>
+          Lo cambia quien está asignado al servicio, un administrador o un coordinador.
+        </Typography>
+      )}
+      {error && (
+        <Alert severity="error" sx={{ mt: 1.5, fontFamily: FONTS.Lato, fontSize: 13 }} onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  );
+};

package/src/components/pages/ProductEdition/sections/EditionTopBar.jsx

@@ -0,0 +1,134 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Box, IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+import { Chat } from "../../../organisms/Chat";
+import auditIcon from "../../../../assets/images/generalButton/Icono AB.svg";
+import { COLORS, FONTS } from "../../CreatorsProductEdition/sections/tokens";
+
+/*
+  Barra superior de la edición. Reemplaza a `molecules/HeaderTop` con lo mismo
+  (título, chat, comparar versión auditable y cerrar), pero:
+    - el título es más chico y la barra tiene aire y una línea abajo, para que
+      no quede encimado sobre la imagen y el nombre del producto;
+    - el botón de cerrar queda dentro del margen y con borde, para que siempre
+      se vea (antes iba pegado al borde derecho).
+
+  Reporta su alto con `setHeaderTop`, como HeaderTop: la pantalla lo resta para
+  calcular el alto de las columnas. Incluye el margen de abajo.
+*/
+
+const GAP_BELOW = 12;
+
+const buttonSx = {
+  width: 32,
+  height: 32,
+  border: `1px solid ${COLORS.s3}`,
+  bgcolor: COLORS.white,
+  "&:hover": { bgcolor: COLORS.s2, borderColor: COLORS.s4 },
+};
+
+export const EditionTopBar = ({
+  setHeaderTop,
+  withChat,
+  chatType,
+  productSelected,
+  token,
+  auditableVersion,
+  setCompare,
+  isAuditor,
+  activeRetailer,
+  onClose = () => {
+    window.location.href = "/products";
+  },
+}) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (ref.current && setHeaderTop) setHeaderTop(ref.current.offsetHeight + GAP_BELOW);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Mismo chat que HeaderTop, según `chatType`.
+  const chat = useMemo(() => {
+    if (!withChat || !chatType || !productSelected || !token) return null;
+    if (chatType === "product_status") {
+      if (!activeRetailer?.id) return null;
+      return (
+        <Chat
+          chatType="product_status"
+          chatContainerType="popUp"
+          chatData={{
+            id: productSelected?.article?.id_article || productSelected?.id_article,
+            version: productSelected?.version,
+            retailerId: activeRetailer.id,
+            status: productSelected?.status,
+            userToken: token,
+          }}
+          size={18}
+          activeRetailer={activeRetailer}
+        />
+      );
+    }
+    return (
+      <Chat
+        chatType="merchant_product"
+        chatContainerType="popUp"
+        chatData={{ userToken: token, id: productSelected.id_article, version: productSelected.version }}
+        size={18}
+        activeRetailer={activeRetailer}
+      />
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [withChat, chatType, productSelected?.id_article, productSelected?.version, token, activeRetailer?.id]);
+
+  return (
+    <Box
+      ref={ref}
+      component="header"
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        px: { xs: 1.5, sm: 2 },
+        py: 1,
+        mb: `${GAP_BELOW}px`,
+        borderBottom: `1px solid ${COLORS.s2}`,
+        minWidth: 0,
+      }}
+    >
+      <Typography
+        component="h1"
+        sx={{
+          flex: 1,
+          minWidth: 0,
+          fontFamily: FONTS.Raleway_600,
+          fontSize: 16,
+          lineHeight: "24px",
+          color: COLORS.s5,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        Edición de producto
+      </Typography>
+
+      <Stack direction="row" alignItems="center" spacing={1} sx={{ flexShrink: 0 }}>
+        {chat}
+        {isAuditor && auditableVersion && (
+          <Tooltip title="Comparar con la versión auditable" arrow>
+            <IconButton aria-label="Comparar con la versión auditable" onClick={() => setCompare((value) => !value)} sx={buttonSx}>
+              <img src={auditIcon} alt="" width={16} height={16} />
+            </IconButton>
+          </Tooltip>
+        )}
+        <Tooltip title="Cerrar" arrow>
+          <IconButton aria-label="Cerrar la edición" onClick={onClose} sx={buttonSx}>
+            <CloseIcon sx={{ fontSize: 18, color: COLORS.s5 }} />
+          </IconButton>
+        </Tooltip>
+      </Stack>
+    </Box>
+  );
+};

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

@@ -0,0 +1,342 @@
+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 "../../CreatorsProductEdition/sections/ProductMedia";
+import { StatusChip } from "../../CreatorsProductEdition/sections/StatusChip";
+import { COLORS, FONTS } from "../../CreatorsProductEdition/sections/tokens";
+import { ServiceTools } from "./ServiceTools";
+
+/*
+  Panel de imagen de ProductEdition: la imagen activa, las miniaturas y los
+  datos de la imagen.
+
+  Copia del de CreatorsProductEdition con el diseño de la propuesta de
+  navegación por servicios: la imagen en una tarjeta con fondo claro y bordes
+  redondeados, miniaturas cuadradas con borde rosa en la activa, y la cabecera
+  de los datos sin el botón de ayuda (estatus + versión + guardar).
+
+  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",
+          p: 1.5,
+          boxSizing: "border-box",
+          borderRadius: "10px",
+          border: `1px solid ${COLORS.s2}`,
+          background: `linear-gradient(135deg, ${COLORS.white}, ${COLORS.s1})`,
+          overflow: "hidden",
+        }}
+      >
+        <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: 8,
+              bottom: 8,
+              width: 32,
+              height: 32,
+              p: 0,
+              bgcolor: COLORS.white,
+              border: `1px solid ${COLORS.s2}`,
+              backgroundImage: `url(${openModalIcon})`,
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "center",
+              backgroundSize: 16,
+              "&:hover": { bgcolor: COLORS.s2 },
+            }}
+          />
+        </Tooltip>
+      </Box>
+
+      {images.length > 0 && (
+        <Box sx={{ mt: 1.25 }}>
+          <Swiper
+            modules={[FreeMode, Mousewheel, Keyboard]}
+            slidesPerView="auto"
+            spaceBetween={8}
+            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: 64 }}>
+                  <ButtonBase
+                    aria-label={`Ver imagen ${index + 1}`}
+                    aria-pressed={selected}
+                    onClick={() => setActiveImage(index)}
+                    sx={{
+                      width: 64,
+                      height: 64,
+                      p: "4px",
+                      boxSizing: "border-box",
+                      borderRadius: "8px",
+                      overflow: "hidden",
+                      border: `${selected ? 2 : 1}px solid ${selected ? COLORS.magenta_s2 : COLORS.s2}`,
+                      bgcolor: COLORS.white,
+                      "&:hover": { borderColor: selected ? COLORS.magenta_s2 : COLORS.s3 },
+                    }}
+                  >
+                    <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,
+  imagesStatus,
+  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: 1.5, borderColor: COLORS.s2, borderRadius: "10px", 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>
+        {imagesStatus && imagesStatus !== "-" && <StatusChip status={imagesStatus} oval />}
+        <ServiceTools
+          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>
+);