contentoh-components-library 21.5.84 → 21.5.86

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

@@ -89,6 +89,10 @@ var _Commentary = require("../../atoms/Commentary");
 
 var _AiProductEdition = require("../../../contexts/AiProductEdition");
 
+var _ChangeStatusModal = _interopRequireDefault(require("../../organisms/ChangeStatusModal"));
+
+var _material = require("@mui/material");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
@@ -263,6 +267,11 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       isDragActive = _useDropzone.isDragActive,
       open = _useDropzone.open;
 
+  var _useState31 = (0, _react.useState)(false),
+      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
+      openChangeStatusModal = _useState32[0],
+      setOpenChangeStatusModal = _useState32[1];
+
   var thumbs = function thumbs() {
     var _state$images_values, _state$images_values$, _state$images_values4, _state$images_values5, _state$images_values6, _state$images_values7, _state$images_values8, _state$images_values9;
 
@@ -319,99 +328,99 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
         }
       }, index);
     });
-  }; // Setter del producto y carga inicial (optimizado para evitar cascada)
+  };
 
+  var initializeProduct = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var product, productNormalized, users, id_article, response, parseData;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              product = JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected;
+              productNormalized = (0, _utils.normalizeProduct)(product);
+              dispatch({
+                type: "SET_PRODUCT",
+                payload: productNormalized
+              });
+              dispatch({
+                type: "SET_ACTIVE_RETAILER",
+                payload: productNormalized.categoryRetailerInOrder[0]
+              });
+              setShotThd([58, 59, 60, 61].includes(productNormalized.categoryRetailerInOrder[0].id_retailer)); // Configurar statusArray según el rol del usuario
 
-  (0, _react.useEffect)(function () {
-    var initializeProduct = /*#__PURE__*/function () {
-      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var product, productNormalized, users, id_article, response, parseData;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.prev = 0;
-                product = JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected;
-                productNormalized = (0, _utils.normalizeProduct)(product);
-                dispatch({
-                  type: "SET_PRODUCT",
-                  payload: productNormalized
-                });
-                dispatch({
-                  type: "SET_ACTIVE_RETAILER",
-                  payload: productNormalized.categoryRetailerInOrder[0]
-                });
-                setShotThd([58, 59, 60, 61].includes(productNormalized.categoryRetailerInOrder[0].id_retailer)); // Configurar statusArray según el rol del usuario
+              setStatusArray((0, _utils.getStatusArrayByRole)(user.id_role)); // Cargar usuarios y asignaciones
 
-                setStatusArray((0, _utils.getStatusArrayByRole)(user.id_role)); // Cargar usuarios y asignaciones
+              _context2.next = 9;
+              return (0, _data.fetchUsers)(token);
 
-                _context2.next = 9;
-                return (0, _data.fetchUsers)(token);
+            case 9:
+              users = _context2.sent;
 
-              case 9:
-                users = _context2.sent;
+              if (users.length > 0) {
+                dispatch({
+                  type: "SET_COLLABORATOR_ASSIGNATIONS",
+                  payload: (0, _utils.buildCollaboratorAssignations)(productNormalized, users)
+                });
+              }
 
-                if (users.length > 0) {
-                  dispatch({
-                    type: "SET_COLLABORATOR_ASSIGNATIONS",
-                    payload: (0, _utils.buildCollaboratorAssignations)(productNormalized, users)
-                  });
-                }
+              id_article = productNormalized.id_article;
 
-                id_article = productNormalized.id_article;
+              if (!id_article) {
+                _context2.next = 15;
+                break;
+              }
 
-                if (!id_article) {
-                  _context2.next = 15;
-                  break;
-                }
+              _context2.next = 15;
+              return (0, _utils.getAuditVersion)(id_article, setAuditableVersion, token);
 
-                _context2.next = 15;
-                return (0, _utils.getAuditVersion)(id_article, setAuditableVersion, token);
+            case 15:
+              if (!(id_article && productNormalized.id_order)) {
+                _context2.next = 21;
+                break;
+              }
 
-              case 15:
-                if (!(id_article && productNormalized.id_order)) {
-                  _context2.next = 21;
-                  break;
+              _context2.next = 18;
+              return _axios.default.get(process.env.REACT_APP_READ_OBSERVATION, {
+                params: {
+                  articleId: id_article,
+                  orderId: productNormalized.id_order
+                },
+                headers: {
+                  Authorization: sessionStorage.getItem("jwt")
                 }
+              });
 
-                _context2.next = 18;
-                return _axios.default.get(process.env.REACT_APP_READ_OBSERVATION, {
-                  params: {
-                    articleId: id_article,
-                    orderId: productNormalized.id_order
-                  },
-                  headers: {
-                    Authorization: sessionStorage.getItem("jwt")
-                  }
-                });
-
-              case 18:
-                response = _context2.sent;
-                parseData = JSON.parse(response.data.body).data[0];
-                setObservation(parseData.observations);
+            case 18:
+              response = _context2.sent;
+              parseData = JSON.parse(response.data.body).data[0];
+              setObservation(parseData.observations);
 
-              case 21:
-                _context2.next = 26;
-                break;
+            case 21:
+              _context2.next = 26;
+              break;
 
-              case 23:
-                _context2.prev = 23;
-                _context2.t0 = _context2["catch"](0);
-                console.log("Error setting product data: ", _context2.t0);
+            case 23:
+              _context2.prev = 23;
+              _context2.t0 = _context2["catch"](0);
+              console.log("Error setting product data: ", _context2.t0);
 
-              case 26:
-              case "end":
-                return _context2.stop();
-            }
+            case 26:
+            case "end":
+              return _context2.stop();
           }
-        }, _callee2, null, [[0, 23]]);
-      }));
+        }
+      }, _callee2, null, [[0, 23]]);
+    }));
+
+    return function initializeProduct() {
+      return _ref3.apply(this, arguments);
+    };
+  }(); // Setter del producto y carga inicial (optimizado para evitar cascada)
 
-      return function initializeProduct() {
-        return _ref3.apply(this, arguments);
-      };
-    }();
 
+  (0, _react.useEffect)(function () {
     initializeProduct();
   }, []);
 
@@ -457,6 +466,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   var loadData = /*#__PURE__*/function () {
     var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
       var enableLoading,
+          versionSelected,
           _JSON$parse$0$relatio,
           _JSON$parse,
           _JSON$parse$,
@@ -492,7 +502,8 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
           switch (_context4.prev = _context4.next) {
             case 0:
               enableLoading = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : true;
-              _context4.prev = 1;
+              versionSelected = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : null;
+              _context4.prev = 2;
               if (enableLoading) dispatch({
                 type: "SET_LOADING",
                 payload: true
@@ -502,7 +513,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
               data = [{
                 id_article: id_article,
-                version: version,
+                version: versionSelected ? versionSelected : version,
                 relations: [{
                   id_retailer: id_retailer,
                   id_category: id_category
@@ -511,8 +522,8 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               headers = {
                 Authorization: token
               };
-              _context4.next = 9;
-              return Promise.all([(0, _data.getRetailerServices)(id_article, category, id_category, version, token, id_retailer), (0, _data.getPercentage)({
+              _context4.next = 10;
+              return Promise.all([(0, _data.getRetailerServices)(id_article, category, id_category, versionSelected !== null && versionSelected !== void 0 ? versionSelected : version, token, id_retailer), (0, _data.getPercentage)({
                 data: data,
                 headers: headers
               }), (0, _data.getServicesData)({
@@ -526,32 +537,43 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   articleId: id_article,
                   concept: "description",
                   orderIdColab: id_order,
-                  version: version
+                  version: versionSelected !== null && versionSelected !== void 0 ? versionSelected : version
                 }
               }), _axios.default.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
                 params: {
                   articleId: id_article,
                   concept: "datasheet",
                   orderIdColab: id_order,
-                  version: version
+                  version: versionSelected !== null && versionSelected !== void 0 ? versionSelected : version
                 }
               }), _axios.default.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
                 params: {
                   articleId: id_article,
                   concept: "images",
                   orderIdColab: id_order,
-                  version: version
+                  version: versionSelected !== null && versionSelected !== void 0 ? versionSelected : version
                 }
               })])]);
 
-            case 9:
+            case 10:
               _yield$Promise$all = _context4.sent;
               _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 4);
               services = _yield$Promise$all2[0];
               percentagesRes = _yield$Promise$all2[1];
               servicesDataRes = _yield$Promise$all2[2];
               commentsResponse = _yield$Promise$all2[3];
-              // Extraer relaciones del response
+              dispatch({
+                type: "SET_RETAILER_STATUS",
+                payload: servicesDataRes.map(function (service) {
+                  return {
+                    retailer_id: service === null || service === void 0 ? void 0 : service.id_retailer,
+                    service: service === null || service === void 0 ? void 0 : service.service,
+                    status: service === null || service === void 0 ? void 0 : service.status,
+                    task_user_group_id: service === null || service === void 0 ? void 0 : service.task_user_group_id
+                  };
+                })
+              }); // Extraer relaciones del response
+
               percentages = (_JSON$parse$0$relatio = (_JSON$parse = JSON.parse(percentagesRes === null || percentagesRes === void 0 ? void 0 : (_percentagesRes$ = percentagesRes[0]) === null || _percentagesRes$ === void 0 ? void 0 : _percentagesRes$.body)) === null || _JSON$parse === void 0 ? void 0 : (_JSON$parse$ = _JSON$parse[0]) === null || _JSON$parse$ === void 0 ? void 0 : _JSON$parse$.relations) !== null && _JSON$parse$0$relatio !== void 0 ? _JSON$parse$0$relatio : []; // Procesar comentarios
 
               commentsMap = {};
@@ -647,32 +669,32 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 loadAuditableData();
               }
 
-              _context4.next = 40;
+              _context4.next = 42;
               break;
 
-            case 36:
-              _context4.prev = 36;
-              _context4.t0 = _context4["catch"](1);
+            case 38:
+              _context4.prev = 38;
+              _context4.t0 = _context4["catch"](2);
               console.log("Error loading data: ", _context4.t0);
               dispatch({
                 type: "SET_ERRORS",
                 payload: [_context4.t0.message]
               });
 
-            case 40:
-              _context4.prev = 40;
+            case 42:
+              _context4.prev = 42;
               dispatch({
                 type: "SET_LOADING",
                 payload: false
               });
-              return _context4.finish(40);
+              return _context4.finish(42);
 
-            case 43:
+            case 45:
             case "end":
               return _context4.stop();
           }
         }
-      }, _callee4, null, [[1, 36, 40, 43]]);
+      }, _callee4, null, [[2, 38, 42, 45]]);
     }));
 
     return function loadData() {
@@ -1507,16 +1529,204 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       type: "SET_PRODUCT_VERSION",
       payload: version
     });
+    loadData(true, version);
+  };
+
+  var ProductEditionSkeleton = function ProductEditionSkeleton() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      headerTop: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        px: 1.5,
+        py: 1,
+        pb: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          variant: "text",
+          width: 300,
+          height: 40
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+          direction: "row",
+          spacing: 2,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "circular",
+            width: 32,
+            height: 32
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "data-container",
+        style: {
+          display: "flex",
+          gap: "8px",
+          padding: "0 12px 12px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "image-data-panel",
+          style: {
+            flex: "0 0 320px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "rounded",
+            width: "100%",
+            height: 400
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+            direction: "row",
+            spacing: 2,
+            justifyContent: "center",
+            children: [1, 2, 3, 4].map(function (item) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 60,
+                height: 80
+              }, item);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            mt: 2,
+            children: [1, 2, 3, 4].map(function (item) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                display: "flex",
+                justifyContent: "space-between",
+                py: 1,
+                borderBottom: "1px solid #f0f0f0",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  variant: "text",
+                  width: "40%"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  variant: "text",
+                  width: "20%"
+                })]
+              }, item);
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "product-information",
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: "80%",
+              height: 50
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              spacing: 2,
+              alignItems: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 180,
+                height: 24
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 300,
+                height: 24
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            gap: 4,
+            pb: 1,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: 140,
+              height: 45
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: 140,
+              height: 45
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: 140,
+              height: 45
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+            children: [1, 2, 3].map(function (item) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  mb: 1,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    variant: "text",
+                    width: "30%",
+                    height: 24
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    variant: "rounded",
+                    width: 175,
+                    height: 25,
+                    sx: {
+                      borderRadius: "7.5px"
+                    }
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  variant: "rounded",
+                  width: "100%",
+                  height: 70
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  mt: 0.5,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    variant: "text",
+                    width: 60
+                  })
+                })]
+              }, item);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            mt: "auto",
+            pt: 4,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "rounded",
+              width: "100%",
+              height: 120
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: 2,
+              mt: 2,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 180,
+                height: 45,
+                sx: {
+                  borderRadius: "24px"
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 180,
+                height: 45,
+                sx: {
+                  borderRadius: "24px"
+                }
+              })]
+            })]
+          })]
+        })]
+      })]
+    });
   };
 
   if (state.loading || !state.services || !state.product) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {})
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ProductEditionSkeleton, {})
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AiProductEdition.AiProductEditionProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AiProductEdition.AiProductEditionProvider, {
     isCreatorsEdition: true,
     user: user,
     token: token,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       headerTop: headerTop,
       children: [showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
         title: rejectAll ? "Agregar mensaje para rechazar todo" : "Agregar mensaje de rechazo",
@@ -1882,15 +2092,33 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   }, _callee13);
                 }))
               })]
-            }), [7, 8].includes(user.id_role) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-              buttonType: isEvaluationFinished(user.id_role, state.active_tab, statusArray) && state.missing_required_fields[state.active_tab] === 0 ? "general-green-button" : "general-button-disabled",
-              label: "Enviar evaluación",
-              onClick: handleOnSendEvaluationToFacilitator
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "action-buttons",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+                buttonType: "general-pink-button",
+                label: "Cambio de Estatus",
+                onClick: function onClick() {
+                  return setOpenChangeStatusModal(true);
+                },
+                id: "button-change-status"
+              }), [7, 8].includes(user.id_role) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+                buttonType: isEvaluationFinished(user.id_role, state.active_tab, statusArray) && state.missing_required_fields[state.active_tab] === 0 ? "general-green-button" : "general-button-disabled",
+                label: "Enviar evaluación",
+                onClick: handleOnSendEvaluationToFacilitator
+              })]
             })]
           })]
         })]
       })]
-    })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChangeStatusModal.default, {
+      state: state,
+      open: openChangeStatusModal,
+      onClose: function onClose() {
+        setOpenChangeStatusModal(false);
+      },
+      reloadData: loadData,
+      token: token
+    })]
   });
 };
 

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 90%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n      position: relative;\n      transition: all 0.5s ease;\n\n      &.drag-active {\n        background-color: rgba(", ", 0.05);\n        border: 2px dashed ", ";\n        border-radius: 8px;\n\n        aside {\n          opacity: 0.3;\n          pointer-events: none;\n        }\n      }\n\n      .drag-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgba(", ", 0.1);\n        border-radius: 8px;\n        pointer-events: none;\n        z-index: 10;\n\n        p {\n          font-family: ", ";\n          font-size: 24px;\n          font-weight: 600;\n          color: ", ";\n          text-align: center;\n          padding: 20px;\n          background-color: ", ";\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .action-buttons{\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n        }\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 90%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n      position: relative;\n      transition: all 0.5s ease;\n\n      &.drag-active {\n        background-color: rgba(", ", 0.05);\n        border: 2px dashed ", ";\n        border-radius: 8px;\n\n        aside {\n          opacity: 0.3;\n          pointer-events: none;\n        }\n      }\n\n      .drag-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgba(", ", 0.1);\n        border-radius: 8px;\n        pointer-events: none;\n        z-index: 10;\n\n        p {\n          font-family: ", ";\n          font-size: 24px;\n          font-weight: 600;\n          color: ", ";\n          text-align: center;\n          padding: 20px;\n          background-color: ", ";\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
 }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white);