@alfalab/core-components-confirmation 12.5.3 → 13.1.0

package/src/components/base-confirmation/component.tsx

@@ -0,0 +1,125 @@
+import React, { ComponentType, FC, useEffect } from 'react';
+import cn from 'classnames';
+
+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 styles from './index.module.css';
+
+const confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }> } = {
+    INITIAL: Initial,
+    HINT: Hint,
+    FATAL_ERROR: FatalError,
+    TEMP_BLOCK: TempBlock,
+};
+
+export const BaseConfirmation: FC<ConfirmationProps> = ({
+    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 = 1024,
+    initialScreenHintSlot,
+    ...restProps
+}) => {
+    const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);
+
+    const prevState = usePrevious(state);
+
+    useEffect(() => {
+        startTimer();
+    }, [startTimer]);
+
+    useEffect(() => {
+        /**
+         * Перезапускаем таймер после повторного запроса кода
+         */
+        if (state === 'INITIAL' && prevState === 'CODE_SENDING') {
+            startTimer();
+        }
+    }, [state, prevState, startTimer]);
+
+    useEffect(() => {
+        /**
+         * Останавливаем таймер, если новый экран/состояние не содержит таймер
+         */
+        if (!['INITIAL', 'HINT', 'TEMP_BLOCK'].includes(screen) || blockSmsRetry) {
+            stopTimer();
+        }
+    }, [state, screen, blockSmsRetry, stopTimer]);
+
+    const handleSmsRetry = () => {
+        onChangeState('CODE_SENDING');
+
+        onSmsRetryClick();
+    };
+
+    const handleInputFinished = (code: string) => {
+        onChangeState('CODE_CHECKING');
+
+        onInputFinished(code);
+    };
+
+    const handleFatalErrorOkButtonClick = () => {
+        if (onFatalErrorOkButtonClick) {
+            onFatalErrorOkButtonClick();
+        }
+    };
+
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    const contextValue: TConfirmationContext = {
+        hideCountdownSection,
+        alignContent,
+        texts: { ...defaultTexts, ...restProps.texts },
+        state,
+        screen,
+        requiredCharAmount,
+        countdownDuration,
+        timeLeft,
+        tempBlockDuration,
+        phone,
+        blockSmsRetry,
+        breakpoint,
+        onTempBlockFinished,
+        onChangeState,
+        onChangeScreen,
+        clearCodeOnError,
+        initialScreenHintSlot,
+        onInputFinished: handleInputFinished,
+        onSmsRetryClick: handleSmsRetry,
+        onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,
+    };
+
+    const screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
+
+    const CurrentScreen = screensMap[screen];
+
+    return (
+        <ConfirmationContext.Provider value={contextValue}>
+            <div className={cn(styles.component, className)} data-test-id={dataTestId}>
+                {CurrentScreen && <CurrentScreen mobile={mobile} />}
+            </div>
+        </ConfirmationContext.Provider>
+    );
+};

package/src/components/base-confirmation/index.module.css

@@ -0,0 +1,8 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    width: 100%;
+    max-width: 388px;
+    margin: 0 auto;
+    color: var(--color-light-text-secondary);
+}

package/src/components/base-confirmation/index.ts

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

package/src/components/countdown-loader/component.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+
+import styles from './index.module.css';
+
+type Props = {
+    progress: number; // 0-1
+    className?: string;
+};
+
+const SIZE = 16;
+const STROKE_WIDTH = 2;
+
+const CENTER = SIZE / 2;
+const RADIUS = CENTER - STROKE_WIDTH / 2;
+/** Длина окружности */
+const CIRCUMFERENCE = Math.PI * RADIUS * 2;
+
+export const CountdownLoader: FC<Props> = ({ progress, className }) => {
+    const value = Math.min(progress, 1);
+
+    const strokeDasharray = CIRCUMFERENCE.toFixed(2);
+    const strokeDashoffset = (value * CIRCUMFERENCE).toFixed(2);
+
+    return (
+        <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`} className={className}>
+            <circle
+                cx={CENTER}
+                cy={CENTER}
+                r={RADIUS}
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+                transform={`rotate(-90 ${CENTER} ${CENTER})`}
+                className={styles.circle}
+            />
+        </svg>
+    );
+};

package/src/components/countdown-loader/index.module.css

@@ -0,0 +1,7 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.circle {
+    fill: transparent;
+    stroke: var(--color-light-graphic-tertiary);
+    stroke-width: 2px;
+}

package/src/components/countdown-loader/index.ts

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

package/src/components/header/component.tsx

@@ -0,0 +1,28 @@
+import React, { FC, ReactNode } from 'react';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import styles from './index.module.css';
+
+export type HeaderProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+
+export const Header: FC<HeaderProps> = ({ mobile, children }) => (
+    <Typography.Title
+        className={cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile })}
+        tag='h3'
+        color='primary'
+    >
+        {children}
+    </Typography.Title>
+);

package/src/components/header/index.module.css

@@ -0,0 +1,21 @@
+@import '../../vars.css';
+
+.header.header {
+    margin-bottom: var(--gap-xl);
+}
+
+.typography.typography.typography {
+    font-feature-settings: var(--confirmation-header-font-feature-settings);
+    font-size: var(--confirmation-header-desktop-font-size);
+    line-height: var(--confirmation-header-desktop-line-height);
+    font-weight: var(--confirmation-header-desktop-font-weight);
+    font-family: var(--confirmation-header-desktop-font-family);
+}
+
+.typographyMobile.typographyMobile.typographyMobile {
+    font-feature-settings: var(--confirmation-header-font-feature-settings);
+    font-size: var(--confirmation-header-mobile-font-size);
+    line-height: var(--confirmation-header-mobile-line-height);
+    font-weight: var(--confirmation-header-mobile-font-weight);
+    font-family: var(--confirmation-header-mobile-font-family);
+}

package/src/components/header/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './screens';
+export * from './countdown-loader';

package/src/components/screens/fatal-error/component.tsx

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

package/src/components/screens/fatal-error/index.module.css

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

package/src/components/screens/fatal-error/index.ts

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

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

@@ -0,0 +1,94 @@
+import React, { FC, useContext } from 'react';
+import cn from 'classnames';
+
+import { Button } from '@alfalab/core-components-button';
+import { Link } from '@alfalab/core-components-link';
+import { Typography } from '@alfalab/core-components-typography';
+
+import { ConfirmationContext } from '../../../context';
+import { Header } from '../../header';
+
+import styles from './index.module.css';
+
+export type HintProps = {
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+
+export const Hint: FC<HintProps> = ({ mobile }) => {
+    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint } =
+        useContext(ConfirmationContext);
+
+    const handleReturnButtonClick = () => {
+        onChangeScreen('INITIAL');
+        onChangeState('INITIAL');
+    };
+
+    return (
+        <div className={cn(styles.component, styles[alignContent])}>
+            <Header mobile={mobile}>Не&nbsp;приходит сообщение?</Header>
+
+            <Typography.Text
+                view='primary-medium'
+                color='primary'
+                className={cn(styles.text, { [styles.typographyTheme]: !mobile })}
+            >
+                Если у&nbsp;вас изменился номер телефона, позвоните нам или обратитесь в&nbsp;любое
+                отделение банка.
+            </Typography.Text>
+
+            <div className={styles.phonesWrap}>
+                <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
+                    <Link href='tel:+78002000000' underline={false} className={styles.phoneLink}>
+                        8 800 200-00-00
+                    </Link>
+                    <Typography.Text
+                        view='primary-medium'
+                        color='primary'
+                        className={cn(styles.text, { [styles.typographyTheme]: !mobile })}
+                    >
+                        {mobile
+                            ? 'Для\u00A0звонков по\u00A0России'
+                            : ' \u2014\u00A0для звонков по\u00A0России'}
+                    </Typography.Text>
+                </div>
+
+                <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
+                    <Link href='tel:+74957888878' underline={false} className={styles.phoneLink}>
+                        +7 495 78-888-78
+                    </Link>
+                    <Typography.Text
+                        view='primary-medium'
+                        color='primary'
+                        className={cn(styles.text, { [styles.typographyTheme]: !mobile })}
+                    >
+                        {mobile
+                            ? 'В\u00A0Москве и\u00A0за\u00A0границей'
+                            : ' \u2014\u00A0в\u00A0Москве и\u00A0за\u00A0границей'}
+                    </Typography.Text>
+                </div>
+            </div>
+
+            <Typography.Text
+                view='primary-medium'
+                color='primary'
+                className={cn(styles.text, { [styles.typographyTheme]: !mobile })}
+            >
+                Если номер не&nbsp;менялся, возможно, перегружен сервис отправки сообщений.
+                Попробуйте повторить действие через несколько минут.
+            </Typography.Text>
+
+            <Button
+                size={mobile ? 'xs' : 's'}
+                view='secondary'
+                onClick={handleReturnButtonClick}
+                className={styles.hintButton}
+                breakpoint={breakpoint}
+            >
+                {texts.hintButton}
+            </Button>
+        </div>
+    );
+};

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

@@ -0,0 +1,51 @@
+@import '../../../vars.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    & span:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+.center {
+    align-items: center;
+    text-align: center;
+}
+
+.text.text {
+    margin-bottom: var(--gap-xl);
+}
+
+.typographyTheme.typographyTheme {
+    @mixin _confirmation-text;
+}
+
+.phonesWrap {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--gap-xl);
+}
+
+.phoneWrap {
+    margin-bottom: var(--gap-xs);
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.phoneLink.phoneLink {
+    @mixin action_primary_medium;
+}
+
+.hintButton {
+    margin-top: var(--gap-2xl);
+}
+
+.phoneContentMobile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

package/src/components/screens/hint/index.ts

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

package/src/components/screens/index.ts

@@ -0,0 +1,4 @@
+export * from './initial';
+export * from './hint';
+export * from './fatal-error';
+export * from './temp-block';

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

@@ -0,0 +1,203 @@
+import React, {
+    FC,
+    useCallback,
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from 'react';
+import cn from 'classnames';
+
+import { ButtonMobile } from '@alfalab/core-components-button/mobile';
+import { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';
+import { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';
+import { BaseCodeInputProps, CustomInputRef } from '@alfalab/core-components-code-input/shared';
+import { Link } from '@alfalab/core-components-link';
+import { Typography } from '@alfalab/core-components-typography';
+import { usePrevious } from '@alfalab/hooks';
+
+import { ConfirmationContext } from '../../../context';
+import { Header } from '../../header';
+
+import { CountdownSection } from './countdown-section';
+
+import styles from './index.module.css';
+
+export type InitialProps = {
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+
+const CODE_SEND_HINT_VISIBLE_DURATION = 2000;
+
+export const Initial: FC<InitialProps> = ({ mobile }) => {
+    const {
+        state,
+        alignContent,
+        texts,
+        requiredCharAmount,
+        timeLeft,
+        phone,
+        clearCodeOnError,
+        hideCountdownSection,
+        initialScreenHintSlot,
+        onChangeState,
+        onInputFinished,
+        onChangeScreen,
+        onSmsRetryClick,
+    } = useContext(ConfirmationContext);
+
+    const prevState = usePrevious(state);
+
+    const inputRef = useRef<CustomInputRef>(null);
+
+    const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);
+
+    const timerId = useRef(0);
+
+    const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {
+        onInputFinished(code);
+    };
+
+    const handleSmsHintLinkClick = () => {
+        onChangeScreen('HINT');
+    };
+
+    const handleInputChange = () => {
+        if (state === 'CODE_ERROR') {
+            onChangeState('INITIAL');
+        }
+    };
+
+    const handleSmsRetryClick = () => {
+        if (inputRef.current) {
+            inputRef.current.reset();
+        }
+
+        onSmsRetryClick();
+    };
+
+    const handleErrorAnimationEnd = () => {
+        if (clearCodeOnError && state !== 'INITIAL') {
+            onChangeState('INITIAL');
+        }
+    };
+
+    const clearTimer = useCallback(() => {
+        window.clearTimeout(timerId.current);
+    }, []);
+
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+
+        return () => {
+            clearTimer();
+        };
+    }, [clearTimer]);
+
+    useEffect(() => {
+        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();
+        }
+    }, [prevState, state, requiredCharAmount]);
+
+    useLayoutEffect(() => {
+        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {
+            setCodeSendHintVisible(true);
+
+            clearTimer();
+
+            timerId.current = window.setTimeout(() => {
+                setCodeSendHintVisible(false);
+            }, CODE_SEND_HINT_VISIBLE_DURATION);
+        }
+    }, [prevState, state, clearTimer]);
+
+    const getCodeInputError = (): string | boolean => {
+        if (state === 'CODE_ERROR') {
+            return texts.codeError || true;
+        }
+
+        return false;
+    };
+
+    const renderHintButton = () => {
+        if (initialScreenHintSlot) {
+            return initialScreenHintSlot;
+        }
+
+        if (mobile) {
+            return (
+                <ButtonMobile onClick={handleSmsHintLinkClick} view='link' size='xs'>
+                    {texts.linkToHint}
+                </ButtonMobile>
+            );
+        }
+
+        return (
+            <Link
+                onClick={handleSmsHintLinkClick}
+                className={styles.smsComeLink}
+                view={mobile ? 'primary' : 'secondary'}
+                pseudo={true}
+            >
+                {texts.linkToHint}
+            </Link>
+        );
+    };
+
+    const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);
+
+    const timePassed = timeLeft === 0;
+
+    const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;
+
+    return (
+        <div className={cn(styles.component, styles[alignContent])}>
+            <Header mobile={mobile}>{texts.title}</Header>
+
+            <Typography.Text
+                view='primary-medium'
+                color='primary'
+                className={cn(styles.phone, { [styles.typographyTheme]: !mobile })}
+            >
+                Код отправлен на {phone}
+            </Typography.Text>
+            <ComponentCodeInput
+                disabled={processing}
+                error={getCodeInputError()}
+                ref={inputRef}
+                fields={requiredCharAmount}
+                className={cn(styles.containerInput, styles.codeInput)}
+                onComplete={handleInputComplete}
+                onChange={handleInputChange}
+                clearCodeOnError={clearCodeOnError}
+                onErrorAnimationEnd={handleErrorAnimationEnd}
+            />
+            {!hideCountdownSection && (
+                <CountdownSection
+                    processing={processing}
+                    timePassed={timePassed}
+                    codeSendHintVisible={codeSendHintVisible}
+                    handleSmsRetryClick={handleSmsRetryClick}
+                    mobile={mobile}
+                />
+            )}
+
+            {renderHintButton()}
+        </div>
+    );
+};