contentoh-components-library 21.0.5 → 21.0.6

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

@@ -264,7 +264,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       activePercentage = _useState26[0],
       setActivePercentage = _useState26[1];
 
-  var _useState27 = (0, _react.useState)({}),
+  var _useState27 = (0, _react.useState)(productSelected === null || productSelected === void 0 ? void 0 : productSelected.retailers[0]),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
       activeRetailer = _useState28[0],
       setActiveRetailer = _useState28[1];
@@ -309,7 +309,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       comment = _useState44[0],
       setComment = _useState44[1];
 
-  var _useState45 = (0, _react.useState)(0),
+  var _useState45 = (0, _react.useState)({
+    "Ficha técnica": 0,
+    Descripción: 0,
+    Imágenes: 0
+  }),
       _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
       requiredNull = _useState46[0],
       setRequiredNull = _useState46[1];
@@ -371,7 +375,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               services = _context2.sent;
               //Converts the data inside the datasheets object to array
               setServices(services);
-              setActiveRetailer(productSelected === null || productSelected === void 0 ? void 0 : productSelected.retailers[0]);
+              getRequired(services); //setActiveRetailer(productSelected?.retailers[0]);
+
               setImages({
                 action: "init",
                 init: services[2]
@@ -590,8 +595,6 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     setActivePercentage(productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$reta3 = productSelected.retailers[0]) === null || _productSelected$reta3 === void 0 ? void 0 : _productSelected$reta3.percentage);
   }, [percentages]);
   (0, _react.useEffect)(function () {
-    var required = {};
-
     if (services.length > 0) {
       var _services$2, _services$3;
 
@@ -604,7 +607,6 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         return (service === null || service === void 0 ? void 0 : service.id) === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id);
       });
 
-      setRequiredNull(required);
       setDatasheets([datagroups, inputs]);
       setDescriptions(_descriptions);
     }
@@ -616,7 +618,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
       return {
         value: e === null || e === void 0 ? void 0 : e.id,
-        name: e === null || e === void 0 ? void 0 : e.name
+        name: e === null || e === void 0 ? void 0 : e.name,
+        required: e === null || e === void 0 ? void 0 : e.required
       };
     });
     var imageType = images === null || images === void 0 ? void 0 : (_images$imageType = images.imageType) === null || _images$imageType === void 0 ? void 0 : _images$imageType.map(function (e) {
@@ -927,7 +930,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     }
 
     concept = action ? action : concept;
-    return productSelected["".concat(concept, "_status")] === "QF" && ((user === null || user === void 0 ? void 0 : user.id_role) === 1 || (user === null || user === void 0 ? void 0 : user.id_role) === 4 || (user === null || user === void 0 ? void 0 : user.id_role) === 5) || productSelected["".concat(concept, "_status")] === "AF" && ((user === null || user === void 0 ? void 0 : user.id_role) === 1 || (user === null || user === void 0 ? void 0 : user.id_role) === 6) || productSelected["".concat(concept, "_status")] === "RP" && ((user === null || user === void 0 ? void 0 : user.id_role) === 1 || (user === null || user === void 0 ? void 0 : user.id_role) === 6);
+    return productSelected["".concat(concept, "_status")] === "QF" && (user.id_role === 1 || user.id_role === 4 || user.id_role === 5) || productSelected["".concat(concept, "_status")] === "AF" && (user.id_role === 1 || user.id_role === 6) || productSelected["".concat(concept, "_status")] === "RP" && (user.id_role === 1 || user.id_role === 6);
   };
 
   var getSectionIcon = function getSectionIcon() {
@@ -1040,7 +1043,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
             case 11:
               evalStatus = "";
-              productTemp = (0, _objectSpread2.default)({}, productSelected);
+              productTemp = productSelected;
               evalStatus = productSelected["".concat(concept, "_status")];
               specialistDone = evalStatus === "RF" || evalStatus === "RA" || evalStatus === "IN_PROGRESS";
 
@@ -1048,18 +1051,22 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
                 setMessage("".concat(activeTab, " enviada a facilitador"));
                 getSectionIcon();
                 productTemp["".concat(concept, "_status")] = "QF";
+                evalStatus = "QF";
               } else if (evalStatus === "QF") {
                 setMessage("Evaluación enviada");
                 getSectionIcon();
                 productTemp["".concat(concept, "_status")] = "AF";
+                evalStatus = "AF";
               } else if (evalStatus === "AF") {
                 setMessage("Evaluación enviada");
                 getSectionIcon();
                 productTemp["".concat(concept, "_status")] = "AA";
+                evalStatus = "AA";
               } else if (evalStatus === "RP") {
                 setMessage("Evaluación enviada");
                 getSectionIcon();
                 productTemp["".concat(concept, "_status")] = "AA";
+                evalStatus = "AA";
               }
 
               data = {};
@@ -1086,7 +1093,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               });
 
             case 22:
-              _context10.next = 37;
+              _context10.next = 36;
               break;
 
             case 24:
@@ -1123,10 +1130,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
                 }
               });
 
-              setProduct(productTemp);
-              setModalSent(true);
+              setProduct(productTemp); //setModalSent(true);
 
-            case 37:
+            case 36:
             case "end":
               return _context10.stop();
           }
@@ -1139,7 +1145,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     };
   }();
 
-  var userAssigned = function userAssigned(tab, rol) {
+  var _userAssigned = function userAssigned(tab, rol) {
     var concept = "";
 
     switch (tab) {
@@ -1223,32 +1229,57 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     };
   }();
 
-  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
-    return _regenerator.default.wrap(function _callee12$(_context12) {
-      while (1) {
-        switch (_context12.prev = _context12.next) {
-          case 0:
-            setComment(comments[activeTab]);
+  var getRequired = function getRequired(services) {
+    var _services$4, _services$4$inputs;
+
+    var objetcTemp = requiredNull;
+    var datasheetServicesArray = Object.values(services[0]);
+    var dsInputs = datasheetServicesArray.pop();
+    var descriptionsServicesArray = services[1];
+    var dsInputsRequired = [];
+    var desInputsRequired = 0;
+    datasheetServicesArray.forEach(function (datasheet) {
+      return Object.values(datasheet === null || datasheet === void 0 ? void 0 : datasheet.data).forEach(function (dataGroup) {
+        return dsInputsRequired.push.apply(dsInputsRequired, (0, _toConsumableArray2.default)(dataGroup.inputs.filter(function (input) {
+          return dsInputs[input].required && !dsInputs[input].value;
+        })));
+      });
+    });
+    objetcTemp["Ficha técnica"] = dsInputsRequired.length;
+    descriptionsServicesArray.forEach(function (description) {
+      return description.inputs.forEach(function (input) {
+        return input.required && (!input.value || input.value.replace(/(<\/?p>)|(<\/?strong>)|(<br>)/gm, "") === "") && desInputsRequired++;
+      });
+    });
+    objetcTemp["Descripción"] = desInputsRequired;
+    var requiredImages = (_services$4 = services[2]) === null || _services$4 === void 0 ? void 0 : (_services$4$inputs = _services$4.inputs) === null || _services$4$inputs === void 0 ? void 0 : _services$4$inputs.filter(function (e) {
+      return e.required;
+    });
+    var requiredCounter = 0;
+    requiredImages.forEach(function (req) {
+      return services[2].values.filter(function (img) {
+        return img.image_id === req.id;
+      }).length === 0 && requiredCounter++;
+    });
+    objetcTemp["Imágenes"] = requiredCounter;
+    setRequiredNull(objetcTemp);
+  };
 
-          case 1:
-          case "end":
-            return _context12.stop();
-        }
-      }
-    }, _callee12);
-  })), [activeTab]);
+  (0, _react.useEffect)(function () {
+    setComment(comments[activeTab]);
+  }, [activeTab]);
 
   var commentRevised = /*#__PURE__*/function () {
-    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13() {
+    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
       var data;
-      return _regenerator.default.wrap(function _callee13$(_context13) {
+      return _regenerator.default.wrap(function _callee12$(_context12) {
         while (1) {
-          switch (_context13.prev = _context13.next) {
+          switch (_context12.prev = _context12.next) {
             case 0:
               data = {
                 commentId: comment.id
               };
-              _context13.next = 3;
+              _context12.next = 3;
               return _axios.default.put("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT), data, {
                 headers: {
                   Authorization: sessionStorage.getItem("jwt")
@@ -1257,47 +1288,47 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
             case 3:
               setCrossComment(false);
-              _context13.next = 6;
+              _context12.next = 6;
               return getComments();
 
             case 6:
             case "end":
-              return _context13.stop();
+              return _context12.stop();
           }
         }
-      }, _callee13);
+      }, _callee12);
     }));
 
     return function commentRevised() {
-      return _ref14.apply(this, arguments);
+      return _ref13.apply(this, arguments);
     };
   }();
 
   var setAssignation = /*#__PURE__*/function () {
-    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(assignationType, assignationId) {
+    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13(assignationType, assignationId) {
       var _product$article3;
 
       var concept, productTemp, data;
-      return _regenerator.default.wrap(function _callee14$(_context14) {
+      return _regenerator.default.wrap(function _callee13$(_context13) {
         while (1) {
-          switch (_context14.prev = _context14.next) {
+          switch (_context13.prev = _context13.next) {
             case 0:
               concept = "";
-              _context14.t0 = activeTab;
-              _context14.next = _context14.t0 === "Ficha técnica" ? 4 : _context14.t0 === "Imágenes" ? 6 : 8;
+              _context13.t0 = activeTab;
+              _context13.next = _context13.t0 === "Ficha técnica" ? 4 : _context13.t0 === "Imágenes" ? 6 : 8;
               break;
 
             case 4:
               concept = "datasheet";
-              return _context14.abrupt("break", 10);
+              return _context13.abrupt("break", 10);
 
             case 6:
               concept = "images";
-              return _context14.abrupt("break", 10);
+              return _context13.abrupt("break", 10);
 
             case 8:
               concept = "description";
-              return _context14.abrupt("break", 10);
+              return _context13.abrupt("break", 10);
 
             case 10:
               productTemp = productSelected;
@@ -1322,14 +1353,14 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
             case 16:
             case "end":
-              return _context14.stop();
+              return _context13.stop();
           }
         }
-      }, _callee14);
+      }, _callee13);
     }));
 
     return function setAssignation(_x7, _x8) {
-      return _ref15.apply(this, arguments);
+      return _ref14.apply(this, arguments);
     };
   }();
 
@@ -1477,7 +1508,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           approveRejectButtons: approveRejectButtons,
           sendToFacilitator: sendToFacilitator,
           auditorAssigned: auditorAssigned,
-          userAssigned: userAssigned(activeTab, "facilitator")
+          userAssigned: function userAssigned() {
+            return _userAssigned(activeTab, "facilitator");
+          }
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
           tabsSections: tabsSections,
           status: {
@@ -1558,7 +1591,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               headerType: "input-name-header"
             }))]
           })
-        }), (userAssigned(activeTab, "especialist" || "facilitator") || auditorAssigned()) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        }), (_userAssigned(activeTab, "especialist" || "facilitator") || auditorAssigned()) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "commentary-box",
           children: [!comment ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "commentary",
@@ -1586,24 +1619,24 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               reviewed: crossComment
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
               buttonType: "circular-button accept-button",
-              onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15() {
-                return _regenerator.default.wrap(function _callee15$(_context15) {
+              onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14() {
+                return _regenerator.default.wrap(function _callee14$(_context14) {
                   while (1) {
-                    switch (_context15.prev = _context15.next) {
+                    switch (_context14.prev = _context14.next) {
                       case 0:
                         setCrossComment(true);
                         commentRevised();
 
                       case 2:
                       case "end":
-                        return _context15.stop();
+                        return _context14.stop();
                     }
                   }
-                }, _callee15);
+                }, _callee14);
               }))
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-            buttonType: !requiredNull[activeTab] === 0 || !approveRejectButtons() || !evaluationComplete(activeTab) ? "general-button-disabled" : "general-green-button",
+            buttonType: !approveRejectButtons() || requiredNull[activeTab] !== 0 || !evaluationComplete(activeTab) ? "general-button-disabled" : "general-green-button",
             label: "Enviar evaluación",
             onClick: function onClick() {
               return sendToFacilitator();
@@ -1621,11 +1654,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       componentsArray: componentsArray.length > 0 ? componentsArray : [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
         src: _genericModalCheck.default,
         alt: "success icon"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "retailer-name-header",
         text: message,
         color: "white"
-      }, "1")],
+      }, "2")],
       onClick: function onClick() {
         return setMessage("");
       }

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,
+          maxLength: "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.5",
+  "version": "21.0.6",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@storybook/addon-postcss": "^2.0.0",
@@ -27,7 +27,7 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "start-storybook -p 6006",
+    "start": "start-storybook  -p 6006",
     "build": "cross-env BABEL_ENV=production babel src -d dist",
     "chromatic": "npx chromatic --project-token=d7bb0c8ba831"
   },