@alfalab/core-components-confirmation 12.5.2 → 13.0.0

package/src/types.ts

@@ -0,0 +1,219 @@
+import { ComponentType, ReactNode } from 'react';
+
+export type ConfirmationProps = {
+    /**
+     * Экран компонента
+     */
+    screen: ConfirmationScreen | string;
+
+    /**
+     * Состояние компонента
+     */
+    state: ConfirmationState | string;
+
+    /**
+     * Мобильная версия компонента для экрана
+     */
+    mobile?: boolean;
+
+    /**
+     * Позиционирование контента
+     */
+    alignContent?: 'left' | 'center';
+
+    /**
+     * Объект с текстами
+     */
+    texts?: ConfirmationTexts;
+
+    /**
+     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка
+     */
+    requiredCharAmount?: number;
+
+    /**
+     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах
+     */
+    countdownDuration?: number;
+
+    /**
+     * Продолжительность блокировки формы (ms)
+     */
+    tempBlockDuration?: number;
+
+    /**
+     * Номер телефона, на который отправлен код
+     */
+    phone?: string;
+
+    /**
+     * Не осталось попыток ввода кода
+     */
+    blockSmsRetry?: boolean;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+
+    /**
+     * Флаг - нужно ли очищать код при возникновении ошибки
+     */
+    clearCodeOnError?: boolean;
+
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeState: (state: ConfirmationState | string) => void;
+
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeScreen: (state: ConfirmationScreen | string) => void;
+
+    /**
+     * Обработчик события завершения ввода кода подписания
+     */
+    onInputFinished: (code: string) => void;
+
+    /**
+     * Обработчик события нажатия на кнопку "Запросить код"
+     */
+    onSmsRetryClick: () => void;
+
+    /**
+     * Клик по кнопке "Понятно" на экране фатальной ошибки
+     */
+    onFatalErrorOkButtonClick?: () => void;
+
+    /**
+     * Временная блокировка формы закончилась
+     */
+    onTempBlockFinished?: () => void;
+
+    /**
+     * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
+     */
+    getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+
+    /**
+     * Скрыть секцию с повторной отправкой кода
+     * @default false
+     */
+    hideCountdownSection?: boolean;
+
+    /**
+     * Контрольная точка для кнопки, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+
+export type TConfirmationContext = Required<
+    Pick<
+        ConfirmationProps,
+        | 'alignContent'
+        | 'texts'
+        | 'state'
+        | 'screen'
+        | 'requiredCharAmount'
+        | 'onInputFinished'
+        | 'countdownDuration'
+        | 'onChangeState'
+        | 'onSmsRetryClick'
+        | 'onChangeScreen'
+        | 'onFatalErrorOkButtonClick'
+        | 'tempBlockDuration'
+        | 'hideCountdownSection'
+    >
+> &
+    Pick<
+        ConfirmationProps,
+        'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError'
+    > & {
+        timeLeft: number;
+    } & {
+        /**
+         * Контрольная точка для кнопки, с нее начинается desktop версия
+         * @default 1024
+         */
+        breakpoint?: number;
+    };
+
+export type ConfirmationTexts = {
+    /**
+     * Экран INITIAL
+     */
+    title?: ReactNode; // заголовок
+    codeError?: string; // ошибка проверки кода
+    codeChecking?: string; // код проверяется
+    codeSending?: string; // код отправляется
+    codeSended?: string; // код отправлен
+    buttonRetry?: string; // кнопка повторной отправки кода
+    linkToHint?: string; // ссылка на экран HINT
+    noAttemptsLeft?: string; // не осталось попыток запроса кода
+    countdown?: string; // 'запросить повторно можно через'
+
+    /**
+     * Экран HINT
+     */
+    hintButton?: string; // кнопка 'Вернуться'
+
+    /**
+     * Экран FATAL_ERROR
+     */
+    fatalErrorTitle?: ReactNode; // заголовок
+    fatalErrorDescription?: ReactNode; // описание
+    fatalErrorButton?: string; // кнопка
+
+    /**
+     * Экран TEMP_BLOCK
+     */
+    tempBlockTitle?: ReactNode; // заголовок
+    tempBlockDescription?: ReactNode; // описание
+};
+
+export type ConfirmationScreen =
+    | 'INITIAL' // начальный экран
+    | 'HINT' // экран "Не приходит смс?"
+    | 'FATAL_ERROR' // экран критической ошибки
+    | 'TEMP_BLOCK'; // экран временной блокировки
+
+export type ConfirmationState =
+    | 'INITIAL' // начальное состояние
+    | 'CODE_CHECKING' // проверка кода
+    | 'CODE_SENDING' // повторная отправка кода
+    | 'CODE_ERROR'; // ошибка, когда ввели неверный код
+
+export type ScreensMap = {
+    [key: string]: ComponentType;
+};
+
+export const defaultTexts = {
+    title: 'Введите код из\xa0сообщения',
+    codeError: 'Код введён неверно',
+    codeChecking: '',
+    codeSending: '',
+    buttonRetry: 'Запросить код повторно',
+    linkToHint: 'Не\xa0приходит сообщение?',
+    hintButton: 'Вернуться к\xa0вводу кода',
+    noAttemptsLeft: 'Не\xa0осталось попыток запроса кода',
+    fatalErrorTitle: 'Ввести код больше нельзя',
+    fatalErrorDescription:
+        'Вы\xa0ввели код неверно более 5\xa0раз. В\xa0целях безопасности мы\xa0ограничили дальнейший ввод.',
+    fatalErrorButton: 'Понятно',
+    tempBlockTitle: 'Превышено количество попыток запроса кода',
+    tempBlockDescription: 'Повторное подтверждение кодом будет возможно через 24\xa0часа',
+    codeSended: 'Код выслан',
+    countdown: 'Запросить повторно можно через',
+};

package/src/utils.ts

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ConfirmationProps } from './types';
+
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+export function formatMsAsMinutes(ms: number) {
+    const totalSeconds = Math.ceil(ms / 1000);
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    const totalHours = Math.floor(totalMinutes / 60);
+
+    const seconds = totalSeconds % 60;
+    const paddedSeconds = `00${seconds}`.slice(-2);
+
+    if (totalHours > 0) {
+        const minutes = totalMinutes % 60;
+
+        const paddedMinutes = `00${minutes}`.slice(-2);
+        const paddedHours = `00${totalHours}`.slice(-2);
+
+        return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
+    }
+
+    const paddedMinutes = `00${totalMinutes}`.slice(-2);
+
+    return `${paddedMinutes}:${paddedSeconds}`;
+}
+
+type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
+
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+export const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {
+    const timerId = useRef(0);
+
+    const start = useRef(0);
+
+    const [timePassed, setTimePassed] = useState(0);
+
+    const stopTimer = useCallback(() => {
+        window.clearInterval(timerId.current);
+    }, []);
+
+    const updateProgress = useCallback(() => {
+        const passed = Date.now() - start.current;
+
+        if (passed >= countdownDuration) {
+            stopTimer();
+
+            setTimePassed(countdownDuration);
+        } else {
+            setTimePassed(passed);
+        }
+    }, [countdownDuration, stopTimer]);
+
+    const startTimer = useCallback(() => {
+        stopTimer();
+
+        start.current = Date.now();
+
+        updateProgress();
+
+        timerId.current = window.setInterval(updateProgress, tick);
+    }, [stopTimer, updateProgress, tick]);
+
+    const timeLeft = countdownDuration - timePassed;
+
+    useEffect(
+        () => () => {
+            stopTimer();
+        },
+        [stopTimer],
+    );
+
+    return [timeLeft, startTimer, stopTimer];
+};
+
+export const ONE_DAY = 24 * 60 * 60 * 1000;
+export const ONE_MINUTE = 60 * 1000;
+
+type UseConfirmationParams = {
+    state?: ConfirmationProps['state'];
+    screen?: ConfirmationProps['screen'];
+    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
+};
+
+export const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {
+    const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');
+    const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');
+    const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(
+        blockSmsRetry ?? false,
+    );
+
+    return {
+        confirmationState,
+        confirmationScreen,
+        confirmationBlockSmsRetry,
+        setConfirmationState,
+        setConfirmationScreen,
+        setConfirmationBlockSmsRetry,
+    };
+};

package/src/vars.css

@@ -0,0 +1,33 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+:root {
+    /* desktop */
+    --confirmation-header-desktop-font-size: 22px;
+    --confirmation-header-desktop-line-height: 26px;
+    --confirmation-header-desktop-font-weight: bold;
+    --confirmation-header-desktop-font-family: var(--font-family-system);
+
+    /* mobile */
+    --confirmation-header-mobile-font-size: 18px;
+    --confirmation-header-mobile-line-height: 22px;
+    --confirmation-header-mobile-font-weight: bold;
+    --confirmation-header-mobile-font-family: var(--font-family-system);
+
+    /* 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 */
+    --confirmation-header-font-feature-settings: normal;
+
+    @define-mixin _confirmation-text {
+        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);
+    }
+}

package/types.d.ts

@@ -89,9 +89,20 @@ type ConfirmationProps = {
      * @default false
      */
     hideCountdownSection?: boolean;
+    /**
+     * Контрольная точка для кнопки, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
 };
 type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError'> & {
     timeLeft: number;
+} & {
+    /**
+     * Контрольная точка для кнопки, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
 };
 type ConfirmationTexts = {
     /**

package/cssm/responsive.d.ts

@@ -1,2 +0,0 @@
-export * from "./component.responsive";
-export {};

package/cssm/responsive.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var component_responsive = require('./component.responsive.js');
-require('tslib');
-require('react');
-require('@alfalab/hooks');
-require('./component.desktop.js');
-require('./components/base-confirmation/component.js');
-require('classnames');
-require('./context.js');
-require('./utils.js');
-require('./types.js');
-require('./components/screens/initial/component.js');
-require('@alfalab/core-components-button/cssm');
-require('@alfalab/core-components-code-input/cssm');
-require('@alfalab/core-components-link/cssm');
-require('@alfalab/core-components-typography/cssm');
-require('./components/header/component.js');
-require('./components/header/index.module.css');
-require('./components/screens/initial/countdown-section.js');
-require('@alfalab/core-components-loader/cssm');
-require('./components/screens/initial/index.module.css');
-require('./components/screens/hint/component.js');
-require('./components/screens/hint/index.module.css');
-require('./components/screens/fatal-error/component.js');
-require('./components/screens/fatal-error/index.module.css');
-require('./components/screens/temp-block/component.js');
-require('./components/countdown-loader/component.js');
-require('./components/countdown-loader/index.module.css');
-require('./components/screens/temp-block/index.module.css');
-require('./components/base-confirmation/index.module.css');
-require('./component.mobile.js');
-require('./mobile.module.css');
-
-
-
-exports.ConfirmationResponsive = component_responsive.ConfirmationResponsive;

package/esm/responsive.d.ts

@@ -1,2 +0,0 @@
-export * from "./component.responsive";
-export {};

package/esm/responsive.js

@@ -1,23 +0,0 @@
-export { ConfirmationResponsive } from './component.responsive.js';
-import 'tslib';
-import 'react';
-import '@alfalab/hooks';
-import './component.desktop.js';
-import './components/base-confirmation/component.js';
-import 'classnames';
-import './context.js';
-import './utils.js';
-import './types.js';
-import './components/screens/initial/component.js';
-import '@alfalab/core-components-button/esm';
-import '@alfalab/core-components-code-input/esm';
-import '@alfalab/core-components-link/esm';
-import '@alfalab/core-components-typography/esm';
-import './components/header/component.js';
-import './countdown-section-83bf5f20.js';
-import '@alfalab/core-components-loader/esm';
-import './components/screens/hint/component.js';
-import './components/screens/fatal-error/component.js';
-import './components/screens/temp-block/component.js';
-import './components/countdown-loader/component.js';
-import './component.mobile.js';

package/modern/responsive.d.ts

@@ -1,2 +0,0 @@
-export * from "./component.responsive";
-export {};

package/modern/responsive.js

@@ -1,22 +0,0 @@
-export { ConfirmationResponsive } from './component.responsive.js';
-import 'react';
-import '@alfalab/hooks';
-import './component.desktop.js';
-import './components/base-confirmation/component.js';
-import 'classnames';
-import './context.js';
-import './utils.js';
-import './types.js';
-import './components/screens/initial/component.js';
-import '@alfalab/core-components-button/modern';
-import '@alfalab/core-components-code-input/modern';
-import '@alfalab/core-components-link/modern';
-import '@alfalab/core-components-typography/modern';
-import './components/header/component.js';
-import './countdown-section-a28d693c.js';
-import '@alfalab/core-components-loader/modern';
-import './components/screens/hint/component.js';
-import './components/screens/fatal-error/component.js';
-import './components/screens/temp-block/component.js';
-import './components/countdown-loader/component.js';
-import './component.mobile.js';

package/responsive.d.ts

@@ -1,2 +0,0 @@
-export * from "./component.responsive";
-export {};

package/responsive.js

@@ -1,31 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var component_responsive = require('./component.responsive.js');
-require('tslib');
-require('react');
-require('@alfalab/hooks');
-require('./component.desktop.js');
-require('./components/base-confirmation/component.js');
-require('classnames');
-require('./context.js');
-require('./utils.js');
-require('./types.js');
-require('./components/screens/initial/component.js');
-require('@alfalab/core-components-button');
-require('@alfalab/core-components-code-input');
-require('@alfalab/core-components-link');
-require('@alfalab/core-components-typography');
-require('./components/header/component.js');
-require('./countdown-section-41f47745.js');
-require('@alfalab/core-components-loader');
-require('./components/screens/hint/component.js');
-require('./components/screens/fatal-error/component.js');
-require('./components/screens/temp-block/component.js');
-require('./components/countdown-loader/component.js');
-require('./component.mobile.js');
-
-
-
-exports.ConfirmationResponsive = component_responsive.ConfirmationResponsive;