@alfalab/core-components-confirmation 15.0.3 → 15.0.4
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.
- package/component.responsive.d.ts +1 -1
- package/components/base-confirmation/component.js.map +1 -1
- package/components/base-confirmation/index.css +2 -2
- package/components/base-confirmation/index.module.css.js +1 -1
- package/components/base-confirmation/index.module.css.js.map +1 -1
- package/components/countdown-loader/component.d.ts +1 -1
- package/components/countdown-loader/index.css +1 -1
- package/components/countdown-loader/index.module.css.js +1 -1
- package/components/countdown-loader/index.module.css.js.map +1 -1
- package/components/header/component.d.ts +1 -1
- package/components/header/index.css +1 -1
- package/components/header/index.module.css.js +1 -1
- package/components/screens/fatal-error/component.d.ts +1 -1
- package/components/screens/fatal-error/index.css +6 -6
- package/components/screens/fatal-error/index.module.css.js +1 -1
- package/components/screens/hint/component.d.ts +1 -1
- package/components/screens/hint/index.css +12 -12
- package/components/screens/hint/index.module.css.js +1 -1
- package/components/screens/initial/component.d.ts +1 -1
- package/components/screens/initial/component.js.map +1 -1
- package/components/screens/initial/countdown-section.d.ts +1 -1
- package/components/screens/initial/countdown-section.js.map +1 -1
- package/components/screens/initial/index.css +19 -19
- package/components/screens/initial/index.module.css.js +1 -1
- package/components/screens/temp-block/component.d.ts +1 -1
- package/components/screens/temp-block/component.js.map +1 -1
- package/components/screens/temp-block/index.css +8 -8
- package/components/screens/temp-block/index.module.css.js +1 -1
- package/components/screens/temp-block-over/component.d.ts +1 -1
- package/components/screens/temp-block-over/index.css +5 -5
- package/components/screens/temp-block-over/index.module.css.js +1 -1
- package/context.d.ts +0 -1
- package/cssm/component.responsive.d.ts +1 -1
- package/cssm/components/base-confirmation/component.js.map +1 -1
- package/cssm/components/countdown-loader/component.d.ts +1 -1
- package/cssm/components/header/component.d.ts +1 -1
- package/cssm/components/screens/fatal-error/component.d.ts +1 -1
- package/cssm/components/screens/hint/component.d.ts +1 -1
- package/cssm/components/screens/initial/component.d.ts +1 -1
- package/cssm/components/screens/initial/component.js.map +1 -1
- package/cssm/components/screens/initial/countdown-section.d.ts +1 -1
- package/cssm/components/screens/initial/countdown-section.js.map +1 -1
- package/cssm/components/screens/temp-block/component.d.ts +1 -1
- package/cssm/components/screens/temp-block/component.js.map +1 -1
- package/cssm/components/screens/temp-block-over/component.d.ts +1 -1
- package/cssm/context.d.ts +0 -1
- package/cssm/desktop/component.desktop.d.ts +1 -1
- package/cssm/mobile/component.mobile.d.ts +1 -1
- package/cssm/types.d.ts +3 -3
- package/cssm/utils.d.ts +2 -3
- package/cssm/utils.js.map +1 -1
- package/desktop/component.desktop.d.ts +1 -1
- package/esm/component.responsive.d.ts +1 -1
- package/esm/components/base-confirmation/component.js.map +1 -1
- package/esm/components/base-confirmation/index.css +2 -2
- package/esm/components/base-confirmation/index.module.css.js +1 -1
- package/esm/components/base-confirmation/index.module.css.js.map +1 -1
- package/esm/components/countdown-loader/component.d.ts +1 -1
- package/esm/components/countdown-loader/index.css +1 -1
- package/esm/components/countdown-loader/index.module.css.js +1 -1
- package/esm/components/countdown-loader/index.module.css.js.map +1 -1
- package/esm/components/header/component.d.ts +1 -1
- package/esm/components/header/index.css +1 -1
- package/esm/components/header/index.module.css.js +1 -1
- package/esm/components/screens/fatal-error/component.d.ts +1 -1
- package/esm/components/screens/fatal-error/index.css +6 -6
- package/esm/components/screens/fatal-error/index.module.css.js +1 -1
- package/esm/components/screens/hint/component.d.ts +1 -1
- package/esm/components/screens/hint/index.css +12 -12
- package/esm/components/screens/hint/index.module.css.js +1 -1
- package/esm/components/screens/initial/component.d.ts +1 -1
- package/esm/components/screens/initial/component.js.map +1 -1
- package/esm/components/screens/initial/countdown-section.d.ts +1 -1
- package/esm/components/screens/initial/countdown-section.js.map +1 -1
- package/esm/components/screens/initial/index.css +19 -19
- package/esm/components/screens/initial/index.module.css.js +1 -1
- package/esm/components/screens/temp-block/component.d.ts +1 -1
- package/esm/components/screens/temp-block/component.js.map +1 -1
- package/esm/components/screens/temp-block/index.css +8 -8
- package/esm/components/screens/temp-block/index.module.css.js +1 -1
- package/esm/components/screens/temp-block-over/component.d.ts +1 -1
- package/esm/components/screens/temp-block-over/index.css +5 -5
- package/esm/components/screens/temp-block-over/index.module.css.js +1 -1
- package/esm/context.d.ts +0 -1
- package/esm/desktop/component.desktop.d.ts +1 -1
- package/esm/mobile/component.mobile.d.ts +1 -1
- package/esm/types.d.ts +3 -3
- package/esm/utils.d.ts +2 -3
- package/esm/utils.js.map +1 -1
- package/mobile/component.mobile.d.ts +1 -1
- package/modern/component.responsive.d.ts +1 -1
- package/modern/components/base-confirmation/component.js.map +1 -1
- package/modern/components/base-confirmation/index.css +2 -2
- package/modern/components/base-confirmation/index.module.css.js +1 -1
- package/modern/components/base-confirmation/index.module.css.js.map +1 -1
- package/modern/components/countdown-loader/component.d.ts +1 -1
- package/modern/components/countdown-loader/index.css +1 -1
- package/modern/components/countdown-loader/index.module.css.js +1 -1
- package/modern/components/countdown-loader/index.module.css.js.map +1 -1
- package/modern/components/header/component.d.ts +1 -1
- package/modern/components/header/index.css +1 -1
- package/modern/components/header/index.module.css.js +1 -1
- package/modern/components/screens/fatal-error/component.d.ts +1 -1
- package/modern/components/screens/fatal-error/index.css +6 -6
- package/modern/components/screens/fatal-error/index.module.css.js +1 -1
- package/modern/components/screens/hint/component.d.ts +1 -1
- package/modern/components/screens/hint/index.css +12 -12
- package/modern/components/screens/hint/index.module.css.js +1 -1
- package/modern/components/screens/initial/component.d.ts +1 -1
- package/modern/components/screens/initial/component.js.map +1 -1
- package/modern/components/screens/initial/countdown-section.d.ts +1 -1
- package/modern/components/screens/initial/countdown-section.js.map +1 -1
- package/modern/components/screens/initial/index.css +19 -19
- package/modern/components/screens/initial/index.module.css.js +1 -1
- package/modern/components/screens/temp-block/component.d.ts +1 -1
- package/modern/components/screens/temp-block/component.js.map +1 -1
- package/modern/components/screens/temp-block/index.css +8 -8
- package/modern/components/screens/temp-block/index.module.css.js +1 -1
- package/modern/components/screens/temp-block-over/component.d.ts +1 -1
- package/modern/components/screens/temp-block-over/index.css +5 -5
- package/modern/components/screens/temp-block-over/index.module.css.js +1 -1
- package/modern/context.d.ts +0 -1
- package/modern/desktop/component.desktop.d.ts +1 -1
- package/modern/mobile/component.mobile.d.ts +1 -1
- package/modern/types.d.ts +3 -3
- package/modern/utils.d.ts +2 -3
- package/modern/utils.js.map +1 -1
- package/moderncssm/component.responsive.d.ts +1 -1
- package/moderncssm/components/base-confirmation/component.js.map +1 -1
- package/moderncssm/components/countdown-loader/component.d.ts +1 -1
- package/moderncssm/components/header/component.d.ts +1 -1
- package/moderncssm/components/screens/fatal-error/component.d.ts +1 -1
- package/moderncssm/components/screens/hint/component.d.ts +1 -1
- package/moderncssm/components/screens/initial/component.d.ts +1 -1
- package/moderncssm/components/screens/initial/component.js.map +1 -1
- package/moderncssm/components/screens/initial/countdown-section.d.ts +1 -1
- package/moderncssm/components/screens/initial/countdown-section.js.map +1 -1
- package/moderncssm/components/screens/temp-block/component.d.ts +1 -1
- package/moderncssm/components/screens/temp-block/component.js.map +1 -1
- package/moderncssm/components/screens/temp-block-over/component.d.ts +1 -1
- package/moderncssm/context.d.ts +0 -1
- package/moderncssm/desktop/component.desktop.d.ts +1 -1
- package/moderncssm/mobile/component.mobile.d.ts +1 -1
- package/moderncssm/types.d.ts +3 -3
- package/moderncssm/utils.d.ts +2 -3
- package/moderncssm/utils.js.map +1 -1
- package/package.json +8 -8
- package/src/components/base-confirmation/index.module.css +1 -1
- package/src/components/countdown-loader/index.module.css +1 -1
- package/src/vars.css +1 -1
- package/types.d.ts +3 -3
- package/utils.d.ts +2 -2
- package/utils.js.map +1 -1
|
@@ -18,52 +18,52 @@
|
|
|
18
18
|
:root {
|
|
19
19
|
--confirmation-text-color: var(--color-light-text-primary)
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.confirmation__component_id3gu {
|
|
22
22
|
display: flex;
|
|
23
23
|
flex-direction: column;
|
|
24
24
|
align-items: flex-start;
|
|
25
25
|
}
|
|
26
|
-
.
|
|
26
|
+
.confirmation__component_id3gu span:last-of-type {
|
|
27
27
|
margin-bottom: var(--gap-0);
|
|
28
28
|
}
|
|
29
|
-
.
|
|
29
|
+
.confirmation__center_id3gu {
|
|
30
30
|
align-items: center;
|
|
31
31
|
text-align: center;
|
|
32
32
|
}
|
|
33
|
-
.
|
|
33
|
+
.confirmation__text_id3gu.confirmation__text_id3gu {
|
|
34
34
|
margin-bottom: var(--gap-24);
|
|
35
35
|
}
|
|
36
|
-
.
|
|
36
|
+
.confirmation__typographyTheme_id3gu.confirmation__typographyTheme_id3gu {
|
|
37
37
|
font-size: 16px;
|
|
38
38
|
line-height: 24px;
|
|
39
39
|
font-weight: 400;
|
|
40
40
|
font-family: var(--font-family-system);
|
|
41
41
|
color: var(--confirmation-text-color);
|
|
42
42
|
}
|
|
43
|
-
.
|
|
43
|
+
.confirmation__typographyThemeMobile_id3gu.confirmation__typographyThemeMobile_id3gu {
|
|
44
44
|
color: var(--color-light-text-secondary);
|
|
45
45
|
}
|
|
46
|
-
.
|
|
46
|
+
.confirmation__phonesWrap_id3gu {
|
|
47
47
|
display: flex;
|
|
48
48
|
flex-direction: column;
|
|
49
49
|
margin-bottom: var(--gap-24);
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.confirmation__phoneWrap_id3gu {
|
|
52
52
|
margin-bottom: var(--gap-8);
|
|
53
53
|
}
|
|
54
|
-
.
|
|
54
|
+
.confirmation__phoneWrap_id3gu:last-child {
|
|
55
55
|
margin-bottom: var(--gap-0);
|
|
56
56
|
}
|
|
57
|
-
.
|
|
57
|
+
.confirmation__phoneLink_id3gu.confirmation__phoneLink_id3gu {
|
|
58
58
|
font-size: 16px;
|
|
59
59
|
line-height: 24px;
|
|
60
60
|
font-weight: 500;
|
|
61
61
|
font-family: var(--font-family-system);
|
|
62
62
|
}
|
|
63
|
-
.
|
|
63
|
+
.confirmation__hintButton_id3gu {
|
|
64
64
|
margin-top: var(--gap-32);
|
|
65
65
|
}
|
|
66
|
-
.
|
|
66
|
+
.confirmation__phoneContentMobile_id3gu {
|
|
67
67
|
display: flex;
|
|
68
68
|
flex-direction: column;
|
|
69
69
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"
|
|
3
|
+
var styles = {"component":"confirmation__component_id3gu","center":"confirmation__center_id3gu","text":"confirmation__text_id3gu","typographyTheme":"confirmation__typographyTheme_id3gu","typographyThemeMobile":"confirmation__typographyThemeMobile_id3gu","phonesWrap":"confirmation__phonesWrap_id3gu","phoneWrap":"confirmation__phoneWrap_id3gu","phoneLink":"confirmation__phoneLink_id3gu","hintButton":"confirmation__hintButton_id3gu","phoneContentMobile":"confirmation__phoneContentMobile_id3gu"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport {\n type BaseCodeInputProps,\n type CustomInputRef,\n} from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n const {\n state,\n alignContent,\n titleTag,\n texts,\n requiredCharAmount,\n timeLeft,\n phone,\n clearCodeOnError,\n hideCountdownSection,\n initialScreenHintSlot,\n errorVisibleDuration,\n onChangeState,\n onInputFinished,\n onChangeScreen,\n onSmsRetryClick,\n } = useContext(ConfirmationContext);\n\n const prevState = usePrevious(state);\n\n const inputRef = useRef<CustomInputRef>(null);\n\n const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n const timerId = useRef(0);\n\n const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n onInputFinished(code);\n };\n\n const handleSmsHintLinkClick = () => {\n onChangeScreen('HINT');\n };\n\n const handleInputChange = () => {\n if (state === 'CODE_ERROR') {\n onChangeState('INITIAL');\n }\n };\n\n const handleSmsRetryClick = () => {\n if (inputRef.current) {\n inputRef.current.reset();\n }\n\n onSmsRetryClick();\n };\n\n const handleErrorAnimationEnd = () => {\n if (clearCodeOnError && state !== 'INITIAL') {\n onChangeState('INITIAL');\n }\n };\n\n const clearTimer = useCallback(() => {\n window.clearTimeout(timerId.current);\n }, []);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n\n return () => {\n clearTimer();\n };\n }, [clearTimer]);\n\n useEffect(() => {\n if (!inputRef.current) {\n return;\n }\n\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n inputRef.current.focus();\n }\n }, [prevState, state, requiredCharAmount]);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n setCodeSendHintVisible(true);\n\n clearTimer();\n\n timerId.current = window.setTimeout(() => {\n setCodeSendHintVisible(false);\n }, CODE_SEND_HINT_VISIBLE_DURATION);\n }\n }, [prevState, state, clearTimer]);\n\n const getCodeInputError = (): string | boolean => {\n if (state === 'CODE_EXPIRED') {\n return texts.codeErrorExpired || true;\n }\n\n if (state === 'CODE_EXPIRED_ENDED') {\n return texts.codeErrorExpiredEnded || true;\n }\n\n if (state === 'CODE_ERROR') {\n return texts.codeError || true;\n }\n\n return false;\n };\n\n const renderHintButton = () => {\n if (initialScreenHintSlot) {\n return initialScreenHintSlot;\n }\n\n if (mobile) {\n return (\n <ButtonMobile\n onClick={handleSmsHintLinkClick}\n className={styles.smsBtn}\n view='text'\n size={40}\n >\n {texts.linkToHint}\n </ButtonMobile>\n );\n }\n\n return (\n <Link\n onClick={handleSmsHintLinkClick}\n className={styles.smsComeLink}\n view={mobile ? 'primary' : 'secondary'}\n pseudo={true}\n >\n {texts.linkToHint}\n </Link>\n );\n };\n\n const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n const timePassed = timeLeft === 0;\n\n const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.title}\n </Header>\n\n {phone ? (\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.phone, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n Отправили на {phone}\n </TypographyText>\n ) : null}\n <ComponentCodeInput\n disabled={processing}\n error={getCodeInputError()}\n ref={inputRef}\n fields={requiredCharAmount}\n className={cn(styles.containerInput, styles.codeInput)}\n onComplete={handleInputComplete}\n onChange={handleInputChange}\n clearCodeOnError={clearCodeOnError}\n errorVisibleDuration={errorVisibleDuration}\n onErrorAnimationEnd={handleErrorAnimationEnd}\n />\n {!hideCountdownSection && (\n <CountdownSection\n processing={processing}\n timePassed={timePassed}\n codeSendHintVisible={codeSendHintVisible}\n handleSmsRetryClick={handleSmsRetryClick}\n mobile={mobile}\n />\n )}\n\n {renderHintButton()}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport {\n type BaseCodeInputProps,\n type CustomInputRef,\n} from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n const {\n state,\n alignContent,\n titleTag,\n texts,\n requiredCharAmount,\n timeLeft,\n phone,\n clearCodeOnError,\n hideCountdownSection,\n initialScreenHintSlot,\n errorVisibleDuration,\n onChangeState,\n onInputFinished,\n onChangeScreen,\n onSmsRetryClick,\n } = useContext(ConfirmationContext);\n\n const prevState = usePrevious(state);\n\n const inputRef = useRef<CustomInputRef>(null);\n\n const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n const timerId = useRef(0);\n\n const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n onInputFinished(code);\n };\n\n const handleSmsHintLinkClick = () => {\n onChangeScreen('HINT');\n };\n\n const handleInputChange = () => {\n if (state === 'CODE_ERROR') {\n onChangeState('INITIAL');\n }\n };\n\n const handleSmsRetryClick = () => {\n if (inputRef.current) {\n inputRef.current.reset();\n }\n\n onSmsRetryClick();\n };\n\n const handleErrorAnimationEnd = () => {\n if (clearCodeOnError && state !== 'INITIAL') {\n onChangeState('INITIAL');\n }\n };\n\n const clearTimer = useCallback(() => {\n window.clearTimeout(timerId.current);\n }, []);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n\n return () => {\n clearTimer();\n };\n }, [clearTimer]);\n\n useEffect(() => {\n if (!inputRef.current) {\n return;\n }\n\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n inputRef.current.focus();\n }\n }, [prevState, state, requiredCharAmount]);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n setCodeSendHintVisible(true);\n\n clearTimer();\n\n timerId.current = window.setTimeout(() => {\n setCodeSendHintVisible(false);\n }, CODE_SEND_HINT_VISIBLE_DURATION);\n }\n }, [prevState, state, clearTimer]);\n\n const getCodeInputError = (): string | boolean => {\n if (state === 'CODE_EXPIRED') {\n return texts.codeErrorExpired || true;\n }\n\n if (state === 'CODE_EXPIRED_ENDED') {\n return texts.codeErrorExpiredEnded || true;\n }\n\n if (state === 'CODE_ERROR') {\n return texts.codeError || true;\n }\n\n return false;\n };\n\n const renderHintButton = () => {\n if (initialScreenHintSlot) {\n return initialScreenHintSlot;\n }\n\n if (mobile) {\n return (\n <ButtonMobile\n onClick={handleSmsHintLinkClick}\n className={styles.smsBtn}\n view='text'\n size={40}\n >\n {texts.linkToHint}\n </ButtonMobile>\n );\n }\n\n return (\n <Link\n onClick={handleSmsHintLinkClick}\n className={styles.smsComeLink}\n view={mobile ? 'primary' : 'secondary'}\n pseudo={true}\n >\n {texts.linkToHint}\n </Link>\n );\n };\n\n const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n const timePassed = timeLeft === 0;\n\n const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.title}\n </Header>\n\n {phone ? (\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.phone, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n Отправили на {phone}\n </TypographyText>\n ) : null}\n <ComponentCodeInput\n disabled={processing}\n error={getCodeInputError()}\n ref={inputRef}\n fields={requiredCharAmount}\n className={cn(styles.containerInput, styles.codeInput)}\n onComplete={handleInputComplete}\n onChange={handleInputChange}\n clearCodeOnError={clearCodeOnError}\n errorVisibleDuration={errorVisibleDuration}\n onErrorAnimationEnd={handleErrorAnimationEnd}\n />\n {!hideCountdownSection && (\n <CountdownSection\n processing={processing}\n timePassed={timePassed}\n codeSendHintVisible={codeSendHintVisible}\n handleSmsRetryClick={handleSmsRetryClick}\n mobile={mobile}\n />\n )}\n\n {renderHintButton()}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { type FC, Fragment, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n codeSendHintVisible: boolean;\n timePassed: boolean;\n processing: boolean;\n mobile?: boolean;\n handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n codeSendHintVisible,\n timePassed,\n processing,\n mobile,\n handleSmsRetryClick,\n}) => {\n const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n useContext(ConfirmationContext);\n\n const renderText = (content: ReactNode) => (\n <TypographyText\n className={cn(styles.countdownContainer, {\n [styles.countdownMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n view={mobile ? 'primary-small' : 'primary-medium'}\n tag='div'\n >\n {content}\n </TypographyText>\n );\n\n if (codeSendHintVisible) return renderText(texts.codeSended);\n\n if (processing) {\n return (\n <div\n className={cn(styles.loaderWrap, styles.countdownContainer, {\n [styles.countdownLoaderMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n >\n <Spinner preset={24} visible={true} />\n\n <span className={styles.loaderText}>\n {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n </span>\n </div>\n );\n }\n\n if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n if (timePassed) {\n return (\n <Button\n size={mobile ? 40 : 32}\n view='secondary'\n onClick={handleSmsRetryClick}\n className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n breakpoint={breakpoint}\n client={client}\n >\n {texts.buttonRetry}\n </Button>\n );\n }\n\n return renderText(\n <Fragment>\n {texts.countdown}\n {'\\u00A0'}\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </Fragment>,\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBO,IAAM,gBAAgB,GAA8B,UAAC,EAM3D,EAAA;;AALG,IAAA,IAAA,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,mBAAmB,GAAA,EAAA,CAAA,mBAAA;IAEb,IAAA,EAAA,GACF,UAAU,CAAC,mBAAmB,CAAC,EAD3B,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAC9B;IAEnC,IAAM,UAAU,GAAG,UAAC,OAAkB,EAAA;;QAAK,QACvC,KAAC,CAAA,aAAA,CAAA,cAAc,EACX,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,GAAA,EAAA,GAAA,EAAA;AACnC,gBAAA,EAAA,CAAC,MAAM,CAAC,eAAe,CAAA,GAAG,MAAM;AAChC,gBAAA,EAAA,CAAC,MAAM,CAAC,eAAe,CAAA,GAAG,CAAC,MAAM;AACnC,gBAAA,EAAA,EAAA,EACF,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,gBAAgB,EACjD,GAAG,EAAC,KAAK,EAER,EAAA,OAAO,CACK;AAVsB,KAW1C;AAED,IAAA,IAAI,mBAAmB;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { type FC, Fragment, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n codeSendHintVisible: boolean;\n timePassed: boolean;\n processing: boolean;\n mobile?: boolean;\n handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n codeSendHintVisible,\n timePassed,\n processing,\n mobile,\n handleSmsRetryClick,\n}) => {\n const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n useContext(ConfirmationContext);\n\n const renderText = (content: ReactNode) => (\n <TypographyText\n className={cn(styles.countdownContainer, {\n [styles.countdownMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n view={mobile ? 'primary-small' : 'primary-medium'}\n tag='div'\n >\n {content}\n </TypographyText>\n );\n\n if (codeSendHintVisible) return renderText(texts.codeSended);\n\n if (processing) {\n return (\n <div\n className={cn(styles.loaderWrap, styles.countdownContainer, {\n [styles.countdownLoaderMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n >\n <Spinner preset={24} visible={true} />\n\n <span className={styles.loaderText}>\n {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n </span>\n </div>\n );\n }\n\n if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n if (timePassed) {\n return (\n <Button\n size={mobile ? 40 : 32}\n view='secondary'\n onClick={handleSmsRetryClick}\n className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n breakpoint={breakpoint}\n client={client}\n >\n {texts.buttonRetry}\n </Button>\n );\n }\n\n return renderText(\n <Fragment>\n {texts.countdown}\n {'\\u00A0'}\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </Fragment>,\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -27,64 +27,64 @@
|
|
|
27
27
|
:root {
|
|
28
28
|
--confirmation-text-color: var(--color-light-text-primary)
|
|
29
29
|
}
|
|
30
|
-
.
|
|
30
|
+
.confirmation__component_1b20n {
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-direction: column;
|
|
33
33
|
}
|
|
34
|
-
.
|
|
34
|
+
.confirmation__phone_1b20n.confirmation__phone_1b20n {
|
|
35
35
|
color: var(--color-light-text-primary);
|
|
36
36
|
margin-bottom: var(--gap-32);
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.confirmation__typographyTheme_1b20n.confirmation__typographyTheme_1b20n {
|
|
39
39
|
font-size: 16px;
|
|
40
40
|
line-height: 24px;
|
|
41
41
|
font-weight: 400;
|
|
42
42
|
font-family: var(--font-family-system);
|
|
43
43
|
color: var(--confirmation-text-color);
|
|
44
44
|
}
|
|
45
|
-
.
|
|
45
|
+
.confirmation__typographyThemeMobile_1b20n.confirmation__typographyThemeMobile_1b20n {
|
|
46
46
|
color: var(--color-light-text-secondary);
|
|
47
47
|
}
|
|
48
|
-
.
|
|
48
|
+
.confirmation__compact_1b20n {
|
|
49
49
|
margin-bottom: var(--gap-24);
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.confirmation__loaderWrap_1b20n {
|
|
52
52
|
display: flex;
|
|
53
53
|
align-items: center;
|
|
54
54
|
}
|
|
55
|
-
.
|
|
55
|
+
.confirmation__left_1b20n {
|
|
56
56
|
align-items: flex-start;
|
|
57
57
|
}
|
|
58
|
-
.
|
|
58
|
+
.confirmation__center_1b20n {
|
|
59
59
|
align-items: center;
|
|
60
60
|
text-align: center;
|
|
61
61
|
}
|
|
62
|
-
.
|
|
62
|
+
.confirmation__center_1b20n .confirmation__loaderWrap_1b20n {
|
|
63
63
|
justify-content: center;
|
|
64
64
|
}
|
|
65
|
-
.
|
|
65
|
+
.confirmation__codeInput_1b20n {
|
|
66
66
|
margin-bottom: var(--gap-12);
|
|
67
67
|
}
|
|
68
|
-
.
|
|
68
|
+
.confirmation__smsBtn_1b20n.confirmation__smsBtn_1b20n {
|
|
69
69
|
min-height: var(--size-xs-height);
|
|
70
70
|
}
|
|
71
|
-
.
|
|
71
|
+
.confirmation__smsComeLink_1b20n.confirmation__smsComeLink_1b20n {
|
|
72
72
|
font-size: 14px;
|
|
73
73
|
line-height: 20px;
|
|
74
74
|
font-weight: 500;
|
|
75
75
|
font-family: var(--font-family-system);
|
|
76
76
|
}
|
|
77
|
-
.
|
|
77
|
+
.confirmation__countdownContainer_1b20n.confirmation__countdownContainer_1b20n {
|
|
78
78
|
color: var(--color-light-text-secondary);
|
|
79
79
|
margin-bottom: var(--gap-24);
|
|
80
80
|
}
|
|
81
|
-
.
|
|
81
|
+
.confirmation__countdownMobile_1b20n.confirmation__countdownMobile_1b20n {
|
|
82
82
|
margin-bottom: var(--gap-20);
|
|
83
83
|
}
|
|
84
|
-
.
|
|
84
|
+
.confirmation__countdownLoaderMobile_1b20n.confirmation__countdownLoaderMobile_1b20n {
|
|
85
85
|
margin-bottom: var(--gap-16);
|
|
86
86
|
}
|
|
87
|
-
.
|
|
87
|
+
.confirmation__timeCounter_1b20n {
|
|
88
88
|
display: inline-block;
|
|
89
89
|
min-width: 47px;
|
|
90
90
|
color: var(--color-light-text-secondary);
|
|
@@ -92,14 +92,14 @@
|
|
|
92
92
|
font-feature-settings: lining-nums tabular-nums;
|
|
93
93
|
font-variant-numeric: lining-nums tabular-nums;
|
|
94
94
|
}
|
|
95
|
-
.
|
|
95
|
+
.confirmation__getCodeButton_1b20n {
|
|
96
96
|
position: relative;
|
|
97
97
|
top: var(--gap-4-neg);
|
|
98
98
|
margin-bottom: var(--gap-16);
|
|
99
99
|
}
|
|
100
|
-
.
|
|
100
|
+
.confirmation__getCodeButtonMobile_1b20n {
|
|
101
101
|
margin-bottom: var(--gap-0);
|
|
102
102
|
}
|
|
103
|
-
.
|
|
103
|
+
.confirmation__containerInput_1b20n {
|
|
104
104
|
min-height: 80px;
|
|
105
105
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"
|
|
3
|
+
var styles = {"component":"confirmation__component_1b20n","phone":"confirmation__phone_1b20n","typographyTheme":"confirmation__typographyTheme_1b20n","typographyThemeMobile":"confirmation__typographyThemeMobile_1b20n","compact":"confirmation__compact_1b20n","loaderWrap":"confirmation__loaderWrap_1b20n","left":"confirmation__left_1b20n","center":"confirmation__center_1b20n","codeInput":"confirmation__codeInput_1b20n","smsBtn":"confirmation__smsBtn_1b20n","smsComeLink":"confirmation__smsComeLink_1b20n","countdownContainer":"confirmation__countdownContainer_1b20n","countdownMobile":"confirmation__countdownMobile_1b20n","countdownLoaderMobile":"confirmation__countdownLoaderMobile_1b20n","timeCounter":"confirmation__timeCounter_1b20n","getCodeButton":"confirmation__getCodeButton_1b20n","getCodeButtonMobile":"confirmation__getCodeButtonMobile_1b20n","containerInput":"confirmation__containerInput_1b20n"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block/component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes, useCountdown } from '../../../utils';\nimport { CountdownLoader } from '../../countdown-loader';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nexport const TempBlock: FC<TempBlockProps> = ({ mobile }) => {\n const {\n alignContent,\n titleTag,\n texts,\n tempBlockDuration,\n onChangeScreen,\n onTempBlockFinished,\n } = useContext(ConfirmationContext);\n\n const [timeLeft, startTimer] = useCountdown(tempBlockDuration);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n if (timeLeft === 0 && onTempBlockFinished) {\n onTempBlockFinished();\n }\n }, [timeLeft, onChangeScreen, onTempBlockFinished]);\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.tempBlockTitle}\n </Header>\n\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.description, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n {texts.tempBlockDescription}\n </TypographyText>\n\n <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>\n <CountdownLoader\n progress={1 - timeLeft / tempBlockDuration}\n className={styles.loader}\n />\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmBO,IAAM,SAAS,GAAuB,UAAC,EAAU,EAAA;;AAAR,IAAA,IAAA,MAAM,GAAA,EAAA,CAAA,MAAA;IAC5C,IAAA,EAAA,GAOF,UAAU,CAAC,mBAAmB,CAAC,EAN/B,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,mBAAmB,GAAA,EAAA,CAAA,mBACY;IAE7B,IAAA,EAAA,GAAyB,YAAY,CAAC,iBAAiB,CAAC,EAAvD,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAmC;AAE9D,IAAA,SAAS,CAAC,YAAA;AACN,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,SAAS,CAAC,YAAA;AACN,QAAA,IAAI,QAAQ,KAAK,CAAC,IAAI,mBAAmB,EAAE;AACvC,YAAA,mBAAmB,EAAE
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block/component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes, useCountdown } from '../../../utils';\nimport { CountdownLoader } from '../../countdown-loader';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nexport const TempBlock: FC<TempBlockProps> = ({ mobile }) => {\n const {\n alignContent,\n titleTag,\n texts,\n tempBlockDuration,\n onChangeScreen,\n onTempBlockFinished,\n } = useContext(ConfirmationContext);\n\n const [timeLeft, startTimer] = useCountdown(tempBlockDuration);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n if (timeLeft === 0 && onTempBlockFinished) {\n onTempBlockFinished();\n }\n }, [timeLeft, onChangeScreen, onTempBlockFinished]);\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.tempBlockTitle}\n </Header>\n\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.description, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n {texts.tempBlockDescription}\n </TypographyText>\n\n <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>\n <CountdownLoader\n progress={1 - timeLeft / tempBlockDuration}\n className={styles.loader}\n />\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmBO,IAAM,SAAS,GAAuB,UAAC,EAAU,EAAA;;AAAR,IAAA,IAAA,MAAM,GAAA,EAAA,CAAA,MAAA;IAC5C,IAAA,EAAA,GAOF,UAAU,CAAC,mBAAmB,CAAC,EAN/B,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,mBAAmB,GAAA,EAAA,CAAA,mBACY;IAE7B,IAAA,EAAA,GAAyB,YAAY,CAAC,iBAAiB,CAAC,EAAvD,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAmC;AAE9D,IAAA,SAAS,CAAC,YAAA;AACN,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,SAAS,CAAC,YAAA;AACN,QAAA,IAAI,QAAQ,KAAK,CAAC,IAAI,mBAAmB,EAAE;AACvC,YAAA,mBAAmB,EAAE;;KAE5B,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC;AAEnD,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,cAAc,CAChB;AAET,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EACX,EAAA,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,GAAA,EAAA,GAAA,EAAA;AAC5B,gBAAA,EAAA,CAAC,MAAM,CAAC,eAAe,CAAA,GAAG,CAAC,MAAM;AACjC,gBAAA,EAAA,CAAC,MAAM,CAAC,qBAAqB,CAAA,GAAG,MAAM;oBACxC,EAED,EAAA,KAAK,CAAC,oBAAoB,CACd;AAEjB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,GAAI,EAAA,GAAA,EAAA,EAAA,EAAA,CAAC,MAAM,CAAC,eAAe,CAAG,GAAA,CAAC,MAAM,EAAG,EAAA,EAAA,EAAA;AAC3E,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EACZ,QAAQ,EAAE,CAAC,GAAG,QAAQ,GAAG,iBAAiB,EAC1C,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAG,EAAA,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CACvE,CACJ;AAEd;;;;"}
|
|
@@ -13,32 +13,32 @@
|
|
|
13
13
|
:root {
|
|
14
14
|
--confirmation-text-color: var(--color-light-text-primary)
|
|
15
15
|
}
|
|
16
|
-
.
|
|
16
|
+
.confirmation__component_me36e {
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
.confirmation__center_me36e {
|
|
21
21
|
align-items: center;
|
|
22
22
|
text-align: center;
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
.confirmation__typographyTheme_me36e.confirmation__typographyTheme_me36e {
|
|
25
25
|
font-size: 16px;
|
|
26
26
|
line-height: 24px;
|
|
27
27
|
font-weight: 400;
|
|
28
28
|
font-family: var(--font-family-system);
|
|
29
29
|
color: var(--confirmation-text-color);
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
.confirmation__typographyThemeMobile_me36e.confirmation__typographyThemeMobile_me36e {
|
|
32
32
|
color: var(--color-light-text-secondary);
|
|
33
33
|
}
|
|
34
|
-
.
|
|
34
|
+
.confirmation__description_me36e.confirmation__description_me36e {
|
|
35
35
|
margin-bottom: var(--gap-8);
|
|
36
36
|
}
|
|
37
|
-
.
|
|
37
|
+
.confirmation__countdownWrap_me36e {
|
|
38
38
|
display: flex;
|
|
39
39
|
align-items: center;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.confirmation__timeCounter_me36e {
|
|
42
42
|
display: inline-block;
|
|
43
43
|
min-width: 47px;
|
|
44
44
|
color: var(--color-light-text-secondary);
|
|
@@ -46,6 +46,6 @@
|
|
|
46
46
|
font-feature-settings: lining-nums tabular-nums;
|
|
47
47
|
font-variant-numeric: lining-nums tabular-nums;
|
|
48
48
|
}
|
|
49
|
-
.
|
|
49
|
+
.confirmation__loader_me36e {
|
|
50
50
|
margin-right: var(--gap-8);
|
|
51
51
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"
|
|
3
|
+
var styles = {"component":"confirmation__component_me36e","center":"confirmation__center_me36e","typographyTheme":"confirmation__typographyTheme_me36e","typographyThemeMobile":"confirmation__typographyThemeMobile_me36e","description":"confirmation__description_me36e","countdownWrap":"confirmation__countdownWrap_me36e","timeCounter":"confirmation__timeCounter_me36e","loader":"confirmation__loader_me36e"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -13,24 +13,24 @@
|
|
|
13
13
|
:root {
|
|
14
14
|
--confirmation-text-color: var(--color-light-text-primary)
|
|
15
15
|
}
|
|
16
|
-
.
|
|
16
|
+
.confirmation__component_zlep4 {
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
.confirmation__center_zlep4 {
|
|
21
21
|
align-items: center;
|
|
22
22
|
text-align: center;
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
.confirmation__typographyTheme_zlep4.confirmation__typographyTheme_zlep4 {
|
|
25
25
|
font-size: 16px;
|
|
26
26
|
line-height: 24px;
|
|
27
27
|
font-weight: 400;
|
|
28
28
|
font-family: var(--font-family-system);
|
|
29
29
|
color: var(--confirmation-text-color);
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
.confirmation__typographyThemeMobile_zlep4.confirmation__typographyThemeMobile_zlep4 {
|
|
32
32
|
color: var(--color-light-text-secondary);
|
|
33
33
|
}
|
|
34
|
-
.
|
|
34
|
+
.confirmation__button_zlep4.confirmation__button_zlep4 {
|
|
35
35
|
margin-top: var(--gap-32);
|
|
36
36
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"
|
|
3
|
+
var styles = {"component":"confirmation__component_zlep4","center":"confirmation__center_zlep4","typographyTheme":"confirmation__typographyTheme_zlep4","typographyThemeMobile":"confirmation__typographyThemeMobile_zlep4","button":"confirmation__button_zlep4"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/esm/context.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type FC } from 'react';
|
|
2
2
|
import { type ConfirmationProps } from '../types';
|
|
3
|
-
export
|
|
3
|
+
export type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile' | 'breakpoint'>;
|
|
4
4
|
export declare const ConfirmationDesktop: FC<DesktopConfirmationProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type FC } from 'react';
|
|
2
2
|
import { type ConfirmationProps } from '../types';
|
|
3
|
-
export
|
|
3
|
+
export type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
|
|
4
4
|
export declare const ConfirmationMobile: FC<MobileConfirmationProps>;
|
package/esm/types.d.ts
CHANGED
|
@@ -118,7 +118,7 @@ export interface ConfirmationProps {
|
|
|
118
118
|
*/
|
|
119
119
|
errorVisibleDuration?: number;
|
|
120
120
|
}
|
|
121
|
-
export
|
|
121
|
+
export type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'titleTag' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
|
|
122
122
|
timeLeft: number;
|
|
123
123
|
};
|
|
124
124
|
export interface ConfirmationTexts {
|
|
@@ -163,8 +163,8 @@ export interface ConfirmationTexts {
|
|
|
163
163
|
tempBlockOverDescription?: ReactNode;
|
|
164
164
|
tempBlockOverButton?: string;
|
|
165
165
|
}
|
|
166
|
-
export
|
|
167
|
-
export
|
|
166
|
+
export type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
|
|
167
|
+
export type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
|
|
168
168
|
export interface ScreensMap {
|
|
169
169
|
[key: string]: ComponentType;
|
|
170
170
|
}
|
package/esm/utils.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { type ConfirmationProps } from './types';
|
|
3
2
|
/**
|
|
4
3
|
* Форматирование миллисекунд в hh:mm:ss.
|
|
@@ -7,14 +6,14 @@ import { type ConfirmationProps } from './types';
|
|
|
7
6
|
* @returns {String} время в формате mm:ss
|
|
8
7
|
*/
|
|
9
8
|
export declare function formatMsAsMinutes(ms: number): string;
|
|
10
|
-
|
|
9
|
+
type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
|
|
11
10
|
/**
|
|
12
11
|
* Возвращает время, которое осталось до истечения таймера в ms
|
|
13
12
|
*/
|
|
14
13
|
export declare const useCountdown: UseCountdown;
|
|
15
14
|
export declare const ONE_DAY: number;
|
|
16
15
|
export declare const ONE_MINUTE: number;
|
|
17
|
-
|
|
16
|
+
type UseConfirmationParams = {
|
|
18
17
|
state?: ConfirmationProps['state'];
|
|
19
18
|
screen?: ConfirmationProps['screen'];
|
|
20
19
|
blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
|
package/esm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n const totalSeconds = Math.ceil(ms / 1000);\n const totalMinutes = Math.floor(totalSeconds / 60);\n const totalHours = Math.floor(totalMinutes / 60);\n\n const seconds = totalSeconds % 60;\n const paddedSeconds = `00${seconds}`.slice(-2);\n\n if (totalHours > 0) {\n const minutes = totalMinutes % 60;\n\n const paddedMinutes = `00${minutes}`.slice(-2);\n const paddedHours = `00${totalHours}`.slice(-2);\n\n return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n }\n\n const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n const timerId = useRef(0);\n\n const start = useRef(0);\n\n const [timePassed, setTimePassed] = useState(0);\n\n const stopTimer = useCallback(() => {\n window.clearInterval(timerId.current);\n }, []);\n\n const updateProgress = useCallback(() => {\n const passed = Date.now() - start.current;\n\n if (passed >= countdownDuration) {\n stopTimer();\n\n setTimePassed(countdownDuration);\n } else {\n setTimePassed(passed);\n }\n }, [countdownDuration, stopTimer]);\n\n const startTimer = useCallback(() => {\n stopTimer();\n\n start.current = Date.now();\n\n updateProgress();\n\n timerId.current = window.setInterval(updateProgress, tick);\n }, [stopTimer, updateProgress, tick]);\n\n const timeLeft = countdownDuration - timePassed;\n\n useEffect(\n () => () => {\n stopTimer();\n },\n [stopTimer],\n );\n\n return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n state?: ConfirmationProps['state'];\n screen?: ConfirmationProps['screen'];\n blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n blockSmsRetry ?? false,\n );\n\n return {\n confirmationState,\n confirmationScreen,\n confirmationBlockSmsRetry,\n setConfirmationState,\n setConfirmationScreen,\n setConfirmationBlockSmsRetry,\n };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":";;AAIA;;;;;AAKG;AACG,SAAU,iBAAiB,CAAC,EAAU,EAAA;IACxC,IAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;IACzC,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;IAClD,IAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;AAEhD,IAAA,IAAM,OAAO,GAAG,YAAY,GAAG,EAAE;IACjC,IAAM,aAAa,GAAG,IAAA,CAAA,MAAA,CAAK,OAAO,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n const totalSeconds = Math.ceil(ms / 1000);\n const totalMinutes = Math.floor(totalSeconds / 60);\n const totalHours = Math.floor(totalMinutes / 60);\n\n const seconds = totalSeconds % 60;\n const paddedSeconds = `00${seconds}`.slice(-2);\n\n if (totalHours > 0) {\n const minutes = totalMinutes % 60;\n\n const paddedMinutes = `00${minutes}`.slice(-2);\n const paddedHours = `00${totalHours}`.slice(-2);\n\n return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n }\n\n const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n const timerId = useRef(0);\n\n const start = useRef(0);\n\n const [timePassed, setTimePassed] = useState(0);\n\n const stopTimer = useCallback(() => {\n window.clearInterval(timerId.current);\n }, []);\n\n const updateProgress = useCallback(() => {\n const passed = Date.now() - start.current;\n\n if (passed >= countdownDuration) {\n stopTimer();\n\n setTimePassed(countdownDuration);\n } else {\n setTimePassed(passed);\n }\n }, [countdownDuration, stopTimer]);\n\n const startTimer = useCallback(() => {\n stopTimer();\n\n start.current = Date.now();\n\n updateProgress();\n\n timerId.current = window.setInterval(updateProgress, tick);\n }, [stopTimer, updateProgress, tick]);\n\n const timeLeft = countdownDuration - timePassed;\n\n useEffect(\n () => () => {\n stopTimer();\n },\n [stopTimer],\n );\n\n return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n state?: ConfirmationProps['state'];\n screen?: ConfirmationProps['screen'];\n blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n blockSmsRetry ?? false,\n );\n\n return {\n confirmationState,\n confirmationScreen,\n confirmationBlockSmsRetry,\n setConfirmationState,\n setConfirmationScreen,\n setConfirmationBlockSmsRetry,\n };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":";;AAIA;;;;;AAKG;AACG,SAAU,iBAAiB,CAAC,EAAU,EAAA;IACxC,IAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;IACzC,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;IAClD,IAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;AAEhD,IAAA,IAAM,OAAO,GAAG,YAAY,GAAG,EAAE;IACjC,IAAM,aAAa,GAAG,IAAA,CAAA,MAAA,CAAK,OAAO,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;AAE9C,IAAA,IAAI,UAAU,GAAG,CAAC,EAAE;AAChB,QAAA,IAAM,OAAO,GAAG,YAAY,GAAG,EAAE;QAEjC,IAAM,eAAa,GAAG,IAAA,CAAA,MAAA,CAAK,OAAO,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC9C,IAAM,WAAW,GAAG,IAAA,CAAA,MAAA,CAAK,UAAU,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;AAE/C,QAAA,OAAO,UAAG,WAAW,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,eAAa,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,aAAa,CAAE;;IAG7D,IAAM,aAAa,GAAG,IAAA,CAAA,MAAA,CAAK,YAAY,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;AAEnD,IAAA,OAAO,EAAG,CAAA,MAAA,CAAA,aAAa,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,aAAa,CAAE;AAC9C;AAIA;;AAEG;AACU,IAAA,YAAY,GAAiB,UAAC,iBAAiB,EAAE,IAAW,EAAA;AAAX,IAAA,IAAA,IAAA,KAAA,MAAA,EAAA,EAAA,IAAW,GAAA,IAAA,CAAA;AACrE,IAAA,IAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC;AAEzB,IAAA,IAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;IAEjB,IAAA,EAAA,GAA8B,QAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAe;IAE/C,IAAM,SAAS,GAAG,WAAW,CAAC,YAAA;AAC1B,QAAA,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;KACxC,EAAE,EAAE,CAAC;IAEN,IAAM,cAAc,GAAG,WAAW,CAAC,YAAA;QAC/B,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO;AAEzC,QAAA,IAAI,MAAM,IAAI,iBAAiB,EAAE;AAC7B,YAAA,SAAS,EAAE;YAEX,aAAa,CAAC,iBAAiB,CAAC;;aAC7B;YACH,aAAa,CAAC,MAAM,CAAC;;AAE7B,KAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAElC,IAAM,UAAU,GAAG,WAAW,CAAC,YAAA;AAC3B,QAAA,SAAS,EAAE;AAEX,QAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;AAE1B,QAAA,cAAc,EAAE;QAEhB,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,cAAc,EAAE,IAAI,CAAC;KAC7D,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC;AAErC,IAAA,IAAM,QAAQ,GAAG,iBAAiB,GAAG,UAAU;IAE/C,SAAS,CACL,cAAM,OAAA,YAAA;AACF,QAAA,SAAS,EAAE;AACf,KAAC,GAAA,EACD,CAAC,SAAS,CAAC,CACd;AAED,IAAA,OAAO,CAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;AAC5C;AAEa,IAAA,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;AACzB,IAAA,UAAU,GAAG,EAAE,GAAG;AAQxB,IAAM,eAAe,GAAG,UAAC,EAA4D,EAAA;QAA5D,EAA0D,GAAA,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,EAA1D,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA;AACpD,IAAA,IAAA,KAA4C,QAAQ,CAAC,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,MAAA,GAAA,KAAK,GAAI,SAAS,CAAC,EAAvE,iBAAiB,QAAA,EAAE,oBAAoB,QAAgC;AACxE,IAAA,IAAA,KAA8C,QAAQ,CAAC,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,MAAA,GAAA,MAAM,GAAI,SAAS,CAAC,EAA1E,kBAAkB,QAAA,EAAE,qBAAqB,QAAiC;AAC3E,IAAA,IAAA,KAA4D,QAAQ,CACtE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,MAAA,GAAA,aAAa,GAAI,KAAK,CACzB,EAFM,yBAAyB,QAAA,EAAE,4BAA4B,QAE7D;IAED,OAAO;AACH,QAAA,iBAAiB,EAAA,iBAAA;AACjB,QAAA,kBAAkB,EAAA,kBAAA;AAClB,QAAA,yBAAyB,EAAA,yBAAA;AACzB,QAAA,oBAAoB,EAAA,oBAAA;AACpB,QAAA,qBAAqB,EAAA,qBAAA;AACrB,QAAA,4BAA4B,EAAA,4BAAA;KAC/B;AACL;AAEA,IAAM,yBAAyB,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC;AAEvD;;AAEG;AACG,SAAU,YAAY,CAAC,KAAa,EAAA;IACtC,OAAO,MAAA,CAAA,MAAA,CAAO,KAAK,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAE;AAChE;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type FC } from 'react';
|
|
2
2
|
import { type ConfirmationProps } from '../types';
|
|
3
|
-
export
|
|
3
|
+
export type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
|
|
4
4
|
export declare const ConfirmationMobile: FC<MobileConfirmationProps>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type FC } from 'react';
|
|
2
2
|
import { type ConfirmationProps } from './types';
|
|
3
|
-
export
|
|
3
|
+
export type ResponsiveConfirmationProps = Omit<ConfirmationProps, 'confirmationScreens' | 'breakpoint'> & {
|
|
4
4
|
/**
|
|
5
5
|
* Контрольная точка, с нее начинается desktop версия
|
|
6
6
|
* @default 1024
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/base-confirmation/component.tsx"],"sourcesContent":["import React, { type ComponentType, type FC, useEffect, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../context';\nimport { type ConfirmationProps, defaultTexts, type TConfirmationContext } from '../../types';\nimport { ONE_DAY, ONE_MINUTE, useCountdown } from '../../utils';\nimport { FatalError, Hint, Initial, TempBlock, TempBlockOver } from '../screens';\n\nimport styles from './index.module.css';\n\nconst confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }> } = {\n INITIAL: Initial,\n HINT: Hint,\n FATAL_ERROR: FatalError,\n TEMP_BLOCK: TempBlock,\n TEMP_BLOCK_OVER: TempBlockOver,\n};\n\nexport const BaseConfirmation: FC<ConfirmationProps> = ({\n state,\n screen,\n titleTag = 'h3',\n alignContent = 'left',\n children,\n requiredCharAmount = 5,\n countdownDuration = ONE_MINUTE,\n tempBlockDuration = ONE_DAY,\n phone,\n blockSmsRetry,\n dataTestId,\n className,\n maxWidth,\n getScreensMap,\n onInputFinished,\n onChangeState,\n onSmsRetryClick,\n onChangeScreen,\n onFatalErrorOkButtonClick,\n onTempBlockFinished,\n mobile,\n clearCodeOnError = true,\n hideCountdownSection = false,\n breakpoint,\n client,\n initialScreenHintSlot,\n errorVisibleDuration,\n ...restProps\n}) => {\n const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);\n\n const prevState = usePrevious(state);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n /**\n * Перезапускаем таймер после повторного запроса кода\n */\n if (state === 'INITIAL' && prevState === 'CODE_SENDING') {\n startTimer();\n }\n }, [state, prevState, startTimer]);\n\n useEffect(() => {\n /**\n * Останавливаем таймер, если новый экран/состояние не содержит таймер\n */\n if (\n !['INITIAL', 'HINT', 'TEMP_BLOCK', 'TEMP_BLOCK_OVER'].includes(screen) ||\n blockSmsRetry\n ) {\n stopTimer();\n }\n }, [state, screen, blockSmsRetry, stopTimer]);\n\n const handleSmsRetry = () => {\n onChangeState('CODE_SENDING');\n\n onSmsRetryClick();\n };\n\n const handleInputFinished = (code: string) => {\n onChangeState('CODE_CHECKING');\n\n onInputFinished(code);\n };\n\n const handleFatalErrorOkButtonClick = () => {\n if (onFatalErrorOkButtonClick) {\n onFatalErrorOkButtonClick();\n }\n };\n\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const contextValue: TConfirmationContext = {\n hideCountdownSection,\n alignContent,\n titleTag,\n texts: { ...defaultTexts, ...restProps.texts },\n state,\n screen,\n requiredCharAmount,\n countdownDuration,\n timeLeft,\n tempBlockDuration,\n phone,\n blockSmsRetry,\n breakpoint,\n client,\n onTempBlockFinished,\n onChangeState,\n onChangeScreen,\n clearCodeOnError,\n errorVisibleDuration,\n initialScreenHintSlot,\n onInputFinished: handleInputFinished,\n onSmsRetryClick: handleSmsRetry,\n onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,\n };\n\n const customScreen = useMemo(() => getScreensMap?.(confirmationScreens), [getScreensMap]);\n\n const screensMap = customScreen || confirmationScreens;\n\n const CurrentScreen = screensMap[screen];\n\n return (\n <ConfirmationContext.Provider value={contextValue}>\n <div\n className={cn(styles.component, className, {\n [styles.center]: alignContent === 'center',\n })}\n style={{ maxWidth }}\n data-test-id={dataTestId}\n >\n {CurrentScreen && <CurrentScreen mobile={mobile} />}\n </div>\n </ConfirmationContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,MAAM,mBAAmB,GAA2D;AAChF,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,WAAW,EAAE,UAAU;AACvB,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,eAAe,EAAE,aAAa;CACjC;AAEY,MAAA,gBAAgB,GAA0B,CAAC,EACpD,KAAK,EACL,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,kBAAkB,GAAG,CAAC,EACtB,iBAAiB,GAAG,UAAU,EAC9B,iBAAiB,GAAG,OAAO,EAC3B,KAAK,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,eAAe,EACf,aAAa,EACb,eAAe,EACf,cAAc,EACd,yBAAyB,EACzB,mBAAmB,EACnB,MAAM,EACN,gBAAgB,GAAG,IAAI,EACvB,oBAAoB,GAAG,KAAK,EAC5B,UAAU,EACV,MAAM,EACN,qBAAqB,EACrB,oBAAoB,EACpB,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,CAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC,GAAG,YAAY,CAAC,iBAAiB,CAAC;AAEzE,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC;IAEpC,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;AACX;;AAEG;
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/base-confirmation/component.tsx"],"sourcesContent":["import React, { type ComponentType, type FC, useEffect, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../context';\nimport { type ConfirmationProps, defaultTexts, type TConfirmationContext } from '../../types';\nimport { ONE_DAY, ONE_MINUTE, useCountdown } from '../../utils';\nimport { FatalError, Hint, Initial, TempBlock, TempBlockOver } from '../screens';\n\nimport styles from './index.module.css';\n\nconst confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }> } = {\n INITIAL: Initial,\n HINT: Hint,\n FATAL_ERROR: FatalError,\n TEMP_BLOCK: TempBlock,\n TEMP_BLOCK_OVER: TempBlockOver,\n};\n\nexport const BaseConfirmation: FC<ConfirmationProps> = ({\n state,\n screen,\n titleTag = 'h3',\n alignContent = 'left',\n children,\n requiredCharAmount = 5,\n countdownDuration = ONE_MINUTE,\n tempBlockDuration = ONE_DAY,\n phone,\n blockSmsRetry,\n dataTestId,\n className,\n maxWidth,\n getScreensMap,\n onInputFinished,\n onChangeState,\n onSmsRetryClick,\n onChangeScreen,\n onFatalErrorOkButtonClick,\n onTempBlockFinished,\n mobile,\n clearCodeOnError = true,\n hideCountdownSection = false,\n breakpoint,\n client,\n initialScreenHintSlot,\n errorVisibleDuration,\n ...restProps\n}) => {\n const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);\n\n const prevState = usePrevious(state);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n /**\n * Перезапускаем таймер после повторного запроса кода\n */\n if (state === 'INITIAL' && prevState === 'CODE_SENDING') {\n startTimer();\n }\n }, [state, prevState, startTimer]);\n\n useEffect(() => {\n /**\n * Останавливаем таймер, если новый экран/состояние не содержит таймер\n */\n if (\n !['INITIAL', 'HINT', 'TEMP_BLOCK', 'TEMP_BLOCK_OVER'].includes(screen) ||\n blockSmsRetry\n ) {\n stopTimer();\n }\n }, [state, screen, blockSmsRetry, stopTimer]);\n\n const handleSmsRetry = () => {\n onChangeState('CODE_SENDING');\n\n onSmsRetryClick();\n };\n\n const handleInputFinished = (code: string) => {\n onChangeState('CODE_CHECKING');\n\n onInputFinished(code);\n };\n\n const handleFatalErrorOkButtonClick = () => {\n if (onFatalErrorOkButtonClick) {\n onFatalErrorOkButtonClick();\n }\n };\n\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const contextValue: TConfirmationContext = {\n hideCountdownSection,\n alignContent,\n titleTag,\n texts: { ...defaultTexts, ...restProps.texts },\n state,\n screen,\n requiredCharAmount,\n countdownDuration,\n timeLeft,\n tempBlockDuration,\n phone,\n blockSmsRetry,\n breakpoint,\n client,\n onTempBlockFinished,\n onChangeState,\n onChangeScreen,\n clearCodeOnError,\n errorVisibleDuration,\n initialScreenHintSlot,\n onInputFinished: handleInputFinished,\n onSmsRetryClick: handleSmsRetry,\n onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,\n };\n\n const customScreen = useMemo(() => getScreensMap?.(confirmationScreens), [getScreensMap]);\n\n const screensMap = customScreen || confirmationScreens;\n\n const CurrentScreen = screensMap[screen];\n\n return (\n <ConfirmationContext.Provider value={contextValue}>\n <div\n className={cn(styles.component, className, {\n [styles.center]: alignContent === 'center',\n })}\n style={{ maxWidth }}\n data-test-id={dataTestId}\n >\n {CurrentScreen && <CurrentScreen mobile={mobile} />}\n </div>\n </ConfirmationContext.Provider>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
:root {
|
|
5
5
|
--gap-0: 0px;
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
.confirmation__component_qcnjv {
|
|
8
8
|
width: 100%;
|
|
9
9
|
max-width: 388px;
|
|
10
10
|
color: var(--color-light-text-secondary);
|
|
11
11
|
}
|
|
12
|
-
.
|
|
12
|
+
.confirmation__component_qcnjv.confirmation__center_qcnjv {
|
|
13
13
|
margin: var(--gap-0) auto;
|
|
14
14
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"
|
|
3
|
+
const styles = {"component":"confirmation__component_qcnjv","center":"confirmation__center_qcnjv"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-confirmation/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-confirmation/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n width: 100%;\n max-width: 388px;\n color: var(--color-light-text-secondary);\n\n &.center {\n margin: var(--gap-0) auto;\n }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,QAAQ,CAAC,4BAA4B,CAAC;;;;"}
|