@alfalab/core-components-confirmation 13.9.12 → 13.10.0

package/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "13.9.12",
+    "version": "13.10.0",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",

package/shared/index.js

@@ -6,6 +6,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');
@@ -17,6 +18,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/src/components/base-confirmation/component.tsx

@@ -6,7 +6,7 @@ import { usePrevious } from '@alfalab/hooks';
 import { ConfirmationContext } from '../../context';
 import { ConfirmationProps, defaultTexts, TConfirmationContext } from '../../types';
 import { ONE_DAY, ONE_MINUTE, useCountdown } from '../../utils';
-import { FatalError, Hint, Initial, TempBlock } from '../screens';
+import { FatalError, Hint, Initial, TempBlock, TempBlockOver } from '../screens';
 
 import styles from './index.module.css';
 
@@ -15,6 +15,7 @@ const confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }>
     HINT: Hint,
     FATAL_ERROR: FatalError,
     TEMP_BLOCK: TempBlock,
+    TEMP_BLOCK_OVER: TempBlockOver,
 };
 
 export const BaseConfirmation: FC<ConfirmationProps> = ({
@@ -66,7 +67,10 @@ export const BaseConfirmation: FC<ConfirmationProps> = ({
         /**
          * Останавливаем таймер, если новый экран/состояние не содержит таймер
          */
-        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/src/components/screens/hint/component.tsx

@@ -31,7 +31,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
 
     return (
         <div className={cn(styles.component, styles[alignContent])}>
-            <Header mobile={mobile}>Не&nbsp;приходит сообщение?</Header>
+            <Header mobile={mobile}>{texts.hintTitle}</Header>
 
             <Text
                 view='primary-medium'
@@ -41,8 +41,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                     [styles.typographyThemeMobile]: mobile,
                 })}
             >
-                Если у&nbsp;вас изменился номер телефона, позвоните нам или обратитесь в&nbsp;любое
-                отделение банка.
+                {texts.hintDescription}
             </Text>
 
             <div
@@ -52,11 +51,11 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
             >
                 <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
                     <Link
-                        href={getPhoneHref(domesticPhone)}
+                        href={getPhoneHref(internationalPhone)}
                         underline={false}
                         className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}
                     >
-                        {domesticPhone}
+                        {internationalPhone}
                     </Link>
                     <Text
                         view='primary-medium'
@@ -67,18 +66,18 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                         })}
                     >
                         {mobile
-                            ? 'Для\u00A0звонков по\u00A0России'
-                            : ' \u2014\u00A0для звонков по\u00A0России'}
+                            ? 'В\u00A0Москве и\u00A0за\u00A0границей'
+                            : ' \u2014\u00A0в\u00A0Москве и\u00A0за\u00A0границей'}
                     </Text>
                 </div>
 
                 <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
                     <Link
-                        href={getPhoneHref(internationalPhone)}
+                        href={getPhoneHref(domesticPhone)}
                         underline={false}
                         className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}
                     >
-                        {internationalPhone}
+                        {domesticPhone}
                     </Link>
                     <Text
                         view='primary-medium'
@@ -89,8 +88,8 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                         })}
                     >
                         {mobile
-                            ? 'В\u00A0Москве и\u00A0за\u00A0границей'
-                            : ' \u2014\u00A0в\u00A0Москве и\u00A0за\u00A0границей'}
+                            ? 'Для\u00A0звонков по\u00A0России'
+                            : ' \u2014\u00A0для звонков по\u00A0России'}
                     </Text>
                 </div>
             </div>
@@ -103,10 +102,8 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                     [styles.typographyThemeMobile]: mobile,
                 })}
             >
-                Если номер не&nbsp;менялся, возможно, перегружен сервис отправки сообщений.
-                Попробуйте повторить действие через несколько минут.
+                {texts.hintNotification}
             </Text>
-
             <Button
                 size={mobile ? 'xs' : 's'}
                 view='secondary'

package/src/components/screens/index.ts

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

package/src/components/screens/initial/component.tsx

@@ -98,10 +98,6 @@ export const Initial: FC<InitialProps> = ({ mobile }) => {
             return;
         }
 
-        if (state === 'CODE_ERROR' && prevState !== 'CODE_ERROR') {
-            inputRef.current.focus(requiredCharAmount - 1);
-        }
-
         if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {
             inputRef.current.focus();
         }
@@ -120,6 +116,14 @@ export const Initial: FC<InitialProps> = ({ mobile }) => {
     }, [prevState, state, clearTimer]);
 
     const getCodeInputError = (): string | boolean => {
+        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;
         }
@@ -176,7 +180,7 @@ export const Initial: FC<InitialProps> = ({ mobile }) => {
                         [styles.typographyThemeMobile]: mobile,
                     })}
                 >
-                    Код отправлен на {phone}
+                    Отправили на {phone}
                 </Text>
             ) : null}
             <ComponentCodeInput

package/src/components/screens/initial/countdown-section.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext } from 'react';
+import React, { FC, Fragment,ReactNode, useContext } from 'react';
 import cn from 'classnames';
 
 import { Button } from '@alfalab/core-components-button';
@@ -28,7 +28,7 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
     const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =
         useContext(ConfirmationContext);
 
-    const renderText = (text?: string) => (
+    const renderText = (content: ReactNode) => (
         <Text
             className={cn(styles.countdownContainer, {
                 [styles.countdownMobile]: mobile,
@@ -37,7 +37,7 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
             view={mobile ? 'primary-small' : 'primary-medium'}
             tag='div'
         >
-            {text}
+            {content}
         </Text>
     );
 
@@ -77,5 +77,10 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
         );
     }
 
-    return renderText(`${texts.countdown} ${formatMsAsMinutes(timeLeft)}`);
+    return renderText(
+        <Fragment>
+            {texts.countdown}{'\u00A0'}
+            <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>
+        </Fragment>,
+    );
 };

package/src/components/screens/initial/index.module.css

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

package/src/components/screens/temp-block/component.tsx

@@ -53,8 +53,7 @@ export const TempBlock: FC<TempBlockProps> = ({ mobile }) => {
                     progress={1 - timeLeft / tempBlockDuration}
                     className={styles.loader}
                 />
-
-                {formatMsAsMinutes(timeLeft)}
+                <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>
             </div>
         </div>
     );

package/src/components/screens/temp-block/index.module.css

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

package/src/components/screens/temp-block-over/component.tsx

@@ -0,0 +1,55 @@
+import React, { FC, useContext } from 'react';
+import cn from 'classnames';
+
+import { Button } from '@alfalab/core-components-button';
+import { Text } from '@alfalab/core-components-typography';
+
+import { ConfirmationContext } from '../../../context';
+import { Header } from '../../header';
+
+import styles from './index.module.css';
+
+export type TempBlockOverProps = {
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+
+export const TempBlockOver: FC<TempBlockOverProps> = ({ mobile }) => {
+    const { alignContent, texts, breakpoint, client, onChangeScreen, onChangeState } =
+        useContext(ConfirmationContext);
+
+    const handleReturnButtonClick = () => {
+        onChangeScreen('INITIAL');
+        onChangeState('INITIAL');
+    };
+
+    return (
+        <div className={cn(styles.component, styles[alignContent])}>
+            <Header mobile={mobile}>{texts.tempBlockOverTitle}</Header>
+
+            <Text
+                view='primary-medium'
+                color='primary'
+                className={cn(styles.description, {
+                    [styles.typographyTheme]: !mobile,
+                    [styles.typographyThemeMobile]: mobile,
+                })}
+            >
+                {texts.tempBlockOverDescription}
+            </Text>
+
+            <Button
+                size={mobile ? 'xs' : 's'}
+                view='secondary'
+                onClick={handleReturnButtonClick}
+                className={styles.button}
+                breakpoint={breakpoint}
+                client={client}
+            >
+                {texts.tempBlockOverButton}
+            </Button>
+        </div>
+    );
+};

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

@@ -0,0 +1,23 @@
+@import '../../../vars.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+}
+
+.center {
+    align-items: center;
+    text-align: center;
+}
+
+.typographyTheme.typographyTheme {
+    @mixin _confirmation-text;
+}
+
+.typographyThemeMobile.typographyThemeMobile {
+    color: var(--color-light-text-secondary);
+}
+
+.button.button {
+    margin-top: var(--gap-32);
+}

package/src/components/screens/temp-block-over/index.ts

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

package/src/types.ts

@@ -173,6 +173,8 @@ export type ConfirmationTexts = {
      */
     title?: ReactNode; // заголовок
     codeError?: string; // ошибка проверки кода
+    codeErrorExpired?: string; // код устарел, запросите новый
+    codeErrorExpiredEnded?: string; // код устарел
     codeChecking?: string; // код проверяется
     codeSending?: string; // код отправляется
     codeSended?: string; // код отправлен
@@ -184,9 +186,13 @@ export type ConfirmationTexts = {
     /**
      * Экран HINT
      */
+    hintTitle?: string; // заголовок
+    hintDescription?: string; // описание
+    hintNotification?: string; // уведомление
     hintButton?: string; // кнопка 'Вернуться'
     domesticPhone?: string; // номер телефона для звонков по России
     internationalPhone?: string; // номер телефона для звонков из-за границы
+
     /**
      * Экран FATAL_ERROR
      */
@@ -199,41 +205,60 @@ export type ConfirmationTexts = {
      */
     tempBlockTitle?: ReactNode; // заголовок
     tempBlockDescription?: ReactNode; // описание
+
+    /**
+     * Экран TEMP_BLOCK_OVER
+     */
+    tempBlockOverTitle?: ReactNode; // заголовок
+    tempBlockOverDescription?: ReactNode; // описание
+    tempBlockOverButton?: string; // кнопка
 };
 
 export type ConfirmationScreen =
     | 'INITIAL' // начальный экран
     | 'HINT' // экран "Не приходит смс?"
     | 'FATAL_ERROR' // экран критической ошибки
-    | 'TEMP_BLOCK'; // экран временной блокировки
+    | 'TEMP_BLOCK' // экран временной блокировки
+    | 'TEMP_BLOCK_OVER'; // экран todo
 
 export type ConfirmationState =
     | 'INITIAL' // начальное состояние
     | 'CODE_CHECKING' // проверка кода
     | 'CODE_SENDING' // повторная отправка кода
-    | 'CODE_ERROR'; // ошибка, когда ввели неверный код
+    | 'CODE_ERROR' // ошибка, когда ввели неверный код
+    | 'CODE_EXPIRED' // ошибка, когда код устарел, но можно запросить новый
+    | 'CODE_EXPIRED_ENDED'; // ошибка, когда код устарел
 
 export type ScreensMap = {
     [key: string]: ComponentType;
 };
 
 export const defaultTexts: ConfirmationTexts = {
-    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ограничили дальнейший ввод.',
+        'Мы ограничили следующие попытки ввода, потому\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/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/types.js

@@ -3,21 +3,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var 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',
 };