contentoh-components-library 12.0.0 → 12.1.17

package/dist/components/organisms/ChangePassword/index.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChangePassword = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _LoginPasswordStrength = require("../../molecules/LoginPasswordStrength");
+
+var _react = require("react");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ChangePassword = function ChangePassword(props) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyPassword = _useState2[0],
+      setEmptyPassword = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyConfirmPassword = _useState4[0],
+      setEmptyConfirmPassword = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      matchPasswords = _useState6[0],
+      setMatchPasswords = _useState6[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var password, confirmPassword, valid;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              password = document.querySelector("#newPasswordInput").value;
+              password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+              confirmPassword = document.querySelector("#confirmPasswordInput").value;
+              confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
+
+              if (password === confirmPassword) {
+                setMatchPasswords(true);
+              } else {
+                setMatchPasswords(false);
+              }
+
+              valid = true;
+
+              if (password.length < 8 || confirmPassword === "" || password !== confirmPassword) {
+                valid = false;
+              }
+
+              if (valid) {
+                sessionStorage.setItem("newPassword", JSON.stringify(password));
+                !sessionStorage.getItem("resetPasswordProcess") ? props.setPaso(9) : props.setPaso(11);
+              }
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function validate(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "credenciales",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: "Ingresa tus credenciales"
+    })
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoginPasswordStrength.LoginPasswordStrength, {
+    emptyPassword: emptyPassword,
+    emptyConfirmPassword: emptyConfirmPassword,
+    matchPasswords: matchPasswords,
+    textTittle: "Ingresa tus credenciales"
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "button-center",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Enviar",
+      onClick: function onClick(e) {
+        return validate(e);
+      }
+    })
+  }, "4")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+      panelColor: _variables.GlobalColors.white,
+      componentsArray: loginRight,
+      panelType: "home-login"
+    })
+  });
+};
+
+exports.ChangePassword = ChangePassword;

package/dist/components/organisms/ChangePassword/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    display: flex;\n    justify-content: center;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/organisms/FullProductNameHeader/index.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullProductNameHeader = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
 
 var _ProductNameHeader = require("../../molecules/ProductNameHeader");
@@ -13,6 +17,8 @@ var _FeaturesBar = require("../../molecules/FeaturesBar");
 
 var _AvatarAndValidation = require("../../molecules/AvatarAndValidation");
 
+var _react = require("react");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var FullProductNameHeader = function FullProductNameHeader(_ref) {
@@ -22,40 +28,59 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       percent = _ref.percent,
       activeRetailer = _ref.activeRetailer,
       setActiveRetailer = _ref.setActiveRetailer,
-      approveRejectButtons = _ref.approveRejectButtons,
-      sendToFacilitator = _ref.sendToFacilitator,
-      auditorAssigned = _ref.auditorAssigned,
-      userAssigned = _ref.userAssigned;
+      showValidationButtons = _ref.showValidationButtons,
+      approve = _ref.approve,
+      reject = _ref.reject,
+      servicesData = _ref.servicesData;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      retailers = _useState2[0],
+      setRetailers = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var rtls = (headerData === null || headerData === void 0 ? void 0 : headerData.retailers) || (headerData === null || headerData === void 0 ? void 0 : headerData.retailersAvailable);
+    servicesData && rtls.forEach(function (rt) {
+      var element = [];
+      servicesData.forEach(function (sd) {
+        if (sd.id_retailer === rt.id) {
+          element.push(sd.status ? sd.status : "RECEIVED");
+        } else element.push("NA");
+
+        rt["services"] = element;
+      });
+    });
+    setRetailers(rtls);
+  }, [servicesData]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductNameHeader.ProductNameHeader, {
-      productName: headerData === null || headerData === void 0 ? void 0 : (_headerData$article = headerData.article) === null || _headerData$article === void 0 ? void 0 : _headerData$article.name,
-      statusType: headerData === null || headerData === void 0 ? void 0 : headerData.status,
-      percent: percent,
+      productName: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article = headerData.article) === null || _headerData$article === void 0 ? void 0 : _headerData$article.name) || (headerData === null || headerData === void 0 ? void 0 : headerData.name),
+      statusType: (headerData === null || headerData === void 0 ? void 0 : headerData.version_status) || (headerData === null || headerData === void 0 ? void 0 : headerData.status) || (headerData === null || headerData === void 0 ? void 0 : headerData.article_status),
+      percent: percent === null || percent === void 0 ? void 0 : percent.toFixed(0),
       priority: headerData === null || headerData === void 0 ? void 0 : headerData.prio,
-      date: new Date(headerData === null || headerData === void 0 ? void 0 : (_headerData$article2 = headerData.article) === null || _headerData$article2 === void 0 ? void 0 : _headerData$article2.timestamp).toLocaleDateString()
+      date: new Date((headerData === null || headerData === void 0 ? void 0 : (_headerData$article2 = headerData.article) === null || _headerData$article2 === void 0 ? void 0 : _headerData$article2.timestamp) || (headerData === null || headerData === void 0 ? void 0 : headerData.timestamp)).toLocaleDateString()
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "features-bar-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FeaturesBar.FeaturesBar, {
         features: [{
           feature: "Categoría",
-          value: headerData === null || headerData === void 0 ? void 0 : (_headerData$article3 = headerData.article) === null || _headerData$article3 === void 0 ? void 0 : _headerData$article3.category
+          value: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article3 = headerData.article) === null || _headerData$article3 === void 0 ? void 0 : _headerData$article3.category) || (headerData === null || headerData === void 0 ? void 0 : headerData.categoryName)
         }, {
           feature: "Prov",
           value: headerData === null || headerData === void 0 ? void 0 : (_headerData$article4 = headerData.article) === null || _headerData$article4 === void 0 ? void 0 : _headerData$article4.company_name
         }, {
           feature: "UPC",
-          value: headerData === null || headerData === void 0 ? void 0 : (_headerData$article5 = headerData.article) === null || _headerData$article5 === void 0 ? void 0 : _headerData$article5.upc
+          value: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article5 = headerData.article) === null || _headerData$article5 === void 0 ? void 0 : _headerData$article5.upc) || (headerData === null || headerData === void 0 ? void 0 : headerData.upc)
         }]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarAndValidation.AvatarAndValidation, {
-        retailers: headerData === null || headerData === void 0 ? void 0 : headerData.retailers,
+        retailers: retailers,
         avatarData: headerData === null || headerData === void 0 ? void 0 : headerData.avatarData,
         validation: headerData === null || headerData === void 0 ? void 0 : headerData.validation,
         activeRetailer: activeRetailer,
         setActiveRetailer: setActiveRetailer,
-        approveRejectButtons: approveRejectButtons,
-        sendToFacilitator: sendToFacilitator,
-        auditorAssigned: auditorAssigned,
-        userAssigned: userAssigned
+        showValidationButtons: showValidationButtons,
+        approve: approve,
+        reject: reject
       })]
     })]
   });

package/dist/components/organisms/FullTabsMenu/index.js

@@ -23,16 +23,16 @@ var FullTabsMenu = function FullTabsMenu(_ref) {
   var tabsSections = _ref.tabsSections,
       _ref$status = _ref.status,
       status = _ref$status === void 0 ? "" : _ref$status,
-      profileImage = _ref.profileImage,
       activeTab = _ref.activeTab,
       setActiveTab = _ref.setActiveTab,
       setImageLayout = _ref.setImageLayout,
-      saveDatasheets = _ref.saveDatasheets,
-      saveDescriptions = _ref.saveDescriptions,
-      updateImages = _ref.updateImages,
       assig = _ref.assig,
       setAssignation = _ref.setAssignation,
-      isRetailer = _ref.isRetailer;
+      isRetailer = _ref.isRetailer,
+      downloadImages = _ref.downloadImages,
+      askToDeleteImages = _ref.askToDeleteImages,
+      onClickSave = _ref.onClickSave,
+      showSaveButton = _ref.showSaveButton;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -45,17 +45,17 @@ var FullTabsMenu = function FullTabsMenu(_ref) {
       setImagesSection: setImagesSection,
       setActiveTab: setActiveTab
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StatusAsignationInfo, {
-      status: status[activeTab],
+      status: status,
       activeTab: activeTab,
-      image: profileImage,
       setImageLayout: setImageLayout,
       imagesSection: imagesSection,
-      saveDatasheets: saveDatasheets,
-      saveDescriptions: saveDescriptions,
-      updateImages: updateImages,
       assignationsImages: assig,
       setAssignation: setAssignation,
-      isRetailer: isRetailer
+      isRetailer: isRetailer,
+      downloadImages: downloadImages,
+      onClickSave: onClickSave,
+      askToDeleteImages: askToDeleteImages,
+      showSaveButton: showSaveButton
     })]
   });
 };

package/dist/components/organisms/GlobalModal/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalModal = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
+
+var _styles = require("./styles");
+
+var _yellowAlert = _interopRequireDefault(require("../../../assets/images/genericModal/yellowAlert.svg"));
+
+var _closeWhite = _interopRequireDefault(require("../../../assets/images/genericModal/closeWhite.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+props (* required):
+  - *close: function to quit pop up e.g close={() => setShow(!show)}
+  - button1/button2: name and action button e.g. button1={{ name: 'Cancelar', action: () => console.log('Cancelar') }}
+  - img: source image
+  - *message: message to show (like title)
+  - detail: message detail
+  - withoutImg: if the value is "true" the icon will not be displayed, if this attribute is ignored or has the value of "false" the icon will be displayed
+  - customComponent: contains a custom component
+*/
+var GlobalModal = function GlobalModal(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MainContainer, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.MessageContainer, {
+      height: props.button1 || props.button2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Icon, {
+          widthImg: props.widthImg,
+          heightImg: props.heightImg,
+          children: !props.withoutImg && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
+            src: props.img,
+            fallbackImage: _yellowAlert.default,
+            alt: ""
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Close, {
+          onClick: props.close,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _closeWhite.default,
+            alt: "Cerrar"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Message, {
+        children: [props.bold && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.BoldText, {
+          children: props.bold
+        }), " ", props.message]
+      }), props.detail && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Detail, {
+        children: "".concat(props.detail, " ")
+      }), props.textArea && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TextArea, {
+        id: "area"
+      }), props.customComponent && props.customComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerButtons, {
+        children: [props.button1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.FirstButton, {
+          onClick: props.button1.action,
+          children: props.button1.name
+        }), props.button2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Button, {
+          onClick: props.button2.action,
+          children: props.button2.name
+        })]
+      })]
+    })
+  });
+};
+
+exports.GlobalModal = GlobalModal;

package/dist/components/organisms/GlobalModal/styles.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextArea = exports.MessageContainer = exports.Message = exports.MainContainer = exports.Icon = exports.Header = exports.FirstButton = exports.Detail = exports.ContainerButtons = exports.Close = exports.Button = exports.BoldText = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+var MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n  background: #281f3366;\n  z-index: 15;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+
+exports.MainContainer = MainContainer;
+
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  justify-content: center;\n"])));
+
+exports.Header = Header;
+
+var MessageContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  padding: 40px 20px;\n  box-sizing: border-box;\n  width: 600px;\n  min-height: ", ";\n  background: #281f33;\n  border-radius: 39px;\n"])), function (props) {
+  return props.height ? "300px" : "190px";
+});
+
+exports.MessageContainer = MessageContainer;
+
+var TextArea = _styledComponents.default.textarea(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  width: 479px;\n  height: 84px;\n  background: #f0eef2;\n  border-radius: 4px;\n  color: #817393;\n  margin-bottom: 10px;\n"])));
+
+exports.TextArea = TextArea;
+
+var Close = _styledComponents.default.figure(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  cursor: pointer;\n  right: 45px;\n  > img {\n    width: 14px;\n    height: 14px;\n  }\n"])));
+
+exports.Close = Close;
+
+var Icon = _styledComponents.default.figure(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 10px;\n  height: ", ";\n  > img {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+  return props.heightImg && props.heightImg;
+}, function (props) {
+  return props.widthImg ? props.widthImg : "85px";
+}, function (props) {
+  return props.heightImg ? props.heightImg : "85px";
+});
+
+exports.Icon = Icon;
+
+var BoldText = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n"])));
+
+exports.BoldText = BoldText;
+
+var Message = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  font-family: Raleway;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 24px;\n  text-align: center;\n  color: #f7f7f7;\n  margin: 20px 0px;\n"])));
+
+exports.Message = Message;
+
+var ContainerButtons = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-around;\n"])));
+
+exports.ContainerButtons = ContainerButtons;
+
+var FirstButton = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  padding: 0 40px;\n  border: 1px solid #f0eef2;\n  box-sizing: border-box;\n  border-radius: 30px;\n  font-family: Avenir Next;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 18px;\n  color: #f0eef2;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  cursor: pointer;\n"])));
+
+exports.FirstButton = FirstButton;
+var Button = (0, _styledComponents.default)(FirstButton)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  border: 0;\n  background: #e33aa9;\n  cursor: pointer;\n"])));
+exports.Button = Button;
+var Detail = (0, _styledComponents.default)(Message)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: bold;\n  font-size: 18px;\n  white-space: normal;\n"])));
+exports.Detail = Detail;

package/dist/components/organisms/ImageDataTable/index.js

@@ -30,7 +30,9 @@ var ImageDataTable = function ImageDataTable(_ref) {
       assignationsImages = _ref.assignationsImages,
       imagesStatus = _ref.imagesStatus,
       setAssignation = _ref.setAssignation,
-      isRetailer = _ref.isRetailer;
+      isRetailer = _ref.isRetailer,
+      onClickSave = _ref.onClickSave,
+      showSaveButton = _ref.showSaveButton;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     darkMode: darkMode,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeader.TableHeader, {
@@ -38,16 +40,18 @@ var ImageDataTable = function ImageDataTable(_ref) {
       activeImage: activeImage,
       assignationsImages: assignationsImages,
       setAssignation: setAssignation,
-      isRetailer: isRetailer
+      isRetailer: isRetailer,
+      showSaveButton: showSaveButton,
+      onClickSave: onClickSave
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "table-row-text",
         text: "Tipo de toma"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "table-row-text gray-table-row",
-        text: lists === null || lists === void 0 ? void 0 : (_lists$inputs = lists.inputs) === null || _lists$inputs === void 0 ? void 0 : (_lists$inputs$find = _lists$inputs.find(function (f) {
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$inputs = lists.inputs) === null || _lists$inputs === void 0 ? void 0 : (_lists$inputs$find = _lists$inputs.find(function (f) {
           return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_id);
-        })) === null || _lists$inputs$find === void 0 ? void 0 : _lists$inputs$find.name
+        })) === null || _lists$inputs$find === void 0 ? void 0 : _lists$inputs$find.name) || "-"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
@@ -55,9 +59,9 @@ var ImageDataTable = function ImageDataTable(_ref) {
         text: "Tipo de empaque"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "table-row-text gray-table-row",
-        text: lists === null || lists === void 0 ? void 0 : (_lists$imagePackaging = lists.imagePackagingType) === null || _lists$imagePackaging === void 0 ? void 0 : (_lists$imagePackaging2 = _lists$imagePackaging.find(function (f) {
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imagePackaging = lists.imagePackagingType) === null || _lists$imagePackaging === void 0 ? void 0 : (_lists$imagePackaging2 = _lists$imagePackaging.find(function (f) {
           return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.packing_type);
-        })) === null || _lists$imagePackaging2 === void 0 ? void 0 : _lists$imagePackaging2.name
+        })) === null || _lists$imagePackaging2 === void 0 ? void 0 : _lists$imagePackaging2.name) || "-"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
@@ -65,9 +69,9 @@ var ImageDataTable = function ImageDataTable(_ref) {
         text: "Tipo de imagen"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "table-row-text gray-table-row",
-        text: lists === null || lists === void 0 ? void 0 : (_lists$imageType = lists.imageType) === null || _lists$imageType === void 0 ? void 0 : (_lists$imageType$find = _lists$imageType.find(function (f) {
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imageType = lists.imageType) === null || _lists$imageType === void 0 ? void 0 : (_lists$imageType$find = _lists$imageType.find(function (f) {
           return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_type);
-        })) === null || _lists$imageType$find === void 0 ? void 0 : _lists$imageType$find.name
+        })) === null || _lists$imageType$find === void 0 ? void 0 : _lists$imageType$find.name) || "-"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
@@ -75,7 +79,7 @@ var ImageDataTable = function ImageDataTable(_ref) {
         text: "Formato"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "table-row-text",
-        text: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext
+        text: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext) || "-"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
@@ -83,13 +87,13 @@ var ImageDataTable = function ImageDataTable(_ref) {
         text: "Tama\xF1o de imagen"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "table-row-text",
-        text: "".concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.width, "x").concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.height, "px")
+        text: activeImage !== null && activeImage !== void 0 && activeImage.width && activeImage.height ? "".concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.width, "x").concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.height, "px") : "-"
       })]
     }), retailerSelected && (lists === null || lists === void 0 ? void 0 : lists.attrForImgs) && (lists === null || lists === void 0 ? void 0 : (_lists$attrForImgs$re = lists.attrForImgs[retailerSelected]) === null || _lists$attrForImgs$re === void 0 ? void 0 : _lists$attrForImgs$re.map(function (attr, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
           headerType: "table-row-text",
-          text: attr === null || attr === void 0 ? void 0 : attr.name
+          text: (attr === null || attr === void 0 ? void 0 : attr.name) || "-"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelToInput.default, {
           width: "100px",
           defaultValue: attr === null || attr === void 0 ? void 0 : attr.value,
@@ -98,11 +102,13 @@ var ImageDataTable = function ImageDataTable(_ref) {
               action: "changeAttrValue",
               retailer: retailerSelected,
               index: index,
-              value: e.target.value
+              value: e.target.value || "-",
+              name: attr.name,
+              retailersId: Object.keys(lists.attrForImgs).slice(0, -1)
             });
           }
         })]
-      }, "row-" + index);
+      }, "row-" + index + "-" + (attr === null || attr === void 0 ? void 0 : attr.name));
     }))]
   });
 };

package/dist/components/organisms/InputGroup/index.js

@@ -44,38 +44,43 @@ var InputGroup = function InputGroup(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    children: [(inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       headerType: "retailer-name-header",
       text: inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "inputs-container",
       children: inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
-        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6;
+        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10, _dataInputs$input11, _dataInputs$input12;
 
         return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-          inputId: (_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id,
+          inputId: (_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.id,
           version: version,
-          inputType: inputTypeValue((_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.type),
-          label: (_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.name,
-          value: (_dataInputs$input5 = dataInputs[input]) === null || _dataInputs$input5 === void 0 ? void 0 : _dataInputs$input5.value,
+          inputType: inputTypeValue((_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.type),
+          label: ((_dataInputs$input5 = dataInputs[input]) === null || _dataInputs$input5 === void 0 ? void 0 : _dataInputs$input5.name) + ((_dataInputs$input6 = dataInputs[input]) !== null && _dataInputs$input6 !== void 0 && _dataInputs$input6.required ? "*" : ""),
+          value: (_dataInputs$input7 = dataInputs[input]) === null || _dataInputs$input7 === void 0 ? void 0 : _dataInputs$input7.value,
           inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
           articleId: articleId,
-          isRequired: (_dataInputs$input6 = dataInputs[input]) === null || _dataInputs$input6 === void 0 ? void 0 : _dataInputs$input6.required,
+          isRequired: (_dataInputs$input8 = dataInputs[input]) === null || _dataInputs$input8 === void 0 ? void 0 : _dataInputs$input8.required,
           updatedDatasheets: updatedDatasheets,
-          setUpdatedDatasheets: setUpdatedDatasheets
-        }, index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-          inputId: input === null || input === void 0 ? void 0 : input.id,
+          setUpdatedDatasheets: setUpdatedDatasheets,
+          maxChar: (_dataInputs$input9 = dataInputs[input]) !== null && _dataInputs$input9 !== void 0 && _dataInputs$input9.max_chars ? (_dataInputs$input10 = dataInputs[input]) === null || _dataInputs$input10 === void 0 ? void 0 : _dataInputs$input10.max_chars : 999,
+          optionList: (_dataInputs$input11 = dataInputs[input]) === null || _dataInputs$input11 === void 0 ? void 0 : _dataInputs$input11.option_list,
+          description: (_dataInputs$input12 = dataInputs[input]) === null || _dataInputs$input12 === void 0 ? void 0 : _dataInputs$input12.description
+        }, index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value) + "-" + ((_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+          inputId: input.id,
           index: index,
           inputType: "textarea",
-          label: input === null || input === void 0 ? void 0 : input.name,
+          label: (input === null || input === void 0 ? void 0 : input.name) + (input.required ? "*" : ""),
           value: input === null || input === void 0 ? void 0 : input.value,
           isRequired: input.required,
+          maxChar: input.max_chars,
           inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
           updatedDescriptions: updatedDescriptions,
           setUpdatedDescriptions: setUpdatedDescriptions,
           articleId: articleId,
           version: version,
-          dinamicHeight: dinamicHeight
+          dinamicHeight: dinamicHeight,
+          description: input === null || input === void 0 ? void 0 : input.description
         }, index + "-" + (input === null || input === void 0 ? void 0 : input.value));
       })
     })]

package/dist/components/organisms/InputGroup/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n      width: 100%;\n      gap: 5px;\n\n      .input-container {\n        flex: 1 1 20%;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

package/dist/components/organisms/ProductImageModal/index.js

@@ -23,8 +23,6 @@ var _ValidationPanel = require("../../atoms/ValidationPanel");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
-var _data = require("../../../global-files/data");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProductImageModal = function ProductImageModal(_ref) {
@@ -35,8 +33,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
       headerInfo = _ref.headerInfo,
       validation = _ref.validation,
       setShowModal = _ref.setShowModal,
-      sendToFacilitator = _ref.sendToFacilitator,
-      approveRejectButtons = _ref.approveRejectButtons;
+      sendToFacilitator = _ref.sendToFacilitator;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -71,7 +68,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "modal-image-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
-          img: images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.src,
+          img: "https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + (images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.srcDB),
           altText: images === null || images === void 0 ? void 0 : (_images$values$active2 = images.values[activeImage]) === null || _images$values$active2 === void 0 ? void 0 : _images$values$active2.name,
           imageType: "expanded-modal-image"
         })
@@ -81,7 +78,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
           className: "validation-and-table-container",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "validation-panel",
-            children: [approveRejectButtons("images") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
               buttonType: "circular-button ".concat(buttonType),
               onClick: function onClick() {
                 return setShowValidationPanel(true);