contentoh-components-library 21.5.99 → 21.6.0

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

@@ -77,10 +77,12 @@ var _genericModalWarning = _interopRequireDefault(require("../../../assets/image
 
 var _styles = require("./styles");
 
+var _AiProductEdition = require("../../../contexts/AiProductEdition");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
-  var _location$state4, _location$state5, _location$state6, _state$active_retaile3, _state$active_retaile4, _state$images_values$2, _state$images_values10, _state$images_values11, _state$active_retaile5, _state$product5, _state$active_retaile6, _state$active_retaile7, _state$active_retaile8, _state$product6, _state$product7, _state$product8, _state$datasheets_inp, _state$product9, _state$images_values12;
+  var _location$state4, _state$product2, _state$product3, _state$product4, _state$product5, _state$product6, _state$product7, _location$state5, _location$state6, _state$active_retaile3, _state$active_retaile4, _state$images_values$2, _state$images_values10, _state$images_values11, _state$active_retaile5, _state$product11, _state$active_retaile6, _state$active_retaile7, _state$active_retaile8, _state$product12, _state$product13, _state$product14, _state$datasheets_inp, _state$datasheets_inp2, _state$product15, _state$images_values12;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -240,11 +242,8 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
   (0, _react.useEffect)(function () {
     var setProductData = function setProductData() {
       try {
-        var product = JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected;
+        var product = productSelected ? productSelected : JSON.parse(sessionStorage.getItem("productSelected"));
         var productNormalized = (0, _utils.normalizeProduct)(product);
-        console.log({
-          productNormalized: productNormalized
-        });
         dispatch({
           type: "SET_PRODUCT",
           payload: productNormalized
@@ -289,7 +288,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
     var fetchData = /*#__PURE__*/function () {
       var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _JSON$parse$0$relatio, _JSON$parse, _JSON$parse$, _percentageRes$, _services$2$inputsByR, _services$2$values, data, headers, _yield$Promise$all, _yield$Promise$all2, services, percentageRes, servicesDataRes, percentages, orderMap, orderedValues;
+        var _JSON$parse$0$relatio, _JSON$parse, _JSON$parse$, _percentageRes$, _services$2$inputsByR, _services$2$values, data, headers, _yield$Promise$all, _yield$Promise$all2, services, percentageRes, servicesDataRes, percentages, orderMap, orderedValues, updatedStatusByRetailer;
 
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
@@ -339,6 +338,21 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                   var orderA = (_orderMap$a$image_id = orderMap[a.image_id]) !== null && _orderMap$a$image_id !== void 0 ? _orderMap$a$image_id : Number.MAX_SAFE_INTEGER;
                   var orderB = (_orderMap$b$image_id = orderMap[b.image_id]) !== null && _orderMap$b$image_id !== void 0 ? _orderMap$b$image_id : Number.MAX_SAFE_INTEGER;
                   return orderA - orderB;
+                }); //Cuando carguemos la información de los servicios, las actualizamos en el estado del producto
+
+                updatedStatusByRetailer = servicesDataRes.reduce(function (acc, current, idx) {
+                  var id_retailer = current.id_retailer,
+                      service = current.service,
+                      status = current.status;
+                  if (!acc[id_retailer]) acc[id_retailer] = {};
+                  acc[id_retailer][service] = status;
+                  return acc;
+                }, {});
+                dispatch({
+                  type: "SET_PRODUCT",
+                  payload: (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product), {}, {
+                    statusByRetailer: updatedStatusByRetailer
+                  })
                 });
                 dispatch({
                   type: "SET_SERVICES",
@@ -365,11 +379,11 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                     return rId === id_retailer;
                   })
                 });
-                _context2.next = 24;
+                _context2.next = 26;
                 break;
 
-              case 20:
-                _context2.prev = 20;
+              case 22:
+                _context2.prev = 22;
                 _context2.t0 = _context2["catch"](1);
                 console.error("Error fetching data:", _context2.t0);
                 dispatch({
@@ -377,20 +391,20 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                   payload: _context2.t0
                 });
 
-              case 24:
-                _context2.prev = 24;
+              case 26:
+                _context2.prev = 26;
                 dispatch({
                   type: "SET_LOADING",
                   payload: false
                 });
-                return _context2.finish(24);
+                return _context2.finish(26);
 
-              case 27:
+              case 29:
               case "end":
                 return _context2.stop();
             }
           }
-        }, _callee2, null, [[1, 20, 24, 27]]);
+        }, _callee2, null, [[1, 22, 26, 29]]);
       }));
 
       return function fetchData() {
@@ -399,7 +413,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
     }();
 
     fetchData();
-  }, [state.product, state.active_retailer, token]); // Actualizador de campos del ui para que coincidan con el retailer activo
+  }, [(_state$product2 = state.product) === null || _state$product2 === void 0 ? void 0 : _state$product2.datasheet_status, (_state$product3 = state.product) === null || _state$product3 === void 0 ? void 0 : _state$product3.description_status, (_state$product4 = state.product) === null || _state$product4 === void 0 ? void 0 : _state$product4.images_status, (_state$product5 = state.product) === null || _state$product5 === void 0 ? void 0 : _state$product5.status, (_state$product6 = state.product) === null || _state$product6 === void 0 ? void 0 : _state$product6.percentages, (_state$product7 = state.product) === null || _state$product7 === void 0 ? void 0 : _state$product7.version, state.active_retailer, token]); // Actualizador de campos del ui para que coincidan con el retailer activo
 
   (0, _react.useEffect)(function () {
     if (!state.active_retailer) return;
@@ -450,25 +464,38 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
   }, [state.services]); // Helper functions
 
   var canShowValidationButtons = function canShowValidationButtons() {
-    var _state$product2;
+    var _state$product8;
 
-    if (!((_state$product2 = state.product) !== null && _state$product2 !== void 0 && _state$product2.statusByRetailer)) return false;
-    var currentService = (0, _utils.getConceptByTab)(state.active_tab);
-    var currentStatus = state.product["".concat(currentService, "_status")];
-    var originTab = origin[state.active_tab];
-    var isRetailerUser = (user === null || user === void 0 ? void 0 : user.is_retailer) === 1;
-    var validStatuses = ["AA", "AP", "R", "CA", "RCA"];
-    if (!validStatuses.includes(currentStatus)) return false;
-    var validOrigins = ["RequestWithContentoh", "RequestWithoutContentoh", "Contentoh"];
-    if (!validOrigins.includes(originTab)) return false; // Retailer: solo AP
+    if (!((_state$product8 = state.product) !== null && _state$product8 !== void 0 && _state$product8.statusByRetailer)) return false;
+
+    try {
+      var currentService = (0, _utils.getConceptByTab)(state.active_tab); // const currentStatus = state.product[`${currentService}_status`];
 
-    if (isRetailerUser) {
-      return currentStatus === "AP";
-    } // No retailer
+      var currentRetailer = state.active_retailer.id_retailer; //Información del servicio de la cadena seleccionada
 
+      var _state$services_data$ = state.services_data.find(function (service) {
+        return service.service === currentService && service.id_retailer === currentRetailer;
+      }),
+          currentStatus = _state$services_data$.status;
+
+      var originTab = origin[state.active_tab];
+      var isRetailerUser = (user === null || user === void 0 ? void 0 : user.is_retailer) === 1;
+      var validStatuses = ["AA", "AP", "R", "CA", "RCA"];
+      if (!validStatuses.includes(currentStatus)) return false;
+      var validOrigins = ["RequestWithContentoh", "RequestWithoutContentoh", "Contentoh"];
+      if (!validOrigins.includes(originTab)) return false; // Retailer: solo AP
+
+      if (isRetailerUser) {
+        return currentStatus === "AP";
+      } // No retailer
 
-    var hasNoOrder = !state.product.id_order && !state.product.orderId;
-    return originTab === "RequestWithoutContentoh" && (["R", "CA"].includes(currentStatus) || currentStatus === "RCA" && hasNoOrder) || ["RequestWithContentoh", "Contentoh"].includes(originTab) && currentStatus === "AA";
+
+      var hasNoOrder = !state.product.id_order && !state.product.orderId;
+      var condition = originTab === "RequestWithoutContentoh" && (["R", "CA"].includes(currentStatus) || currentStatus === "RCA" && hasNoOrder) || ["RequestWithContentoh", "Contentoh"].includes(originTab) && currentStatus === "AA";
+      return condition;
+    } catch (error) {
+      return false;
+    }
   };
 
   var canShowSaveButton = function canShowSaveButton(version_status) {
@@ -486,10 +513,10 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
   var getStatusByCurrentServiceAndRetailer = function getStatusByCurrentServiceAndRetailer() {
     var statusByRetailer = state.product.statusByRetailer;
-    if (!statusByRetailer) return "-";
+    if (!statusByRetailer || Object.keys(statusByRetailer).length === 0) return "-";
     var currentService = (0, _utils.getConceptByTab)(state.active_tab);
     var currentRetailer = state.active_retailer.id_retailer;
-    var currentStatus = statusByRetailer[currentRetailer][currentService] || "ERR";
+    var currentStatus = statusByRetailer[currentRetailer][currentService] || "N/S";
     return currentStatus;
   };
 
@@ -560,9 +587,9 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
   };
 
   var handleOnClickSaveImages = function handleOnClickSaveImages() {
-    var _state$product3, _state$product3$servi;
+    var _state$product9, _state$product9$servi;
 
-    if (((_state$product3 = state.product) === null || _state$product3 === void 0 ? void 0 : (_state$product3$servi = _state$product3.services) === null || _state$product3$servi === void 0 ? void 0 : _state$product3$servi.images) === 1) {
+    if (((_state$product9 = state.product) === null || _state$product9 === void 0 ? void 0 : (_state$product9$servi = _state$product9.services) === null || _state$product9$servi === void 0 ? void 0 : _state$product9$servi.images) === 1) {
       updateImages();
     }
   };
@@ -783,9 +810,10 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
   var sendEvaluation = /*#__PURE__*/function () {
     var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(result) {
-      var _state$product$id_ord, _state$product4, _state$active_retaile2;
+      var _state$product$id_ord, _state$product10, _state$active_retaile2;
+
+      var concept, articleId, orderId, sectionStatusKey, evalStatus, data, retailerId, _newStatuses$newStatu, _state$services_data, res, newStatuses, serviceStatus, updatedProduct, updatedServicesData;
 
-      var concept, articleId, orderId, sectionStatusKey, evalStatus, data, retailerId, res, newStatuses, serviceStatus, updatedProduct;
       return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
@@ -798,7 +826,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               articleId = state.product.id_article;
               orderId = (_state$product$id_ord = state.product.id_order) !== null && _state$product$id_ord !== void 0 ? _state$product$id_ord : state.product.orderId;
               sectionStatusKey = "".concat(concept, "_status");
-              evalStatus = state.product[sectionStatusKey] || ((_state$product4 = state.product) === null || _state$product4 === void 0 ? void 0 : _state$product4.version_status);
+              evalStatus = state.product[sectionStatusKey] || ((_state$product10 = state.product) === null || _state$product10 === void 0 ? void 0 : _state$product10.version_status);
               data = {
                 articleId: articleId,
                 orderId: orderId,
@@ -809,7 +837,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               _context3.prev = 8;
 
               if (!result) {
-                _context3.next = 21;
+                _context3.next = 22;
                 break;
               }
 
@@ -828,11 +856,20 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               serviceStatus = newStatuses.newServiceStatus[articleId]["".concat(concept, "Status")]; // Actualizar el producto con los nuevos estados
 
               updatedProduct = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product), {}, {
-                statusByRetailer: (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product.statusByRetailer), {}, (0, _defineProperty2.default)({}, retailerId, (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product.statusByRetailer[retailerId]), {}, (0, _defineProperty2.default)({}, concept, serviceStatus))))
+                statusByRetailer: (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product.statusByRetailer), {}, (0, _defineProperty2.default)({}, retailerId, (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product.statusByRetailer[retailerId]), {}, (0, _defineProperty2.default)({}, concept, (_newStatuses$newStatu = newStatuses === null || newStatuses === void 0 ? void 0 : newStatuses.newStatus) !== null && _newStatuses$newStatu !== void 0 ? _newStatuses$newStatu : serviceStatus))))
               });
-              console.log({
-                updatedProduct: updatedProduct
+              updatedServicesData = (_state$services_data = state.services_data) === null || _state$services_data === void 0 ? void 0 : _state$services_data.map(function (service) {
+                var _newStatuses$newStatu2;
+
+                return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, service), {}, {
+                  status: (service === null || service === void 0 ? void 0 : service.id_retailer) === retailerId && (service === null || service === void 0 ? void 0 : service.service) === concept ? (_newStatuses$newStatu2 = newStatuses === null || newStatuses === void 0 ? void 0 : newStatuses.newStatus) !== null && _newStatuses$newStatu2 !== void 0 ? _newStatuses$newStatu2 : serviceStatus : service === null || service === void 0 ? void 0 : service.status
+                });
               });
+              dispatch({
+                type: "SET_SERVICES_DATA",
+                payload: updatedServicesData
+              }); // console.log({ updatedProduct });
+
               dispatch({
                 type: "SET_PRODUCT",
                 payload: updatedProduct
@@ -848,12 +885,12 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 }
               });
 
-            case 21:
-              _context3.next = 27;
+            case 22:
+              _context3.next = 28;
               break;
 
-            case 23:
-              _context3.prev = 23;
+            case 24:
+              _context3.prev = 24;
               _context3.t0 = _context3["catch"](8);
               console.error("Error sending evaluation:", _context3.t0);
               dispatch({
@@ -866,20 +903,20 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 }
               });
 
-            case 27:
-              _context3.prev = 27;
+            case 28:
+              _context3.prev = 28;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context3.finish(27);
+              return _context3.finish(28);
 
-            case 30:
+            case 31:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[8, 23, 27, 30]]);
+      }, _callee3, null, [[8, 24, 28, 31]]);
     }));
 
     return function sendEvaluation(_x2) {
@@ -1101,7 +1138,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
   var handleOnEvaluateAll = /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(result) {
-      var _state$product$id_ord2, _state$services_data, evaluationArray, conceptArray, dataGeneral, userType, status, updatedStatusByRetailer, updatedProduct;
+      var _state$product$id_ord2, _state$services_data2, evaluationArray, conceptArray, dataGeneral, userType, status, updatedStatusByRetailer, updatedProduct;
 
       return _regenerator.default.wrap(function _callee5$(_context5) {
         while (1) {
@@ -1121,7 +1158,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 isAproved: result === "A"
               }; // Crear todas las evaluaciones para cada servicio y retailer
 
-              (_state$services_data = state.services_data) === null || _state$services_data === void 0 ? void 0 : _state$services_data.forEach(function (ret) {
+              (_state$services_data2 = state.services_data) === null || _state$services_data2 === void 0 ? void 0 : _state$services_data2.forEach(function (ret) {
                 var service = ret.service,
                     id_retailer = ret.id_retailer;
                 var data = {};
@@ -1251,330 +1288,334 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
   };
 
   if (state.loading || !state.services || !state.product) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    headerTop: headerTop,
-    children: [showVersionSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelector.VersionSelector, {
-      modalId: "version-selector",
-      articleId: state.product.id_article,
-      setVersion: handleOnChangeProductVersion,
-      companyName: company.company_name,
-      currentVersion: state.product.version,
-      setShowVersionSelector: setShowVersionSelector,
-      jwt: token
-    }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
-      images: state.images_values,
-      setShowModal: setShowModal,
-      approveRejectButtons: canShowValidationButtons(),
-      sendToFacilitator: handleOnSendEvaluation
-    }), state.modal.show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
-      componentsArray: [state.modal.image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: state.modal.image,
-        alt: "modal icon"
-      }, "1"), state.modal.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "retailer-name-header",
-        text: state.modal.title,
-        color: "white"
-      }, "2"), state.modal.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "retailer-name-header",
-        text: state.modal.message,
-        color: "white"
-      }, "3"), state.modal.buttons && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          marginTop: "16px"
-        },
-        children: state.modal.buttons.map(function (button, index) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-            buttonType: button.buttonType,
-            label: button.text,
-            onClick: button.action
-          }, index);
-        })
-      }, "4")].filter(Boolean),
-      onClick: function onClick() {
-        return dispatch({
-          type: "SET_MODAL",
-          payload: {
-            show: false,
-            title: "",
-            message: "",
-            image: null
-          }
-        });
-      }
-    }), showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
-      title: rejectAll ? "Agregar mensaje para rechazar todo" : "Agregar mensaje de rechazo",
-      show: showRejectModal,
-      customComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
-        inputType: "textarea",
-        inputId: "modal-message-box",
-        index: 0,
-        color: "white"
-      }),
-      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
-        type: "white",
-        label: "Cancelar",
-        size: 12,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AiProductEdition.AiProductEditionProvider, {
+    isCreatorsEdition: false,
+    state: state,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      headerTop: headerTop,
+      children: [showVersionSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelector.VersionSelector, {
+        modalId: "version-selector",
+        articleId: state.product.id_article,
+        setVersion: handleOnChangeProductVersion,
+        companyName: company.company_name,
+        currentVersion: state.product.version,
+        setShowVersionSelector: setShowVersionSelector,
+        jwt: token
+      }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
+        images: state.images_values,
+        setShowModal: setShowModal,
+        approveRejectButtons: canShowValidationButtons(),
+        sendToFacilitator: handleOnSendEvaluation
+      }), state.modal.show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
+        componentsArray: [state.modal.image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: state.modal.image,
+          alt: "modal icon"
+        }, "1"), state.modal.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          headerType: "retailer-name-header",
+          text: state.modal.title,
+          color: "white"
+        }, "2"), state.modal.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          headerType: "retailer-name-header",
+          text: state.modal.message,
+          color: "white"
+        }, "3"), state.modal.buttons && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginTop: "16px"
+          },
+          children: state.modal.buttons.map(function (button, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+              buttonType: button.buttonType,
+              label: button.text,
+              onClick: button.action
+            }, index);
+          })
+        }, "4")].filter(Boolean),
         onClick: function onClick() {
-          setShowRejectModal(false);
+          return dispatch({
+            type: "SET_MODAL",
+            payload: {
+              show: false,
+              title: "",
+              message: "",
+              image: null
+            }
+          });
         }
-      }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
-        type: "pink",
-        label: "Aceptar",
-        size: 12,
-        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
-          var elements, isMessageEmpty, container, existingAlert, alert, fullMessage;
-          return _regenerator.default.wrap(function _callee6$(_context6) {
-            while (1) {
-              switch (_context6.prev = _context6.next) {
-                case 0:
-                  elements = document.querySelectorAll("#modal-message-box .ql-container .ql-editor > p");
-
-                  if (!(!elements || elements.length === 0)) {
-                    _context6.next = 4;
-                    break;
-                  }
+      }), showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+        title: rejectAll ? "Agregar mensaje para rechazar todo" : "Agregar mensaje de rechazo",
+        show: showRejectModal,
+        customComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
+          inputType: "textarea",
+          inputId: "modal-message-box",
+          index: 0,
+          color: "white"
+        }),
+        buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+          type: "white",
+          label: "Cancelar",
+          size: 12,
+          onClick: function onClick() {
+            setShowRejectModal(false);
+          }
+        }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+          type: "pink",
+          label: "Aceptar",
+          size: 12,
+          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+            var elements, isMessageEmpty, container, existingAlert, alert, fullMessage;
+            return _regenerator.default.wrap(function _callee6$(_context6) {
+              while (1) {
+                switch (_context6.prev = _context6.next) {
+                  case 0:
+                    elements = document.querySelectorAll("#modal-message-box .ql-container .ql-editor > p");
 
-                  console.error("Elemento no encontrado");
-                  return _context6.abrupt("return");
+                    if (!(!elements || elements.length === 0)) {
+                      _context6.next = 4;
+                      break;
+                    }
 
-                case 4:
-                  isMessageEmpty = Array.from(elements).every(function (el) {
-                    var body = el.innerHTML;
-                    return !body || body.replace(/<.*?\/?>/gm, "").trim() === "";
-                  });
+                    console.error("Elemento no encontrado");
+                    return _context6.abrupt("return");
 
-                  if (!isMessageEmpty) {
-                    _context6.next = 10;
-                    break;
-                  }
+                  case 4:
+                    isMessageEmpty = Array.from(elements).every(function (el) {
+                      var body = el.innerHTML;
+                      return !body || body.replace(/<.*?\/?>/gm, "").trim() === "";
+                    });
 
-                  container = document.querySelector(".container-customComponent");
-                  existingAlert = container.querySelector(".alert-error");
+                    if (!isMessageEmpty) {
+                      _context6.next = 10;
+                      break;
+                    }
 
-                  if (!existingAlert) {
-                    alert = document.createElement("div");
-                    alert.className = "alert-error";
-                    alert.style.cssText = "\n                      color: #d32f2f;\n                      background-color: #ffebee;\n                      border: 1px solid #ef5350;\n                      border-radius: 4px;\n                      padding: 12px 16px;\n                      margin-top: 10px;\n                      font-size: 14px;\n                      display: flex;\n                      align-items: center;\n                      gap: 8px;\n                      font-family: 'Roboto', sans-serif;\n                      text-align: center;\n                    ";
-                    alert.innerHTML = "<span>El mensaje no puede estar vac\xEDo.</span>";
-                    container.appendChild(alert);
-                  }
+                    container = document.querySelector(".container-customComponent");
+                    existingAlert = container.querySelector(".alert-error");
 
-                  return _context6.abrupt("return");
+                    if (!existingAlert) {
+                      alert = document.createElement("div");
+                      alert.className = "alert-error";
+                      alert.style.cssText = "\n                        color: #d32f2f;\n                        background-color: #ffebee;\n                        border: 1px solid #ef5350;\n                        border-radius: 4px;\n                        padding: 12px 16px;\n                        margin-top: 10px;\n                        font-size: 14px;\n                        display: flex;\n                        align-items: center;\n                        gap: 8px;\n                        font-family: 'Roboto', sans-serif;\n                        text-align: center;\n                      ";
+                      alert.innerHTML = "<span>El mensaje no puede estar vac\xEDo.</span>";
+                      container.appendChild(alert);
+                    }
 
-                case 10:
-                  fullMessage = Array.from(elements).map(function (element) {
-                    return element.innerHTML;
-                  }).join("").replace(/<br\s*\/?>/gi, "\n");
-                  _context6.next = 13;
-                  return createComment(fullMessage);
+                    return _context6.abrupt("return");
 
-                case 13:
-                  rejectAll ? handleOnEvaluateAll("R") : handleOnSendEvaluation("R");
-                  setShowRejectModal(false);
+                  case 10:
+                    fullMessage = Array.from(elements).map(function (element) {
+                      return element.innerHTML;
+                    }).join("").replace(/<br\s*\/?>/gi, "\n");
+                    _context6.next = 13;
+                    return createComment(fullMessage, token);
 
-                case 15:
-                case "end":
-                  return _context6.stop();
-              }
-            }
-          }, _callee6);
-        }))
-      }, "btn-Aceptar")]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
-      setHeaderTop: setHeaderTop,
-      withChat: location === null || location === void 0 ? void 0 : (_location$state5 = location.state) === null || _location$state5 === void 0 ? void 0 : _location$state5.withChat,
-      chatType: location === null || location === void 0 ? void 0 : (_location$state6 = location.state) === null || _location$state6 === void 0 ? void 0 : _location$state6.chatType,
-      productSelected: state.product,
-      token: token,
-      activeRetailer: {
-        id: (_state$active_retaile3 = state.active_retailer) === null || _state$active_retaile3 === void 0 ? void 0 : _state$active_retaile3.id_retailer,
-        name: (_state$active_retaile4 = state.active_retailer) === null || _state$active_retaile4 === void 0 ? void 0 : _state$active_retaile4.retailer
-      }
-    }), /*#__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: (_state$images_values$2 = state.images_values.values[state.current_image]) !== null && _state$images_values$2 !== void 0 ? _state$images_values$2 : {},
-          imagesArray: state.images_values || [],
-          setActiveImage: handleOnChangeCurrentImage,
-          setShowModal: handleOnShowModalGalery
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
-          lists: state.images_values || [],
-          activeImage: (_state$images_values10 = state.images_values) !== null && _state$images_values10 !== void 0 && _state$images_values10.values ? (_state$images_values11 = state.images_values) === null || _state$images_values11 === void 0 ? void 0 : _state$images_values11.values[state.current_image] : {},
-          assignationsImages: assig,
-          retailerSelected: (_state$active_retaile5 = state.active_retailer) === null || _state$active_retaile5 === void 0 ? void 0 : _state$active_retaile5.id_retailer,
-          imagesStatus: ((_state$product5 = state.product) === null || _state$product5 === void 0 ? void 0 : _state$product5.images_status) || "-",
-          isRetailer: isRetailer,
-          setShowVersionSelector: setShowVersionSelector,
-          version: state.product.version,
-          setImages: handleOnChangeCurrentImage,
-          onClickSave: handleOnClickSaveImages,
-          setAssignation: handleOnChangeAssignations // No se usa?
+                  case 13:
+                    rejectAll ? handleOnEvaluateAll("R") : handleOnSendEvaluation("R");
+                    setShowRejectModal(false);
 
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "product-information",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "product-information",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
-            headerData: state.product,
-            percent: state.active_percentage.percentagesGeneral.required,
-            activeRetailer: {
-              id: (_state$active_retaile6 = state.active_retailer) === null || _state$active_retaile6 === void 0 ? void 0 : _state$active_retaile6.id_retailer,
-              name: (_state$active_retaile7 = state.active_retailer) === null || _state$active_retaile7 === void 0 ? void 0 : _state$active_retaile7.retailer,
-              image: (_state$active_retaile8 = state.active_retailer) === null || _state$active_retaile8 === void 0 ? void 0 : _state$active_retaile8.image
-            },
-            showValidationButtons: canShowValidationButtons(),
-            showApproveRejectAll: canShowValidationButtons(),
-            servicesData: state.services_data ? state.services_data : null,
-            approveAll: handleOnApproveAll,
-            rejectAll: handleOnRejectAll,
-            approve: function approve() {
-              return handleOnSendEvaluation("A");
-            },
-            reject: handleOnReject,
-            setActiveRetailer: handleOnChangeActiveRetailer
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
-            tabsSections: tabsSections,
-            status: getStatusByCurrentServiceAndRetailer(),
-            activeTab: state.active_tab,
-            user: user,
+                  case 15:
+                  case "end":
+                    return _context6.stop();
+                }
+              }
+            }, _callee6);
+          }))
+        }, "btn-Aceptar")]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
+        setHeaderTop: setHeaderTop,
+        withChat: location === null || location === void 0 ? void 0 : (_location$state5 = location.state) === null || _location$state5 === void 0 ? void 0 : _location$state5.withChat,
+        chatType: location === null || location === void 0 ? void 0 : (_location$state6 = location.state) === null || _location$state6 === void 0 ? void 0 : _location$state6.chatType,
+        productSelected: state.product,
+        token: token,
+        activeRetailer: {
+          id: (_state$active_retaile3 = state.active_retailer) === null || _state$active_retaile3 === void 0 ? void 0 : _state$active_retaile3.id_retailer,
+          name: (_state$active_retaile4 = state.active_retailer) === null || _state$active_retaile4 === void 0 ? void 0 : _state$active_retaile4.retailer
+        }
+      }), /*#__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: (_state$images_values$2 = state.images_values.values[state.current_image]) !== null && _state$images_values$2 !== void 0 ? _state$images_values$2 : {},
+            imagesArray: state.images_values || [],
+            setActiveImage: handleOnChangeCurrentImage,
+            setShowModal: handleOnShowModalGalery
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
+            lists: state.images_values || [],
+            activeImage: (_state$images_values10 = state.images_values) !== null && _state$images_values10 !== void 0 && _state$images_values10.values ? (_state$images_values11 = state.images_values) === null || _state$images_values11 === void 0 ? void 0 : _state$images_values11.values[state.current_image] : {},
+            assignationsImages: assig,
+            retailerSelected: (_state$active_retaile5 = state.active_retailer) === null || _state$active_retaile5 === void 0 ? void 0 : _state$active_retaile5.id_retailer,
+            imagesStatus: ((_state$product11 = state.product) === null || _state$product11 === void 0 ? void 0 : _state$product11.images_status) || "-",
             isRetailer: isRetailer,
-            assig: assig,
+            setShowVersionSelector: setShowVersionSelector,
             version: state.product.version,
-            updatedDescriptions: state.updated_descriptions_inputs,
-            updatedDatasheets: state.updated_datasheets_inputs,
-            updatedImages: state.updated_images_values,
-            images: state.services.images // actions
-            ,
-            downloadImages: handleOnDownloadImages,
-            askToDeleteImages: handleOnAskToDeleteImages,
-            showSaveButton: canShowSaveButton(state.product.version_status),
-            onClickSave: handleOnClickSave // setters
-            ,
-            setActiveTab: handleOnChangeActiveTab,
-            setImageLayout: handleOnSetImageLayout,
-            setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
-            setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
-            setAssignation: handleOnSetAssignation // No se usa?
-            ,
-            setImages: handleOnSetImages // No se usa?
-            // setSelectedImages={handleOnSetSelectedImages} // Se pasa hasta TabsMenu, pero no se usa
-            ,
-            setShowVersionSelector: setShowVersionSelector
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "services-information-container " + (imageLayout && state.active_tab === "Imágenes" ? "image-services" : ""),
-            children: state.saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [state.active_tab === "Descripción" && (((_state$product6 = state.product) === null || _state$product6 === void 0 ? void 0 : _state$product6.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
-                activeSection: state.active_tab,
-                inputGroup: state.descriptions_inputs[0],
-                updatedDescriptions: state.updated_descriptions_inputs,
-                articleId: (_state$product7 = state.product) === null || _state$product7 === void 0 ? void 0 : _state$product7.id_article,
-                version: state.product.version,
-                isShowbox: false,
-                dinamicHeight: true,
-                setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
-                updateApprovedInputs: handleOnUpdateApprovedInputs // No se usa?
-
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-                text: "No cuentas con este servicio",
-                headerType: "input-name-header"
-              })), state.active_tab === "Ficha técnica" && (((_state$product8 = state.product) === null || _state$product8 === void 0 ? void 0 : _state$product8.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-                children: (_state$datasheets_inp = state.datasheets_inputs[0].data) === null || _state$datasheets_inp === void 0 ? void 0 : _state$datasheets_inp.map(function (dataGroup, index) {
-                  var _state$datasheets_inp2;
-
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
-                    index: index,
-                    articleId: state.product.id_article,
-                    version: state.version,
-                    activeSection: state.active_tab,
-                    inputGroup: dataGroup,
-                    dataInputs: (_state$datasheets_inp2 = state.datasheets_inputs[1]) !== null && _state$datasheets_inp2 !== void 0 ? _state$datasheets_inp2 : [],
-                    activeRetailer: state.services.datasheets[state.active_retailer.id_retailer],
-                    groupData: state.services.datasheets[state.active_retailer.id_retailer].data,
-                    updatedDatasheets: state.updated_datasheets_inputs,
-                    setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
-                    isShowbox: true,
-                    setUpdatedBoxData: function setUpdatedBoxData(e) {
-                      setBoxData(e);
-                    },
-                    updateApprovedInputs: handleOnUpdateApprovedInputs // No se usa?
-
-                  }, index + "-" + state.active_retailer.retailer);
-                })
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-                text: "No cuentas con este servicio",
-                headerType: "input-name-header"
-              })), state.active_tab === "Imágenes" && (((_state$product9 = state.product) === null || _state$product9 === void 0 ? void 0 : _state$product9.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: [!imageLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
-                  checkAll: state.all_image_checked // Determina si el checkbox "Seleccionar todo" está marcado
-                  ,
-                  setCheckAll: handleOnSetCheckAll // Toggler de true o false para el checkbox "Seleccionar todo"
-                  ,
-                  setSelectedImages: handleOnSetSelectedImages
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
-                  className: "container",
-                  style: {
-                    position: "relative"
-                  },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread4.default)((0, _objectSpread4.default)({}, getRootProps({
-                    className: "dropzone ".concat(isDragActive ? "drag-active" : "")
-                  })), {}, {
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread4.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                      className: "drag-overlay",
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                        children: "Suelta las im\xE1genes aqu\xED"
-                      })
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
-                      children: thumbs()
-                    })]
-                  })), ((_state$images_values12 = state.images_values) === null || _state$images_values12 === void 0 ? void 0 : _state$images_values12.values.length) === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            setImages: handleOnChangeCurrentImage,
+            onClickSave: handleOnClickSaveImages,
+            setAssignation: handleOnChangeAssignations // No se usa?
+
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "product-information",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "product-information",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
+              headerData: state.product,
+              percent: state.active_percentage.percentagesGeneral.required,
+              activeRetailer: {
+                id: (_state$active_retaile6 = state.active_retailer) === null || _state$active_retaile6 === void 0 ? void 0 : _state$active_retaile6.id_retailer,
+                name: (_state$active_retaile7 = state.active_retailer) === null || _state$active_retaile7 === void 0 ? void 0 : _state$active_retaile7.retailer,
+                image: (_state$active_retaile8 = state.active_retailer) === null || _state$active_retaile8 === void 0 ? void 0 : _state$active_retaile8.image
+              },
+              showValidationButtons: canShowValidationButtons(),
+              showApproveRejectAll: canShowValidationButtons(),
+              servicesData: state.services_data ? state.services_data : null,
+              approveAll: handleOnApproveAll,
+              rejectAll: handleOnRejectAll,
+              approve: function approve() {
+                return handleOnSendEvaluation("A");
+              },
+              reject: handleOnReject,
+              setActiveRetailer: handleOnChangeActiveRetailer
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
+              tabsSections: tabsSections,
+              status: getStatusByCurrentServiceAndRetailer(),
+              activeTab: state.active_tab,
+              user: user,
+              isRetailer: isRetailer,
+              assig: assig,
+              version: state.product.version,
+              updatedDescriptions: state.updated_descriptions_inputs,
+              updatedDatasheets: state.updated_datasheets_inputs,
+              updatedImages: state.updated_images_values,
+              images: state.services.images // actions
+              ,
+              downloadImages: handleOnDownloadImages,
+              askToDeleteImages: handleOnAskToDeleteImages,
+              showSaveButton: canShowSaveButton(state.product.version_status),
+              onClickSave: handleOnClickSave // setters
+              ,
+              setActiveTab: handleOnChangeActiveTab,
+              setImageLayout: handleOnSetImageLayout,
+              setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
+              setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
+              setAssignation: handleOnSetAssignation // No se usa?
+              ,
+              setImages: handleOnSetImages // No se usa?
+              // setSelectedImages={handleOnSetSelectedImages} // Se pasa hasta TabsMenu, pero no se usa
+              ,
+              setShowVersionSelector: setShowVersionSelector
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "services-information-container " + (imageLayout && state.active_tab === "Imágenes" ? "image-services" : ""),
+              children: state.saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [state.active_tab === "Descripción" && (((_state$product12 = state.product) === null || _state$product12 === void 0 ? void 0 : _state$product12.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                  activeSection: state.active_tab,
+                  inputGroup: state.descriptions_inputs[0],
+                  updatedDescriptions: state.updated_descriptions_inputs,
+                  articleId: (_state$product13 = state.product) === null || _state$product13 === void 0 ? void 0 : _state$product13.id_article,
+                  version: state.product.version,
+                  isShowbox: false,
+                  dinamicHeight: true,
+                  setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
+                  updateApprovedInputs: handleOnUpdateApprovedInputs // No se usa?
+
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+                  text: "No cuentas con este servicio",
+                  headerType: "input-name-header"
+                })), state.active_tab === "Ficha técnica" && (((_state$product14 = state.product) === null || _state$product14 === void 0 ? void 0 : _state$product14.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                  children: (_state$datasheets_inp = state.datasheets_inputs[0]) === null || _state$datasheets_inp === void 0 ? void 0 : (_state$datasheets_inp2 = _state$datasheets_inp.data) === null || _state$datasheets_inp2 === void 0 ? void 0 : _state$datasheets_inp2.map(function (dataGroup, index) {
+                    var _state$datasheets_inp3;
+
+                    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                      index: index,
+                      articleId: state.product.id_article,
+                      version: state.version,
+                      activeSection: state.active_tab,
+                      inputGroup: dataGroup,
+                      dataInputs: (_state$datasheets_inp3 = state.datasheets_inputs[1]) !== null && _state$datasheets_inp3 !== void 0 ? _state$datasheets_inp3 : [],
+                      activeRetailer: state.services.datasheets[state.active_retailer.id_retailer],
+                      groupData: state.services.datasheets[state.active_retailer.id_retailer].data,
+                      updatedDatasheets: state.updated_datasheets_inputs,
+                      setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
+                      isShowbox: true,
+                      setUpdatedBoxData: function setUpdatedBoxData(e) {
+                        setBoxData(e);
+                      },
+                      updateApprovedInputs: handleOnUpdateApprovedInputs // No se usa?
+
+                    }, index + "-" + state.active_retailer.retailer);
+                  })
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+                  text: "No cuentas con este servicio",
+                  headerType: "input-name-header"
+                })), state.active_tab === "Imágenes" && (((_state$product15 = state.product) === null || _state$product15 === void 0 ? void 0 : _state$product15.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [!imageLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+                    checkAll: state.all_image_checked // Determina si el checkbox "Seleccionar todo" está marcado
+                    ,
+                    setCheckAll: handleOnSetCheckAll // Toggler de true o false para el checkbox "Seleccionar todo"
+                    ,
+                    setSelectedImages: handleOnSetSelectedImages
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
+                    className: "container",
                     style: {
-                      position: "absolute",
-                      top: "50%",
-                      left: "50%",
-                      transform: "translate(-50%, -50%)",
-                      textAlign: "center",
-                      padding: "40px",
-                      width: "80%",
-                      maxWidth: "500px",
-                      fontFamily: "Arial, sans-serif"
+                      position: "relative"
                     },
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                      style: {
-                        fontSize: "18px",
-                        color: "#666",
-                        marginBottom: "16px"
-                      },
-                      children: "Este producto no tiene im\xE1genes"
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread4.default)((0, _objectSpread4.default)({}, getRootProps({
+                      className: "dropzone ".concat(isDragActive ? "drag-active" : "")
+                    })), {}, {
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread4.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        className: "drag-overlay",
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                          children: "Suelta las im\xE1genes aqu\xED"
+                        })
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+                        children: thumbs()
+                      })]
+                    })), ((_state$images_values12 = state.images_values) === null || _state$images_values12 === void 0 ? void 0 : _state$images_values12.values.length) === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                       style: {
-                        fontSize: "14px",
-                        color: "#999",
-                        marginBottom: "20px"
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%)",
+                        textAlign: "center",
+                        padding: "40px",
+                        width: "80%",
+                        maxWidth: "500px",
+                        fontFamily: "Arial, sans-serif"
                       },
-                      children: ["Arrastra las im\xE1genes aqu\xED o", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                        onClick: open,
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                        style: {
+                          fontSize: "18px",
+                          color: "#666",
+                          marginBottom: "16px"
+                        },
+                        children: "Este producto no tiene im\xE1genes"
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
                         style: {
-                          color: "#007bff",
-                          cursor: "pointer",
-                          textDecoration: "underline"
+                          fontSize: "14px",
+                          color: "#999",
+                          marginBottom: "20px"
                         },
-                        children: "haz clic para abrir el explorador de archivos"
+                        children: ["Arrastra las im\xE1genes aqu\xED o", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                          onClick: open,
+                          style: {
+                            color: "#007bff",
+                            cursor: "pointer",
+                            textDecoration: "underline"
+                          },
+                          children: "haz clic para abrir el explorador de archivos"
+                        })]
                       })]
                     })]
                   })]
-                })]
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-                text: "No cuentas con este servicio",
-                headerType: "input-name-header"
-              }))]
-            })
-          })]
-        })
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+                  text: "No cuentas con este servicio",
+                  headerType: "input-name-header"
+                }))]
+              })
+            })]
+          })
+        })]
       })]
-    })]
+    })
   });
 };