contentoh-components-library 21.4.102 → 21.4.104

package/dist/components/pages/Dashboard/styles.js

@@ -1,11 +1,18 @@
 "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 _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 30px;\n\n  .filters {\n    display: flex;\n    & > * {\n      & + * {\n        margin-left: 10px;\n      }\n    }\n    & + * {\n      margin-top: 20px;\n    }\n  }\n\n  .metric-cards {\n    display: flex;\n\n    > * + * {\n      margin-left: 10px;\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .metrics-main-container {\n    display: flex;\n\n    > * + * {\n      margin-left: 10px;\n    }\n  }\n"])));
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 30px;\n\n  .filters {\n    display: flex;\n    & > * {\n      & + * {\n        margin-left: 10px;\n      }\n    }\n    & + * {\n      margin-top: 20px;\n    }\n  }\n\n  .metric-cards {\n    display: flex;\n\n    > * + * {\n      margin-left: 10px;\n    }\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .metrics-main-container {\n    display: flex;\n\n    > * + * {\n      margin-left: 10px;\n    }\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/pages/EmailResetPassword/EmailResetPassword.stories.js

@@ -1,23 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.EmailResetPasswordDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
 var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
 var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/pages/EmailResetPassword",
   component: _index.EmailResetPassword
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.EmailResetPassword, {
-  ...args
-});
-const EmailResetPasswordDefault = exports.EmailResetPasswordDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.EmailResetPassword, (0, _objectSpread2.default)({}, args));
+};
+
+var EmailResetPasswordDefault = Template.bind({});
+exports.EmailResetPasswordDefault = EmailResetPasswordDefault;
 EmailResetPasswordDefault.args = {
   imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
   textCarousel: "Elige la plataforma que conecta proovedores y retailers"

package/dist/components/pages/EmailResetPassword/index.js

@@ -1,34 +1,80 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmailResetPassword = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _GradientPanel = require("../../atoms/GradientPanel");
+
 var _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
+
 var _react = require("react");
+
 var _LogoImage = require("../../atoms/LogoImage");
+
 var _ScreenHeader = require("../../atoms/ScreenHeader");
+
 var _variables = require("../../../global-files/variables");
+
 var _TagAndInput = require("../../molecules/TagAndInput");
+
 var _GeneralButton = require("../../atoms/GeneralButton");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const EmailResetPassword = _ref => {
-  let {
-    imageArrayCarousel = [],
-    textCarousel,
-    backogroundColorCarousel
-  } = _ref;
-  const [emptyEmail, setEmptyEmail] = (0, _react.useState)(false);
-  const [invalidEmail, setInvalidEmail] = (0, _react.useState)(false);
-  const validate = async e => {
-    e.preventDefault();
-    const email = document.querySelector("#emailInput").value;
-    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
-  };
-  const loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+
+var EmailResetPassword = function EmailResetPassword(_ref) {
+  var _ref$imageArrayCarous = _ref.imageArrayCarousel,
+      imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
+      textCarousel = _ref.textCarousel,
+      backogroundColorCarousel = _ref.backogroundColorCarousel;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyEmail = _useState2[0],
+      setEmptyEmail = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      invalidEmail = _useState4[0],
+      setInvalidEmail = _useState4[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var email;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              email = document.querySelector("#emailInput").value;
+              email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+              !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function validate(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "credenciales",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       fontFamily: _variables.FontFamily.AvenirNext,
@@ -52,7 +98,9 @@ const EmailResetPassword = _ref => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
       buttonType: "general-default-button",
       label: "Enviar",
-      onClick: e => validate(e)
+      onClick: function onClick(e) {
+        return validate(e);
+      }
     })
   }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "back-login",
@@ -78,4 +126,5 @@ const EmailResetPassword = _ref => {
     })]
   });
 };
+
 exports.EmailResetPassword = EmailResetPassword;

package/dist/components/pages/EmailResetPassword/styles.js

@@ -1,12 +1,20 @@
 "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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n    .button-center {\n      text-align: center;\n      .general-default-button {\n        width: 160px;\n      }\n    }\n    .back-login {\n      text-align: center;\n      margin: 15px !important;\n      color: ", ";\n      cursor: pointer;\n      font-weight: bold;\n      font-family: ", ";\n      font-size: 13px;\n    }\n  }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n    .button-center {\n      text-align: center;\n      .general-default-button {\n        width: 160px;\n      }\n    }\n    .back-login {\n      text-align: center;\n      margin: 15px !important;\n      color: ", ";\n      cursor: pointer;\n      font-weight: bold;\n      font-family: ", ";\n      font-size: 13px;\n    }\n  }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway);
+
+exports.Container = Container;

package/dist/components/pages/MultipleEdition/MultipleEdition.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MultipleEditionDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/pages/MultipleEdition",
+  component: _index.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, (0, _objectSpread2.default)({}, args));
+};
+
+var MultipleEditionDefault = Template.bind({});
+exports.MultipleEditionDefault = MultipleEditionDefault;
+MultipleEditionDefault.args = {
+  articles: [118471],
+  //[216, 238, 239],
+  versions: [1],
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkMzE0ODYyYy02OTYxLTQ5YjktODMwOC1hMDM3Mzg1MjUwYzAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMjQxMTc0MSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwMjQxNTM0MSwiaWF0IjoxNzAyNDExNzQxLCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.O4Lr5HZLuueNNY1FxqrRBaQZKMgnTXY9IG7KAMkhWO20Dxnfj253sqOme36AbqIAsCQBy77GmnZtTAFs0uF9QBfEDzZXRQ1xcctboGZ9U235LlLdz-BNGoH5QCRXeZsZdXJ1M7yL8IvIdEnXkFC0WYcUMWMRUc6K6vgOvmCCQhzOr-uW-2nsLBGjBb7Tj_okViYvT0Lupo5Z0Z9Xc20oOWnVmrSuaYa1-b4AjOjEOnETA9usnRa6blOVOkHqi5fX8u11ejczINxNBtoizMPOQROuzuuPTvHrl17ae8JkNoxVCJe5ZdfRrUN1lwUXnOZim7QhNg8YR_uvPs_EJRIwfw"
+};

package/dist/components/pages/MultipleEdition/components/ImageUploader.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDropzone = require("react-dropzone");
+
+var _ImageUploaderStyles = require("./ImageUploaderStyles");
+
+var _upload_file = _interopRequireDefault(require("../../../../assets/images/Icons/upload_file.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ImageUploader = function ImageUploader(_ref) {
+  var handleNewImage = _ref.handleNewImage;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      image = _useState2[0],
+      setImage = _useState2[1];
+
+  var onDrop = function onDrop(acceptedFiles) {
+    if (acceptedFiles.length === 1) {
+      showImage(acceptedFiles[0]);
+    }
+  };
+
+  var showImage = function showImage(file) {
+    var reader = new FileReader();
+
+    reader.onload = function () {
+      setImage(reader.result);
+      getImageDimensions(reader.result);
+    };
+
+    reader.readAsDataURL(file);
+  };
+
+  var getImageDimensions = function getImageDimensions(dataURL) {
+    var img = new Image();
+
+    img.onload = function () {
+      var image = {
+        src: dataURL,
+        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
+        width: img.width,
+        height: img.height
+      };
+      handleNewImage(image);
+    };
+
+    img.src = dataURL;
+  };
+
+  var _useDropzone = (0, _reactDropzone.useDropzone)({
+    onDrop: onDrop
+  }),
+      getRootProps = _useDropzone.getRootProps,
+      getInputProps = _useDropzone.getInputProps,
+      isDragActive = _useDropzone.isDragActive;
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ImageUploaderStyles.ImageUploaderContainer, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps()), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), image ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      className: "imageLoaded",
+      src: image,
+      alt: "Imagen Cargada"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _upload_file.default,
+        alt: "Subir im\xE1gen"
+      }), isDragActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Suelta la imagen aqu\xED"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Da clic aqu\xED o arrastra la foto para subirla a Content-oh!"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: "Tama\xF1o de imagen recomendando 3000x3000 pixeles"
+        })]
+      })]
+    })]
+  }));
+};
+
+var _default = ImageUploader;
+exports.default = _default;

package/dist/components/pages/MultipleEdition/components/ImageUploaderStyles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageUploaderContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var ImageUploaderContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  color: var(--magenta-main, #e33aa9);\n  text-align: center;\n  font-family: Roboto;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  padding: 49px 32px;\n  & > div {\n    & > p {\n      margin-bottom: 10px;\n    }\n    & > span {\n      color: var(--grey-medium, #cbcbcb);\n      font-size: 10px;\n      font-weight: 400;\n    }\n  }\n"])));
+
+exports.ImageUploaderContainer = ImageUploaderContainer;

package/dist/components/pages/MultipleEdition/components/ImageVisor.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageVisor = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = require("react");
+
+var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
+
+var _styles = require("./styles.js");
+
+var _ImageUploader = _interopRequireDefault(require("./ImageUploader.js"));
+
+var _utils = require("../../../../global-files/utils.js");
+
+var _defaultProductImage = _interopRequireDefault(require("../../../../assets/images/defaultImages/defaultProductImage.png"));
+
+var _fullscreen = _interopRequireDefault(require("../../../../assets/images/Icons/fullscreen.svg"));
+
+var _close = _interopRequireDefault(require("../../../../assets/images/Icons/close.svg"));
+
+var _uploadFile = _interopRequireDefault(require("../../../../assets/images/Icons/upload-file.svg"));
+
+var _deleteForeverWhite = _interopRequireDefault(require("../../../../assets/images/Icons/delete-forever-white.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["value", "name", "setModalFromTable", "setDataServices", "setModal"];
+
+var ImageVisor = function ImageVisor(_ref) {
+  var value = _ref.value,
+      name = _ref.name,
+      setModalFromTable = _ref.setModalFromTable,
+      setDataServices = _ref.setDataServices,
+      setModal = _ref.setModal,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      smallSrc = _useState2[0],
+      setSmallSrc = _useState2[1];
+
+  function handleNewImage(imageFile) {
+    var payload = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), imageFile);
+    setDataServices({
+      type: "updateImage",
+      payload: payload
+    });
+  }
+
+  function handleUpdateImage(file) {
+    if (file) {
+      var reader = new FileReader();
+
+      reader.onload = function () {
+        getImageDimensions(reader.result);
+      };
+
+      reader.readAsDataURL(file);
+    }
+  }
+
+  var getImageDimensions = function getImageDimensions(dataURL) {
+    var img = new Image();
+
+    img.onload = function () {
+      var image = {
+        src: dataURL,
+        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
+        width: img.width,
+        height: img.height
+      };
+      handleNewImage(image);
+      changeVisor();
+    };
+
+    img.src = dataURL;
+  };
+
+  function changeVisor(view) {
+    if (!view) {
+      setModalFromTable(null);
+      return;
+    }
+
+    var isSmall = view === "small";
+    var src = isSmall ? smallSrc : "".concat(process.env.REACT_APP_IMAGES_ENDPOINT, "/").concat(value === null || value === void 0 ? void 0 : value.src);
+    setModalFromTable( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ImageView, {
+      visorView: view,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "buttons",
+          children: isSmall ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [value !== null && value !== void 0 && value.src ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: _fullscreen.default,
+              alt: "Ver en pantalla completa",
+              onClick: function onClick() {
+                return changeVisor("fullscreen");
+              }
+            }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: _close.default,
+              alt: "Cerrar",
+              onClick: function onClick() {
+                return changeVisor();
+              }
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              className: "borderCircle",
+              htmlFor: "fileInput",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _uploadFile.default,
+                alt: "Actualizar imagen"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "file",
+                id: "fileInput",
+                accept: "image/png, image/jpeg",
+                style: {
+                  display: "none"
+                },
+                onChange: function onChange(e) {
+                  return handleUpdateImage(e.target.files[0]);
+                }
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              className: "borderCircle",
+              src: _deleteForeverWhite.default,
+              alt: "Eliminar im\xE1gen",
+              onClick: function onClick() {
+                setModal({
+                  type: "delete",
+                  functions: {
+                    setModal: setModal,
+                    setDataServices: setDataServices
+                  },
+                  payload: props
+                });
+                changeVisor();
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              className: "borderCircle",
+              src: _close.default,
+              alt: "Cerrar",
+              onClick: function onClick() {
+                return changeVisor("small");
+              }
+            })]
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "body",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
+          className: "imageLoaded",
+          src: src,
+          fallbackImage: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageUploader.default, {
+            handleNewImage: handleNewImage
+          }),
+          alt: name !== null && name !== void 0 ? name : "Imagen del producto"
+        })
+      })]
+    }));
+  }
+
+  (0, _react.useEffect)(function () {
+    var _value$src;
+
+    var src = value !== null && value !== void 0 && (_value$src = value.src) !== null && _value$src !== void 0 && _value$src.includes("image/") ? value === null || value === void 0 ? void 0 : value.src : (0, _utils.getImageURL)(process.env.REACT_APP_IMAGES_BUCKET, value === null || value === void 0 ? void 0 : value.src, 250, 250);
+    setSmallSrc(src);
+  }, [value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageContainer, {
+      onClick: function onClick() {
+        return changeVisor("small");
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
+        src: smallSrc,
+        fallbackImage: _defaultProductImage.default,
+        alt: name !== null && name !== void 0 ? name : "Imagen del producto"
+      })
+    })
+  });
+};
+
+exports.ImageVisor = ImageVisor;
+var _default = ImageVisor;
+exports.default = _default;

package/dist/components/pages/MultipleEdition/components/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageView = exports.ImageContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _uploadFile = _interopRequireDefault(require("../../../../assets/images/Icons/upload-file.svg"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var ImageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: var(--white-main, #fff);\n  border-radius: 7px;\n  border: 1px solid var(--grey-medium, #cbcbcb);\n  cursor: pointer;\n  display: flex;\n  height: 52px;\n  justify-content: center;\n  width: 52px;\n  & > img {\n    border-radius: 7px;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n  }\n"])));
+
+exports.ImageContainer = ImageContainer;
+
+var ImageView = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: var(--white-main, #fff);\n  border-radius: 5px;\n  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);\n  height: 280px;\n  left: calc(50% - 125px);\n  position: absolute;\n  top: calc(50% - 140px);\n  width: 250px;\n  z-index: 10;\n  .header {\n    align-items: center;\n    background: var(--grey-medium, #cbcbcb);\n    border-radius: 5px 5px 0px 0px;\n    color: var(--white-main, #fff);\n    display: flex;\n    font-family: Roboto;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    height: 30px;\n    justify-content: space-between;\n    line-height: normal;\n    overflow: hidden;\n    padding: 0 9px 0 10px;\n    text-overflow: ellipsis;\n    width: 100%;\n    .buttons {\n      display: flex;\n      gap: 10px;\n      img {\n        cursor: pointer;\n      }\n      label {\n        display: flex;\n        align-items: center;\n        padding: 3px;\n      }\n      .borderCircle {\n        border-radius: 20px;\n        border: 1px solid var(--white-main, #fff);\n      }\n    }\n  }\n  .body {\n    width: 100%;\n    height: calc(100% - 30px);\n    .imageLoaded {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n  }\n  ", "\n"])), function (_ref) {
+  var visorView = _ref.visorView;
+  return visorView === "fullscreen" && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      background: var(--black-main, #262626d9);\n      height: 100%;\n      left: 0;\n      top: 0;\n      width: 100%;\n      .header {\n        background: var(--black-main, #262626);\n        font-size: 14px;\n        height: 45px;\n        .buttons > img {\n          border-radius: 20px;\n          border: 1px solid var(--white-main, #fff);\n          padding: 3px;\n        }\n      }\n      > div {\n        align-items: center;\n        display: flex;\n        height: 100%;\n        justify-content: center;\n        width: 100%;\n        & > img {\n          border-radius: 5px;\n          height: 500px;\n          width: 500px;\n        }\n      }\n    "])));
+});
+
+exports.ImageView = ImageView;