@alfalab/core-components-confirmation 12.5.2 → 13.0.0

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,190 @@
+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,
+        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 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}
+                />
+            )}
+
+            {mobile ? (
+                <ButtonMobile onClick={handleSmsHintLinkClick} view='link' size='xs'>
+                    {texts.linkToHint}
+                </ButtonMobile>
+            ) : (
+                <Link
+                    onClick={handleSmsHintLinkClick}
+                    className={styles.smsComeLink}
+                    view={mobile ? 'primary' : 'secondary'}
+                    pseudo={true}
+                >
+                    {texts.linkToHint}
+                </Link>
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,79 @@
+import React, { FC, useContext } from 'react';
+import cn from 'classnames';
+
+import { Button } from '@alfalab/core-components-button';
+import { Loader } from '@alfalab/core-components-loader';
+import { Typography } from '@alfalab/core-components-typography';
+
+import { ConfirmationContext } from '../../../context';
+import { formatMsAsMinutes } from '../../../utils';
+
+import styles from './index.module.css';
+
+type CountdownSectionProps = {
+    codeSendHintVisible: boolean;
+    timePassed: boolean;
+    processing: boolean;
+    mobile?: boolean;
+    handleSmsRetryClick: () => void;
+};
+
+export const CountdownSection: FC<CountdownSectionProps> = ({
+    codeSendHintVisible,
+    timePassed,
+    processing,
+    mobile,
+    handleSmsRetryClick,
+}) => {
+    const { state, texts, timeLeft, blockSmsRetry, breakpoint } = useContext(ConfirmationContext);
+
+    const renderText = (text?: string) => (
+        <Typography.Text
+            className={cn(styles.countdownContainer, {
+                [styles.countdownMobile]: mobile,
+                [styles.typographyTheme]: !mobile,
+            })}
+            view={mobile ? 'primary-small' : 'primary-medium'}
+            tag='div'
+        >
+            {text}
+        </Typography.Text>
+    );
+
+    if (codeSendHintVisible) return renderText(texts.codeSended);
+
+    if (processing) {
+        return (
+            <div
+                className={cn(styles.loaderWrap, styles.countdownContainer, {
+                    [styles.countdownLoaderMobile]: mobile,
+                    [styles.typographyTheme]: !mobile,
+                })}
+            >
+                <Loader />
+
+                <span className={styles.loaderText}>
+                    {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}
+                </span>
+            </div>
+        );
+    }
+
+    if (blockSmsRetry) return renderText(texts.noAttemptsLeft);
+
+    if (timePassed) {
+        return (
+            <Button
+                size={mobile ? 'xs' : 'xxs'}
+                view='secondary'
+                onClick={handleSmsRetryClick}
+                className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}
+                breakpoint={breakpoint}
+            >
+                {texts.buttonRetry}
+            </Button>
+        );
+    }
+
+    return renderText(`${texts.countdown} ${formatMsAsMinutes(timeLeft)}`);
+};

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

@@ -0,0 +1,71 @@
+@import '../../../vars.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+}
+
+.typographyTheme.typographyTheme {
+    @mixin _confirmation-text;
+}
+
+.phone.phone {
+    color: var(--color-light-text-primary);
+    margin-bottom: var(--gap-2xl);
+}
+
+.compact {
+    margin-bottom: var(--gap-xl);
+}
+
+.loaderWrap {
+    display: flex;
+    align-items: center;
+}
+
+.left {
+    align-items: flex-start;
+}
+
+.center {
+    align-items: center;
+    text-align: center;
+
+    & .loaderWrap {
+        justify-content: center;
+    }
+}
+
+.codeInput {
+    margin-bottom: var(--gap-s);
+}
+
+.smsComeLink.smsComeLink {
+    @mixin action_primary_small;
+}
+
+.countdownContainer.countdownContainer {
+    color: var(--color-light-text-secondary);
+    margin-bottom: var(--gap-xl);
+}
+
+.countdownMobile.countdownMobile {
+    margin-bottom: var(--gap-l);
+}
+.countdownLoaderMobile.countdownLoaderMobile {
+    margin-bottom: var(--gap-m);
+}
+
+.getCodeButton {
+    position: relative;
+    top: var(--gap-2xs-neg);
+    margin-bottom: var(--gap-m);
+}
+
+.getCodeButtonMobile {
+    margin-bottom: 0;
+}
+
+.containerInput {
+    min-height: 80px;
+}

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

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

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

@@ -0,0 +1,58 @@
+import React, { FC, useContext, useEffect } from 'react';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import { ConfirmationContext } from '../../../context';
+import { formatMsAsMinutes, useCountdown } from '../../../utils';
+import { CountdownLoader } from '../../countdown-loader';
+import { Header } from '../../header';
+
+import styles from './index.module.css';
+
+export type TempBlockProps = {
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+
+export const TempBlock: FC<TempBlockProps> = ({ mobile }) => {
+    const { alignContent, texts, tempBlockDuration, onChangeScreen, onTempBlockFinished } =
+        useContext(ConfirmationContext);
+
+    const [timeLeft, startTimer] = useCountdown(tempBlockDuration);
+
+    useEffect(() => {
+        startTimer();
+    }, [startTimer]);
+
+    useEffect(() => {
+        if (timeLeft === 0 && onTempBlockFinished) {
+            onTempBlockFinished();
+        }
+    }, [timeLeft, onChangeScreen, onTempBlockFinished]);
+
+    return (
+        <div className={cn(styles.component, styles[alignContent])}>
+            <Header mobile={mobile}>{texts.tempBlockTitle}</Header>
+
+            <Typography.Text
+                view='primary-medium'
+                color='primary'
+                className={cn(styles.description, { [styles.typographyTheme]: !mobile })}
+            >
+                {texts.tempBlockDescription}
+            </Typography.Text>
+
+            <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>
+                <CountdownLoader
+                    progress={1 - timeLeft / tempBlockDuration}
+                    className={styles.loader}
+                />
+
+                {formatMsAsMinutes(timeLeft)}
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,28 @@
+@import '../../../vars.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+}
+
+.center {
+    align-items: center;
+    text-align: center;
+}
+
+.typographyTheme.typographyTheme {
+    @mixin _confirmation-text;
+}
+
+.description.description {
+    margin-bottom: var(--gap-xs);
+}
+
+.countdownWrap {
+    display: flex;
+    align-items: center;
+}
+
+.loader {
+    margin-right: var(--gap-xs);
+}

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

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

package/src/context.ts

@@ -0,0 +1,26 @@
+import { createContext } from 'react';
+
+import { TConfirmationContext } from './types';
+import { ONE_DAY, ONE_MINUTE } from './utils';
+
+const mockFn = () => undefined;
+
+export const ConfirmationContext = createContext<TConfirmationContext>({
+    alignContent: 'left',
+    texts: {},
+    state: 'INITIAL',
+    screen: 'INITIAL',
+    requiredCharAmount: 5,
+    countdownDuration: ONE_MINUTE,
+    timeLeft: ONE_MINUTE,
+    tempBlockDuration: ONE_DAY,
+    phone: '',
+    hideCountdownSection: false,
+    breakpoint: 1024,
+    onTempBlockFinished: mockFn,
+    onInputFinished: mockFn,
+    onChangeState: mockFn,
+    onSmsRetryClick: mockFn,
+    onChangeScreen: mockFn,
+    onFatalErrorOkButtonClick: mockFn,
+});

package/src/desktop.ts

@@ -0,0 +1,3 @@
+export * from './component.desktop';
+
+export { useConfirmation, useCountdown } from './utils';

package/src/index.ts

@@ -0,0 +1,6 @@
+export {
+    ConfirmationResponsive as Confirmation,
+    ResponsiveConfirmationProps as ConfirmationProps,
+} from './component.responsive';
+
+export { useConfirmation, useCountdown } from './utils';

package/src/mobile.module.css

@@ -0,0 +1,3 @@
+.container {
+    max-width: 288px;
+}

package/src/mobile.ts

@@ -0,0 +1,3 @@
+export * from './component.mobile';
+
+export { useConfirmation, useCountdown } from './utils';

package/src/shared.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './context';
+export * from './types';
+export { formatMsAsMinutes, ONE_MINUTE, ONE_DAY } from './utils';