contentoh-components-library 21.6.57 → 21.6.59

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

@@ -0,0 +1,382 @@
+import { useEffect, useState } from "react";
+import {
+  Avatar,
+  AvatarGroup,
+  Box,
+  Button,
+  IconButton,
+  List,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+  MobileStepper,
+  Popover,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+
+import { getProfilePicture } from "../../../../global-files/data";
+import { useAiProductEdition } from "../../../../contexts/AiProductEdition";
+
+import defaultProfile from "../../../../assets/images/defaultImages/defaultProfileImage.svg";
+import InfoIcon from "../../../../assets/images/sliderToolTip/infoIcon.svg";
+import Slide1 from "../../../../assets/images/sliderToolTip/slide21.svg";
+import Slide2 from "../../../../assets/images/sliderToolTip/slide22.svg";
+import Slide3 from "../../../../assets/images/sliderToolTip/slide23.svg";
+import saveIcon from "../../../../assets/images/generalButton/saveIcon.svg";
+import saveIconHover from "../../../../assets/images/generalButton/saveIconHover.svg";
+import deleteIcon from "../../../../assets/images/generalButton/deleteIcon.svg";
+import deleteIconHover from "../../../../assets/images/generalButton/deleteIconHover.svg";
+import downloadIcon from "../../../../assets/images/generalButton/downloadIcon.svg";
+import rowsLayoutIcon from "../../../../assets/images/generalButton/rowLayout.svg";
+import gridLayoutIcon from "../../../../assets/images/generalButton/gridLayout.svg";
+
+import { StatusChip } from "./StatusChip";
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Acciones de un servicio: ayuda, versión, estatus, guardar, (en imágenes)
+  borrar/descargar/cambiar vista, y asignaciones con su panel.
+
+  Es lo que hacía `molecules/StatusAsignationInfo`, que la vista original usa en
+  DOS lugares: junto a las pestañas y en la cabecera de los datos de la imagen.
+  Aquí también se comparte: TabsBar e ImagePanel usan este mismo componente.
+*/
+
+const SLIDES = [
+  {
+    slide: Slide1,
+    title: "Valida tu producto en cada activo digital",
+    description:
+      "Al solicitar a Content-oh! podrás validar la información, imágenes y documentación de tu producto, esto hará más sencillo que puedas aprobar o rechazar el contenido.",
+  },
+  {
+    slide: Slide2,
+    title: "Aprueba o rechaza con un clic",
+    description:
+      "Cuando termines de revisar tu información, elige si aproebas o rechazas, esto enviara una notificiación a nuestro equipo, para continuar o corregir el producto.",
+  },
+  {
+    slide: Slide3,
+    title: "Estatus de tu producto en el proceso",
+    description:
+      "La mayor parte del proceso podrás identificar que estatus tiene tu producto, esto dara visibilidad a todo tu equipo para saber la etapa se encuentra.",
+  },
+];
+
+const HelpSlides = () => {
+  const [anchor, setAnchor] = useState(null);
+  const [step, setStep] = useState(0);
+  const last = step === SLIDES.length - 1;
+  const close = () => {
+    setAnchor(null);
+    setStep(0);
+  };
+
+  return (
+    <>
+      <IconButton
+        aria-label="Ayuda"
+        size="small"
+        onClick={(e) => setAnchor(e.currentTarget)}
+        sx={{ p: 0 }}
+      >
+        <img src={InfoIcon} alt="" width={30} height={30} style={{ filter: "brightness(.35)" }} />
+      </IconButton>
+      <Popover
+        open={Boolean(anchor)}
+        anchorEl={anchor}
+        onClose={close}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+        transformOrigin={{ vertical: "top", horizontal: "center" }}
+        PaperProps={{ sx: { width: 300, maxWidth: "calc(100vw - 24px)", p: 2, mt: 1 } }}
+      >
+        <Box
+          component="img"
+          src={SLIDES[step].slide}
+          alt=""
+          sx={{ width: "100%", height: 150, objectFit: "contain" }}
+        />
+        <Typography sx={{ fontFamily: FONTS.Raleway_700, fontSize: 14, color: COLORS.s5, mt: 1 }}>
+          {SLIDES[step].title}
+        </Typography>
+        <Typography sx={{ fontFamily: FONTS.AvenirNext, fontSize: 12, color: COLORS.s4, mt: 0.5 }}>
+          {SLIDES[step].description}
+        </Typography>
+        <MobileStepper
+          variant="dots"
+          steps={SLIDES.length}
+          position="static"
+          activeStep={step}
+          sx={{
+            bgcolor: "transparent",
+            px: 0,
+            mt: 1,
+            "& .MuiMobileStepper-dotActive": { bgcolor: COLORS.magenta_s2 },
+          }}
+          backButton={
+            <Button
+              size="small"
+              disabled={step === 0}
+              onClick={() => setStep((s) => s - 1)}
+              sx={{ color: COLORS.s5 }}
+            >
+              Anterior
+            </Button>
+          }
+          nextButton={
+            <Button
+              size="small"
+              onClick={() => (last ? close() : setStep((s) => s + 1))}
+              sx={{ color: COLORS.magenta_s2 }}
+            >
+              {last ? "Cerrar" : "Siguiente"}
+            </Button>
+          }
+        />
+      </Popover>
+    </>
+  );
+};
+
+/** Botón redondo de 25px con el ícono de siempre y su versión "hover". */
+const RoundIcon = ({
+  label,
+  icon,
+  hoverIcon,
+  onClick,
+  bordered = COLORS.s3,
+  hoverBg = COLORS.magenta_s2,
+  size = 15,
+}) => (
+  <Tooltip title={label} arrow>
+    <IconButton
+      aria-label={label}
+      onClick={onClick}
+      sx={{
+        width: 25,
+        height: 25,
+        p: 0,
+        border: bordered ? `1px solid ${bordered}` : "none",
+        backgroundImage: `url(${icon})`,
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        backgroundSize: size,
+        "&:hover": {
+          backgroundColor: hoverBg,
+          borderColor: hoverBg,
+          ...(hoverIcon ? { backgroundImage: `url(${hoverIcon})` } : {}),
+        },
+      }}
+    />
+  </Tooltip>
+);
+
+export const ServiceActions = ({
+  status = "",
+  imagesSection = false,
+  imageLayout,
+  setImageLayout,
+  assig,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
+  onClickSave,
+  showSaveButton,
+  canAssign,
+  version,
+  setShowVersionSelector,
+  // Cambia cuando el panel de asignación debe cerrarse (p. ej., otra pestaña).
+  resetKey,
+}) => {
+  const isImagesTab = imagesSection;
+  const { inputsUsingAi } = useAiProductEdition();
+
+  const [assignAnchor, setAssignAnchor] = useState(null);
+  const [assignationType, setAssignationType] = useState("facilitator");
+  const collaborators = assig?.collaborators?.[assignationType];
+
+  useEffect(() => setAssignAnchor(null), [resetKey]);
+
+  const save = () => {
+    if (Object.values(inputsUsingAi ?? {}).some((input) => !!input?.using)) {
+      console.warn("Para guardar se debe de dejar de usar la generación con IA");
+      return;
+    }
+    onClickSave && onClickSave();
+  };
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        alignItems="center"
+        flexWrap="wrap"
+        gap="10px"
+        justifyContent="flex-end"
+        sx={{ flex: "0 1 auto", ml: "auto" }}
+      >
+        <HelpSlides />
+        {version && (
+          <Tooltip title="Cambiar de versión" arrow>
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowVersionSelector(true);
+              }}
+              sx={{
+                minWidth: 25,
+                width: 25,
+                height: 25,
+                p: 0,
+                borderRadius: "50%",
+                border: `1px solid ${COLORS.color_purple}`,
+                color: COLORS.color_purple,
+                fontFamily: FONTS.AvenirNext,
+                fontSize: 11,
+                lineHeight: "25px",
+              }}
+            >
+              V{version}
+            </Button>
+          </Tooltip>
+        )}
+        {status !== "-" && status !== "" && <StatusChip status={status} oval />}
+        {showSaveButton && (
+          <RoundIcon
+            label="Guardar"
+            icon={saveIcon}
+            hoverIcon={saveIconHover}
+            bordered={COLORS.color_gray}
+            hoverBg={COLORS.color_pink}
+            size={undefined}
+            onClick={save}
+          />
+        )}
+        {isImagesTab && (
+          <>
+            {showSaveButton && (
+              <RoundIcon
+                label="Borrar seleccionadas"
+                icon={deleteIcon}
+                hoverIcon={deleteIconHover}
+                onClick={() => askToDeleteImages && askToDeleteImages()}
+              />
+            )}
+            <RoundIcon
+              label="Descargar"
+              icon={downloadIcon}
+              onClick={() => downloadImages && downloadImages()}
+            />
+            <Tooltip title={imageLayout ? "Ver como lista" : "Ver como cuadrícula"} arrow>
+              <IconButton
+                aria-label={imageLayout ? "Ver como lista" : "Ver como cuadrícula"}
+                onClick={() => setImageLayout && setImageLayout(!imageLayout)}
+                sx={{ width: 24, height: 24, p: 0 }}
+              >
+                <img
+                  src={imageLayout ? rowsLayoutIcon : gridLayoutIcon}
+                  alt=""
+                  width={24}
+                  height={24}
+                />
+              </IconButton>
+            </Tooltip>
+          </>
+        )}
+        <Stack direction="row" alignItems="center" gap="6px">
+          <AvatarGroup
+            max={4}
+            sx={{ "& .MuiAvatar-root": { width: 20, height: 20, fontSize: 10, border: 0 } }}
+          >
+            {assig?.assignations?.map((assignation, index) => (
+              <Avatar
+                key={`${index}-${assignation.id}`}
+                src={getProfilePicture(assignation.id, 20, 20)}
+                alt="Persona asignada"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setAssignationType(assignation?.collaboratorType);
+                  setAssignAnchor(e.currentTarget);
+                }}
+                sx={{ cursor: "pointer" }}
+              >
+                <img src={defaultProfile} alt="" width={20} height={20} />
+              </Avatar>
+            ))}
+          </AvatarGroup>
+          <Typography sx={{ fontFamily: FONTS.AvenirNext, fontSize: 14, color: COLORS.color_gray }}>
+            Asig.
+          </Typography>
+        </Stack>
+      </Stack>
+
+      <Popover
+        open={Boolean(assignAnchor) && canAssign}
+        anchorEl={assignAnchor}
+        onClose={() => setAssignAnchor(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "right" }}
+        PaperProps={{ sx: { width: 260, maxWidth: "calc(100vw - 24px)", mt: 1, p: 1.5 } }}
+      >
+        <Stack direction="row" alignItems="center" gap={1} sx={{ mb: 1 }}>
+          <Typography sx={{ fontFamily: FONTS.AvenirNext, fontSize: 13, color: COLORS.s4 }}>
+            Estatus
+          </Typography>
+          <StatusChip status={status} oval />
+        </Stack>
+        {collaborators?.length ? (
+          <List dense disablePadding sx={{ maxHeight: 280, overflowY: "auto" }}>
+            {collaborators.map((person, index) => (
+              <ListItemButton
+                key={`${index}-${person.name}`}
+                onClick={() => {
+                  setAssignation && setAssignation(assignationType, person?.id_user);
+                  setAssignAnchor(null);
+                }}
+                sx={{ borderRadius: "3px" }}
+              >
+                <ListItemAvatar sx={{ minWidth: 40 }}>
+                  <Avatar
+                    src={getProfilePicture(person?.id_user, 40, 40)}
+                    sx={{ width: 26, height: 26 }}
+                  >
+                    <img src={defaultProfile} alt="" width={26} height={26} />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                  primary={person.name}
+                  primaryTypographyProps={{
+                    sx: { fontFamily: FONTS.AvenirNext, fontSize: 14, color: COLORS.s5 },
+                  }}
+                />
+              </ListItemButton>
+            ))}
+          </List>
+        ) : (
+          <Typography sx={{ fontFamily: FONTS.AvenirNext, fontSize: 13, color: COLORS.s4, py: 1 }}>
+            Sin personas para asignar
+          </Typography>
+        )}
+        {isRetailer === 1 && (
+          <List dense disablePadding sx={{ mt: 1, borderTop: `1px solid ${COLORS.s2}`, pt: 1 }}>
+            <ListItemText
+              primary="Solicitar a"
+              secondary="Proveedor"
+              sx={{ px: 2 }}
+              primaryTypographyProps={{ sx: { fontSize: 14, color: COLORS.s5 } }}
+            />
+            <ListItemText
+              primary="Solicitar a"
+              secondary="Content-oh!"
+              sx={{ px: 2 }}
+              primaryTypographyProps={{ sx: { fontSize: 14, color: COLORS.s5 } }}
+            />
+          </List>
+        )}
+      </Popover>
+    </>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { Chip, Tooltip } from "@mui/material";
+
+import { COLORS, FONTS, statusColor, statusName } from "./tokens";
+
+/**
+ * Etiqueta de estatus ("RA/AS", "AA"...). Mismo color y tamaño que
+ * `atoms/Status`; el nombre completo va en el tooltip. `oval` es la variante
+ * redondeada de la barra de pestañas.
+ */
+export const StatusChip = ({ status, oval = false }) => {
+  const label = status ?? "NS";
+  const chip = (
+    <Chip
+      label={label}
+      size="small"
+      sx={{
+        height: 20,
+        borderRadius: oval ? "10px" : "3px",
+        backgroundColor: statusColor(status),
+        color: COLORS.white,
+        fontFamily: FONTS.Lato,
+        fontSize: 12,
+        cursor: "default",
+        "& .MuiChip-label": { px: "10px", lineHeight: "20px" },
+      }}
+    />
+  );
+
+  const name = statusName(status);
+  return name ? (
+    <Tooltip title={name} arrow placement="top">
+      {chip}
+    </Tooltip>
+  ) : (
+    chip
+  );
+};

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

@@ -0,0 +1,187 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Stack,
+  Tab,
+  Tabs,
+  useMediaQuery,
+} from "@mui/material";
+
+import { ServiceActions } from "./ServiceActions";
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Barra de pestañas (Descripción / Ficha técnica / Imágenes) y sus acciones:
+  ayuda, versión, estatus, guardar, borrar/descargar/cambiar vista de imágenes y
+  asignaciones.
+
+  Reemplaza a `organisms/FullTabsMenu` (TabsMenu + StatusAsignationInfo) con
+  los mismos props y el mismo comportamiento, hecho con MUI:
+    - las pestañas se desplazan de lado si no caben;
+    - si no caben junto a las pestañas, las acciones bajan a su propia fila
+      (las acciones son `ServiceActions`, compartido con el panel de imagen);
+    - cambiar de pestaña con cambios sin guardar pide confirmación.
+*/
+
+const tabSx = {
+  fontFamily: FONTS.Raleway_500,
+  textTransform: "none",
+  fontSize: { xs: 13, sm: 14 },
+  lineHeight: "21px",
+  whiteSpace: "nowrap",
+  color: COLORS.s5,
+  minWidth: { xs: 0, sm: 149 },
+  minHeight: 36,
+  px: { xs: 0.5, sm: 0 },
+  pb: "5px",
+  alignItems: "flex-start",
+  borderBottom: `2px solid ${COLORS.s3}`,
+  transition: "font-size 0.1s",
+  "&.Mui-selected": { color: COLORS.s5, fontSize: { xs: 14, sm: 18 } },
+};
+
+export const TabsBar = ({
+  tabsSections = {},
+  status = "",
+  activeTab,
+  setActiveTab,
+  imageLayout,
+  setImageLayout,
+  assig,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
+  onClickSave,
+  showSaveButton,
+  canAssign,
+  version,
+  setShowVersionSelector,
+  images,
+  updatedDescriptions = [],
+  updatedDatasheets = [],
+  updatedImages = [],
+  setUpdatedDescriptions,
+  setUpdatedDatasheets,
+  setImages,
+}) => {
+  const tabs = Object.keys(tabsSections);
+  const initialTab = tabs.find((key) => tabsSections[key]) ?? tabs[0];
+  const currentTab = tabs.includes(activeTab) ? activeTab : initialTab;
+  const isImagesTab = currentTab === "Imágenes";
+
+  // En celular las pestañas se reparten a lo ancho: con tres caben todas y no
+  // queda ninguna escondida detrás de la flecha de desplazamiento.
+  const isPhone = useMediaQuery("(max-width:599.95px)");
+
+  // --- Cambio de pestaña con cambios sin guardar ---------------------------
+  const [pendingTab, setPendingTab] = useState(null);
+
+  const hasUnsavedChanges = () =>
+    updatedDescriptions.length > 0 ||
+    updatedDatasheets.length > 0 ||
+    updatedImages.length > 0 ||
+    images?.values?.filter((f) => !f.id)?.length > 0;
+
+  const requestTab = (tab) => {
+    if (tab === currentTab) return;
+    if (hasUnsavedChanges()) setPendingTab(tab);
+    else setActiveTab(tab);
+  };
+
+  const confirmTabChange = () => {
+    // Igual que TabsMenu: al aceptar se descartan los cambios pendientes.
+    setActiveTab(pendingTab);
+    setUpdatedDescriptions && setUpdatedDescriptions([]);
+    setUpdatedDatasheets && setUpdatedDatasheets([]);
+    setImages && setImages({});
+    setPendingTab(null);
+  };
+
+  return (
+    <Box sx={{ mb: "14px", minWidth: 0 }}>
+      {/* Pestañas y acciones comparten fila mientras quepan; si no, las acciones
+          bajan a la siguiente. Las pestañas solo se desplazan de lado cuando ni
+          solas caben (celular). */}
+      <Stack
+        direction="row"
+        flexWrap="wrap"
+        alignItems="flex-end"
+        justifyContent="space-between"
+        columnGap={2}
+        rowGap={1}
+      >
+        <Tabs
+          value={currentTab ?? false}
+          onChange={(_, tab) => requestTab(tab)}
+          variant={isPhone && tabs.length <= 3 ? "fullWidth" : "scrollable"}
+          scrollButtons="auto"
+          allowScrollButtonsMobile
+          TabIndicatorProps={{ sx: { bgcolor: COLORS.magenta_s2, height: 2 } }}
+          sx={{
+            flex: "1 1 auto",
+            maxWidth: "100%",
+            minHeight: 36,
+            minWidth: 0,
+            "& .MuiTabs-flexContainer": { gap: "10px" },
+          }}
+        >
+          {tabs.map((tab) => (
+            <Tab key={tab} value={tab} label={tab} disableRipple sx={tabSx} />
+          ))}
+        </Tabs>
+
+        <ServiceActions
+          status={status}
+          imagesSection={isImagesTab}
+          imageLayout={imageLayout}
+          setImageLayout={setImageLayout}
+          assig={assig}
+          setAssignation={setAssignation}
+          isRetailer={isRetailer}
+          downloadImages={downloadImages}
+          askToDeleteImages={askToDeleteImages}
+          onClickSave={onClickSave}
+          showSaveButton={showSaveButton}
+          canAssign={canAssign}
+          version={version}
+          setShowVersionSelector={setShowVersionSelector}
+          resetKey={currentTab}
+        />
+      </Stack>
+
+      <Dialog open={Boolean(pendingTab)} onClose={() => setPendingTab(null)} maxWidth="xs" fullWidth>
+        <DialogTitle sx={{ fontFamily: FONTS.Raleway_600, color: COLORS.s5 }}>Cambios sin Guardar</DialogTitle>
+        <DialogContent>
+          <DialogContentText sx={{ fontFamily: FONTS.AvenirNext }}>
+            Estás cambiando de vista y aun no guardas cambios ¿Estás seguro?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 2 }}>
+          <Button onClick={() => setPendingTab(null)} sx={{ color: COLORS.s5, textTransform: "none" }}>
+            Cancelar
+          </Button>
+          <Button
+            variant="contained"
+            disableElevation
+            onClick={confirmTabChange}
+            sx={{
+              textTransform: "none",
+              borderRadius: "20px",
+              bgcolor: COLORS.magenta_s2,
+              "&:hover": { bgcolor: COLORS.secondary_magenta },
+            }}
+          >
+            Aceptar
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};