@alfalab/core-components-confirmation 13.8.2 → 13.9.0

package/modern/utils.js

@@ -68,5 +68,12 @@ const useConfirmation = ({ state, screen, blockSmsRetry } = {}) => {
         setConfirmationBlockSmsRetry,
     };
 };
+const NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\d+]/g);
+/**
+ * @returns ссылку для набора номера
+ */
+function getPhoneHref(phone) {
+    return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;
+}
 
-export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown };
+export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, getPhoneHref, useConfirmation, useCountdown };

package/moderncssm/component.responsive.d.ts

@@ -6,8 +6,13 @@ type ResponsiveConfirmationProps = Omit<ConfirmationProps, 'confirmationScreens'
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };

package/moderncssm/component.responsive.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import { useMatchMedia } from '@alfalab/core-components-mq/moderncssm';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared/moderncssm';
+import { useIsDesktop } from '@alfalab/core-components-mq/moderncssm';
 import { ConfirmationDesktop } from './desktop/component.desktop.js';
 import { ConfirmationMobile } from './mobile/component.mobile.js';
 
-const ConfirmationResponsive = ({ breakpoint = getComponentBreakpoint(), defaultMatchMediaValue = true, ...restProps }) => {
-    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+const ConfirmationResponsive = ({ breakpoint, client, defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }) => {
+    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
     return isDesktop ? (React.createElement(ConfirmationDesktop, { ...restProps })) : (React.createElement(ConfirmationMobile, { breakpoint: breakpoint, ...restProps }));
 };
 

package/moderncssm/components/base-confirmation/component.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
 import cn from 'classnames';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared/moderncssm';
 import { usePrevious } from '@alfalab/hooks';
 import { ConfirmationContext } from '../../context.js';
 import { defaultTexts } from '../../types.js';
@@ -17,7 +16,7 @@ const confirmationScreens = {
     FATAL_ERROR: FatalError,
     TEMP_BLOCK: TempBlock,
 };
-const BaseConfirmation = ({ 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 = getComponentBreakpoint(), initialScreenHintSlot, errorVisibleDuration, ...restProps }) => {
+const BaseConfirmation = ({ 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, client, initialScreenHintSlot, errorVisibleDuration, ...restProps }) => {
     const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);
     const prevState = usePrevious(state);
     useEffect(() => {
@@ -66,6 +65,7 @@ const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requ
         phone,
         blockSmsRetry,
         breakpoint,
+        client,
         onTempBlockFinished,
         onChangeState,
         onChangeScreen,

package/moderncssm/components/screens/fatal-error/component.js

@@ -7,14 +7,14 @@ import { Header } from '../../header/component.js';
 import styles from './index.module.css';
 
 const FatalError = ({ mobile }) => {
-    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint } = useContext(ConfirmationContext);
+    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint, client } = useContext(ConfirmationContext);
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
         React.createElement(Header, { mobile: mobile }, texts.fatalErrorTitle),
         React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn({
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
             }) }, texts.fatalErrorDescription),
-        React.createElement(Button, { size: mobile ? 'xs' : 's', view: 'secondary', onClick: onFatalErrorOkButtonClick, className: styles.button, breakpoint: breakpoint }, texts.fatalErrorButton)));
+        React.createElement(Button, { size: mobile ? 'xs' : 's', view: 'secondary', onClick: onFatalErrorOkButtonClick, className: styles.button, breakpoint: breakpoint, client: client }, texts.fatalErrorButton)));
 };
 
 export { FatalError };

package/moderncssm/components/screens/hint/component.js

@@ -4,11 +4,13 @@ import { Button } from '@alfalab/core-components-button/moderncssm';
 import { Link } from '@alfalab/core-components-link/moderncssm';
 import { Typography } from '@alfalab/core-components-typography/moderncssm';
 import { ConfirmationContext } from '../../../context.js';
+import { getPhoneHref } from '../../../utils.js';
 import { Header } from '../../header/component.js';
 import styles from './index.module.css';
 
 const Hint = ({ mobile }) => {
-    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint } = useContext(ConfirmationContext);
+    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint, client } = useContext(ConfirmationContext);
+    const { domesticPhone = '', internationalPhone = '', hintButton } = texts;
     const handleReturnButtonClick = () => {
         onChangeScreen('INITIAL');
         onChangeState('INITIAL');
@@ -23,7 +25,7 @@ const Hint = ({ mobile }) => {
                 [styles.phonesWrapMobile]: mobile,
             }) },
             React.createElement("div", { className: cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile }) },
-                React.createElement(Link, { href: 'tel:+78002000000', underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, "8 800 200 00 00"),
+                React.createElement(Link, { href: getPhoneHref(domesticPhone), underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, domesticPhone),
                 React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                         [styles.typographyTheme]: !mobile,
                         [styles.typographyThemeMobile]: mobile,
@@ -31,7 +33,7 @@ const Hint = ({ mobile }) => {
                     ? 'Для\u00A0звонков по\u00A0России'
                     : ' \u2014\u00A0для звонков по\u00A0России')),
             React.createElement("div", { className: cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile }) },
-                React.createElement(Link, { href: 'tel:+74957888878', underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, "+7 495 78 888 78"),
+                React.createElement(Link, { href: getPhoneHref(internationalPhone), underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, internationalPhone),
                 React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                         [styles.typographyTheme]: !mobile,
                         [styles.typographyThemeMobile]: mobile,
@@ -42,7 +44,7 @@ const Hint = ({ mobile }) => {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
             }) }, "\u0415\u0441\u043B\u0438 \u043D\u043E\u043C\u0435\u0440 \u043D\u0435\u00A0\u043C\u0435\u043D\u044F\u043B\u0441\u044F, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u043F\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0438\u043D\u0443\u0442."),
-        React.createElement(Button, { size: mobile ? 'xs' : 's', view: 'secondary', onClick: handleReturnButtonClick, className: styles.hintButton, breakpoint: breakpoint }, texts.hintButton)));
+        React.createElement(Button, { size: mobile ? 'xs' : 's', view: 'secondary', onClick: handleReturnButtonClick, className: styles.hintButton, breakpoint: breakpoint, client: client }, hintButton)));
 };
 
 export { Hint };

package/moderncssm/components/screens/initial/countdown-section.js

@@ -8,7 +8,7 @@ import { formatMsAsMinutes } from '../../../utils.js';
 import styles from './index.module.css';
 
 const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile, handleSmsRetryClick, }) => {
-    const { state, texts, timeLeft, blockSmsRetry, breakpoint } = useContext(ConfirmationContext);
+    const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } = useContext(ConfirmationContext);
     const renderText = (text) => (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, {
             [styles.countdownMobile]: mobile,
             [styles.typographyTheme]: !mobile,
@@ -20,13 +20,13 @@ const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile,
                 [styles.countdownLoaderMobile]: mobile,
                 [styles.typographyTheme]: !mobile,
             }) },
-            React.createElement(Spinner, { visible: true }),
+            React.createElement(Spinner, { preset: 24, visible: true }),
             React.createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
     }
     if (blockSmsRetry)
         return renderText(texts.noAttemptsLeft);
     if (timePassed) {
-        return (React.createElement(Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile }), breakpoint: breakpoint }, texts.buttonRetry));
+        return (React.createElement(Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile }), breakpoint: breakpoint, client: client }, texts.buttonRetry));
     }
     return renderText(`${texts.countdown} ${formatMsAsMinutes(timeLeft)}`);
 };

package/moderncssm/context.js

@@ -14,6 +14,7 @@ const ConfirmationContext = createContext({
     phone: '',
     hideCountdownSection: false,
     breakpoint: 1024,
+    client: 'desktop',
     initialScreenHintSlot: null,
     onTempBlockFinished: mockFn,
     onInputFinished: mockFn,

package/moderncssm/types.d.ts

@@ -77,11 +77,11 @@ type ConfirmationProps = {
      */
     onTempBlockFinished?: () => void;
     /**
-     * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
+     * Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана
      */
-    getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+    getScreensMap?: (defaultScreensMap: ScreensMap) => ScreensMap;
     /**
-     * Дочерние элементы.
+     * Дочерние элементы
      */
     children?: ReactNode;
     /**
@@ -98,20 +98,18 @@ type ConfirmationProps = {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Продолжительность отображения ошибки
      * @default 1300
      */
     errorVisibleDuration?: 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' | 'initialScreenHintSlot' | 'errorVisibleDuration'> & {
+type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
     timeLeft: number;
-} & {
-    /**
-     * Контрольная точка для кнопки, с нее начинается desktop версия
-     * @default 1024
-     */
-    breakpoint?: number;
 };
 type ConfirmationTexts = {
     /**
@@ -130,6 +128,8 @@ type ConfirmationTexts = {
      * Экран HINT
      */
     hintButton?: string;
+    domesticPhone?: string;
+    internationalPhone?: string;
     /**
      * Экран FATAL_ERROR
      */
@@ -147,21 +147,5 @@ type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ER
 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;
-};
+declare const defaultTexts: ConfirmationTexts;
 export { ConfirmationProps, TConfirmationContext, ConfirmationTexts, ConfirmationScreen, ConfirmationState, ScreensMap, defaultTexts };

package/moderncssm/types.js

@@ -14,6 +14,8 @@ const defaultTexts = {
     tempBlockDescription: 'Повторное подтверждение кодом будет возможно через 24\xa0часа',
     codeSended: 'Код выслан',
     countdown: 'Запросить повторно можно через',
+    domesticPhone: '8 800 200 00 00',
+    internationalPhone: '+7 495 78 888 78',
 };
 
 export { defaultTexts };

package/moderncssm/utils.d.ts

@@ -27,4 +27,8 @@ declare const useConfirmation: ({ state, screen, blockSmsRetry }?: UseConfirmati
     setConfirmationScreen: import("react").Dispatch<import("react").SetStateAction<string>>;
     setConfirmationBlockSmsRetry: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
-export { formatMsAsMinutes, useCountdown, ONE_DAY, ONE_MINUTE, useConfirmation };
+/**
+ * @returns ссылку для набора номера
+ */
+declare function getPhoneHref(phone: string): string;
+export { formatMsAsMinutes, useCountdown, ONE_DAY, ONE_MINUTE, useConfirmation, getPhoneHref };

package/moderncssm/utils.js

@@ -68,5 +68,12 @@ const useConfirmation = ({ state, screen, blockSmsRetry } = {}) => {
         setConfirmationBlockSmsRetry,
     };
 };
+const NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\d+]/g);
+/**
+ * @returns ссылку для набора номера
+ */
+function getPhoneHref(phone) {
+    return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;
+}
 
-export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown };
+export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, getPhoneHref, useConfirmation, useCountdown };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "13.8.2",
+    "version": "13.9.0",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
@@ -11,16 +11,16 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^11.10.0",
-        "@alfalab/core-components-code-input": "^3.9.0",
+        "@alfalab/core-components-button": "^11.10.1",
+        "@alfalab/core-components-code-input": "^3.9.1",
         "@alfalab/core-components-link": "^5.3.1",
-        "@alfalab/core-components-spinner": "^3.5.0",
+        "@alfalab/core-components-spinner": "^4.0.0",
         "@alfalab/core-components-typography": "^4.10.2",
         "@alfalab/core-components-mq": "^4.3.0",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0",
-        "@alfalab/core-components-shared": "^0.13.0"
+        "@alfalab/core-components-shared": "^0.14.0"
     },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"

package/src/component.responsive.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
-import { useMatchMedia } from '@alfalab/core-components-mq';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { ConfirmationDesktop } from './desktop';
 import { ConfirmationMobile } from './mobile';
@@ -17,18 +16,25 @@ export type ResponsiveConfirmationProps = Omit<
      */
     breakpoint?: number;
 
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const ConfirmationResponsive: FC<ResponsiveConfirmationProps> = ({
-    breakpoint = getComponentBreakpoint(),
-    defaultMatchMediaValue = true,
+    breakpoint,
+    client,
+    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',
     ...restProps
 }) => {
-    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
 
     return isDesktop ? (
         <ConfirmationDesktop {...restProps} />

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

@@ -1,7 +1,6 @@
 import React, { ComponentType, FC, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 
-import { getComponentBreakpoint } from '@alfalab/core-components-shared';
 import { usePrevious } from '@alfalab/hooks';
 
 import { ConfirmationContext } from '../../context';
@@ -40,7 +39,8 @@ export const BaseConfirmation: FC<ConfirmationProps> = ({
     mobile,
     clearCodeOnError = true,
     hideCountdownSection = false,
-    breakpoint = getComponentBreakpoint(),
+    breakpoint,
+    client,
     initialScreenHintSlot,
     errorVisibleDuration,
     ...restProps
@@ -103,6 +103,7 @@ export const BaseConfirmation: FC<ConfirmationProps> = ({
         phone,
         blockSmsRetry,
         breakpoint,
+        client,
         onTempBlockFinished,
         onChangeState,
         onChangeScreen,

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

@@ -17,7 +17,7 @@ export type FatalErrorProps = {
 };
 
 export const FatalError: FC<FatalErrorProps> = ({ mobile }) => {
-    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint } =
+    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint, client } =
         useContext(ConfirmationContext);
 
     return (
@@ -41,6 +41,7 @@ export const FatalError: FC<FatalErrorProps> = ({ mobile }) => {
                 onClick={onFatalErrorOkButtonClick}
                 className={styles.button}
                 breakpoint={breakpoint}
+                client={client}
             >
                 {texts.fatalErrorButton}
             </Button>

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

@@ -6,6 +6,7 @@ import { Link } from '@alfalab/core-components-link';
 import { Typography } from '@alfalab/core-components-typography';
 
 import { ConfirmationContext } from '../../../context';
+import { getPhoneHref } from '../../../utils';
 import { Header } from '../../header';
 
 import styles from './index.module.css';
@@ -18,9 +19,11 @@ export type HintProps = {
 };
 
 export const Hint: FC<HintProps> = ({ mobile }) => {
-    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint } =
+    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint, client } =
         useContext(ConfirmationContext);
 
+    const { domesticPhone = '', internationalPhone = '', hintButton } = texts;
+
     const handleReturnButtonClick = () => {
         onChangeScreen('INITIAL');
         onChangeState('INITIAL');
@@ -49,11 +52,11 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
             >
                 <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
                     <Link
-                        href='tel:+78002000000'
+                        href={getPhoneHref(domesticPhone)}
                         underline={false}
                         className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}
                     >
-                        8 800 200 00 00
+                        {domesticPhone}
                     </Link>
                     <Typography.Text
                         view='primary-medium'
@@ -71,11 +74,11 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
 
                 <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
                     <Link
-                        href='tel:+74957888878'
+                        href={getPhoneHref(internationalPhone)}
                         underline={false}
                         className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}
                     >
-                        +7 495 78 888 78
+                        {internationalPhone}
                     </Link>
                     <Typography.Text
                         view='primary-medium'
@@ -110,8 +113,9 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                 onClick={handleReturnButtonClick}
                 className={styles.hintButton}
                 breakpoint={breakpoint}
+                client={client}
             >
-                {texts.hintButton}
+                {hintButton}
             </Button>
         </div>
     );

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

@@ -25,7 +25,8 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
     mobile,
     handleSmsRetryClick,
 }) => {
-    const { state, texts, timeLeft, blockSmsRetry, breakpoint } = useContext(ConfirmationContext);
+    const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =
+        useContext(ConfirmationContext);
 
     const renderText = (text?: string) => (
         <Typography.Text
@@ -50,7 +51,7 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
                     [styles.typographyTheme]: !mobile,
                 })}
             >
-                <Spinner visible={true} />
+                <Spinner preset={24} visible={true} />
 
                 <span className={styles.loaderText}>
                     {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}
@@ -69,6 +70,7 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
                 onClick={handleSmsRetryClick}
                 className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}
                 breakpoint={breakpoint}
+                client={client}
             >
                 {texts.buttonRetry}
             </Button>

package/src/context.ts

@@ -17,6 +17,7 @@ export const ConfirmationContext = createContext<TConfirmationContext>({
     phone: '',
     hideCountdownSection: false,
     breakpoint: 1024,
+    client: 'desktop',
     initialScreenHintSlot: null,
     onTempBlockFinished: mockFn,
     onInputFinished: mockFn,

package/src/types.ts

@@ -97,12 +97,12 @@ export type ConfirmationProps = {
     onTempBlockFinished?: () => void;
 
     /**
-     * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
+     * Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана
      */
-    getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+    getScreensMap?: (defaultScreensMap: ScreensMap) => ScreensMap;
 
     /**
-     * Дочерние элементы.
+     * Дочерние элементы
      */
     children?: ReactNode;
 
@@ -123,6 +123,11 @@ export type ConfirmationProps = {
      */
     breakpoint?: number;
 
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+
     /**
      * Продолжительность отображения ошибки
      * @default 1300
@@ -156,14 +161,10 @@ export type TConfirmationContext = Required<
         | 'clearCodeOnError'
         | 'initialScreenHintSlot'
         | 'errorVisibleDuration'
+        | 'breakpoint'
+        | 'client'
     > & {
         timeLeft: number;
-    } & {
-        /**
-         * Контрольная точка для кнопки, с нее начинается desktop версия
-         * @default 1024
-         */
-        breakpoint?: number;
     };
 
 export type ConfirmationTexts = {
@@ -184,7 +185,8 @@ export type ConfirmationTexts = {
      * Экран HINT
      */
     hintButton?: string; // кнопка 'Вернуться'
-
+    domesticPhone?: string; // номер телефона для звонков по России
+    internationalPhone?: string; // номер телефона для звонков из-за границы
     /**
      * Экран FATAL_ERROR
      */
@@ -215,7 +217,7 @@ export type ScreensMap = {
     [key: string]: ComponentType;
 };
 
-export const defaultTexts = {
+export const defaultTexts: ConfirmationTexts = {
     title: 'Введите код из\xa0сообщения',
     codeError: 'Код введён неверно',
     codeChecking: '',
@@ -232,4 +234,6 @@ export const defaultTexts = {
     tempBlockDescription: 'Повторное подтверждение кодом будет возможно через 24\xa0часа',
     codeSended: 'Код выслан',
     countdown: 'Запросить повторно можно через',
+    domesticPhone: '8 800 200 00 00',
+    internationalPhone: '+7 495 78 888 78',
 };

package/src/utils.ts

@@ -105,3 +105,12 @@ export const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmatio
         setConfirmationBlockSmsRetry,
     };
 };
+
+const NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\d+]/g);
+
+/**
+ * @returns ссылку для набора номера
+ */
+export function getPhoneHref(phone: string): string {
+    return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;
+}

package/types.d.ts

@@ -77,11 +77,11 @@ type ConfirmationProps = {
      */
     onTempBlockFinished?: () => void;
     /**
-     * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
+     * Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана
      */
-    getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+    getScreensMap?: (defaultScreensMap: ScreensMap) => ScreensMap;
     /**
-     * Дочерние элементы.
+     * Дочерние элементы
      */
     children?: ReactNode;
     /**
@@ -98,20 +98,18 @@ type ConfirmationProps = {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Продолжительность отображения ошибки
      * @default 1300
      */
     errorVisibleDuration?: 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' | 'initialScreenHintSlot' | 'errorVisibleDuration'> & {
+type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
     timeLeft: number;
-} & {
-    /**
-     * Контрольная точка для кнопки, с нее начинается desktop версия
-     * @default 1024
-     */
-    breakpoint?: number;
 };
 type ConfirmationTexts = {
     /**
@@ -130,6 +128,8 @@ type ConfirmationTexts = {
      * Экран HINT
      */
     hintButton?: string;
+    domesticPhone?: string;
+    internationalPhone?: string;
     /**
      * Экран FATAL_ERROR
      */
@@ -147,21 +147,5 @@ type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ER
 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;
-};
+declare const defaultTexts: ConfirmationTexts;
 export { ConfirmationProps, TConfirmationContext, ConfirmationTexts, ConfirmationScreen, ConfirmationState, ScreensMap, defaultTexts };