contentoh-components-library 21.4.102 → 21.4.104

package/dist/components/pages/MultipleEdition/index.js

@@ -0,0 +1,257 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = require("../../organisms/Modal");
+
+var _EditionTabs = _interopRequireDefault(require("../../molecules/EditionTabs"));
+
+var _SelectV = require("../../molecules/SelectV2");
+
+var _Table = _interopRequireDefault(require("../../organisms/Table"));
+
+var _beenhere = _interopRequireDefault(require("../../../assets/images/Icons/beenhere.svg"));
+
+var _closeMagenta = _interopRequireDefault(require("../../../assets/images/Icons/close-magenta.svg"));
+
+var _saveWhite = _interopRequireDefault(require("../../../assets/images/Icons/save-white.svg"));
+
+var _styles = require("./styles");
+
+var _acceptIcon = _interopRequireDefault(require("../../../assets/images/generalButton/acceptIcon.svg"));
+
+var _rejectIcon = _interopRequireDefault(require("../../../assets/images/generalButton/rejectIcon.svg"));
+
+var _utils = require("./utils");
+
+var _saveData = _interopRequireDefault(require("./saveData"));
+
+var _ValidationPanel = require("../../atoms/ValidationPanel");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _material = require("@mui/material");
+
+var _TagAndInput = require("../../molecules/TagAndInput");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function MultipleEdition(_ref) {
+  var articles = _ref.articles,
+      versions = _ref.versions,
+      onClose = _ref.onClose,
+      token = _ref.token;
+
+  var _useState = (0, _react.useState)("description"),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      section = _useState2[0],
+      setSection = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    articleId: "",
+    attributeId: "",
+    retailerId: ""
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      attributeSelected = _useState4[0],
+      setAttributeSelected = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      attributesReviewed = _useState6[0],
+      setAttributesReviewed = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      showRejectModal = _useState8[0],
+      setShowRejectModal = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      showValidationPanel = _useState10[0],
+      setShowValidationPanel = _useState10[1];
+
+  var closeValidationPanel = function closeValidationPanel(e) {
+    if (!e.target.closest("#validation-panel") || e.target.closest(".validation-option") && showValidationPanel) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+
+  var _useState11 = (0, _react.useState)({
+    columns: [],
+    data: []
+  }),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      currentData = _useState12[0],
+      setCurrentData = _useState12[1];
+
+  var _useReducer = (0, _react.useReducer)(_utils.dataReducer, {
+    description: {
+      data: []
+    },
+    datasheet: {
+      data: []
+    },
+    images: {
+      data: []
+    }
+  }),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      dataServices = _useReducer2[0],
+      setDataServices = _useReducer2[1];
+
+  var _useState13 = (0, _react.useState)(),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      modalFromTable = _useState14[0],
+      setModalFromTable = _useState14[1];
+
+  var _useReducer3 = (0, _react.useReducer)(_utils.modalReducer, {
+    showModal: false
+  }),
+      _useReducer4 = (0, _slicedToArray2.default)(_useReducer3, 2),
+      modal = _useReducer4[0],
+      setModal = _useReducer4[1];
+
+  function callbackToInitData() {
+    (0, _utils.initData)(setDataServices, articles, versions);
+  }
+
+  (0, _react.useEffect)(function () {
+    callbackToInitData();
+  }, []);
+  (0, _react.useEffect)(function () {
+    var _setDataColumns = (0, _utils.setDataColumns)(section, dataServices[section], token, setModalFromTable, setDataServices, setModal, setShowValidationPanel, setAttributeSelected, setShowRejectModal, setAttributesReviewed, showValidationPanel, attributeSelected, attributesReviewed),
+        _setDataColumns2 = (0, _slicedToArray2.default)(_setDataColumns, 2),
+        columns = _setDataColumns2[0],
+        data = _setDataColumns2[1];
+
+    setCurrentData({
+      columns: columns,
+      data: data
+    });
+  }, [section, dataServices, attributeSelected, showValidationPanel, attributesReviewed]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "tabs",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditionTabs.default, {
+            getSection: setSection
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectV.SelectV2, {
+          items: _utils.optionsSelect,
+          triggerType: "click",
+          selectButton: {
+            type: "whiteS3",
+            label: "Validación masiva",
+            size: 12
+          },
+          typeSelectItems: "labelOnly",
+          borderType: "oval",
+          onChange: function onChange(selectedItems) {
+            console.log(selectedItems);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _beenhere.default,
+          alt: "beenhere"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "action_buttons",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _saveWhite.default,
+          alt: "Guardar",
+          onClick: function onClick() {
+            var params = {
+              section: section,
+              data: dataServices[section],
+              token: token,
+              callbackToInitData: callbackToInitData,
+              setModal: setModal
+            };
+            (0, _saveData.default)(params);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _closeMagenta.default,
+          alt: "Cerrar",
+          onClick: function onClick() {
+            return onClose && onClose();
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "table",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default, {
+          withCheckbox: true,
+          columns: currentData.columns,
+          data: currentData.data
+        })
+      })]
+    }), modalFromTable, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)({}, modal)), showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      title: "Agregar mensaje de rechazo",
+      show: showRejectModal,
+      customComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "textarea",
+        inputId: "modal-message-box",
+        index: 0,
+        color: "white"
+      }),
+      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "white",
+        label: "Cancelar",
+        size: 12,
+        onClick: function onClick() {
+          setShowRejectModal(false);
+        }
+      }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "pink",
+        label: "Aceptar",
+        size: 12,
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+          var body, messages;
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  body = document.querySelector("#modal-message-box .ql-container .ql-editor > p").innerHTML;
+                  messages = [{
+                    type: "message",
+                    value: body === null || body === void 0 ? void 0 : body.replace(/<.*?\/?>/gm, "")
+                  }];
+                  _context.next = 4;
+                  return createComment(messages, activeRetailer.id);
+
+                case 4:
+                  validatedAll ? validateAll("R") : sendToEvaluation("R");
+                  setShowRejectModal(false);
+
+                case 6:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }))
+      }, "btn-Aceptar")]
+    })]
+  });
+}
+
+var _default = MultipleEdition;
+exports.default = _default;

package/dist/components/pages/MultipleEdition/saveData.js

@@ -0,0 +1,200 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = saveData;
+exports.deleteImage = deleteImage;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _awsSdk = _interopRequireDefault(require("aws-sdk"));
+
+var _uuid = require("uuid");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
+var REGION = "us-east-1";
+
+_awsSdk.default.config.update({
+  accessKeyId: process.env.REACT_APP_KUTS3,
+  secretAccessKey: process.env.REACT_APP_AKUTS3
+});
+
+var myBucket = new _awsSdk.default.S3({
+  params: {
+    Bucket: S3_BUCKET
+  },
+  region: REGION
+});
+
+function saveData(_x) {
+  return _saveData.apply(this, arguments);
+}
+
+function _saveData() {
+  _saveData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(params) {
+    var section, data, token, callbackToInitData, setModal;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            section = params.section, data = params.data, token = params.token, callbackToInitData = params.callbackToInitData, setModal = params.setModal;
+
+            if (!(section === "images")) {
+              _context.next = 7;
+              break;
+            }
+
+            _context.next = 4;
+            return saveImagesData(data, token);
+
+          case 4:
+            if (!_context.sent) {
+              _context.next = 7;
+              break;
+            }
+
+            callbackToInitData();
+            setModal({
+              type: "saved successfully",
+              functions: {
+                setModal: setModal
+              },
+              payload: {
+                service: "imágenes"
+              }
+            }); // aquí va modal de que todo salío bien y actualiza la data
+
+          case 7:
+            return _context.abrupt("return", false);
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _saveData.apply(this, arguments);
+}
+
+function saveImagesData(_x2, _x3) {
+  return _saveImagesData.apply(this, arguments);
+}
+
+function _saveImagesData() {
+  _saveImagesData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(articles, token) {
+    var imagesToUpdate, promiseArray, res;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            imagesToUpdate = [];
+            articles.data.forEach(function (article) {
+              var images = article.images,
+                  version = article.version;
+              var imagesToAdd = Object.values(images).filter(function (f) {
+                return f.value && !f.value.src.startsWith("id-");
+              });
+
+              if (imagesToAdd.length > 0) {
+                imagesToUpdate.push.apply(imagesToUpdate, (0, _toConsumableArray2.default)(imagesToAdd.map(function (e) {
+                  return (0, _objectSpread2.default)((0, _objectSpread2.default)({
+                    imageId: e.imageId
+                  }, e.value), {}, {
+                    version: version,
+                    uuid: (0, _uuid.v4)()
+                  });
+                })));
+              }
+            });
+            promiseArray = imagesToUpdate.map(function (e) {
+              var src = e.src,
+                  articleId = e.articleId,
+                  imageId = e.imageId,
+                  uuid = e.uuid,
+                  ext = e.ext,
+                  version = e.version;
+              var file = Buffer.from(src.replace(/^data:image\/\w+;base64,/, ""), "base64");
+              var params = {
+                ACL: "public-read",
+                Body: file,
+                Bucket: S3_BUCKET,
+                Key: "id-".concat(articleId, "/").concat(version, "/").concat(imageId, "-").concat(uuid, ".").concat(ext)
+              };
+              return myBucket.putObject(params).promise();
+            });
+            _context2.next = 5;
+            return Promise.all(promiseArray);
+
+          case 5:
+            console.log("finish upload");
+            _context2.next = 8;
+            return _axios.default.put(process.env.REACT_APP_BASE_UPDATE_IMAGES_ENDPOINT, imagesToUpdate.map(function (e) {
+              delete e.src;
+              return e;
+            }), {
+              headers: {
+                Authorization: token
+              }
+            });
+
+          case 8:
+            res = _context2.sent;
+
+            if (!(res.data.statusCode !== 200)) {
+              _context2.next = 11;
+              break;
+            }
+
+            return _context2.abrupt("return", false);
+
+          case 11:
+            return _context2.abrupt("return", true);
+
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _saveImagesData.apply(this, arguments);
+}
+
+function deleteImage(_x4, _x5, _x6) {
+  return _deleteImage.apply(this, arguments);
+}
+
+function _deleteImage() {
+  _deleteImage = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(data, version, token) {
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 2;
+            return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), data, {
+              headers: {
+                Authorization: token
+              }
+            });
+
+          case 2:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  }));
+  return _deleteImage.apply(this, arguments);
+}

package/dist/components/pages/MultipleEdition/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  display: grid;\n  grid-template-columns: 75% 25%;\n  grid-template-rows: 75px 1fr;\n  grid-template-areas:\n    \"tabs action_buttons\"\n    \"table table\";\n  margin: 0 30px;\n\n  .tabs {\n    grid-area: tabs;\n    display: flex;\n    align-items: center;\n    gap: 0 10px;\n  }\n  .action_buttons {\n    grid-area: action_buttons;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: 0 10px;\n    & > * {\n      cursor: pointer;\n    }\n  }\n  .table {\n    grid-area: table;\n    background: red;\n    height: 100%;\n    font-family: Raleway;\n  }\n  \n  .buttons-container{\n    background: white;\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ", ";\n    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);\n    border-radius: 3px;\n    position: absolute;\n    top: -10%;\n    z-index: 100;\n  }\n\n  button {\n    width: 15%;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n\n    & + * {\n      margin-top: 8px;\n    }\n  }\n\n  td{\n    margin:0;\n  }\n  \n"])), _variables.GlobalColors.s3);
+
+exports.Container = Container;