@alfalab/core-components 48.25.0-beta.0 → 48.26.0-beta.0

package/confirmation/modern/shared/index.js

@@ -2,6 +2,7 @@ export { Initial } from '../components/screens/initial/component.js';
 export { Hint } from '../components/screens/hint/component.js';
 export { FatalError } from '../components/screens/fatal-error/component.js';
 export { TempBlock } from '../components/screens/temp-block/component.js';
+export { TempBlockOver } from '../components/screens/temp-block-over/component.js';
 export { CountdownLoader } from '../components/countdown-loader/component.js';
 export { ConfirmationContext } from '../context.js';
 export { defaultTexts } from '../types.js';
@@ -15,6 +16,6 @@ import '../../../link/modern';
 import '../../../typography/modern';
 import '@alfalab/hooks';
 import '../components/header/component.js';
-import '../countdown-section-c7e8c587.js';
+import '../countdown-section-67dedb5c.js';
 import '../../../button/modern';
 import '../../../spinner/modern';

package/confirmation/modern/types.d.ts

@@ -117,6 +117,8 @@ type ConfirmationTexts = {
      */
     title?: ReactNode;
     codeError?: string;
+    codeErrorExpired?: string;
+    codeErrorExpiredEnded?: string;
     codeChecking?: string;
     codeSending?: string;
     codeSended?: string;
@@ -127,6 +129,9 @@ type ConfirmationTexts = {
     /**
      * Экран HINT
      */
+    hintTitle?: string;
+    hintDescription?: string;
+    hintNotification?: string;
     hintButton?: string;
     domesticPhone?: string;
     internationalPhone?: string;
@@ -141,9 +146,15 @@ type ConfirmationTexts = {
      */
     tempBlockTitle?: ReactNode;
     tempBlockDescription?: ReactNode;
+    /**
+     * Экран TEMP_BLOCK_OVER
+     */
+    tempBlockOverTitle?: ReactNode;
+    tempBlockOverDescription?: ReactNode;
+    tempBlockOverButton?: string;
 };
-type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK';
-type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR';
+type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
+type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
 type ScreensMap = {
     [key: string]: ComponentType;
 };

package/confirmation/modern/types.js

@@ -1,19 +1,27 @@
 const defaultTexts = {
-    title: 'Введите код из\xa0сообщения',
-    codeError: 'Код введён неверно',
+    title: 'Введите код из\xa0уведомления',
+    codeError: 'Код не подходит, проверьте его',
+    codeErrorExpired: 'Код устарел, запросите новый',
+    codeErrorExpiredEnded: 'Код устарел',
     codeChecking: '',
     codeSending: '',
-    buttonRetry: 'Запросить код повторно',
-    linkToHint: 'Не\xa0приходит сообщение?',
+    buttonRetry: 'Запросить код',
+    hintTitle: 'Не\xa0приходит код?',
+    hintDescription: 'Если\xa0сменили номер, позвоните нам или обратитесь в\xa0любой офис банка.',
+    hintNotification: 'Если номер не\xa0меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.',
+    linkToHint: 'Не\xa0приходит код?',
     hintButton: 'Вернуться к\xa0вводу кода',
     noAttemptsLeft: 'Не\xa0осталось попыток запроса кода',
     fatalErrorTitle: 'Ввести код больше нельзя',
-    fatalErrorDescription: 'Вы\xa0ввели код неверно более 5\xa0раз. В\xa0целях безопасности мы\xa0ограничили дальнейший ввод.',
+    fatalErrorDescription: 'Мы ограничили следующие попытки ввода, потому\xa0что код был введён неверно больше 5 раз.',
     fatalErrorButton: 'Понятно',
-    tempBlockTitle: 'Превышено количество попыток запроса кода',
-    tempBlockDescription: 'Повторное подтверждение кодом будет возможно через 24\xa0часа',
-    codeSended: 'Код выслан',
-    countdown: 'Запросить повторно можно через',
+    tempBlockTitle: 'Ввести код пока нельзя',
+    tempBlockDescription: 'Слишком много неверных попыток. Запросите новый позже',
+    tempBlockOverTitle: 'Ввод разблокирован',
+    tempBlockOverDescription: 'Теперь можно запросить новый код',
+    tempBlockOverButton: 'Запросить новый код',
+    codeSended: 'Код отправлен',
+    countdown: 'Запросить новый можно через',
     domesticPhone: '8 800 200 00 00',
     internationalPhone: '+7 495 78 888 78',
 };

package/confirmation/moderncssm/component.responsive.js

@@ -28,6 +28,8 @@ import './components/screens/temp-block/component.js';
 import './components/countdown-loader/component.js';
 import './components/countdown-loader/index.module.css';
 import './components/screens/temp-block/index.module.css';
+import './components/screens/temp-block-over/component.js';
+import './components/screens/temp-block-over/index.module.css';
 import './components/base-confirmation/index.module.css';
 import './mobile/mobile.module.css';
 

package/confirmation/moderncssm/components/base-confirmation/component.js

@@ -8,6 +8,7 @@ import { Initial } from '../screens/initial/component.js';
 import { Hint } from '../screens/hint/component.js';
 import { FatalError } from '../screens/fatal-error/component.js';
 import { TempBlock } from '../screens/temp-block/component.js';
+import { TempBlockOver } from '../screens/temp-block-over/component.js';
 import styles from './index.module.css';
 import '../../../../button/moderncssm/mobile';
 import '../../../../code-input/moderncssm/desktop';
@@ -25,12 +26,14 @@ import '../screens/fatal-error/index.module.css';
 import '../countdown-loader/component.js';
 import '../countdown-loader/index.module.css';
 import '../screens/temp-block/index.module.css';
+import '../screens/temp-block-over/index.module.css';
 
 const confirmationScreens = {
     INITIAL: Initial,
     HINT: Hint,
     FATAL_ERROR: FatalError,
     TEMP_BLOCK: TempBlock,
+    TEMP_BLOCK_OVER: TempBlockOver,
 };
 const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requiredCharAmount = 5, countdownDuration = ONE_MINUTE, tempBlockDuration = ONE_DAY, phone, blockSmsRetry, dataTestId, className, getScreensMap, onInputFinished, onChangeState, onSmsRetryClick, onChangeScreen, onFatalErrorOkButtonClick, onTempBlockFinished, mobile, clearCodeOnError = true, hideCountdownSection = false, breakpoint, client, initialScreenHintSlot, errorVisibleDuration, ...restProps }) => {
     const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);
@@ -50,7 +53,8 @@ const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requ
         /**
          * Останавливаем таймер, если новый экран/состояние не содержит таймер
          */
-        if (!['INITIAL', 'HINT', 'TEMP_BLOCK'].includes(screen) || blockSmsRetry) {
+        if (!['INITIAL', 'HINT', 'TEMP_BLOCK', 'TEMP_BLOCK_OVER'].includes(screen) ||
+            blockSmsRetry) {
             stopTimer();
         }
     }, [state, screen, blockSmsRetry, stopTimer]);

package/confirmation/moderncssm/components/base-confirmation/index.js

@@ -25,4 +25,6 @@ import '../screens/temp-block/component.js';
 import '../countdown-loader/component.js';
 import '../countdown-loader/index.module.css';
 import '../screens/temp-block/index.module.css';
+import '../screens/temp-block-over/component.js';
+import '../screens/temp-block-over/index.module.css';
 import './index.module.css';

package/confirmation/moderncssm/components/index.js

@@ -2,6 +2,7 @@ export { Initial } from './screens/initial/component.js';
 export { Hint } from './screens/hint/component.js';
 export { FatalError } from './screens/fatal-error/component.js';
 export { TempBlock } from './screens/temp-block/component.js';
+export { TempBlockOver } from './screens/temp-block-over/component.js';
 export { CountdownLoader } from './countdown-loader/component.js';
 import 'react';
 import 'classnames';
@@ -23,3 +24,4 @@ import './screens/hint/index.module.css';
 import './screens/fatal-error/index.module.css';
 import './screens/temp-block/index.module.css';
 import './countdown-loader/index.module.css';
+import './screens/temp-block-over/index.module.css';

package/confirmation/moderncssm/components/screens/hint/component.js

@@ -17,34 +17,34 @@ const Hint = ({ mobile }) => {
         onChangeState('INITIAL');
     };
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
-        React.createElement(Header, { mobile: mobile }, "\u041D\u0435\u00A0\u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435?"),
+        React.createElement(Header, { mobile: mobile }, texts.hintTitle),
         React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
-            }) }, "\u0415\u0441\u043B\u0438 \u0443\u00A0\u0432\u0430\u0441 \u0438\u0437\u043C\u0435\u043D\u0438\u043B\u0441\u044F \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430, \u043F\u043E\u0437\u0432\u043E\u043D\u0438\u0442\u0435 \u043D\u0430\u043C \u0438\u043B\u0438 \u043E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u0432\u00A0\u043B\u044E\u0431\u043E\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u0430."),
+            }) }, texts.hintDescription),
         React.createElement("div", { className: cn(styles.phonesWrap, {
                 [styles.phonesWrapMobile]: mobile,
             }) },
             React.createElement("div", { className: cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile }) },
-                React.createElement(Link, { href: getPhoneHref(domesticPhone), underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, domesticPhone),
+                React.createElement(Link, { href: getPhoneHref(internationalPhone), underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, internationalPhone),
                 React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                         [styles.typographyTheme]: !mobile,
                         [styles.typographyThemeMobile]: mobile,
                     }) }, mobile
-                    ? 'Для\u00A0звонков по\u00A0России'
-                    : ' \u2014\u00A0для звонков по\u00A0России')),
+                    ? 'В\u00A0Москве и\u00A0за\u00A0границей'
+                    : ' \u2014\u00A0в\u00A0Москве и\u00A0за\u00A0границей')),
             React.createElement("div", { className: cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile }) },
-                React.createElement(Link, { href: getPhoneHref(internationalPhone), underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, internationalPhone),
+                React.createElement(Link, { href: getPhoneHref(domesticPhone), underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, domesticPhone),
                 React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                         [styles.typographyTheme]: !mobile,
                         [styles.typographyThemeMobile]: mobile,
                     }) }, mobile
-                    ? 'В\u00A0Москве и\u00A0за\u00A0границей'
-                    : ' \u2014\u00A0в\u00A0Москве и\u00A0за\u00A0границей'))),
+                    ? 'Для\u00A0звонков по\u00A0России'
+                    : ' \u2014\u00A0для звонков по\u00A0России'))),
         React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
-            }) }, "\u0415\u0441\u043B\u0438 \u043D\u043E\u043C\u0435\u0440 \u043D\u0435\u00A0\u043C\u0435\u043D\u044F\u043B\u0441\u044F, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u043F\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0438\u043D\u0443\u0442."),
+            }) }, texts.hintNotification),
         React.createElement(Button, { size: mobile ? 'xs' : 's', view: 'secondary', onClick: handleReturnButtonClick, className: styles.hintButton, breakpoint: breakpoint, client: client }, hintButton)));
 };
 

package/confirmation/moderncssm/components/screens/index.d.ts

@@ -2,3 +2,4 @@ export * from "./initial/index";
 export * from "./hint/index";
 export * from "./fatal-error/index";
 export * from "./temp-block/index";
+export * from "./temp-block-over/index";

package/confirmation/moderncssm/components/screens/index.js

@@ -2,6 +2,7 @@ export { Initial } from './initial/component.js';
 export { Hint } from './hint/component.js';
 export { FatalError } from './fatal-error/component.js';
 export { TempBlock } from './temp-block/component.js';
+export { TempBlockOver } from './temp-block-over/component.js';
 import 'react';
 import 'classnames';
 import '../../../../button/moderncssm/mobile';
@@ -23,3 +24,4 @@ import './fatal-error/index.module.css';
 import '../countdown-loader/component.js';
 import '../countdown-loader/index.module.css';
 import './temp-block/index.module.css';
+import './temp-block-over/index.module.css';

package/confirmation/moderncssm/components/screens/initial/component.js

@@ -59,9 +59,6 @@ const Initial = ({ mobile }) => {
         if (!inputRef.current) {
             return;
         }
-        if (state === 'CODE_ERROR' && prevState !== 'CODE_ERROR') {
-            inputRef.current.focus(requiredCharAmount - 1);
-        }
         if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {
             inputRef.current.focus();
         }
@@ -76,6 +73,12 @@ const Initial = ({ mobile }) => {
         }
     }, [prevState, state, clearTimer]);
     const getCodeInputError = () => {
+        if (state === 'CODE_EXPIRED') {
+            return texts.codeErrorExpired || true;
+        }
+        if (state === 'CODE_EXPIRED_ENDED') {
+            return texts.codeErrorExpiredEnded || true;
+        }
         if (state === 'CODE_ERROR') {
             return texts.codeError || true;
         }
@@ -99,7 +102,7 @@ const Initial = ({ mobile }) => {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
             }) },
-            "\u041A\u043E\u0434 \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D \u043D\u0430 ",
+            "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u043B\u0438 \u043D\u0430 ",
             phone)) : null,
         React.createElement(ComponentCodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, className: cn(styles.containerInput, styles.codeInput), onComplete: handleInputComplete, onChange: handleInputChange, clearCodeOnError: clearCodeOnError, errorVisibleDuration: errorVisibleDuration, onErrorAnimationEnd: handleErrorAnimationEnd }),
         !hideCountdownSection && (React.createElement(CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick, mobile: mobile })),

package/confirmation/moderncssm/components/screens/initial/countdown-section.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, Fragment } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../../button/moderncssm';
 import { Spinner } from '../../../../../spinner/moderncssm';
@@ -9,10 +9,10 @@ import styles from './index.module.css';
 
 const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile, handleSmsRetryClick, }) => {
     const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } = useContext(ConfirmationContext);
-    const renderText = (text) => (React.createElement(Text, { className: cn(styles.countdownContainer, {
+    const renderText = (content) => (React.createElement(Text, { className: cn(styles.countdownContainer, {
             [styles.countdownMobile]: mobile,
             [styles.typographyTheme]: !mobile,
-        }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, text));
+        }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, content));
     if (codeSendHintVisible)
         return renderText(texts.codeSended);
     if (processing) {
@@ -28,7 +28,10 @@ const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile,
     if (timePassed) {
         return (React.createElement(Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile }), breakpoint: breakpoint, client: client }, texts.buttonRetry));
     }
-    return renderText(`${texts.countdown} ${formatMsAsMinutes(timeLeft)}`);
+    return renderText(React.createElement(Fragment, null,
+        texts.countdown,
+        '\u00A0',
+        React.createElement("time", { className: styles.timeCounter }, formatMsAsMinutes(timeLeft))));
 };
 
 export { CountdownSection };

package/confirmation/moderncssm/components/screens/initial/index.module.css

@@ -86,6 +86,15 @@
     margin-bottom: var(--gap-16);
 }
 
+.timeCounter {
+    display: inline-block;
+    min-width: 47px;
+    color: var(--color-light-text-secondary);
+    text-align: left;
+    font-feature-settings: lining-nums tabular-nums;
+    font-variant-numeric: lining-nums tabular-nums;
+}
+
 .getCodeButton {
     position: relative;
     top: var(--gap-4-neg);

package/confirmation/moderncssm/components/screens/temp-block/component.js

@@ -28,7 +28,7 @@ const TempBlock = ({ mobile }) => {
             }) }, texts.tempBlockDescription),
         React.createElement("div", { className: cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile }) },
             React.createElement(CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
-            formatMsAsMinutes(timeLeft))));
+            React.createElement("time", { className: styles.timeCounter }, formatMsAsMinutes(timeLeft)))));
 };
 
 export { TempBlock };

package/confirmation/moderncssm/components/screens/temp-block/index.module.css

@@ -46,6 +46,15 @@
     align-items: center;
 }
 
+.timeCounter {
+    display: inline-block;
+    min-width: 47px;
+    color: var(--color-light-text-secondary);
+    text-align: left;
+    font-feature-settings: lining-nums tabular-nums;
+    font-variant-numeric: lining-nums tabular-nums;
+}
+
 .loader {
     margin-right: var(--gap-8);
 }

package/confirmation/moderncssm/components/screens/temp-block-over/component.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type TempBlockOverProps = {
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+declare const TempBlockOver: FC<TempBlockOverProps>;
+export { TempBlockOverProps, TempBlockOver };

package/confirmation/moderncssm/components/screens/temp-block-over/component.js

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { Button } from '../../../../../button/moderncssm';
+import { Text } from '../../../../../typography/moderncssm';
+import { ConfirmationContext } from '../../../context.js';
+import { Header } from '../../header/component.js';
+import styles from './index.module.css';
+import '../../../utils.js';
+import '../../header/index.module.css';
+
+const TempBlockOver = ({ mobile }) => {
+    const { alignContent, texts, breakpoint, client, onChangeScreen, onChangeState } = useContext(ConfirmationContext);
+    const handleReturnButtonClick = () => {
+        onChangeScreen('INITIAL');
+        onChangeState('INITIAL');
+    };
+    return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
+        React.createElement(Header, { mobile: mobile }, texts.tempBlockOverTitle),
+        React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, {
+                [styles.typographyTheme]: !mobile,
+                [styles.typographyThemeMobile]: mobile,
+            }) }, texts.tempBlockOverDescription),
+        React.createElement(Button, { size: mobile ? 'xs' : 's', view: 'secondary', onClick: handleReturnButtonClick, className: styles.button, breakpoint: breakpoint, client: client }, texts.tempBlockOverButton)));
+};
+
+export { TempBlockOver };

package/confirmation/moderncssm/components/screens/temp-block-over/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/confirmation/moderncssm/components/screens/temp-block-over/index.js

@@ -0,0 +1,10 @@
+export { TempBlockOver } from './component.js';
+import 'react';
+import 'classnames';
+import '../../../../../button/moderncssm';
+import '../../../../../typography/moderncssm';
+import '../../../context.js';
+import '../../../utils.js';
+import '../../header/component.js';
+import '../../header/index.module.css';
+import './index.module.css';

package/confirmation/moderncssm/components/screens/temp-block-over/index.module.css

@@ -0,0 +1,42 @@
+/* */
+
+:root {
+    /* desktop */
+
+    /* mobile */
+
+    /* text */
+    --confirmation-text-font-size: 16px;
+    --confirmation-text-line-height: 24px;
+    --confirmation-text-font-weight: 400;
+    --confirmation-text-font-family: var(--font-family-system);
+    --confirmation-text-color: var(--color-light-text-primary)
+
+    /* header */
+}
+
+.component {
+    display: flex;
+    flex-direction: column;
+}
+
+.center {
+    align-items: center;
+    text-align: center;
+}
+
+.typographyTheme.typographyTheme {
+    font-size: var(--confirmation-text-font-size);
+    line-height: var(--confirmation-text-line-height);
+    font-weight: var(--confirmation-text-font-weight);
+    font-family: var(--confirmation-text-font-family);
+    color: var(--confirmation-text-color);
+}
+
+.typographyThemeMobile.typographyThemeMobile {
+    color: var(--color-light-text-secondary);
+}
+
+.button.button {
+    margin-top: var(--gap-32);
+}

package/confirmation/moderncssm/desktop/component.desktop.js

@@ -25,6 +25,8 @@ import '../components/screens/temp-block/component.js';
 import '../components/countdown-loader/component.js';
 import '../components/countdown-loader/index.module.css';
 import '../components/screens/temp-block/index.module.css';
+import '../components/screens/temp-block-over/component.js';
+import '../components/screens/temp-block-over/index.module.css';
 import '../components/base-confirmation/index.module.css';
 
 const ConfirmationDesktop = (props) => (React.createElement(BaseConfirmation, { ...props }));

package/confirmation/moderncssm/desktop/index.js

@@ -26,4 +26,6 @@ import '../components/screens/temp-block/component.js';
 import '../components/countdown-loader/component.js';
 import '../components/countdown-loader/index.module.css';
 import '../components/screens/temp-block/index.module.css';
+import '../components/screens/temp-block-over/component.js';
+import '../components/screens/temp-block-over/index.module.css';
 import '../components/base-confirmation/index.module.css';

package/confirmation/moderncssm/index.js

@@ -28,6 +28,8 @@ import './components/screens/temp-block/component.js';
 import './components/countdown-loader/component.js';
 import './components/countdown-loader/index.module.css';
 import './components/screens/temp-block/index.module.css';
+import './components/screens/temp-block-over/component.js';
+import './components/screens/temp-block-over/index.module.css';
 import './components/base-confirmation/index.module.css';
 import './mobile/component.mobile.js';
 import './mobile/mobile.module.css';

package/confirmation/moderncssm/mobile/component.mobile.js

@@ -26,6 +26,8 @@ import '../components/screens/temp-block/component.js';
 import '../components/countdown-loader/component.js';
 import '../components/countdown-loader/index.module.css';
 import '../components/screens/temp-block/index.module.css';
+import '../components/screens/temp-block-over/component.js';
+import '../components/screens/temp-block-over/index.module.css';
 import '../components/base-confirmation/index.module.css';
 
 const ConfirmationMobile = ({ className, ...resProps }) => (React.createElement(BaseConfirmation, { mobile: true, className: cn(className, styles.container), ...resProps }));

package/confirmation/moderncssm/mobile/index.js

@@ -26,5 +26,7 @@ import '../components/screens/temp-block/component.js';
 import '../components/countdown-loader/component.js';
 import '../components/countdown-loader/index.module.css';
 import '../components/screens/temp-block/index.module.css';
+import '../components/screens/temp-block-over/component.js';
+import '../components/screens/temp-block-over/index.module.css';
 import '../components/base-confirmation/index.module.css';
 import './mobile.module.css';

package/confirmation/moderncssm/shared/index.js

@@ -2,6 +2,7 @@ export { Initial } from '../components/screens/initial/component.js';
 export { Hint } from '../components/screens/hint/component.js';
 export { FatalError } from '../components/screens/fatal-error/component.js';
 export { TempBlock } from '../components/screens/temp-block/component.js';
+export { TempBlockOver } from '../components/screens/temp-block-over/component.js';
 export { CountdownLoader } from '../components/countdown-loader/component.js';
 export { ConfirmationContext } from '../context.js';
 export { defaultTexts } from '../types.js';
@@ -24,3 +25,4 @@ import '../components/screens/hint/index.module.css';
 import '../components/screens/fatal-error/index.module.css';
 import '../components/screens/temp-block/index.module.css';
 import '../components/countdown-loader/index.module.css';
+import '../components/screens/temp-block-over/index.module.css';

package/confirmation/moderncssm/types.d.ts

@@ -117,6 +117,8 @@ type ConfirmationTexts = {
      */
     title?: ReactNode;
     codeError?: string;
+    codeErrorExpired?: string;
+    codeErrorExpiredEnded?: string;
     codeChecking?: string;
     codeSending?: string;
     codeSended?: string;
@@ -127,6 +129,9 @@ type ConfirmationTexts = {
     /**
      * Экран HINT
      */
+    hintTitle?: string;
+    hintDescription?: string;
+    hintNotification?: string;
     hintButton?: string;
     domesticPhone?: string;
     internationalPhone?: string;
@@ -141,9 +146,15 @@ type ConfirmationTexts = {
      */
     tempBlockTitle?: ReactNode;
     tempBlockDescription?: ReactNode;
+    /**
+     * Экран TEMP_BLOCK_OVER
+     */
+    tempBlockOverTitle?: ReactNode;
+    tempBlockOverDescription?: ReactNode;
+    tempBlockOverButton?: string;
 };
-type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK';
-type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR';
+type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
+type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
 type ScreensMap = {
     [key: string]: ComponentType;
 };

package/confirmation/moderncssm/types.js

@@ -1,19 +1,27 @@
 const defaultTexts = {
-    title: 'Введите код из\xa0сообщения',
-    codeError: 'Код введён неверно',
+    title: 'Введите код из\xa0уведомления',
+    codeError: 'Код не подходит, проверьте его',
+    codeErrorExpired: 'Код устарел, запросите новый',
+    codeErrorExpiredEnded: 'Код устарел',
     codeChecking: '',
     codeSending: '',
-    buttonRetry: 'Запросить код повторно',
-    linkToHint: 'Не\xa0приходит сообщение?',
+    buttonRetry: 'Запросить код',
+    hintTitle: 'Не\xa0приходит код?',
+    hintDescription: 'Если\xa0сменили номер, позвоните нам или обратитесь в\xa0любой офис банка.',
+    hintNotification: 'Если номер не\xa0меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.',
+    linkToHint: 'Не\xa0приходит код?',
     hintButton: 'Вернуться к\xa0вводу кода',
     noAttemptsLeft: 'Не\xa0осталось попыток запроса кода',
     fatalErrorTitle: 'Ввести код больше нельзя',
-    fatalErrorDescription: 'Вы\xa0ввели код неверно более 5\xa0раз. В\xa0целях безопасности мы\xa0ограничили дальнейший ввод.',
+    fatalErrorDescription: 'Мы ограничили следующие попытки ввода, потому\xa0что код был введён неверно больше 5 раз.',
     fatalErrorButton: 'Понятно',
-    tempBlockTitle: 'Превышено количество попыток запроса кода',
-    tempBlockDescription: 'Повторное подтверждение кодом будет возможно через 24\xa0часа',
-    codeSended: 'Код выслан',
-    countdown: 'Запросить повторно можно через',
+    tempBlockTitle: 'Ввести код пока нельзя',
+    tempBlockDescription: 'Слишком много неверных попыток. Запросите новый позже',
+    tempBlockOverTitle: 'Ввод разблокирован',
+    tempBlockOverDescription: 'Теперь можно запросить новый код',
+    tempBlockOverButton: 'Запросить новый код',
+    codeSended: 'Код отправлен',
+    countdown: 'Запросить новый можно через',
     domesticPhone: '8 800 200 00 00',
     internationalPhone: '+7 495 78 888 78',
 };

package/confirmation/shared/index.js

@@ -4,6 +4,7 @@ var components_screens_initial_component = require('../components/screens/initia
 var components_screens_hint_component = require('../components/screens/hint/component.js');
 var components_screens_fatalError_component = require('../components/screens/fatal-error/component.js');
 var components_screens_tempBlock_component = require('../components/screens/temp-block/component.js');
+var components_screens_tempBlockOver_component = require('../components/screens/temp-block-over/component.js');
 var components_countdownLoader_component = require('../components/countdown-loader/component.js');
 var context = require('../context.js');
 var types = require('../types.js');
@@ -15,6 +16,7 @@ exports.Initial = components_screens_initial_component.Initial;
 exports.Hint = components_screens_hint_component.Hint;
 exports.FatalError = components_screens_fatalError_component.FatalError;
 exports.TempBlock = components_screens_tempBlock_component.TempBlock;
+exports.TempBlockOver = components_screens_tempBlockOver_component.TempBlockOver;
 exports.CountdownLoader = components_countdownLoader_component.CountdownLoader;
 exports.ConfirmationContext = context.ConfirmationContext;
 exports.defaultTexts = types.defaultTexts;

package/confirmation/types.d.ts

@@ -117,6 +117,8 @@ type ConfirmationTexts = {
      */
     title?: ReactNode;
     codeError?: string;
+    codeErrorExpired?: string;
+    codeErrorExpiredEnded?: string;
     codeChecking?: string;
     codeSending?: string;
     codeSended?: string;
@@ -127,6 +129,9 @@ type ConfirmationTexts = {
     /**
      * Экран HINT
      */
+    hintTitle?: string;
+    hintDescription?: string;
+    hintNotification?: string;
     hintButton?: string;
     domesticPhone?: string;
     internationalPhone?: string;
@@ -141,9 +146,15 @@ type ConfirmationTexts = {
      */
     tempBlockTitle?: ReactNode;
     tempBlockDescription?: ReactNode;
+    /**
+     * Экран TEMP_BLOCK_OVER
+     */
+    tempBlockOverTitle?: ReactNode;
+    tempBlockOverDescription?: ReactNode;
+    tempBlockOverButton?: string;
 };
-type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK';
-type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR';
+type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
+type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
 type ScreensMap = {
     [key: string]: ComponentType;
 };