contentoh-components-library 21.6.61 → 21.6.63

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

@@ -1,123 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,342 +0,0 @@
-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>
-);