@alfalab/core-components-confirmation 9.0.5 → 10.0.1

package/dist/cssm/components/{overlimit → screens/temp-block}/index.module.css

@@ -1,6 +1,3 @@
-:root {
-    --color-static-status-red: #d91d0b;
-}
 :root {
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -14,11 +11,9 @@
     /* Hard up */
 }
 :root {
-    --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
-    --gap-3xl: 40px;
 }
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -44,20 +39,15 @@
 
     /* input */
 }
-.component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-.title {
+.header {
+    margin: 0;
+    margin-bottom: var(--gap-xl);
     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-3xl);
 }
 .description {
     font-size: var(--confirmation-text-font-size);
@@ -65,25 +55,13 @@
     font-weight: var(--confirmation-text-font-weight);
     font-family: var(--confirmation-text-font-family);
     color: var(--confirmation-text-color);
+
+    margin-bottom: var(--gap-2xl);
 }
-.countdown {
+.countdownWrap {
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin-top: var(--gap-2xs);
 }
 .loader {
     margin-right: var(--gap-xs);
 }
-.timePassed {
-    display: flex;
-    min-width: 3em;
-}
-.getCodeButton {
-    margin-top: var(--gap-2xl);
-}
-.alertIcon {
-    text-align: center;
-    margin-bottom: var(--gap-xl);
-    color: var(--color-static-status-red);
-}

package/dist/cssm/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TConfirmationContext } from "./types";
+declare const ConfirmationContext: import("react").Context<TConfirmationContext>;
+export { ConfirmationContext };

package/dist/cssm/context.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('./utils.js');
+
+var mockFn = function () { return undefined; };
+var ConfirmationContext = React.createContext({
+    alignContent: 'left',
+    texts: {},
+    state: 'INITIAL',
+    screen: 'INITIAL',
+    requiredCharAmount: 5,
+    countdownDuration: utils.ONE_MINUTE,
+    timeLeft: utils.ONE_MINUTE,
+    tempBlockDuration: utils.ONE_DAY,
+    phone: '',
+    onTempBlockFinished: mockFn,
+    onInputFinished: mockFn,
+    onChangeState: mockFn,
+    onSmsRetryClick: mockFn,
+    onChangeScreen: mockFn,
+    onFatalErrorOkButtonClick: mockFn,
+});
+
+exports.ConfirmationContext = ConfirmationContext;

package/dist/cssm/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/cssm/index.js

@@ -2,33 +2,42 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var component = require('./component.js');
 require('react');
 require('classnames');
-require('@alfalab/core-components-button/dist/cssm');
-require('@alfalab/core-components-link/dist/cssm');
-require('@alfalab/utils');
 require('@alfalab/hooks');
+var utils = require('./utils.js');
+var context = require('./context.js');
+var types = require('./types.js');
+require('@alfalab/core-components-code-input/dist/cssm');
+require('@alfalab/core-components-link/dist/cssm');
+require('./components/screens/initial/index.module.css');
+require('@alfalab/core-components-loader/dist/cssm');
+require('@alfalab/core-components-button/dist/cssm');
+require('./components/screens/initial/countdown-section.js');
+var components_screens_initial_component = require('./components/screens/initial/component.js');
+require('./components/screens/hint/index.module.css');
+var components_screens_hint_component = require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/index.module.css');
+var components_screens_fatalError_component = require('./components/screens/fatal-error/component.js');
 require('./components/countdown-loader/index.module.css');
 var components_countdownLoader_component = require('./components/countdown-loader/component.js');
-require('./components/countdown/index.module.css');
-var components_countdown_component = require('./components/countdown/component.js');
-require('@alfalab/core-components-loader/dist/cssm');
-require('./components/code-input/component.js');
-require('./components/code-input/utils.js');
-require('./components/code-input/index.module.css');
-require('./components/sign-confirmation/index.module.css');
-var components_signConfirmation_component = require('./components/sign-confirmation/component.js');
-require('@alfalab/icons-glyph');
-require('./components/overlimit/index.module.css');
-var components_overlimit_component = require('./components/overlimit/component.js');
+require('./components/screens/temp-block/index.module.css');
+var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
 require('./index.module.css');
-var component = require('./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/cssm/index.module.css

@@ -1,5 +1,4 @@
 :root {
-    --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
 }
 :root {
@@ -10,24 +9,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,53 +28,6 @@
     /* input */
 }
 .component {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    font-family: var(--confirmation-font-family);
-}
-.error {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.errorHeader {
-    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);
-}
-.errorText {
-    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);
-}
-.phoneHintWrap {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.phoneHintText {
-    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);
-}
-.phonesWrap {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
@@ -96,23 +36,11 @@
 
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--gap-4xl);
-}
-.phoneWrap {
-    margin-bottom: var(--gap-xs)
-}
-.phoneWrap:last-child {
-        margin-bottom: 0;
-    }
-.phoneDescription {
-    color: var(--confirmation-text-color);
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
 }
-.component.center {
+.center {
+    align-items: center;
     text-align: center;
 }
-.center .phoneHintWrap {
-        align-items: center;
-    }
-.center .error {
-        align-items: center;
-    }

package/dist/cssm/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/cssm/types.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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: 'Запросить повторно можно через',
+};
+
+exports.defaultTexts = defaultTexts;

package/dist/cssm/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/cssm/utils.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('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 = React.useRef(0);
+    var start = React.useRef(0);
+    var _a = React.useState(0), timePassed = _a[0], setTimePassed = _a[1];
+    var stopTimer = React.useCallback(function () {
+        window.clearInterval(timerId.current);
+    }, []);
+    var updateProgress = React.useCallback(function () {
+        var passed = Date.now() - start.current;
+        if (passed >= countdownDuration) {
+            stopTimer();
+            setTimePassed(countdownDuration);
+        }
+        else {
+            setTimePassed(passed);
+        }
+    }, [countdownDuration, stopTimer]);
+    var startTimer = React.useCallback(function () {
+        stopTimer();
+        start.current = Date.now();
+        updateProgress();
+        timerId.current = window.setInterval(updateProgress, tick);
+    }, [stopTimer, updateProgress, tick]);
+    var timeLeft = countdownDuration - timePassed;
+    React.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 = React.useState(state !== null && state !== void 0 ? state : 'INITIAL'), confirmationState = _c[0], setConfirmationState = _c[1];
+    var _d = React.useState(screen !== null && screen !== void 0 ? screen : 'INITIAL'), confirmationScreen = _d[0], setConfirmationScreen = _d[1];
+    var _e = React.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,
+    };
+};
+
+exports.ONE_DAY = ONE_DAY;
+exports.ONE_MINUTE = ONE_MINUTE;
+exports.formatMsAsMinutes = formatMsAsMinutes;
+exports.useConfirmation = useConfirmation;
+exports.useCountdown = useCountdown;