contentoh-components-library 21.6.57 → 21.6.59

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

@@ -0,0 +1,305 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import LocalPoliceIcon from "@mui/icons-material/LocalPolice";
+import LocalPoliceOutlinedIcon from "@mui/icons-material/LocalPoliceOutlined";
+
+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 { RetailerMenu } from "./RetailerMenu";
+import { StatusChip } from "./StatusChip";
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Cabecera del producto: nombre, estatus, completitud, fecha, datos (UPC, SKU,
+  categoría, proveedor), selector de cadena y botón de evaluación.
+
+  Reemplaza a `organisms/FullProductNameHeader` (y a sus hijos ProductNameHeader,
+  FeaturesBar, AvatarAndValidation, ValidationPanel) con los mismos props y el
+  mismo comportamiento, hecho con MUI y responsivo: en pantallas chicas las
+  filas se acomodan en varias líneas en vez de salirse.
+*/
+
+const getTime = (date) => (date ? new Date(date).toLocaleDateString() : "");
+
+const FeatureTag = ({ feature, value }) => (
+  <Box
+    component="span"
+    sx={{
+      display: "inline-flex",
+      alignItems: "baseline",
+      gap: "5px",
+      maxWidth: "100%",
+      minHeight: 26,
+      px: "5px",
+      py: "4px",
+      boxSizing: "border-box",
+      bgcolor: COLORS.s2,
+      borderRadius: "3px",
+    }}
+  >
+    <Typography
+      component="span"
+      sx={{
+        fontFamily: FONTS.Raleway_500,
+        fontSize: 14,
+        lineHeight: "18px",
+        color: COLORS.original_magenta,
+        flexShrink: 0,
+      }}
+    >
+      {feature}
+    </Typography>
+    <Typography
+      component="span"
+      sx={{
+        fontFamily: FONTS.AvenirNext,
+        fontSize: 12,
+        lineHeight: "16px",
+        letterSpacing: "-0.015em",
+        color: COLORS.color_gray,
+        minWidth: 0,
+        overflowWrap: "anywhere",
+      }}
+    >
+      {value}
+    </Typography>
+  </Box>
+);
+
+const CompletenessBadges = ({ percent }) => {
+  const rounded = Math.round(percent ?? 0);
+  const complete = rounded >= 100;
+  const showPercent = percent || percent === 0;
+
+  return (
+    <>
+      {percent ? (
+        <Tooltip
+          arrow
+          title={
+            <>
+              <b>Campos requeridos</b>
+              <br />
+              Este nuevo icono te indicará cuando completes todos los campos
+              requeridos
+            </>
+          }
+        >
+          {complete ? (
+            <LocalPoliceIcon sx={{ fontSize: 30, color: COLORS.color_pink, cursor: "pointer" }} />
+          ) : (
+            <LocalPoliceOutlinedIcon sx={{ fontSize: 30, color: COLORS.s3, cursor: "pointer" }} />
+          )}
+        </Tooltip>
+      ) : null}
+      {showPercent && (
+        <Tooltip
+          arrow
+          title={
+            <>
+              <b>Porcentaje de requeridos</b>
+              <br />
+              Este porcentaje indica la completitud de los atributos requeridos
+              para todos los servicios.
+            </>
+          }
+        >
+          <Box
+            component="span"
+            sx={{
+              px: "6px",
+              height: 27,
+              lineHeight: "27px",
+              borderRadius: "15px",
+              bgcolor: complete ? COLORS.color_pink : COLORS.s3,
+              color: COLORS.white,
+              fontFamily: FONTS.AvenirNext,
+              fontWeight: 600,
+              fontSize: 14,
+            }}
+          >
+            {rounded}%
+          </Box>
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+const EvaluationMenu = ({ approve, reject, approveAll, rejectAll, showApproveRejectAll }) => {
+  const [anchor, setAnchor] = useState(null);
+  const close = () => setAnchor(null);
+  // Como en ValidationPanel: cada opción dispara su acción y el panel se cierra.
+  const option = (icon, label, action) => (
+    <MenuItem
+      key={label}
+      onClick={() => {
+        close();
+        action && action();
+      }}
+    >
+      <ListItemIcon sx={{ minWidth: 30 }}>
+        <img src={icon} alt="" width={20} height={20} />
+      </ListItemIcon>
+      <ListItemText
+        primary={label}
+        primaryTypographyProps={{
+          sx: { fontFamily: FONTS.AvenirNext, fontSize: 13, color: COLORS.s5, whiteSpace: "normal" },
+        }}
+      />
+    </MenuItem>
+  );
+
+  return (
+    <>
+      <Tooltip title="Evaluar" arrow>
+        <IconButton
+          aria-label="Evaluar"
+          size="small"
+          onClick={(e) => setAnchor(e.currentTarget)}
+          sx={{ width: 25, height: 25, p: 0 }}
+        >
+          <img src={nullIcon} alt="" width={25} height={25} />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        anchorEl={anchor}
+        open={Boolean(anchor)}
+        onClose={close}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "right" }}
+        PaperProps={{ sx: { mt: 1, maxWidth: "calc(100vw - 24px)" } }}
+      >
+        {option(acceptIcon, "Validado", approve)}
+        {option(rejectIcon, "Rechazado", reject)}
+        {showApproveRejectAll && option(acceptIcon, "Validar todo y enviar a evaluación", approveAll)}
+        {showApproveRejectAll && option(rejectIcon, "Rechazar todo y enviar a evaluación", rejectAll)}
+      </Menu>
+    </>
+  );
+};
+
+export const ProductHeader = ({
+  headerData,
+  percent,
+  activeRetailer,
+  setActiveRetailer,
+  showValidationButtons,
+  approve,
+  reject,
+  approveAll,
+  rejectAll,
+  servicesData,
+  showApproveRejectAll,
+  showStatus = true,
+}) => {
+  // Misma fuente de cadenas que FullProductNameHeader: desde tareas llega el
+  // orden por cadena; si no, la relación categoría-cadena del artículo.
+  const [retailers, setRetailers] = useState([]);
+  useEffect(() => {
+    const fromTasks = Boolean(headerData.statusByRetailer);
+    const categoryRetailer =
+      headerData.categoryRetailer || headerData.article?.categoryRetailer;
+    setRetailers((fromTasks ? headerData.categoryRetailerInOrder : categoryRetailer) ?? []);
+  }, [servicesData]);
+
+  const retailerIndex = useMemo(() => {
+    const source =
+      headerData?.article?.categoryRetailer ||
+      headerData?.categoryRetailerInOrder ||
+      headerData?.categoryRetailer;
+    return source?.findIndex((retailer) => retailer?.id_retailer === activeRetailer?.id) ?? -1;
+  }, [activeRetailer, headerData]);
+
+  const status = showStatus
+    ? headerData?.version_status || headerData?.status || headerData?.article_status
+    : null;
+
+  const category = (
+    headerData?.article?.categoryRetailer?.[retailerIndex]?.category_name ||
+    headerData?.categoryRetailerInOrder?.[retailerIndex]?.category ||
+    headerData?.categoryRetailer?.[retailerIndex]?.category ||
+    headerData.categoryName ||
+    ""
+  ).replace(/\|/g, " | ");
+
+  const features = [
+    { feature: "UPC", value: headerData?.article?.upc || headerData?.upc },
+    { feature: "SKU", value: headerData?.article?.sku || headerData?.sku },
+    { feature: "Categoría", value: category },
+    { feature: "Prov", value: headerData?.article?.company_name },
+  ].filter((item) => item.value);
+
+  return (
+    <Box component="header" sx={{ mb: "17px", minWidth: 0 }}>
+      <Stack direction="row" alignItems="center" flexWrap="wrap" columnGap="10px" rowGap={0.5}>
+        <Typography
+          component="h2"
+          sx={{
+            fontFamily: FONTS.Raleway,
+            fontWeight: 500,
+            fontSize: { xs: 20, sm: 24 },
+            lineHeight: { xs: "28px", sm: "36px" },
+            letterSpacing: "-0.015em",
+            color: COLORS.color_gray,
+            mt: "8px",
+            minWidth: 0,
+            overflowWrap: "anywhere",
+          }}
+        >
+          {headerData?.article?.name || headerData?.name}
+        </Typography>
+        {status && <StatusChip status={status} />}
+        <CompletenessBadges percent={percent} />
+        <Typography
+          component="span"
+          sx={{ fontFamily: FONTS.AvenirNext, fontSize: 13, lineHeight: "18px", color: COLORS.s4 }}
+        >
+          {getTime(headerData?.article?.timestamp || headerData?.timestamp)}
+        </Typography>
+      </Stack>
+
+      <Stack
+        direction="row"
+        alignItems="flex-start"
+        justifyContent="space-between"
+        gap={1}
+        sx={{ mt: 0.5 }}
+      >
+        <Stack direction="row" flexWrap="wrap" gap="8px" sx={{ minWidth: 0 }}>
+          {features.map((item) => (
+            <FeatureTag key={item.feature} {...item} />
+          ))}
+        </Stack>
+        <Stack direction="row" alignItems="center" gap={1} sx={{ flexShrink: 0 }}>
+          <RetailerMenu
+            retailers={retailers}
+            activeRetailer={activeRetailer}
+            setActiveRetailer={setActiveRetailer}
+          />
+          {showValidationButtons && (
+            <EvaluationMenu
+              approve={approve}
+              reject={reject}
+              approveAll={approveAll}
+              rejectAll={rejectAll}
+              showApproveRejectAll={showApproveRejectAll}
+            />
+          )}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};

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

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { Box } from "@mui/material";
+import PlayCircleFilledIcon from "@mui/icons-material/PlayCircleFilled";
+
+import {
+  ASSET_PREVIEW,
+  formatDuration,
+  resolvePreviewKind,
+} from "../../../../global-files/digital-assets/assetTypes";
+import defaultProductImage from "../../../../assets/images/defaultImages/defaultProductImage.png";
+
+/*
+  Imagen o video de producto, con MUI. Hace lo mismo que `atoms/ProductImage`:
+
+    - El tipo se decide por `ext`; la URL no sirve porque apunta al
+      redimensionador de CloudFront y no conserva la extensión. El regex sobre la
+      URL queda de respaldo, igual que en el original.
+    - Una miniatura de video NO lleva controles (no caben y se tragan el clic):
+      se muestra el primer fotograma, un botón de play y la duración.
+    - Si la imagen no carga, se muestra la imagen por defecto.
+*/
+
+const isVideo = ({ src, ext }) =>
+  ext
+    ? resolvePreviewKind({ ext }) === ASSET_PREVIEW.VIDEO
+    : /\.mp4($|[?#])/i.test(src || "");
+
+export const ProductMedia = ({ src, ext, alt = "", thumbnail = false, sx }) => {
+  const [failed, setFailed] = useState(false);
+  const [duration, setDuration] = useState(null);
+
+  const fill = {
+    width: "100%",
+    height: "100%",
+    objectFit: "contain",
+    display: "block",
+  };
+
+  if (isVideo({ src, ext })) {
+    return (
+      <Box sx={{ position: "relative", width: "100%", height: "100%", ...sx }}>
+        <Box
+          component="video"
+          src={thumbnail ? `${src}#t=0.5` : src}
+          controls={!thumbnail}
+          muted={thumbnail}
+          playsInline
+          preload="metadata"
+          onLoadedMetadata={(e) => setDuration(e.target.duration)}
+          sx={{ ...fill, bgcolor: "#000", pointerEvents: thumbnail ? "none" : "auto" }}
+        />
+        {thumbnail && (
+          <>
+            <PlayCircleFilledIcon
+              aria-hidden
+              sx={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                fontSize: 24,
+                color: "rgba(255,255,255,0.9)",
+                filter: "drop-shadow(0 0 2px rgba(0,0,0,0.6))",
+                pointerEvents: "none",
+              }}
+            />
+            {duration ? (
+              <Box
+                component="span"
+                sx={{
+                  position: "absolute",
+                  right: 3,
+                  bottom: 3,
+                  px: "4px",
+                  borderRadius: "3px",
+                  bgcolor: "rgba(0,0,0,0.75)",
+                  color: "#fff",
+                  fontSize: 9,
+                  lineHeight: "13px",
+                  pointerEvents: "none",
+                }}
+              >
+                {formatDuration(duration)}
+              </Box>
+            ) : null}
+          </>
+        )}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      component="img"
+      src={failed || !src ? defaultProductImage : src}
+      alt={alt}
+      onError={() => setFailed(true)}
+      sx={{ ...fill, ...sx }}
+    />
+  );
+};

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

@@ -0,0 +1,125 @@
+import { useEffect, useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  useMediaQuery,
+} from "@mui/material";
+
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Mensaje de rechazo antes de enviar la evaluación.
+
+  Reemplaza a `organisms/Modal` + `TagAndInput` (Quill). Hace lo mismo que el
+  original —guarda el mensaje con `createComment` y después rechaza uno o todos
+  los servicios—, pero con un campo controlado: el original leía el DOM de
+  Quill y, si el mensaje estaba vacío, metía a mano un <div> de error.
+
+  En celular ocupa la pantalla completa, para que el teclado no tape el campo.
+*/
+
+const MAX_CHARS = 999;
+
+export const RejectDialog = ({ open, rejectAll, onCancel, onConfirm }) => {
+  const [text, setText] = useState("");
+  const [showError, setShowError] = useState(false);
+  const [sending, setSending] = useState(false);
+  const isPhone = useMediaQuery("(max-width:599.95px)");
+
+  // Cada vez que se abre empieza vacío, como el original (se montaba de nuevo).
+  useEffect(() => {
+    if (open) {
+      setText("");
+      setShowError(false);
+      setSending(false);
+    }
+  }, [open]);
+
+  const confirm = async () => {
+    const message = text.trim();
+    if (!message) {
+      setShowError(true);
+      return;
+    }
+    setSending(true);
+    try {
+      await onConfirm(message);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={sending ? undefined : onCancel}
+      fullScreen={isPhone}
+      fullWidth
+      maxWidth="sm"
+      PaperProps={{ sx: { borderRadius: isPhone ? 0 : "10px" } }}
+    >
+      <DialogTitle
+        sx={{ fontFamily: FONTS.Raleway_600, fontSize: 17, textAlign: "center", color: COLORS.s5 }}
+      >
+        {rejectAll ? "Agregar mensaje para rechazar todo" : "Agregar mensaje de rechazo"}
+      </DialogTitle>
+      <DialogContent>
+        <TextField
+          id="modal-message-box"
+          autoFocus
+          multiline
+          minRows={5}
+          maxRows={isPhone ? 14 : 10}
+          fullWidth
+          placeholder="Escribe el motivo del rechazo"
+          value={text}
+          onChange={(e) => {
+            setText(e.target.value.slice(0, MAX_CHARS));
+            if (showError) setShowError(false);
+          }}
+          error={showError}
+          helperText={showError ? "El mensaje no puede estar vacío." : `${text.length}/${MAX_CHARS}`}
+          FormHelperTextProps={{ sx: { textAlign: showError ? "left" : "right", mx: 0 } }}
+          InputProps={{ sx: { fontFamily: FONTS.AvenirNext, fontSize: 14 } }}
+          sx={{ mt: 1 }}
+        />
+      </DialogContent>
+      <DialogActions sx={{ px: 3, pb: 2.5, gap: 1, justifyContent: "center" }}>
+        <Button
+          variant="outlined"
+          disabled={sending}
+          onClick={onCancel}
+          sx={{
+            textTransform: "none",
+            borderRadius: "20px",
+            minWidth: 110,
+            color: COLORS.s5,
+            borderColor: COLORS.s3,
+            "&:hover": { borderColor: COLORS.s5 },
+          }}
+        >
+          Cancelar
+        </Button>
+        <Button
+          variant="contained"
+          disableElevation
+          disabled={sending}
+          onClick={confirm}
+          sx={{
+            textTransform: "none",
+            borderRadius: "20px",
+            minWidth: 110,
+            bgcolor: COLORS.magenta_s2,
+            "&:hover": { bgcolor: COLORS.secondary_magenta },
+          }}
+        >
+          {sending ? "Enviando…" : "Aceptar"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import {
+  Avatar,
+  Box,
+  ButtonBase,
+  ListItemAvatar,
+  ListItemText,
+  Menu,
+  MenuItem,
+} from "@mui/material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+
+import { getNewStatus } from "../../../../global-files/data";
+import { StatusChip } from "./StatusChip";
+import { COLORS, FONTS, retailerId, retailerImage } from "./tokens";
+
+/**
+ * Selector de la cadena activa. Reemplaza a `molecules/RetailerSelector` con el
+ * mismo comportamiento:
+ *   - el logo de la cadena activa abre la lista;
+ *   - la activa se marca en rosa suave y con el círculo verde;
+ *   - una cadena cuyo estatus de servicios es "NA" no se puede elegir.
+ */
+export const RetailerMenu = ({ retailers = [], activeRetailer, setActiveRetailer }) => {
+  const [anchor, setAnchor] = useState(null);
+  const activeId = retailerId(activeRetailer);
+
+  return (
+    <>
+      <ButtonBase
+        aria-label="Cambiar de cadena"
+        aria-haspopup="menu"
+        aria-expanded={Boolean(anchor)}
+        onClick={(e) => retailers?.length > 0 && setAnchor(e.currentTarget)}
+        sx={{ borderRadius: "14px", pr: 0.25 }}
+      >
+        <Avatar
+          src={retailerImage(activeRetailer)}
+          alt={activeRetailer?.name}
+          sx={{ width: 26, height: 26, bgcolor: COLORS.s2 }}
+        />
+        {anchor ? (
+          <ArrowDropUpIcon sx={{ color: COLORS.s4 }} />
+        ) : (
+          <ArrowDropDownIcon sx={{ color: COLORS.s4 }} />
+        )}
+      </ButtonBase>
+
+      <Menu
+        anchorEl={anchor}
+        open={Boolean(anchor)}
+        onClose={() => setAnchor(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "right" }}
+        PaperProps={{
+          sx: {
+            mt: 1,
+            bgcolor: COLORS.s2,
+            border: `1px solid ${COLORS.s3}`,
+            maxWidth: "calc(100vw - 24px)",
+          },
+        }}
+      >
+        {retailers.map((retailer, index) => {
+          const isActive =
+            retailerId(retailer) != null && retailerId(retailer) === activeId;
+          const status = retailer?.services ? getNewStatus(retailer.services) : null;
+          return (
+            <MenuItem
+              key={`${index}-${retailer?.name}`}
+              selected={isActive}
+              onClick={() => {
+                if (status === "NA") return;
+                setActiveRetailer(retailer);
+                setAnchor(null);
+              }}
+              sx={{
+                gap: 1.25,
+                borderRadius: "3px",
+                mx: 0.75,
+                "&.Mui-selected, &.Mui-selected:hover": {
+                  backgroundColor: `rgba(${COLORS.rgb_color_pink}, 0.1)`,
+                },
+                "&.Mui-selected:hover": {
+                  backgroundColor: `rgba(${COLORS.rgb_color_pink}, 0.18)`,
+                },
+              }}
+            >
+              <ListItemAvatar sx={{ minWidth: 0 }}>
+                <Avatar
+                  src={retailerImage(retailer)}
+                  alt={retailer?.name}
+                  sx={{ width: 26, height: 26, bgcolor: COLORS.white }}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={retailer?.name}
+                secondary={retailer?.team}
+                primaryTypographyProps={{
+                  sx: {
+                    fontFamily: FONTS.AvenirNext,
+                    fontWeight: 500,
+                    fontSize: 14,
+                    color: COLORS.s5,
+                    whiteSpace: "normal",
+                  },
+                }}
+              />
+              {status && <StatusChip status={status} />}
+              {isActive && (
+                <Box
+                  aria-label="Cadena activa"
+                  sx={{
+                    width: 20,
+                    height: 20,
+                    flexShrink: 0,
+                    borderRadius: "50%",
+                    bgcolor: COLORS.exported,
+                  }}
+                />
+              )}
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </>
+  );
+};