contentoh-components-library 21.6.57 → 21.6.59

package/dist/components/pages/CreatorsProductEdition/sections/ImageGallery.js

@@ -0,0 +1,433 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageGallery = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _ChevronLeft = _interopRequireDefault(require("@mui/icons-material/ChevronLeft"));
+
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
+
+var _react2 = require("swiper/react");
+
+var _swiper = require("swiper");
+
+require("swiper/swiper.min.css");
+
+var _acceptIcon = _interopRequireDefault(require("../../../../assets/images/generalButton/acceptIcon.svg"));
+
+var _rejectIcon = _interopRequireDefault(require("../../../../assets/images/generalButton/rejectIcon.svg"));
+
+var _nullIcon = _interopRequireDefault(require("../../../../assets/images/generalButton/nullIcon.svg"));
+
+var _ProductMedia = require("./ProductMedia");
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Galería de imágenes en grande.
+
+  Reemplaza a `organisms/ProductImageModal` con los mismos props y hecho con el
+  Dialog de MUI. El original ponía la imagen y un panel de 375px mínimo lado a
+  lado, así que en celular no cabía. Aquí:
+    - en desktop, imagen a la izquierda y datos + miniaturas a la derecha;
+    - en celular, pantalla completa: imagen arriba y datos debajo.
+  Se navega con las flechas del teclado o con los botones sobre la imagen.
+
+  La imagen grande es la original de S3 (`srcDB`), como en el original; las
+  miniaturas usan la versión reducida (`src`). Una imagen recién agregada aún
+  no tiene `srcDB`, así que se usa su `src` local.
+*/
+var bucketUrl = function bucketUrl(image) {
+  return image !== null && image !== void 0 && image.srcDB ? "https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(image.srcDB) : image === null || image === void 0 ? void 0 : image.src;
+};
+
+var VALIDATION_ICONS = {
+  approve: _acceptIcon.default,
+  reject: _rejectIcon.default
+};
+
+var DataRow = function DataRow(_ref) {
+  var label = _ref.label,
+      value = _ref.value;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    gap: 2,
+    sx: {
+      py: "3px"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        fontFamily: _tokens.FONTS.AvenirNext,
+        fontSize: 12,
+        color: _tokens.COLORS.s3
+      },
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        fontFamily: _tokens.FONTS.AvenirNext,
+        fontSize: 12,
+        color: _tokens.COLORS.white,
+        textAlign: "right",
+        overflowWrap: "anywhere"
+      },
+      children: value || "-"
+    })]
+  });
+};
+
+var arrowSx = {
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  bgcolor: "rgba(40, 31, 51, 0.55)",
+  color: _tokens.COLORS.white,
+  "&:hover": {
+    bgcolor: "rgba(40, 31, 51, 0.8)"
+  }
+};
+
+var ImageGallery = function ImageGallery(_ref2) {
+  var _images$values, _images$inputs, _images$inputs$find, _VALIDATION_ICONS$val;
+
+  var _ref2$open = _ref2.open,
+      open = _ref2$open === void 0 ? true : _ref2$open,
+      _ref2$images = _ref2.images,
+      images = _ref2$images === void 0 ? {} : _ref2$images,
+      _ref2$initialIndex = _ref2.initialIndex,
+      initialIndex = _ref2$initialIndex === void 0 ? 0 : _ref2$initialIndex,
+      setShowModal = _ref2.setShowModal,
+      sendToFacilitator = _ref2.sendToFacilitator,
+      _ref2$approveRejectBu = _ref2.approveRejectButtons,
+      approveRejectButtons = _ref2$approveRejectBu === void 0 ? false : _ref2$approveRejectBu;
+  var values = (_images$values = images === null || images === void 0 ? void 0 : images.values) !== null && _images$values !== void 0 ? _images$values : [];
+
+  var _useState = (0, _react.useState)(initialIndex),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      index = _useState2[0],
+      setIndex = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      validation = _useState4[0],
+      setValidation = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      menuAnchor = _useState6[0],
+      setMenuAnchor = _useState6[1];
+
+  var isPhone = (0, _material.useMediaQuery)("(max-width:599.95px)");
+  (0, _react.useEffect)(function () {
+    if (open) setIndex(Math.min(initialIndex, Math.max(values.length - 1, 0)));
+  }, [open, initialIndex]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  var image = values[index];
+  var hasMany = values.length > 1;
+
+  var go = function go(step) {
+    return setIndex(function (i) {
+      return (i + step + values.length) % values.length;
+    });
+  };
+
+  var close = function close() {
+    return setShowModal(false);
+  };
+
+  var onKeyDown = function onKeyDown(e) {
+    if (!hasMany) return;
+    if (e.key === "ArrowRight") go(1);
+    if (e.key === "ArrowLeft") go(-1);
+  };
+
+  var validate = function validate(kind) {
+    setMenuAnchor(null);
+    setValidation(kind);
+    sendToFacilitator && sendToFacilitator(kind === "approve" ? "A" : "R");
+  };
+
+  var shotName = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : (_images$inputs$find = _images$inputs.find(function (f) {
+    return f.id === +(image === null || image === void 0 ? void 0 : image.image_id);
+  })) === null || _images$inputs$find === void 0 ? void 0 : _images$inputs$find.name;
+  var size = image !== null && image !== void 0 && image.width && image !== null && image !== void 0 && image.height ? "".concat(image.width, "x").concat(image.height, "px") : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
+    open: open,
+    onClose: close,
+    onKeyDown: onKeyDown,
+    fullScreen: isPhone,
+    maxWidth: false,
+    PaperProps: {
+      sx: {
+        m: {
+          sm: 2
+        },
+        width: {
+          sm: "min(1200px, calc(100% - 32px))"
+        },
+        height: {
+          sm: "min(760px, calc(100% - 32px))"
+        },
+        maxHeight: "none",
+        borderRadius: {
+          xs: 0,
+          sm: "4px"
+        },
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: {
+          xs: "column",
+          sm: "row"
+        },
+        bgcolor: _tokens.COLORS.deep_gray
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        position: "relative",
+        flex: {
+          xs: "0 0 auto",
+          sm: "1 1 auto"
+        },
+        height: {
+          xs: "min(60vh, 100vw)",
+          sm: "auto"
+        },
+        minWidth: 0,
+        bgcolor: _tokens.COLORS.white
+      },
+      children: [image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductMedia.ProductMedia, {
+        src: bucketUrl(image),
+        ext: image.ext,
+        alt: image.name
+      }, index) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+        alignItems: "center",
+        justifyContent: "center",
+        sx: {
+          height: "100%"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: _tokens.COLORS.s4
+          },
+          children: "Sin im\xE1genes"
+        })
+      }), hasMany && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "Imagen anterior",
+          onClick: function onClick() {
+            return go(-1);
+          },
+          sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, arrowSx), {}, {
+            left: 8
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChevronLeft.default, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "Imagen siguiente",
+          onClick: function onClick() {
+            return go(1);
+          },
+          sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, arrowSx), {}, {
+            right: 8
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChevronRight.default, {})
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      sx: {
+        flex: {
+          xs: "1 1 auto",
+          sm: "0 0 375px"
+        },
+        minHeight: 0,
+        p: "15px",
+        gap: 2,
+        overflowY: "auto",
+        color: _tokens.COLORS.white
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        gap: 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          title: image === null || image === void 0 ? void 0 : image.name,
+          sx: {
+            flex: 1,
+            minWidth: 0,
+            fontFamily: _tokens.FONTS.Raleway,
+            fontSize: 14,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          children: (image === null || image === void 0 ? void 0 : image.name) || "-"
+        }), hasMany && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+          sx: {
+            fontFamily: _tokens.FONTS.AvenirNext,
+            fontSize: 12,
+            color: _tokens.COLORS.s3
+          },
+          children: [index + 1, "/", values.length]
+        }), approveRejectButtons && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: "Validar",
+            arrow: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+              "aria-label": "Validar",
+              onClick: function onClick(e) {
+                return setMenuAnchor(e.currentTarget);
+              },
+              sx: {
+                width: 30,
+                height: 30,
+                p: 0,
+                border: "1px solid ".concat(_tokens.COLORS.s2),
+                borderRadius: "50%"
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                component: "img",
+                src: (_VALIDATION_ICONS$val = VALIDATION_ICONS[validation]) !== null && _VALIDATION_ICONS$val !== void 0 ? _VALIDATION_ICONS$val : _nullIcon.default,
+                alt: "",
+                sx: {
+                  width: 16
+                }
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Menu, {
+            anchorEl: menuAnchor,
+            open: Boolean(menuAnchor),
+            onClose: function onClose() {
+              return setMenuAnchor(null);
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+              onClick: function onClick() {
+                return validate("approve");
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  component: "img",
+                  src: _acceptIcon.default,
+                  alt: "",
+                  sx: {
+                    width: 16
+                  }
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                children: "Validado"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+              onClick: function onClick() {
+                return validate("reject");
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  component: "img",
+                  src: _rejectIcon.default,
+                  alt: "",
+                  sx: {
+                    width: 16
+                  }
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                children: "Rechazado"
+              })]
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "Cerrar",
+          onClick: close,
+          sx: {
+            width: 30,
+            height: 30,
+            color: _tokens.COLORS.white,
+            border: "1px solid ".concat(_tokens.COLORS.s2),
+            borderRadius: "3px"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+            fontSize: "small"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          borderTop: "1px solid ".concat(_tokens.COLORS.s4),
+          pt: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Tipo de toma",
+          value: shotName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Formato",
+          value: image === null || image === void 0 ? void 0 : image.ext
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Tama\xF1o de imagen",
+          value: size
+        })]
+      }), hasMany && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          mt: {
+            sm: "auto"
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
+          modules: [_swiper.FreeMode, _swiper.Mousewheel],
+          slidesPerView: "auto",
+          spaceBetween: 6,
+          freeMode: true,
+          mousewheel: {
+            forceToAxis: true
+          },
+          style: {
+            width: "100%"
+          },
+          children: values.map(function (item, i) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
+              style: {
+                width: 85
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonBase, {
+                "aria-label": "Ver imagen ".concat(i + 1),
+                "aria-pressed": i === index,
+                onClick: function onClick() {
+                  return setIndex(i);
+                },
+                sx: {
+                  width: 85,
+                  height: 55,
+                  borderRadius: "3px",
+                  overflow: "hidden",
+                  bgcolor: _tokens.COLORS.white,
+                  outline: i === index ? "2px solid ".concat(_tokens.COLORS.magenta_s2) : "none",
+                  outlineOffset: -2
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductMedia.ProductMedia, {
+                  src: item.src,
+                  ext: item.ext,
+                  alt: item.altText,
+                  thumbnail: true
+                })
+              })
+            }, "".concat(i, "-").concat(item === null || item === void 0 ? void 0 : item.name));
+          })
+        })
+      })]
+    })]
+  });
+};
+
+exports.ImageGallery = ImageGallery;

package/dist/components/pages/CreatorsProductEdition/sections/NoticeDialog.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoticeDialog = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _material = require("@mui/material");
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  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.
+*/
+var pill = {
+  minWidth: 140,
+  height: 40,
+  borderRadius: "20px",
+  textTransform: "none",
+  fontFamily: _tokens.FONTS.Raleway_500,
+  fontSize: 14,
+  boxShadow: "none",
+  "&:hover": {
+    boxShadow: "none"
+  }
+};
+
+var buttonSx = function buttonSx() {
+  var buttonType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  return buttonType.includes("white") ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill), {}, {
+    color: _tokens.COLORS.s2,
+    border: "1px solid ".concat(_tokens.COLORS.white),
+    "&:hover": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill["&:hover"]), {}, {
+      bgcolor: "rgba(255,255,255,0.08)"
+    })
+  }) : (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill), {}, {
+    color: _tokens.COLORS.white,
+    bgcolor: _tokens.COLORS.magenta_s2,
+    "&:hover": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill["&:hover"]), {}, {
+      bgcolor: _tokens.COLORS.secondary_magenta
+    })
+  });
+};
+
+var NoticeDialog = function NoticeDialog(_ref) {
+  var _ref$modal = _ref.modal,
+      modal = _ref$modal === void 0 ? {} : _ref$modal,
+      onClose = _ref.onClose;
+  var show = modal.show,
+      image = modal.image,
+      title = modal.title,
+      message = modal.message,
+      buttons = modal.buttons;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
+    open: Boolean(show),
+    onClose: onClose,
+    fullWidth: true,
+    maxWidth: false,
+    PaperProps: {
+      sx: {
+        width: "min(500px, calc(100% - 32px))",
+        m: 2,
+        bgcolor: _tokens.COLORS.deep_gray,
+        borderRadius: "15px",
+        p: {
+          xs: "40px 20px 30px",
+          sm: "40px"
+        },
+        textAlign: "center",
+        color: _tokens.COLORS.white
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      "aria-label": "Cerrar",
+      onClick: onClose,
+      size: "small",
+      sx: {
+        position: "absolute",
+        top: 12,
+        right: 12,
+        color: _tokens.COLORS.white
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      alignItems: "center",
+      gap: 2.5,
+      children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "img",
+        src: image,
+        alt: "",
+        sx: {
+          maxWidth: 64,
+          maxHeight: 64
+        }
+      }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontFamily: _tokens.FONTS.Raleway_600,
+          fontSize: 18,
+          lineHeight: 1.3
+        },
+        children: title
+      }), message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontFamily: _tokens.FONTS.Raleway,
+          fontSize: 16,
+          lineHeight: 1.4,
+          whiteSpace: "pre-wrap",
+          overflowWrap: "anywhere"
+        },
+        children: message
+      }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+        direction: {
+          xs: "column",
+          sm: "row"
+        },
+        justifyContent: "center",
+        gap: 2,
+        sx: {
+          mt: 1,
+          width: {
+            xs: "100%",
+            sm: "auto"
+          }
+        },
+        children: buttons.map(function (button, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            onClick: button.action,
+            sx: buttonSx(button.buttonType),
+            children: button.text
+          }, index);
+        })
+      })]
+    })]
+  });
+};
+
+exports.NoticeDialog = NoticeDialog;