contentoh-components-library 6.0.0 → 7.0.0

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;

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

@@ -1,42 +1,29 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImagePreviewer = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
 var _styles = require("./styles");
 
 var _EditionActiveImage = require("../../molecules/EditionActiveImage");
 
 var _ImageSelector = require("../../molecules/ImageSelector");
 
-var _react = require("react");
-
 var ImagePreviewer = function ImagePreviewer(_ref) {
   var _ref$imagesArray = _ref.imagesArray,
       imagesArray = _ref$imagesArray === void 0 ? [] : _ref$imagesArray,
       activeImage = _ref.activeImage,
-      setActiveImage = _ref.setActiveImage;
-
-  var _useState = (0, _react.useState)(activeImage),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      imageSelected = _useState2[0],
-      setImageSelected = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    setActiveImage && setActiveImage(imageSelected);
-  }, [imageSelected]);
+      setActiveImage = _ref.setActiveImage,
+      setShowModal = _ref.setShowModal;
   return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_EditionActiveImage.EditionActiveImage, {
-    img: imageSelected === null || imageSelected === void 0 ? void 0 : imageSelected.img,
-    altText: imageSelected === null || imageSelected === void 0 ? void 0 : imageSelected.alt
+    img: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
+    altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+    setShowModal: setShowModal
   }), /*#__PURE__*/React.createElement(_ImageSelector.ImageSelector, {
     images: imagesArray,
-    setActiveImage: setImageSelected
+    setActiveImage: setActiveImage
   }));
 };
 

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

@@ -16,21 +16,66 @@ var InputGroup = function InputGroup(_ref) {
 
   var _ref$inputGroup = _ref.inputGroup,
       inputGroup = _ref$inputGroup === void 0 ? {} : _ref$inputGroup,
-      activeSection = _ref.activeSection;
+      activeSection = _ref.activeSection,
+      _ref$dataInputs = _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) {
+      case "Booleano":
+        return "checkbox";
+
+      case "Numérico":
+        return "number";
+
+      default:
+        return "text";
+    }
+  };
+
   return /*#__PURE__*/React.createElement(_styles.Container, {
     className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout"
   }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
     headerType: "retailer-name-header",
-    text: inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.name
+    text: inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup
   }), /*#__PURE__*/React.createElement("div", {
     className: "inputs-container"
   }, inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
-    return /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
-      key: index,
-      inputType: activeSection === "Ficha técnica" ? "text" : "textarea",
-      label: input.label,
-      value: input.value,
-      inputPlaceHolder: input.placeholder
+    var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6;
+
+    return activeSection === "Ficha técnica" ? /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      key: index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value),
+      inputId: (_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id,
+      version: version,
+      inputType: inputTypeValue((_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.type),
+      label: (_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.name,
+      value: (_dataInputs$input5 = dataInputs[input]) === null || _dataInputs$input5 === void 0 ? void 0 : _dataInputs$input5.value,
+      inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
+      articleId: articleId,
+      isRequired: (_dataInputs$input6 = dataInputs[input]) === null || _dataInputs$input6 === void 0 ? void 0 : _dataInputs$input6.required,
+      updatedDatasheets: updatedDatasheets,
+      setUpdatedDatasheets: setUpdatedDatasheets
+    }) : /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+      key: index + "-" + (input === null || input === void 0 ? void 0 : input.value),
+      inputId: input === null || input === void 0 ? void 0 : input.id,
+      index: index,
+      inputType: "textarea",
+      label: input === null || input === void 0 ? void 0 : input.name,
+      value: input === null || input === void 0 ? void 0 : input.value,
+      isRequired: input.required,
+      inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
+      updatedDescriptions: updatedDescriptions,
+      setUpdatedDescriptions: setUpdatedDescriptions,
+      articleId: articleId,
+      version: version,
+      dinamicHeight: dinamicHeight
     });
   })));
 };

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/ProductImageModal.stories.js

@@ -21,125 +21,127 @@ var ProductImageModalDefault = Template.bind({});
 exports.ProductImageModalDefault = ProductImageModalDefault;
 ProductImageModalDefault.args = {
   headerInfo: {},
-  imagesArray: [{
-    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-    alt: "img",
-    name: "Hero",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
-    alt: "img",
-    name: "Hero2",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
-    alt: "img",
-    name: "Hero3",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
-    alt: "img",
-    name: "Hero4",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "https://memegenerator.net/img/images/72798198.jpg",
-    alt: "img",
-    name: "Hero5",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
-    }]
-  }, {
-    img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
-    alt: "img",
-    name: "Hero6",
-    data: [{
-      feature: "Tamaño de imagen",
-      value: "1000x10000"
-    }, {
-      feature: "Formato",
-      value: "jpg"
-    }, {
-      feature: "Resolución",
-      value: "300dpi"
-    }, {
-      feature: "Tipo de imagen",
-      value: "Tipo de imagen"
-    }, {
-      feature: "Identificador",
-      value: "F261"
+  images: {
+    values: [{
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+      name: "Hero",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+      alt: "img",
+      name: "Hero2",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+      alt: "img",
+      name: "Hero3",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+      alt: "img",
+      name: "Hero4",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://memegenerator.net/img/images/72798198.jpg",
+      alt: "img",
+      name: "Hero5",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+      alt: "img",
+      name: "Hero6",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
     }]
-  }]
+  }
 };

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

@@ -23,13 +23,20 @@ var _ValidationPanel = require("../../atoms/ValidationPanel");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
+var _data = require("../../../global-files/data");
+
 var ProductImageModal = function ProductImageModal(_ref) {
-  var _ref$imagesArray = _ref.imagesArray,
-      imagesArray = _ref$imagesArray === void 0 ? [] : _ref$imagesArray,
+  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;
+      validation = _ref.validation,
+      setShowModal = _ref.setShowModal,
+      sendToFacilitator = _ref.sendToFacilitator,
+      approveRejectButtons = _ref.approveRejectButtons;
 
-  var _useState = (0, _react.useState)(imagesArray.length > 0 && imagesArray[0]),
+  var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       activeImage = _useState2[0],
       setActiveImage = _useState2[1];
@@ -56,13 +63,16 @@ var ProductImageModal = function ProductImageModal(_ref) {
       document.addEventListener("click", closeValidationPanel, false);
     }
   }, [showValidationPanel]);
+  (0, _react.useEffect)(function () {
+    console.log(images === null || images === void 0 ? void 0 : images.values[activeImage]);
+  }, [activeImage]);
   return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
     className: "modal-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-image-container"
   }, /*#__PURE__*/React.createElement(_ProductImage.ProductImage, {
-    img: activeImage === null || activeImage === void 0 ? void 0 : activeImage.img,
-    altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+    img: images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.src,
+    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__*/React.createElement("div", {
     className: "modal-data-container"
@@ -70,23 +80,29 @@ var ProductImageModal = function ProductImageModal(_ref) {
     className: "validation-and-table-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "validation-panel"
-  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+  }, approveRejectButtons("images") && /*#__PURE__*/React.createElement(_GeneralButton.Button, {
     buttonType: "circular-button ".concat(buttonType),
     onClick: function onClick() {
       return setShowValidationPanel(true);
     }
   }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: "close-button"
+    buttonType: "close-button",
+    onClick: function onClick() {
+      setShowModal(false);
+    }
   }), showValidationPanel && /*#__PURE__*/React.createElement(_ValidationPanel.ValidationPanel, {
     id: "validation-panel",
     setOptionClicked: setButtonType,
-    setShowValidationPanel: setShowValidationPanel
+    setShowValidationPanel: setShowValidationPanel,
+    sendToFacilitator: sendToFacilitator
   })), /*#__PURE__*/React.createElement(_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
+    activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
+    darkMode: true,
+    lists: images
   })), /*#__PURE__*/React.createElement(_ImageSelector.ImageSelector, {
-    images: imagesArray,
+    images: images,
     setActiveImage: setActiveImage,
     modalSelector: true
   }))));