contentoh-components-library 21.0.71 → 21.0.74

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;

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

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

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

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

package/dist/components/organisms/InputGroup/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  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

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

@@ -23,18 +23,19 @@ var _ValidationPanel = require("../../atoms/ValidationPanel");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
-var _data = require("../../../global-files/data");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProductImageModal = function ProductImageModal(_ref) {
+  var _images$values$active, _images$values$active2, _images$values$active3;
+
   var _ref$images = _ref.images,
       images = _ref$images === void 0 ? [] : _ref$images,
       headerInfo = _ref.headerInfo,
       validation = _ref.validation,
-      setShowModal = _ref.setShowModal;
+      setShowModal = _ref.setShowModal,
+      sendToFacilitator = _ref.sendToFacilitator;
 
-  var _useState = (0, _react.useState)((0, _data.getImage)(images === null || images === void 0 ? void 0 : images.values[0], 710, 710)),
+  var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       activeImage = _useState2[0],
       setActiveImage = _useState2[1];
@@ -67,8 +68,8 @@ var ProductImageModal = function ProductImageModal(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "modal-image-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
-          img: activeImage.src,
-          altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+          img: "https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + (images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.srcDB),
+          altText: images === null || images === void 0 ? void 0 : (_images$values$active2 = images.values[activeImage]) === null || _images$values$active2 === void 0 ? void 0 : _images$values$active2.name,
           imageType: "expanded-modal-image"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -90,13 +91,15 @@ var ProductImageModal = function ProductImageModal(_ref) {
             }), showValidationPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ValidationPanel.ValidationPanel, {
               id: "validation-panel",
               setOptionClicked: setButtonType,
-              setShowValidationPanel: setShowValidationPanel
+              setShowValidationPanel: setShowValidationPanel,
+              sendToFacilitator: sendToFacilitator
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
-            imageData: activeImage.data,
+            imageData: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.data,
             headerInfo: headerInfo,
-            activeImage: activeImage,
-            darkMode: true
+            activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
+            darkMode: true,
+            lists: images
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelector.ImageSelector, {
           images: images,

package/dist/components/organisms/ProductImageModal/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: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  left: 0;\n  top: 0;\n  z-index: 100;\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
 
 exports.Container = Container;

package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProviderProductEditionDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/pages/ProviderProductEdition",
+  component: _index.ProviderProductEdition
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProviderProductEdition, (0, _objectSpread2.default)({}, args));
+};
+
+var ProviderProductEditionDefault = Template.bind({});
+exports.ProviderProductEditionDefault = ProviderProductEditionDefault;
+ProviderProductEditionDefault.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false
+  },
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhZWQzMzEyZi1kZGYyLTQ2ZTAtOTgyNS1lODU2ZDM0ODYwNzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1Mzk1NzQ3MiwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NTM5NjEwNzIsImlhdCI6MTY1Mzk1NzQ3MiwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Fq4bWu0irZ3NHDU2MOXBJZaqQlzbXwrS6YY2_GBG0Nq8z5gNmKr8LFcjBvD1mYj6sO6BHPrh0yzAOtlQMVOFAeXXRZ524Um_rpECWKDUD8IjCKUIgbqQos_YB-09zetlsmIE6Pd29UxDuwrN7zWqzzTuKGUnNhfC8uS3_tG9fi4TxNY0TY8Jwuk9uo0LlOjiIb28mL06B98EWTFbuze5J0AADfa_p0zEqYMyAIn4kYouIOt8eqOVFfZ4piEJMMcbwwaPwVTpy8e6FSLHrQeCa054ZJCvdGQLKhN1Ceue77voFINI9umnEIExAp_w2miOwzJjuk6E1ALf2LWo-Rz_qg",
+  articleId: 238,
+  category: 846,
+  version: 2,
+  productSelected: {
+    id_article: 32,
+    id_category: "781",
+    name: "PRODUCTO 10",
+    upc: "PRUEBA10",
+    timestamp: "2021-11-09T23:22:36.000Z",
+    status: "NULL",
+    categoryName: "TECNOLOGÍA Y ELECTRÓNICA|VIDEO|DVD Y BLU-RAY",
+    asignations: [],
+    version: 2,
+    version_status: "AC",
+    retailersAvailable: [{
+      id: 2,
+      name: "Walmart Mercancías Generales",
+      country: "México",
+      id_region: 1,
+      active: 1
+    }, {
+      id: 3,
+      name: "Sam´s Club",
+      country: "México",
+      id_region: 1,
+      active: 1
+    }],
+    missing: {}
+  },
+  productToEdit: {
+    idCategory: "781",
+    ArticleId: 32,
+    product: [{
+      id_article: 32,
+      id_category: "781",
+      name: "PRODUCTO 10",
+      upc: "PRUEBA10",
+      timestamp: "2021-11-09T23:22:36.000Z",
+      status: "NULL",
+      categoryName: "TECNOLOGÍA Y ELECTRÓNICA|VIDEO|DVD Y BLU-RAY",
+      asignations: [],
+      version: 2,
+      version_status: "AC",
+      retailersAvailable: [{
+        id: 2,
+        name: "Walmart Mercancías Generales",
+        country: "México",
+        id_region: 1,
+        active: 1
+      }, {
+        id: 3,
+        name: "Sam´s Club",
+        country: "México",
+        id_region: 1,
+        active: 1
+      }],
+      missing: {}
+    }]
+  },
+  location: {
+    product: {
+      articleId: 109485,
+      versionId: 3
+    },
+    state: {
+      origin: "RequestWithContentoh"
+    }
+  },
+  user: {
+    id_user: 28,
+    name: "Proveedor",
+    last_name: "Colgate",
+    email: "ilopez@contentoh.com",
+    position: "Prueba Admin",
+    telephone: "+523111366336",
+    country: "México",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
+    birth_Date: null,
+    about_me: null,
+    zip_code: null,
+    address: null,
+    job: null,
+    id_stripe: "cus_KuEt6R6vwmN09f",
+    id_role: 0,
+    active: 1,
+    is_retailer: 0,
+    membership: {
+      id: 38,
+      start_date: "2022-01-18T17:25:35.000Z",
+      end_date: "2023-01-18T17:25:35.000Z",
+      planID: 8,
+      plan: "prod_KtlhECVSFG2iro",
+      name: "Plan Pro",
+      user_limit: "20",
+      products_limit: "5000",
+      type: "Enterprise"
+    },
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1653957474326"
+  }
+};