@lideralia/alife-uikit 1.2.1 → 1.2.2

package/dist/organisms/Modals/LoginPassCode.js

@@ -13,6 +13,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -48,6 +50,7 @@ var ModalLoginPassCode = function ModalLoginPassCode(_ref) {
       description = _ref.description,
       labelRetry = _ref.labelRetry,
       labelRetryAction = _ref.labelRetryAction,
+      labelCountDown = _ref.labelCountDown,
       actionRetry = _ref.actionRetry,
       labelChange = _ref.labelChange,
       labelChangeAction = _ref.labelChangeAction,
@@ -56,6 +59,7 @@ var ModalLoginPassCode = function ModalLoginPassCode(_ref) {
       errorMessage = _ref.errorMessage,
       onSubmit = _ref.onSubmit,
       tokenCaptcha = _ref.tokenCaptcha;
+  var seconds = 30;
   var pass1Ref = (0, _react.useRef)(null);
   var pass2Ref = (0, _react.useRef)(null);
   var pass3Ref = (0, _react.useRef)(null);
@@ -63,11 +67,37 @@ var ModalLoginPassCode = function ModalLoginPassCode(_ref) {
 
   var recaptchaRef = _react.default.createRef();
 
+  var _useState = (0, _react.useState)(seconds),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      countdown = _useState2[0],
+      setCountdown = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isCountdown = _useState4[0],
+      setIsCountdown = _useState4[1];
+
+  var labelCountMessage = labelCountDown.replace('{countdown}', countdown);
+
   var onChangeCaptcha = function onChangeCaptcha(valueToken) {
     actionInput('token', valueToken);
     actionRetry(valueToken);
   };
 
+  (0, _react.useEffect)(function () {
+    var timer = countdown > 0 && isCountdown && setInterval(function () {
+      return setCountdown(countdown - 1);
+    }, 1000);
+
+    if (countdown === 0) {
+      setIsCountdown(false);
+      setCountdown(seconds);
+    }
+
+    return function () {
+      return clearInterval(timer);
+    };
+  }, [countdown, isCountdown]);
   return _react.default.createElement(_Modal.Modal, {
     width: "339px",
     id: id,
@@ -192,7 +222,12 @@ var ModalLoginPassCode = function ModalLoginPassCode(_ref) {
     textAlign: "center",
     color: "black60",
     marginY: 2
-  }, labelRetry), _react.default.createElement(_Typography.LinkText, {
+  }, labelRetry), isCountdown ? _react.default.createElement(_Typography.Text, {
+    sizeText: "display13",
+    textAlign: "center",
+    color: "black60",
+    marginY: 2
+  }, labelCountMessage) : _react.default.createElement(_Typography.LinkText, {
     underline: true,
     sizeText: "display13",
     textAlign: "center",
@@ -203,10 +238,11 @@ var ModalLoginPassCode = function ModalLoginPassCode(_ref) {
             switch (_context.prev = _context.next) {
               case 0:
                 e.preventDefault();
-                _context.next = 3;
+                setIsCountdown(true);
+                _context.next = 4;
                 return recaptchaRef.current.executeAsync();
 
-              case 3:
+              case 4:
               case "end":
                 return _context.stop();
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lideralia/alife-uikit",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Librería y documentación de componentes, basada en el Design System de Alife.",
   "homepage": "https://github.com/lideralia/alife-frontend-components#readme",
   "bugs": {