contentoh-components-library 21.0.28 → 21.0.31

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetailerSelector = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _Avatar = require("../../atoms/Avatar");
+
+var _react = require("react");
+
+var _AsignationOption = require("../../atoms/AsignationOption");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RetailerSelector = function RetailerSelector(_ref) {
+  var retailers = _ref.retailers,
+      activeRetailer = _ref.activeRetailer,
+      setActiveRetailer = _ref.setActiveRetailer;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      retailersPanel = _useState2[0],
+      setRetailersPanel = _useState2[1];
+
+  var closeRetailersPanel = function closeRetailersPanel(e) {
+    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
+      document.removeEventListener("click", closeRetailersPanel, false);
+      setRetailersPanel(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (retailersPanel) {
+      document.addEventListener("click", closeRetailersPanel, false);
+    }
+  }, [retailersPanel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: "retailers-assignation",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      image: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.image,
+      altText: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.name,
+      imageType: "medium-image",
+      onClick: function onClick() {
+        retailers.length > 1 && setRetailersPanel(!retailersPanel);
+        if (retailersPanel) document.removeEventListener("click", closeRetailersPanel, false);
+      }
+    }), retailersPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "retailers-panel",
+      children: retailers.map(function (retailer, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsignationOption.AsignationOption, {
+          profileImage: retailer === null || retailer === void 0 ? void 0 : retailer.image,
+          imageType: "medium-image",
+          asignationType: null,
+          name: retailer === null || retailer === void 0 ? void 0 : retailer.name,
+          team: retailer === null || retailer === void 0 ? void 0 : retailer.team,
+          onClick: function onClick() {
+            setActiveRetailer(retailer);
+            document.removeEventListener("click", closeRetailersPanel, false);
+            setRetailersPanel(false);
+          }
+        }, "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name));
+      })
+    })]
+  });
+};
+
+exports.RetailerSelector = RetailerSelector;

package/dist/components/{atoms/MenuCommercialRetailers → molecules/RetailerSelector}/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  display: flex;\n  align-items: center;\n  .status-version {\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .list-commercial-retailers {\n    border: 1px solid transparent;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
 
 exports.Container = Container;

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

@@ -23,32 +23,43 @@ var _react = require("react");
 
 var _index3 = require("../../atoms/AsignationOption/index");
 
+var _data = require("../../../global-files/data");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
+  var _assignationsImages$a, _assignationsImages$c;
+
   var _ref$status = _ref.status,
       status = _ref$status === void 0 ? "-" : _ref$status,
-      src = _ref.src,
       imagesSection = _ref.imagesSection,
       setImageLayout = _ref.setImageLayout,
-      asignationsList = _ref.asignationsList,
       _ref$percent = _ref.percent,
       percent = _ref$percent === void 0 ? 0 : _ref$percent,
-      saveImages = _ref.saveImages,
-      deleteImages = _ref.deleteImages,
+      assignationsImages = _ref.assignationsImages,
+      setAssignation = _ref.setAssignation,
+      isRetailer = _ref.isRetailer,
+      downloadImages = _ref.downloadImages,
+      askToDeleteImages = _ref.askToDeleteImages,
       _ref$id = _ref.id,
-      id = _ref$id === void 0 ? "default-id" : _ref$id;
+      id = _ref$id === void 0 ? "default-id" : _ref$id,
+      onClickSave = _ref.onClickSave;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       showAsignationPanel = _useState2[0],
       setShowAsignationPanel = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(true),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       layout = _useState4[0],
       setLayout = _useState4[1];
 
+  var _useState5 = (0, _react.useState)("facilitator"),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      assignationType = _useState6[0],
+      setAssignationType = _useState6[1];
+
   var closeAsignations = function closeAsignations(e) {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
       document.removeEventListener("click", closeAsignations, false);
@@ -63,17 +74,20 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
   }, [showAsignationPanel]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     id: id,
-    children: [imagesSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "circular-button save-button",
+      onClick: onClickSave
+    }), imagesSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "images-buttons",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-        buttonType: "circular-button save-button",
+        buttonType: "circular-button delete-button",
         onClick: function onClick() {
-          saveImages && saveImages();
+          askToDeleteImages && askToDeleteImages();
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-        buttonType: "circular-button delete-button",
+        buttonType: "circular-button download-button",
         onClick: function onClick() {
-          deleteImages && deleteImages();
+          downloadImages();
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
         buttonType: layout ? "grid-layout" : "row-layout",
@@ -85,13 +99,19 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StatusTag, {
       statusType: status,
       ovalForm: true
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
-      imageType: "small-image",
-      image: src,
-      altText: "user profile image",
-      onClick: function onClick() {
-        setShowAsignationPanel(true);
-      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "assignations-container",
+      children: assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$a = assignationsImages.assignations) === null || _assignationsImages$a === void 0 ? void 0 : _assignationsImages$a.map(function (assignation, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+          imageType: "small-image",
+          image: (0, _data.getProfilePicture)(assignation.id, 20, 20),
+          altText: "user profile image",
+          onClick: function onClick() {
+            setShowAsignationPanel(true);
+            setAssignationType(assignation === null || assignation === void 0 ? void 0 : assignation.collaboratorType);
+          }
+        }, index + "-" + assignation.id);
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       text: "Asig.",
       color: "#969696",
@@ -120,18 +140,19 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "asignations-list",
-        children: asignationsList !== undefined ? asignationsList.map(function (asigantion, index) {
+        children: (assignationsImages === null || assignationsImages === void 0 ? void 0 : assignationsImages.collaborators) !== undefined ? assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$c = assignationsImages.collaborators[assignationType]) === null || _assignationsImages$c === void 0 ? void 0 : _assignationsImages$c.map(function (asignation, index) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AsignationOption, {
-            profileImage: asignation.image,
-            asignationType: asignation.asignationType,
-            name: asignation.name,
-            team: asigantion.team
-          });
+            profileImage: (0, _data.getProfilePicture)(asignation === null || asignation === void 0 ? void 0 : asignation.id_user, 40, 40),
+            onClick: function onClick() {
+              setAssignation(assignationType, asignation === null || asignation === void 0 ? void 0 : asignation.id_user);
+            },
+            name: asignation.name
+          }, index + "-" + asignation.name);
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           className: "no-asignations",
           children: "Sin personas para asignar"
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), isRetailer === 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "default-asignations-list",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AsignationOption, {
           asignationType: "provider",

package/dist/components/molecules/StatusAsignationInfo/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  display: flex;\n  align-items: center;\n  position: relative;\n\n  > * + * {\n    margin-left: 8px;\n  }\n\n  .images-buttons {\n    button + * {\n      margin-left: 8px;\n    }\n  }\n\n  .asignation-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n\n    .asignation-header {\n      display: flex;\n      justify-content: space-between;\n\n      .asignation-status,\n      .asignation-percent {\n        & > p {\n          font-family: ", ";\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 16px;\n          color: ", ";\n        }\n      }\n\n      .asignation-percent {\n        text-align: right;\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n\n    .asignations-list {\n      min-height: 40px;\n      border-bottom: 1px solid ", ";\n\n      .no-asignations {\n        padding: 5px;\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 16px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  > * + * {\n    margin-left: 8px;\n  }\n\n  .images-buttons {\n    button + * {\n      margin-left: 8px;\n    }\n  }\n\n  .assignations-container {\n    display: flex;\n    cursor: pointer;\n  }\n\n  .asignation-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px 8px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n\n    .asignation-header {\n      display: flex;\n      justify-content: space-between;\n\n      .asignation-status,\n      .asignation-percent {\n        & > p {\n          font-family: ", ";\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 16px;\n          color: ", ";\n        }\n      }\n\n      .asignation-percent {\n        text-align: right;\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n\n    .asignations-list {\n      min-height: 40px;\n\n      .no-asignations {\n        padding: 5px;\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 16px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 10px;\n        border-top: 1px solid ", ";\n      }\n    }\n\n    .default-asignations-list {\n      padding-top: 10px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
 
 exports.Container = Container;

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

@@ -16,16 +16,23 @@ var _variables = require("../../../global-files/variables");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var TableHeader = function TableHeader(_ref) {
-  var headerInfo = _ref.headerInfo,
-      activeImage = _ref.activeImage;
+  var imagesStatus = _ref.imagesStatus,
+      activeImage = _ref.activeImage,
+      assignationsImages = _ref.assignationsImages,
+      setAssignation = _ref.setAssignation,
+      isRetailer = _ref.isRetailer,
+      onClickSave = _ref.onClickSave;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-      text: activeImage === null || activeImage === void 0 ? void 0 : activeImage.imageName,
+      text: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.name) || "-",
       color: _variables.GlobalColors.s5,
       headerType: "input-name-header"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusAsignationInfo.StatusAsignationInfo, {
-      status: headerInfo === null || headerInfo === void 0 ? void 0 : headerInfo.status,
-      src: headerInfo === null || headerInfo === void 0 ? void 0 : headerInfo.src
+      status: imagesStatus,
+      assignationsImages: assignationsImages,
+      setAssignation: setAssignation,
+      isRetailer: isRetailer,
+      onClickSave: onClickSave
     })]
   });
 };

package/dist/components/molecules/TableHeader/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  display: flex;\n  justify-content: space-between;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  .status-asignation-info {\n    display: flex;\n    align-items: center;\n\n    * + * {\n      margin-left: 5px;\n    }\n  }\n\n  & + * {\n    margin-top: 4px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  .input-name-header {\n    overflow: auto;\n    max-width: 40%;\n    white-space: nowrap;\n  }\n  .status-asignation-info {\n    display: flex;\n    align-items: center;\n\n    * + * {\n      margin-left: 5px;\n    }\n  }\n\n  & + * {\n    margin-top: 4px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

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

@@ -18,7 +18,19 @@ var TagAndInput = function TagAndInput(_ref) {
       label = _ref.label,
       value = _ref.value,
       inputPlaceHolder = _ref.inputPlaceHolder,
-      inputId = _ref.inputId;
+      inputId = _ref.inputId,
+      updatedDescriptions = _ref.updatedDescriptions,
+      setUpdatedDescriptions = _ref.setUpdatedDescriptions,
+      updatedDatasheets = _ref.updatedDatasheets,
+      setUpdatedDatasheets = _ref.setUpdatedDatasheets,
+      articleId = _ref.articleId,
+      version = _ref.version,
+      index = _ref.index,
+      isRequired = _ref.isRequired,
+      dinamicHeight = _ref.dinamicHeight,
+      inputCols = _ref.inputCols,
+      inputRows = _ref.inputRows,
+      maxChar = _ref.maxChar;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
     className: "input-container",
@@ -29,7 +41,19 @@ var TagAndInput = function TagAndInput(_ref) {
       inputId: inputId,
       inputType: inputType,
       inputValue: value,
-      inputPlaceholder: inputPlaceHolder
+      index: index,
+      isRequired: isRequired,
+      inputPlaceholder: inputPlaceHolder,
+      updatedDescriptions: updatedDescriptions,
+      setUpdatedDescriptions: setUpdatedDescriptions,
+      updatedDatasheets: updatedDatasheets,
+      setUpdatedDatasheets: setUpdatedDatasheets,
+      articleId: articleId,
+      version: version,
+      dinamicHeight: dinamicHeight,
+      inputCols: inputCols,
+      inputRows: inputRows,
+      maxChar: maxChar
     })]
   }, "generalTagInput-".concat(inputType));
 };

package/dist/components/molecules/TextAndGradient/TextAndGradient.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextAndGradientDefault = void 0;
+
+var _index = require("./index");
+
+var _Cadena = _interopRequireDefault(require("../../../assets/images/providerAndCadena/Cadena.svg"));
+
+var _default = {
+  title: "Components/molecules/TextAndGradient",
+  component: _index.TextAndGradient
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.TextAndGradient, args);
+};
+
+var TextAndGradientDefault = Template.bind({});
+exports.TextAndGradientDefault = TextAndGradientDefault;
+TextAndGradientDefault.args = {
+  title: "Beneficios de cadenas",
+  containerList: {
+    content: ["Crea proveedores y agregalos a tu cadena", "Valida los proveedores", "Solicita actualización a proveedores", "Analiza el número de productos totales"]
+  }
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextAndGradient = void 0;
+
+var _styles = require("./styles");
+
+var _AtomList = require("../../atoms/AtomList");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var TextAndGradient = function TextAndGradient(_ref) {
+  var title = _ref.title,
+      image = _ref.image,
+      containerList = _ref.containerList;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    className: "title",
+    headerType: "with-bold-text",
+    text: title,
+    color: _variables.GlobalColors.s1
+  })), image && /*#__PURE__*/React.createElement("img", {
+    src: image
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "list"
+  }, /*#__PURE__*/React.createElement(_AtomList.AtomList, {
+    content: containerList.content
+  })));
+};
+
+exports.TextAndGradient = TextAndGradient;

package/dist/components/molecules/TextAndGradient/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.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    position: absolute;\n    width: 720px;\n    height: 720px;\n    left: 0px;\n    top: 0px;\n    background: linear-gradient(180deg, #E33AA9 0%, #3B1366 100%);\n    align-content: center;\n\n    .title{\n        position: absolute;\n        width: 475px;\n        height: 36px;\n        left: 110px;\n        top: 140px;\n        letter-spacing: -0.015em;\n        font-feature-settings: 'pnum' on, 'lnum' on;\n    }\n    .list{\n        position: absolute;\n        height: 160px;\n        left: 180px;\n        top: 219px;\n        font-family: Raleway;\n        font-style: normal;\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 40px;\n        letter-spacing: -0.015em;\n        text-align: left;\n        \n    }\n\n"])));
+
+exports.Container = Container;

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

@@ -16,22 +16,46 @@ var _AvatarAndValidation = require("../../molecules/AvatarAndValidation");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var FullProductNameHeader = function FullProductNameHeader(_ref) {
-  var headerData = _ref.headerData;
+  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;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductNameHeader.ProductNameHeader, {
-      productName: headerData === null || headerData === void 0 ? void 0 : headerData.name,
+      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: 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
+      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()
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "features-bar-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FeaturesBar.FeaturesBar, {
-        features: headerData === null || headerData === void 0 ? void 0 : headerData.features
+        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
+        }]
       }), /*#__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
+        validation: headerData === null || headerData === void 0 ? void 0 : headerData.validation,
+        activeRetailer: activeRetailer,
+        setActiveRetailer: setActiveRetailer,
+        approveRejectButtons: approveRejectButtons,
+        sendToFacilitator: sendToFacilitator,
+        auditorAssigned: auditorAssigned,
+        userAssigned: userAssigned
       })]
     })]
   });

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

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

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

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,27 +11,101 @@ var _styles = require("./styles");
 
 var _TableHeader = require("../../molecules/TableHeader");
 
-var _TableRow = require("../../molecules/TableRow");
+var _styles2 = require("../../molecules/TableRow/styles");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _LabelToInput = _interopRequireDefault(require("../../atoms/LabelToInput"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ImageDataTable = function ImageDataTable(_ref) {
-  var headerInfo = _ref.headerInfo,
-      imageData = _ref.imageData,
-      activeImage = _ref.activeImage,
-      darkMode = _ref.darkMode;
+  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;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     darkMode: darkMode,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeader.TableHeader, {
-      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);
-    })]
+      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);
+    }))]
   });
 };