@alfalab/core-components-confirmation 9.0.4 → 10.0.0

package/dist/esm/index.js

@@ -1,15 +1,17 @@
+export { Confirmation } from './component.js';
 import 'react';
 import 'classnames';
-import '@alfalab/core-components-button/dist/esm';
-import '@alfalab/core-components-link/dist/esm';
-import '@alfalab/utils';
 import '@alfalab/hooks';
-export { CountdownLoader } from './components/countdown-loader/component.js';
-export { Countdown, formatMsAsMinutes } from './components/countdown/component.js';
+export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown } from './utils.js';
+export { ConfirmationContext } from './context.js';
+export { defaultTexts } from './types.js';
+import '@alfalab/core-components-code-input/dist/esm';
+import '@alfalab/core-components-link/dist/esm';
+import './countdown-section-ddb744a6.js';
 import '@alfalab/core-components-loader/dist/esm';
-import './components/code-input/component.js';
-import './components/code-input/utils.js';
-export { SignConfirmation } from './components/sign-confirmation/component.js';
-import '@alfalab/icons-glyph';
-export { Overlimit } from './components/overlimit/component.js';
-export { Confirmation } from './component.js';
+import '@alfalab/core-components-button/dist/esm';
+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 { CountdownLoader } from './components/countdown-loader/component.js';
+export { TempBlock } from './components/screens/temp-block/component.js';

package/dist/esm/types.d.ts

@@ -0,0 +1,130 @@
+import { ComponentType, ReactNode } from 'react';
+type ConfirmationProps = {
+    /**
+     * Экран компонента
+     */
+    screen: ConfirmationScreen | string;
+    /**
+     * Состояние компонента
+     */
+    state: ConfirmationState | string;
+    /**
+     * Позиционирование контента
+     */
+    alignContent?: 'left' | 'center';
+    /**
+     * Объект с текстами
+     */
+    texts?: ConfirmationTexts;
+    /**
+     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка
+     */
+    requiredCharAmount?: number;
+    /**
+     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах
+     */
+    countdownDuration?: number;
+    /**
+     * Продолжительность блокировки формы (ms)
+     */
+    tempBlockDuration?: number;
+    /**
+     * Номер телефона, на который отправлен код
+     */
+    phone?: string;
+    /**
+     * Не осталось попыток ввода кода
+     */
+    blockSmsRetry?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+    /**
+     * Функция обновления состояния компонента
+     */
+    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;
+};
+type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished'> & {
+    timeLeft: number;
+};
+type ConfirmationTexts = {
+    /**
+     * Экран INITIAL
+     */
+    title?: ReactNode;
+    codeError?: string;
+    codeChecking?: string;
+    codeSending?: string;
+    codeSended?: string;
+    buttonRetry?: string;
+    linkToHint?: string;
+    noAttemptsLeft?: string;
+    countdown?: string;
+    /**
+     * Экран HINT
+     */
+    hintButton?: string;
+    /**
+     * Экран FATAL_ERROR
+     */
+    fatalErrorTitle?: ReactNode;
+    fatalErrorDescription?: ReactNode;
+    fatalErrorButton?: string;
+    /**
+     * Экран TEMP_BLOCK
+     */
+    tempBlockTitle?: ReactNode;
+    tempBlockDescription?: ReactNode;
+};
+type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK';
+type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR';
+type ScreensMap = {
+    [key: string]: ComponentType;
+};
+declare const defaultTexts: {
+    title: string;
+    codeError: string;
+    codeChecking: string;
+    codeSending: string;
+    buttonRetry: string;
+    linkToHint: string;
+    hintButton: string;
+    noAttemptsLeft: string;
+    fatalErrorTitle: string;
+    fatalErrorDescription: string;
+    fatalErrorButton: string;
+    tempBlockTitle: string;
+    tempBlockDescription: string;
+    codeSended: string;
+    countdown: string;
+};
+export { ConfirmationProps, TConfirmationContext, ConfirmationTexts, ConfirmationScreen, ConfirmationState, ScreensMap, defaultTexts };

package/dist/esm/types.js

@@ -0,0 +1,19 @@
+var 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: 'Запросить повторно можно через',
+};
+
+export { defaultTexts };

package/dist/esm/utils.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ConfirmationProps } from "./types";
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+declare function formatMsAsMinutes(ms: number): string;
+type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+declare const useCountdown: UseCountdown;
+declare const ONE_DAY: number;
+declare const ONE_MINUTE: number;
+type UseConfirmationParams = {
+    state?: ConfirmationProps['state'];
+    screen?: ConfirmationProps['screen'];
+    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
+};
+declare const useConfirmation: ({ state, screen, blockSmsRetry }?: UseConfirmationParams) => {
+    confirmationState: string;
+    confirmationScreen: string;
+    confirmationBlockSmsRetry: boolean;
+    setConfirmationState: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationScreen: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationBlockSmsRetry: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export { formatMsAsMinutes, useCountdown, ONE_DAY, ONE_MINUTE, useConfirmation };

package/dist/esm/utils.js

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

package/dist/index.css

@@ -1,6 +1,5 @@
-/* hash: zgqal */
+/* hash: dh3od */
 :root {
-    --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
 }
 :root {
@@ -11,24 +10,12 @@
 
     /* Hard up */
 }
-:root {
-    --gap-xs: 8px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
-    --gap-4xl: 48px;
-}
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
 :root {
     /* title */
-    --confirmation-title-font-size: 22px;
-    --confirmation-title-line-height: 26px;
-    --confirmation-title-font-weight: 700;
-    --confirmation-title-font-family: var(--font-family-system);
-    --confirmation-title-color: var(--color-light-text-primary);
-    --confirmation-title-font-feature-settings: normal;
 
     /* text */
     --confirmation-text-font-size: 16px;
@@ -41,54 +28,7 @@
 
     /* input */
 }
-.confirmation__component_1g9r1 {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    font-family: var(--confirmation-font-family);
-}
-.confirmation__error_1g9r1 {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.confirmation__errorHeader_1g9r1 {
-    font-size: var(--confirmation-title-font-size);
-    line-height: var(--confirmation-title-line-height);
-    font-weight: var(--confirmation-title-font-weight);
-    font-family: var(--confirmation-title-font-family);
-    color: var(--confirmation-title-color);
-    font-feature-settings: var(--confirmation-title-font-feature-settings);
-
-    margin-bottom: var(--gap-2xl);
-    color: var(--confirmation-title-color);
-}
-.confirmation__errorText_1g9r1 {
-    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);
-
-    margin-bottom: var(--gap-2xl);
-    color: var(--confirmation-text-color);
-}
-.confirmation__phoneHintWrap_1g9r1 {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.confirmation__phoneHintText_1g9r1 {
-    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);
-
-    margin-bottom: var(--gap-xl);
-    color: var(--confirmation-text-color);
-}
-.confirmation__phonesWrap_1g9r1 {
+.confirmation__component_1lhb7 {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
@@ -97,23 +37,11 @@
 
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--gap-4xl);
-}
-.confirmation__phoneWrap_1g9r1 {
-    margin-bottom: var(--gap-xs)
-}
-.confirmation__phoneWrap_1g9r1:last-child {
-        margin-bottom: 0;
-    }
-.confirmation__phoneDescription_1g9r1 {
-    color: var(--confirmation-text-color);
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
 }
-.confirmation__component_1g9r1.confirmation__center_1g9r1 {
+.confirmation__center_1lhb7 {
+    align-items: center;
     text-align: center;
 }
-.confirmation__center_1g9r1 .confirmation__phoneHintWrap_1g9r1 {
-        align-items: center;
-    }
-.confirmation__center_1g9r1 .confirmation__error_1g9r1 {
-        align-items: center;
-    }

package/dist/index.d.ts

@@ -1,2 +1,5 @@
 export * from "./component";
 export * from "./components/index";
+export * from "./context";
+export * from "./types";
+export * from "./utils";

package/dist/index.js

@@ -2,27 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var component = require('./component.js');
 require('react');
 require('classnames');
-require('@alfalab/core-components-button');
-require('@alfalab/core-components-link');
-require('@alfalab/utils');
 require('@alfalab/hooks');
-var components_countdownLoader_component = require('./components/countdown-loader/component.js');
-var components_countdown_component = require('./components/countdown/component.js');
+var utils = require('./utils.js');
+var context = require('./context.js');
+var types = require('./types.js');
+require('@alfalab/core-components-code-input');
+require('@alfalab/core-components-link');
+require('./countdown-section-2edac0a0.js');
 require('@alfalab/core-components-loader');
-require('./components/code-input/component.js');
-require('./components/code-input/utils.js');
-var components_signConfirmation_component = require('./components/sign-confirmation/component.js');
-require('@alfalab/icons-glyph');
-var components_overlimit_component = require('./components/overlimit/component.js');
-var component = require('./component.js');
+require('@alfalab/core-components-button');
+var components_screens_initial_component = require('./components/screens/initial/component.js');
+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_countdownLoader_component = require('./components/countdown-loader/component.js');
+var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
 
 
 
-exports.CountdownLoader = components_countdownLoader_component.CountdownLoader;
-exports.Countdown = components_countdown_component.Countdown;
-exports.formatMsAsMinutes = components_countdown_component.formatMsAsMinutes;
-exports.SignConfirmation = components_signConfirmation_component.SignConfirmation;
-exports.Overlimit = components_overlimit_component.Overlimit;
 exports.Confirmation = component.Confirmation;
+exports.ONE_DAY = utils.ONE_DAY;
+exports.ONE_MINUTE = utils.ONE_MINUTE;
+exports.formatMsAsMinutes = utils.formatMsAsMinutes;
+exports.useConfirmation = utils.useConfirmation;
+exports.useCountdown = utils.useCountdown;
+exports.ConfirmationContext = context.ConfirmationContext;
+exports.defaultTexts = types.defaultTexts;
+exports.Initial = components_screens_initial_component.Initial;
+exports.Hint = components_screens_hint_component.Hint;
+exports.FatalError = components_screens_fatalError_component.FatalError;
+exports.CountdownLoader = components_countdownLoader_component.CountdownLoader;
+exports.TempBlock = components_screens_tempBlock_component.TempBlock;

package/dist/modern/component.d.ts

@@ -1,164 +1,4 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-type ContentAlign = 'left' | 'center';
-type ConfirmationProps = {
-    /**
-     * Значение поля ввода
-     */
-    code: string;
-    /**
-     * Флаг состояния обработки введенного кода.
-     */
-    codeChecking?: boolean;
-    /**
-     * Флаг состояния отправки кода.
-     */
-    codeSending?: boolean;
-    /**
-     * Состояние ошибки подписания
-     */
-    error?: boolean;
-    /**
-     * Состояние ошибки лимитов - превышено кол-во попыток ввода или запросов кода
-     */
-    errorOverlimit?: boolean;
-    /**
-     * Состояние критической ошибки лимитов - превышены все лимиты и попытки, пользователя блокируют
-     */
-    errorOverlimitIsFatal?: boolean;
-    /**
-     * Текст ошибки подписания
-     */
-    errorText?: string;
-    /**
-     * Дополнительный контент
-     */
-    additionalContent?: ReactNode;
-    /**
-     * Флаг критичности ошибки подписания.
-     * Если true - ошибка подписания рисуется на экране без поля ввода, но с кнопкой "Запросить код"
-     * Если false - ошибка подписания рисуется под полем ввода кода
-     */
-    errorIsFatal?: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Номер телефона, на который отправляется сообщение.
-     */
-    phone?: string;
-    /**
-     * Управление необходимостью маскировать номер телефона
-     */
-    hasPhoneMask?: boolean;
-    /**
-     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка
-     */
-    requiredCharAmount?: number;
-    /**
-     * Управление отображением таймера с кнопкой "Запросить код"
-     */
-    hasSmsCountdown?: boolean;
-    /**
-     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах
-     */
-    countdownDuration?: number;
-    /**
-     * Заголовок экрана подписания
-     */
-    signTitle?: string | React.ReactNode;
-    /**
-     * Заголовок экрана ошибки лимитов
-     */
-    overlimitTitle?: string;
-    /**
-     * Текстовое описание блокировки формы при превышении лимитов
-     */
-    overlimitText?: string;
-    /**
-     * Длительно блокировки при превышении лимитов, в милисекундах
-     */
-    overlimitCountdownDuration?: number;
-    /**
-     * Заголовок экрана блокирующей ошибки
-     */
-    errorTitle?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Текст лоадера при проверке кода
-     */
-    codeCheckingText?: string;
-    /**
-     * Текст лоадера при отправке кода
-     */
-    codeSendingText?: string;
-    /**
-     * Текст кнопки при блокирующей ошибке
-     */
-    buttonErrorText?: string;
-    /**
-     * Текст кнопки "Вернуться назад" на экране помощи
-     */
-    buttonReturnText?: string;
-    /**
-     * Текст кнопки "Запросить новый код"
-     */
-    buttonRetryText?: string;
-    /**
-     * Позиционирование контента
-     */
-    alignContent?: ContentAlign;
-    /**
-     * Сообщение, если не осталось попыток ввода кода.
-     * Кнопка повторной отправки смс при этом скрывается.
-     */
-    noAttemptsLeftMessage?: string;
-    /**
-     * Кастомный контент для компонента Countdown
-     */
-    countdownContent?: ReactNode;
-    /**
-     * Обработчик события завершения ввода кода подписания
-     */
-    onInputFinished: ({ code }: {
-        code: string;
-    }) => void;
-    /**
-     * Обработчик события изменения значения поля ввода кода подписания
-     */
-    onInputChange: ({ code }: {
-        code: string;
-    }) => void;
-    /**
-     * Обработчик события нажатия на кнопку "Запросить код"
-     */
-    onSmsRetryClick: () => void;
-    /**
-     * Обработчик события нажатия на кнопку "Запросить код" в блоке превышение лимитов
-     */
-    onOverlimitSmsRetryClick?: () => void;
-    /**
-     * Обработчик события завершения обратного отсчета для повторного запроса сообщения
-     */
-    onCountdownFinished?: () => void;
-    /**
-     * Обработчик события завершения обратного отсчета для блокировки формы
-     */
-    onOverlimitCountdownFinished?: () => void;
-    /**
-     * Обработчик события нажатия на ссылку "не приходит сообщение?"
-     */
-    onSmsHintLinkClick?: () => void;
-    /**
-     * Обработчик события нажатия на кнопку buttonErrorText (по дефолту "Понятно"), которая появляется при критической ошибке.
-     * Если не передан, то вызывается onSmsRetryClick
-     */
-    onActionWithFatalError?: () => void;
-};
-declare const Confirmation: React.ForwardRefExoticComponent<ConfirmationProps & React.RefAttributes<HTMLDivElement>>;
-export { ContentAlign, ConfirmationProps, Confirmation };
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+declare const Confirmation: FC<ConfirmationProps>;
+export { Confirmation };