contentoh-components-library 21.0.31 → 21.0.32

package/dist/components/molecules/VerificationCodeResetPasswordLogin/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerificationCodeResetPasswordLogin = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _react = require("react");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _GeneralInput = require("../../atoms/GeneralInput");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _utils = require("./utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordLogin() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyVerificationCode = _useState2[0],
+      setEmptyVerificationCode = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      inputCodeVerificationAll = _useState4[0],
+      setInputCodeVerificationAll = _useState4[1];
+
+  var inputPositions = [1, 2, 3, 4, 5, 6];
+  (0, _react.useEffect)(function () {
+    setInputCodeVerificationAll(document.querySelectorAll("[id^='verificationCodeInput']"));
+  }, []);
+  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.jsxs)("div", {
+    className: "user",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Ingresa el código de verificación enviado a:",
+      headerType: "input-name-header"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "verification-code",
+      children: inputPositions.map(function (position) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInput.GeneralInput, {
+          inputId: "verificationCodeInput".concat(position),
+          inputType: "text",
+          inputPlaceholder: "X",
+          validateInput: _utils.validateInput,
+          inputsArray: inputCodeVerificationAll,
+          position: position,
+          maxLength: "1"
+        });
+      })
+    }), emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su c\xF3digo de verificaci\xF3n"
+    })]
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "resend-code",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "Reenviar c\xF3digo de verificaci\xF3n"
+    })
+  }, "4"), /*#__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 (0, _utils.validate)(inputCodeVerificationAll, setEmptyVerificationCode);
+      }
+    })
+  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "reset-password",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "Regresar..."
+    })
+  }, "6")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+      componentsArray: loginRight,
+      panelType: "home-login",
+      panelColor: _variables.GlobalColors.white
+    })
+  });
+};
+
+exports.VerificationCodeResetPasswordLogin = VerificationCodeResetPasswordLogin;

package/dist/components/molecules/VerificationCodeResetPasswordLogin/styles.js

@@ -0,0 +1,20 @@
+"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 _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n  width: 50%;\n  .button-center {\n    text-align: center;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n  .reset-password {\n    text-align: center;\n    margin: 15px !important;\n    color: ", ";\n    cursor: pointer;\n    font-weight: bold;\n    font-family: ", ";\n    font-size: 13px;\n  }\n  .resend-code {\n    margin-top: 8px !important;\n    color: ", ";\n    font-family: ", ";\n    font-size: 11px;\n    text-decoration: underline rgb(228, 81, 172);\n    cursor: pointer;\n    & + * {\n      margin-top: 30px;\n    }\n  }\n  .verification-code {\n    display: flex;\n    text-align: center;\n    margin: auto;\n    margin-top: 10px;\n    input[type=\"number\"]::-webkit-inner-spin-button,\n    input[type=\"number\"]::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    input {\n      width: 70%;\n      text-align: center;\n    }\n  }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.FontFamily.AvenirNext);
+
+exports.Container = Container;

package/dist/components/molecules/VerificationCodeResetPasswordLogin/utils.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateInput = exports.validate = void 0;
+
+/**
+ *
+ * @param {event} e event received triggered by verification code input
+ * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
+ */
+var validateInput = function validateInput(e, index, inputsArray) {
+  var isValid = false;
+  var inputNotEmpty = e.target.value.length > 0;
+
+  if (inputNotEmpty) {
+    if (validateInputNumber(e) !== null) {
+      isValid = true;
+      nextInputFocus(inputsArray, index++);
+    }
+  }
+
+  return isValid ? e.target.value : "";
+};
+/**
+ *
+ * @param {event} e event received triggered by verification code input
+ * @returns {boolean} if digit is a number
+ */
+
+
+exports.validateInput = validateInput;
+
+var validateInputNumber = function validateInputNumber(e) {
+  return (e.target.value || String.fromCharCode(e.keyCode)).match(/[0-9]{1}/);
+};
+/**
+ *
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
+ * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
+ * changes focus to next input if digit typed is a number and there wasn't any before
+ */
+
+
+var nextInputFocus = function nextInputFocus(inputsArray, index) {
+  var _inputsArray$index;
+
+  var button = document.getElementsByClassName("general-default-button");
+  inputsArray !== null && inputsArray !== void 0 && inputsArray.length && index === (inputsArray === null || inputsArray === void 0 ? void 0 : inputsArray.length) ? button[0].focus() : (_inputsArray$index = inputsArray[index]) === null || _inputsArray$index === void 0 ? void 0 : _inputsArray$index.focus();
+};
+/**
+ *
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to check if there's any empty)
+ * @param {function} setEmptyVerificationCode function to update flag which handles if there's an empty char
+ * updates emptyVerificationFlag from father component
+ */
+
+
+var validate = function validate(inputsArray, setEmptyVerificationCode) {
+  var contInputEmpty = 0;
+  inputsArray.forEach(function (element) {
+    element.value === "" ? 0 : contInputEmpty++;
+  });
+  contInputEmpty === inputsArray.length ? setEmptyVerificationCode(false) : setEmptyVerificationCode(true);
+};
+
+exports.validate = validate;

package/dist/components/{atoms/InputFormatter/Wysiwyg.stories.js → organisms/ChangePassword/ChangePassword.stories.js}

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DefaultInputFormatter = void 0;
+exports.default = exports.ChangePasswordDefault = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -14,17 +14,15 @@ var _index = require("./index");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _default = {
-  title: "Components/atoms/InputFormatter",
-  component: _index.InputFormatter
+  title: "Components/organisms/ChangePassword",
+  component: _index.ChangePassword
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputFormatter, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChangePassword, (0, _objectSpread2.default)({}, args));
 };
 
-var DefaultInputFormatter = Template.bind({});
-exports.DefaultInputFormatter = DefaultInputFormatter;
-DefaultInputFormatter.args = {
-  text: "hola mundo"
-};
+var ChangePasswordDefault = Template.bind({});
+exports.ChangePasswordDefault = ChangePasswordDefault;
+ChangePasswordDefault.args = {};

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

@@ -0,0 +1,113 @@
+"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() {
+  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;
+      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);
+              }
+
+            case 6:
+            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  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    text-align: center;\n    position: absolute;\n    bottom: 5%;\n    left: calc(75% - 80px);\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
+
+exports.Container = Container;

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

@@ -16,46 +16,22 @@ var _AvatarAndValidation = require("../../molecules/AvatarAndValidation");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var FullProductNameHeader = function FullProductNameHeader(_ref) {
-  var _headerData$article, _headerData$article2, _headerData$article3, _headerData$article4, _headerData$article5;
-
-  var headerData = _ref.headerData,
-      percent = _ref.percent,
-      activeRetailer = _ref.activeRetailer,
-      setActiveRetailer = _ref.setActiveRetailer,
-      approveRejectButtons = _ref.approveRejectButtons,
-      sendToFacilitator = _ref.sendToFacilitator,
-      auditorAssigned = _ref.auditorAssigned,
-      userAssigned = _ref.userAssigned;
+  var headerData = _ref.headerData;
   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,
+      productName: headerData === null || headerData === void 0 ? void 0 : headerData.name,
       statusType: headerData === null || headerData === void 0 ? void 0 : headerData.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()
+      percent: headerData === null || headerData === void 0 ? void 0 : headerData.percent,
+      backgroundColor: headerData === null || headerData === void 0 ? void 0 : headerData.backgroundColor,
+      priority: headerData === null || headerData === void 0 ? void 0 : headerData.priority,
+      date: headerData === null || headerData === void 0 ? void 0 : headerData.date
     }), /*#__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
-        }, {
-          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
-        }]
+        features: headerData === null || headerData === void 0 ? void 0 : headerData.features
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarAndValidation.AvatarAndValidation, {
-        retailers: headerData === null || headerData === void 0 ? void 0 : headerData.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
+        validation: headerData === null || headerData === void 0 ? void 0 : headerData.validation
       })]
     })]
   });

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

@@ -21,17 +21,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var FullTabsMenu = function FullTabsMenu(_ref) {
   var tabsSections = _ref.tabsSections,
-      _ref$status = _ref.status,
-      status = _ref$status === void 0 ? "" : _ref$status,
-      activeTab = _ref.activeTab,
+      status = _ref.status,
+      profileImage = _ref.profileImage,
       setActiveTab = _ref.setActiveTab,
-      setImageLayout = _ref.setImageLayout,
-      assig = _ref.assig,
-      setAssignation = _ref.setAssignation,
-      isRetailer = _ref.isRetailer,
-      downloadImages = _ref.downloadImages,
-      askToDeleteImages = _ref.askToDeleteImages,
-      onClickSave = _ref.onClickSave;
+      setImageLayout = _ref.setImageLayout;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -45,15 +38,9 @@ var FullTabsMenu = function FullTabsMenu(_ref) {
       setActiveTab: setActiveTab
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StatusAsignationInfo, {
       status: status,
-      activeTab: activeTab,
+      image: profileImage,
       setImageLayout: setImageLayout,
-      imagesSection: imagesSection,
-      assignationsImages: assig,
-      setAssignation: setAssignation,
-      isRetailer: isRetailer,
-      downloadImages: downloadImages,
-      onClickSave: onClickSave,
-      askToDeleteImages: askToDeleteImages
+      imagesSection: imagesSection
     })]
   });
 };

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,101 +9,27 @@ var _styles = require("./styles");
 
 var _TableHeader = require("../../molecules/TableHeader");
 
-var _styles2 = require("../../molecules/TableRow/styles");
-
-var _ScreenHeader = require("../../atoms/ScreenHeader");
-
-var _LabelToInput = _interopRequireDefault(require("../../atoms/LabelToInput"));
+var _TableRow = require("../../molecules/TableRow");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ImageDataTable = function ImageDataTable(_ref) {
-  var _lists$inputs, _lists$inputs$find, _lists$imagePackaging, _lists$imagePackaging2, _lists$imageType, _lists$imageType$find, _lists$attrForImgs$re;
-
-  var activeImage = _ref.activeImage,
-      darkMode = _ref.darkMode,
-      lists = _ref.lists,
-      retailerSelected = _ref.retailerSelected,
-      setImages = _ref.setImages,
-      assignationsImages = _ref.assignationsImages,
-      imagesStatus = _ref.imagesStatus,
-      setAssignation = _ref.setAssignation,
-      isRetailer = _ref.isRetailer,
-      onClickSave = _ref.onClickSave;
+  var headerInfo = _ref.headerInfo,
+      imageData = _ref.imageData,
+      activeImage = _ref.activeImage,
+      darkMode = _ref.darkMode;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     darkMode: darkMode,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeader.TableHeader, {
-      imagesStatus: imagesStatus,
-      activeImage: activeImage,
-      assignationsImages: assignationsImages,
-      setAssignation: setAssignation,
-      isRetailer: isRetailer,
-      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) {
-          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) || "-"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "table-row-text",
-        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) {
-          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.packing_type);
-        })) === null || _lists$imagePackaging2 === void 0 ? void 0 : _lists$imagePackaging2.name) || "-"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "table-row-text",
-        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) {
-          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) || "-"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "table-row-text",
-        text: "Formato"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "table-row-text",
-        text: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext) || "-"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "table-row-text",
-        text: "Tama\xF1o de imagen"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "table-row-text",
-        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) || "-"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelToInput.default, {
-          width: "100px",
-          defaultValue: attr === null || attr === void 0 ? void 0 : attr.value,
-          onChange: function onChange(e) {
-            setImages({
-              action: "changeAttrValue",
-              retailer: retailerSelected,
-              index: index,
-              value: e.target.value || "-"
-            });
-          }
-        })]
-      }, "row-" + index);
-    }))]
+      headerInfo: headerInfo,
+      activeImage: activeImage
+    }), imageData === null || imageData === void 0 ? void 0 : imageData.map(function (attribute, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableRow.TableRow, {
+        feature: attribute.feature,
+        value: attribute.value,
+        valueType: index < 2
+      }, index);
+    })]
   });
 };
 

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

@@ -20,14 +20,7 @@ var InputGroup = function InputGroup(_ref) {
       inputGroup = _ref$inputGroup === void 0 ? {} : _ref$inputGroup,
       activeSection = _ref.activeSection,
       _ref$dataInputs = _ref.dataInputs,
-      dataInputs = _ref$dataInputs === void 0 ? {} : _ref$dataInputs,
-      updatedDescriptions = _ref.updatedDescriptions,
-      setUpdatedDescriptions = _ref.setUpdatedDescriptions,
-      updatedDatasheets = _ref.updatedDatasheets,
-      setUpdatedDatasheets = _ref.setUpdatedDatasheets,
-      articleId = _ref.articleId,
-      version = _ref.version,
-      dinamicHeight = _ref.dinamicHeight;
+      dataInputs = _ref$dataInputs === void 0 ? {} : _ref$dataInputs;
 
   var inputTypeValue = function inputTypeValue(type) {
     switch (type) {
@@ -44,41 +37,27 @@ var InputGroup = function InputGroup(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout",
-    children: [(inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    children: [/*#__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, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10;
+        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4;
 
         return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-          inputId: (_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.id,
-          version: version,
-          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$input8 = dataInputs[input]) === null || _dataInputs$input8 === void 0 ? void 0 : _dataInputs$input8.required,
-          updatedDatasheets: updatedDatasheets,
-          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
-        }, 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,
+          inputId: "datasheet-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.id) + "-" + index,
+          inputType: inputTypeValue((_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.type),
+          label: (_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.name,
+          value: (_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.value,
+          inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder
+        }, index) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+          inputId: "description-" + (input === null || input === void 0 ? void 0 : input.id) + "-" + index,
           inputType: "textarea",
-          label: (input === null || input === void 0 ? void 0 : input.name) + (input.required ? "*" : ""),
+          label: input === null || input === void 0 ? void 0 : input.name,
           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
-        }, index + "-" + (input === null || input === void 0 ? void 0 : input.value));
+          inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder
+        }, index);
       })
     })]
   });