contentoh-components-library 10.0.0 → 12.1.17

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

@@ -0,0 +1,1800 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProviderProductEdition = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _styles = require("./styles");
+
+var _HeaderTop = require("../../molecules/HeaderTop");
+
+var _ImagePreviewer = require("../../organisms/ImagePreviewer");
+
+var _ImageDataTable = require("../../organisms/ImageDataTable");
+
+var _FullProductNameHeader = require("../../organisms/FullProductNameHeader");
+
+var _FullTabsMenu = require("../../organisms/FullTabsMenu");
+
+var _InputGroup = require("../../organisms/InputGroup");
+
+var _react = require("react");
+
+var _GalleryElement = require("../../molecules/GalleryElement");
+
+var _fileSaver = require("file-saver");
+
+var _data2 = require("../../../global-files/data");
+
+var _GalleryHeader = require("../../molecules/GalleryHeader");
+
+var _ProductImageModal = require("../../organisms/ProductImageModal");
+
+var _reactDropzone = require("react-dropzone");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _uuid = require("uuid");
+
+var _awsSdk = _interopRequireDefault(require("aws-sdk"));
+
+var _attributesSent = _interopRequireDefault(require("../../../assets/images/modalsSVGs/attributesSent.svg"));
+
+var _descriptionSent = _interopRequireDefault(require("../../../assets/images/modalsSVGs/descriptionSent.svg"));
+
+var _uploadingImages = _interopRequireDefault(require("../../../assets/images/modalsSVGs/uploadingImages.svg"));
+
+var _index = require("../../molecules/TagAndInput/index");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _Commentary = require("../../atoms/Commentary");
+
+var _GenericModal = require("../../atoms/GenericModal");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _Loading = require("../../atoms/Loading");
+
+var _genericModalCheck = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalCheck.svg"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _defaultProfileImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProfileImage.svg"));
+
+var _errorModal = _interopRequireDefault(require("../../../assets/images/genericModal/errorModal.svg"));
+
+var _index2 = require("../../organisms/GlobalModal/index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var reducerImages = function reducerImages(state, action) {
+  var values = state.values,
+      attrForImgs = state.attrForImgs;
+
+  switch (action.action) {
+    case "init":
+      return action.init;
+
+    case "addImg":
+      values = [].concat((0, _toConsumableArray2.default)(values), [action.img]);
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
+        values: values
+      });
+
+    case "changeImageInfo":
+      values[action.index][action.attribute] = action.value;
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
+        values: values
+      });
+
+    case "changeAttrValue":
+      attrForImgs[action.retailer][action.index].value = action.value;
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
+        attrForImgs: attrForImgs,
+        values: values
+      });
+
+    case "deleteImage":
+      values = values.filter(function (value) {
+        return action.selectedImages.indexOf(value) === -1;
+      });
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
+        values: values
+      });
+
+    default:
+      return state;
+  }
+};
+
+var S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
+var REGION = "us-east-1";
+
+_awsSdk.default.config.update({
+  accessKeyId: process.env.REACT_APP_KEY_UPLOAD_TO_S3,
+  secretAccessKey: process.env.REACT_APP_ACCESS_KEY_UPLOAD_TO_S3
+});
+
+var myBucket = new _awsSdk.default.S3({
+  params: {
+    Bucket: S3_BUCKET
+  },
+  region: REGION
+});
+
+var ProviderProductEdition = function ProviderProductEdition(_ref) {
+  var _product$retailers, _product$retailersAva, _location$state, _datasheets$, _datasheets$$data;
+
+  var tabsSections = _ref.tabsSections,
+      _ref$productSelected = _ref.productSelected,
+      productSelected = _ref$productSelected === void 0 ? {} : _ref$productSelected,
+      productToEdit = _ref.productToEdit,
+      _ref$user = _ref.user,
+      user = _ref$user === void 0 ? {} : _ref$user,
+      _ref$location = _ref.location,
+      location = _ref$location === void 0 ? {} : _ref$location,
+      token = _ref.token,
+      _ref$revision = _ref.revision,
+      revision = _ref$revision === void 0 ? false : _ref$revision,
+      setShowContentohRequestModal = _ref.setShowContentohRequestModal,
+      showSurvey = _ref.showSurvey;
+
+  var _useState = (0, _react.useState)("Descripción"),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeTab = _useState2[0],
+      setActiveTab = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      activeImage = _useState4[0],
+      setActiveImage = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      imageLayout = _useState6[0],
+      setImageLayout = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      headerTop = _useState8[0],
+      setHeaderTop = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      descriptions = _useState10[0],
+      setDescriptions = _useState10[1];
+
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      datasheets = _useState12[0],
+      setDatasheets = _useState12[1];
+
+  var _useReducer = (0, _react.useReducer)(reducerImages, {}),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      images = _useReducer2[0],
+      setImages = _useReducer2[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      showModal = _useState14[0],
+      setShowModal = _useState14[1];
+
+  var _useDropzone = (0, _reactDropzone.useDropzone)({
+    accept: "image/*",
+    noKeyboard: true,
+    multiple: true,
+    noClick: true,
+    onDrop: function onDrop(acceptedFiles) {
+      var newImages = [];
+      acceptedFiles.map(function (file) {
+        var reader = new FileReader();
+        reader.fileName = file.name;
+
+        reader.onload = /*#__PURE__*/function () {
+          var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+            var ext, img;
+            return _regenerator.default.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    ext = e.srcElement.fileName.split(".");
+                    img = new Image();
+                    img.src = e.target.result;
+                    setTimeout(function () {
+                      var width = img.width;
+                      var height = img.height;
+                      var newImg = {
+                        action: "addImg",
+                        img: {
+                          src: e.target.result,
+                          name: e.target.fileName,
+                          ext: ext[ext.length - 1],
+                          width: width,
+                          height: height
+                        }
+                      };
+                      setImages(newImg);
+                    }, 500);
+
+                  case 4:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          return function (_x) {
+            return _ref2.apply(this, arguments);
+          };
+        }();
+
+        reader.onerror = function (error) {
+          console.log("dropzoneError: ", error);
+        };
+
+        reader.readAsDataURL(file);
+        return file;
+      });
+    }
+  }),
+      getRootProps = _useDropzone.getRootProps,
+      getInputProps = _useDropzone.getInputProps;
+
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      updatedDatasheets = _useState16[0],
+      setUpdatedDatasheets = _useState16[1];
+
+  var _useState17 = (0, _react.useState)([]),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      updatedDescriptions = _useState18[0],
+      setUpdatedDescriptions = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      imagesUploaded = _useState20[0],
+      setImagesUploaded = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      dataImages = _useState22[0],
+      setDataImages = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(product !== null && product !== void 0 && product.retailers ? new Array(product === null || product === void 0 ? void 0 : (_product$retailers = product.retailers) === null || _product$retailers === void 0 ? void 0 : _product$retailers.length).fill({
+    percentage: 0
+  }) : new Array(product === null || product === void 0 ? void 0 : (_product$retailersAva = product.retailersAvailable) === null || _product$retailersAva === void 0 ? void 0 : _product$retailersAva.length).fill({
+    percentage: 0
+  })),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      percentages = _useState24[0],
+      setPercentages = _useState24[1];
+
+  var _useState25 = (0, _react.useState)(0),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      activePercentage = _useState26[0],
+      setActivePercentage = _useState26[1];
+
+  var _useState27 = (0, _react.useState)({}),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      activeRetailer = _useState28[0],
+      setActiveRetailer = _useState28[1];
+
+  var _useState29 = (0, _react.useState)([]),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      services = _useState30[0],
+      setServices = _useState30[1];
+
+  var _useState31 = (0, _react.useState)([]),
+      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
+      servicesData = _useState32[0],
+      setServicesData = _useState32[1];
+
+  var _useState33 = (0, _react.useState)(""),
+      _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
+      message = _useState34[0],
+      setMessage = _useState34[1];
+
+  var _useState35 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected),
+      _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
+      product = _useState36[0],
+      setProduct = _useState36[1];
+
+  var _useState37 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("productEdit")) ? JSON.parse(sessionStorage.getItem("productEdit")) : productToEdit),
+      _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
+      productEdit = _useState38[0],
+      setProductEdit = _useState38[1];
+
+  var _useState39 = (0, _react.useState)(null),
+      _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
+      icon = _useState40[0],
+      setIcon = _useState40[1];
+
+  var _useState41 = (0, _react.useState)(product === null || product === void 0 ? void 0 : product.version),
+      _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
+      version = _useState42[0],
+      setVersion = _useState42[1];
+
+  var _useState43 = (0, _react.useState)({}),
+      _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
+      comments = _useState44[0],
+      setComments = _useState44[1];
+
+  var _useState45 = (0, _react.useState)(""),
+      _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
+      comment = _useState46[0],
+      setComment = _useState46[1];
+
+  var _useState47 = (0, _react.useState)({
+    "Ficha técnica": 0,
+    Descripción: 0,
+    Imágenes: 0
+  }),
+      _useState48 = (0, _slicedToArray2.default)(_useState47, 2),
+      requiredNull = _useState48[0],
+      setRequiredNull = _useState48[1];
+
+  var _useState49 = (0, _react.useState)(false),
+      _useState50 = (0, _slicedToArray2.default)(_useState49, 2),
+      crossComment = _useState50[0],
+      setCrossComment = _useState50[1];
+
+  var _useState51 = (0, _react.useState)([]),
+      _useState52 = (0, _slicedToArray2.default)(_useState51, 2),
+      userGroups = _useState52[0],
+      setUserGroups = _useState52[1];
+
+  var _useState53 = (0, _react.useState)({}),
+      _useState54 = (0, _slicedToArray2.default)(_useState53, 2),
+      assig = _useState54[0],
+      setAssig = _useState54[1];
+
+  var _useState55 = (0, _react.useState)([]),
+      _useState56 = (0, _slicedToArray2.default)(_useState55, 2),
+      selectedImages = _useState56[0],
+      setSelectedImages = _useState56[1];
+
+  var _useState57 = (0, _react.useState)([]),
+      _useState58 = (0, _slicedToArray2.default)(_useState57, 2),
+      componentsArray = _useState58[0],
+      setComponentsArray = _useState58[1];
+
+  var _useState59 = (0, _react.useState)(false),
+      _useState60 = (0, _slicedToArray2.default)(_useState59, 2),
+      checkAll = _useState60[0],
+      setCheckAll = _useState60[1];
+
+  var isRetailer = user === null || user === void 0 ? void 0 : user.is_retailer;
+
+  var _useState61 = (0, _react.useState)(true),
+      _useState62 = (0, _slicedToArray2.default)(_useState61, 2),
+      loading = _useState62[0],
+      setLoading = _useState62[1];
+
+  var _useState63 = (0, _react.useState)([]),
+      _useState64 = (0, _slicedToArray2.default)(_useState63, 2),
+      statusArray = _useState64[0],
+      setStatusArray = _useState64[1];
+
+  var originProp = location === null || location === void 0 ? void 0 : (_location$state = location.state) === null || _location$state === void 0 ? void 0 : _location$state.origin;
+
+  var _useState65 = (0, _react.useState)({
+    "Ficha técnica": originProp,
+    Descripción: originProp,
+    Imágenes: originProp
+  }),
+      _useState66 = (0, _slicedToArray2.default)(_useState65, 2),
+      origin = _useState66[0],
+      setOrigin = _useState66[1];
+
+  var _useState67 = (0, _react.useState)(false),
+      _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
+      inCart = _useState68[0],
+      setInCart = _useState68[1];
+
+  var _useState69 = (0, _react.useState)(false),
+      _useState70 = (0, _slicedToArray2.default)(_useState69, 2),
+      modalSent = _useState70[0],
+      setModalSent = _useState70[1];
+
+  var _useState71 = (0, _react.useState)(false),
+      _useState72 = (0, _slicedToArray2.default)(_useState71, 2),
+      modalViewError = _useState72[0],
+      setModalViewError = _useState72[1];
+
+  var _useState73 = (0, _react.useState)(false),
+      _useState74 = (0, _slicedToArray2.default)(_useState73, 2),
+      showGenericModal = _useState74[0],
+      setShowGenericModal = _useState74[1];
+
+  var _useState75 = (0, _react.useState)({
+    message: "¿Estás seguro de continuar?",
+    detail: " ".concat(user.is_retailer ? "Asegurate de haber revisado las tres secciones" : "Envíar el producto a la cadena"),
+    button1: {
+      name: "Cerrar",
+      action: function action() {
+        return setModalViewTextArea(false);
+      }
+    },
+    button2: {
+      name: "Continuar",
+      action: function action() {
+        return evaluationToRetailer(false);
+      }
+    },
+    img: _defaultProfileImage.default
+  }),
+      _useState76 = (0, _slicedToArray2.default)(_useState75, 2),
+      dataGenericModal = _useState76[0],
+      setDataGenericModal = _useState76[1];
+
+  var _useState77 = (0, _react.useState)(false),
+      _useState78 = (0, _slicedToArray2.default)(_useState77, 2),
+      modalViewTextArea = _useState78[0],
+      setModalViewTextArea = _useState78[1];
+
+  var _useState79 = (0, _react.useState)(null),
+      _useState80 = (0, _slicedToArray2.default)(_useState79, 2),
+      socketType = _useState80[0],
+      setSocketType = _useState80[1];
+
+  var _useState81 = (0, _react.useState)(loading),
+      _useState82 = (0, _slicedToArray2.default)(_useState81, 2),
+      saving = _useState82[0],
+      setSaving = _useState82[1];
+
+  (0, _react.useEffect)(function () {
+    checkAll && setSelectedImages(images.values);
+  }, [checkAll]);
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _product$article, _product$article2, _services$, _services$$values;
+
+      var services;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return (0, _data2.getRetailerServices)((product === null || product === void 0 ? void 0 : product.id_article) || (product === null || product === void 0 ? void 0 : (_product$article = product.article) === null || _product$article === void 0 ? void 0 : _product$article.id_article), parseInt((product === null || product === void 0 ? void 0 : (_product$article2 = product.article) === null || _product$article2 === void 0 ? void 0 : _product$article2.id_category) || (product === null || product === void 0 ? void 0 : product.id_category)), product === null || product === void 0 ? void 0 : product.version);
+
+            case 2:
+              services = _context2.sent;
+              //Converts the data inside the datasheets object to array
+              setServices(services);
+              getServices();
+
+              if (!originProp) {
+                setActiveRetailer(product.retailers[0] || product.availableRetailers[0]);
+              } //setActiveRetailer(product?.retailers[0]);
+
+
+              setImages({
+                action: "init",
+                init: services[2]
+              });
+              if (((_services$ = services[2]) === null || _services$ === void 0 ? void 0 : (_services$$values = _services$.values) === null || _services$$values === void 0 ? void 0 : _services$$values.length) > 0) setActiveImage(0);
+              (0, _data2.getPercentage)({
+                data: [product]
+              }).then(function (res) {
+                return setPercentages(res);
+              });
+              setLoading(false);
+
+            case 10:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function loadData() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var getServices = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      var _product$article3;
+
+      var productInOrder, idArticle, _product$id_order, _servicesResponse$dat, servicesResponse, parsedResponse, retailers, active;
+
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              productInOrder = product.id_order || product.orderId;
+              idArticle = (product === null || product === void 0 ? void 0 : product.id_article) || (product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_article);
+
+              if (!(isRevision() || productInOrder)) {
+                _context3.next = 11;
+                break;
+              }
+
+              _context3.next = 5;
+              return _axios.default.get("".concat(process.env.REACT_APP_SERVICES_ENDPOINT, "?articleId=").concat(idArticle, "&orderId=").concat((_product$id_order = product === null || product === void 0 ? void 0 : product.id_order) !== null && _product$id_order !== void 0 ? _product$id_order : product.orderId, "&end=true"));
+
+            case 5:
+              servicesResponse = _context3.sent;
+              parsedResponse = JSON.parse(servicesResponse === null || servicesResponse === void 0 ? void 0 : (_servicesResponse$dat = servicesResponse.data) === null || _servicesResponse$dat === void 0 ? void 0 : _servicesResponse$dat.body).data;
+              retailers = product.retailers || product.retailersAvailable;
+              active = retailers === null || retailers === void 0 ? void 0 : retailers.filter(function (retailer) {
+                return parsedResponse === null || parsedResponse === void 0 ? void 0 : parsedResponse.map(function (srv) {
+                  return srv.id_retailer;
+                }).includes(retailer.id);
+              })[0];
+              !activeRetailer.id && setActiveRetailer(active ? active : retailers[0]);
+              setServicesData(parsedResponse);
+
+            case 11:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function getServices() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var isRevision = function isRevision() {
+    if (productEdit) {
+      var concept = getConcept(activeTab);
+
+      var _isRetailer = user.is_retailer === 1;
+
+      var currentService = productEdit === null || productEdit === void 0 ? void 0 : productEdit.product["".concat(concept, "_status")];
+      var orgn = origin[activeTab];
+
+      var _revision = ["RequestWithContentoh", "RequestWithoutContentoh", "Contentoh"].includes(orgn);
+
+      if (_isRetailer) {
+        if (_revision && currentService === "AP") return true;
+      } else {
+        var _product = productEdit.product;
+        if (orgn === "Contentoh" || ["RECEIVED", "IN_PROGRESS"].includes(currentService) && orgn === "RequestWithoutContentoh" || currentService === "AA" && orgn === "RequestWithContentoh" || currentService === "RC" && orgn === "RequestWithoutContentoh" && (!_product.id_order || !_product.orderId)) return true;
+      }
+    }
+
+    return false;
+  };
+
+  var getCart = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      var res, arr;
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return _axios.default.get(process.env.REACT_APP_CART, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 2:
+              res = _context4.sent;
+              arr = JSON.parse(res.data.body).data.map(function (e) {
+                return e.article_id;
+              });
+              setInCart(arr.some(function (e) {
+                return e.articleId === product.id_article;
+              }));
+
+            case 5:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    return function getCart() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+    var arr;
+    return _regenerator.default.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            sessionStorage.setItem("user", JSON.stringify(user));
+            loadData();
+            getCart();
+            _context5.t0 = setUserGroups;
+            _context5.next = 6;
+            return (0, _data2.fetchUsers)(token);
+
+          case 6:
+            _context5.t1 = _context5.sent;
+            (0, _context5.t0)(_context5.t1);
+            arr = [];
+            _context5.t2 = user.id_role;
+            _context5.next = _context5.t2 === 7 ? 12 : _context5.t2 === 8 ? 12 : _context5.t2 === 4 ? 14 : _context5.t2 === 5 ? 14 : _context5.t2 === 6 ? 16 : 18;
+            break;
+
+          case 12:
+            arr = ["IN_PROGRESS", "RF", "RA"];
+            return _context5.abrupt("break", 20);
+
+          case 14:
+            arr = ["RF", "AF", "AA", "AP", "AC"];
+            return _context5.abrupt("break", 20);
+
+          case 16:
+            arr = ["RP", "RC", "AF"];
+            return _context5.abrupt("break", 20);
+
+          case 18:
+            arr = [];
+            return _context5.abrupt("break", 20);
+
+          case 20:
+            setStatusArray(arr);
+
+          case 21:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })), [product]);
+
+  var loadAssignations = function loadAssignations(currentProduct) {
+    setAssig(product === null || product === void 0 ? void 0 : product.asignations);
+  };
+
+  (0, _react.useEffect)(function () {
+    loadAssignations(product);
+  }, [userGroups]);
+  (0, _react.useEffect)(function () {
+    var _retailers$;
+
+    var productTemp = product;
+    var retailers = (productTemp === null || productTemp === void 0 ? void 0 : productTemp.retailersAvailable) || (productTemp === null || productTemp === void 0 ? void 0 : productTemp.retailers);
+    retailers === null || retailers === void 0 ? void 0 : retailers.forEach(function (retailer) {
+      var _percentages$filter$;
+
+      retailer["percentage"] = percentages === null || percentages === void 0 ? void 0 : (_percentages$filter$ = percentages.filter(function (percent) {
+        return (retailer === null || retailer === void 0 ? void 0 : retailer.id) === (percent === null || percent === void 0 ? void 0 : percent.id_retailer);
+      })[0]) === null || _percentages$filter$ === void 0 ? void 0 : _percentages$filter$.percentage;
+    });
+    setProduct(productTemp);
+    setActivePercentage((_retailers$ = retailers[0]) === null || _retailers$ === void 0 ? void 0 : _retailers$.percentage);
+  }, [percentages]);
+
+  var loadInputs = function loadInputs() {
+    if (services.length > 0) {
+      var _services$0$activeRet, _services$2, _services$3;
+
+      if ((_services$0$activeRet = services[0][activeRetailer.id]) !== null && _services$0$activeRet !== void 0 && _services$0$activeRet.data) services[0][activeRetailer.id].data = Object.values(services[0][activeRetailer.id].data);
+      setActivePercentage(Math.round(activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.percentage, 0));
+      var datagroups = services[0][activeRetailer.id];
+      var inputs = (_services$2 = services[0]) === null || _services$2 === void 0 ? void 0 : _services$2.inputs;
+
+      var _descriptions = (_services$3 = services[1]) === null || _services$3 === void 0 ? void 0 : _services$3.filter(function (service) {
+        return (service === null || service === void 0 ? void 0 : service.id) === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id);
+      });
+
+      setDatasheets([datagroups, inputs]);
+      setDescriptions(_descriptions);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    loadInputs();
+  }, [servicesData, activeRetailer, services]);
+
+  var thumbs = function thumbs() {
+    var _images$imageType, _images$imagePackagin, _images$values;
+
+    var imageInputs = socketType === null || socketType === void 0 ? void 0 : socketType.slice();
+    var imageType = images === null || images === void 0 ? void 0 : (_images$imageType = images.imageType) === null || _images$imageType === void 0 ? void 0 : _images$imageType.map(function (e) {
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name
+      };
+    });
+    var imagePackagingType = images === null || images === void 0 ? void 0 : (_images$imagePackagin = images.imagePackagingType) === null || _images$imagePackagin === void 0 ? void 0 : _images$imagePackagin.map(function (e) {
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name
+      };
+    });
+    return images === null || images === void 0 ? void 0 : (_images$values = images.values) === null || _images$values === void 0 ? void 0 : _images$values.map(function (image, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryElement.GalleryElement, {
+        setCheckAll: setCheckAll,
+        image: image,
+        gridLayout: imageLayout,
+        id: "gallery-element-" + index,
+        index: index + "-" + image.name,
+        number: index,
+        imageType: imageType,
+        imagePackagingType: imagePackagingType,
+        imageInputs: imageInputs,
+        changeImage: setImages,
+        selectedImages: selectedImages,
+        setSelectedImages: setSelectedImages
+      }, index);
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    var _images$inputs;
+
+    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name,
+        required: e === null || e === void 0 ? void 0 : e.required,
+        active: images === null || images === void 0 ? void 0 : images.values.some(function (value) {
+          return (value === null || value === void 0 ? void 0 : value.image_id) === (e === null || e === void 0 ? void 0 : e.id);
+        })
+      };
+    });
+    setSocketType(imageInputs);
+  }, [images]);
+
+  var saveDescriptions = /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+      var productTemp, dataObject;
+      return _regenerator.default.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              setLoading(true);
+              productTemp = product;
+              dataObject = {
+                articleId: product === null || product === void 0 ? void 0 : product.id_article,
+                articleData: updatedDescriptions
+              };
+              if (product !== null && product !== void 0 && product.orderId) dataObject["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
+              _context6.prev = 4;
+              _context6.next = 7;
+              return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?description=true&version=").concat(version), dataObject, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 7:
+              if (productTemp.status === "ASSIGNED") {
+                productTemp.status = "IN_PROGRESS";
+                setProduct(productTemp);
+                sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
+              }
+
+              setMessage("Descripciones guardadas con éxito");
+              loadData();
+              _context6.next = 15;
+              break;
+
+            case 12:
+              _context6.prev = 12;
+              _context6.t0 = _context6["catch"](4);
+              console.log(_context6.t0);
+
+            case 15:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6, null, [[4, 12]]);
+    }));
+
+    return function saveDescriptions() {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+
+  var saveDatasheets = /*#__PURE__*/function () {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+      var dataObject;
+      return _regenerator.default.wrap(function _callee7$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              setLoading(true);
+              dataObject = {
+                articleId: product === null || product === void 0 ? void 0 : product.id_article,
+                articleData: updatedDatasheets
+              };
+              if (product !== null && product !== void 0 && product.orderId) dataObject["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
+              _context7.prev = 3;
+              _context7.next = 6;
+              return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?datasheet=true&version=").concat(version), dataObject, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 6:
+              setMessage("Fichas técnicas guardadas");
+
+              if (productTemp.status === "ASSIGNED") {
+                productTemp.status = "IN_PROGRESS";
+                setProduct(productTemp);
+                sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
+              }
+
+              loadData();
+              _context7.next = 14;
+              break;
+
+            case 11:
+              _context7.prev = 11;
+              _context7.t0 = _context7["catch"](3);
+              console.log(_context7.t0);
+
+            case 14:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee7, null, [[3, 11]]);
+    }));
+
+    return function saveDatasheets() {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+
+  var updateImages = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
+    var _images$values2, _data$articleData, _data$articleData2, _data$updateImages;
+
+    var imagesList, imagesListTemp, duplicated, attrForImgs, data, valid, _data$updateImages2, _data$articleData3, _data$articleData4, _data$articleData5, promiseArray;
+
+    return _regenerator.default.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            imagesList = images === null || images === void 0 ? void 0 : (_images$values2 = images.values) === null || _images$values2 === void 0 ? void 0 : _images$values2.slice();
+            imagesListTemp = imagesList === null || imagesList === void 0 ? void 0 : imagesList.reduce(function (acc, image) {
+              acc[image === null || image === void 0 ? void 0 : image.image_id] = ++acc[image === null || image === void 0 ? void 0 : image.image_id] || 0;
+              return acc;
+            }, {});
+            duplicated = imagesList === null || imagesList === void 0 ? void 0 : imagesList.filter(function (image) {
+              return imagesListTemp[image === null || image === void 0 ? void 0 : image.image_id];
+            });
+            attrForImgs = Object.values(images === null || images === void 0 ? void 0 : images.attrForImgs);
+            attrForImgs.pop();
+            data = {
+              articleId: product === null || product === void 0 ? void 0 : product.id_article,
+              attrReqImgs: attrForImgs === null || attrForImgs === void 0 ? void 0 : attrForImgs.map(function (e) {
+                var _e$, _e$2;
+
+                return {
+                  attrId: (_e$ = e[0]) === null || _e$ === void 0 ? void 0 : _e$.id,
+                  value: (_e$2 = e[0]) === null || _e$2 === void 0 ? void 0 : _e$2.value
+                };
+              }),
+              articleData: imagesList === null || imagesList === void 0 ? void 0 : imagesList.filter(function (e) {
+                return !e.id;
+              }),
+              updateImages: imagesList === null || imagesList === void 0 ? void 0 : imagesList.filter(function (e) {
+                return e.id;
+              })
+            };
+            if (product !== null && product !== void 0 && product.orderId) data["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
+            valid = (data === null || data === void 0 ? void 0 : (_data$articleData = data.articleData) === null || _data$articleData === void 0 ? void 0 : _data$articleData.length) === 0 ? true : data === null || data === void 0 ? void 0 : (_data$articleData2 = data.articleData) === null || _data$articleData2 === void 0 ? void 0 : _data$articleData2.every(function (e, i) {
+              if (e !== null && e !== void 0 && e.image_id && e !== null && e !== void 0 && e.packing_type && e !== null && e !== void 0 && e.image_type) {
+                return true;
+              }
+
+              return false;
+            });
+
+            if (valid && (data === null || data === void 0 ? void 0 : (_data$updateImages = data.updateImages) === null || _data$updateImages === void 0 ? void 0 : _data$updateImages.length) > 0 && (duplicated === null || duplicated === void 0 ? void 0 : duplicated.length) === 0) {
+              valid = data === null || data === void 0 ? void 0 : (_data$updateImages2 = data.updateImages) === null || _data$updateImages2 === void 0 ? void 0 : _data$updateImages2.every(function (e, i) {
+                if (e !== null && e !== void 0 && e.image_id && e !== null && e !== void 0 && e.packing_type && e !== null && e !== void 0 && e.image_type) {
+                  return true;
+                }
+
+                return false;
+              });
+            }
+
+            if (!(valid && (duplicated === null || duplicated === void 0 ? void 0 : duplicated.length) === 0)) {
+              _context8.next = 31;
+              break;
+            }
+
+            setLoading(true);
+            _context8.prev = 11;
+            data === null || data === void 0 ? void 0 : (_data$articleData3 = data.articleData) === null || _data$articleData3 === void 0 ? void 0 : _data$articleData3.forEach(function (e) {
+              e.uuid = (0, _uuid.v4)();
+            });
+            setDataImages(data);
+
+            if (!((data === null || data === void 0 ? void 0 : (_data$articleData4 = data.articleData) === null || _data$articleData4 === void 0 ? void 0 : _data$articleData4.length) > 0)) {
+              _context8.next = 23;
+              break;
+            }
+
+            setImagesUploaded(false);
+            promiseArray = [];
+            data === null || data === void 0 ? void 0 : (_data$articleData5 = data.articleData) === null || _data$articleData5 === void 0 ? void 0 : _data$articleData5.forEach(function (e) {
+              var file = Buffer.from(e.src.replace(/^data:image\/\w+;base64,/, ""), "base64");
+              var params = {
+                ACL: "public-read",
+                Body: file,
+                Bucket: S3_BUCKET,
+                Key: "id-".concat(data.articleId, "/").concat(version, "/").concat(e === null || e === void 0 ? void 0 : e.image_id, "-").concat(e === null || e === void 0 ? void 0 : e.uuid, ".").concat(e === null || e === void 0 ? void 0 : e.ext)
+              };
+              promiseArray.push(myBucket.putObject(params).promise());
+            });
+            _context8.next = 20;
+            return Promise.all(promiseArray);
+
+          case 20:
+            setImagesUploaded(true);
+            _context8.next = 24;
+            break;
+
+          case 23:
+            setImagesUploaded(true);
+
+          case 24:
+            _context8.next = 29;
+            break;
+
+          case 26:
+            _context8.prev = 26;
+            _context8.t0 = _context8["catch"](11);
+            console.log(_context8.t0); // setMainLoading(false);
+
+          case 29:
+            _context8.next = 32;
+            break;
+
+          case 31:
+            // setMainLoading(false);
+            setMessage("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos.");
+
+          case 32:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8, null, [[11, 26]]);
+  })), [images, imagesUploaded]);
+  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
+    return _regenerator.default.wrap(function _callee9$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            if (!imagesUploaded) {
+              _context9.next = 13;
+              break;
+            }
+
+            dataImages.articleData = dataImages === null || dataImages === void 0 ? void 0 : dataImages.articleData.map(function (e) {
+              delete e.src;
+              e.imageID = e.image_id;
+              e.packingType = e.packing_type;
+              e.imageType = e.image_type;
+              if (product !== null && product !== void 0 && product.orderId) e["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
+              return e;
+            });
+            _context9.prev = 2;
+            _context9.next = 5;
+            return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), dataImages, {
+              headers: {
+                Authorization: token
+              }
+            });
+
+          case 5:
+            setMessage("Imágenes guardadas con éxito");
+            sessionStorage.removeItem("imagesList");
+            loadData();
+            _context9.next = 13;
+            break;
+
+          case 10:
+            _context9.prev = 10;
+            _context9.t0 = _context9["catch"](2);
+            console.log(_context9.t0);
+
+          case 13:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee9, null, [[2, 10]]);
+  })), [dataImages, imagesUploaded]);
+
+  var getConcept = function getConcept(tab) {
+    switch (tab) {
+      case "Descripción":
+        return "description";
+
+      case "Ficha técnica":
+        return "datasheet";
+
+      case "Imágenes":
+        return "images";
+    }
+  };
+
+  var getSectionIcon = function getSectionIcon() {
+    switch (activeTab) {
+      case "Ficha técnica":
+        setIcon(_attributesSent.default);
+        break;
+
+      case "Descripción":
+        setIcon(_descriptionSent.default);
+        break;
+
+      case "Imágenes0,,":
+        setIcon(_uploadingImages.default);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var createComment = /*#__PURE__*/function () {
+    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10(e, body, tab) {
+      var concept, data;
+      return _regenerator.default.wrap(function _callee10$(_context10) {
+        while (1) {
+          switch (_context10.prev = _context10.next) {
+            case 0:
+              concept = "";
+              _context10.t0 = activeTab;
+              _context10.next = _context10.t0 === "Ficha técnica" ? 4 : _context10.t0 === "Imágenes" ? 6 : 8;
+              break;
+
+            case 4:
+              concept = "datasheet";
+              return _context10.abrupt("break", 10);
+
+            case 6:
+              concept = "images";
+              return _context10.abrupt("break", 10);
+
+            case 8:
+              concept = "description";
+              return _context10.abrupt("break", 10);
+
+            case 10:
+              data = {
+                articleId: product === null || product === void 0 ? void 0 : product.id_article,
+                orderId: product === null || product === void 0 ? void 0 : product.orderId,
+                message: body,
+                concept: concept,
+                version: version
+              };
+              _context10.next = 13;
+              return _axios.default.post("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT), data, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 13:
+            case "end":
+              return _context10.stop();
+          }
+        }
+      }, _callee10);
+    }));
+
+    return function createComment(_x2, _x3, _x4) {
+      return _ref11.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    setComment(comments[activeTab]);
+  }, [activeTab]);
+
+  var commentRevised = /*#__PURE__*/function () {
+    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11() {
+      var data;
+      return _regenerator.default.wrap(function _callee11$(_context11) {
+        while (1) {
+          switch (_context11.prev = _context11.next) {
+            case 0:
+              data = {
+                commentId: comment.id
+              };
+              _context11.next = 3;
+              return _axios.default.put("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT), data, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              setCrossComment(false);
+
+            case 4:
+            case "end":
+              return _context11.stop();
+          }
+        }
+      }, _callee11);
+    }));
+
+    return function commentRevised() {
+      return _ref12.apply(this, arguments);
+    };
+  }();
+
+  var setAssignation = /*#__PURE__*/function () {
+    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12(assignationType, assignationId) {
+      var concept, productTemp, data;
+      return _regenerator.default.wrap(function _callee12$(_context12) {
+        while (1) {
+          switch (_context12.prev = _context12.next) {
+            case 0:
+              concept = "";
+              _context12.t0 = activeTab;
+              _context12.next = _context12.t0 === "Ficha técnica" ? 4 : _context12.t0 === "Imágenes" ? 6 : 8;
+              break;
+
+            case 4:
+              concept = "datasheet";
+              return _context12.abrupt("break", 10);
+
+            case 6:
+              concept = "images";
+              return _context12.abrupt("break", 10);
+
+            case 8:
+              concept = "description";
+              return _context12.abrupt("break", 10);
+
+            case 10:
+              productTemp = product;
+              productTemp.article["id_".concat(concept, "_").concat(assignationType)] = assignationId;
+              data = (0, _defineProperty2.default)({
+                articleList: [{
+                  orderId: product.orderId,
+                  articleId: product === null || product === void 0 ? void 0 : product.id_article
+                }],
+                concept: concept
+              }, "".concat(assignationType, "Id"), assignationId);
+              (0, _axios.default)({
+                method: "post",
+                url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
+                data: data,
+                headers: {
+                  Authorization: token
+                }
+              });
+              loadAssignations(productTemp);
+              sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
+
+            case 16:
+            case "end":
+              return _context12.stop();
+          }
+        }
+      }, _callee12);
+    }));
+
+    return function setAssignation(_x5, _x6) {
+      return _ref13.apply(this, arguments);
+    };
+  }();
+
+  var evaluationComplete = function evaluationComplete(tab) {
+    var concept = getConcept(tab);
+    var serv = servicesData.filter(function (item) {
+      return item.service === concept;
+    });
+
+    if (["RequestWithContentoh", "RequestWithoutContentoh"].includes(origin[tab])) {
+      serv = serv.filter(function (f) {
+        return f.id_retailer === activeRetailer.id;
+      });
+    }
+
+    var statusArray = user.is_retailer === 1 ? ["AC", "RC"] : ["AP", "RP", "AC"];
+    return serv.length > 0 && serv.every(function (item) {
+      return statusArray.includes(item.status);
+    });
+  };
+
+  var downloadImages = function downloadImages() {
+    selectedImages.forEach(function (e) {
+      if (e.id) {
+        (0, _fileSaver.saveAs)("https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(e.srcDB), "".concat(product.article.upc, "_").concat(e.name, ".").concat(e.ext));
+      }
+    });
+  };
+
+  var deleteImages = function deleteImages() {
+    setLoading(true);
+    var values = images.values;
+    var imgsInBack = [];
+    selectedImages.forEach(function (selectedImg) {
+      if (selectedImg.id) imgsInBack.push(selectedImg);
+    });
+    var imgsLeft = values.filter(function (value) {
+      return selectedImages.indexOf(value) === -1;
+    });
+
+    if (imgsInBack.length > 0) {
+      var _product$article4;
+
+      var data = {
+        articleId: (product === null || product === void 0 ? void 0 : product.id_article) || (product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : _product$article4.id_article),
+        deleteImages: imgsInBack
+      };
+
+      try {
+        _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), data, {
+          headers: {
+            Authorization: token
+          }
+        });
+      } catch (err) {
+        console.log(err);
+      }
+    }
+
+    setImages({
+      action: "deleteImage",
+      selectedImages: selectedImages
+    });
+    setTimeout(function () {
+      setLoading(false);
+    }, 500);
+    setMessage("");
+    setComponentsArray([]);
+  };
+
+  var askToDeleteImages = function askToDeleteImages() {
+    if (selectedImages.length > 0) {
+      setMessage("¿Está seguro de eliminar las imágenes seleccionadas?");
+      setComponentsArray([/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        text: "¿Está seguro de eliminar las imágenes seleccionadas?",
+        headerType: "retailer-name-header",
+        color: "white"
+      }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+        buttonType: "general-white-button",
+        label: "Cancelar",
+        onClick: function onClick() {
+          return setMessage("");
+        }
+      }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+        buttonType: "general-button-default",
+        label: "Aceptar",
+        onClick: function onClick() {
+          setMessage("");
+          deleteImages();
+        }
+      }, "3")]);
+    }
+  };
+
+  var specialistValid = function specialistValid(tab) {
+    var concept = "";
+
+    switch (tab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      case "Descripción":
+        concept = "description";
+        break;
+    }
+
+    return product["".concat(concept, "_status")] === "IN_PROGRESS" || product["".concat(concept, "_status")] === "RF" || product["".concat(concept, "_status")] === "RA";
+  };
+
+  var confirmStatusComplete = function confirmStatusComplete() {
+    var datasheet_status = product.datasheet_status,
+        description_status = product.description_status,
+        images_status = product.images_status;
+    var completionStates = user.is_retailer === 1 ? ["AC", "Evaluated", "NS"] : ["AP", "Evaluated", "NS"];
+    var dsEvaluated = completionStates.includes(datasheet_status);
+    var descsEvaluated = completionStates.includes(description_status);
+    var imgsEvaluated = completionStates.includes(images_status);
+    var AllEvaluated = dsEvaluated && descsEvaluated && imgsEvaluated;
+    return AllEvaluated;
+  };
+
+  var sendEvaluation = /*#__PURE__*/function () {
+    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13(result) {
+      var data, retailerId, _product$id_order2, _product$id_order3, _productTemp, concept;
+
+      return _regenerator.default.wrap(function _callee13$(_context13) {
+        while (1) {
+          switch (_context13.prev = _context13.next) {
+            case 0:
+              setLoading(true);
+              data = {};
+              retailerId = activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id;
+
+              if (!result) {
+                _context13.next = 9;
+                break;
+              }
+
+              data = {
+                articleId: product.id_article,
+                orderId: (_product$id_order2 = product.id_order) !== null && _product$id_order2 !== void 0 ? _product$id_order2 : product.orderId,
+                concept: getConcept(activeTab),
+                result: result,
+                retailerId: retailerId
+              };
+              _context13.next = 7;
+              return _axios.default.put("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), data, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 7:
+              _context13.next = 18;
+              break;
+
+            case 9:
+              _productTemp = product;
+              concept = getConcept(activeTab);
+              _productTemp["".concat(concept, "_status")] = "Evaluated";
+              data = {
+                articleId: product.id_article,
+                orderId: (_product$id_order3 = product.id_order) !== null && _product$id_order3 !== void 0 ? _product$id_order3 : product.orderId,
+                concept: concept,
+                retailerId: retailerId
+              };
+
+              _axios.default.put("".concat(process.env.REACT_APP_SEND_EVAL), data, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+              setProduct(_productTemp);
+              setProductEdit({
+                ArticleId: _productTemp.id_article,
+                idCategory: _productTemp.article.id_category,
+                product: _productTemp
+              });
+              sessionStorage.setItem("productEdit", JSON.stringify({
+                ArticleId: _productTemp.id_article,
+                idCategory: _productTemp.article.id_category,
+                product: _productTemp
+              }));
+              setOrigin(function (prev) {
+                return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, (0, _defineProperty2.default)({}, concept, "Evaluated"));
+              });
+
+            case 18:
+              loadData();
+              showSurvey && showSurvey(confirmStatusComplete());
+
+            case 20:
+            case "end":
+              return _context13.stop();
+          }
+        }
+      }, _callee13);
+    }));
+
+    return function sendEvaluation(_x7) {
+      return _ref14.apply(this, arguments);
+    };
+  }();
+
+  var evaluationToRetailer = /*#__PURE__*/function () {
+    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(result) {
+      var data, prod, statusComplete;
+      return _regenerator.default.wrap(function _callee14$(_context14) {
+        while (1) {
+          switch (_context14.prev = _context14.next) {
+            case 0:
+              data = {
+                articleId: product.id_article,
+                companyId: user.is_retailer ? product.provider_company_id : product.retailer_company_id,
+                versionId: product.version,
+                status: result
+              };
+              _context14.next = 3;
+              return _axios.default.put("".concat(process.env.REACT_APP_RETAILER_REQUEST), data, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              prod = productEdit;
+              statusComplete = user.is_retailer ? "".concat(result, "C") : "".concat(result, "P");
+              prod.product.datasheet_status = statusComplete;
+              prod.product.description_status = statusComplete;
+              prod.product.images_status = statusComplete;
+              prod.product.article_status = statusComplete;
+              prod.product.services_status = "[\"".concat(statusComplete, "\",\"").concat(statusComplete, "\",\"").concat(statusComplete, "\"]");
+              sessionStorage.setItem("productEdit", JSON.stringify(prod));
+              setProduct(prod);
+              setShowGenericModal && setShowGenericModal(false);
+              loadData();
+
+            case 14:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14);
+    }));
+
+    return function evaluationToRetailer(_x8) {
+      return _ref15.apply(this, arguments);
+    };
+  }();
+
+  var getSectionStatus = function getSectionStatus() {
+    var concept = getConcept(activeTab);
+    return ["AA", "AP", "RECEIVED", "IN_PROGRESS", "RC"].includes(productEdit.product["".concat(concept, "_status")]);
+  };
+
+  var enableActions = function enableActions(versionStatus) {
+    if (versionStatus) {
+      return ["AP", "AC", "RC"].includes(versionStatus);
+    }
+
+    return true;
+  };
+
+  (0, _react.useEffect)(function () {
+    setSaving(loading);
+  }, [loading]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    headerTop: headerTop,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
+      setHeaderTop: setHeaderTop
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "data-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "image-data-panel",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewer.ImagePreviewer, {
+          activeImage: images !== null && images !== void 0 && images.values ? images === null || images === void 0 ? void 0 : images.values[activeImage] : {},
+          imagesArray: images,
+          setActiveImage: setActiveImage,
+          setShowModal: setShowModal
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
+          lists: images,
+          activeImage: images !== null && images !== void 0 && images.values ? images === null || images === void 0 ? void 0 : images.values[activeImage] : {},
+          retailerSelected: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id,
+          setImages: setImages,
+          assignationsImages: assig,
+          imagesStatus: product === null || product === void 0 ? void 0 : product.images_status,
+          setAssignation: setAssignation,
+          isRetailer: isRetailer,
+          onClickSave: function onClickSave() {
+            var _product$services;
+
+            return (product === null || product === void 0 ? void 0 : (_product$services = product.services) === null || _product$services === void 0 ? void 0 : _product$services.images) === 1 && updateImages();
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "product-information",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
+          headerData: product,
+          percent: activePercentage,
+          activeRetailer: activeRetailer,
+          setActiveRetailer: setActiveRetailer,
+          showValidationButtons: isRevision() && getSectionStatus(),
+          servicesData: servicesData ? servicesData : null,
+          approve: function approve() {
+            if (origin[activeTab] === "RequestWithoutContentoh" && !user.is_retailer && (!product.id_order || !product.orderId)) {
+              setDataGenericModal(function (prev) {
+                return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, {
+                  button2: {
+                    name: "Continuar",
+                    action: function action() {
+                      return evaluationToRetailer("A");
+                    }
+                  }
+                });
+              });
+              setShowGenericModal(true);
+            } else {
+              if (user.is_retailer) {
+                if (product.id_order || product.orderId) {
+                  sendEvaluation("A");
+                } else {
+                  setDataGenericModal(function (prev) {
+                    return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, {
+                      button2: {
+                        name: "Continuar",
+                        action: function action() {
+                          return evaluationToRetailer("A");
+                        }
+                      }
+                    });
+                  });
+                  setShowGenericModal(true);
+                }
+              } else {
+                sendEvaluation("A");
+              }
+            }
+          },
+          reject: function reject() {
+            if (origin[activeTab] === "RequestWithoutContentoh" && !user.is_retailer && (!product.id_order || !product.orderId)) {
+              return;
+            } else {
+              if (user.is_retailer) {
+                if (product.id_order || product.orderId) {
+                  sendEvaluation("R");
+                  setModalViewError(true);
+                } else {
+                  setDataGenericModal(function (prev) {
+                    return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, {
+                      button2: {
+                        name: "Continuar",
+                        action: function action() {
+                          return evaluationToRetailer("R");
+                        }
+                      }
+                    });
+                  });
+                  setShowGenericModal(true);
+                }
+              } else {
+                sendEvaluation("R");
+                setModalViewError(true);
+              }
+            }
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
+          tabsSections: tabsSections,
+          status: product["".concat(getConcept(activeTab), "_status")] || (product === null || product === void 0 ? void 0 : product.version_status),
+          activeTab: activeTab,
+          setActiveTab: setActiveTab,
+          setImageLayout: setImageLayout,
+          downloadImages: downloadImages,
+          askToDeleteImages: askToDeleteImages,
+          assig: assig,
+          setAssignation: setAssignation,
+          isRetailer: isRetailer,
+          showSaveButton: ["AP", "AC", "RC"].includes(product.version_status),
+          onClickSave: function onClickSave() {
+            switch (activeTab) {
+              case "Descripción":
+                !saving && saveDescriptions();
+                break;
+
+              case "Ficha técnica":
+                !saving && saveDatasheets();
+                break;
+
+              case "Imágenes":
+                !saving && updateImages();
+                break;
+
+              default:
+                break;
+            }
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "services-information-container " + (imageLayout && activeTab === "Imágenes" ? "image-services" : ""),
+          children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [!imageLayout && activeTab === "Imágenes" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+              setSelectedImages: setSelectedImages,
+              checkAll: checkAll,
+              setCheckAll: setCheckAll
+            }), activeTab === "Ficha técnica" && ((product === null || product === void 0 ? void 0 : product.datasheet_status) !== "NS" ? (_datasheets$ = datasheets[0]) === null || _datasheets$ === void 0 ? void 0 : (_datasheets$$data = _datasheets$.data) === null || _datasheets$$data === void 0 ? void 0 : _datasheets$$data.map(function (dataGroup, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                articleId: product.id_article,
+                version: version,
+                activeSection: activeTab,
+                inputGroup: dataGroup,
+                dataInputs: datasheets[1],
+                updatedDatasheets: updatedDatasheets,
+                setUpdatedDatasheets: setUpdatedDatasheets //enableActions={enableActions(product.version_status)} ADD THIS VALIDATION
+
+              }, index + "-" + activeRetailer.name);
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+              text: "No cuentas con este servicio",
+              headerType: "input-name-header"
+            })), activeTab === "Descripción" && ((product === null || product === void 0 ? void 0 : product.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+              activeSection: activeTab,
+              inputGroup: descriptions[0],
+              updatedDescriptions: updatedDescriptions,
+              setUpdatedDescriptions: setUpdatedDescriptions,
+              articleId: product === null || product === void 0 ? void 0 : product.id_article,
+              version: version,
+              dinamicHeight: true
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+              text: "No cuentas con este servicio",
+              headerType: "input-name-header"
+            })), activeTab === "Imágenes" && ((product === null || product === void 0 ? void 0 : product.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+              className: "container",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread3.default)((0, _objectSpread3.default)({}, getRootProps({
+                className: "dropzone"
+              })), {}, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread3.default)({}, getInputProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+                  children: thumbs()
+                })]
+              }))
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+              text: "No cuentas con este servicio",
+              headerType: "input-name-header"
+            }))]
+          })
+        }), isRevision() && getSectionStatus() ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "commentary-box",
+          children: [!comment ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "commentary",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
+              label: "Caja de Comentario",
+              inputType: "textarea",
+              inputCols: 80,
+              inputRows: 4,
+              inputId: "commentary-box",
+              index: 0
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "buttons-box",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+                buttonType: "general-transparent-button",
+                label: "Enviar comentario",
+                onClick: function onClick(e) {
+                  return createComment(e, document.querySelector("#description-commentary-box-0 .ql-container .ql-editor > p").innerHTML, activeTab);
+                }
+              })
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "feedback-box",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Commentary.Commentary, {
+              comment: comment.message,
+              reviewed: crossComment
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+              buttonType: "circular-button accept-button",
+              onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15() {
+                return _regenerator.default.wrap(function _callee15$(_context15) {
+                  while (1) {
+                    switch (_context15.prev = _context15.next) {
+                      case 0:
+                        setCrossComment(true);
+                        commentRevised();
+
+                      case 2:
+                      case "end":
+                        return _context15.stop();
+                    }
+                  }
+                }, _callee15);
+              }))
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            buttonType: evaluationComplete(activeTab) && (productEdit.product.id_order || productEdit.product.orderId) ? "general-green-button" : "general-button-disabled",
+            label: "Enviar evaluación",
+            onClick: function onClick() {
+              //setModalSent(true);
+              sendEvaluation();
+              setMessage("\xA1Evaluaci\xF3n de ".concat(activeTab, " completada!"));
+            }
+          })]
+        }) : revision ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "required-inputs-message",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: "Los atributos son requeridos por las plataformas de las cadenas, es muy importante completar los campos requeridos ya que pueden rechazar el producto por falta de informaci\xF3n."
+            })
+          }), inCart ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Link, {
+              to: "/checkout",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                children: "Articulo en carrito"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                children: "Ir a checkout"
+              })]
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            onClick: function onClick() {
+              setShowContentohRequestModal && setShowContentohRequestModal(true);
+            },
+            buttonType: "general-default-button",
+            label: "Enviar a Content-oh!"
+          })]
+        })]
+      })]
+    }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
+      images: images,
+      setShowModal: setShowModal
+    }), message.length > 0 && !showSurvey && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
+      buttonType: componentsArray.length > 0 && "delete-product",
+      componentsArray: componentsArray.length > 0 ? componentsArray : [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _genericModalCheck.default,
+        alt: "success icon"
+      }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "retailer-name-header",
+        text: message,
+        color: "white"
+      }, "2")],
+      onClick: function onClick() {
+        return setMessage("");
+      }
+    }), modalSent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GlobalModal, {
+      close: function close() {
+        return setModalSent(false);
+      },
+      message: message,
+      detail: "",
+      bold: !evaluationComplete(activeTab) && "Aprueba / Rechaza",
+      widthImg: !evaluationComplete(activeTab) ? "160px" : "354px",
+      heightImg: !evaluationComplete(activeTab) ? "84px" : "354px",
+      img: getSectionIcon()
+    }), modalViewError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GlobalModal, {
+      close: function close() {
+        return setModalViewError(false);
+      },
+      message: "".concat(activeTab, " rechazada"),
+      detail: "Agrega tu comentarios para enviar el rechazo",
+      button1: {
+        name: "Enviar",
+        action: function action(e) {
+          createComment(e, document.querySelector("#area").value);
+          setModalViewError(false);
+          setModalViewTextArea(true);
+        }
+      },
+      img: _errorModal.default,
+      textArea: true
+    }), showGenericModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GlobalModal, {
+      close: function close() {
+        return setShowGenericModal(false);
+      },
+      message: dataGenericModal.message,
+      detail: dataGenericModal.detail,
+      button1: dataGenericModal.button1,
+      button2: dataGenericModal.button2,
+      img: dataGenericModal.img
+    }), modalViewTextArea && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GlobalModal, {
+      close: function close() {
+        return setModalViewTextArea(false);
+      },
+      message: "Gracias, tus comentarios fueron entregados.",
+      detail: "Trabajaremos en conjunto para resolverlo.",
+      button1: {
+        name: "Cerrar",
+        action: function action() {
+          return setModalViewTextArea(false);
+        }
+      },
+      img: _defaultProfileImage.default,
+      textArea: false
+    })]
+  });
+};
+
+exports.ProviderProductEdition = ProviderProductEdition;