contentoh-components-library 0.1.1 → 8.0.0

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;

package/dist/components/organisms/Fullplan/FullPlan.stories.js

@@ -22,19 +22,17 @@ exports.FullPlanDefault = FullPlanDefault;
 FullPlanDefault.args = {
   title: "Elige el número de proveedores",
   textGeneral: "Bienvido a nuestra plataforma de cadena, para continuar elige el número de proveedores que tiene tu cadena",
-  containerData: {
-    planSelection: [{
-      number: "300",
-      name: "Proveedores"
-    }, {
-      number: "1500",
-      name: "Proveedores"
-    }, {
-      number: "+3000",
-      name: "Proveedores"
-    }, {
-      number: "Ondemand",
-      name: "agrega proveedores a tu forma"
-    }]
-  }
+  containerData: [{
+    number: "300",
+    name: "Proveedores"
+  }, {
+    number: "1500",
+    name: "Proveedores"
+  }, {
+    number: "+3000",
+    name: "Proveedores"
+  }, {
+    number: "Ondemand",
+    name: "agrega proveedores a tu forma"
+  }]
 };

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

@@ -40,7 +40,7 @@ var FullPlan = function FullPlan(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "general-text"
   }, /*#__PURE__*/React.createElement("p", null, textGeneral)), /*#__PURE__*/React.createElement(_PlanSelection.PlanSelection, {
-    planSelection: containerData.planSelection,
+    planSelection: containerData,
     setbuttonActive: setbuttonActive
   }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
     buttonType: buttonActive ? "general-default-button" : "general-transparent-button",

package/dist/components/organisms/Fullplan/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  text-align: center;\n\n  .title {\n    text-align: center;\n    font-feature-settings: \"pnum\" on, \"lnum\" on;\n    h2 {\n      max-width: 350px;\n      margin: auto;\n    }\n  }\n  .general-text {\n    text-align: center;\n    font-feature-settings: \"pnum\" on, \"lnum\" on;\n    p {\n      color: ", ";\n      font-family: ", ";\n      font-size: 14px;\n      max-width: 390px;\n      margin: auto;\n    }\n  }\n"])), _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  height: 100%;\n  width: 100%;\n\n  .title {\n    text-align: center;\n    font-feature-settings: \"pnum\" on, \"lnum\" on;\n    h2 {\n      margin: auto;\n    }\n  }\n  .general-text {\n    text-align: center;\n    font-feature-settings: \"pnum\" on, \"lnum\" on;\n    p {\n      color: ", ";\n      font-family: ", ";\n      font-size: 14px;\n      margin: auto;\n    }\n  }\n"])), _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext);
 
 exports.Container = Container;

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,23 +11,83 @@ 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 ImageDataTable = function ImageDataTable(_ref) {
-  var headerInfo = _ref.headerInfo,
-      imageData = _ref.imageData,
-      activeImage = _ref.activeImage;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_TableHeader.TableHeader, {
-    headerInfo: headerInfo,
-    activeImage: activeImage
-  }), imageData === null || imageData === void 0 ? void 0 : imageData.map(function (attribute, index) {
-    return /*#__PURE__*/React.createElement(_TableRow.TableRow, {
-      key: index,
-      feature: attribute.feature,
-      value: attribute.value,
-      valueType: index < 2
-    });
-  }));
+  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;
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    darkMode: darkMode
+  }, /*#__PURE__*/React.createElement(_TableHeader.TableHeader, {
+    imagesStatus: imagesStatus,
+    activeImage: activeImage,
+    assignationsImages: assignationsImages
+  }), /*#__PURE__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "table-row-text",
+    text: "Tipo de toma"
+  }), /*#__PURE__*/React.createElement(_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__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "table-row-text",
+    text: "Tipo de empaque"
+  }), /*#__PURE__*/React.createElement(_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__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "table-row-text",
+    text: "Tipo de imagen"
+  }), /*#__PURE__*/React.createElement(_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__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "table-row-text",
+    text: "Formato"
+  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "table-row-text",
+    text: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext
+  })), /*#__PURE__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "table-row-text",
+    text: "Tama\xF1o de imagen"
+  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "table-row-text",
+    text: "".concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.width, "x").concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.height, "px")
+  })), 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__*/React.createElement(_styles2.Container, {
+      key: "row-" + index
+    }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+      headerType: "table-row-text",
+      text: attr === null || attr === void 0 ? void 0 : attr.name
+    }), /*#__PURE__*/React.createElement(_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
+        });
+      }
+    }));
+  })));
 };
 
 exports.ImageDataTable = ImageDataTable;

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

@@ -15,6 +15,12 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 340px;\n  padding: 10px;\n  border: 1px solid ", ";\n  border-radius: 3px;\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 340px;\n  padding: 10px;\n  border: 1px solid ", ";\n  border-radius: 3px;\n\n  .input-name-header,\n  .table-row-text {\n    color: ", ";\n  }\n  .gray-table-row {\n    background-color: ", ";\n  }\n"])), _variables.GlobalColors.s2, function (_ref) {
+  var darkMode = _ref.darkMode;
+  return darkMode && _variables.GlobalColors.s1;
+}, function (_ref2) {
+  var darkMode = _ref2.darkMode;
+  return darkMode && _variables.GlobalColors.s5;
+});
 
 exports.Container = Container;