@alfalab/core-components-confirmation 12.3.4 → 12.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (156) hide show
  1. package/{component-ad8387ce.d.ts → component-5a9a6986.d.ts} +0 -0
  2. package/{component-ad8387ce.js → component-5a9a6986.js} +6 -11
  3. package/component.desktop.js +6 -12
  4. package/component.mobile.js +7 -14
  5. package/component.responsive.js +9 -15
  6. package/components/base-confirmation/component.js +7 -9
  7. package/components/base-confirmation/index.css +2 -2
  8. package/components/base-confirmation/index.d.ts +1 -1
  9. package/components/base-confirmation/index.js +5 -7
  10. package/components/countdown-loader/component.js +3 -9
  11. package/components/countdown-loader/index.css +2 -2
  12. package/components/countdown-loader/index.js +1 -3
  13. package/components/header/component.js +2 -9
  14. package/components/header/index.css +4 -4
  15. package/components/header/index.js +1 -3
  16. package/components/index.js +10 -12
  17. package/components/screens/fatal-error/component.js +7 -14
  18. package/components/screens/fatal-error/index.css +6 -6
  19. package/components/screens/fatal-error/index.js +3 -5
  20. package/components/screens/hint/component.js +15 -22
  21. package/components/screens/hint/index.css +12 -12
  22. package/components/screens/hint/index.js +3 -5
  23. package/components/screens/index.js +8 -10
  24. package/components/screens/initial/component.js +15 -17
  25. package/components/screens/initial/countdown-section.js +4 -6
  26. package/components/screens/initial/index.css +18 -18
  27. package/components/screens/initial/index.js +5 -7
  28. package/components/screens/temp-block/component.js +9 -16
  29. package/components/screens/temp-block/index.css +7 -7
  30. package/components/screens/temp-block/index.js +4 -6
  31. package/context.js +0 -2
  32. package/{countdown-section-f4894842.d.ts → countdown-section-b356354f.d.ts} +0 -0
  33. package/countdown-section-b356354f.js +44 -0
  34. package/cssm/{component-5a4af768.d.ts → component-895f6f86.d.ts} +0 -0
  35. package/cssm/{component-5a4af768.js → component-895f6f86.js} +5 -11
  36. package/cssm/component.desktop.js +10 -16
  37. package/cssm/component.mobile.js +11 -19
  38. package/cssm/component.responsive.js +13 -19
  39. package/cssm/components/base-confirmation/component.js +10 -12
  40. package/cssm/components/base-confirmation/index.d.ts +1 -1
  41. package/cssm/components/base-confirmation/index.js +9 -11
  42. package/cssm/components/countdown-loader/component.js +2 -9
  43. package/cssm/components/countdown-loader/index.js +1 -3
  44. package/cssm/components/header/component.js +1 -9
  45. package/cssm/components/header/index.js +1 -3
  46. package/cssm/components/index.js +12 -14
  47. package/cssm/components/screens/fatal-error/component.js +7 -15
  48. package/cssm/components/screens/fatal-error/index.js +4 -6
  49. package/cssm/components/screens/hint/component.js +15 -23
  50. package/cssm/components/screens/hint/index.js +4 -6
  51. package/cssm/components/screens/index.js +10 -12
  52. package/cssm/components/screens/initial/component.js +17 -20
  53. package/cssm/components/screens/initial/countdown-section.js +14 -22
  54. package/cssm/components/screens/initial/index.js +6 -8
  55. package/cssm/components/screens/temp-block/component.js +10 -18
  56. package/cssm/components/screens/temp-block/index.js +6 -8
  57. package/cssm/context.js +0 -2
  58. package/cssm/desktop.d.ts +1 -0
  59. package/cssm/desktop.js +10 -12
  60. package/cssm/index.js +24 -26
  61. package/cssm/mobile.d.ts +1 -0
  62. package/cssm/mobile.js +10 -12
  63. package/cssm/responsive.d.ts +1 -0
  64. package/cssm/responsive.js +11 -13
  65. package/cssm/types.js +0 -2
  66. package/cssm/utils.js +6 -8
  67. package/desktop.d.ts +1 -0
  68. package/desktop.js +6 -8
  69. package/esm/{component-b1ceb5d0.d.ts → component-3212dc9c.d.ts} +0 -0
  70. package/esm/{component-b1ceb5d0.js → component-3212dc9c.js} +4 -4
  71. package/esm/component.desktop.js +5 -5
  72. package/esm/component.mobile.js +6 -6
  73. package/esm/component.responsive.js +8 -8
  74. package/esm/components/base-confirmation/component.js +7 -7
  75. package/esm/components/base-confirmation/index.css +2 -2
  76. package/esm/components/base-confirmation/index.d.ts +1 -1
  77. package/esm/components/base-confirmation/index.js +5 -5
  78. package/esm/components/countdown-loader/component.js +3 -3
  79. package/esm/components/countdown-loader/index.css +2 -2
  80. package/esm/components/countdown-loader/index.js +1 -1
  81. package/esm/components/header/component.js +1 -1
  82. package/esm/components/header/index.css +4 -4
  83. package/esm/components/header/index.js +1 -1
  84. package/esm/components/index.js +9 -9
  85. package/esm/components/screens/fatal-error/component.js +3 -3
  86. package/esm/components/screens/fatal-error/index.css +6 -6
  87. package/esm/components/screens/fatal-error/index.js +3 -3
  88. package/esm/components/screens/hint/component.js +3 -3
  89. package/esm/components/screens/hint/index.css +12 -12
  90. package/esm/components/screens/hint/index.js +3 -3
  91. package/esm/components/screens/index.js +8 -8
  92. package/esm/components/screens/initial/component.js +10 -5
  93. package/esm/components/screens/initial/countdown-section.js +4 -4
  94. package/esm/components/screens/initial/index.css +18 -18
  95. package/esm/components/screens/initial/index.js +5 -5
  96. package/esm/components/screens/temp-block/component.js +4 -4
  97. package/esm/components/screens/temp-block/index.css +7 -7
  98. package/esm/components/screens/temp-block/index.js +4 -4
  99. package/esm/{countdown-section-608e4e3a.d.ts → countdown-section-5a8d74ee.d.ts} +0 -0
  100. package/esm/{countdown-section-608e4e3a.js → countdown-section-5a8d74ee.js} +6 -6
  101. package/esm/desktop.d.ts +1 -0
  102. package/esm/desktop.js +6 -6
  103. package/esm/index.js +12 -12
  104. package/esm/mobile.css +2 -2
  105. package/esm/mobile.d.ts +1 -0
  106. package/esm/mobile.js +6 -6
  107. package/esm/responsive.d.ts +1 -0
  108. package/esm/responsive.js +6 -6
  109. package/esm/utils.js +6 -6
  110. package/index.js +21 -23
  111. package/mobile.css +2 -2
  112. package/mobile.d.ts +1 -0
  113. package/mobile.js +6 -8
  114. package/modern/component.desktop.js +5 -5
  115. package/modern/component.mobile.js +6 -6
  116. package/modern/component.responsive.js +8 -8
  117. package/modern/components/base-confirmation/component.js +8 -8
  118. package/modern/components/base-confirmation/index.css +2 -2
  119. package/modern/components/base-confirmation/index.js +5 -5
  120. package/modern/components/countdown-loader/component.js +1 -1
  121. package/modern/components/countdown-loader/index.css +2 -2
  122. package/modern/components/countdown-loader/index.js +1 -1
  123. package/modern/components/header/component.js +1 -1
  124. package/modern/components/header/index.css +4 -4
  125. package/modern/components/header/index.js +1 -1
  126. package/modern/components/index.js +9 -9
  127. package/modern/components/screens/fatal-error/component.js +3 -3
  128. package/modern/components/screens/fatal-error/index.css +6 -6
  129. package/modern/components/screens/fatal-error/index.js +3 -3
  130. package/modern/components/screens/hint/component.js +3 -3
  131. package/modern/components/screens/hint/index.css +12 -12
  132. package/modern/components/screens/hint/index.js +3 -3
  133. package/modern/components/screens/index.js +8 -8
  134. package/modern/components/screens/initial/component.js +10 -5
  135. package/modern/components/screens/initial/countdown-section.js +4 -4
  136. package/modern/components/screens/initial/index.css +18 -18
  137. package/modern/components/screens/initial/index.js +5 -5
  138. package/modern/components/screens/temp-block/component.js +4 -4
  139. package/modern/components/screens/temp-block/index.css +7 -7
  140. package/modern/components/screens/temp-block/index.js +4 -4
  141. package/modern/{countdown-section-cb87c8ea.d.ts → countdown-section-b8b393a2.d.ts} +0 -0
  142. package/modern/{countdown-section-cb87c8ea.js → countdown-section-b8b393a2.js} +5 -5
  143. package/modern/desktop.d.ts +1 -0
  144. package/modern/desktop.js +6 -6
  145. package/modern/index.js +12 -12
  146. package/modern/mobile.css +2 -2
  147. package/modern/mobile.d.ts +1 -0
  148. package/modern/mobile.js +6 -6
  149. package/modern/responsive.d.ts +1 -0
  150. package/modern/responsive.js +8 -8
  151. package/package.json +2 -2
  152. package/responsive.d.ts +1 -0
  153. package/responsive.js +6 -8
  154. package/types.js +0 -2
  155. package/utils.js +6 -8
  156. package/countdown-section-f4894842.js +0 -49
@@ -1,4 +1,4 @@
1
- /* hash: 1hget */
1
+ /* hash: pe120 */
2
2
  :root {
3
3
  --color-light-text-primary: #0b1f35;
4
4
  }
@@ -33,48 +33,48 @@
33
33
 
34
34
  /* header */
35
35
  }
36
- .confirmation__component_8p0cq {
36
+ .confirmation__component_1kmjv {
37
37
  display: flex;
38
38
  flex-direction: column;
39
39
  align-items: flex-start
40
40
  }
41
- .confirmation__component_8p0cq span:last-of-type {
41
+ .confirmation__component_1kmjv span:last-of-type {
42
42
  margin-bottom: 0;
43
43
  }
44
- .confirmation__center_8p0cq {
44
+ .confirmation__center_1kmjv {
45
45
  align-items: center;
46
46
  text-align: center;
47
47
  }
48
- .confirmation__text_8p0cq.confirmation__text_8p0cq {
48
+ .confirmation__text_1kmjv.confirmation__text_1kmjv {
49
49
  margin-bottom: var(--gap-xl);
50
50
  }
51
- .confirmation__typographyTheme_8p0cq.confirmation__typographyTheme_8p0cq {
51
+ .confirmation__typographyTheme_1kmjv.confirmation__typographyTheme_1kmjv {
52
52
  font-size: var(--confirmation-text-font-size);
53
53
  line-height: var(--confirmation-text-line-height);
54
54
  font-weight: var(--confirmation-text-font-weight);
55
55
  font-family: var(--confirmation-text-font-family);
56
56
  color: var(--confirmation-text-color);
57
57
  }
58
- .confirmation__phonesWrap_8p0cq {
58
+ .confirmation__phonesWrap_1kmjv {
59
59
  display: flex;
60
60
  flex-direction: column;
61
61
  margin-bottom: var(--gap-xl);
62
62
  }
63
- .confirmation__phoneWrap_8p0cq {
63
+ .confirmation__phoneWrap_1kmjv {
64
64
  margin-bottom: var(--gap-xs)
65
65
  }
66
- .confirmation__phoneWrap_8p0cq:last-child {
66
+ .confirmation__phoneWrap_1kmjv:last-child {
67
67
  margin-bottom: 0;
68
68
  }
69
- .confirmation__phoneLink_8p0cq.confirmation__phoneLink_8p0cq {
69
+ .confirmation__phoneLink_1kmjv.confirmation__phoneLink_1kmjv {
70
70
  font-size: 16px;
71
71
  line-height: 24px;
72
72
  font-weight: 500;
73
73
  }
74
- .confirmation__hintButton_8p0cq {
74
+ .confirmation__hintButton_1kmjv {
75
75
  margin-top: var(--gap-2xl);
76
76
  }
77
- .confirmation__phoneContentMobile_8p0cq {
77
+ .confirmation__phoneContentMobile_1kmjv {
78
78
  display: flex;
79
79
  flex-direction: column;
80
80
  align-items: center;
@@ -1,16 +1,14 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
3
+ var components_screens_hint_component = require('./component.js');
5
4
  require('react');
6
5
  require('classnames');
7
- require('../../../utils.js');
8
- require('../../../context.js');
9
6
  require('@alfalab/core-components-button');
10
7
  require('@alfalab/core-components-link');
11
8
  require('@alfalab/core-components-typography');
9
+ require('../../../context.js');
10
+ require('../../../utils.js');
12
11
  require('../../header/component.js');
13
- var components_screens_hint_component = require('./component.js');
14
12
 
15
13
 
16
14
 
@@ -1,24 +1,22 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
3
+ var components_screens_initial_component = require('./initial/component.js');
4
+ var components_screens_hint_component = require('./hint/component.js');
5
+ var components_screens_fatalError_component = require('./fatal-error/component.js');
6
+ var components_screens_tempBlock_component = require('./temp-block/component.js');
5
7
  require('react');
6
8
  require('classnames');
7
- require('@alfalab/hooks');
8
- require('../../utils.js');
9
- require('../../context.js');
10
9
  require('@alfalab/core-components-button');
11
10
  require('@alfalab/core-components-code-input');
12
11
  require('@alfalab/core-components-link');
13
12
  require('@alfalab/core-components-typography');
13
+ require('@alfalab/hooks');
14
+ require('../../context.js');
15
+ require('../../utils.js');
14
16
  require('../header/component.js');
17
+ require('../../countdown-section-b356354f.js');
15
18
  require('@alfalab/core-components-loader');
16
- require('../../countdown-section-f4894842.js');
17
- var components_screens_initial_component = require('./initial/component.js');
18
- var components_screens_hint_component = require('./hint/component.js');
19
- var components_screens_fatalError_component = require('./fatal-error/component.js');
20
19
  require('../countdown-loader/component.js');
21
- var components_screens_tempBlock_component = require('./temp-block/component.js');
22
20
 
23
21
 
24
22
 
@@ -1,24 +1,17 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var cn = require('classnames');
7
- var hooks = require('@alfalab/hooks');
8
- require('../../../utils.js');
9
- var context = require('../../../context.js');
10
5
  var coreComponentsButton = require('@alfalab/core-components-button');
11
6
  var coreComponentsCodeInput = require('@alfalab/core-components-code-input');
12
7
  var coreComponentsLink = require('@alfalab/core-components-link');
13
8
  var coreComponentsTypography = require('@alfalab/core-components-typography');
9
+ var hooks = require('@alfalab/hooks');
10
+ var context = require('../../../context.js');
14
11
  var components_header_component = require('../../header/component.js');
12
+ var components_screens_initial_countdownSection = require('../../../countdown-section-b356354f.js');
13
+ require('../../../utils.js');
15
14
  require('@alfalab/core-components-loader');
16
- var components_screens_initial_countdownSection = require('../../../countdown-section-f4894842.js');
17
-
18
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
-
20
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
22
15
 
23
16
  var CODE_SEND_HINT_VISIBLE_DURATION = 2000;
24
17
  var Initial = function (_a) {
@@ -46,6 +39,11 @@ var Initial = function (_a) {
46
39
  }
47
40
  onSmsRetryClick();
48
41
  };
42
+ var handleErrorAnimationEnd = function () {
43
+ if (clearCodeOnError && state !== 'INITIAL') {
44
+ onChangeState('INITIAL');
45
+ }
46
+ };
49
47
  var clearTimer = React.useCallback(function () {
50
48
  window.clearTimeout(timerId.current);
51
49
  }, []);
@@ -85,14 +83,14 @@ var Initial = function (_a) {
85
83
  };
86
84
  var processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);
87
85
  var timePassed = timeLeft === 0;
88
- return (React__default['default'].createElement("div", { className: cn__default['default'](components_screens_initial_countdownSection.styles.component, components_screens_initial_countdownSection.styles[alignContent]) },
89
- React__default['default'].createElement(components_header_component.Header, { mobile: mobile }, texts.title),
90
- React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default'](components_screens_initial_countdownSection.styles.phone, (_b = {}, _b[components_screens_initial_countdownSection.styles.typographyTheme] = !mobile, _b)) },
86
+ return (React.createElement("div", { className: cn(components_screens_initial_countdownSection.styles.component, components_screens_initial_countdownSection.styles[alignContent]) },
87
+ React.createElement(components_header_component.Header, { mobile: mobile }, texts.title),
88
+ React.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(components_screens_initial_countdownSection.styles.phone, (_b = {}, _b[components_screens_initial_countdownSection.styles.typographyTheme] = !mobile, _b)) },
91
89
  "\u041A\u043E\u0434 \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D \u043D\u0430 ",
92
90
  phone),
93
- React__default['default'].createElement(coreComponentsCodeInput.CodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, className: cn__default['default'](components_screens_initial_countdownSection.styles.containerInput, components_screens_initial_countdownSection.styles.codeInput), onComplete: handleInputComplete, onChange: handleInputChange, clearCodeOnError: clearCodeOnError }),
94
- React__default['default'].createElement(components_screens_initial_countdownSection.CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick, mobile: mobile }),
95
- mobile ? (React__default['default'].createElement(coreComponentsButton.Button, { onClick: handleSmsHintLinkClick, view: 'link', size: 'xs' }, texts.linkToHint)) : (React__default['default'].createElement(coreComponentsLink.Link, { onClick: handleSmsHintLinkClick, className: components_screens_initial_countdownSection.styles.smsComeLink, view: mobile ? 'primary' : 'secondary', pseudo: true }, texts.linkToHint))));
91
+ React.createElement(coreComponentsCodeInput.CodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, className: cn(components_screens_initial_countdownSection.styles.containerInput, components_screens_initial_countdownSection.styles.codeInput), onComplete: handleInputComplete, onChange: handleInputChange, clearCodeOnError: clearCodeOnError, onErrorAnimationEnd: handleErrorAnimationEnd }),
92
+ React.createElement(components_screens_initial_countdownSection.CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick, mobile: mobile }),
93
+ mobile ? (React.createElement(coreComponentsButton.Button, { onClick: handleSmsHintLinkClick, view: 'link', size: 'xs' }, texts.linkToHint)) : (React.createElement(coreComponentsLink.Link, { onClick: handleSmsHintLinkClick, className: components_screens_initial_countdownSection.styles.smsComeLink, view: mobile ? 'primary' : 'secondary', pseudo: true }, texts.linkToHint))));
96
94
  };
97
95
 
98
96
  exports.Initial = Initial;
@@ -1,15 +1,13 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  require('react');
6
4
  require('classnames');
7
- require('../../../utils.js');
8
- require('../../../context.js');
9
5
  require('@alfalab/core-components-button');
10
- require('@alfalab/core-components-typography');
11
6
  require('@alfalab/core-components-loader');
12
- var components_screens_initial_countdownSection = require('../../../countdown-section-f4894842.js');
7
+ require('@alfalab/core-components-typography');
8
+ require('../../../context.js');
9
+ require('../../../utils.js');
10
+ var components_screens_initial_countdownSection = require('../../../countdown-section-b356354f.js');
13
11
 
14
12
 
15
13
 
@@ -1,4 +1,4 @@
1
- /* hash: yft4p */
1
+ /* hash: 194ak */
2
2
  :root {
3
3
  --color-light-text-primary: #0b1f35;
4
4
  --color-light-text-secondary: rgba(11, 31, 53, 0.7);
@@ -38,67 +38,67 @@
38
38
 
39
39
  /* header */
40
40
  }
41
- .confirmation__component_17tyk {
41
+ .confirmation__component_14vvl {
42
42
  display: flex;
43
43
  flex-direction: column;
44
44
  }
45
- .confirmation__typographyTheme_17tyk.confirmation__typographyTheme_17tyk {
45
+ .confirmation__typographyTheme_14vvl.confirmation__typographyTheme_14vvl {
46
46
  font-size: var(--confirmation-text-font-size);
47
47
  line-height: var(--confirmation-text-line-height);
48
48
  font-weight: var(--confirmation-text-font-weight);
49
49
  font-family: var(--confirmation-text-font-family);
50
50
  color: var(--confirmation-text-color);
51
51
  }
52
- .confirmation__phone_17tyk.confirmation__phone_17tyk {
52
+ .confirmation__phone_14vvl.confirmation__phone_14vvl {
53
53
  color: var(--color-light-text-primary);
54
54
  margin-bottom: var(--gap-2xl);
55
55
  }
56
- .confirmation__compact_17tyk {
56
+ .confirmation__compact_14vvl {
57
57
  margin-bottom: var(--gap-xl);
58
58
  }
59
- .confirmation__loaderWrap_17tyk {
59
+ .confirmation__loaderWrap_14vvl {
60
60
  display: flex;
61
61
  align-items: center;
62
62
  }
63
- .confirmation__left_17tyk {
63
+ .confirmation__left_14vvl {
64
64
  align-items: flex-start;
65
65
  }
66
- .confirmation__center_17tyk {
66
+ .confirmation__center_14vvl {
67
67
  align-items: center;
68
68
  text-align: center
69
69
  }
70
- .confirmation__center_17tyk .confirmation__loaderWrap_17tyk {
70
+ .confirmation__center_14vvl .confirmation__loaderWrap_14vvl {
71
71
  justify-content: center;
72
72
  }
73
- .confirmation__center_17tyk input {
73
+ .confirmation__center_14vvl input {
74
74
  margin: 0 var(--gap-2xs);
75
75
  }
76
- .confirmation__codeInput_17tyk {
76
+ .confirmation__codeInput_14vvl {
77
77
  margin-bottom: var(--gap-s);
78
78
  }
79
- .confirmation__smsComeLink_17tyk.confirmation__smsComeLink_17tyk {
79
+ .confirmation__smsComeLink_14vvl.confirmation__smsComeLink_14vvl {
80
80
  font-size: 14px;
81
81
  line-height: 20px;
82
82
  font-weight: 500;
83
83
  }
84
- .confirmation__countdownContainer_17tyk.confirmation__countdownContainer_17tyk {
84
+ .confirmation__countdownContainer_14vvl.confirmation__countdownContainer_14vvl {
85
85
  color: var(--color-light-text-secondary);
86
86
  margin-bottom: var(--gap-xl);
87
87
  }
88
- .confirmation__countdownMobile_17tyk.confirmation__countdownMobile_17tyk {
88
+ .confirmation__countdownMobile_14vvl.confirmation__countdownMobile_14vvl {
89
89
  margin-bottom: var(--gap-l);
90
90
  }
91
- .confirmation__countdownLoaderMobile_17tyk {
91
+ .confirmation__countdownLoaderMobile_14vvl {
92
92
  margin-bottom: var(--gap-m);
93
93
  }
94
- .confirmation__getCodeButton_17tyk {
94
+ .confirmation__getCodeButton_14vvl {
95
95
  position: relative;
96
96
  top: var(--gap-2xs-neg);
97
97
  margin-bottom: var(--gap-m);
98
98
  }
99
- .confirmation__getCodeButtonMobile_17tyk {
99
+ .confirmation__getCodeButtonMobile_14vvl {
100
100
  margin-bottom: 0;
101
101
  }
102
- .confirmation__containerInput_17tyk {
102
+ .confirmation__containerInput_14vvl {
103
103
  min-height: 80px;
104
104
  }
@@ -1,20 +1,18 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
3
+ var components_screens_initial_component = require('./component.js');
5
4
  require('react');
6
5
  require('classnames');
7
- require('@alfalab/hooks');
8
- require('../../../utils.js');
9
- require('../../../context.js');
10
6
  require('@alfalab/core-components-button');
11
7
  require('@alfalab/core-components-code-input');
12
8
  require('@alfalab/core-components-link');
13
9
  require('@alfalab/core-components-typography');
10
+ require('@alfalab/hooks');
11
+ require('../../../context.js');
12
+ require('../../../utils.js');
14
13
  require('../../header/component.js');
14
+ require('../../../countdown-section-b356354f.js');
15
15
  require('@alfalab/core-components-loader');
16
- require('../../../countdown-section-f4894842.js');
17
- var components_screens_initial_component = require('./component.js');
18
16
 
19
17
 
20
18
 
@@ -1,21 +1,14 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var cn = require('classnames');
7
- var utils = require('../../../utils.js');
8
- var context = require('../../../context.js');
9
5
  var coreComponentsTypography = require('@alfalab/core-components-typography');
10
- var components_header_component = require('../../header/component.js');
6
+ var context = require('../../../context.js');
7
+ var utils = require('../../../utils.js');
11
8
  var components_countdownLoader_component = require('../../countdown-loader/component.js');
9
+ var components_header_component = require('../../header/component.js');
12
10
 
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
-
15
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
17
-
18
- var styles = {"component":"confirmation__component_hd738","center":"confirmation__center_hd738","typographyTheme":"confirmation__typographyTheme_hd738","description":"confirmation__description_hd738","countdownWrap":"confirmation__countdownWrap_hd738","loader":"confirmation__loader_hd738"};
11
+ var styles = {"component":"confirmation__component_ef44y","center":"confirmation__center_ef44y","typographyTheme":"confirmation__typographyTheme_ef44y","description":"confirmation__description_ef44y","countdownWrap":"confirmation__countdownWrap_ef44y","loader":"confirmation__loader_ef44y"};
19
12
  require('./index.css')
20
13
 
21
14
  var TempBlock = function (_a) {
@@ -31,11 +24,11 @@ var TempBlock = function (_a) {
31
24
  onTempBlockFinished();
32
25
  }
33
26
  }, [timeLeft, onChangeScreen, onTempBlockFinished]);
34
- return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[alignContent]) },
35
- React__default['default'].createElement(components_header_component.Header, { mobile: mobile }, texts.tempBlockTitle),
36
- React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default'](styles.description, (_b = {}, _b[styles.typographyTheme] = !mobile, _b)) }, texts.tempBlockDescription),
37
- React__default['default'].createElement("div", { className: cn__default['default'](styles.countdownWrap, (_c = {}, _c[styles.typographyTheme] = !mobile, _c)) },
38
- React__default['default'].createElement(components_countdownLoader_component.CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
27
+ return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
28
+ React.createElement(components_header_component.Header, { mobile: mobile }, texts.tempBlockTitle),
29
+ React.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, (_b = {}, _b[styles.typographyTheme] = !mobile, _b)) }, texts.tempBlockDescription),
30
+ React.createElement("div", { className: cn(styles.countdownWrap, (_c = {}, _c[styles.typographyTheme] = !mobile, _c)) },
31
+ React.createElement(components_countdownLoader_component.CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
39
32
  utils.formatMsAsMinutes(timeLeft))));
40
33
  };
41
34
 
@@ -1,4 +1,4 @@
1
- /* hash: 1uyk7 */
1
+ /* hash: 1jk8w */
2
2
  :root {
3
3
  --color-light-text-primary: #0b1f35;
4
4
  }
@@ -31,28 +31,28 @@
31
31
 
32
32
  /* header */
33
33
  }
34
- .confirmation__component_hd738 {
34
+ .confirmation__component_ef44y {
35
35
  display: flex;
36
36
  flex-direction: column;
37
37
  }
38
- .confirmation__center_hd738 {
38
+ .confirmation__center_ef44y {
39
39
  align-items: center;
40
40
  text-align: center;
41
41
  }
42
- .confirmation__typographyTheme_hd738.confirmation__typographyTheme_hd738 {
42
+ .confirmation__typographyTheme_ef44y.confirmation__typographyTheme_ef44y {
43
43
  font-size: var(--confirmation-text-font-size);
44
44
  line-height: var(--confirmation-text-line-height);
45
45
  font-weight: var(--confirmation-text-font-weight);
46
46
  font-family: var(--confirmation-text-font-family);
47
47
  color: var(--confirmation-text-color);
48
48
  }
49
- .confirmation__description_hd738.confirmation__description_hd738 {
49
+ .confirmation__description_ef44y.confirmation__description_ef44y {
50
50
  margin-bottom: var(--gap-xs);
51
51
  }
52
- .confirmation__countdownWrap_hd738 {
52
+ .confirmation__countdownWrap_ef44y {
53
53
  display: flex;
54
54
  align-items: center;
55
55
  }
56
- .confirmation__loader_hd738 {
56
+ .confirmation__loader_ef44y {
57
57
  margin-right: var(--gap-xs);
58
58
  }
@@ -1,15 +1,13 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
3
+ var components_screens_tempBlock_component = require('./component.js');
5
4
  require('react');
6
5
  require('classnames');
7
- require('../../../utils.js');
8
- require('../../../context.js');
9
6
  require('@alfalab/core-components-typography');
10
- require('../../header/component.js');
7
+ require('../../../context.js');
8
+ require('../../../utils.js');
11
9
  require('../../countdown-loader/component.js');
12
- var components_screens_tempBlock_component = require('./component.js');
10
+ require('../../header/component.js');
13
11
 
14
12
 
15
13
 
package/context.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var utils = require('./utils.js');
7
5
 
@@ -0,0 +1,44 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var cn = require('classnames');
5
+ var coreComponentsButton = require('@alfalab/core-components-button');
6
+ var coreComponentsLoader = require('@alfalab/core-components-loader');
7
+ var coreComponentsTypography = require('@alfalab/core-components-typography');
8
+ var context = require('./context.js');
9
+ var utils = require('./utils.js');
10
+
11
+ var styles = {"component":"confirmation__component_14vvl","typographyTheme":"confirmation__typographyTheme_14vvl","phone":"confirmation__phone_14vvl","compact":"confirmation__compact_14vvl","loaderWrap":"confirmation__loaderWrap_14vvl","left":"confirmation__left_14vvl","center":"confirmation__center_14vvl","codeInput":"confirmation__codeInput_14vvl","smsComeLink":"confirmation__smsComeLink_14vvl","countdownContainer":"confirmation__countdownContainer_14vvl","countdownMobile":"confirmation__countdownMobile_14vvl","countdownLoaderMobile":"confirmation__countdownLoaderMobile_14vvl","getCodeButton":"confirmation__getCodeButton_14vvl","getCodeButtonMobile":"confirmation__getCodeButtonMobile_14vvl","containerInput":"confirmation__containerInput_14vvl"};
12
+ require('./components/screens/initial/index.css')
13
+
14
+ var CountdownSection = function (_a) {
15
+ var _b, _c;
16
+ var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, mobile = _a.mobile, handleSmsRetryClick = _a.handleSmsRetryClick;
17
+ var _d = React.useContext(context.ConfirmationContext), state = _d.state, texts = _d.texts, timeLeft = _d.timeLeft, blockSmsRetry = _d.blockSmsRetry;
18
+ var renderText = function (text) {
19
+ var _a;
20
+ return (React.createElement(coreComponentsTypography.Typography.Text, { className: cn(styles.countdownContainer, (_a = {},
21
+ _a[styles.countdownMobile] = mobile,
22
+ _a[styles.typographyTheme] = !mobile,
23
+ _a)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, text));
24
+ };
25
+ if (codeSendHintVisible)
26
+ return renderText(texts.codeSended);
27
+ if (processing) {
28
+ return (React.createElement("div", { className: cn(styles.loaderWrap, styles.countdownContainer, (_b = {},
29
+ _b[styles.countdownLoaderMobile] = mobile,
30
+ _b[styles.typographyTheme] = !mobile,
31
+ _b)) },
32
+ React.createElement(coreComponentsLoader.Loader, null),
33
+ React.createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
34
+ }
35
+ if (blockSmsRetry)
36
+ return renderText(texts.noAttemptsLeft);
37
+ if (timePassed) {
38
+ return (React.createElement(coreComponentsButton.Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn(styles.getCodeButton, (_c = {}, _c[styles.getCodeButtonMobile] = mobile, _c)) }, texts.buttonRetry));
39
+ }
40
+ return renderText("".concat(texts.countdown, " ").concat(utils.formatMsAsMinutes(timeLeft)));
41
+ };
42
+
43
+ exports.CountdownSection = CountdownSection;
44
+ exports.styles = styles;
@@ -3,21 +3,15 @@
3
3
  var React = require('react');
4
4
  var cn = require('classnames');
5
5
  var hooks = require('@alfalab/hooks');
6
- var utils = require('./utils.js');
7
6
  var context = require('./context.js');
8
7
  var types = require('./types.js');
8
+ var utils = require('./utils.js');
9
9
  var components_screens_initial_component = require('./components/screens/initial/component.js');
10
10
  var components_screens_hint_component = require('./components/screens/hint/component.js');
11
11
  var components_screens_fatalError_component = require('./components/screens/fatal-error/component.js');
12
12
  var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
13
13
  var styles = require('./components/base-confirmation/index.module.css');
14
14
 
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
-
17
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
19
- var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
20
-
21
15
  /******************************************************************************
22
16
  Copyright (c) Microsoft Corporation.
23
17
 
@@ -64,8 +58,8 @@ var confirmationScreens = {
64
58
  TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
65
59
  };
66
60
  var BaseConfirmation = function (_a) {
67
- var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, mobile = _a.mobile, clearCodeOnError = _a.clearCodeOnError, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError"]);
68
- var _f = utils.useCountdown(countdownDuration), timeLeft = _f[0], startTimer = _f[1], stopTimer = _f[2];
61
+ var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, mobile = _a.mobile, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError"]);
62
+ var _g = utils.useCountdown(countdownDuration), timeLeft = _g[0], startTimer = _g[1], stopTimer = _g[2];
69
63
  var prevState = hooks.usePrevious(state);
70
64
  React.useEffect(function () {
71
65
  startTimer();
@@ -121,8 +115,8 @@ var BaseConfirmation = function (_a) {
121
115
  };
122
116
  var screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
123
117
  var CurrentScreen = screensMap[screen];
124
- return (React__default['default'].createElement(context.ConfirmationContext.Provider, { value: contextValue },
125
- React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, { mobile: mobile }))));
118
+ return (React.createElement(context.ConfirmationContext.Provider, { value: contextValue },
119
+ React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId }, CurrentScreen && React.createElement(CurrentScreen, { mobile: mobile }))));
126
120
  };
127
121
 
128
122
  exports.BaseConfirmation = BaseConfirmation;
@@ -1,38 +1,32 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var components_baseConfirmation_component = require('./component-5a4af768.js');
3
+ var components_baseConfirmation_component = require('./component-895f6f86.js');
6
4
  var React = require('react');
7
5
  require('classnames');
8
6
  require('@alfalab/hooks');
9
- require('./utils.js');
10
7
  require('./context.js');
8
+ require('./utils.js');
11
9
  require('./types.js');
10
+ require('./components/screens/initial/component.js');
12
11
  require('@alfalab/core-components-button/cssm');
13
12
  require('@alfalab/core-components-code-input/cssm');
14
13
  require('@alfalab/core-components-link/cssm');
15
14
  require('@alfalab/core-components-typography/cssm');
16
- require('./components/header/index.module.css');
17
15
  require('./components/header/component.js');
16
+ require('./components/header/index.module.css');
17
+ require('./components/screens/initial/countdown-section.js');
18
18
  require('@alfalab/core-components-loader/cssm');
19
19
  require('./components/screens/initial/index.module.css');
20
- require('./components/screens/initial/countdown-section.js');
21
- require('./components/screens/initial/component.js');
22
- require('./components/screens/hint/index.module.css');
23
20
  require('./components/screens/hint/component.js');
24
- require('./components/screens/fatal-error/index.module.css');
21
+ require('./components/screens/hint/index.module.css');
25
22
  require('./components/screens/fatal-error/component.js');
26
- require('./components/countdown-loader/index.module.css');
23
+ require('./components/screens/fatal-error/index.module.css');
24
+ require('./components/screens/temp-block/component.js');
27
25
  require('./components/countdown-loader/component.js');
26
+ require('./components/countdown-loader/index.module.css');
28
27
  require('./components/screens/temp-block/index.module.css');
29
- require('./components/screens/temp-block/component.js');
30
28
  require('./components/base-confirmation/index.module.css');
31
29
 
32
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
33
-
34
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
35
-
36
- var ConfirmationDesktop = function (props) { return (React__default['default'].createElement(components_baseConfirmation_component.BaseConfirmation, components_baseConfirmation_component.__assign({}, props))); };
30
+ var ConfirmationDesktop = function (props) { return (React.createElement(components_baseConfirmation_component.BaseConfirmation, components_baseConfirmation_component.__assign({}, props))); };
37
31
 
38
32
  exports.ConfirmationDesktop = ConfirmationDesktop;