contentoh-components-library 21.0.72 → 21.0.75

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: [["AP", "AC", "RC"].includes(status) && /*#__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",
@@ -82,16 +96,19 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
           setImageLayout && setImageLayout(!layout);
         }
       })]
-    }), /*#__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 +137,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

@@ -19,6 +19,18 @@ var TagAndInput = function TagAndInput(_ref) {
       value = _ref.value,
       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,
+      maxChar = _ref.maxChar,
       required = _ref.required;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
@@ -30,7 +42,19 @@ var TagAndInput = function TagAndInput(_ref) {
       inputId: inputId,
       inputType: inputType,
       inputValue: value,
+      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,
       required: required
     })]
   }, "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,44 @@ 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,
+      showValidationButtons = _ref.showValidationButtons,
+      approve = _ref.approve,
+      reject = _ref.reject;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductNameHeader.ProductNameHeader, {
-      productName: headerData === null || headerData === void 0 ? void 0 : headerData.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
+      productName: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article = headerData.article) === null || _headerData$article === void 0 ? void 0 : _headerData$article.name) || (headerData === null || headerData === void 0 ? void 0 : headerData.name),
+      statusType: (headerData === null || headerData === void 0 ? void 0 : headerData.version_status) || (headerData === null || headerData === void 0 ? void 0 : headerData.status),
+      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) || (headerData === null || headerData === void 0 ? void 0 : headerData.timestamp)).toLocaleDateString()
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "features-bar-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FeaturesBar.FeaturesBar, {
-        features: 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) || (headerData === null || headerData === void 0 ? void 0 : headerData.categoryName)
+        }, {
+          feature: "Prov",
+          value: headerData === null || headerData === void 0 ? void 0 : (_headerData$article4 = headerData.article) === null || _headerData$article4 === void 0 ? void 0 : _headerData$article4.company_name
+        }, {
+          feature: "UPC",
+          value: (headerData === null || headerData === void 0 ? void 0 : (_headerData$article5 = headerData.article) === null || _headerData$article5 === void 0 ? void 0 : _headerData$article5.upc) || (headerData === null || headerData === void 0 ? void 0 : headerData.upc)
+        }]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarAndValidation.AvatarAndValidation, {
+        retailers: (headerData === null || headerData === void 0 ? void 0 : headerData.retailers) || (headerData === null || headerData === void 0 ? void 0 : headerData.retailersAvailable),
         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,
+        showValidationButtons: showValidationButtons,
+        approve: approve,
+        reject: reject
       })]
     })]
   });

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/GlobalModal/index.js

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

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

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