contentoh-components-library 21.6.55 → 21.6.57

package/dist/components/organisms/DigitalAssetsTray/index.js

@@ -0,0 +1,219 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DigitalAssetsTray = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _reactDropzone = require("react-dropzone");
+
+var _styles = require("./styles");
+
+var _GalleryAssetElement = require("../../molecules/GalleryAssetElement");
+
+var _GalleryHeader = require("../../molecules/GalleryHeader");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var CHECK_ALL_ID = "check-all-assets";
+var ITEM_SELECTOR = "[id^='gallery-asset-']";
+/**
+ * Bandeja de activos digitales: soltar archivos, verlos, reetiquetarlos y
+ * quitarlos.
+ *
+ * Tiene su propio dropzone en vez de compartir el de las imágenes porque los
+ * formatos aceptados son distintos: mezclarlos dejaría soltar un PDF sobre la
+ * bandeja de fotos y un JPG sobre la de activos.
+ *
+ * No guarda ni sube nada. Recibe el estado ya armado por `useDigitalAssets`,
+ * así que cuando se defina el contrato del backend solo hay que conectarle las
+ * llamadas; la interfaz no cambia.
+ */
+
+var DigitalAssetsTray = function DigitalAssetsTray(_ref) {
+  var _ref$assets = _ref.assets,
+      assets = _ref$assets === void 0 ? [] : _ref$assets,
+      _ref$notices = _ref.notices,
+      notices = _ref$notices === void 0 ? [] : _ref$notices,
+      _ref$unsaved = _ref.unsaved,
+      unsaved = _ref$unsaved === void 0 ? {
+    nuevos: 0,
+    modificados: 0,
+    borrados: 0,
+    total: 0
+  } : _ref$unsaved,
+      _ref$remaining = _ref.remaining,
+      remaining = _ref$remaining === void 0 ? _assetTypes.MAX_ASSETS_PER_PRODUCT : _ref$remaining,
+      addFiles = _ref.addFiles,
+      removeAsset = _ref.removeAsset,
+      changeAssetType = _ref.changeAssetType,
+      clearNotices = _ref.clearNotices,
+      _ref$selectedAssets = _ref.selectedAssets,
+      selectedAssets = _ref$selectedAssets === void 0 ? [] : _ref$selectedAssets,
+      setSelectedAssets = _ref.setSelectedAssets,
+      setCheckAll = _ref.setCheckAll,
+      _ref$gridLayout = _ref.gridLayout,
+      gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$emptyMessage = _ref.emptyMessage,
+      emptyMessage = _ref$emptyMessage === void 0 ? "Este producto no tiene activos digitales" : _ref$emptyMessage;
+
+  var _useDropzone = (0, _reactDropzone.useDropzone)({
+    accept: (0, _assetTypes.buildDropzoneAccept)(),
+    noKeyboard: true,
+    multiple: true,
+    noClick: true,
+    disabled: readOnly,
+    // Los rechazados también pasan: react-dropzone los descarta por `accept`
+    // antes que nuestra validación, y sin esto soltar un formato no permitido
+    // no hacía nada. `addFiles` los valida y avisa por qué no entran.
+    onDrop: function onDrop(acceptedFiles, fileRejections) {
+      return addFiles === null || addFiles === void 0 ? void 0 : addFiles([].concat((0, _toConsumableArray2.default)(acceptedFiles), (0, _toConsumableArray2.default)(fileRejections.map(function (_ref2) {
+        var file = _ref2.file;
+        return file;
+      }))));
+    }
+  }),
+      getRootProps = _useDropzone.getRootProps,
+      getInputProps = _useDropzone.getInputProps,
+      isDragActive = _useDropzone.isDragActive,
+      open = _useDropzone.open;
+
+  var noticesBy = function noticesBy(level) {
+    return notices.filter(function (item) {
+      return item.level === level;
+    });
+  };
+  /*
+    Se desglosa en vez de mostrar solo el número: "3 cambios sin guardar" no le
+    dice al usuario qué perdería si se va, y no es lo mismo dejar sin guardar un
+    borrado que un archivo nuevo.
+  */
+
+
+  var detalleSinGuardar = [unsaved.nuevos && "".concat(unsaved.nuevos, " nuevo").concat(unsaved.nuevos > 1 ? "s" : ""), unsaved.modificados && "".concat(unsaved.modificados, " modificado").concat(unsaved.modificados > 1 ? "s" : ""), unsaved.borrados && "".concat(unsaved.borrados, " por borrar")].filter(Boolean).join(" · ");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tray-toolbar",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        className: "tray-hint",
+        title: "Formatos permitidos: ".concat((0, _assetTypes.acceptedFormatsLabel)()),
+        children: ["Arrastra aqu\xED im\xE1genes, videos, 360, GIF, documentos, hojas de c\xE1lculo o archivos editables. Quedan ", remaining, " de ", _assetTypes.MAX_ASSETS_PER_PRODUCT, "."]
+      }), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        label: "Agregar activos",
+        type: "pink",
+        size: 12,
+        onClick: open
+      })]
+    }), unsaved.total > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tray-unsaved",
+      role: "status",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "tray-unsaved-dot"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("strong", {
+          children: [unsaved.total, " cambio", unsaved.total > 1 ? "s" : "", " sin guardar"]
+        }), detalleSinGuardar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: "tray-unsaved-detail",
+          children: [" \u2014 ", detalleSinGuardar]
+        })]
+      })]
+    }), noticesBy("error").length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tray-notice tray-notice-error",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "tray-notice-head",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: ["No se pudieron agregar ", noticesBy("error").length, " archivo(s):"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          onClick: clearNotices,
+          title: "Cerrar",
+          children: "\xD7"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        children: noticesBy("error").map(function (item, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: item.message
+          }, "err-".concat(item.name, "-").concat(index));
+        })
+      })]
+    }), noticesBy("warning").length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tray-notice tray-notice-warning",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "tray-notice-head",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Se agregaron, pero ten en cuenta:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          onClick: clearNotices,
+          title: "Cerrar",
+          children: "\xD7"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        children: noticesBy("warning").map(function (item, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: item.message
+          }, "warn-".concat(item.name, "-").concat(index));
+        })
+      })]
+    }), !gridLayout && assets.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+      variant: "asset",
+      checkAllId: CHECK_ALL_ID,
+      itemSelector: ITEM_SELECTOR,
+      setCheckAll: setCheckAll,
+      setSelectedImages: setSelectedAssets
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps({
+      className: "dropzone ".concat(isDragActive ? "drag-active" : "").trim()
+    })), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "drag-overlay",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Suelta los activos aqu\xED"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+        className: gridLayout ? "tray-grid" : "tray-rows",
+        children: assets.map(function (asset, index) {
+          var _asset$id;
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryAssetElement.GalleryAssetElement, {
+            asset: asset,
+            index: index,
+            gridLayout: gridLayout,
+            checkAllId: CHECK_ALL_ID,
+            itemSelector: ITEM_SELECTOR,
+            selectedAssets: selectedAssets,
+            setSelectedAssets: setSelectedAssets,
+            setCheckAll: setCheckAll,
+            changeAsset: function changeAsset(_ref3) {
+              var value = _ref3.value;
+              return changeAssetType === null || changeAssetType === void 0 ? void 0 : changeAssetType(index, value);
+            },
+            onRemove: removeAsset,
+            readOnly: readOnly
+          }, (_asset$id = asset.id) !== null && _asset$id !== void 0 ? _asset$id : asset.tempId);
+        })
+      }), assets.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "tray-empty",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: emptyMessage
+        }), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "tray-empty-hint",
+          children: "Arr\xE1stralos aqu\xED o usa \xABAgregar activos\xBB."
+        })]
+      })]
+    }))]
+  });
+};
+
+exports.DigitalAssetsTray = DigitalAssetsTray;

package/dist/components/organisms/DigitalAssetsTray/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+/* El dropzone replica el de la bandeja de imágenes para que arrastrar se sienta
+   igual en las dos. */
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  .tray-toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n  }\n\n  .tray-hint {\n    margin: 0;\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 18px;\n    color: ", ";\n  }\n\n  /*\n    Aviso de cambios sin guardar. Va arriba del listado y no junto al bot\xF3n de\n    guardar, que vive en otra barra: el usuario mira la bandeja, no el men\xFA.\n  */\n  .tray-unsaved {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 12px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    background: rgba(237, 154, 77, 0.08);\n\n    p {\n      margin: 0;\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 18px;\n      color: ", ";\n    }\n\n    strong {\n      font-family: ", ";\n      color: ", ";\n    }\n  }\n\n  .tray-unsaved-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: ", ";\n    flex-shrink: 0;\n  }\n\n  .tray-unsaved-detail {\n    color: ", ";\n  }\n\n  .tray-notice {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid;\n\n    .tray-notice-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      p {\n        margin: 0;\n        font-family: ", ";\n        font-size: 12px;\n      }\n\n      button {\n        border: none;\n        background: none;\n        cursor: pointer;\n        font-size: 16px;\n        line-height: 1;\n        color: inherit;\n      }\n    }\n\n    ul {\n      margin: 4px 0 0;\n      padding-left: 18px;\n    }\n\n    li {\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 18px;\n      color: ", ";\n    }\n  }\n\n  /* Rojo = no entr\xF3. \xC1mbar = entr\xF3, pero hay algo que saber. */\n  .tray-notice-error {\n    border-color: ", ";\n    background: rgba(", ", 0.05);\n    color: ", ";\n  }\n\n  .tray-notice-warning {\n    border-color: ", ";\n    background: rgba(237, 154, 77, 0.08);\n    color: ", ";\n  }\n\n  .dropzone {\n    position: relative;\n    width: 100%;\n    min-height: 160px;\n    transition: all 0.5s ease;\n\n    &.drag-active {\n      background-color: rgba(", ", 0.05);\n      border: 2px dashed ", ";\n      border-radius: 8px;\n\n      aside {\n        opacity: 0.3;\n        pointer-events: none;\n      }\n    }\n\n    .drag-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n\n      p {\n        font-family: ", ";\n        font-size: 16px;\n        color: ", ";\n      }\n    }\n  }\n\n  .tray-rows {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .tray-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .tray-empty {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n    width: 80%;\n\n    p {\n      margin: 0;\n      font-family: ", ";\n      font-size: 16px;\n      color: ", ";\n    }\n\n    .tray-empty-hint {\n      margin-top: 6px;\n      font-size: 13px;\n      color: ", ";\n    }\n  }\n"])), _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.in_progress, _variables.FontFamily.Lato, _variables.GlobalColors.s5, _variables.FontFamily.Raleway_600, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.s4, _variables.FontFamily.Raleway_600, _variables.FontFamily.Lato, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.FontFamily.Lato, _variables.GlobalColors.gray, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/organisms/ImagePreviewer/index.js

@@ -23,6 +23,7 @@ var ImagePreviewer = function ImagePreviewer(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EditionActiveImage.EditionActiveImage, {
       img: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
       altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+      ext: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext,
       setShowModal: setShowModal
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelector.ImageSelector, {
       images: imagesArray,

package/dist/components/organisms/ProductImageModal/index.js

@@ -26,7 +26,7 @@ var _GeneralButton = require("../../atoms/GeneralButton");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProductImageModal = function ProductImageModal(_ref) {
-  var _images$values$active, _images$values$active2, _images$values$active3;
+  var _images$values$active, _images$values$active2, _images$values$active3, _images$values$active4;
 
   var _ref$images = _ref.images,
       images = _ref$images === void 0 ? [] : _ref$images,
@@ -72,6 +72,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
           img: "https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + (images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.srcDB),
           altText: images === null || images === void 0 ? void 0 : (_images$values$active2 = images.values[activeImage]) === null || _images$values$active2 === void 0 ? void 0 : _images$values$active2.name,
+          ext: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.ext,
           imageType: "expanded-modal-image"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -102,7 +103,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
               }
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
-            imageData: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.data,
+            imageData: images === null || images === void 0 ? void 0 : (_images$values$active4 = images.values[activeImage]) === null || _images$values$active4 === void 0 ? void 0 : _images$values$active4.data,
             headerInfo: headerInfo,
             activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
             darkMode: true,