contentoh-components-library 21.6.57 → 21.6.59

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

@@ -0,0 +1,311 @@
+import {
+  Box,
+  Button,
+  ButtonBase,
+  Collapse,
+  Link,
+  Paper,
+  Stack,
+  Typography,
+} from "@mui/material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Variantes del producto: padre/hijo (ligar, ver la familia, desvincular) y
+  agrupación de variantes (agrupar, ver el grupo, salir del grupo).
+
+  Reemplaza el marcado de la vista original (clases variants-actions,
+  variants-family, family-row...) con MUI, con el mismo comportamiento. Los dos
+  mecanismos siguen separados a propósito: padre/hijo es herencia; el grupo es
+  solo un código compartido, y juntarlos haría creer que agrupar hereda algo.
+*/
+
+// Rosa ContentOh, el mismo del modal de ligar productos.
+const PINK = "#E13AA8";
+
+const OutlineButton = ({ children, onClick }) => (
+  <Button
+    variant="outlined"
+    size="small"
+    onClick={onClick}
+    sx={{
+      borderColor: PINK,
+      color: PINK,
+      borderRadius: "6px",
+      px: "12px",
+      py: "5px",
+      minHeight: 0,
+      lineHeight: 1.3,
+      textTransform: "none",
+      fontFamily: FONTS.Raleway_600,
+      fontSize: 11,
+      "&:hover": { borderColor: PINK, bgcolor: `rgba(${COLORS.rgb_color_pink}, 0.06)` },
+    }}
+  >
+    {children}
+  </Button>
+);
+
+const ToggleLink = ({ open, onClick, children }) => (
+  <Link
+    component="button"
+    type="button"
+    aria-expanded={open}
+    onClick={onClick}
+    sx={{
+      display: "inline-flex",
+      alignItems: "center",
+      fontFamily: FONTS.Raleway_500,
+      fontSize: 11,
+      color: COLORS.gray,
+      textDecorationColor: "currentColor",
+    }}
+  >
+    {children}
+    {open ? <ArrowDropUpIcon fontSize="small" /> : <ArrowDropDownIcon fontSize="small" />}
+  </Link>
+);
+
+const SmallLink = ({ onClick, title, children }) => (
+  <Link
+    component="button"
+    type="button"
+    title={title}
+    onClick={onClick}
+    sx={{
+      flexShrink: 0,
+      px: "6px",
+      py: "4px",
+      fontFamily: FONTS.Raleway_500,
+      fontSize: 10,
+      color: COLORS.gray,
+      whiteSpace: "nowrap",
+      textDecorationColor: "currentColor",
+      "&:hover": { color: PINK },
+    }}
+  >
+    {children}
+  </Link>
+);
+
+/** Fila de la familia: el botón navega; "Desvincular" queda FUERA de él. */
+const FamilyRow = ({ role, name, upc, disabled, current, onOpen, action }) => (
+  <Stack direction="row" alignItems="center" gap="4px">
+    <ButtonBase
+      disabled={disabled}
+      onClick={onOpen}
+      sx={{
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        flexWrap: { xs: "wrap", sm: "nowrap" },
+        alignItems: "baseline",
+        justifyContent: "flex-start",
+        columnGap: 1,
+        rowGap: "2px",
+        px: 1,
+        py: "6px",
+        borderRadius: "4px",
+        textAlign: "left",
+        fontFamily: FONTS.Raleway_500,
+        fontSize: 12,
+        color: COLORS.deep_gray,
+        "&:hover:not(:disabled)": { bgcolor: COLORS.s2 },
+        "&.Mui-disabled": { opacity: 0.7 },
+      }}
+    >
+      <Box component="span" sx={{ minWidth: 96, fontSize: 10, color: current ? COLORS.gray : PINK }}>
+        {role}
+      </Box>
+      <Box
+        component="span"
+        sx={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+      >
+        {name}
+      </Box>
+      <Box component="span" sx={{ fontSize: 11, color: COLORS.gray }}>
+        {upc}
+      </Box>
+    </ButtonBase>
+    {action}
+  </Stack>
+);
+
+const Note = ({ children }) => (
+  <Typography sx={{ m: 0, fontFamily: FONTS.Raleway_500, fontSize: 11, color: COLORS.gray }}>
+    {children}
+  </Typography>
+);
+
+const FamilyBox = ({ open, children }) => (
+  <Collapse in={open} unmountOnExit>
+    <Paper
+      variant="outlined"
+      sx={{ display: "flex", flexDirection: "column", gap: "4px", mb: "10px", p: 1, borderColor: COLORS.s2, borderRadius: "6px" }}
+    >
+      {children}
+    </Paper>
+  </Collapse>
+);
+
+export const VariantsPanel = ({
+  product,
+  // padre/hijo
+  esHijoDeOtro,
+  hijosDelProducto,
+  family,
+  showFamily,
+  setShowFamily,
+  loadFamily,
+  loadingVariant,
+  avisoFamilia,
+  openFamilyMember,
+  setPorDesvincular,
+  setShowLinkVariants,
+  // agrupación
+  puedeAgruparse,
+  variantGroup,
+  showGroup,
+  setShowGroup,
+  setShowGroupModal,
+  handleOnLeaveGroup,
+}) => {
+  const toggleFamily = () => {
+    setShowFamily((abierto) => !abierto);
+    loadFamily();
+  };
+  const opening = (articleId, label) => (loadingVariant === articleId ? "Abriendo…" : label);
+  const otherMembers = (variantGroup?.members ?? []).filter((miembro) => !miembro.isCurrent);
+
+  return (
+    <Box sx={{ minWidth: 0 }}>
+      {/* Solo si el producto NO es ya hijo de alguien: ligarlo otra vez
+          devolvería VARIANT_ALREADY_LINKED sin excepción. */}
+      <Stack direction="row" flexWrap="wrap" alignItems="center" gap="10px" sx={{ mb: 1 }}>
+        {!esHijoDeOtro && (
+          <OutlineButton onClick={() => setShowLinkVariants(true)}>Ligar productos</OutlineButton>
+        )}
+        {!esHijoDeOtro && hijosDelProducto > 0 && (
+          <ToggleLink open={showFamily} onClick={toggleFamily}>
+            {hijosDelProducto} hijo{hijosDelProducto === 1 ? "" : "s"}
+          </ToggleLink>
+        )}
+        {esHijoDeOtro && (
+          <ToggleLink open={showFamily} onClick={toggleFamily}>
+            Hijo de otro producto
+          </ToggleLink>
+        )}
+      </Stack>
+
+      <FamilyBox open={showFamily}>
+        {!family && <Note>Cargando familia…</Note>}
+        {family?.error && <Note>No se pudo cargar la familia de este producto.</Note>}
+
+        {/* Desvincular se ofrece donde se ve el vínculo, y solo en la dirección
+            que corresponde: desde un hijo, sobre su padre; desde un padre, sobre
+            cada hijo. A un hermano no: para eso se abre su ficha. */}
+        {family?.parent && (
+          <FamilyRow
+            role={opening(family.parent.articleId, "Producto padre")}
+            name={family.parent.name}
+            upc={family.parent.upc}
+            disabled={loadingVariant !== null}
+            onOpen={() => openFamilyMember(family.parent.articleId)}
+            action={
+              <SmallLink
+                title="Dejar de ser hijo de este producto"
+                onClick={() =>
+                  setPorDesvincular({
+                    mode: "self",
+                    childArticleId: product?.id_article,
+                    childName: product?.name,
+                    childUpc: product?.upc,
+                    parentName: family.parent.name,
+                    parentUpc: family.parent.upc,
+                  })
+                }
+              >
+                Desvincular
+              </SmallLink>
+            }
+          />
+        )}
+
+        {family?.variants?.map((variant) => (
+          <FamilyRow
+            key={variant.articleId}
+            role={opening(variant.articleId, variant.isCurrent ? "Estás aquí" : "Hijo")}
+            name={variant.name}
+            upc={variant.upc}
+            current={variant.isCurrent}
+            disabled={variant.isCurrent || loadingVariant !== null}
+            onOpen={() => openFamilyMember(variant.articleId)}
+            action={
+              // Solo cuando esta ficha ES el padre: si hay `parent`, lo que se
+              // lista son hermanos.
+              !family.parent && !variant.isCurrent ? (
+                <SmallLink
+                  title="Desvincular este hijo"
+                  onClick={() =>
+                    setPorDesvincular({
+                      mode: "child",
+                      childArticleId: variant.articleId,
+                      childName: variant.name,
+                      childUpc: variant.upc,
+                      parentName: product?.name,
+                      parentUpc: product?.upc,
+                    })
+                  }
+                >
+                  Desvincular
+                </SmallLink>
+              ) : null
+            }
+          />
+        ))}
+
+        {family && !family.error && !family.variants?.length && <Note>Este producto no tiene hijos.</Note>}
+        {avisoFamilia && <Note>{avisoFamilia}</Note>}
+      </FamilyBox>
+
+      {puedeAgruparse && (
+        <>
+          <Stack direction="row" flexWrap="wrap" alignItems="center" gap="10px" sx={{ mb: 1 }}>
+            <OutlineButton onClick={() => setShowGroupModal(true)}>
+              {variantGroup?.group ? "Cambiar de grupo" : "Agrupar variantes"}
+            </OutlineButton>
+            {variantGroup?.group && (
+              <ToggleLink open={showGroup} onClick={() => setShowGroup((abierto) => !abierto)}>
+                Variante {variantGroup.group}
+              </ToggleLink>
+            )}
+          </Stack>
+
+          <FamilyBox open={showGroup && Boolean(variantGroup?.group)}>
+            {otherMembers.map((miembro) => (
+              <FamilyRow
+                key={miembro.articleId}
+                role={opening(miembro.articleId, "Variante")}
+                name={miembro.name}
+                upc={miembro.upc}
+                disabled={loadingVariant !== null}
+                onOpen={() => openFamilyMember(miembro.articleId)}
+              />
+            ))}
+            {otherMembers.length === 0 && (
+              <Note>Este producto es el único en el grupo {variantGroup?.group}.</Note>
+            )}
+            <Box>
+              <SmallLink title="Quitar este producto del grupo" onClick={handleOnLeaveGroup}>
+                Quitar del grupo
+              </SmallLink>
+            </Box>
+          </FamilyBox>
+        </>
+      )}
+    </Box>
+  );
+};

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

@@ -0,0 +1,357 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+import {
+  Box,
+  Button,
+  ButtonBase,
+  Dialog,
+  Drawer,
+  FormControl,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import CloseIcon from "@mui/icons-material/Close";
+
+import nullIcon from "../../../../assets/images/versionSelector/nullIcon.svg";
+import acceptIcon from "../../../../assets/images/versionSelector/acceptIcon.svg";
+import versionSelected from "../../../../assets/images/versionSelector/versionSelected.svg";
+import createVersionImg from "../../../../assets/images/versionSelector/createVersion.svg";
+import warningIcon from "../../../../assets/images/genericModal/genericModalWarning.svg";
+
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Versiones del producto: lista, cambio de versión y creación de una nueva.
+
+  Reemplaza a `organisms/VersionSelector` (+ VersionItem y CreateVersion) con
+  los mismos props, las mismas llamadas y el mismo diseño oscuro, hecho con el
+  Drawer y el Dialog de MUI. El original era un panel `absolute` de 300px que
+  en celular tapaba media pantalla sin poder cerrarse tocando fuera; aquí en
+  celular ocupa todo el ancho.
+
+  El diálogo de nueva versión va con `disablePortal` para quedar dentro del
+  panel en el DOM.
+*/
+
+const WHITE_BUTTON = {
+  textTransform: "none",
+  borderRadius: "20px",
+  minHeight: 40,
+  flex: "1 1 0",
+  fontFamily: FONTS.Raleway_500,
+  color: COLORS.white,
+  border: `1px solid ${COLORS.white}`,
+  "&:hover": { bgcolor: "rgba(255,255,255,0.08)" },
+};
+
+const PINK_BUTTON = {
+  ...WHITE_BUTTON,
+  border: 0,
+  bgcolor: COLORS.magenta_s2,
+  "&:hover": { bgcolor: COLORS.secondary_magenta },
+};
+
+const exportedText = (timestamp) =>
+  timestamp ? `Última vez exportado: ${new Date(timestamp).toLocaleDateString()}` : "";
+
+// --- Una versión de la lista ----------------------------------------------
+
+const VersionRow = ({ item, isCurrent, companyName, onSelect }) => {
+  const validated = Boolean(item.article_status);
+  const text = { fontFamily: FONTS.AvenirNext, fontSize: 12, color: COLORS.s2 };
+
+  return (
+    <Box sx={{ pb: "5px", borderBottom: `1px solid ${COLORS.s4}` }}>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Tooltip title={isCurrent ? "Versión actual" : "Usar esta versión"} arrow>
+          <span>
+            <ButtonBase
+              aria-label={`Usar la versión ${item.version}`}
+              disabled={isCurrent}
+              onClick={() => onSelect(item.version)}
+              sx={{ borderRadius: "50%", opacity: isCurrent ? 0.4 : 1 }}
+            >
+              <Box component="img" src={versionSelected} alt="" sx={{ width: 30, height: 30 }} />
+            </ButtonBase>
+          </span>
+        </Tooltip>
+        <Box
+          component="img"
+          src={validated ? acceptIcon : nullIcon}
+          alt={validated ? "Versión validada" : "Versión sin validar"}
+        />
+      </Stack>
+      <Stack alignItems="flex-end" gap="5px" sx={{ textAlign: "right" }}>
+        <Typography sx={{ fontFamily: FONTS.Raleway_600, fontSize: 16, color: COLORS.magenta_s2 }}>
+          Versión {item.version}
+        </Typography>
+        {item.timestamp && <Typography sx={text}>{exportedText(item.timestamp)}</Typography>}
+        <Typography sx={text}>
+          {isCurrent ? "Versión actual" : validated ? "Edición Content-Oh!" : `Versión de ${companyName}`}
+        </Typography>
+        <Typography sx={text}>{validated ? "Content-Oh! digital" : companyName}</Typography>
+      </Stack>
+    </Box>
+  );
+};
+
+// --- Nueva versión -------------------------------------------------------
+
+const CONTENT_SELECTS = [
+  { id: "datasheet", label: "Ficha técnica" },
+  { id: "description", label: "Descripción" },
+  { id: "image", label: "Imágenes" },
+];
+
+const CreateVersionDialog = ({ open, onClose, articleId, currentVersion, versions, jwt, onCreated }) => {
+  const [step, setStep] = useState("options");
+  const [selected, setSelected] = useState({});
+  const [saving, setSaving] = useState(false);
+  const isPhone = useMediaQuery("(max-width:599.95px)");
+
+  useEffect(() => {
+    if (open) {
+      setStep("options");
+      setSelected({ datasheet: currentVersion, description: currentVersion, image: currentVersion });
+    }
+  }, [open, currentVersion]);
+
+  // Mismo POST que `CreateVersion`.
+  const createVersion = async (isEmpty) => {
+    setSaving(true);
+    try {
+      const data = { articleId, isEmpty };
+      if (!isEmpty) data.version = selected;
+      await axios.post(process.env.REACT_APP_VERSIONS_ENDPOINT, data, {
+        headers: { Authorization: jwt },
+      });
+      onClose();
+      onCreated();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const title = (text) => (
+    <Typography sx={{ fontFamily: FONTS.Raleway_500, fontSize: 22, lineHeight: 1.3 }}>{text}</Typography>
+  );
+  const subtitle = (text) => (
+    <Typography sx={{ fontFamily: FONTS.Raleway, fontSize: 16, lineHeight: 1.4 }}>{text}</Typography>
+  );
+
+  const steps = {
+    options: (
+      <>
+        <Box component="img" src={createVersionImg} alt="" sx={{ mx: "auto" }} />
+        {title("Crea una nueva versión")}
+        {subtitle("Puedes elegir el contenido de versiones anteriores o crear una versión desde cero")}
+        <Stack direction={{ xs: "column", sm: "row" }} gap={2}>
+          <Button sx={WHITE_BUTTON} onClick={() => setStep("empty")}>
+            Versión desde cero
+          </Button>
+          <Button sx={PINK_BUTTON} onClick={() => setStep("custom")}>
+            Versión personalizada
+          </Button>
+        </Stack>
+      </>
+    ),
+    empty: (
+      <>
+        <Box component="img" src={warningIcon} alt="" sx={{ mx: "auto" }} />
+        {title("Si creas una versión desde cero perderás la información actual")}
+        {subtitle("¿Deseas continuar?")}
+        <Stack direction={{ xs: "column", sm: "row" }} gap={2}>
+          <Button sx={WHITE_BUTTON} onClick={() => setStep("options")}>
+            Atrás
+          </Button>
+          <Button sx={PINK_BUTTON} disabled={saving} onClick={() => createVersion(true)}>
+            Continuar
+          </Button>
+        </Stack>
+      </>
+    ),
+    custom: (
+      <>
+        {subtitle("Elige el contenido que deseas utilizar de versiones anteriores")}
+        <Stack gap={2}>
+          {CONTENT_SELECTS.map(({ id, label }) => (
+            <FormControl key={id} size="small" fullWidth>
+              <InputLabel id={`${id}-label`} sx={{ color: COLORS.s3, "&.Mui-focused": { color: COLORS.white } }}>
+                {label}
+              </InputLabel>
+              <Select
+                labelId={`${id}-label`}
+                label={label}
+                value={selected[id] ?? ""}
+                onChange={(e) => setSelected((prev) => ({ ...prev, [id]: parseInt(e.target.value) }))}
+                MenuProps={{ disablePortal: true }}
+                sx={{
+                  color: COLORS.white,
+                  textAlign: "left",
+                  "& .MuiOutlinedInput-notchedOutline": { borderColor: COLORS.s4 },
+                  "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: COLORS.s3 },
+                  "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: COLORS.magenta_s2 },
+                  "& .MuiSvgIcon-root": { color: COLORS.white },
+                }}
+              >
+                {versions.map((item) => (
+                  <MenuItem key={`${id}-${item.version}`} value={item.version}>
+                    Versión {item.version}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          ))}
+        </Stack>
+        <Stack direction={{ xs: "column", sm: "row" }} gap={2}>
+          <Button sx={WHITE_BUTTON} onClick={() => setStep("options")}>
+            Atrás
+          </Button>
+          <Button sx={PINK_BUTTON} disabled={saving} onClick={() => createVersion(false)}>
+            Continuar
+          </Button>
+        </Stack>
+      </>
+    ),
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      disablePortal
+      fullScreen={isPhone}
+      maxWidth={false}
+      PaperProps={{
+        id: "create-version",
+        sx: {
+          width: { sm: "min(600px, calc(100% - 64px))" },
+          bgcolor: COLORS.deep_gray,
+          color: COLORS.white,
+          borderRadius: { xs: 0, sm: "39px" },
+          p: { xs: "56px 20px 24px", sm: "40px" },
+          justifyContent: { xs: "center", sm: "flex-start" },
+        },
+      }}
+    >
+      <IconButton
+        aria-label="Cerrar"
+        onClick={onClose}
+        sx={{ position: "absolute", top: 16, right: 16, color: COLORS.white }}
+      >
+        <CloseIcon />
+      </IconButton>
+      <Stack gap={2.5} sx={{ textAlign: "center" }}>
+        {steps[step]}
+      </Stack>
+    </Dialog>
+  );
+};
+
+// --- Panel ---------------------------------------------------------------
+
+export const VersionDrawer = ({
+  open,
+  modalId = "version-selector",
+  articleId,
+  setVersion,
+  companyName,
+  currentVersion,
+  setShowVersionSelector,
+  jwt,
+}) => {
+  const [versions, setVersions] = useState([]);
+  const [showCreate, setShowCreate] = useState(false);
+  const [reload, setReload] = useState(0);
+
+  // Misma llamada que `VersionSelector`.
+  useEffect(() => {
+    if (!open) return undefined;
+    let active = true;
+    axios
+      .get(`${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`, {
+        headers: { Authorization: jwt },
+      })
+      .then((response) => active && setVersions(JSON.parse(response.data.body).data ?? []))
+      .catch((error) => console.error(error));
+    return () => {
+      active = false;
+    };
+  }, [open, articleId, jwt, reload]);
+
+  useEffect(() => {
+    if (!open) setShowCreate(false);
+  }, [open]);
+
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={() => setShowVersionSelector(false)}
+      PaperProps={{
+        id: modalId,
+        sx: {
+          width: { xs: "100%", sm: 300 },
+          bgcolor: COLORS.deep_gray,
+          color: COLORS.white,
+          p: "15px",
+        },
+      }}
+    >
+      <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 2 }}>
+        <Typography sx={{ fontFamily: FONTS.Lato, fontSize: 18 }}>Versión del producto</Typography>
+        <Stack direction="row" gap={1}>
+          <Tooltip title="Nueva versión" arrow>
+            <IconButton
+              id="add-version"
+              aria-label="Nueva versión"
+              onClick={() => setShowCreate(true)}
+              sx={{ color: COLORS.white, border: `1px solid ${COLORS.s4}`, width: 32, height: 32 }}
+            >
+              <AddIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+          <IconButton
+            id="close-button"
+            aria-label="Cerrar"
+            onClick={() => setShowVersionSelector(false)}
+            sx={{ color: COLORS.white, border: `1px solid ${COLORS.s4}`, width: 32, height: 32 }}
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Stack>
+      </Stack>
+
+      <Stack gap="18px">
+        {versions.map((item) => (
+          <VersionRow
+            key={item.version}
+            item={item}
+            isCurrent={item.version === currentVersion}
+            companyName={companyName}
+            onSelect={setVersion}
+          />
+        ))}
+      </Stack>
+
+      <CreateVersionDialog
+        open={showCreate}
+        onClose={() => setShowCreate(false)}
+        articleId={articleId}
+        currentVersion={currentVersion}
+        versions={versions}
+        jwt={jwt}
+        onCreated={() => setReload((n) => n + 1)}
+      />
+    </Drawer>
+  );
+};