@pushwoosh/smart-components-kit 1.0.89 → 1.1.0

package/OpenActions/components/OpenActionsSummary/OpenActionsSummary.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Link, Spinner } from '@pushwoosh/dumb-components';
 import { Color, PlatformsIcons, PlatformsLabels, Tag } from '@pushwoosh/kit-constants';
@@ -8,10 +9,12 @@ import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { LinkRow, ClickActionSection } from './styles';
 import { getSafariUrl, isWebLink } from '../../helpers';
+import { Lang, useLang } from '../../polyglot';
 export const OpenActionsSummary = ({
   openActions
 }) => {
   var _applicationData$valu;
+  const lang = useLang();
   const {
     platformsDeeplinkUrls = {},
     defaultDeeplinkUrl: allPlatformsDeeplinkUrl,
@@ -25,43 +28,63 @@ export const OpenActionsSummary = ({
   const {
     rpcGateway
   } = useSPAContext();
+  // Стабильный кэш-бастер для легаси-ссылки рич-медиа: ленивый инициализатор
+  // useState вычисляет Date.now() один раз на маунт (вне render-scope), чтобы
+  // href не менялся на каждый ререндер (react-hooks/purity).
+  const [richmediaCacheBuster] = useState(() => Date.now());
   const applicationData = useAsync(() => applicationCode ? rpcGateway.applications.Get({
     code: applicationCode
   }) : Promise.resolve(undefined), [rpcGateway, applicationCode]);
   const hasCustomPlatformsDeeplink = Object.keys(platformsDeeplinkUrls).length > 0;
   const safariUrl = getSafariUrl((applicationData === null || applicationData === void 0 || (_applicationData$valu = applicationData.value) === null || _applicationData$valu === void 0 ? void 0 : _applicationData$valu.application) || null, safariUrlArgs ?? '');
-  const renderInfoBlock = (device, action, url = null, urlText) => React.createElement(Vertical, null, React.createElement("span", null, "For", ' ', React.createElement("strong", null, device), ' ', "subscribers:", ' ', React.createElement("strong", null, action)), url && React.createElement(LinkRow, null, React.createElement(Link, {
-    as: Tag.A,
-    rel: "noopener noreferrer",
-    target: "_blank",
-    href: url
-  }, React.createElement(Horizontal, {
-    "$alignItems": "center",
-    "$justifyContent": "start",
-    "$gap": 4
-  }, urlText ?? url, React.createElement(OpenIcon, {
-    view: "lined",
-    size: "small"
-  })))));
-  const renderPlatformDeepLink = (platformKey, url, label = 'deep link') => {
+  const renderInfoBlock = (device, action, url = null, urlText) => _jsxs(Vertical, {
+    children: [_jsx("span", {
+      children: _jsx(Lang, {
+        message: "SMART.OPEN_ACTIONS.INFO_BLOCK",
+        device: device,
+        action: action
+      })
+    }), url && _jsx(LinkRow, {
+      children: _jsx(Link, {
+        as: Tag.A,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        href: url,
+        children: _jsxs(Horizontal, {
+          "$alignItems": "center",
+          "$justifyContent": "start",
+          "$gap": 4,
+          children: [urlText ?? url, _jsx(OpenIcon, {
+            view: "lined",
+            size: "small"
+          })]
+        })
+      })
+    })]
+  });
+  const renderPlatformDeepLink = (platformKey, url, label) => {
     const isEnumKey = typeof platformKey === 'number';
     const icon = isEnumKey ? PlatformsIcons[platformKey] : null;
     const labelText = isEnumKey ? PlatformsLabels[platformKey] : platformKey;
-    return React.createElement(ClickActionSection, {
-      key: platformKey
-    }, React.createElement(Horizontal, {
-      "$alignItems": "start",
-      "$justifyContent": "start",
-      "$gap": 8
-    }, icon && React.createElement(PlatformLogoIcon, {
-      size: "small",
-      type: icon,
-      color: Color.LOCKED
-    }), React.createElement(Text, {
-      "$variant": "h4",
-      "$color": Color.LOCKED,
-      "$uppercase": true
-    }, labelText, ' ', label)), React.createElement(LinkRow, null, url));
+    return _jsxs(ClickActionSection, {
+      children: [_jsxs(Horizontal, {
+        "$alignItems": "start",
+        "$justifyContent": "start",
+        "$gap": 8,
+        children: [icon && _jsx(PlatformLogoIcon, {
+          size: "small",
+          type: icon,
+          color: Color.LOCKED
+        }), _jsxs(Text, {
+          "$variant": "h4",
+          "$color": Color.LOCKED,
+          "$uppercase": true,
+          children: [labelText, ' ', label]
+        })]
+      }), _jsx(LinkRow, {
+        children: url
+      })]
+    }, platformKey);
   };
   const getRichmediaLink = ({
     url,
@@ -69,14 +92,55 @@ export const OpenActionsSummary = ({
     createdType = 'BUILDER'
   }) => {
     if (code) {
-      return createdType === 'BUILDER' ? `/applications/${applicationCode}/rich-media/${code}/edit` : `/applications/${applicationCode}/richMedia/edit/${Date.now()}/${code}`;
+      return createdType === 'BUILDER' ? `/applications/${applicationCode}/rich-media/${code}/edit` : `/applications/${applicationCode}/richMedia/edit/${richmediaCacheBuster}/${code}`;
     }
     return url;
   };
-  return React.createElement(Vertical, {
-    "$gap": 8
-  }, openActions ? React.createElement(React.Fragment, null, showRichmedia && renderInfoBlock('mobile', 'open in-app banner', getRichmediaLink(showRichmedia), showRichmedia.name || showRichmedia.code), !showRichmedia && hasCustomPlatformsDeeplink && renderInfoBlock('mobile', 'follow the Deep link'), !showRichmedia && Object.entries(platformsDeeplinkUrls).map(([platformKey, url]) => renderPlatformDeepLink(+platformKey, url)), !showRichmedia && allPlatformsDeeplinkUrl && hasCustomPlatformsDeeplink && renderPlatformDeepLink('Other platforms', allPlatformsDeeplinkUrl, isWebLink(allPlatformsDeeplinkUrl) ? 'open URL in browser' : 'deep link'), !showRichmedia && allPlatformsDeeplinkUrl && !hasCustomPlatformsDeeplink && renderInfoBlock('mobile', isWebLink(allPlatformsDeeplinkUrl) ? 'open URL in browser' : 'follow the Deep link', allPlatformsDeeplinkUrl), !showRichmedia && !allPlatformsDeeplinkUrl && !hasCustomPlatformsDeeplink && renderInfoBlock('mobile', 'open home page in application'), webPageUrl && renderInfoBlock('web', 'open URL in browser', webPageUrl), webPageUrl && safariUrl && renderInfoBlock('Safari', 'open URL in Safari browser', safariUrl), !webPageUrl && renderInfoBlock('web', 'open home page in browser')) : React.createElement(Spinner, {
-    color: Color.MAIN,
-    size: "medium"
-  }));
+  return _jsx(Vertical, {
+    "$gap": 8,
+    children: openActions ? _jsxs(_Fragment, {
+      children: [showRichmedia && renderInfoBlock(lang({
+        message: 'SMART.OPEN_ACTIONS.DEVICE.MOBILE'
+      }), lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.OPEN_INAPP'
+      }), getRichmediaLink(showRichmedia), showRichmedia.name || showRichmedia.code), !showRichmedia && hasCustomPlatformsDeeplink && renderInfoBlock(lang({
+        message: 'SMART.OPEN_ACTIONS.DEVICE.MOBILE'
+      }), lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.FOLLOW_DEEPLINK'
+      })), !showRichmedia && Object.entries(platformsDeeplinkUrls).map(([platformKey, url]) => renderPlatformDeepLink(+platformKey, url, lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.DEEP_LINK'
+      }))), !showRichmedia && allPlatformsDeeplinkUrl && hasCustomPlatformsDeeplink && renderPlatformDeepLink(lang({
+        message: 'SMART.OPEN_ACTIONS.DEVICE.OTHER_PLATFORMS'
+      }), allPlatformsDeeplinkUrl, isWebLink(allPlatformsDeeplinkUrl) ? lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_BROWSER'
+      }) : lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.DEEP_LINK'
+      })), !showRichmedia && allPlatformsDeeplinkUrl && !hasCustomPlatformsDeeplink && renderInfoBlock(lang({
+        message: 'SMART.OPEN_ACTIONS.DEVICE.MOBILE'
+      }), isWebLink(allPlatformsDeeplinkUrl) ? lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_BROWSER'
+      }) : lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.FOLLOW_DEEPLINK'
+      }), allPlatformsDeeplinkUrl), !showRichmedia && !allPlatformsDeeplinkUrl && !hasCustomPlatformsDeeplink && renderInfoBlock(lang({
+        message: 'SMART.OPEN_ACTIONS.DEVICE.MOBILE'
+      }), lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.OPEN_HOME_APP'
+      })), webPageUrl && renderInfoBlock(lang({
+        message: 'SMART.OPEN_ACTIONS.DEVICE.WEB'
+      }), lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_BROWSER'
+      }), webPageUrl), webPageUrl && safariUrl && renderInfoBlock(lang({
+        message: 'SMART.OPEN_ACTIONS.DEVICE.SAFARI'
+      }), lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_SAFARI'
+      }), safariUrl), !webPageUrl && renderInfoBlock(lang({
+        message: 'SMART.OPEN_ACTIONS.DEVICE.WEB'
+      }), lang({
+        message: 'SMART.OPEN_ACTIONS.ACTION.OPEN_HOME_BROWSER'
+      }))]
+    }) : _jsx(Spinner, {
+      color: Color.MAIN,
+      size: "medium"
+    })
+  });
 };

package/OpenActions/components/OpenActionsSummaryByPreset.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { type Preset } from '@pushwoosh/rpc-v2-http-api-data/presets';
 type OpenActionsByPresetProps = {
     pushPreset: Preset;
 };
-export declare const OpenActionsSummaryByPreset: ({ pushPreset }: OpenActionsByPresetProps) => React.JSX.Element;
+export declare const OpenActionsSummaryByPreset: ({ pushPreset }: OpenActionsByPresetProps) => import("react").JSX.Element;
 export {};

package/OpenActions/components/OpenActionsSummaryByPreset.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { OpenActionsSummary } from './OpenActionsSummary';
 import { usePresetOpenActions } from '../usePresetOpenActions';
 export const OpenActionsSummaryByPreset = ({
   pushPreset
 }) => {
   const openActions = usePresetOpenActions(pushPreset);
-  return React.createElement(OpenActionsSummary, {
+  return _jsx(OpenActionsSummary, {
     openActions: openActions
   });
 };

package/OpenActions/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type OpenActionsMessages } from './types';
+export declare const Lang: import("react").FC<import("@pushwoosh/dumb-components/polyglot").LangProps<OpenActionsMessages>>, useLang: () => (props: import("@pushwoosh/dumb-components/polyglot").LangProps<OpenActionsMessages>) => string;

package/OpenActions/polyglot/index.js

@@ -0,0 +1,10 @@
+import { createLang } from '@pushwoosh/dumb-components/polyglot';
+import { messages as en } from './messages_en';
+import { messages as ru } from './messages_ru';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  en,
+  ru
+});

package/OpenActions/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type OpenActionsMessages } from './types';
+export declare const messages: LangMessages<OpenActionsMessages>;

package/OpenActions/polyglot/messages_en.js

@@ -0,0 +1,14 @@
+export const messages = {
+  'SMART.OPEN_ACTIONS.INFO_BLOCK': 'For <strong>{{device}}</strong> subscribers: <strong>{{action}}</strong>',
+  'SMART.OPEN_ACTIONS.DEVICE.MOBILE': 'mobile',
+  'SMART.OPEN_ACTIONS.DEVICE.WEB': 'web',
+  'SMART.OPEN_ACTIONS.DEVICE.SAFARI': 'Safari',
+  'SMART.OPEN_ACTIONS.DEVICE.OTHER_PLATFORMS': 'Other platforms',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_INAPP': 'open in-app banner',
+  'SMART.OPEN_ACTIONS.ACTION.FOLLOW_DEEPLINK': 'follow the Deep link',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_BROWSER': 'open URL in browser',
+  'SMART.OPEN_ACTIONS.ACTION.DEEP_LINK': 'deep link',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_HOME_APP': 'open home page in application',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_SAFARI': 'open URL in Safari browser',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_HOME_BROWSER': 'open home page in browser'
+};

package/OpenActions/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type OpenActionsMessages } from './types';
+export declare const messages: LangMessages<OpenActionsMessages>;

package/OpenActions/polyglot/messages_ru.js

@@ -0,0 +1,14 @@
+export const messages = {
+  'SMART.OPEN_ACTIONS.INFO_BLOCK': 'Для подписчиков <strong>{{device}}</strong>: <strong>{{action}}</strong>',
+  'SMART.OPEN_ACTIONS.DEVICE.MOBILE': 'мобильных приложений',
+  'SMART.OPEN_ACTIONS.DEVICE.WEB': 'веба',
+  'SMART.OPEN_ACTIONS.DEVICE.SAFARI': 'Safari',
+  'SMART.OPEN_ACTIONS.DEVICE.OTHER_PLATFORMS': 'Другие платформы',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_INAPP': 'открыть in-app баннер',
+  'SMART.OPEN_ACTIONS.ACTION.FOLLOW_DEEPLINK': 'перейти по диплинку',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_BROWSER': 'открыть URL в браузере',
+  'SMART.OPEN_ACTIONS.ACTION.DEEP_LINK': 'диплинк',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_HOME_APP': 'открыть главную страницу в приложении',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_SAFARI': 'открыть URL в браузере Safari',
+  'SMART.OPEN_ACTIONS.ACTION.OPEN_HOME_BROWSER': 'открыть главную страницу в браузере'
+};

package/OpenActions/polyglot/types.d.ts

@@ -0,0 +1,18 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type OpenActionsMessages = {
+    'SMART.OPEN_ACTIONS.INFO_BLOCK': {
+        device: string;
+        action: string;
+    };
+    'SMART.OPEN_ACTIONS.DEVICE.MOBILE': NoParams;
+    'SMART.OPEN_ACTIONS.DEVICE.WEB': NoParams;
+    'SMART.OPEN_ACTIONS.DEVICE.SAFARI': NoParams;
+    'SMART.OPEN_ACTIONS.DEVICE.OTHER_PLATFORMS': NoParams;
+    'SMART.OPEN_ACTIONS.ACTION.OPEN_INAPP': NoParams;
+    'SMART.OPEN_ACTIONS.ACTION.FOLLOW_DEEPLINK': NoParams;
+    'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_BROWSER': NoParams;
+    'SMART.OPEN_ACTIONS.ACTION.DEEP_LINK': NoParams;
+    'SMART.OPEN_ACTIONS.ACTION.OPEN_HOME_APP': NoParams;
+    'SMART.OPEN_ACTIONS.ACTION.OPEN_URL_SAFARI': NoParams;
+    'SMART.OPEN_ACTIONS.ACTION.OPEN_HOME_BROWSER': NoParams;
+};

package/OpenActions/polyglot/types.js

@@ -0,0 +1 @@
+export {};

package/PlatformsConfigurationDrawer/PlatformsConfigurationDrawer.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Drawer, DrawerBody } from '@pushwoosh/dumb-components';
 import { DesktopPage } from './components/DesktopPage';
 import { MainPage } from './components/MainPage';
@@ -19,22 +20,25 @@ export function PlatformsConfigurationDrawer(props) {
     setIsOpenDesktopPage(false);
     onClose();
   };
-  return React.createElement(Drawer, {
+  return _jsx(Drawer, {
     size: "medium",
     isOpen: isOpen,
-    onClose: onClose
-  }, React.createElement(DrawerBody, null, isOpenMobilePage && React.createElement(MobilePage, {
-    application: application,
-    onBack: toggleMobilePage,
-    onClose: onCloseHandler
-  }), isOpenDesktopPage && React.createElement(DesktopPage, {
-    application: application,
-    onBack: toggleDesktopPage,
-    onClose: onCloseHandler
-  }), !isOpenDesktopPage && !isOpenMobilePage && React.createElement(MainPage, {
-    application: application,
-    onClickMobile: toggleMobilePage,
-    onClickDesktop: toggleDesktopPage,
-    onClose: onCloseHandler
-  })));
+    onClose: onClose,
+    children: _jsxs(DrawerBody, {
+      children: [isOpenMobilePage && _jsx(MobilePage, {
+        application: application,
+        onBack: toggleMobilePage,
+        onClose: onCloseHandler
+      }), isOpenDesktopPage && _jsx(DesktopPage, {
+        application: application,
+        onBack: toggleDesktopPage,
+        onClose: onCloseHandler
+      }), !isOpenDesktopPage && !isOpenMobilePage && _jsx(MainPage, {
+        application: application,
+        onClickMobile: toggleMobilePage,
+        onClickDesktop: toggleDesktopPage,
+        onClose: onCloseHandler
+      })]
+    })
+  });
 }

package/PlatformsConfigurationDrawer/components/DesktopPage/DesktopPage.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '@pushwoosh/dumb-components';
 import { Color, AllPlatforms } from '@pushwoosh/kit-constants';
 import { Vertical, Columns } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon, CloseIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
 import { H2, H4, Text } from '@pushwoosh/kit-typography';
+import { useLang } from '../../polyglot';
 import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styled';
 export function DesktopPage(props) {
   const {
@@ -11,62 +12,118 @@ export function DesktopPage(props) {
     onBack,
     onClose
   } = props;
+  const lang = useLang();
   const hasWindowsPlatform = Object.hasOwn((application === null || application === void 0 ? void 0 : application.platforms) || {}, AllPlatforms.Windows);
   const hasMacOSPlatform = Object.hasOwn((application === null || application === void 0 ? void 0 : application.platforms) || {}, AllPlatforms.OSX);
-  return React.createElement(React.Fragment, null, React.createElement(Header, null, React.createElement(ColumnsWrapper, null, React.createElement(Columns, {
-    "$sizes": "auto 1fr auto",
-    "$alignItems": "center",
-    "$gap": 6
-  }, React.createElement(Button, {
-    color: "primary",
-    view: "ghost",
-    onClick: onBack
-  }, React.createElement(ArrowRoundIcon, {
-    direction: "left",
-    size: "medium",
-    view: "filled"
-  })), React.createElement(H2, null, "Platform for desktop app"), React.createElement(Close, null, React.createElement(Button, {
-    view: "ghost",
-    color: "secondary",
-    icon: React.createElement(CloseIcon, {
-      size: "medium"
-    }),
-    onClick: onClose
-  }))), React.createElement(BreadCrumbs, null, React.createElement(Text, {
-    "$color": Color.LOCKED
-  }, "Channel"), React.createElement(Text, {
-    "$color": Color.LOCKED
-  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
-    "$color": Color.LOCKED
-  }, "Platform"), React.createElement(Text, {
-    "$color": Color.PHANTOM
-  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
-    "$color": Color.PHANTOM
-  }, "Gateway"), React.createElement(Text, {
-    "$color": Color.PHANTOM
-  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
-    "$color": Color.PHANTOM
-  }, "SDK"), React.createElement(Text, {
-    "$color": Color.PHANTOM
-  }, "\u00A0\u203A\u00A0"), React.createElement(Text, {
-    "$color": Color.PHANTOM
-  }, "Test message")))), React.createElement(Vertical, {
-    "$padding": "12px 0 0",
-    "$gap": 8
-  }, React.createElement(H4, null, "Which platform will we configure first?"), React.createElement(Columns, {
-    "$sizes": "1fr 1fr",
-    "$gap": 6
-  }, hasWindowsPlatform && React.createElement(Card, {
-    as: "a",
-    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure`
-  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
-    type: "windows",
-    size: "medium"
-  })), React.createElement(H4, null, "Windows")), hasMacOSPlatform && React.createElement(Card, {
-    as: "a",
-    href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/osx`
-  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
-    type: "macos",
-    size: "medium"
-  })), React.createElement(H4, null, "MacOS")))));
+  return _jsxs(_Fragment, {
+    children: [_jsx(Header, {
+      children: _jsxs(ColumnsWrapper, {
+        children: [_jsxs(Columns, {
+          "$sizes": "auto 1fr auto",
+          "$alignItems": "center",
+          "$gap": 6,
+          children: [_jsx(Button, {
+            color: "primary",
+            view: "ghost",
+            onClick: onBack,
+            children: _jsx(ArrowRoundIcon, {
+              direction: "left",
+              size: "medium",
+              view: "filled"
+            })
+          }), _jsx(H2, {
+            children: lang({
+              message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.DESKTOP.HEADING'
+            })
+          }), _jsx(Close, {
+            children: _jsx(Button, {
+              view: "ghost",
+              color: "secondary",
+              icon: _jsx(CloseIcon, {
+                size: "medium"
+              }),
+              onClick: onClose
+            })
+          })]
+        }), _jsxs(BreadCrumbs, {
+          children: [_jsx(Text, {
+            "$color": Color.LOCKED,
+            children: lang({
+              message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.BREADCRUMB.CHANNEL'
+            })
+          }), _jsx(Text, {
+            "$color": Color.LOCKED,
+            children: "\u00A0\u203A\u00A0"
+          }), _jsx(Text, {
+            "$color": Color.LOCKED,
+            children: lang({
+              message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.BREADCRUMB.PLATFORM'
+            })
+          }), _jsx(Text, {
+            "$color": Color.PHANTOM,
+            children: "\u00A0\u203A\u00A0"
+          }), _jsx(Text, {
+            "$color": Color.PHANTOM,
+            children: lang({
+              message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.BREADCRUMB.GATEWAY'
+            })
+          }), _jsx(Text, {
+            "$color": Color.PHANTOM,
+            children: "\u00A0\u203A\u00A0"
+          }), _jsx(Text, {
+            "$color": Color.PHANTOM,
+            children: lang({
+              message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.BREADCRUMB.SDK'
+            })
+          }), _jsx(Text, {
+            "$color": Color.PHANTOM,
+            children: "\u00A0\u203A\u00A0"
+          }), _jsx(Text, {
+            "$color": Color.PHANTOM,
+            children: lang({
+              message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.BREADCRUMB.TEST_MESSAGE'
+            })
+          })]
+        })]
+      })
+    }), _jsxs(Vertical, {
+      "$padding": "12px 0 0",
+      "$gap": 8,
+      children: [_jsx(H4, {
+        children: lang({
+          message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.PLATFORM_QUESTION'
+        })
+      }), _jsxs(Columns, {
+        "$sizes": "1fr 1fr",
+        "$gap": 6,
+        children: [hasWindowsPlatform && _jsxs(Card, {
+          as: "a",
+          href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure`,
+          children: [_jsx(CardIcon, {
+            children: _jsx(PlatformLogoIcon, {
+              type: "windows",
+              size: "medium"
+            })
+          }), _jsx(H4, {
+            children: lang({
+              message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.WINDOWS'
+            })
+          })]
+        }), hasMacOSPlatform && _jsxs(Card, {
+          as: "a",
+          href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/osx`,
+          children: [_jsx(CardIcon, {
+            children: _jsx(PlatformLogoIcon, {
+              type: "macos",
+              size: "medium"
+            })
+          }), _jsx(H4, {
+            children: lang({
+              message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.MACOS'
+            })
+          })]
+        })]
+      })]
+    })]
+  });
 }