@alfalab/core-components-confirmation 12.3.3 → 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 (164) hide show
  1. package/{component-c18159ad.d.ts → component-5a9a6986.d.ts} +0 -0
  2. package/{component-c18159ad.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 -8
  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 +10 -5
  19. package/components/screens/fatal-error/index.js +3 -5
  20. package/components/screens/hint/component.js +19 -27
  21. package/components/screens/hint/index.css +15 -14
  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 +10 -17
  29. package/components/screens/temp-block/index.css +13 -5
  30. package/components/screens/temp-block/index.js +4 -6
  31. package/context.js +0 -2
  32. package/{countdown-section-fa5d99c6.d.ts → countdown-section-b356354f.d.ts} +0 -0
  33. package/countdown-section-b356354f.js +44 -0
  34. package/cssm/{component-cbe72bf1.d.ts → component-895f6f86.d.ts} +0 -0
  35. package/cssm/{component-cbe72bf1.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/base-confirmation/index.module.css +0 -6
  43. package/cssm/components/countdown-loader/component.js +2 -9
  44. package/cssm/components/countdown-loader/index.js +1 -3
  45. package/cssm/components/header/component.js +1 -9
  46. package/cssm/components/header/index.js +1 -3
  47. package/cssm/components/header/index.module.css +3 -3
  48. package/cssm/components/index.js +12 -14
  49. package/cssm/components/screens/fatal-error/component.js +7 -15
  50. package/cssm/components/screens/fatal-error/index.js +4 -6
  51. package/cssm/components/screens/fatal-error/index.module.css +6 -1
  52. package/cssm/components/screens/hint/component.js +19 -28
  53. package/cssm/components/screens/hint/index.js +4 -6
  54. package/cssm/components/screens/hint/index.module.css +9 -8
  55. package/cssm/components/screens/index.js +10 -12
  56. package/cssm/components/screens/initial/component.js +17 -20
  57. package/cssm/components/screens/initial/countdown-section.js +24 -39
  58. package/cssm/components/screens/initial/index.js +6 -8
  59. package/cssm/components/screens/initial/index.module.css +5 -5
  60. package/cssm/components/screens/temp-block/component.js +11 -19
  61. package/cssm/components/screens/temp-block/index.js +6 -8
  62. package/cssm/components/screens/temp-block/index.module.css +10 -2
  63. package/cssm/context.js +0 -2
  64. package/cssm/desktop.d.ts +1 -0
  65. package/cssm/desktop.js +10 -12
  66. package/cssm/index.js +24 -26
  67. package/cssm/mobile.d.ts +1 -0
  68. package/cssm/mobile.js +10 -12
  69. package/cssm/responsive.d.ts +1 -0
  70. package/cssm/responsive.js +11 -13
  71. package/cssm/types.js +0 -2
  72. package/cssm/utils.js +6 -8
  73. package/desktop.d.ts +1 -0
  74. package/desktop.js +6 -8
  75. package/esm/{component-2c4a15b0.d.ts → component-3212dc9c.d.ts} +0 -0
  76. package/esm/{component-2c4a15b0.js → component-3212dc9c.js} +5 -5
  77. package/esm/component.desktop.js +5 -5
  78. package/esm/component.mobile.js +6 -6
  79. package/esm/component.responsive.js +8 -8
  80. package/esm/components/base-confirmation/component.js +7 -7
  81. package/esm/components/base-confirmation/index.css +2 -8
  82. package/esm/components/base-confirmation/index.d.ts +1 -1
  83. package/esm/components/base-confirmation/index.js +5 -5
  84. package/esm/components/countdown-loader/component.js +3 -3
  85. package/esm/components/countdown-loader/index.css +2 -2
  86. package/esm/components/countdown-loader/index.js +1 -1
  87. package/esm/components/header/component.js +1 -1
  88. package/esm/components/header/index.css +4 -4
  89. package/esm/components/header/index.js +1 -1
  90. package/esm/components/index.js +9 -9
  91. package/esm/components/screens/fatal-error/component.js +3 -3
  92. package/esm/components/screens/fatal-error/index.css +10 -5
  93. package/esm/components/screens/fatal-error/index.js +3 -3
  94. package/esm/components/screens/hint/component.js +18 -19
  95. package/esm/components/screens/hint/index.css +15 -14
  96. package/esm/components/screens/hint/index.js +3 -3
  97. package/esm/components/screens/index.js +8 -8
  98. package/esm/components/screens/initial/component.js +10 -5
  99. package/esm/components/screens/initial/countdown-section.js +4 -4
  100. package/esm/components/screens/initial/index.css +18 -18
  101. package/esm/components/screens/initial/index.js +5 -5
  102. package/esm/components/screens/temp-block/component.js +7 -7
  103. package/esm/components/screens/temp-block/index.css +13 -5
  104. package/esm/components/screens/temp-block/index.js +4 -4
  105. package/esm/{countdown-section-a819b4f1.d.ts → countdown-section-5a8d74ee.d.ts} +0 -0
  106. package/esm/countdown-section-5a8d74ee.js +41 -0
  107. package/esm/desktop.d.ts +1 -0
  108. package/esm/desktop.js +6 -6
  109. package/esm/index.js +12 -12
  110. package/esm/mobile.css +2 -2
  111. package/esm/mobile.d.ts +1 -0
  112. package/esm/mobile.js +6 -6
  113. package/esm/responsive.d.ts +1 -0
  114. package/esm/responsive.js +6 -6
  115. package/esm/utils.js +6 -6
  116. package/index.js +21 -23
  117. package/mobile.css +2 -2
  118. package/mobile.d.ts +1 -0
  119. package/mobile.js +6 -8
  120. package/modern/component.desktop.js +5 -5
  121. package/modern/component.mobile.js +6 -6
  122. package/modern/component.responsive.js +8 -8
  123. package/modern/components/base-confirmation/component.js +9 -9
  124. package/modern/components/base-confirmation/index.css +2 -8
  125. package/modern/components/base-confirmation/index.js +5 -5
  126. package/modern/components/countdown-loader/component.js +1 -1
  127. package/modern/components/countdown-loader/index.css +2 -2
  128. package/modern/components/countdown-loader/index.js +1 -1
  129. package/modern/components/header/component.js +1 -1
  130. package/modern/components/header/index.css +4 -4
  131. package/modern/components/header/index.js +1 -1
  132. package/modern/components/index.js +9 -9
  133. package/modern/components/screens/fatal-error/component.js +3 -3
  134. package/modern/components/screens/fatal-error/index.css +10 -5
  135. package/modern/components/screens/fatal-error/index.js +3 -3
  136. package/modern/components/screens/hint/component.js +18 -19
  137. package/modern/components/screens/hint/index.css +15 -14
  138. package/modern/components/screens/hint/index.js +3 -3
  139. package/modern/components/screens/index.js +8 -8
  140. package/modern/components/screens/initial/component.js +10 -5
  141. package/modern/components/screens/initial/countdown-section.js +4 -4
  142. package/modern/components/screens/initial/index.css +18 -18
  143. package/modern/components/screens/initial/index.js +5 -5
  144. package/modern/components/screens/temp-block/component.js +7 -7
  145. package/modern/components/screens/temp-block/index.css +13 -5
  146. package/modern/components/screens/temp-block/index.js +4 -4
  147. package/modern/{countdown-section-5519e1b6.d.ts → countdown-section-b8b393a2.d.ts} +0 -0
  148. package/modern/countdown-section-b8b393a2.js +36 -0
  149. package/modern/desktop.d.ts +1 -0
  150. package/modern/desktop.js +6 -6
  151. package/modern/index.js +12 -12
  152. package/modern/mobile.css +2 -2
  153. package/modern/mobile.d.ts +1 -0
  154. package/modern/mobile.js +6 -6
  155. package/modern/responsive.d.ts +1 -0
  156. package/modern/responsive.js +8 -8
  157. package/package.json +2 -2
  158. package/responsive.d.ts +1 -0
  159. package/responsive.js +6 -8
  160. package/types.js +0 -2
  161. package/utils.js +6 -8
  162. package/countdown-section-fa5d99c6.js +0 -56
  163. package/esm/countdown-section-a819b4f1.js +0 -48
  164. package/modern/countdown-section-5519e1b6.js +0 -46
@@ -1,4 +1,4 @@
1
- /* hash: 1xlg8 */
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_19pqy {
41
+ .confirmation__component_14vvl {
42
42
  display: flex;
43
43
  flex-direction: column;
44
44
  }
45
- .confirmation__typographyTheme_19pqy {
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_19pqy {
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_19pqy {
56
+ .confirmation__compact_14vvl {
57
57
  margin-bottom: var(--gap-xl);
58
58
  }
59
- .confirmation__loaderWrap_19pqy {
59
+ .confirmation__loaderWrap_14vvl {
60
60
  display: flex;
61
61
  align-items: center;
62
62
  }
63
- .confirmation__left_19pqy {
63
+ .confirmation__left_14vvl {
64
64
  align-items: flex-start;
65
65
  }
66
- .confirmation__center_19pqy {
66
+ .confirmation__center_14vvl {
67
67
  align-items: center;
68
68
  text-align: center
69
69
  }
70
- .confirmation__center_19pqy .confirmation__loaderWrap_19pqy {
70
+ .confirmation__center_14vvl .confirmation__loaderWrap_14vvl {
71
71
  justify-content: center;
72
72
  }
73
- .confirmation__center_19pqy input {
73
+ .confirmation__center_14vvl input {
74
74
  margin: 0 var(--gap-2xs);
75
75
  }
76
- .confirmation__codeInput_19pqy {
76
+ .confirmation__codeInput_14vvl {
77
77
  margin-bottom: var(--gap-s);
78
78
  }
79
- .confirmation__smsComeLink_19pqy {
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_19pqy {
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_19pqy {
88
+ .confirmation__countdownMobile_14vvl.confirmation__countdownMobile_14vvl {
89
89
  margin-bottom: var(--gap-l);
90
90
  }
91
- .confirmation__countdownLoaderMobile_19pqy {
91
+ .confirmation__countdownLoaderMobile_14vvl {
92
92
  margin-bottom: var(--gap-m);
93
93
  }
94
- .confirmation__getCodeButton_19pqy {
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_19pqy {
99
+ .confirmation__getCodeButtonMobile_14vvl {
100
100
  margin-bottom: 0;
101
101
  }
102
- .confirmation__containerInput_19pqy {
102
+ .confirmation__containerInput_14vvl {
103
103
  min-height: 80px;
104
104
  }
@@ -1,13 +1,13 @@
1
+ export { Initial } from './component.js';
1
2
  import 'react';
2
3
  import 'classnames';
3
- import '@alfalab/hooks';
4
- import '../../../utils.js';
5
- import '../../../context.js';
6
4
  import '@alfalab/core-components-button/modern';
7
5
  import '@alfalab/core-components-code-input/modern';
8
6
  import '@alfalab/core-components-link/modern';
9
7
  import '@alfalab/core-components-typography/modern';
8
+ import '@alfalab/hooks';
9
+ import '../../../context.js';
10
+ import '../../../utils.js';
10
11
  import '../../header/component.js';
12
+ import '../../../countdown-section-b8b393a2.js';
11
13
  import '@alfalab/core-components-loader/modern';
12
- import '../../../countdown-section-5519e1b6.js';
13
- export { Initial } from './component.js';
@@ -1,16 +1,16 @@
1
- import React, { useContext, useEffect, Fragment } from 'react';
1
+ import React, { useContext, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
- import { useCountdown, formatMsAsMinutes } from '../../../utils.js';
4
- import { ConfirmationContext } from '../../../context.js';
5
3
  import { Typography } from '@alfalab/core-components-typography/modern';
6
- import { Header } from '../../header/component.js';
4
+ import { ConfirmationContext } from '../../../context.js';
5
+ import { useCountdown, formatMsAsMinutes } from '../../../utils.js';
7
6
  import { CountdownLoader } from '../../countdown-loader/component.js';
7
+ import { Header } from '../../header/component.js';
8
8
 
9
- var styles = {"typographyTheme":"confirmation__typographyTheme_j8zh5","description":"confirmation__description_j8zh5","countdownWrap":"confirmation__countdownWrap_j8zh5","loader":"confirmation__loader_j8zh5"};
9
+ const 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"};
10
10
  require('./index.css')
11
11
 
12
12
  const TempBlock = ({ mobile }) => {
13
- const { texts, tempBlockDuration, onChangeScreen, onTempBlockFinished } = useContext(ConfirmationContext);
13
+ const { alignContent, texts, tempBlockDuration, onChangeScreen, onTempBlockFinished } = useContext(ConfirmationContext);
14
14
  const [timeLeft, startTimer] = useCountdown(tempBlockDuration);
15
15
  useEffect(() => {
16
16
  startTimer();
@@ -20,7 +20,7 @@ const TempBlock = ({ mobile }) => {
20
20
  onTempBlockFinished();
21
21
  }
22
22
  }, [timeLeft, onChangeScreen, onTempBlockFinished]);
23
- return (React.createElement(Fragment, null,
23
+ return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
24
24
  React.createElement(Header, { mobile: mobile }, texts.tempBlockTitle),
25
25
  React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, { [styles.typographyTheme]: !mobile }) }, texts.tempBlockDescription),
26
26
  React.createElement("div", { className: cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile }) },
@@ -1,4 +1,4 @@
1
- /* hash: v338i */
1
+ /* hash: 1jk8w */
2
2
  :root {
3
3
  --color-light-text-primary: #0b1f35;
4
4
  }
@@ -31,20 +31,28 @@
31
31
 
32
32
  /* header */
33
33
  }
34
- .confirmation__typographyTheme_j8zh5 {
34
+ .confirmation__component_ef44y {
35
+ display: flex;
36
+ flex-direction: column;
37
+ }
38
+ .confirmation__center_ef44y {
39
+ align-items: center;
40
+ text-align: center;
41
+ }
42
+ .confirmation__typographyTheme_ef44y.confirmation__typographyTheme_ef44y {
35
43
  font-size: var(--confirmation-text-font-size);
36
44
  line-height: var(--confirmation-text-line-height);
37
45
  font-weight: var(--confirmation-text-font-weight);
38
46
  font-family: var(--confirmation-text-font-family);
39
47
  color: var(--confirmation-text-color);
40
48
  }
41
- .confirmation__description_j8zh5 {
49
+ .confirmation__description_ef44y.confirmation__description_ef44y {
42
50
  margin-bottom: var(--gap-xs);
43
51
  }
44
- .confirmation__countdownWrap_j8zh5 {
52
+ .confirmation__countdownWrap_ef44y {
45
53
  display: flex;
46
54
  align-items: center;
47
55
  }
48
- .confirmation__loader_j8zh5 {
56
+ .confirmation__loader_ef44y {
49
57
  margin-right: var(--gap-xs);
50
58
  }
@@ -1,8 +1,8 @@
1
+ export { TempBlock } from './component.js';
1
2
  import 'react';
2
3
  import 'classnames';
3
- import '../../../utils.js';
4
- import '../../../context.js';
5
4
  import '@alfalab/core-components-typography/modern';
6
- import '../../header/component.js';
5
+ import '../../../context.js';
6
+ import '../../../utils.js';
7
7
  import '../../countdown-loader/component.js';
8
- export { TempBlock } from './component.js';
8
+ import '../../header/component.js';
@@ -0,0 +1,36 @@
1
+ import React, { useContext } from 'react';
2
+ import cn from 'classnames';
3
+ import { Button } from '@alfalab/core-components-button/modern';
4
+ import { Loader } from '@alfalab/core-components-loader/modern';
5
+ import { Typography } from '@alfalab/core-components-typography/modern';
6
+ import { ConfirmationContext } from './context.js';
7
+ import { formatMsAsMinutes } from './utils.js';
8
+
9
+ const 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"};
10
+ require('./components/screens/initial/index.css')
11
+
12
+ const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile, handleSmsRetryClick, }) => {
13
+ const { state, texts, timeLeft, blockSmsRetry } = useContext(ConfirmationContext);
14
+ const renderText = (text) => (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, {
15
+ [styles.countdownMobile]: mobile,
16
+ [styles.typographyTheme]: !mobile,
17
+ }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, text));
18
+ if (codeSendHintVisible)
19
+ return renderText(texts.codeSended);
20
+ if (processing) {
21
+ return (React.createElement("div", { className: cn(styles.loaderWrap, styles.countdownContainer, {
22
+ [styles.countdownLoaderMobile]: mobile,
23
+ [styles.typographyTheme]: !mobile,
24
+ }) },
25
+ React.createElement(Loader, null),
26
+ React.createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
27
+ }
28
+ if (blockSmsRetry)
29
+ return renderText(texts.noAttemptsLeft);
30
+ if (timePassed) {
31
+ return (React.createElement(Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile }) }, texts.buttonRetry));
32
+ }
33
+ return renderText(`${texts.countdown} ${formatMsAsMinutes(timeLeft)}`);
34
+ };
35
+
36
+ export { CountdownSection as C, styles as s };
@@ -1 +1,2 @@
1
1
  export * from "./component.desktop";
2
+ export {};
package/modern/desktop.js CHANGED
@@ -1,20 +1,20 @@
1
+ export { ConfirmationDesktop } from './component.desktop.js';
1
2
  import 'react';
3
+ import './components/base-confirmation/component.js';
2
4
  import 'classnames';
3
5
  import '@alfalab/hooks';
4
- import './utils.js';
5
6
  import './context.js';
7
+ import './utils.js';
6
8
  import './types.js';
9
+ import './components/screens/initial/component.js';
7
10
  import '@alfalab/core-components-button/modern';
8
11
  import '@alfalab/core-components-code-input/modern';
9
12
  import '@alfalab/core-components-link/modern';
10
13
  import '@alfalab/core-components-typography/modern';
11
14
  import './components/header/component.js';
15
+ import './countdown-section-b8b393a2.js';
12
16
  import '@alfalab/core-components-loader/modern';
13
- import './countdown-section-5519e1b6.js';
14
- import './components/screens/initial/component.js';
15
17
  import './components/screens/hint/component.js';
16
18
  import './components/screens/fatal-error/component.js';
17
- import './components/countdown-loader/component.js';
18
19
  import './components/screens/temp-block/component.js';
19
- import './components/base-confirmation/component.js';
20
- export { ConfirmationDesktop } from './component.desktop.js';
20
+ import './components/countdown-loader/component.js';
package/modern/index.js CHANGED
@@ -1,22 +1,22 @@
1
+ export { ConfirmationDesktop as Confirmation } from './component.desktop.js';
2
+ export { ConfirmationResponsive } from './component.responsive.js';
3
+ export { Initial } from './components/screens/initial/component.js';
4
+ export { Hint } from './components/screens/hint/component.js';
5
+ export { FatalError } from './components/screens/fatal-error/component.js';
6
+ export { TempBlock } from './components/screens/temp-block/component.js';
7
+ export { CountdownLoader } from './components/countdown-loader/component.js';
8
+ export { ConfirmationContext } from './context.js';
9
+ export { defaultTexts } from './types.js';
10
+ export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown } from './utils.js';
1
11
  import 'react';
12
+ import './components/base-confirmation/component.js';
2
13
  import 'classnames';
3
14
  import '@alfalab/hooks';
4
- export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown } from './utils.js';
5
- export { ConfirmationContext } from './context.js';
6
- export { defaultTexts } from './types.js';
7
15
  import '@alfalab/core-components-button/modern';
8
16
  import '@alfalab/core-components-code-input/modern';
9
17
  import '@alfalab/core-components-link/modern';
10
18
  import '@alfalab/core-components-typography/modern';
11
19
  import './components/header/component.js';
20
+ import './countdown-section-b8b393a2.js';
12
21
  import '@alfalab/core-components-loader/modern';
13
- import './countdown-section-5519e1b6.js';
14
- export { Initial } from './components/screens/initial/component.js';
15
- export { Hint } from './components/screens/hint/component.js';
16
- export { FatalError } from './components/screens/fatal-error/component.js';
17
- export { CountdownLoader } from './components/countdown-loader/component.js';
18
- export { TempBlock } from './components/screens/temp-block/component.js';
19
- import './components/base-confirmation/component.js';
20
- export { ConfirmationDesktop as Confirmation } from './component.desktop.js';
21
22
  import './component.mobile.js';
22
- export { ConfirmationResponsive } from './component.responsive.js';
package/modern/mobile.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ijak */
2
- .confirmation__container_174uf {
1
+ /* hash: 1ly2q */
2
+ .confirmation__container_12az3 {
3
3
  max-width: 288px;
4
4
  }
@@ -1 +1,2 @@
1
1
  export * from "./component.mobile";
2
+ export {};
package/modern/mobile.js CHANGED
@@ -1,20 +1,20 @@
1
+ export { ConfirmationMobile } from './component.mobile.js';
1
2
  import 'react';
2
3
  import 'classnames';
4
+ import './components/base-confirmation/component.js';
3
5
  import '@alfalab/hooks';
4
- import './utils.js';
5
6
  import './context.js';
7
+ import './utils.js';
6
8
  import './types.js';
9
+ import './components/screens/initial/component.js';
7
10
  import '@alfalab/core-components-button/modern';
8
11
  import '@alfalab/core-components-code-input/modern';
9
12
  import '@alfalab/core-components-link/modern';
10
13
  import '@alfalab/core-components-typography/modern';
11
14
  import './components/header/component.js';
15
+ import './countdown-section-b8b393a2.js';
12
16
  import '@alfalab/core-components-loader/modern';
13
- import './countdown-section-5519e1b6.js';
14
- import './components/screens/initial/component.js';
15
17
  import './components/screens/hint/component.js';
16
18
  import './components/screens/fatal-error/component.js';
17
- import './components/countdown-loader/component.js';
18
19
  import './components/screens/temp-block/component.js';
19
- import './components/base-confirmation/component.js';
20
- export { ConfirmationMobile } from './component.mobile.js';
20
+ import './components/countdown-loader/component.js';
@@ -1 +1,2 @@
1
1
  export * from "./component.responsive";
2
+ export {};
@@ -1,22 +1,22 @@
1
+ export { ConfirmationResponsive } from './component.responsive.js';
1
2
  import 'react';
2
- import 'classnames';
3
3
  import '@alfalab/hooks';
4
- import './utils.js';
4
+ import './component.desktop.js';
5
+ import './components/base-confirmation/component.js';
6
+ import 'classnames';
5
7
  import './context.js';
8
+ import './utils.js';
6
9
  import './types.js';
10
+ import './components/screens/initial/component.js';
7
11
  import '@alfalab/core-components-button/modern';
8
12
  import '@alfalab/core-components-code-input/modern';
9
13
  import '@alfalab/core-components-link/modern';
10
14
  import '@alfalab/core-components-typography/modern';
11
15
  import './components/header/component.js';
16
+ import './countdown-section-b8b393a2.js';
12
17
  import '@alfalab/core-components-loader/modern';
13
- import './countdown-section-5519e1b6.js';
14
- import './components/screens/initial/component.js';
15
18
  import './components/screens/hint/component.js';
16
19
  import './components/screens/fatal-error/component.js';
17
- import './components/countdown-loader/component.js';
18
20
  import './components/screens/temp-block/component.js';
19
- import './components/base-confirmation/component.js';
20
- import './component.desktop.js';
21
+ import './components/countdown-loader/component.js';
21
22
  import './component.mobile.js';
22
- export { ConfirmationResponsive } from './component.responsive.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-confirmation",
3
- "version": "12.3.3",
3
+ "version": "12.3.5",
4
4
  "description": "Sms confirmation component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,7 +15,7 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@alfalab/core-components-button": "^7.0.1",
18
- "@alfalab/core-components-code-input": "^2.2.0",
18
+ "@alfalab/core-components-code-input": "^2.3.0",
19
19
  "@alfalab/core-components-link": "^5.0.1",
20
20
  "@alfalab/core-components-loader": "^3.0.3",
21
21
  "@alfalab/core-components-typography": "^3.0.6",
package/responsive.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from "./component.responsive";
2
+ export {};
package/responsive.js CHANGED
@@ -1,29 +1,27 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('./component-c18159ad.js');
3
+ var component_responsive = require('./component.responsive.js');
4
+ require('./component-5a9a6986.js');
6
5
  require('react');
7
6
  require('classnames');
8
7
  require('@alfalab/hooks');
9
- require('./utils.js');
10
8
  require('./context.js');
9
+ require('./utils.js');
11
10
  require('./types.js');
11
+ require('./components/screens/initial/component.js');
12
12
  require('@alfalab/core-components-button');
13
13
  require('@alfalab/core-components-code-input');
14
14
  require('@alfalab/core-components-link');
15
15
  require('@alfalab/core-components-typography');
16
16
  require('./components/header/component.js');
17
+ require('./countdown-section-b356354f.js');
17
18
  require('@alfalab/core-components-loader');
18
- require('./countdown-section-fa5d99c6.js');
19
- require('./components/screens/initial/component.js');
20
19
  require('./components/screens/hint/component.js');
21
20
  require('./components/screens/fatal-error/component.js');
22
- require('./components/countdown-loader/component.js');
23
21
  require('./components/screens/temp-block/component.js');
22
+ require('./components/countdown-loader/component.js');
24
23
  require('./component.desktop.js');
25
24
  require('./component.mobile.js');
26
- var component_responsive = require('./component.responsive.js');
27
25
 
28
26
 
29
27
 
package/types.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var defaultTexts = {
6
4
  title: 'Введите код из\xa0сообщения',
7
5
  codeError: 'Код введён неверно',
package/utils.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
 
7
5
  /**
@@ -15,15 +13,15 @@ function formatMsAsMinutes(ms) {
15
13
  var totalMinutes = Math.floor(totalSeconds / 60);
16
14
  var totalHours = Math.floor(totalMinutes / 60);
17
15
  var seconds = totalSeconds % 60;
18
- var paddedSeconds = ("00" + seconds).slice(-2);
16
+ var paddedSeconds = "00".concat(seconds).slice(-2);
19
17
  if (totalHours > 0) {
20
18
  var minutes = totalMinutes % 60;
21
- var paddedMinutes_1 = ("00" + minutes).slice(-2);
22
- var paddedHours = ("00" + totalHours).slice(-2);
23
- return paddedHours + ":" + paddedMinutes_1 + ":" + paddedSeconds;
19
+ var paddedMinutes_1 = "00".concat(minutes).slice(-2);
20
+ var paddedHours = "00".concat(totalHours).slice(-2);
21
+ return "".concat(paddedHours, ":").concat(paddedMinutes_1, ":").concat(paddedSeconds);
24
22
  }
25
- var paddedMinutes = ("00" + totalMinutes).slice(-2);
26
- return paddedMinutes + ":" + paddedSeconds;
23
+ var paddedMinutes = "00".concat(totalMinutes).slice(-2);
24
+ return "".concat(paddedMinutes, ":").concat(paddedSeconds);
27
25
  }
28
26
  /**
29
27
  * Возвращает время, которое осталось до истечения таймера в ms
@@ -1,56 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var cn = require('classnames');
5
- var utils = require('./utils.js');
6
- var context = require('./context.js');
7
- var coreComponentsButton = require('@alfalab/core-components-button');
8
- var coreComponentsTypography = require('@alfalab/core-components-typography');
9
- var coreComponentsLoader = require('@alfalab/core-components-loader');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
15
-
16
- var styles = {"component":"confirmation__component_19pqy","typographyTheme":"confirmation__typographyTheme_19pqy","phone":"confirmation__phone_19pqy","compact":"confirmation__compact_19pqy","loaderWrap":"confirmation__loaderWrap_19pqy","left":"confirmation__left_19pqy","center":"confirmation__center_19pqy","codeInput":"confirmation__codeInput_19pqy","smsComeLink":"confirmation__smsComeLink_19pqy","countdownContainer":"confirmation__countdownContainer_19pqy","countdownMobile":"confirmation__countdownMobile_19pqy","countdownLoaderMobile":"confirmation__countdownLoaderMobile_19pqy","getCodeButton":"confirmation__getCodeButton_19pqy","getCodeButtonMobile":"confirmation__getCodeButtonMobile_19pqy","containerInput":"confirmation__containerInput_19pqy"};
17
- require('./components/screens/initial/index.css')
18
-
19
- var CountdownSection = function (_a) {
20
- var _b, _c, _d, _e, _f;
21
- var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, mobile = _a.mobile, handleSmsRetryClick = _a.handleSmsRetryClick;
22
- var _g = React.useContext(context.ConfirmationContext), state = _g.state, texts = _g.texts, timeLeft = _g.timeLeft, blockSmsRetry = _g.blockSmsRetry;
23
- if (codeSendHintVisible) {
24
- return (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: cn__default['default'](styles.countdownContainer, (_b = {},
25
- _b[styles.countdownMobile] = mobile,
26
- _b[styles.typographyTheme] = !mobile,
27
- _b)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.codeSended));
28
- }
29
- if (processing) {
30
- return (React__default['default'].createElement("div", { className: cn__default['default'](styles.loaderWrap, styles.countdownContainer, (_c = {},
31
- _c[styles.countdownLoaderMobile] = mobile,
32
- _c[styles.typographyTheme] = !mobile,
33
- _c)) },
34
- React__default['default'].createElement(coreComponentsLoader.Loader, null),
35
- React__default['default'].createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
36
- }
37
- if (blockSmsRetry) {
38
- return (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: cn__default['default'](styles.countdownContainer, (_d = {},
39
- _d[styles.countdownMobile] = mobile,
40
- _d[styles.typographyTheme] = !mobile,
41
- _d)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.noAttemptsLeft));
42
- }
43
- if (timePassed) {
44
- return (React__default['default'].createElement(coreComponentsButton.Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn__default['default'](styles.getCodeButton, (_e = {}, _e[styles.getCodeButtonMobile] = mobile, _e)) }, texts.buttonRetry));
45
- }
46
- return (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: cn__default['default'](styles.countdown, styles.countdownContainer, (_f = {},
47
- _f[styles.countdownMobile] = mobile,
48
- _f[styles.typographyTheme] = !mobile,
49
- _f)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' },
50
- texts.countdown,
51
- " ",
52
- utils.formatMsAsMinutes(timeLeft)));
53
- };
54
-
55
- exports.CountdownSection = CountdownSection;
56
- exports.styles = styles;
@@ -1,48 +0,0 @@
1
- import React, { useContext } from 'react';
2
- import cn from 'classnames';
3
- import { formatMsAsMinutes } from './utils.js';
4
- import { ConfirmationContext } from './context.js';
5
- import { Button } from '@alfalab/core-components-button/esm';
6
- import { Typography } from '@alfalab/core-components-typography/esm';
7
- import { Loader } from '@alfalab/core-components-loader/esm';
8
-
9
- var styles = {"component":"confirmation__component_19pqy","typographyTheme":"confirmation__typographyTheme_19pqy","phone":"confirmation__phone_19pqy","compact":"confirmation__compact_19pqy","loaderWrap":"confirmation__loaderWrap_19pqy","left":"confirmation__left_19pqy","center":"confirmation__center_19pqy","codeInput":"confirmation__codeInput_19pqy","smsComeLink":"confirmation__smsComeLink_19pqy","countdownContainer":"confirmation__countdownContainer_19pqy","countdownMobile":"confirmation__countdownMobile_19pqy","countdownLoaderMobile":"confirmation__countdownLoaderMobile_19pqy","getCodeButton":"confirmation__getCodeButton_19pqy","getCodeButtonMobile":"confirmation__getCodeButtonMobile_19pqy","containerInput":"confirmation__containerInput_19pqy"};
10
- require('./components/screens/initial/index.css')
11
-
12
- var CountdownSection = function (_a) {
13
- var _b, _c, _d, _e, _f;
14
- var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, mobile = _a.mobile, handleSmsRetryClick = _a.handleSmsRetryClick;
15
- var _g = useContext(ConfirmationContext), state = _g.state, texts = _g.texts, timeLeft = _g.timeLeft, blockSmsRetry = _g.blockSmsRetry;
16
- if (codeSendHintVisible) {
17
- return (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, (_b = {},
18
- _b[styles.countdownMobile] = mobile,
19
- _b[styles.typographyTheme] = !mobile,
20
- _b)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.codeSended));
21
- }
22
- if (processing) {
23
- return (React.createElement("div", { className: cn(styles.loaderWrap, styles.countdownContainer, (_c = {},
24
- _c[styles.countdownLoaderMobile] = mobile,
25
- _c[styles.typographyTheme] = !mobile,
26
- _c)) },
27
- React.createElement(Loader, null),
28
- React.createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
29
- }
30
- if (blockSmsRetry) {
31
- return (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, (_d = {},
32
- _d[styles.countdownMobile] = mobile,
33
- _d[styles.typographyTheme] = !mobile,
34
- _d)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.noAttemptsLeft));
35
- }
36
- if (timePassed) {
37
- return (React.createElement(Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn(styles.getCodeButton, (_e = {}, _e[styles.getCodeButtonMobile] = mobile, _e)) }, texts.buttonRetry));
38
- }
39
- return (React.createElement(Typography.Text, { className: cn(styles.countdown, styles.countdownContainer, (_f = {},
40
- _f[styles.countdownMobile] = mobile,
41
- _f[styles.typographyTheme] = !mobile,
42
- _f)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' },
43
- texts.countdown,
44
- " ",
45
- formatMsAsMinutes(timeLeft)));
46
- };
47
-
48
- export { CountdownSection as C, styles as s };
@@ -1,46 +0,0 @@
1
- import React, { useContext } from 'react';
2
- import cn from 'classnames';
3
- import { formatMsAsMinutes } from './utils.js';
4
- import { ConfirmationContext } from './context.js';
5
- import { Button } from '@alfalab/core-components-button/modern';
6
- import { Typography } from '@alfalab/core-components-typography/modern';
7
- import { Loader } from '@alfalab/core-components-loader/modern';
8
-
9
- var styles = {"component":"confirmation__component_19pqy","typographyTheme":"confirmation__typographyTheme_19pqy","phone":"confirmation__phone_19pqy","compact":"confirmation__compact_19pqy","loaderWrap":"confirmation__loaderWrap_19pqy","left":"confirmation__left_19pqy","center":"confirmation__center_19pqy","codeInput":"confirmation__codeInput_19pqy","smsComeLink":"confirmation__smsComeLink_19pqy","countdownContainer":"confirmation__countdownContainer_19pqy","countdownMobile":"confirmation__countdownMobile_19pqy","countdownLoaderMobile":"confirmation__countdownLoaderMobile_19pqy","getCodeButton":"confirmation__getCodeButton_19pqy","getCodeButtonMobile":"confirmation__getCodeButtonMobile_19pqy","containerInput":"confirmation__containerInput_19pqy"};
10
- require('./components/screens/initial/index.css')
11
-
12
- const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile, handleSmsRetryClick, }) => {
13
- const { state, texts, timeLeft, blockSmsRetry } = useContext(ConfirmationContext);
14
- if (codeSendHintVisible) {
15
- return (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, {
16
- [styles.countdownMobile]: mobile,
17
- [styles.typographyTheme]: !mobile,
18
- }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.codeSended));
19
- }
20
- if (processing) {
21
- return (React.createElement("div", { className: cn(styles.loaderWrap, styles.countdownContainer, {
22
- [styles.countdownLoaderMobile]: mobile,
23
- [styles.typographyTheme]: !mobile,
24
- }) },
25
- React.createElement(Loader, null),
26
- React.createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
27
- }
28
- if (blockSmsRetry) {
29
- return (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, {
30
- [styles.countdownMobile]: mobile,
31
- [styles.typographyTheme]: !mobile,
32
- }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.noAttemptsLeft));
33
- }
34
- if (timePassed) {
35
- return (React.createElement(Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile }) }, texts.buttonRetry));
36
- }
37
- return (React.createElement(Typography.Text, { className: cn(styles.countdown, styles.countdownContainer, {
38
- [styles.countdownMobile]: mobile,
39
- [styles.typographyTheme]: !mobile,
40
- }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' },
41
- texts.countdown,
42
- " ",
43
- formatMsAsMinutes(timeLeft)));
44
- };
45
-
46
- export { CountdownSection as C, styles as s };