contentoh-components-library 6.0.0 → 7.0.0

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

@@ -0,0 +1,71 @@
+"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 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__*/React.createElement(_styles.Container, {
+    id: "retailers-assignation"
+  }, /*#__PURE__*/React.createElement(_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__*/React.createElement("div", {
+    className: "retailers-panel"
+  }, retailers.map(function (retailer, index) {
+    return /*#__PURE__*/React.createElement(_AsignationOption.AsignationOption, {
+      key: "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name),
+      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);
+      }
+    });
+  })));
+};
+
+exports.RetailerSelector = RetailerSelector;

package/dist/components/molecules/RetailerSelector/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  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/SidebarNotification/SidebarNotification.stories.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SidebarNotificationDefault = void 0;
+
+var _index = require("./index");
+
+var _defaultProfileImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProfileImage.svg"));
+
+var _default = {
+  title: "Components/molecules/SidebarNotification",
+  component: _index.SidebarNotification,
+  argTypes: {
+    showSidebar: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+var showSidebar = false;
+
+var setShowSidebar = function setShowSidebar(value) {
+  showSidebar = value;
+};
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.SidebarNotification, args);
+};
+
+var SidebarNotificationDefault = Template.bind({});
+exports.SidebarNotificationDefault = SidebarNotificationDefault;
+SidebarNotificationDefault.args = {
+  array: [{
+    dates: "2/18/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/17/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/16/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/14/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/17/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }],
+  setShowSidebar: setShowSidebar,
+  showSidebar: showSidebar
+};

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

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarNotification = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _variables = require("../../../global-files/variables");
+
+var _index2 = require("../../atoms/Avatar/index");
+
+var _productNotification = _interopRequireDefault(require("../../../assets/images/productNotification/productNotification.svg"));
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _Notification = require("../../atoms/Notification");
+
+var _react = require("react");
+
+var SidebarNotification = function SidebarNotification(_ref) {
+  var _ref$array = _ref.array,
+      array = _ref$array === void 0 ? [] : _ref$array,
+      showSidebar = _ref.showSidebar,
+      setShowSidebar = _ref.setShowSidebar;
+  var sidebar = (0, _react.useRef)(null);
+
+  var closeSidebar = function closeSidebar(e) {
+    if (!e.target.closest("#side-bar") && showSidebar) {
+      document.removeEventListener("click", closeSidebar, false);
+      sidebar.current.classList.remove("active");
+      setTimeout(function () {
+        setShowSidebar(false);
+      }, 500);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showSidebar) {
+      document.addEventListener("click", closeSidebar, false);
+      sidebar.current.classList.add("active");
+    }
+  }, [showSidebar]);
+
+  var comparisonDate = function comparisonDate(dates) {
+    var dateActual = new Date();
+    var dateComparison = new Date(dates);
+    var date = "";
+
+    if (dateActual.toDateString() === dateComparison.toDateString()) {
+      date = "Hoy";
+    } else if (dateActual.getFullYear() === dateComparison.getFullYear() && dateActual.getMonth() === dateComparison.getMonth() && dateActual.getDate() - 1 === dateComparison.getDate()) {
+      date = "Ayer";
+    } else {
+      date = dateComparison.toLocaleDateString();
+    }
+
+    return date;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showSidebar && /*#__PURE__*/React.createElement(_styles.Container, {
+    id: "side-bar",
+    ref: sidebar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "notification-header"
+  }, /*#__PURE__*/React.createElement(_index2.Avatar, {
+    image: _productNotification.default,
+    imageType: "retailer-image",
+    altText: "Notification Picture"
+  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    headerType: "product-name-header",
+    text: "Notificaciones",
+    color: "#867586"
+  }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "close-button"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "scroll"
+  }, array === null || array === void 0 ? void 0 : array.map(function (element, index) {
+    var _element$notification;
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: "date-notification",
+      key: index + "-" + (element === null || element === void 0 ? void 0 : element.dates)
+    }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+      headerType: "input-name-header",
+      text: comparisonDate(element === null || element === void 0 ? void 0 : element.dates),
+      color: "#6A5880",
+      FontFamily: _variables.FontFamily.AvenirNext
+    }), element === null || element === void 0 ? void 0 : (_element$notification = element.notifications) === null || _element$notification === void 0 ? void 0 : _element$notification.map(function (notification, index) {
+      return /*#__PURE__*/React.createElement(_Notification.Notification, {
+        key: index,
+        profilePicture: notification === null || notification === void 0 ? void 0 : notification.profilePicture,
+        notification: notification === null || notification === void 0 ? void 0 : notification.notification,
+        newNotification: notification === null || notification === void 0 ? void 0 : notification.newNotification
+      });
+    }));
+  }))), " ");
+};
+
+exports.SidebarNotification = SidebarNotification;

package/dist/components/molecules/SidebarNotification/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  position: absolute;\n  right: 0;\n  background-color: #f9f9fc;\n  overflow: hidden;\n  width: 380px;\n  height: 100vh;\n  padding: 10px;\n  border: none;\n  box-shadow: -3px 0px 4px rgba(0, 0, 0, 0.25);\n  right: -100%;\n  transition: right linear 1s;\n  &.active {\n    right: 0;\n  } \n  /*\n  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);\n  transition: clip-path linear 1s;\n  &.active {\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n  } */\n  .notification-header {\n    display: flex;\n    justify-content: space-between;\n    .retailer-image {\n      margin-left: 10px;\n    }\n    .product-name-header {\n      text-align: left;\n      flex: 1;\n      line-height: 50px;\n      margin-left: 13px;\n    }\n    .close-button {\n      height: 23px;\n      width: 23px;\n      padding: 3px;\n      border: 1px solid #ededed;\n      border-radius: 3px;\n      background-size: 23px;\n    }\n  }\n  .scroll {\n    overflow: auto;\n    height: 85vh;\n    .date-notification {\n      margin-top: 10px;\n      .input-name-header {\n        font-weight: 600;\n        display: flex;\n        justify-content: flex-end;\n        margin-right: 25px;\n      }\n      .new-notification {\n        margin-top: 7px;\n        width: 100%;\n      }\n    }\n  }\n"])));
+
+exports.Container = Container;

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

@@ -23,15 +23,22 @@ var _react = require("react");
 
 var _index3 = require("../../atoms/AsignationOption/index");
 
+var _data = require("../../../global-files/data");
+
 var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
   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,
+      activeTab = _ref.activeTab,
+      deleteImages = _ref.deleteImages,
+      saveDatasheets = _ref.saveDatasheets,
+      saveDescriptions = _ref.saveDescriptions,
+      updateImages = _ref.updateImages,
+      assignationsImages = _ref.assignationsImages,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? "default-id" : _ref$id;
 
@@ -58,24 +65,56 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
     }
   }, [showAsignationPanel]);
   return /*#__PURE__*/React.createElement(_styles.Container, {
-    onClick: function onClick() {
-      setShowAsignationPanel(true);
-    },
     id: id
-  }, imagesSection && /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "circular-button save-button",
+    onClick: function onClick() {
+      switch (activeTab) {
+        case "Descripción":
+          saveDescriptions && saveDescriptions();
+          break;
+
+        case "Ficha técnica":
+          saveDatasheets && saveDatasheets();
+          break;
+
+        case "Imágenes":
+          updateImages && updateImages();
+          break;
+
+        default:
+          break;
+      }
+    }
+  }), imagesSection && /*#__PURE__*/React.createElement("div", {
+    className: "images-buttons"
+  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "circular-button delete-button",
+    onClick: function onClick() {
+      deleteImages && deleteImages();
+    }
+  }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
     buttonType: layout ? "grid-layout" : "row-layout",
     onClick: function onClick() {
       setLayout(!layout);
-      setImageLayout(!layout);
+      setImageLayout && setImageLayout(!layout);
     }
-  }), /*#__PURE__*/React.createElement(_index2.StatusTag, {
+  })), /*#__PURE__*/React.createElement(_index2.StatusTag, {
     statusType: status,
     ovalForm: true
-  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
-    imageType: "small-image",
-    image: src,
-    altText: "user profile image"
-  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "assignations-container"
+  }, assignationsImages === null || assignationsImages === void 0 ? void 0 : assignationsImages.map(function (assignation, index) {
+    return /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+      key: index + "-" + assignation,
+      imageType: "small-image",
+      image: (0, _data.getProfilePicture)(assignation, 20, 20),
+      altText: "user profile image",
+      onClick: function onClick() {
+        setShowAsignationPanel(true);
+      }
+    });
+  })), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
     text: "Asig.",
     color: "#969696",
     fontFamily: "Avenir Next",

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  .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  }\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);
 
 exports.Container = Container;

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

@@ -14,15 +14,16 @@ var _StatusAsignationInfo = require("../StatusAsignationInfo");
 var _variables = require("../../../global-files/variables");
 
 var TableHeader = function TableHeader(_ref) {
-  var headerInfo = _ref.headerInfo,
-      activeImage = _ref.activeImage;
+  var imagesStatus = _ref.imagesStatus,
+      activeImage = _ref.activeImage,
+      assignationsImages = _ref.assignationsImages;
   return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
     text: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
     color: _variables.GlobalColors.s5,
     headerType: "input-name-header"
   }), /*#__PURE__*/React.createElement(_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
   }));
 };
 

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

@@ -16,7 +16,8 @@ var _TabSection = require("../../atoms/TabSection");
 var _react = require("react");
 
 var TabsMenu = function TabsMenu(_ref) {
-  var tabsSections = _ref.tabsSections,
+  var _ref$tabsSections = _ref.tabsSections,
+      tabsSections = _ref$tabsSections === void 0 ? {} : _ref$tabsSections,
       setImagesSection = _ref.setImagesSection,
       setActiveTab = _ref.setActiveTab;
 
@@ -25,7 +26,8 @@ var TabsMenu = function TabsMenu(_ref) {
       sections = _useState2[0],
       setSections = _useState2[1];
 
-  var activeSection = function activeSection(key, array) {
+  var activeSection = function activeSection(key) {
+    var array = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var tempArray = {};
     setImagesSection(key === "Imágenes");
     Object.keys(array).forEach(function (section) {

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

@@ -15,17 +15,42 @@ var TagAndInput = function TagAndInput(_ref) {
   var inputType = _ref.inputType,
       label = _ref.label,
       value = _ref.value,
-      inputPlaceHolder = _ref.inputPlaceHolder;
+      inputPlaceHolder = _ref.inputPlaceHolder,
+      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;
   return /*#__PURE__*/React.createElement(_styles.Container, {
     inputType: inputType,
-    className: "input-container"
+    className: "input-container",
+    key: "generalTagInput-".concat(inputType)
   }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
     text: label,
     headerType: "input-name-header"
   }), /*#__PURE__*/React.createElement(_index2.GeneralInput, {
+    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
   }));
 };
 

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

@@ -15,7 +15,7 @@ var _templateObject;
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > :first-child {\n    & + * {\n      margin-top: ", "px;\n    }\n  }\n"])), function (_ref) {
   var inputType = _ref.inputType;
-  return inputType === "text" ? 4 : 15;
+  return inputType !== "textarea" ? 4 : 15;
 });
 
 exports.Container = Container;

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

@@ -14,21 +14,45 @@ var _FeaturesBar = require("../../molecules/FeaturesBar");
 var _AvatarAndValidation = require("../../molecules/AvatarAndValidation");
 
 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__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_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,
+    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__*/React.createElement("div", {
     className: "features-bar-container"
   }, /*#__PURE__*/React.createElement(_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__*/React.createElement(_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

@@ -19,25 +19,37 @@ var _react = require("react");
 
 var FullTabsMenu = function FullTabsMenu(_ref) {
   var tabsSections = _ref.tabsSections,
-      status = _ref.status,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? "" : _ref$status,
       profileImage = _ref.profileImage,
+      activeTab = _ref.activeTab,
       setActiveTab = _ref.setActiveTab,
-      setImageLayout = _ref.setImageLayout;
+      setImageLayout = _ref.setImageLayout,
+      saveDatasheets = _ref.saveDatasheets,
+      saveDescriptions = _ref.saveDescriptions,
+      updateImages = _ref.updateImages,
+      assignations = _ref.assignations;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       imagesSection = _useState2[0],
-      setImagesSection = _useState2[1];
+      setImagesSection = _useState2[1]; //console.log(status);
+
 
   return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_index.TabsMenu, {
     tabsSections: tabsSections,
     setImagesSection: setImagesSection,
     setActiveTab: setActiveTab
   }), /*#__PURE__*/React.createElement(_index2.StatusAsignationInfo, {
-    status: status,
+    status: status[activeTab],
+    activeTab: activeTab,
     image: profileImage,
     setImageLayout: setImageLayout,
-    imagesSection: imagesSection
+    imagesSection: imagesSection,
+    saveDatasheets: saveDatasheets,
+    saveDescriptions: saveDescriptions,
+    updateImages: updateImages,
+    assignationsImages: assignations[activeTab]
   }));
 };
 

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

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n\n  & + * {\n    margin-top: 15px;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n\n  & + * {\n    margin-top: 14px;\n  }\n"])));
 
 exports.Container = Container;