@pushwoosh/smart-components-kit 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,16 +1,63 @@
1
+ import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
1
2
  export declare const TagPickerDiv: import("styled-components").StyledComponent<"div", any, {
2
3
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
3
4
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
4
- $gap?: string | number | undefined;
5
+ $bgColor?: string | undefined;
6
+ $border?: string | ({
7
+ top?: string | undefined;
8
+ right?: string | undefined;
9
+ bottom?: string | undefined;
10
+ left?: string | undefined;
11
+ } | {
12
+ horizontal: string;
13
+ top?: string | undefined;
14
+ bottom?: string | undefined;
15
+ } | {
16
+ vertical: string;
17
+ right?: string | undefined;
18
+ left?: string | undefined;
19
+ }) | undefined;
20
+ $borderRadius?: (string | number) | undefined;
21
+ $boxShadow?: string | undefined;
22
+ $gap?: (string | number) | undefined;
5
23
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
6
24
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
7
25
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
8
- $margin?: string | number | undefined;
9
- $padding?: string | number | undefined;
26
+ $margin?: (string | number) | ({
27
+ top?: (string | number) | undefined;
28
+ right?: (string | number) | undefined;
29
+ bottom?: (string | number) | undefined;
30
+ left?: (string | number) | undefined;
31
+ } | {
32
+ horizontal: string | number;
33
+ top?: (string | number) | undefined;
34
+ bottom?: (string | number) | undefined;
35
+ } | {
36
+ vertical: string | number;
37
+ right?: (string | number) | undefined;
38
+ left?: (string | number) | undefined;
39
+ }) | undefined;
40
+ $padding?: (string | number) | ({
41
+ top?: (string | number) | undefined;
42
+ right?: (string | number) | undefined;
43
+ bottom?: (string | number) | undefined;
44
+ left?: (string | number) | undefined;
45
+ } | {
46
+ horizontal: string | number;
47
+ top?: (string | number) | undefined;
48
+ bottom?: (string | number) | undefined;
49
+ } | {
50
+ vertical: string | number;
51
+ right?: (string | number) | undefined;
52
+ left?: (string | number) | undefined;
53
+ }) | undefined;
10
54
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
11
55
  } & {
12
56
  $gridAutoFlow: string;
13
57
  } & {
14
58
  $gap: number;
15
59
  $padding: number;
16
- }, "$gridAutoFlow" | "$gap" | "$padding">;
60
+ $borderRadius: ShapeRadius;
61
+ $bgColor: Color;
62
+ $boxShadow: Shadow;
63
+ }, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$boxShadow" | "$gap" | "$padding">;
@@ -4,8 +4,11 @@ import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
4
4
  import { Vertical } from '@pushwoosh/kit-helpers';
5
5
  export const TagPickerDiv = styled(Vertical).attrs({
6
6
  $gap: 16,
7
- $padding: 16
7
+ $padding: 16,
8
+ $borderRadius: ShapeRadius.CONTROL,
9
+ $bgColor: Color.FROZEN,
10
+ $boxShadow: Shadow.REGULAR
8
11
  }).withConfig({
9
12
  displayName: "TagPickerDiv",
10
13
  componentId: "sc-1blii2o-0"
11
- })(["width:240px;border-radius:", ";background:", ";box-shadow:", ";", "{width:100%;}"], ShapeRadius.CONTROL, Color.FROZEN, Shadow.REGULAR, NativeSelect);
14
+ })(["width:240px;", "{width:100%;}"], NativeSelect);
@@ -0,0 +1,9 @@
1
+ import { type FC } from 'react';
2
+ type LanguagesModalProps = {
3
+ applicationCode: string;
4
+ initialLanguages: string[];
5
+ onSubmit: (languages: string[]) => void;
6
+ onClose: () => void;
7
+ };
8
+ export declare const LanguagesModal: FC<LanguagesModalProps>;
9
+ export {};
@@ -0,0 +1,30 @@
1
+ import React, { useState } from 'react';
2
+ import { Button, ModalHeader, ModalBody, ModalFooter, ModalTitle } from '@pushwoosh/dumb-components';
3
+ import { Horizontal } from '@pushwoosh/kit-helpers';
4
+ import { LanguagesSelectFormLoader } from './LanguagesSelectFormLoader';
5
+ import { saveLastSelection } from './utils';
6
+ export const LanguagesModal = ({
7
+ applicationCode,
8
+ initialLanguages,
9
+ onSubmit,
10
+ onClose
11
+ }) => {
12
+ const [selectedLanguages, setSelectedLanguages] = useState(initialLanguages);
13
+ return React.createElement(React.Fragment, null, React.createElement(ModalHeader, null, React.createElement(ModalTitle, null, "Select languages")), React.createElement(ModalBody, null, React.createElement(LanguagesSelectFormLoader, {
14
+ application: applicationCode,
15
+ onChange: setSelectedLanguages,
16
+ value: selectedLanguages
17
+ })), React.createElement(ModalFooter, null, React.createElement(Horizontal, {
18
+ "$justifyContent": "end",
19
+ "$gap": 8
20
+ }, React.createElement(Button, {
21
+ color: "secondary",
22
+ onClick: onClose
23
+ }, "Cancel"), React.createElement(Button, {
24
+ color: "primary",
25
+ onClick: () => {
26
+ saveLastSelection(selectedLanguages);
27
+ onSubmit(selectedLanguages);
28
+ }
29
+ }, "Apply"))));
30
+ };
@@ -0,0 +1,14 @@
1
+ import { type FC } from 'react';
2
+ type LanguageItem = {
3
+ code: string;
4
+ name: string;
5
+ subscribers: number;
6
+ };
7
+ type LanguagesSelectProps = {
8
+ allLanguageItems: LanguageItem[];
9
+ langs: string[];
10
+ onChange: (languages: string[]) => void;
11
+ systemLanguage?: string;
12
+ };
13
+ export declare const LanguagesSelectForm: FC<LanguagesSelectProps>;
14
+ export {};
@@ -0,0 +1,69 @@
1
+ import React, { useMemo, useState } from 'react';
2
+ import { Checkbox, NativeInput } from '@pushwoosh/dumb-components';
3
+ import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
4
+ import { ActionButton } from './styled';
5
+ import { fetchLastSelection, useGetLangName } from './utils';
6
+ export const LanguagesSelectForm = ({
7
+ allLanguageItems,
8
+ langs,
9
+ onChange,
10
+ systemLanguage = 'en'
11
+ }) => {
12
+ const getLangName = useGetLangName(systemLanguage);
13
+ const [lastSelection] = useState(fetchLastSelection);
14
+ const [search, setSearch] = useState('');
15
+ const [showAllLanguages, setShowAllLanguages] = useState(false);
16
+ const filteredLanguages = useMemo(() => {
17
+ const languageItems = showAllLanguages ? allLanguageItems : allLanguageItems.filter(lang => lang.subscribers > 0);
18
+ if (!search) {
19
+ return languageItems;
20
+ }
21
+ return languageItems.filter(lang => {
22
+ return lang.name.toLowerCase().includes(search.toLowerCase());
23
+ });
24
+ }, [allLanguageItems, search, showAllLanguages]);
25
+ return React.createElement(Vertical, {
26
+ "$gap": 8
27
+ }, React.createElement(NativeInput, {
28
+ value: search,
29
+ onChange: e => setSearch(e.target.value),
30
+ placeholder: "Search languages..."
31
+ }), React.createElement(Horizontal, {
32
+ "$justifyContent": "space-between"
33
+ }, React.createElement(Horizontal, {
34
+ "$gap": 16,
35
+ "$justifyContent": "start"
36
+ }, React.createElement(ActionButton, {
37
+ onClick: () => {
38
+ onChange(filteredLanguages.map(lang => lang.code));
39
+ }
40
+ }, "select all"), React.createElement(ActionButton, {
41
+ onClick: () => {
42
+ onChange([]);
43
+ }
44
+ }, "deselect all")), lastSelection.length > 0 && React.createElement(ActionButton, {
45
+ onClick: () => {
46
+ onChange(lastSelection);
47
+ }
48
+ }, "reuse last selection")), React.createElement(Vertical, {
49
+ "$gap": 24
50
+ }, React.createElement(Columns, {
51
+ "$sizes": 3,
52
+ "$gap": 8
53
+ }, filteredLanguages.map(lang => React.createElement(Checkbox, {
54
+ name: "languages",
55
+ value: lang.code,
56
+ isChecked: langs.includes(lang.code),
57
+ onChange: isChecked => {
58
+ if (isChecked) {
59
+ onChange([...langs, lang.code]);
60
+ } else {
61
+ onChange(langs.filter(code => code !== lang.code));
62
+ }
63
+ },
64
+ label: `${getLangName(lang.code)} (${lang.subscribers})`,
65
+ key: lang.code
66
+ }))), React.createElement("div", null, React.createElement(ActionButton, {
67
+ onClick: () => setShowAllLanguages(x => !x)
68
+ }, showAllLanguages ? 'Show only languages with subscribers' : 'Show all languages'))));
69
+ };
@@ -0,0 +1,9 @@
1
+ import { type FC } from 'react';
2
+ type LanguagesSelectFormLoaderProps = {
3
+ application: string;
4
+ value: string[];
5
+ onChange: (languages: string[]) => void;
6
+ systemLanguage?: string;
7
+ };
8
+ export declare const LanguagesSelectFormLoader: FC<LanguagesSelectFormLoaderProps>;
9
+ export {};
@@ -0,0 +1,54 @@
1
+ import React from 'react';
2
+ import { Spinner } from '@pushwoosh/dumb-components';
3
+ import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
4
+ import { langCodes } from './constants';
5
+ import { LanguagesSelectForm } from './LanguagesSelectForm';
6
+ import { useGetLangName } from './utils';
7
+ import { useSPAContext } from '../context';
8
+ export const LanguagesSelectFormLoader = ({
9
+ application,
10
+ value,
11
+ onChange,
12
+ systemLanguage = 'en'
13
+ }) => {
14
+ const getLangName = useGetLangName(systemLanguage);
15
+ const {
16
+ rpcGateway
17
+ } = useSPAContext();
18
+ const langAsync = useAsync(async () => {
19
+ const {
20
+ values
21
+ } = await rpcGateway.tags.GetTagValues({
22
+ application,
23
+ name: 'Language'
24
+ });
25
+ const valuesLangCodes = values.map(v => v.value);
26
+ const allLangCodes = new Set([...valuesLangCodes, ...langCodes]).values().toArray();
27
+ return allLangCodes.toSorted((a, b) => {
28
+ return a.localeCompare(b, systemLanguage, {
29
+ sensitivity: 'base'
30
+ });
31
+ }).map(code => {
32
+ var _values$find;
33
+ return {
34
+ code,
35
+ name: getLangName(code),
36
+ subscribers: ((_values$find = values.find(val => val.value === code)) === null || _values$find === void 0 ? void 0 : _values$find.count) || 0
37
+ };
38
+ });
39
+ }, [application, getLangName, systemLanguage]);
40
+ if (langAsync.loading) {
41
+ return React.createElement(Horizontal, {
42
+ "$placeItems": "center",
43
+ "$padding": 36
44
+ }, React.createElement(Spinner, {
45
+ size: "medium"
46
+ }));
47
+ }
48
+ return React.createElement(LanguagesSelectForm, {
49
+ allLanguageItems: langAsync.value,
50
+ langs: value,
51
+ onChange: onChange,
52
+ systemLanguage: systemLanguage
53
+ });
54
+ };
@@ -0,0 +1,11 @@
1
+ import { type FC } from 'react';
2
+ type SelectLanguageProps = {
3
+ applicationCode: string;
4
+ value: string;
5
+ languages: string[];
6
+ isDisabled?: boolean;
7
+ onChange: (language: string) => void;
8
+ onChangeLanguages: (languages: string[]) => void;
9
+ };
10
+ export declare const LanguagesSelector: FC<SelectLanguageProps>;
11
+ export {};
@@ -0,0 +1,102 @@
1
+ import React, { useMemo, useState } from 'react';
2
+ import { Button, Modal, DropdownMenu, DropdownMenuItem, DropdownMenuSection } from '@pushwoosh/dumb-components';
3
+ import { Horizontal } from '@pushwoosh/kit-helpers';
4
+ import { ArrowIcon, ChevronIcon, LanguageIcon, PlusIcon } from '@pushwoosh/kit-icons';
5
+ import { LanguagesModal } from './LanguagesModal';
6
+ import { ButtonGroup } from './styled';
7
+ import { useGetLangName } from './utils';
8
+ export const LanguagesSelector = ({
9
+ applicationCode,
10
+ value,
11
+ languages,
12
+ isDisabled,
13
+ onChange,
14
+ onChangeLanguages
15
+ }) => {
16
+ const [showLanguagesModal, setShowLanguagesModal] = useState(false);
17
+ const getLangName = useGetLangName('en');
18
+ const sortedLanguages = useMemo(() => {
19
+ const sorted = languages.filter(lang => lang !== 'default').sort((a, b) => getLangName(a).localeCompare(getLangName(b), 'en', {
20
+ sensitivity: 'base'
21
+ }));
22
+ return ['default', ...sorted];
23
+ }, [getLangName, languages]);
24
+ return React.createElement(Horizontal, {
25
+ "$gap": 8
26
+ }, React.createElement(DropdownMenu, {
27
+ isScrollable: true,
28
+ renderHandler: handlerProps => React.createElement(Button, {
29
+ style: {
30
+ minWidth: 200
31
+ },
32
+ color: "secondary",
33
+ icon: React.createElement(LanguageIcon, {
34
+ size: "medium",
35
+ view: "lined"
36
+ }),
37
+ rightIcon: React.createElement(ChevronIcon, {
38
+ size: "medium",
39
+ direction: "down"
40
+ }),
41
+ onClick: handlerProps.onClick,
42
+ boxRef: handlerProps.ref,
43
+ isOpen: handlerProps.isOpen,
44
+ isDisabled: isDisabled
45
+ }, getLangName(value))
46
+ }, () => React.createElement(React.Fragment, null, React.createElement(DropdownMenuSection, null, React.createElement(DropdownMenuItem, {
47
+ onClick: () => setShowLanguagesModal(true)
48
+ }, "Choose languages\u2026")), React.createElement(DropdownMenuSection, null, sortedLanguages.map(lang => React.createElement(DropdownMenuItem, {
49
+ key: lang,
50
+ isActive: lang === value,
51
+ onClick: () => onChange(lang)
52
+ }, getLangName(lang)))))), sortedLanguages.length > 1 && React.createElement(ButtonGroup, null, React.createElement(Button, {
53
+ color: "secondary",
54
+ isDisabled: isDisabled,
55
+ icon: React.createElement(ArrowIcon, {
56
+ size: "medium",
57
+ direction: "left"
58
+ }),
59
+ onClick: () => {
60
+ const index = sortedLanguages.indexOf(value);
61
+ if (index > 0) {
62
+ onChange(sortedLanguages[index - 1]);
63
+ } else {
64
+ onChange(sortedLanguages[sortedLanguages.length - 1]);
65
+ }
66
+ }
67
+ }), React.createElement(Button, {
68
+ color: "secondary",
69
+ isDisabled: isDisabled,
70
+ icon: React.createElement(ArrowIcon, {
71
+ size: "medium",
72
+ direction: "right"
73
+ }),
74
+ onClick: () => {
75
+ const index = sortedLanguages.indexOf(value);
76
+ if (index < sortedLanguages.length - 1) {
77
+ onChange(sortedLanguages[index + 1]);
78
+ } else {
79
+ onChange(sortedLanguages[0]);
80
+ }
81
+ }
82
+ })), sortedLanguages.length <= 1 && React.createElement(Button, {
83
+ color: "secondary",
84
+ icon: React.createElement(PlusIcon, {
85
+ size: "medium"
86
+ }),
87
+ onClick: () => setShowLanguagesModal(true)
88
+ }), React.createElement(Modal, {
89
+ size: "medium",
90
+ isOpen: showLanguagesModal
91
+ }, React.createElement(LanguagesModal, {
92
+ applicationCode: applicationCode,
93
+ initialLanguages: languages,
94
+ onSubmit: langs => {
95
+ onChangeLanguages(langs);
96
+ setShowLanguagesModal(false);
97
+ },
98
+ onClose: () => {
99
+ setShowLanguagesModal(false);
100
+ }
101
+ })));
102
+ };
@@ -0,0 +1,2 @@
1
+ export declare const LAST_SELECTION_KEY = "PW_PUSH_EDITOR_LAST_SELECTION";
2
+ export declare const langCodes: string[];
@@ -0,0 +1,2 @@
1
+ export const LAST_SELECTION_KEY = 'PW_PUSH_EDITOR_LAST_SELECTION';
2
+ export const langCodes = ['aa', 'ab', 'ae', 'af', 'ak', 'am', 'an', 'ar', 'as', 'av', 'ay', 'az', 'ba', 'be', 'bg', 'bh', 'bi', 'bm', 'bn', 'bo', 'br', 'bs', 'ca', 'ce', 'ch', 'co', 'cr', 'cs', 'cu', 'cv', 'cy', 'da', 'de', 'dv', 'dz', 'ee', 'el', 'en', 'eo', 'es', 'et', 'eu', 'fa', 'ff', 'fi', 'fj', 'fo', 'fr', 'fy', 'ga', 'gd', 'gl', 'gn', 'gu', 'gv', 'ha', 'he', 'hi', 'ho', 'hr', 'ht', 'hu', 'hy', 'hz', 'ia', 'id', 'ie', 'ig', 'ii', 'ik', 'io', 'is', 'it', 'iu', 'ja', 'jv', 'ka', 'kg', 'ki', 'kj', 'kk', 'kl', 'km', 'kn', 'ko', 'kr', 'ks', 'ku', 'kv', 'kw', 'ky', 'la', 'lb', 'lg', 'li', 'ln', 'lo', 'lt', 'lu', 'lv', 'mg', 'mh', 'mi', 'mk', 'ml', 'mn', 'mr', 'ms', 'mt', 'my', 'na', 'nb', 'nd', 'ne', 'ng', 'nl', 'nn', 'no', 'nr', 'nv', 'ny', 'oc', 'oj', 'om', 'or', 'os', 'pa', 'pi', 'pl', 'ps', 'pt', 'qu', 'rm', 'rn', 'ro', 'ru', 'rw', 'sa', 'sc', 'sd', 'se', 'sg', 'si', 'sk', 'sl', 'sm', 'sn', 'so', 'sq', 'sr', 'ss', 'st', 'su', 'sv', 'sw', 'ta', 'te', 'tg', 'th', 'ti', 'tk', 'tl', 'tn', 'to', 'tr', 'ts', 'tt', 'tw', 'ty', 'ug', 'uk', 'ur', 'uz', 've', 'vi', 'vo', 'wa', 'wo', 'xh', 'yi', 'yo', 'za', 'zh', 'zh-hans', 'zh-hant', 'zu'];
@@ -0,0 +1 @@
1
+ export { LanguagesSelector } from './LanguagesSelector';
@@ -0,0 +1 @@
1
+ export { LanguagesSelector } from './LanguagesSelector';
@@ -0,0 +1,57 @@
1
+ export declare const ButtonGroup: import("styled-components").StyledComponent<"div", any, {
2
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
3
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
4
+ $bgColor?: string | undefined;
5
+ $border?: string | ({
6
+ top?: string | undefined;
7
+ right?: string | undefined;
8
+ bottom?: string | undefined;
9
+ left?: string | undefined;
10
+ } | {
11
+ horizontal: string;
12
+ top?: string | undefined;
13
+ bottom?: string | undefined;
14
+ } | {
15
+ vertical: string;
16
+ right?: string | undefined;
17
+ left?: string | undefined;
18
+ }) | undefined;
19
+ $borderRadius?: (string | number) | undefined;
20
+ $boxShadow?: string | undefined;
21
+ $gap?: (string | number) | undefined;
22
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
23
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
24
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
25
+ $margin?: (string | number) | ({
26
+ top?: (string | number) | undefined;
27
+ right?: (string | number) | undefined;
28
+ bottom?: (string | number) | undefined;
29
+ left?: (string | number) | undefined;
30
+ } | {
31
+ horizontal: string | number;
32
+ top?: (string | number) | undefined;
33
+ bottom?: (string | number) | undefined;
34
+ } | {
35
+ vertical: string | number;
36
+ right?: (string | number) | undefined;
37
+ left?: (string | number) | undefined;
38
+ }) | undefined;
39
+ $padding?: (string | number) | ({
40
+ top?: (string | number) | undefined;
41
+ right?: (string | number) | undefined;
42
+ bottom?: (string | number) | undefined;
43
+ left?: (string | number) | undefined;
44
+ } | {
45
+ horizontal: string | number;
46
+ top?: (string | number) | undefined;
47
+ bottom?: (string | number) | undefined;
48
+ } | {
49
+ vertical: string | number;
50
+ right?: (string | number) | undefined;
51
+ left?: (string | number) | undefined;
52
+ }) | undefined;
53
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
54
+ } & {
55
+ $gridAutoFlow: string;
56
+ }, "$gridAutoFlow">;
57
+ export declare const ActionButton: import("styled-components").StyledComponent<"button", any, {}, never>;
@@ -0,0 +1,11 @@
1
+ import styled from 'styled-components';
2
+ import { Color } from '@pushwoosh/kit-constants';
3
+ import { Horizontal } from '@pushwoosh/kit-helpers';
4
+ export const ButtonGroup = styled(Horizontal).withConfig({
5
+ displayName: "ButtonGroup",
6
+ componentId: "sc-1ntyrsv-0"
7
+ })(["& > *:first-child{border-radius:4px 0 0 4px;}& > *:last-child{border-radius:0 4px 4px 0;}& > *:not(:first-child){border-left:none;}"]);
8
+ export const ActionButton = styled.button.withConfig({
9
+ displayName: "ActionButton",
10
+ componentId: "sc-1ntyrsv-1"
11
+ })(["display:grid;grid-auto-flow:column;align-items:center;gap:4px;text-transform:uppercase;color:", ";background-color:transparent;height:16px;padding:0;border:none;font-size:12px;font-style:normal;font-weight:500;line-height:16px;transition:box-shadow 0.5s;cursor:pointer;&:hover{color:", ";}&:active{box-shadow:inset 0 0 0 2em ", ";}"], Color.SOFT, Color.SOFT_HOVER, Color.SOFT_LIGHT);
@@ -0,0 +1,3 @@
1
+ export declare function fetchLastSelection(): string[];
2
+ export declare function saveLastSelection(languages: string[]): void;
3
+ export declare function useGetLangName(displayLang: string): (l: string) => string;
@@ -0,0 +1,29 @@
1
+ import { useState } from 'react';
2
+ import { LAST_SELECTION_KEY } from './constants';
3
+ export function fetchLastSelection() {
4
+ var _localStorage$getItem;
5
+ return ((_localStorage$getItem = localStorage.getItem(LAST_SELECTION_KEY)) === null || _localStorage$getItem === void 0 ? void 0 : _localStorage$getItem.split(',')) || [];
6
+ }
7
+ export function saveLastSelection(languages) {
8
+ const langsForSave = languages.filter(l => l !== 'default').join(',');
9
+ localStorage.setItem(LAST_SELECTION_KEY, langsForSave);
10
+ }
11
+ export function useGetLangName(displayLang) {
12
+ const [getLangName] = useState(() => {
13
+ const idn = new Intl.DisplayNames([displayLang], {
14
+ type: 'language'
15
+ });
16
+ return lang => {
17
+ if (lang === 'default') {
18
+ return 'Default language';
19
+ }
20
+ try {
21
+ return idn.of(lang) || lang;
22
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
23
+ } catch (_error) {
24
+ return lang;
25
+ }
26
+ };
27
+ });
28
+ return getLangName;
29
+ }
@@ -7,10 +7,11 @@ export function PlatformsConfigurationDrawer(props) {
7
7
  const {
8
8
  application,
9
9
  isOpen,
10
- onClose
10
+ onClose,
11
+ subpage
11
12
  } = props;
12
- const [isOpenMobilePage, setIsOpenMobilePage] = useState(false);
13
- const [isOpenDesktopPage, setIsOpenDesktopPage] = useState(false);
13
+ const [isOpenMobilePage, setIsOpenMobilePage] = useState(subpage === 'mobile');
14
+ const [isOpenDesktopPage, setIsOpenDesktopPage] = useState(subpage === 'desktop');
14
15
  const toggleMobilePage = () => setIsOpenMobilePage(prev => !prev);
15
16
  const toggleDesktopPage = () => setIsOpenDesktopPage(prev => !prev);
16
17
  const onCloseHandler = () => {
@@ -67,12 +67,6 @@ export function MobilePage(props) {
67
67
  type: "android",
68
68
  size: "medium"
69
69
  })), React.createElement(H4, null, "Android")), React.createElement(Card, {
70
- as: "a",
71
- href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/xiaomi`
72
- }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
73
- type: "xiaomi",
74
- size: "medium"
75
- })), React.createElement(H4, null, "Xiaomi")), React.createElement(Card, {
76
70
  as: "a",
77
71
  href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/huawei`
78
72
  }, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
@@ -3,4 +3,5 @@ export interface PlatformsConfigurationDrawerProps {
3
3
  application: Application;
4
4
  isOpen: boolean;
5
5
  onClose: () => void;
6
+ subpage?: 'mobile' | 'desktop';
6
7
  }
package/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export * from './EmailTemplatePreview';
2
2
  export * from './context';
3
3
  export * from './DynamicContentPicker';
4
4
  export * from './PlatformsConfigurationDrawer';
5
+ export * from './LanguagesSelector';
package/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './EmailTemplatePreview';
2
2
  export * from './context';
3
3
  export * from './DynamicContentPicker';
4
- export * from './PlatformsConfigurationDrawer';
4
+ export * from './PlatformsConfigurationDrawer';
5
+ export * from './LanguagesSelector';
package/package.json CHANGED
@@ -15,14 +15,14 @@
15
15
  },
16
16
  "pre-commit": "check",
17
17
  "dependencies": {
18
- "@pushwoosh/dumb-components": "^1.0.27",
19
- "@pushwoosh/kit-constants": "^1.6.8",
20
- "@pushwoosh/kit-helpers": "^4.6.1",
18
+ "@pushwoosh/dumb-components": "^1.0.39",
19
+ "@pushwoosh/kit-constants": "^1.6.9",
20
+ "@pushwoosh/kit-helpers": "^4.8.1",
21
21
  "@pushwoosh/kit-icons": "^2.1.1",
22
- "@pushwoosh/kit-typography": "^1.7.2"
22
+ "@pushwoosh/kit-typography": "^1.7.3"
23
23
  },
24
24
  "devDependencies": {
25
- "@pushwoosh/frontend-builder-engine": "^1.0.11",
25
+ "@pushwoosh/frontend-builder-engine": "^1.0.17",
26
26
  "@pushwoosh/grpc-bridge": "^1.5.36",
27
27
  "@pushwoosh/http-client": "^2.4.12",
28
28
  "@pushwoosh/session-store": "^2.5.0",
@@ -34,12 +34,12 @@
34
34
  "react-dom": "^18.3.1",
35
35
  "react-router-dom": "^5.3.4",
36
36
  "styled-components": "^5.3.11",
37
- "typescript": "^5.6.2"
37
+ "typescript": "^5.8.2"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "@pushwoosh/grpc-bridge": "^1.5.36",
41
41
  "@pushwoosh/http-client": "^2.4.12",
42
- "@pushwoosh/rpc-v2-http-api-data": "^0.1.414",
42
+ "@pushwoosh/rpc-v2-http-api-data": "^0.1.466",
43
43
  "@pushwoosh/session-store": "^2.5.0",
44
44
  "react": "^16.14.0 || ^18.0.0",
45
45
  "react-dom": "^16.14.0 || ^18.0.0"
@@ -47,5 +47,5 @@
47
47
  "engines": {
48
48
  "node": ">= 18"
49
49
  },
50
- "version": "1.0.3"
50
+ "version": "1.0.5"
51
51
  }