contentoh-components-library 21.0.11 → 21.0.14

package/dist/components/pages/RetailerProductEdition/styles.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n    }\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        overflow: auto;\n      }\n\n      .image-services {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 179px);\n        column-gap: 15px;\n        row-gap: 15px;\n      }\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
 });

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

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.VerificationCodeResetPasswordDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
 var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
@@ -17,8 +15,6 @@ var _login = _interopRequireDefault(require("../../../assets/images/carouselImag
 
 var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/pages/VerificationCodeResetPassword",
   component: _index.VerificationCodeResetPassword
@@ -26,7 +22,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.VerificationCodeResetPassword, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.VerificationCodeResetPassword, args);
 };
 
 var VerificationCodeResetPasswordDefault = Template.bind({});

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

@@ -29,8 +29,6 @@ var _GeneralButton = require("../../atoms/GeneralButton");
 
 var _utils = require("./utils");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var VerificationCodeResetPassword = function VerificationCodeResetPassword(_ref) {
   var _ref$imageArrayCarous = _ref.imageArrayCarousel,
       imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
@@ -51,71 +49,62 @@ var VerificationCodeResetPassword = function VerificationCodeResetPassword(_ref)
   (0, _react.useEffect)(function () {
     setInputCodeVerificationAll(document.querySelectorAll("[id^='verificationCodeInput']"));
   }, []);
-  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  var loginRight = [/*#__PURE__*/React.createElement(_LogoImage.LogoImage, {
+    key: "1"
+  }), /*#__PURE__*/React.createElement("div", {
     className: "credenciales",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-      fontFamily: _variables.FontFamily.AvenirNext,
-      color: _variables.GlobalColors.s5,
-      text: "Ingresa tus credenciales"
-    })
-  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    key: "2"
+  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    text: "Ingresa tus credenciales"
+  })), /*#__PURE__*/React.createElement("div", {
     className: "user",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-      text: "Ingresa el código de verificación enviado a:",
-      headerType: "input-name-header"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "verification-code",
-      children: inputPositions.map(function (position) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInput.GeneralInput, {
-          inputId: "verificationCodeInput".concat(position),
-          inputType: "text",
-          inputPlaceholder: "X",
-          validateInput: _utils.validateInput,
-          inputsArray: inputCodeVerificationAll,
-          position: position,
-          maxLength: "1"
-        });
-      })
-    }), emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Ingrese su c\xF3digo de verificaci\xF3n"
-    })]
-  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "3"
+  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    text: "Ingresa el código de verificación enviado a:",
+    headerType: "input-name-header"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "verification-code"
+  }, inputPositions.map(function (position) {
+    return /*#__PURE__*/React.createElement(_GeneralInput.GeneralInput, {
+      inputId: "verificationCodeInput".concat(position),
+      inputType: "text",
+      inputPlaceholder: "X",
+      validateInput: _utils.validateInput,
+      inputsArray: inputCodeVerificationAll,
+      position: position,
+      maxLength: "1"
+    });
+  })), emptyVerificationCode && /*#__PURE__*/React.createElement("label", null, "Ingrese su c\xF3digo de verificaci\xF3n")), /*#__PURE__*/React.createElement("div", {
     className: "resend-code",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: "Reenviar c\xF3digo de verificaci\xF3n"
-    })
-  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "4"
+  }, /*#__PURE__*/React.createElement("p", null, "Reenviar c\xF3digo de verificaci\xF3n")), /*#__PURE__*/React.createElement("div", {
     className: "button-center",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-      buttonType: "general-default-button",
-      label: "Enviar",
-      onClick: function onClick(e) {
-        return (0, _utils.validate)(inputCodeVerificationAll, setEmptyVerificationCode);
-      }
-    })
-  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    key: "5"
+  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "general-default-button",
+    label: "Enviar",
+    onClick: function onClick(e) {
+      return (0, _utils.validate)(inputCodeVerificationAll, setEmptyVerificationCode);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
     className: "reset-password",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: "Regresar..."
-    })
-  }, "6")];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "home-retailer",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselImagesLogin.CarouselImagesLogin, {
-        panelImg: imageArrayCarousel,
-        panelText: textCarousel,
-        panelColor: backogroundColorCarousel
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "home-login-retailer",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        componentsArray: loginRight,
-        panelType: "home-login",
-        panelColor: _variables.GlobalColors.white
-      })
-    })]
-  });
+    key: "6"
+  }, /*#__PURE__*/React.createElement("p", null, "Regresar..."))];
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "home-retailer"
+  }, /*#__PURE__*/React.createElement(_CarouselImagesLogin.CarouselImagesLogin, {
+    panelImg: imageArrayCarousel,
+    panelText: textCarousel,
+    panelColor: backogroundColorCarousel
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "home-login-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: loginRight,
+    panelType: "home-login",
+    panelColor: _variables.GlobalColors.white
+  })));
 };
 
 exports.VerificationCodeResetPassword = VerificationCodeResetPassword;

package/dist/global-files/data.js

@@ -5,46 +5,66 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRetailerServices = exports.getProfilePicture = exports.getPercentage = exports.getImage = exports.fetchUsers = void 0;
+exports.getRetailerServices = exports.getImage = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 
 var _axios = _interopRequireDefault(require("axios"));
 
 var _jsBase = require("js-base64");
 
-var _uuid = require("uuid");
+var _defaultUpdate = _interopRequireDefault(require("../assets/images/defaultImages/defaultUpdate.png"));
 
 var getRetailerServices = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId, category, version) {
-    var _images$values;
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var _images$attrForImgs, _images$attrForImgs$g;
 
-    var responseArray, datasheets, descriptions, images;
+    var responseArray, datasheets, descriptions, images, code;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             _context.next = 2;
-            return Promise.all([_axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT, "?idCategory=").concat(category, "&articleId=").concat(articleId, "&version=").concat(version)), _axios.default.get("".concat(process.env.REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT, "?idCategory=").concat(category, "&articleId=").concat(articleId, "&version=").concat(version)), _axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT, "?idCategory=").concat(category, "&articleId=").concat(articleId, "&version=").concat(version))]);
+            return Promise.all([_axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT, "?idCategory=846&articleId=238&version=2")), _axios.default.get("".concat(process.env.REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT, "?idCategory=846&articleId=238&version=2")), _axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT, "?idCategory=846&articleId=238&version=2"))]);
 
           case 2:
             responseArray = _context.sent;
             datasheets = JSON.parse(responseArray[0].data.body).data;
             descriptions = JSON.parse(responseArray[1].data.body).data;
             images = JSON.parse(responseArray[2].data.body).data;
-            images.values = images === null || images === void 0 ? void 0 : (_images$values = images.values) === null || _images$values === void 0 ? void 0 : _images$values.map(function (value) {
-              value.name = images.inputs.find(function (e) {
+            code = images === null || images === void 0 ? void 0 : (_images$attrForImgs = images.attrForImgs) === null || _images$attrForImgs === void 0 ? void 0 : (_images$attrForImgs$g = _images$attrForImgs.general[0]) === null || _images$attrForImgs$g === void 0 ? void 0 : _images$attrForImgs$g.value;
+            images === null || images === void 0 ? void 0 : images.values.map(function (value) {
+              value.imageName = images.inputs.filter(function (e) {
                 return e.id === value.image_id;
-              }).name;
-              return getImage(value);
+              })[0].name;
+              value.data = [{
+                feature: "Tipo de empaque",
+                value: images === null || images === void 0 ? void 0 : images.imagePackagingType[(value === null || value === void 0 ? void 0 : value.packing_type) - 1].name
+              }, {
+                feature: "Tipo de imagen",
+                value: images === null || images === void 0 ? void 0 : images.imageType.filter(function (e) {
+                  return value.image_type == e.id;
+                })[0].name
+              }, {
+                feature: "Código de Fabricante",
+                value: code
+              }, {
+                feature: "Formato",
+                value: value.src.split(".")[1]
+              }, {
+                feature: "Tamaño de imagen",
+                value: "".concat(value.width, "x").concat(value.height)
+              }, {
+                feature: "Subfijo de imagen",
+                value: ""
+              }];
+              return value;
             });
             return _context.abrupt("return", [datasheets, descriptions, images]);
 
-          case 8:
+          case 9:
           case "end":
             return _context.stop();
         }
@@ -52,29 +72,35 @@ var getRetailerServices = /*#__PURE__*/function () {
     }, _callee);
   }));
 
-  return function getRetailerServices(_x, _x2, _x3) {
+  return function getRetailerServices() {
     return _ref.apply(this, arguments);
   };
 }();
 
 exports.getRetailerServices = getRetailerServices;
 
-var getImage = function getImage(imageGeneral) {
-  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 250;
-  var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 250;
-
+var getImage = function getImage(imageGeneral, width, height) {
   try {
     var image = imageGeneral;
     var ext = image.src.split(".");
     var uuid = ext[0].split("-");
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, image), {}, {
+    return {
+      id: image.id,
+      image_id: image.image_id,
+      packing_type: +image.packing_type,
+      image_type: +image.image_type,
+      name: image.name,
+      imageName: image.imageName,
+      data: image.data,
       version: image.id_version,
+      width: image.width,
+      height: image.height,
       ext: ext[ext.length - 1],
       uuid: uuid.reduce(function (prevVal, currVal, idx) {
         if (idx < 2) return "";else return idx === 2 ? currVal : prevVal + "-" + currVal;
-      }, "") || (0, _uuid.v4)(),
+      }, "") || uuidv4(),
       srcDB: image.src,
-      src: image.image_id ? "https://d24s337exbt5zr.cloudfront.net/" + _jsBase.Base64.encode(JSON.stringify({
+      src: "https://d24s337exbt5zr.cloudfront.net/" + _jsBase.Base64.encode(JSON.stringify({
         bucket: process.env.REACT_APP_IMAGES_BUCKET,
         key: image.src,
         edits: {
@@ -90,177 +116,14 @@ var getImage = function getImage(imageGeneral) {
             }
           }
         }
-      })) : image.src
-    });
+      }))
+    };
   } catch (err) {
     console.log("err", err);
-    return imageGeneral["error"] = err;
+    return {
+      src: _defaultUpdate.default
+    };
   }
 };
 
-exports.getImage = getImage;
-
-var getPercentage = /*#__PURE__*/function () {
-  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-    var params,
-        func,
-        _args3 = arguments;
-    return _regenerator.default.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            params = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {};
-
-            func = /*#__PURE__*/function () {
-              var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-                var dataToSend;
-                return _regenerator.default.wrap(function _callee2$(_context2) {
-                  while (1) {
-                    switch (_context2.prev = _context2.next) {
-                      case 0:
-                        dataToSend = [];
-                        params.data.forEach(function (product) {
-                          params.data[0].retailers.forEach(function (retailer) {
-                            dataToSend.push(product.article ? {
-                              id_article: product.article.id_article,
-                              id_category: product.article.id_category,
-                              id_retailer: retailer.id,
-                              version: product.version,
-                              upc: product.article.upc,
-                              name: product.article.name,
-                              retailerName: retailer.name
-                            } : {
-                              id_article: product.product.id_article,
-                              id_category: product.product.id_category,
-                              id_retailer: retailer.id,
-                              version: product.product.version,
-                              upc: product.product.upc,
-                              name: product.product.name,
-                              retailerName: retailer.name
-                            });
-                          });
-                        });
-                        _context2.next = 4;
-                        return _axios.default.post(process.env.REACT_APP_VALID_EXPORT_ENDPOINT, {
-                          data: dataToSend
-                        }, {
-                          headers: {
-                            Authorization: sessionStorage.getItem("jwt")
-                          }
-                        }).then(function (response) {
-                          return response.data;
-                        }).catch(function (err) {
-                          return console.log(err, "Errror");
-                        });
-
-                      case 4:
-                        return _context2.abrupt("return", _context2.sent);
-
-                      case 5:
-                      case "end":
-                        return _context2.stop();
-                    }
-                  }
-                }, _callee2);
-              }));
-
-              return function func() {
-                return _ref3.apply(this, arguments);
-              };
-            }();
-
-            _context3.next = 4;
-            return func();
-
-          case 4:
-            return _context3.abrupt("return", _context3.sent);
-
-          case 5:
-          case "end":
-            return _context3.stop();
-        }
-      }
-    }, _callee3);
-  }));
-
-  return function getPercentage() {
-    return _ref2.apply(this, arguments);
-  };
-}();
-
-exports.getPercentage = getPercentage;
-
-var getProfilePicture = function getProfilePicture(userId, width, height) {
-  try {
-    return "https://d24s337exbt5zr.cloudfront.net/" + _jsBase.Base64.encode(JSON.stringify({
-      bucket: process.env.REACT_APP_IMAGES_PROFILE_BUCKET,
-      key: "id-".concat(userId, "/").concat(userId, ".png"),
-      edits: {
-        resize: {
-          width: width,
-          height: height,
-          fit: "contain",
-          background: {
-            r: 255,
-            g: 255,
-            b: 255,
-            alpha: 0
-          }
-        }
-      }
-    }));
-  } catch (err) {
-    console.log("err", err);
-    return defaultUpdate;
-  }
-};
-
-exports.getProfilePicture = getProfilePicture;
-
-var fetchUsers = /*#__PURE__*/function () {
-  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(auth) {
-    var usersPromises, usersGroups, header, usersResponse;
-    return _regenerator.default.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            usersPromises = [];
-            usersGroups = [];
-            header = {
-              headers: {
-                Authorization: auth
-              }
-            };
-            /**
-             * 7 will fetch all text specialists
-             * 8 will fetch all img specialists
-             * 4 will fetch all text facilitators
-             * 5 will fetch all img facilitators
-             * 6 will fetch all auditors
-             */
-
-            usersPromises.push(_axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=7"), header), _axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=8"), header), _axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=4"), header), _axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=5"), header), _axios.default.get("".concat(process.env.REACT_APP_USER_ENDPOINT, "?fetchRole=6"), header));
-            _context4.next = 6;
-            return Promise.all(usersPromises);
-
-          case 6:
-            usersResponse = _context4.sent;
-            usersResponse.forEach(function (item, i) {
-              usersGroups.push(item.data.data);
-            });
-            return _context4.abrupt("return", usersGroups);
-
-          case 9:
-          case "end":
-            return _context4.stop();
-        }
-      }
-    }, _callee4);
-  }));
-
-  return function fetchUsers(_x4) {
-    return _ref4.apply(this, arguments);
-  };
-}();
-
-exports.fetchUsers = fetchUsers;
+exports.getImage = getImage;

package/dist/global-files/variables.js

@@ -12,7 +12,6 @@ var GlobalColors = {
   s5: "#503D66",
   original_magenta: "#B12D84",
   secondary_magenta: "#BA0070",
-  rejected_status: "#D74DED",
   magenta_s2: "#E33AA9",
   original_purpura: "#603888",
   in_progress: "#ED9A4D",

package/package.json

@@ -1,29 +1,22 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.11",
+  "version": "21.0.14",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@storybook/addon-postcss": "^2.0.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "aws-sdk": "^2.1088.0",
     "axios": "^0.25.0",
     "babel-preset-react-app": "^10.0.1",
     "chart.js": "^3.7.1",
-    "draft-js": "^0.11.7",
-    "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
-    "react-chartjs-2": "^4.0.1",
+    "react-chartjs-2": "^4.1.0",
     "react-dom": "^17.0.2",
-    "react-draft-wysiwyg": "^1.14.7",
-    "react-dropzone": "^12.0.4",
     "react-image-fallback": "^8.0.0",
-    "react-quill": "^1.3.5",
     "styled-components": "^5.3.3",
-    "uuid": "^8.3.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -56,24 +49,17 @@
         {
           "absoluteRuntime": false
         }
-      ],
-      "@babel/preset-env",
-      [
-        "@babel/preset-react",
-        {
-          "runtime": "automatic"
-        }
       ]
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
+    "@babel/cli": "^7.17.0",
     "@babel/core": "^7.16.0",
     "@storybook/addon-actions": "^6.4.1",
     "@storybook/addon-essentials": "^6.4.1",
     "@storybook/addon-links": "^6.4.1",
     "@storybook/react": "^6.4.1",
-    "auto": "^10.36.5",
+    "auto": "^10.32.6",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.3.3",
     "cross-env": "^7.0.3",
@@ -81,7 +67,7 @@
   },
   "description": "contentoh components packed library.",
   "main": "dist/index.js",
-  "repository": "https://git@github.com:Content-oh/components-library.git",
+  "repository": "git@github.com:Content-oh/components-library.git",
   "author": "asael06 <asael.mb@hotmail.com>",
   "license": "MIT"
 }

package/src/assets/images/approveRejetPanel/approveRejetPanelCancel.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 0C6.72867 0 0 6.72867 0 15C0 23.2713 6.72867 30 15 30C23.2713 30 30 23.2713 30 15C30 6.72867 23.2713 0 15 0Z" fill="#FC3030"/>
+<path d="M15.4023 17.6258L19.8513 22.0748L22.0758 19.8503L17.6268 15.4013L22.0758 10.9523L19.8513 8.7278L15.4023 13.1768L10.9533 8.7278L8.72885 10.9523L13.1778 15.4013L8.72885 19.8503L10.9533 22.0748L15.4023 17.6258Z" fill="#FAFAFA"/>
+</svg>

package/src/assets/images/approveRejetPanel/approveRejetPanelDelete.svg

@@ -0,0 +1,14 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="29" height="29" rx="14.5" stroke="#EDEDED"/>
+<g clip-path="url(#clip0_320_8163)">
+<path d="M21.5798 9.94227L21.2034 8.73157C21.0601 8.27045 20.6594 7.96062 20.2066 7.96062H17.0435V6.85543C17.0435 6.30305 16.625 5.85352 16.1104 5.85352H13.2137C12.6993 5.85352 12.2806 6.30305 12.2806 6.85543V7.96062H9.11766C8.6647 7.96062 8.26403 8.27045 8.12072 8.73157L7.74437 9.94227C7.65866 10.2179 7.7021 10.5231 7.86037 10.7588C8.01863 10.9946 8.2747 11.1354 8.54545 11.1354H8.93884L9.80469 22.6257C9.86907 23.4783 10.5432 24.1462 11.3398 24.1462H18.1601C18.9565 24.1462 19.6307 23.4783 19.695 22.6255L20.5608 11.1354H20.7787C21.0494 11.1354 21.3055 10.9946 21.4638 10.759C21.622 10.5233 21.6655 10.2179 21.5798 9.94227V9.94227ZM13.2794 6.92535H16.0447V7.96062H13.2794V6.92535ZM18.6995 22.5391C18.6769 22.8393 18.4399 23.0744 18.1601 23.0744H11.3398C11.0599 23.0744 10.823 22.8393 10.8003 22.5391L9.94085 11.1354H19.5588L18.6995 22.5391ZM8.75964 10.0635L9.06824 9.0707C9.07526 9.04781 9.09516 9.03246 9.11766 9.03246H20.2066C20.2291 9.03246 20.2489 9.04781 20.256 9.0707L20.5646 10.0635H8.75964Z" fill="#817393"/>
+<path d="M17.1062 22.501C17.1151 22.5016 17.1238 22.5017 17.1326 22.5017C17.3965 22.5017 17.617 22.2798 17.6308 21.9937L18.0998 12.3329C18.1141 12.0374 17.9024 11.7852 17.6271 11.7698C17.351 11.754 17.1168 11.9815 17.1023 12.2771L16.6335 21.9379C16.6192 22.2335 16.8308 22.4857 17.1062 22.501V22.501Z" fill="#817393"/>
+<path d="M11.7145 21.9949C11.729 22.2806 11.9493 22.5016 12.2127 22.5016C12.2218 22.5016 12.2311 22.5013 12.2404 22.5008C12.5157 22.4847 12.7267 22.2321 12.7118 21.9365L12.2206 12.2758C12.2056 11.9802 11.9703 11.7537 11.6948 11.7699C11.4195 11.7859 11.2084 12.0385 11.2234 12.3341L11.7145 21.9949Z" fill="#817393"/>
+<path d="M14.6673 22.5016C14.9432 22.5016 15.1667 22.2617 15.1667 21.9657V12.305C15.1667 12.009 14.9432 11.769 14.6673 11.769C14.3915 11.769 14.168 12.009 14.168 12.305V21.9657C14.168 22.2617 14.3915 22.5016 14.6673 22.5016Z" fill="#817393"/>
+</g>
+<defs>
+<clipPath id="clip0_320_8163">
+<rect width="17.0455" height="18.2927" fill="white" transform="translate(6.13672 5.85352)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/images/approveRejetPanel/approveRejetPanelExclude.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 6.72867 6.72867 0 15 0C23.2713 0 30 6.72867 30 15C30 23.2713 23.2713 30 15 30C6.72867 30 0 23.2713 0 15ZM7.53658 16.9742V13.8283L23.2661 13.8283V16.9742H7.53658Z" fill="#D4D1D7"/>
+</svg>

package/src/assets/images/approveRejetPanel/approveRejetPanelSave.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 0C6.72867 0 0 6.72867 0 15C0 23.2713 6.72867 30 15 30C23.2713 30 30 23.2713 30 15C30 6.72867 23.2713 0 15 0Z" fill="#71DE56"/>
+<path d="M22.6028 11.8211L14.4778 19.946C14.234 20.1897 13.914 20.3124 13.5941 20.3124C13.2741 20.3124 12.9541 20.1897 12.7103 19.946L8.64792 15.8835C8.15903 15.3949 8.15903 14.6048 8.64792 14.1161C9.13658 13.6272 9.92645 13.6272 10.4153 14.1161L13.5941 17.2948L20.8354 10.0537C21.3241 9.56479 22.114 9.56479 22.6028 10.0537C23.0915 10.5423 23.0915 11.3322 22.6028 11.8211Z" fill="#F0EEF2"/>
+</svg>

package/src/assets/images/listCommercialRetailers/listCommercialRetailers.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="5" viewBox="0 0 7 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.09884 4.60084C6.2926 4.79759 6.60918 4.80001 6.80592 4.60624C7.00267 4.41248 7.00509 4.0959 6.81132 3.89916L6.09884 4.60084ZM3.50053 1.25L3.85677 0.899156L3.50053 0.537433L3.14429 0.899156L3.50053 1.25ZM0.189745 3.89916C-0.00402068 4.0959 -0.00160409 4.41248 0.195143 4.60624C0.39189 4.80001 0.708463 4.79759 0.902229 4.60084L0.189745 3.89916ZM6.81132 3.89916L3.85677 0.899156L3.14429 1.60084L6.09884 4.60084L6.81132 3.89916ZM3.14429 0.899156L0.189745 3.89916L0.902229 4.60084L3.85677 1.60084L3.14429 0.899156Z" fill="#E33AA9"/>
+</svg>