From b66b569b3fce24f4a1e28cf139f63be768576a4f Mon Sep 17 00:00:00 2001
From: Konstantin Polyanskiy <kv.polyanskiy@gmail.com>
Date: Tue, 12 Apr 2022 15:55:01 +0300
Subject: [PATCH] feat(plasma-temple): Exports by platforms: Grid, HeroSlider,
 ErrorPage, SuccessPage, VideoPage

---
 .../src/components/Grid/Grid.tsx              | 39 ++++----
 .../components/VideoPlayer/VideoPlayer.tsx    |  9 +-
 .../src/components/index@mobile.ts            |  1 +
 .../src/components/index@sberbox.ts           |  2 +
 .../src/components/index@sberportal.ts        |  2 +
 packages/plasma-temple/src/index@mobile.ts    |  1 +
 packages/plasma-temple/src/index@sberbox.ts   |  1 +
 .../plasma-temple/src/index@sberportal.ts     |  1 +
 .../src/pages/ErrorPage/ErrorPage.tsx         | 88 ++++---------------
 .../src/pages/ErrorPage/ErrorPage@common.tsx  | 86 ++++++++++++++++++
 .../src/pages/ErrorPage/ErrorPage@mobile.tsx  | 13 +++
 .../src/pages/ErrorPage/ErrorPage@sberbox.tsx | 13 +++
 .../pages/ErrorPage/ErrorPage@sberportal.tsx  | 13 +++
 .../src/pages/SuccessPage/SuccessPage.tsx     | 84 ++++--------------
 .../pages/SuccessPage/SuccessPage@common.tsx  | 82 +++++++++++++++++
 .../pages/SuccessPage/SuccessPage@mobile.tsx  | 13 +++
 .../pages/SuccessPage/SuccessPage@sberbox.tsx | 13 +++
 .../SuccessPage/SuccessPage@sberportal.tsx    | 13 +++
 .../src/pages/VideoPage/VideoPage.tsx         | 10 ++-
 .../plasma-temple/src/pages/index@mobile.ts   |  3 +
 .../plasma-temple/src/pages/index@sberbox.ts  |  3 +
 .../src/pages/index@sberportal.ts             |  3 +
 22 files changed, 330 insertions(+), 163 deletions(-)
 create mode 100644 packages/plasma-temple/src/pages/ErrorPage/ErrorPage@common.tsx
 create mode 100644 packages/plasma-temple/src/pages/ErrorPage/ErrorPage@mobile.tsx
 create mode 100644 packages/plasma-temple/src/pages/ErrorPage/ErrorPage@sberbox.tsx
 create mode 100644 packages/plasma-temple/src/pages/ErrorPage/ErrorPage@sberportal.tsx
 create mode 100644 packages/plasma-temple/src/pages/SuccessPage/SuccessPage@common.tsx
 create mode 100644 packages/plasma-temple/src/pages/SuccessPage/SuccessPage@mobile.tsx
 create mode 100644 packages/plasma-temple/src/pages/SuccessPage/SuccessPage@sberbox.tsx
 create mode 100644 packages/plasma-temple/src/pages/SuccessPage/SuccessPage@sberportal.tsx
 create mode 100644 packages/plasma-temple/src/pages/index@mobile.ts
 create mode 100644 packages/plasma-temple/src/pages/index@sberbox.ts
 create mode 100644 packages/plasma-temple/src/pages/index@sberportal.ts

diff --git a/packages/plasma-temple/src/components/Grid/Grid.tsx b/packages/plasma-temple/src/components/Grid/Grid.tsx
index 4c896bcec..4444afce7 100644
--- a/packages/plasma-temple/src/components/Grid/Grid.tsx
+++ b/packages/plasma-temple/src/components/Grid/Grid.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
-import { detectDevice } from '@sberdevices/plasma-ui';
+import styled, { css } from 'styled-components';
+import { mediaQuery } from '@sberdevices/plasma-ui';
 
 import { FullScreenBackground } from '../FullScreenBackground/FullScreenBackground';
 
@@ -9,35 +9,40 @@ interface BackgroundProps {
     src: string;
 }
 
-export interface GridProps {
+interface GridColumns {
     /** Количество колонок при разрешении XL */
     columnXL?: number;
     /** Количество колонок при разрешении M */
     columnM?: number;
     /** Количество колонок при разрешении S */
     columnS?: number;
+}
+export interface GridProps extends GridColumns {
     /** Фоновое изображение */
     background?: BackgroundProps;
     className?: string;
 }
 
-const StyledContainer = styled.div<{ columns: number }>`
+const StyledContainer = styled.div<Required<GridColumns>>`
     display: grid;
     grid-gap: 1rem;
-    grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
     grid-auto-rows: 1fr;
-`;
+    grid-template-columns: repeat(2, 1fr);
 
-const getColumnCount = ({ columnXL, columnM, columnS }: { columnXL: number; columnM: number; columnS: number }) => {
-    switch (detectDevice()) {
-        case 'sberBox':
-            return columnXL;
-        case 'sberPortal':
-            return columnM;
-        default:
-            return columnS;
-    }
-};
+    ${({ columnXL, columnM, columnS }) => {
+        return [
+            mediaQuery('XL')(css`
+                grid-template-columns: repeat(${columnXL}, 1fr);
+            `),
+            mediaQuery('M')(css`
+                grid-template-columns: repeat(${columnM}, 1fr);
+            `),
+            mediaQuery('S')(css`
+                grid-template-columns: repeat(${columnS}, 1fr);
+            `),
+        ];
+    }};
+`;
 
 /** Компонент для отображения однотипного контента (обычно карточки) в виде сетки с заданным количеством колонок */
 export function Grid({
@@ -49,7 +54,7 @@ export function Grid({
     background,
 }: React.PropsWithChildren<GridProps>) {
     return (
-        <StyledContainer className={className} columns={getColumnCount({ columnXL, columnM, columnS })}>
+        <StyledContainer className={className} columnXL={columnXL} columnM={columnM} columnS={columnS}>
             {background && <FullScreenBackground src={background.src} />}
             {children}
         </StyledContainer>
diff --git a/packages/plasma-temple/src/components/VideoPlayer/VideoPlayer.tsx b/packages/plasma-temple/src/components/VideoPlayer/VideoPlayer.tsx
index 256e325b8..f639e631d 100644
--- a/packages/plasma-temple/src/components/VideoPlayer/VideoPlayer.tsx
+++ b/packages/plasma-temple/src/components/VideoPlayer/VideoPlayer.tsx
@@ -30,6 +30,7 @@ export interface VideoPlayerProps extends React.VideoHTMLAttributes<HTMLVideoEle
     posterClassName?: string;
     children?: (props: CustomMediaPlayerControlsProps<HTMLVideoElement>) => React.ReactElement;
     src: string;
+    insets?: Insets;
 }
 
 const opacityMixin = css<{ hidden: boolean }>`
@@ -117,9 +118,11 @@ export const VideoPlayer = React.memo(
         videoFit = 'contain',
         posterClassName = '',
         className,
+        insets,
         ...restProps
     }: VideoPlayerProps) => {
-        const insets = useInsets();
+        // TODO: удалить не работает без PlasmaApp, использовать проп insets
+        const plasmaAppInsets = useInsets();
         const playerRef = React.useRef<HTMLVideoElement>(null);
         const { actions, state } = useMediaPlayer(playerRef, {
             start: startTime,
@@ -193,11 +196,11 @@ export const VideoPlayer = React.memo(
                             actions: customControlsActions,
                         })}
                     {isControlVisible(ControlType.HEADER, visibleControlList) && (
-                        <StyledHeader hidden={isControlsHidden} insets={insets}>
+                        <StyledHeader hidden={isControlsHidden} insets={insets ?? plasmaAppInsets}>
                             {header}
                         </StyledHeader>
                     )}
-                    <StyledControlsWrapper hidden={isControlsHidden} insets={insets}>
+                    <StyledControlsWrapper hidden={isControlsHidden} insets={insets ?? plasmaAppInsets}>
                         <MediaPlayerControls
                             playback={playback}
                             goBack={goBack}
diff --git a/packages/plasma-temple/src/components/index@mobile.ts b/packages/plasma-temple/src/components/index@mobile.ts
index 6410c5626..e89200ccd 100644
--- a/packages/plasma-temple/src/components/index@mobile.ts
+++ b/packages/plasma-temple/src/components/index@mobile.ts
@@ -1,2 +1,3 @@
 export { StateLayoutMobile as StateLayout } from './StateLayout/StateLayout@mobile';
 export * from './Item/index@mobile';
+export { Grid } from './Grid/Grid';
diff --git a/packages/plasma-temple/src/components/index@sberbox.ts b/packages/plasma-temple/src/components/index@sberbox.ts
index b8333e345..f78aec001 100644
--- a/packages/plasma-temple/src/components/index@sberbox.ts
+++ b/packages/plasma-temple/src/components/index@sberbox.ts
@@ -1,2 +1,4 @@
 export { StateLayoutSberBox as StateLayout } from './StateLayout/StateLayout@sberbox';
 export * from './Item/index@sberbox';
+export { Grid } from './Grid/Grid';
+export { HeroSliderSberbox as HeroSlider } from './HeroSlider/HeroSlider@sberbox';
diff --git a/packages/plasma-temple/src/components/index@sberportal.ts b/packages/plasma-temple/src/components/index@sberportal.ts
index 772edaebb..96f5afbdc 100644
--- a/packages/plasma-temple/src/components/index@sberportal.ts
+++ b/packages/plasma-temple/src/components/index@sberportal.ts
@@ -1,2 +1,4 @@
 export { StateLayoutSberPortal as StateLayout } from './StateLayout/StateLayout@sberportal';
 export * from './Item/index@sberportal';
+export { Grid } from './Grid/Grid';
+export { HeroSliderSberportal as HeroSlider } from './HeroSlider/HeroSlider@sberportal';
diff --git a/packages/plasma-temple/src/index@mobile.ts b/packages/plasma-temple/src/index@mobile.ts
index bd7cd02a3..ba481dd23 100644
--- a/packages/plasma-temple/src/index@mobile.ts
+++ b/packages/plasma-temple/src/index@mobile.ts
@@ -1 +1,2 @@
 export * from './components/index@mobile';
+export * from './pages/index@mobile';
diff --git a/packages/plasma-temple/src/index@sberbox.ts b/packages/plasma-temple/src/index@sberbox.ts
index 04541135b..e6bb47e9f 100644
--- a/packages/plasma-temple/src/index@sberbox.ts
+++ b/packages/plasma-temple/src/index@sberbox.ts
@@ -1 +1,2 @@
 export * from './components/index@sberbox';
+export * from './pages/index@sberbox';
diff --git a/packages/plasma-temple/src/index@sberportal.ts b/packages/plasma-temple/src/index@sberportal.ts
index 6ca08c7f3..5a709b21e 100644
--- a/packages/plasma-temple/src/index@sberportal.ts
+++ b/packages/plasma-temple/src/index@sberportal.ts
@@ -1 +1,2 @@
 export * from './components/index@sberportal';
+export * from './pages/index@sberportal';
diff --git a/packages/plasma-temple/src/pages/ErrorPage/ErrorPage.tsx b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage.tsx
index c9962ca16..892bf86dd 100644
--- a/packages/plasma-temple/src/pages/ErrorPage/ErrorPage.tsx
+++ b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage.tsx
@@ -1,75 +1,17 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
-import { mediaQuery } from '@sberdevices/plasma-ui/utils';
 
-import { useFocusOnMount } from '../../hooks/useFocusOnMount';
-import { THROTTLE_WAIT } from '../../hooks/useThrottledCallback';
-import { StateLayout } from '../../components/StateLayout/StateLayout';
-import { HeaderProps } from '../../components/Header/types';
-import { isSberBoxLike } from '../../utils/deviceFamily';
-
-import iconWarn from './ErrorPage.assets/warning-circle.svg';
-
-export interface ErrorPageProps {
-    /** @deprecated работает только с PlasmaApp */
-    header?: HeaderProps;
-    /** Основной и дополнительный текст об ошибке */
-    error: {
-        status: string;
-        message?: string;
-    };
-    /** Дополнительный контент, обычно кнопки для выполнения какого-либо действия */
-    buttons?: ((focusedRef: React.Ref<HTMLButtonElement>) => React.ReactNode) | React.ReactNode;
-    className?: string;
-}
-
-const StyledWarningIcon = styled.div`
-    width: 252px;
-    height: 252px;
-
-    ${mediaQuery('M')(css`
-        width: 168px;
-        height: 168px;
-    `)}
-
-    ${mediaQuery('S')(css`
-        width: 84px;
-        height: 84px;
-    `)}
-
-    background-image: url(${iconWarn});
-    background-size: contain;
-`;
-
-/** Компонент страницы для отображения состояния ошибки */
-export const ErrorPage: React.FC<ErrorPageProps> = ({ header, error, buttons, className }) => {
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-
-    useFocusOnMount<HTMLButtonElement>(buttonRef, {
-        delay: THROTTLE_WAIT,
-        prevent: !isSberBoxLike(),
-    });
-
-    const buttonsToRender = React.useMemo<React.ReactNode>(() => {
-        if (typeof buttons === 'function') {
-            return buttons(buttonRef);
-        }
-
-        if (React.isValidElement(buttons)) {
-            return buttons;
-        }
-
-        return null;
-    }, [buttons]);
-
-    return (
-        <StateLayout
-            className={className}
-            header={header}
-            title={error.status}
-            text={error.message}
-            button={buttonsToRender}
-            image={<StyledWarningIcon />}
-        />
-    );
-};
+import { DeviceComponent } from '../../components/DeviceComponent/DeviceComponent';
+
+import { ErrorPageProps } from './ErrorPage@common';
+import { ErrorPageMobile } from './ErrorPage@mobile';
+import { ErrorPageSberBox } from './ErrorPage@sberbox';
+import { ErrorPageSberPortal } from './ErrorPage@sberportal';
+
+export const ErrorPage: React.FC<ErrorPageProps> = (props) => (
+    <DeviceComponent
+        sberbox={ErrorPageSberBox}
+        sberportal={ErrorPageSberPortal}
+        mobile={ErrorPageMobile}
+        props={props}
+    />
+);
diff --git a/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@common.tsx b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@common.tsx
new file mode 100644
index 000000000..5a05db71e
--- /dev/null
+++ b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@common.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { mediaQuery } from '@sberdevices/plasma-ui/utils';
+
+import { useFocusOnMount } from '../../hooks/useFocusOnMount';
+import { THROTTLE_WAIT } from '../../hooks/useThrottledCallback';
+import { HeaderProps } from '../../components/Header/types';
+import { isSberBoxLike } from '../../utils/deviceFamily';
+import { UnifiedComponentProps } from '../../registry/types';
+import { StateLayoutProps } from '../../components';
+
+import iconWarn from './ErrorPage.assets/warning-circle.svg';
+
+type PlatformComponents = {
+    StateLayout: StateLayoutProps;
+};
+
+export interface ErrorPageProps {
+    /** @deprecated работает только с PlasmaApp */
+    header?: HeaderProps;
+    /** Основной и дополнительный текст об ошибке */
+    error: {
+        status: string;
+        message?: string;
+    };
+    /** Дополнительный контент, обычно кнопки для выполнения какого-либо действия */
+    buttons?: ((focusedRef: React.Ref<HTMLButtonElement>) => React.ReactNode) | React.ReactNode;
+    className?: string;
+}
+
+const StyledWarningIcon = styled.div`
+    width: 252px;
+    height: 252px;
+
+    ${mediaQuery('M')(css`
+        width: 168px;
+        height: 168px;
+    `)}
+
+    ${mediaQuery('S')(css`
+        width: 84px;
+        height: 84px;
+    `)}
+
+    background-image: url(${iconWarn});
+    background-size: contain;
+`;
+
+/** Компонент страницы для отображения состояния ошибки */
+export const ErrorPageCommon: React.FC<UnifiedComponentProps<ErrorPageProps, PlatformComponents>> = ({
+    header,
+    error,
+    buttons,
+    className,
+    platformComponents: { StateLayout },
+}) => {
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+    useFocusOnMount<HTMLButtonElement>(buttonRef, {
+        delay: THROTTLE_WAIT,
+        prevent: !isSberBoxLike(),
+    });
+
+    const buttonsToRender = React.useMemo<React.ReactNode>(() => {
+        if (typeof buttons === 'function') {
+            return buttons(buttonRef);
+        }
+
+        if (React.isValidElement(buttons)) {
+            return buttons;
+        }
+
+        return null;
+    }, [buttons]);
+
+    return (
+        <StateLayout
+            className={className}
+            header={header}
+            title={error.status}
+            text={error.message}
+            button={buttonsToRender}
+            image={<StyledWarningIcon />}
+        />
+    );
+};
diff --git a/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@mobile.tsx b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@mobile.tsx
new file mode 100644
index 000000000..f8846edb3
--- /dev/null
+++ b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@mobile.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { StateLayoutMobile } from '../../components/StateLayout/StateLayout@mobile';
+
+import { ErrorPageCommon, ErrorPageProps } from './ErrorPage@common';
+
+const platformComponents = {
+    StateLayout: StateLayoutMobile,
+};
+
+export const ErrorPageMobile: React.FC<ErrorPageProps> = (props) => (
+    <ErrorPageCommon {...props} platformComponents={platformComponents} />
+);
diff --git a/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@sberbox.tsx b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@sberbox.tsx
new file mode 100644
index 000000000..10d672883
--- /dev/null
+++ b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@sberbox.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { StateLayoutSberBox } from '../../components/StateLayout/StateLayout@sberbox';
+
+import { ErrorPageCommon, ErrorPageProps } from './ErrorPage@common';
+
+const platformComponents = {
+    StateLayout: StateLayoutSberBox,
+};
+
+export const ErrorPageSberBox: React.FC<ErrorPageProps> = (props) => (
+    <ErrorPageCommon {...props} platformComponents={platformComponents} />
+);
diff --git a/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@sberportal.tsx b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@sberportal.tsx
new file mode 100644
index 000000000..549f809c8
--- /dev/null
+++ b/packages/plasma-temple/src/pages/ErrorPage/ErrorPage@sberportal.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { StateLayoutSberPortal } from '../../components/StateLayout/StateLayout@sberportal';
+
+import { ErrorPageCommon, ErrorPageProps } from './ErrorPage@common';
+
+const platformComponents = {
+    StateLayout: StateLayoutSberPortal,
+};
+
+export const ErrorPageSberPortal: React.FC<ErrorPageProps> = (props) => (
+    <ErrorPageCommon {...props} platformComponents={platformComponents} />
+);
diff --git a/packages/plasma-temple/src/pages/SuccessPage/SuccessPage.tsx b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage.tsx
index c8ac83b1e..786ca137f 100644
--- a/packages/plasma-temple/src/pages/SuccessPage/SuccessPage.tsx
+++ b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage.tsx
@@ -1,71 +1,17 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
-import { mediaQuery } from '@sberdevices/plasma-ui/utils';
 
-import { useFocusOnMount } from '../../hooks/useFocusOnMount';
-import { THROTTLE_WAIT } from '../../hooks/useThrottledCallback';
-import { StateLayout } from '../../components/StateLayout/StateLayout';
-import { isSberBoxLike } from '../../utils/deviceFamily';
-
-import successIcon from './SuccessPage.assets/success.svg';
-
-export interface SuccessPageProps {
-    title: string;
-    subtitle?: string;
-    /** Дополнительный контент, обычно кнопки для выполнения какого-либо действия */
-    buttons?: ((focusedRef: React.Ref<HTMLButtonElement>) => React.ReactNode) | React.ReactNode;
-    className?: string;
-}
-
-const StyledSuccessIcon = styled.div`
-    width: 7.875rem;
-    height: 7.875rem;
-
-    ${mediaQuery(
-        'M',
-        2,
-    )(css`
-        width: 5.25rem;
-        height: 5.25rem;
-    `)}
-
-    ${mediaQuery(
-        'S',
-        1,
-    )(css`
-        width: 5.25rem;
-        height: 5.25rem;
-    `)}
-
-    background-image: url(${successIcon});
-    background-size: contain;
-    margin: auto;
-`;
-
-/** Компонент страницы для отображения состояния успеха */
-export const SuccessPage: React.FC<SuccessPageProps> = ({ title, subtitle, buttons, className }) => {
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-
-    useFocusOnMount<HTMLButtonElement>(buttonRef, {
-        delay: THROTTLE_WAIT,
-        prevent: !isSberBoxLike(),
-    });
-
-    const buttonsToRender = React.useMemo<React.ReactNode>(() => {
-        if (typeof buttons === 'function') {
-            return buttons(buttonRef);
-        }
-
-        return buttons;
-    }, [buttons]);
-
-    return (
-        <StateLayout
-            className={className}
-            title={title}
-            text={subtitle}
-            button={buttonsToRender}
-            image={<StyledSuccessIcon />}
-        />
-    );
-};
+import { DeviceComponent } from '../../components/DeviceComponent/DeviceComponent';
+
+import { SuccessPageProps } from './SuccessPage@common';
+import { SuccessPageMobile } from './SuccessPage@mobile';
+import { SuccessPageSberBox } from './SuccessPage@sberbox';
+import { SuccessPageSberPortal } from './SuccessPage@sberportal';
+
+export const SuccessPage: React.FC<SuccessPageProps> = (props) => (
+    <DeviceComponent
+        sberbox={SuccessPageSberBox}
+        sberportal={SuccessPageSberPortal}
+        mobile={SuccessPageMobile}
+        props={props}
+    />
+);
diff --git a/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@common.tsx b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@common.tsx
new file mode 100644
index 000000000..5ac8b0616
--- /dev/null
+++ b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@common.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { mediaQuery } from '@sberdevices/plasma-ui/utils';
+
+import { useFocusOnMount } from '../../hooks/useFocusOnMount';
+import { THROTTLE_WAIT } from '../../hooks/useThrottledCallback';
+import { isSberBoxLike } from '../../utils/deviceFamily';
+import { StateLayoutProps } from '../../components/StateLayout';
+import { UnifiedComponentProps } from '../../registry/types';
+
+import successIcon from './SuccessPage.assets/success.svg';
+
+type PlatformComponents = {
+    StateLayout: StateLayoutProps;
+};
+
+export interface SuccessPageProps {
+    title: string;
+    subtitle?: string;
+    /** Дополнительный контент, обычно кнопки для выполнения какого-либо действия */
+    buttons?: ((focusedRef: React.Ref<HTMLButtonElement>) => React.ReactNode) | React.ReactNode;
+    className?: string;
+}
+
+const StyledSuccessIcon = styled.div`
+    width: 7.875rem;
+    height: 7.875rem;
+
+    ${mediaQuery(
+        'M',
+        2,
+    )(css`
+        width: 5.25rem;
+        height: 5.25rem;
+    `)}
+
+    ${mediaQuery(
+        'S',
+        1,
+    )(css`
+        width: 5.25rem;
+        height: 5.25rem;
+    `)}
+
+    background-image: url(${successIcon});
+    background-size: contain;
+    margin: auto;
+`;
+
+/** Компонент страницы для отображения состояния успеха */
+export const SuccessPageCommon: React.FC<UnifiedComponentProps<SuccessPageProps, PlatformComponents>> = ({
+    title,
+    subtitle,
+    buttons,
+    className,
+    platformComponents: { StateLayout },
+}) => {
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+    useFocusOnMount<HTMLButtonElement>(buttonRef, {
+        delay: THROTTLE_WAIT,
+        prevent: !isSberBoxLike(),
+    });
+
+    const buttonsToRender = React.useMemo<React.ReactNode>(() => {
+        if (typeof buttons === 'function') {
+            return buttons(buttonRef);
+        }
+
+        return buttons;
+    }, [buttons]);
+
+    return (
+        <StateLayout
+            className={className}
+            title={title}
+            text={subtitle}
+            button={buttonsToRender}
+            image={<StyledSuccessIcon />}
+        />
+    );
+};
diff --git a/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@mobile.tsx b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@mobile.tsx
new file mode 100644
index 000000000..626c68a21
--- /dev/null
+++ b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@mobile.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { StateLayoutMobile } from '../../components/StateLayout/StateLayout@mobile';
+
+import { SuccessPageCommon, SuccessPageProps } from './SuccessPage@common';
+
+const platformComponents = {
+    StateLayout: StateLayoutMobile,
+};
+
+export const SuccessPageMobile: React.FC<SuccessPageProps> = (props) => (
+    <SuccessPageCommon {...props} platformComponents={platformComponents} />
+);
diff --git a/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@sberbox.tsx b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@sberbox.tsx
new file mode 100644
index 000000000..554df933f
--- /dev/null
+++ b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@sberbox.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { StateLayoutSberBox } from '../../components/StateLayout/StateLayout@sberbox';
+
+import { SuccessPageCommon, SuccessPageProps } from './SuccessPage@common';
+
+const platformComponents = {
+    StateLayout: StateLayoutSberBox,
+};
+
+export const SuccessPageSberBox: React.FC<SuccessPageProps> = (props) => (
+    <SuccessPageCommon {...props} platformComponents={platformComponents} />
+);
diff --git a/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@sberportal.tsx b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@sberportal.tsx
new file mode 100644
index 000000000..2b6a3fb34
--- /dev/null
+++ b/packages/plasma-temple/src/pages/SuccessPage/SuccessPage@sberportal.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { StateLayoutSberPortal } from '../../components/StateLayout/StateLayout@sberportal';
+
+import { SuccessPageCommon, SuccessPageProps } from './SuccessPage@common';
+
+const platformComponents = {
+    StateLayout: StateLayoutSberPortal,
+};
+
+export const SuccessPageSberPortal: React.FC<SuccessPageProps> = (props) => (
+    <SuccessPageCommon {...props} platformComponents={platformComponents} />
+);
diff --git a/packages/plasma-temple/src/pages/VideoPage/VideoPage.tsx b/packages/plasma-temple/src/pages/VideoPage/VideoPage.tsx
index 4c429890a..711bb2cb5 100644
--- a/packages/plasma-temple/src/pages/VideoPage/VideoPage.tsx
+++ b/packages/plasma-temple/src/pages/VideoPage/VideoPage.tsx
@@ -11,7 +11,13 @@ import { VideoPageState } from './types';
 interface VideoPageProps<T extends AnyObject = AnyObject>
     extends Pick<
         VideoPlayerProps,
-        'autoPlay' | 'alwaysShowControls' | 'visibleControlList' | 'controlsHidden' | 'videoFit' | 'posterClassName'
+        | 'autoPlay'
+        | 'alwaysShowControls'
+        | 'visibleControlList'
+        | 'controlsHidden'
+        | 'videoFit'
+        | 'posterClassName'
+        | 'insets'
     > {
     state: VideoPageState<T>;
     customControls?: React.ComponentType<CustomMediaPlayerControlsProps<HTMLVideoElement>>;
@@ -38,6 +44,7 @@ export function VideoPage<T extends AnyObject = AnyObject>({
     posterClassName,
     children,
     changeState,
+    insets,
 }: VideoPageProps<T>): React.ReactElement {
     const { items, position } = state;
     const videos = Array.isArray(items) ? items : [items];
@@ -77,6 +84,7 @@ export function VideoPage<T extends AnyObject = AnyObject>({
                 customControls={customControls}
                 videoFit={videoFit}
                 posterClassName={posterClassName}
+                insets={insets}
             >
                 {children}
             </VideoPlayer>
diff --git a/packages/plasma-temple/src/pages/index@mobile.ts b/packages/plasma-temple/src/pages/index@mobile.ts
new file mode 100644
index 000000000..f1ad35670
--- /dev/null
+++ b/packages/plasma-temple/src/pages/index@mobile.ts
@@ -0,0 +1,3 @@
+export { ErrorPageMobile as ErrorPage } from './ErrorPage/ErrorPage@mobile';
+export { SuccessPageMobile as SuccessPage } from './SuccessPage/SuccessPage@mobile';
+export { VideoPage } from './VideoPage/VideoPage';
diff --git a/packages/plasma-temple/src/pages/index@sberbox.ts b/packages/plasma-temple/src/pages/index@sberbox.ts
new file mode 100644
index 000000000..5a304b2f5
--- /dev/null
+++ b/packages/plasma-temple/src/pages/index@sberbox.ts
@@ -0,0 +1,3 @@
+export { ErrorPageSberBox as ErrorPage } from './ErrorPage/ErrorPage@sberbox';
+export { SuccessPageSberBox as SuccessPage } from './SuccessPage/SuccessPage@sberbox';
+export { VideoPage } from './VideoPage/VideoPage';
diff --git a/packages/plasma-temple/src/pages/index@sberportal.ts b/packages/plasma-temple/src/pages/index@sberportal.ts
new file mode 100644
index 000000000..b89792113
--- /dev/null
+++ b/packages/plasma-temple/src/pages/index@sberportal.ts
@@ -0,0 +1,3 @@
+export { ErrorPageSberPortal as ErrorPage } from './ErrorPage/ErrorPage@sberportal';
+export { SuccessPageSberPortal as SuccessPage } from './SuccessPage/SuccessPage@sberportal';
+export { VideoPage } from './VideoPage/VideoPage';