contentoh-components-library 12.0.0 → 12.1.17

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\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            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            max-width: 201px;\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              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  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 headerTop = _ref.headerTop;
   return headerTop;
 });

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/pages/VerificationCodeResetPassword",
+  component: _index.VerificationCodeResetPassword
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.VerificationCodeResetPassword, (0, _objectSpread2.default)({}, args));
+};
+
+var VerificationCodeResetPasswordDefault = Template.bind({});
+exports.VerificationCodeResetPasswordDefault = VerificationCodeResetPasswordDefault;
+VerificationCodeResetPasswordDefault.args = {
+  imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers"
+};

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

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerificationCodeResetPassword = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
+
+var _react = require("react");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _GeneralInput = require("../../atoms/GeneralInput");
+
+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,
+      textCarousel = _ref.textCarousel,
+      backogroundColorCarousel = _ref.backogroundColorCarousel;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyVerificationCode = _useState2[0],
+      setEmptyVerificationCode = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      inputCodeVerificationAll = _useState4[0],
+      setInputCodeVerificationAll = _useState4[1];
+
+  var inputPositions = [1, 2, 3, 4, 5, 6];
+  (0, _react.useEffect)(function () {
+    setInputCodeVerificationAll(document.querySelectorAll("[id^='verificationCodeInput']"));
+  }, []);
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("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", {
+    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,
+          maxChar: 1
+        });
+      })
+    }), emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su c\xF3digo de verificaci\xF3n"
+    })]
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "resend-code",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "Reenviar c\xF3digo de verificaci\xF3n"
+    })
+  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("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", {
+    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
+      })
+    })]
+  });
+};
+
+exports.VerificationCodeResetPassword = VerificationCodeResetPassword;

package/dist/components/pages/VerificationCodeResetPassword/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: flex;\n  width: 100%;\n  height: 100vh;\n  .button-center {\n    text-align: center;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n  .reset-password {\n    text-align: center;\n    margin: 15px !important;\n    color: ", ";\n    cursor: pointer;\n    font-weight: bold;\n    font-family: ", ";\n    font-size: 13px;\n  }\n  .resend-code {\n    margin-top: 8px !important;\n    color: ", ";\n    font-family: ", ";\n    font-size: 11px;\n    text-decoration: underline rgb(228, 81, 172);\n    cursor: pointer;\n    & + * {\n      margin-top: 30px;\n    }\n  }\n  .verification-code {\n    display: flex;\n    text-align: center;\n    margin: auto;\n    margin-top: 10px;\n    input[type=\"number\"]::-webkit-inner-spin-button,\n    input[type=\"number\"]::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    input {\n      \n      width: 70%;\n      text-align: center;\n    }\n  }\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n  }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.FontFamily.AvenirNext);
+
+exports.Container = Container;

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateInput = exports.validate = void 0;
+
+/**
+ *
+ * @param {event} e event received triggered by verification code input
+ * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
+ */
+var validateInput = function validateInput(e, index, inputsArray) {
+  var isValid = false;
+  var inputNotEmpty = e.target.value.length > 0;
+
+  if (inputNotEmpty) {
+    if (validateInputNumber(e) !== null) {
+      isValid = true;
+      nextInputFocus(inputsArray, index++);
+    }
+  }
+
+  return isValid ? e.target.value : "";
+};
+/**
+ *
+ * @param {event} e event received triggered by verification code input
+ * @returns {boolean} if digit is a number
+ */
+
+
+exports.validateInput = validateInput;
+
+var validateInputNumber = function validateInputNumber(e) {
+  return (e.target.value || String.fromCharCode(e.keyCode)).match(/[0-9]{1}/);
+};
+/**
+ *
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
+ * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
+ * changes focus to next input if digit typed is a number and there wasn't any before
+ */
+
+
+var nextInputFocus = function nextInputFocus(inputsArray, index) {
+  var _inputsArray$index;
+
+  var button = document.getElementsByClassName("general-default-button");
+  inputsArray !== null && inputsArray !== void 0 && inputsArray.length && index === (inputsArray === null || inputsArray === void 0 ? void 0 : inputsArray.length) ? button[0].focus() : (_inputsArray$index = inputsArray[index]) === null || _inputsArray$index === void 0 ? void 0 : _inputsArray$index.focus();
+};
+/**
+ *
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to check if there's any empty)
+ * @param {function} setEmptyVerificationCode function to update flag which handles if there's an empty char
+ * updates emptyVerificationFlag from father component
+ */
+
+
+var validate = function validate(inputsArray, setEmptyVerificationCode) {
+  var contInputEmpty = 0;
+  inputsArray.forEach(function (element) {
+    element.value === "" ? 0 : contInputEmpty++;
+  });
+  contInputEmpty === inputsArray.length ? setEmptyVerificationCode(false) : setEmptyVerificationCode(true);
+};
+
+exports.validate = validate;

package/dist/global-files/data.js

@@ -5,7 +5,7 @@ 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.getProfilePicture = exports.getPercentage = exports.getNewStatus = exports.getImage = exports.fetchUsers = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -113,14 +113,15 @@ var getPercentage = /*#__PURE__*/function () {
 
             func = /*#__PURE__*/function () {
               var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-                var dataToSend;
+                var dataToSend, retailers;
                 return _regenerator.default.wrap(function _callee2$(_context2) {
                   while (1) {
                     switch (_context2.prev = _context2.next) {
                       case 0:
                         dataToSend = [];
+                        retailers = params.data[0].retailers || params.data[0].retailersAvailable;
                         params.data.forEach(function (product) {
-                          params.data[0].retailers.forEach(function (retailer) {
+                          retailers.forEach(function (retailer) {
                             dataToSend.push(product.article ? {
                               id_article: product.article.id_article,
                               id_category: product.article.id_category,
@@ -130,17 +131,17 @@ var getPercentage = /*#__PURE__*/function () {
                               name: product.article.name,
                               retailerName: retailer.name
                             } : {
-                              id_article: product.product.id_article,
-                              id_category: product.product.id_category,
+                              id_article: product.id_article,
+                              id_category: product.id_category,
                               id_retailer: retailer.id,
-                              version: product.product.version,
-                              upc: product.product.upc,
-                              name: product.product.name,
+                              version: product.version,
+                              upc: product.upc,
+                              name: product.name,
                               retailerName: retailer.name
                             });
                           });
                         });
-                        _context2.next = 4;
+                        _context2.next = 5;
                         return _axios.default.post(process.env.REACT_APP_VALID_EXPORT_ENDPOINT, {
                           data: dataToSend
                         }, {
@@ -153,10 +154,10 @@ var getPercentage = /*#__PURE__*/function () {
                           return console.log(err, "Errror");
                         });
 
-                      case 4:
+                      case 5:
                         return _context2.abrupt("return", _context2.sent);
 
-                      case 5:
+                      case 6:
                       case "end":
                         return _context2.stop();
                     }
@@ -263,4 +264,27 @@ var fetchUsers = /*#__PURE__*/function () {
   };
 }();
 
-exports.fetchUsers = fetchUsers;
+exports.fetchUsers = fetchUsers;
+
+var getNewStatus = function getNewStatus(statusArray) {
+  var lookupString = "";
+  statusArray.forEach(function (element) {
+    return lookupString += element + "/";
+  });
+  if (lookupString.includes("RF")) return "RF";
+  if (lookupString.includes("RA")) return "RA";
+  if (lookupString.includes("RP")) return "RP";
+  if (lookupString.includes("RC")) return "RC";
+  if (lookupString.includes("UNASSIGNED")) return "IN_PROGRESS";
+  if (lookupString.includes("IN_PROGRESS")) return "IN_PROGRESS";
+  if (lookupString.includes("QF")) return "QF";
+  if (lookupString.includes("AF")) return "AF";
+  if (lookupString.includes("AA")) return "AA";
+  if (lookupString.includes("AP")) return "AP";
+  if (lookupString.includes("AC")) return "AC";
+  if (lookupString.includes("RECEIVED")) return "RECEIVED";
+  if (lookupString.includes("NA")) return "NA";
+  return new Error("Status not found");
+};
+
+exports.getNewStatus = getNewStatus;