contentoh-components-library 21.6.57 → 21.6.59

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

@@ -0,0 +1,385 @@
+import { Box, Checkbox, Chip, Link, Stack, Tab, Tabs, Typography } from "@mui/material";
+
+import { GalleryElement } from "../../../molecules/GalleryElement";
+import { TRAYS } from "../../../molecules/GalleryTrayTabs";
+import { DigitalAssetsTray } from "../../../organisms/DigitalAssetsTray";
+
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Pestaña Imágenes: bandejas (imágenes / activos digitales), cabecera de la
+  lista con "seleccionar todo", la galería con su zona para soltar archivos, y
+  el estado vacío.
+
+  Reemplaza a GalleryTrayTabs, GalleryHeader y el marcado de la galería de la
+  vista original. Se reutilizan tal cual las tarjetas (`GalleryElement`, con sus
+  selects de tipo y empaque) y la bandeja de activos (`DigitalAssetsTray`): son
+  componentes grandes con lógica propia y rehacerlos sería reinventarlos.
+
+  Dos cosas que las tarjetas exigen y que por eso se conservan:
+    - Una casilla global con id `check-all-images`. Cada tarjeta la busca por
+      id al marcarse; si no existe, marcar una imagen lanza un error.
+    - "Seleccionar todo" marca las casillas de las tarjetas directamente en el
+      DOM (`[id^='gallery-element-']`), igual que GalleryHeader.
+*/
+
+// Columnas de la lista, calcadas de GalleryHeader para que queden alineadas con
+// las filas de GalleryElement.
+const LIST_COLUMNS = [
+  { label: "Imagen", pl: 0 },
+  { label: "Nombre", pl: "1.75rem" },
+  { label: "Tamaño", pl: "2.75rem" },
+  { label: "Formato", pl: "4.5rem" },
+  { label: "¿Tiene leyenda?", ml: "-1rem" },
+  { label: "Tipo de toma" },
+];
+
+// La lista es una tabla de columnas fijas: por debajo de este ancho se desplaza
+// de lado dentro de su caja en vez de aplastar las columnas.
+const LIST_MIN_WIDTH = 760;
+
+const TrayTabs = ({ activeTray, setActiveTray, imagesCount, assetsCount }) => {
+  const trays = [
+    { id: TRAYS.IMAGES, label: "Imágenes", count: imagesCount },
+    { id: TRAYS.ASSETS, label: "Activos digitales", count: assetsCount },
+  ];
+  return (
+    <Tabs
+      value={activeTray}
+      onChange={(_, tray) => setActiveTray?.(tray)}
+      variant="scrollable"
+      scrollButtons={false}
+      TabIndicatorProps={{ sx: { bgcolor: COLORS.color_purple, height: 2 } }}
+      sx={{ minHeight: 36, pt: 1 }}
+    >
+      {trays.map((tray) => {
+        const active = tray.id === activeTray;
+        return (
+          <Tab
+            key={tray.id}
+            value={tray.id}
+            disableRipple
+            label={
+              <Stack direction="row" alignItems="center" gap="6px">
+                {tray.label}
+                <Chip
+                  label={tray.count}
+                  size="small"
+                  sx={{
+                    height: 18,
+                    minWidth: 20,
+                    fontFamily: FONTS.Lato,
+                    fontSize: 11,
+                    bgcolor: active ? COLORS.color_purple : COLORS.s2,
+                    color: active ? COLORS.white : COLORS.s5,
+                    "& .MuiChip-label": { px: "6px" },
+                  }}
+                />
+              </Stack>
+            }
+            sx={{
+              minHeight: 36,
+              px: "14px",
+              py: "6px",
+              textTransform: "none",
+              fontFamily: FONTS.AvenirNext,
+              fontSize: 14,
+              letterSpacing: "-0.015em",
+              color: COLORS.s4,
+              "&.Mui-selected": { color: COLORS.s5, fontWeight: 600 },
+            }}
+          />
+        );
+      })}
+    </Tabs>
+  );
+};
+
+/*
+  La casilla global se deriva de la selección real y no de
+  `state.all_image_checked`: el reducer nunca pone ese valor en true
+  (TOGGLE_CHECK_ALL_IMAGES solo llena `selected_images`). En la vista original no
+  se nota porque su casilla no está controlada por React y guarda su estado en
+  el DOM; controlada con ese valor, se quedaría siempre desmarcada.
+*/
+const ListHeader = ({ selectedCount, totalCount, setCheckAll, setSelectedImages }) => {
+  const allSelected = totalCount > 0 && selectedCount >= totalCount;
+  const someSelected = selectedCount > 0 && !allSelected;
+
+  const toggleAll = (e) => {
+    const checked = e.target.checked;
+    document
+      .querySelectorAll("[id^='gallery-element-']")
+      .forEach((chk) => (chk.checked = checked));
+    setCheckAll(checked);
+    if (!checked) setSelectedImages([]);
+  };
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", width: "100%", py: "10px" }}>
+      <Box sx={{ width: "5.25%", minWidth: 36 }}>
+        <Checkbox
+          size="small"
+          checked={allSelected}
+          indeterminate={someSelected}
+          onChange={toggleAll}
+          inputProps={{ id: "check-all-images", "aria-label": "Seleccionar todas las imágenes" }}
+          sx={{
+            p: "4px",
+            color: COLORS.s3,
+            "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: COLORS.magenta_s2 },
+          }}
+        />
+      </Box>
+      <Box
+        sx={{
+          width: "90%",
+          display: "grid",
+          gridTemplateColumns: "0.1fr 1fr 1fr 1fr 1fr 1fr",
+        }}
+      >
+        {LIST_COLUMNS.map((column) => (
+          <Typography
+            key={column.label}
+            sx={{
+              pl: column.pl,
+              ml: column.ml,
+              textAlign: "center",
+              fontFamily: FONTS.AvenirNext,
+              fontWeight: 600,
+              fontSize: 14,
+              lineHeight: "21px",
+              letterSpacing: "-0.015em",
+              color: COLORS.s5,
+            }}
+          >
+            {column.label}
+          </Typography>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export const ImagesSection = ({
+  imagesValues,
+  selectedImages,
+  imageLayout,
+  // bandejas
+  enableDigitalAssets,
+  currentTray,
+  setActiveTray,
+  digitalAssets,
+  unsavedAssets,
+  selectedAssets,
+  setSelectedAssets,
+  setAllAssetsChecked,
+  // permisos
+  canEdit,
+  // imágenes
+  setCheckAll,
+  setSelectedImages,
+  onChangeCurrentImage,
+  onUpdateImage,
+  onSelectImage,
+  // zona para soltar archivos (react-dropzone, desde el hook)
+  getRootProps,
+  getInputProps,
+  isDragActive,
+  openFilePicker,
+}) => {
+  const images = imagesValues?.values ?? [];
+
+  const imageInputs = imagesValues?.inputs?.map((e) => ({
+    value: e?.id,
+    name: e?.name,
+    required: e?.required,
+    active: images.some((value) => value?.image_id === e?.id),
+  }));
+  const imageType = imagesValues?.imageType?.map((e) => ({ value: e?.id, name: e?.name }));
+  const imagePackagingType = imagesValues?.imagePackagingType?.map((e) => ({
+    value: e?.id,
+    name: e?.name,
+  }));
+
+  const cards = images.map((image, index) => (
+    <GalleryElement
+      id={"gallery-element-" + index}
+      index={index + "-" + image.name}
+      key={index}
+      image={image}
+      number={index}
+      gridLayout={imageLayout}
+      imageType={imageType}
+      imagePackagingType={imagePackagingType}
+      imageInputs={imageInputs}
+      selectedImages={selectedImages}
+      setCheckAll={setCheckAll}
+      changeImage={onUpdateImage}
+      setSelectedImages={onSelectImage}
+      updateApprovedInputsImages={(item) => console.log("updateApprovedInputsImages", item)}
+      onSelect={() => onChangeCurrentImage(index)}
+    />
+  ));
+
+  return (
+    <Box sx={{ minWidth: 0 }}>
+      {enableDigitalAssets && (
+        <TrayTabs
+          activeTray={currentTray}
+          setActiveTray={setActiveTray}
+          imagesCount={images.length}
+          assetsCount={digitalAssets?.assets?.length ?? 0}
+        />
+      )}
+
+      {currentTray === TRAYS.ASSETS && (
+        <Box sx={{ position: "relative", minWidth: 0 }}>
+          <DigitalAssetsTray
+            {...digitalAssets}
+            unsaved={unsavedAssets}
+            gridLayout={imageLayout}
+            readOnly={!canEdit}
+            selectedAssets={selectedAssets}
+            setSelectedAssets={setSelectedAssets}
+            setCheckAll={setAllAssetsChecked}
+          />
+        </Box>
+      )}
+
+      {currentTray === TRAYS.IMAGES && (
+        <Box sx={{ overflowX: imageLayout ? "visible" : "auto", WebkitOverflowScrolling: "touch" }}>
+          <Box sx={{ minWidth: imageLayout || images.length === 0 ? 0 : LIST_MIN_WIDTH }}>
+            {!imageLayout && images.length > 0 ? (
+              <ListHeader
+                selectedCount={selectedImages?.length ?? 0}
+                totalCount={images.length}
+                setCheckAll={setCheckAll}
+                setSelectedImages={setSelectedImages}
+              />
+            ) : (
+              /* Sin cabecera (cuadrícula o sin imágenes) las tarjetas siguen
+                 buscando `#check-all-images` al marcarse. En la vista original,
+                 en cuadrícula no existe: marcar una imagen lanza un TypeError y
+                 la selección no se guarda. Esta casilla oculta lo evita. */
+              <input type="checkbox" id="check-all-images" hidden readOnly aria-hidden="true" />
+            )}
+
+            <Box sx={{ position: "relative" }}>
+              <Box
+                {...getRootProps()}
+                sx={{
+                  position: "relative",
+                  minHeight: { xs: 160, md: 240 },
+                  borderRadius: "8px",
+                  border: "2px dashed transparent",
+                  transition: "all 0.3s ease",
+                  ...(isDragActive && {
+                    bgcolor: `rgba(${COLORS.rgb_color_pink}, 0.05)`,
+                    borderColor: COLORS.color_pink,
+                  }),
+                }}
+              >
+                <input {...getInputProps()} />
+                {isDragActive && (
+                  <Box
+                    sx={{
+                      position: "absolute",
+                      inset: 0,
+                      zIndex: 10,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      bgcolor: `rgba(${COLORS.rgb_color_pink}, 0.1)`,
+                      borderRadius: "8px",
+                      pointerEvents: "none",
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        fontFamily: FONTS.AvenirNext,
+                        fontSize: { xs: 18, sm: 24 },
+                        fontWeight: 600,
+                        color: COLORS.color_pink,
+                        textAlign: "center",
+                        p: 2.5,
+                        bgcolor: COLORS.white,
+                        borderRadius: "8px",
+                        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                      }}
+                    >
+                      Suelta las imágenes aquí
+                    </Typography>
+                  </Box>
+                )}
+
+                <Box
+                  component="aside"
+                  sx={
+                    imageLayout
+                      ? {
+                          display: "grid",
+                          gridTemplateColumns: {
+                            xs: "repeat(2, minmax(0, 1fr))",
+                            sm: "repeat(auto-fill, 179px)",
+                          },
+                          justifyContent: "center",
+                          gap: { xs: 1, sm: "15px" },
+                          p: { xs: "12px 0", sm: "20px" },
+                          opacity: isDragActive ? 0.3 : 1,
+                          pointerEvents: isDragActive ? "none" : "auto",
+                          // En celular dos tarjetas por fila: las de 179px fijos
+                          // se estiran a su columna.
+                          "@media (max-width: 599.95px)": {
+                            // !important: el estilo propio de la tarjeta (dos
+                            // clases) le gana a este selector.
+                            "& > *": { width: "100% !important" },
+                            "& img, & video": {
+                              width: "100% !important",
+                              height: "auto !important",
+                              aspectRatio: "1 / 1",
+                            },
+                          },
+                        }
+                      : { opacity: isDragActive ? 0.3 : 1 }
+                  }
+                >
+                  {cards}
+                </Box>
+
+                {images.length === 0 && (
+                  <Box
+                    sx={{
+                      position: { xs: "static", md: "absolute" },
+                      top: "50%",
+                      left: "50%",
+                      transform: { md: "translate(-50%, -50%)" },
+                      width: { xs: "100%", md: "80%" },
+                      maxWidth: 500,
+                      mx: "auto",
+                      p: { xs: "24px 8px", md: "40px" },
+                      textAlign: "center",
+                      boxSizing: "border-box",
+                    }}
+                  >
+                    <Typography sx={{ fontSize: 18, color: "#666", mb: 2 }}>
+                      Este producto no tiene imágenes
+                    </Typography>
+                    {canEdit && (
+                      <Typography sx={{ fontSize: 14, color: "#999", mb: 2.5 }}>
+                        Arrastra las imágenes aquí o{" "}
+                        <Link component="button" type="button" onClick={openFilePicker}>
+                          haz clic para abrir el explorador de archivos
+                        </Link>
+                      </Typography>
+                    )}
+                  </Box>
+                )}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};

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

@@ -0,0 +1,111 @@
+import { Box, Button, Dialog, IconButton, Stack, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+import { COLORS, FONTS } from "./tokens";
+
+/*
+  Aviso de la edición de producto (guardado, error, confirmaciones).
+
+  Reemplaza a `atoms/GenericModal` + ScreenHeader con el mismo `state.modal`
+  (`image`, `title`, `message`, `buttons`) y el mismo diseño oscuro, hecho con
+  el Dialog de MUI: en celular no se sale de la pantalla (el original medía
+  500px fijos) y se cierra con Escape o tocando fuera.
+
+  Los botones llegan con los `buttonType` de GeneralButton; se traducen a los
+  dos estilos que usa la pantalla: contorno blanco o relleno magenta.
+*/
+
+const pill = {
+  minWidth: 140,
+  height: 40,
+  borderRadius: "20px",
+  textTransform: "none",
+  fontFamily: FONTS.Raleway_500,
+  fontSize: 14,
+  boxShadow: "none",
+  "&:hover": { boxShadow: "none" },
+};
+
+const buttonSx = (buttonType = "") =>
+  buttonType.includes("white")
+    ? {
+        ...pill,
+        color: COLORS.s2,
+        border: `1px solid ${COLORS.white}`,
+        "&:hover": { ...pill["&:hover"], bgcolor: "rgba(255,255,255,0.08)" },
+      }
+    : {
+        ...pill,
+        color: COLORS.white,
+        bgcolor: COLORS.magenta_s2,
+        "&:hover": { ...pill["&:hover"], bgcolor: COLORS.secondary_magenta },
+      };
+
+export const NoticeDialog = ({ modal = {}, onClose }) => {
+  const { show, image, title, message, buttons } = modal;
+
+  return (
+    <Dialog
+      open={Boolean(show)}
+      onClose={onClose}
+      fullWidth
+      maxWidth={false}
+      PaperProps={{
+        sx: {
+          width: "min(500px, calc(100% - 32px))",
+          m: 2,
+          bgcolor: COLORS.deep_gray,
+          borderRadius: "15px",
+          p: { xs: "40px 20px 30px", sm: "40px" },
+          textAlign: "center",
+          color: COLORS.white,
+        },
+      }}
+    >
+      <IconButton
+        aria-label="Cerrar"
+        onClick={onClose}
+        size="small"
+        sx={{ position: "absolute", top: 12, right: 12, color: COLORS.white }}
+      >
+        <CloseIcon fontSize="small" />
+      </IconButton>
+
+      <Stack alignItems="center" gap={2.5}>
+        {image && <Box component="img" src={image} alt="" sx={{ maxWidth: 64, maxHeight: 64 }} />}
+        {title && (
+          <Typography sx={{ fontFamily: FONTS.Raleway_600, fontSize: 18, lineHeight: 1.3 }}>
+            {title}
+          </Typography>
+        )}
+        {message && (
+          <Typography
+            sx={{
+              fontFamily: FONTS.Raleway,
+              fontSize: 16,
+              lineHeight: 1.4,
+              whiteSpace: "pre-wrap",
+              overflowWrap: "anywhere",
+            }}
+          >
+            {message}
+          </Typography>
+        )}
+        {buttons?.length > 0 && (
+          <Stack
+            direction={{ xs: "column", sm: "row" }}
+            justifyContent="center"
+            gap={2}
+            sx={{ mt: 1, width: { xs: "100%", sm: "auto" } }}
+          >
+            {buttons.map((button, index) => (
+              <Button key={index} onClick={button.action} sx={buttonSx(button.buttonType)}>
+                {button.text}
+              </Button>
+            ))}
+          </Stack>
+        )}
+      </Stack>
+    </Dialog>
+  );
+};