contentoh-components-library 6.0.0 → 7.0.0

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

@@ -13,6 +13,10 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
+var _objectSpread2 = _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");
@@ -31,20 +35,96 @@ var _react = require("react");
 
 var _GalleryElement = require("../../molecules/GalleryElement");
 
+var _data = 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 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, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: values
+      });
+
+    case "changeImageInfo":
+      values[action.index][action.attribute] = action.value;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: values
+      });
+
+    case "changeAttrValue":
+      attrForImgs[action.retailer][action.index].value = action.value;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        attrForImgs: attrForImgs,
+        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 RetailerProductEdition = function RetailerProductEdition(_ref) {
-  var _productData$services, _productData$services2, _productData$services3, _productData$services4;
+  var _servicesData$filter$, _servicesData$filter$2, _product$services, _datasheets$, _datasheets$$data, _product$services2, _product$services3;
 
   var productData = _ref.productData,
-      tabsSections = _ref.tabsSections;
+      tabsSections = _ref.tabsSections,
+      articleId = _ref.articleId,
+      _ref$productSelected = _ref.productSelected,
+      productSelected = _ref$productSelected === void 0 ? {} : _ref$productSelected,
+      _ref$user = _ref.user,
+      user = _ref$user === void 0 ? {} : _ref$user;
 
   var _useState = (0, _react.useState)("Descripción"),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       activeTab = _useState2[0],
       setActiveTab = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(productData === null || productData === void 0 ? void 0 : (_productData$services = productData.services) === null || _productData$services === void 0 ? void 0 : _productData$services.Imágenes[0]),
+  var _useState3 = (0, _react.useState)(),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       activeImage = _useState4[0],
       setActiveImage = _useState4[1];
@@ -59,36 +139,923 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       headerTop = _useState8[0],
       setHeaderTop = _useState8[1];
 
-  var getData = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var response;
-      return _regenerator.default.wrap(function _callee$(_context) {
+  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 _useState15 = (0, _react.useState)(54),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      retailerSelected = _useState16[0],
+      setRetailerSelected = _useState16[1]; // revisar después como trabajar esto de mejor forma
+
+
+  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, width, height, newImg;
+            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;
+                    width = img.width;
+                    height = img.height;
+                    newImg = {
+                      action: "addImg",
+                      img: {
+                        src: e.target.result,
+                        name: e.target.fileName,
+                        ext: ext[ext.length - 1],
+                        width: width,
+                        height: width
+                      }
+                    };
+                    setImages(newImg);
+
+                  case 7:
+                  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 _useState17 = (0, _react.useState)([]),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      updatedDatasheets = _useState18[0],
+      setUpdatedDatasheets = _useState18[1];
+
+  var _useState19 = (0, _react.useState)([]),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      updatedDescriptions = _useState20[0],
+      setUpdatedDescriptions = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(false),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      imagesUploaded = _useState22[0],
+      setImagesUploaded = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      dataImages = _useState24[0],
+      setDataImages = _useState24[1];
+
+  var _useState25 = (0, _react.useState)(new Array(productSelected.retailers.length).fill({
+    percentage: 0
+  })),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      percentages = _useState26[0],
+      setPercentages = _useState26[1];
+
+  var _useState27 = (0, _react.useState)(0),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      activePercentage = _useState28[0],
+      setActivePercentage = _useState28[1];
+
+  var _useState29 = (0, _react.useState)({}),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      activeRetailer = _useState30[0],
+      setActiveRetailer = _useState30[1];
+
+  var _useState31 = (0, _react.useState)([]),
+      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
+      services = _useState32[0],
+      setServices = _useState32[1];
+
+  var _useState33 = (0, _react.useState)([]),
+      _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
+      servicesData = _useState34[0],
+      setServicesData = _useState34[1];
+
+  var _useState35 = (0, _react.useState)(""),
+      _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
+      message = _useState36[0],
+      setMessage = _useState36[1];
+
+  var _useState37 = (0, _react.useState)({}),
+      _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
+      product = _useState38[0],
+      setProduct = _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)(productSelected === null || productSelected === void 0 ? void 0 : productSelected.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)(0),
+      _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
+      requiredNull = _useState46[0],
+      setRequiredNull = _useState46[1];
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _services$, _services$$values;
+
+      var services;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              _context.next = 2;
-              return _axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT, "?idCategory=846&articleId=238&version=2"));
+              _context2.next = 2;
+              return (0, _data.getRetailerServices)(productSelected.article.id_article, parseInt(productSelected.article.id_category), productSelected.version);
 
             case 2:
-              response = _context.sent;
-              console.log(JSON.parse(response.data.body).data);
+              services = _context2.sent;
+              console.log(services, "parsedResponse"); //Converts the data inside the datasheets object to array
+
+              setServices(services);
+              setActiveRetailer(productSelected === null || productSelected === void 0 ? void 0 : productSelected.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);
+              setProduct(productSelected);
+
+            case 9:
+            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(tab) {
+      var serviceActive, selected, servicesResponse, parsedResponse;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              serviceActive = "";
+              _context3.t0 = tab;
+              _context3.next = _context3.t0 === "Ficha técnica" ? 4 : _context3.t0 === "Imágenes" ? 6 : 8;
+              break;
 
             case 4:
+              serviceActive = "datasheet";
+              return _context3.abrupt("break", 10);
+
+            case 6:
+              serviceActive = "images";
+              return _context3.abrupt("break", 10);
+
+            case 8:
+              serviceActive = "description";
+              return _context3.abrupt("break", 10);
+
+            case 10:
+              selected = productSelected;
+              _context3.next = 13;
+              return _axios.default.get("".concat(process.env.REACT_APP_SERVICES_ENDPOINT, "?articleId=").concat(selected.article.id_article, "&orderId=").concat(selected.article.id_order, "&end=true"));
+
+            case 13:
+              servicesResponse = _context3.sent;
+              parsedResponse = JSON.parse(servicesResponse.data.body).data;
+              setServicesData(parsedResponse);
+
+            case 16:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function getServices(_x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var translateConcept = function translateConcept(concept) {
+    var translation = "";
+
+    if (concept === "datasheet") {
+      translation = "Ficha ténica";
+    } else if (concept === "description") {
+      translation = "Descripción";
+    } else if (concept === "images") {
+      translation = "Imágenes";
+    }
+
+    return translation;
+  };
+
+  var getComments = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(tab) {
+      var _productSelected$arti, _productSelected$arti2, _productSelected$arti3;
+
+      var commentsResponse, comments;
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return Promise.all([_axios.default.get("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT, "?articleId=").concat(productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti = productSelected.article) === null || _productSelected$arti === void 0 ? void 0 : _productSelected$arti.id_article, "&concept=description&orderIdColab=").concat(productSelected === null || productSelected === void 0 ? void 0 : productSelected.orderId, "&version=").concat(version)), _axios.default.get("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT, "?articleId=").concat(productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti2 = productSelected.article) === null || _productSelected$arti2 === void 0 ? void 0 : _productSelected$arti2.id_article, "&concept=datasheet&orderIdColab=").concat(productSelected === null || productSelected === void 0 ? void 0 : productSelected.orderId, "&version=").concat(version)), _axios.default.get("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT, "?articleId=").concat(productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti3 = productSelected.article) === null || _productSelected$arti3 === void 0 ? void 0 : _productSelected$arti3.id_article, "&concept=images&orderIdColab=").concat(productSelected === null || productSelected === void 0 ? void 0 : productSelected.orderId, "&version=").concat(version))]);
+
+            case 2:
+              commentsResponse = _context4.sent;
+              comments = {};
+              commentsResponse.map(function (comment) {
+                var _JSON$parse$data$;
+
+                return JSON.parse(comment.data.body).data[0] && (comments[translateConcept((_JSON$parse$data$ = JSON.parse(comment.data.body).data[0]) === null || _JSON$parse$data$ === void 0 ? void 0 : _JSON$parse$data$.concept)] = JSON.parse(comment.data.body).data[0]);
+              });
+              setComments(comments); //const comment = JSON.parse(commentsResponse.data.body).data;
+              //setComment(comment[0]);
+
+            case 6:
             case "end":
-              return _context.stop();
+              return _context4.stop();
           }
         }
-      }, _callee);
+      }, _callee4);
     }));
 
-    return function getData() {
-      return _ref2.apply(this, arguments);
+    return function getComments(_x3) {
+      return _ref5.apply(this, arguments);
     };
   }();
 
   (0, _react.useEffect)(function () {
-    getData();
+    loadData();
+    (0, _data.getPercentage)({
+      data: [productSelected]
+    }).then(function (res) {
+      return setPercentages(res);
+    });
+    getServices();
+    getComments();
   }, []);
+  (0, _react.useEffect)(function () {
+    var _productSelected$reta;
+
+    productSelected.retailers.forEach(function (retailer) {
+      var _percentages$filter$;
+
+      retailer["percentage"] = (_percentages$filter$ = percentages.filter(function (percent) {
+        return retailer.id === percent.id_retailer;
+      })[0]) === null || _percentages$filter$ === void 0 ? void 0 : _percentages$filter$.percentage;
+    });
+    setActivePercentage(productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$reta = productSelected.retailers[0]) === null || _productSelected$reta === void 0 ? void 0 : _productSelected$reta.percentage);
+  }, [percentages]);
+  (0, _react.useEffect)(function () {
+    if (services.length > 0) {
+      services[0][activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id].data = Object.values(services[0][activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id].data);
+      setActivePercentage(Math.round(activeRetailer.percentage, 0));
+      setDatasheets([services[0][activeRetailer.id], services[0].inputs]);
+      setDescriptions(services[1].filter(function (service) {
+        return service.id === activeRetailer.id;
+      }));
+    }
+  }, [activeRetailer]);
+
+  var thumbs = function thumbs() {
+    var _images$values;
+
+    var imageInputs = images.inputs.map(function (e) {
+      return {
+        value: e.id,
+        name: e.name
+      };
+    });
+    var imageType = images.imageType.map(function (e) {
+      return {
+        value: e.id,
+        name: e.name
+      };
+    });
+    var imagePackagingType = images.imagePackagingType.map(function (e) {
+      return {
+        value: e.id,
+        name: 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__*/React.createElement(_GalleryElement.GalleryElement, {
+        key: index,
+        image: image,
+        gridLayout: imageLayout,
+        id: "gallery-element-" + index,
+        index: index,
+        imageType: imageType,
+        imagePackagingType: imagePackagingType,
+        imageInputs: imageInputs,
+        changeImage: setImages
+      });
+    });
+  };
+
+  var saveDescriptions = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+      var _productSelected$arti4;
+
+      var dataObject;
+      return _regenerator.default.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              dataObject = {
+                articleId: productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti4 = productSelected.article) === null || _productSelected$arti4 === void 0 ? void 0 : _productSelected$arti4.id_article,
+                articleData: updatedDescriptions
+              };
+              _context5.prev = 1;
+              _context5.next = 4;
+              return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?description=true&version=").concat(version), dataObject, {
+                headers: {
+                  Authorization: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A"
+                }
+              });
+
+            case 4:
+              _context5.next = 9;
+              break;
+
+            case 6:
+              _context5.prev = 6;
+              _context5.t0 = _context5["catch"](1);
+              console.log(_context5.t0);
+
+            case 9:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5, null, [[1, 6]]);
+    }));
+
+    return function saveDescriptions() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+
+  var saveDatasheets = /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+      var _productSelected$arti5;
+
+      var dataObject;
+      return _regenerator.default.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              dataObject = {
+                articleId: productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti5 = productSelected.article) === null || _productSelected$arti5 === void 0 ? void 0 : _productSelected$arti5.id_article,
+                articleData: updatedDatasheets
+              };
+              _context6.prev = 1;
+              _context6.next = 4;
+              return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?datasheet=true&version=").concat(version), dataObject, {
+                headers: {
+                  Authorization: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A"
+                }
+              });
+
+            case 4:
+              console.log("saved");
+              _context6.next = 10;
+              break;
+
+            case 7:
+              _context6.prev = 7;
+              _context6.t0 = _context6["catch"](1);
+              console.log(_context6.t0);
+
+            case 10:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6, null, [[1, 7]]);
+    }));
+
+    return function saveDatasheets() {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+
+  var updateImages = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+    var _images$values2;
+
+    var imagesList, imagesListTemp, duplicated, attrForImgs, data, valid, promiseArray;
+    return _regenerator.default.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.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.reduce(function (acc, image) {
+              acc[image.image_id] = ++acc[image.image_id] || 0;
+              return acc;
+            }, {});
+            duplicated = imagesList.filter(function (image) {
+              return imagesListTemp[image.image_id];
+            });
+            attrForImgs = Object.values(images === null || images === void 0 ? void 0 : images.attrForImgs);
+            attrForImgs.pop();
+            data = {
+              articleId: articleId,
+              attrReqImgs: attrForImgs.map(function (e) {
+                return {
+                  attrId: e[0].id,
+                  value: e[0].value
+                };
+              }),
+              articleData: imagesList.filter(function (e) {
+                return !e.id;
+              }),
+              updateImages: imagesList.filter(function (e) {
+                return e.id;
+              })
+            };
+            valid = data.articleData.length === 0 ? true : data.articleData.every(function (e, i) {
+              if (e.image_id && e.packing_type && e.image_type) {
+                return true;
+              }
+
+              return false;
+            });
+
+            if (valid && data.updateImages.length > 0 && duplicated.length === 0) {
+              valid = data.updateImages.every(function (e, i) {
+                if (e.image_id && e.packing_type && e.image_type) {
+                  return true;
+                }
+
+                return false;
+              });
+            }
+
+            if (!(valid && duplicated.length === 0)) {
+              _context7.next = 29;
+              break;
+            }
+
+            _context7.prev = 9;
+            data.articleData.forEach(function (e) {
+              e.uuid = (0, _uuid.v4)();
+            });
+            setDataImages(data);
+
+            if (!(data.articleData.length > 0)) {
+              _context7.next = 21;
+              break;
+            }
+
+            setImagesUploaded(false);
+            promiseArray = [];
+            data.articleData.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.image_id, "-").concat(e.uuid, ".").concat(e.ext)
+              };
+              promiseArray.push(myBucket.putObject(params).promise());
+            });
+            _context7.next = 18;
+            return Promise.all(promiseArray);
+
+          case 18:
+            setImagesUploaded(true);
+            _context7.next = 22;
+            break;
+
+          case 21:
+            setImagesUploaded(true);
+
+          case 22:
+            _context7.next = 27;
+            break;
+
+          case 24:
+            _context7.prev = 24;
+            _context7.t0 = _context7["catch"](9);
+            console.log(_context7.t0); // setMainLoading(false);
+
+          case 27:
+            _context7.next = 30;
+            break;
+
+          case 29:
+            // setMainLoading(false);
+            console.log("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.", "Recuerda hay campos obligatorios y no podras avanzar si no estan completos."); // setAlertList((prev) => [
+            //   ...prev,
+            //   {
+            //     titleMsg: "Completa los campos que solicita cada una de la imágenes",
+            //     alertMsg:
+            //       "Recuerda hay campos obligatorios y no podras avanzar si no estan completos.",
+            //   },
+            // ]);
+
+          case 30:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7, null, [[9, 24]]);
+  })), [images, imagesUploaded]);
+  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
+    return _regenerator.default.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            if (!imagesUploaded) {
+              _context8.next = 11;
+              break;
+            }
+
+            dataImages.articleData = dataImages.articleData.map(function (e) {
+              delete e.src;
+              e.imageID = e.image_id;
+              e.packingType = e.packing_type;
+              e.imageType = e.image_type;
+              return e;
+            });
+            _context8.prev = 2;
+            _context8.next = 5;
+            return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), dataImages, {
+              headers: {
+                Authorization: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A"
+              }
+            });
+
+          case 5:
+            console.log("imágenes guardadas con éxito");
+            _context8.next = 11;
+            break;
+
+          case 8:
+            _context8.prev = 8;
+            _context8.t0 = _context8["catch"](2);
+            console.log(_context8.t0);
+
+          case 11:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8, null, [[2, 8]]);
+  })), [dataImages, imagesUploaded]);
+
+  var approveRejectButtons = function approveRejectButtons(action) {
+    var concept = "";
+
+    switch (activeTab) {
+      case "Descripción":
+        concept = "description";
+        break;
+
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        break;
+    }
+
+    concept = action ? action : concept;
+    return productSelected["".concat(concept, "_status")] === "QF" && (user.id_role === 1 || user.id_role === 4 || user.id_role === 5) || productSelected["".concat(concept, "_status")] === "AF" && (user.id_role === 1 || user.id_role === 6) || productSelected["".concat(concept, "_status")] === "RP" && (user.id_role === 1 || user.id_role === 6);
+  };
+
+  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 updateCompaniesList = function updateCompaniesList(status, result, retailerId, concept) {
+    var serv = servicesData.slice();
+    var item = serv.find(function (item) {
+      return item.id_retailer === retailerId && item.service === concept;
+    });
+    var index = serv.indexOf(item);
+
+    if (status === "IN_PROGRESS" || status === "QF" || status === "RF" || status === "RA") {
+      if (result === "A") {
+        if (activeTab === "Imágenes") {
+          serv.map(function (item) {
+            item.status = "AF";
+          });
+        } else {
+          serv[index].status = "AF";
+        }
+      } else if (result === "R") {
+        if (activeTab === "Imágenes") {
+          serv.map(function (item) {
+            item.status = "RF";
+          });
+        } else {
+          serv[index].status = "RF";
+        }
+      } else {
+        if (status === "IN_PROGRESS" || status === "ASSIGNED") {
+          serv.map(function (item) {
+            item.status = "QF";
+          });
+        } else {
+          serv.map(function (item) {
+            if (item.status === "RF" || item.status === "RA") {
+              item.status = "QF";
+            }
+
+            return item;
+          });
+        }
+      }
+    } else if (status === "AF" || status === "RP") {
+      if (result === "A") {
+        if (activeTab === "Imágenes") {
+          serv.map(function (item) {
+            item.status = "AA";
+          });
+        } else {
+          serv[index].status = "AA";
+        }
+      } else {
+        if (activeTab === "Imágenes") {
+          serv.map(function (item) {
+            item.status = "RA";
+          });
+        } else {
+          serv[index].status = "RA";
+        }
+      }
+    } //console.log(serv, "serv");
+
+
+    setServicesData(serv);
+  };
+
+  var sendToFacilitator = /*#__PURE__*/function () {
+    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9(result) {
+      var concept, evalStatus, productTemp, specialistDone, data;
+      return _regenerator.default.wrap(function _callee9$(_context9) {
+        while (1) {
+          switch (_context9.prev = _context9.next) {
+            case 0:
+              console.log("exce");
+              concept = "";
+              _context9.t0 = activeTab;
+              _context9.next = _context9.t0 === "Descripción" ? 5 : _context9.t0 === "Ficha técnica" ? 7 : _context9.t0 === "Imágenes" ? 9 : 11;
+              break;
+
+            case 5:
+              concept = "description";
+              return _context9.abrupt("break", 12);
+
+            case 7:
+              concept = "datasheet";
+              return _context9.abrupt("break", 12);
+
+            case 9:
+              concept = "images";
+              return _context9.abrupt("break", 12);
+
+            case 11:
+              return _context9.abrupt("break", 12);
+
+            case 12:
+              evalStatus = "";
+              productTemp = (0, _objectSpread2.default)({}, productSelected);
+              evalStatus = productSelected["".concat(concept, "_status")];
+              specialistDone = evalStatus === "RF" || evalStatus === "RA" || evalStatus === "IN_PROGRESS";
+
+              if (specialistDone) {
+                setMessage("".concat(activeTab, " enviada a facilitador"));
+                getSectionIcon();
+                productTemp["".concat(concept, "_status")] = "QF";
+              } else if (evalStatus === "QF") {
+                setMessage("Evaluación enviada");
+                getSectionIcon();
+                productTemp["".concat(concept, "_status")] = "AF";
+              } else if (evalStatus === "AF") {
+                setMessage("Evaluación enviada");
+                getSectionIcon();
+                productTemp["".concat(concept, "_status")] = "AA";
+              } else if (evalStatus === "RP") {
+                setMessage("Evaluación enviada");
+                getSectionIcon();
+                productTemp["".concat(concept, "_status")] = "AA";
+              }
+
+              data = {};
+
+              if (!result) {
+                _context9.next = 25;
+                break;
+              }
+
+              updateCompaniesList(evalStatus, result, activeRetailer.id, concept);
+              data = {
+                articleId: productSelected.article.id_article,
+                orderId: productSelected.orderId,
+                concept: concept,
+                result: result,
+                evalStatus: evalStatus,
+                retailerId: activeRetailer.id
+              };
+              _context9.next = 23;
+              return _axios.default.put("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), data, {
+                headers: {
+                  Authorization: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A"
+                }
+              });
+
+            case 23:
+              _context9.next = 38;
+              break;
+
+            case 25:
+              if (specialistDone) {
+                updateCompaniesList(evalStatus, result, activeRetailer.id);
+              }
+
+              data = {
+                articleId: productSelected.article.id_article,
+                orderId: productSelected.orderId,
+                concept: concept,
+                evalStatus: evalStatus,
+                retailerId: activeRetailer.id
+              };
+              _context9.t1 = user.id_role;
+              _context9.next = _context9.t1 === 7 ? 30 : _context9.t1 === 8 ? 30 : _context9.t1 === 4 ? 32 : _context9.t1 === 5 ? 32 : 34;
+              break;
+
+            case 30:
+              data.especialist = true;
+              return _context9.abrupt("break", 35);
+
+            case 32:
+              data.facilitator = true;
+              return _context9.abrupt("break", 35);
+
+            case 34:
+              return _context9.abrupt("break", 35);
+
+            case 35:
+              _axios.default.put("".concat(process.env.REACT_APP_SEND_EVAL), data, {
+                headers: {
+                  Authorization: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A"
+                }
+              });
+
+              setProduct(productTemp);
+              setModalSent(true);
+
+            case 38:
+            case "end":
+              return _context9.stop();
+          }
+        }
+      }, _callee9);
+    }));
+
+    return function sendToFacilitator(_x4) {
+      return _ref10.apply(this, arguments);
+    };
+  }();
+
+  var userAssigned = function userAssigned(tab, rol) {
+    var concept = "";
+
+    switch (tab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
+
+    var allowedRoles = [1, 4, 5, 6, 7, 8];
+    var validUser = allowedRoles.indexOf(user === null || user === void 0 ? void 0 : user.id_role) !== -1;
+    return productSelected.article["id_".concat(concept, "_").concat(rol)] === user.id_user && validUser;
+  };
+
+  var auditorAssigned = function auditorAssigned() {
+    return (productSelected === null || productSelected === void 0 ? void 0 : productSelected.article["id_auditor"]) === user.id_user;
+  };
+
+  function specialistValid(tab) {
+    var concept = "";
+
+    switch (tab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
+
+    return product["".concat(concept, "_status")] === "IN_PROGRESS" || product["".concat(concept, "_status")] === "RF" || product["".concat(concept, "_status")] === "RA";
+  }
+
+  function versionMatch() {
+    return (productSelected === null || productSelected === void 0 ? void 0 : productSelected.version) === version;
+  }
+
+  (0, _react.useEffect)(function () {// let concept = "";
+    // switch (activeTab) {
+    //   case "Ficha técnica":
+    //     concept = "datasheet";
+    //     break;
+    //   case "Imágenes":
+    //     concept = "images";
+    //     break;
+    //   default:
+    //     concept = "description";
+    //     break;
+    // }
+    // getComments(concept);
+  }, [activeTab]);
   return /*#__PURE__*/React.createElement(_styles.Container, {
     headerTop: headerTop
   }, /*#__PURE__*/React.createElement(_HeaderTop.HeaderTop, {
@@ -98,39 +1065,104 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "image-data-panel"
   }, /*#__PURE__*/React.createElement(_ImagePreviewer.ImagePreviewer, {
-    activeImage: activeImage,
-    imagesArray: productData === null || productData === void 0 ? void 0 : (_productData$services2 = productData.services) === null || _productData$services2 === void 0 ? void 0 : _productData$services2.Imágenes,
-    setActiveImage: setActiveImage
+    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__*/React.createElement(_ImageDataTable.ImageDataTable, {
-    imageData: activeImage === null || activeImage === void 0 ? void 0 : activeImage.data,
-    activeImage: activeImage
+    lists: images,
+    activeImage: images !== null && images !== void 0 && images.values ? images === null || images === void 0 ? void 0 : images.values[activeImage] : {},
+    retailerSelected: activeRetailer.id,
+    setImages: setImages,
+    assignationsImages: [productSelected.article.id_images_especialist, productSelected.article.id_images_facilitator],
+    imagesStatus: productSelected === null || productSelected === void 0 ? void 0 : productSelected.images_status
   })), /*#__PURE__*/React.createElement("div", {
     className: "product-information"
   }, /*#__PURE__*/React.createElement(_FullProductNameHeader.FullProductNameHeader, {
-    headerData: productData.headerData
+    headerData: product,
+    percent: activePercentage,
+    activeRetailer: activeRetailer,
+    setActiveRetailer: setActiveRetailer,
+    approveRejectButtons: approveRejectButtons,
+    sendToFacilitator: sendToFacilitator,
+    auditorAssigned: auditorAssigned,
+    userAssigned: userAssigned(activeTab, "facilitator")
   }), /*#__PURE__*/React.createElement(_FullTabsMenu.FullTabsMenu, {
     tabsSections: tabsSections,
-    status: productData.status,
+    status: {
+      Descripción: (_servicesData$filter$ = servicesData.filter(function (service) {
+        return service.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && service.service === "description";
+      })[0]) === null || _servicesData$filter$ === void 0 ? void 0 : _servicesData$filter$.status,
+      "Ficha técnica": (_servicesData$filter$2 = servicesData.filter(function (service) {
+        return service.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && service.service === "datasheet";
+      })[0]) === null || _servicesData$filter$2 === void 0 ? void 0 : _servicesData$filter$2.status,
+      Imágenes: product === null || product === void 0 ? void 0 : product.images_status
+    },
     profileImage: productData.asigned,
+    activeTab: activeTab,
     setActiveTab: setActiveTab,
-    setImageLayout: setImageLayout
+    setImageLayout: setImageLayout,
+    saveDescriptions: saveDescriptions,
+    saveDatasheets: saveDatasheets,
+    updateImages: updateImages,
+    assignations: {
+      Descripción: [productSelected.article.id_description_especialist, productSelected.article.id_description_facilitator],
+      "Ficha técnica": [productSelected.article.id_datasheet_especialist, productSelected.article.id_datasheet_facilitator],
+      Imágenes: [productSelected.article.id_images_especialist, productSelected.article.id_images_facilitator]
+    }
   }), /*#__PURE__*/React.createElement("div", {
-    className: "services-information-container " + (imageLayout && activeTab === "Imágenes" && "image-services")
-  }, activeTab !== "Imágenes" ? productData === null || productData === void 0 ? void 0 : (_productData$services3 = productData.services[activeTab]) === null || _productData$services3 === void 0 ? void 0 : _productData$services3.map(function (_ref3, index) {
-    var inputGroup = _ref3.inputGroup;
+    className: "services-information-container " + (imageLayout && activeTab === "Imágenes" ? "image-services" : "")
+  }, !imageLayout && /*#__PURE__*/React.createElement(_GalleryHeader.GalleryHeader, null), activeTab === "Ficha técnica" && ((product === null || product === void 0 ? void 0 : (_product$services = product.services) === null || _product$services === void 0 ? void 0 : _product$services.datasheets) === 1 ? (_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__*/React.createElement(_InputGroup.InputGroup, {
-      key: index,
-      inputGroup: inputGroup,
-      activeSection: activeTab
-    });
-  }) : productData === null || productData === void 0 ? void 0 : (_productData$services4 = productData.services["Imágenes"]) === null || _productData$services4 === void 0 ? void 0 : _productData$services4.map(function (image, index) {
-    return /*#__PURE__*/React.createElement(_GalleryElement.GalleryElement, {
-      key: index,
-      image: image,
-      gridLayout: imageLayout,
-      id: "gallery-element-" + index
+      key: index + "-" + activeRetailer.name,
+      articleId: productSelected.article.id_article,
+      version: version,
+      activeSection: activeTab,
+      inputGroup: dataGroup,
+      dataInputs: datasheets[1],
+      updatedDatasheets: updatedDatasheets,
+      setUpdatedDatasheets: setUpdatedDatasheets
     });
-  })))));
+  }) : /*#__PURE__*/React.createElement("p", null, "no tienes este servicio")), activeTab === "Descripción" && ((product === null || product === void 0 ? void 0 : (_product$services2 = product.services) === null || _product$services2 === void 0 ? void 0 : _product$services2.descriptions) === 1 ? /*#__PURE__*/React.createElement(_InputGroup.InputGroup, {
+    activeSection: activeTab,
+    inputGroup: descriptions[0],
+    updatedDescriptions: updatedDescriptions,
+    setUpdatedDescriptions: setUpdatedDescriptions,
+    articleId: articleId,
+    version: version,
+    dinamicHeight: true
+  }) : /*#__PURE__*/React.createElement("p", null, "no tienes este servicio")), activeTab === "Imágenes" && ((product === null || product === void 0 ? void 0 : (_product$services3 = product.services) === null || _product$services3 === void 0 ? void 0 : _product$services3.images) === 1 ? /*#__PURE__*/React.createElement("section", {
+    className: "container"
+  }, /*#__PURE__*/React.createElement("div", getRootProps({
+    className: "dropzone"
+  }), /*#__PURE__*/React.createElement("input", getInputProps()), /*#__PURE__*/React.createElement("aside", null, thumbs()))) : /*#__PURE__*/React.createElement("p", null, "no tienes este servicio"))), (userAssigned(activeTab, "especialist" || "facilitator") || auditorAssigned()) && /*#__PURE__*/React.createElement("div", {
+    className: "commentary-box"
+  }, !comments[activeTab] ? /*#__PURE__*/React.createElement("div", {
+    className: "commentary"
+  }, /*#__PURE__*/React.createElement(_index.TagAndInput, {
+    label: "Caja de Comentario",
+    inputType: "textarea",
+    inputCols: 80,
+    inputRows: 4
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "buttons-box"
+  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "general-transparent-button",
+    label: "Enviar comentario"
+  }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: requiredNull !== 0 || !specialistValid(activeTab) || !versionMatch() ? "general-button-disabled" : "general-green-button",
+    label: "Enviar evaluación",
+    onClick: function onClick() {
+      return sendToFacilitator();
+    }
+  }))) : /*#__PURE__*/React.createElement(_Commentary.Commentary, {
+    comment: comments[activeTab].message
+  })))), showModal && /*#__PURE__*/React.createElement(_ProductImageModal.ProductImageModal, {
+    images: images,
+    setShowModal: setShowModal,
+    sendToFacilitator: sendToFacilitator,
+    approveRejectButtons: approveRejectButtons
+  }));
 };
 
 exports.RetailerProductEdition = RetailerProductEdition;