@alfalab/core-components-confirmation 13.8.2 → 13.8.3

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

@@ -18,7 +18,7 @@ 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 handleReturnButtonClick = () => {
@@ -110,6 +110,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                 onClick={handleReturnButtonClick}
                 className={styles.hintButton}
                 breakpoint={breakpoint}
+                client={client}
             >
                 {texts.hintButton}
             </Button>

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

@@ -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 = {

package/types.d.ts

@@ -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 = {
     /**