@pushwoosh/smart-components-kit 1.1.6 → 1.1.8

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.d.ts

@@ -1,9 +1,11 @@
 import { type FC, type PropsWithChildren } from 'react';
 import { type DynamicContent } from '@pushwoosh/dumb-components/RichMessageEditor/slate/types';
+import type { SystemVariable } from './types';
 type SimpleDynamicContentPickerFormSmartProps = {
     dc?: DynamicContent;
     onChange: (dc: DynamicContent) => void;
     update?: () => void;
+    systemVariables?: SystemVariable[];
 };
 export declare const SimpleDynamicContentPickerFormSmart: FC<PropsWithChildren<SimpleDynamicContentPickerFormSmartProps>>;
 export {};

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.js

@@ -5,6 +5,7 @@ import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { useDynamicContentTags } from './hooks';
 import { useLang } from './polyglot';
 import { SimpleTagPickerDiv } from './styled';
+import { buildOptions } from './utils';
 const defaultDynamicContent = {
   tagName: '',
   modifier: 'regular',
@@ -14,6 +15,7 @@ export const SimpleDynamicContentPickerFormSmart = ({
   dc = defaultDynamicContent,
   onChange,
   update,
+  systemVariables,
   children
 }) => {
   const lang = useLang();
@@ -34,9 +36,10 @@ export const SimpleDynamicContentPickerFormSmart = ({
       })
     });
   }
-  const tags = asyncResult.value || [];
-  const currentTag = tags.find(tag => tag.name === dc.tagName) || {
+  const options = buildOptions(systemVariables ?? [], asyncResult.value || []);
+  const selectedTag = options.find(option => option.name === dc.tagName) || {
     name: '',
+    label: '',
     modifiers: ['regular']
   };
   return _jsxs(SimpleTagPickerDiv, {
@@ -51,18 +54,19 @@ export const SimpleDynamicContentPickerFormSmart = ({
           menuPlacement: "auto",
           value: {
             value: dc.tagName,
-            label: dc.tagName
+            label: selectedTag.name ? selectedTag.label : dc.tagName
           },
           onChange: option => {
+            const picked = options.find(item => item.name === option.value);
             onChange({
               tagName: option.value,
-              modifier: currentTag.modifiers[0],
+              modifier: (picked === null || picked === void 0 ? void 0 : picked.modifiers[0]) ?? 'regular',
               defaultValue: ''
             });
           },
-          options: tags.map(tag => ({
-            value: tag.name,
-            label: tag.name
+          options: options.map(option => ({
+            value: option.name,
+            label: option.label
           }))
         }), _jsx(Select, {
           width: "auto",
@@ -77,11 +81,11 @@ export const SimpleDynamicContentPickerFormSmart = ({
               modifier: option.value
             });
           },
-          options: currentTag.modifiers.map(modifier => ({
+          options: selectedTag.modifiers.map(modifier => ({
             value: modifier,
             label: modifier
           })),
-          isDisabled: !currentTag.name
+          isDisabled: !selectedTag.name
         })]
       })
     }), _jsx(FieldBox, {
@@ -96,7 +100,7 @@ export const SimpleDynamicContentPickerFormSmart = ({
             defaultValue: e.target.value
           });
         },
-        disabled: !currentTag.name
+        disabled: !selectedTag.name
       })
     }), children]
   });

package/DynamicContentPickerForm/index.d.ts

@@ -1,3 +1,3 @@
 export { SimpleDynamicContentPickerFormSmart } from './SimpleDynamicContentPickerFormSmart';
-export type { VariedDynamicContent } from './types';
+export type { VariedDynamicContent, SystemVariable, PickerOption } from './types';
 export * from './hooks';

package/DynamicContentPickerForm/types.d.ts

@@ -2,6 +2,16 @@ import type { Tag } from '@pushwoosh/rpc-v2-http-api-data/tags';
 export type FullTagData = Tag & {
     modifiers: string[];
 };
+export type SystemVariable = {
+    name: string;
+    label?: string;
+    modifiers?: string[];
+};
+export type PickerOption = {
+    name: string;
+    label: string;
+    modifiers: string[];
+};
 export type TagDynamicContent = {
     kind: 'tag';
     dc: {

package/DynamicContentPickerForm/utils.d.ts

@@ -1,2 +1,3 @@
-import { type VariedDynamicContent } from './types';
+import { type FullTagData, type PickerOption, type SystemVariable, type VariedDynamicContent } from './types';
+export declare function buildOptions(systemVariables: SystemVariable[], tags: FullTagData[]): PickerOption[];
 export declare function createDefaultDynamicContent(kind: 'tag' | 'event' | 'customText'): VariedDynamicContent;

package/DynamicContentPickerForm/utils.js

@@ -1,3 +1,17 @@
+export function buildOptions(systemVariables, tags) {
+  const taken = new Set(systemVariables.map(v => v.name));
+  const system = systemVariables.map(v => ({
+    name: v.name,
+    label: v.label ?? v.name,
+    modifiers: v.modifiers ?? ['regular']
+  }));
+  const rest = tags.filter(tag => !taken.has(tag.name)).map(tag => ({
+    name: tag.name,
+    label: tag.name,
+    modifiers: tag.modifiers
+  }));
+  return [...system, ...rest];
+}
 export function createDefaultDynamicContent(kind) {
   switch (kind) {
     case 'tag':

package/LanguagesSelector/LanguagesSelectFormLoader.js

@@ -4,7 +4,7 @@ import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { langCodes } from './constants';
 import { LanguagesSelectForm } from './LanguagesSelectForm';
-import { useGetLangName } from './utils';
+import { canonicalizeLangCode, useGetLangName } from './utils';
 export const LanguagesSelectFormLoader = ({
   application,
   value,
@@ -22,8 +22,8 @@ export const LanguagesSelectFormLoader = ({
       application,
       name: 'Language'
     });
-    const valuesLangCodes = values.map(v => v.value);
-    const allLangCodes = Array.from(new Set([...valuesLangCodes, ...langCodes]).values());
+    const valuesLangCodes = values.map(v => canonicalizeLangCode(v.value));
+    const allLangCodes = Array.from(new Set([...valuesLangCodes, ...langCodes.map(canonicalizeLangCode)]).values());
     return allLangCodes.toSorted((a, b) => {
       return a.localeCompare(b, systemLanguage, {
         sensitivity: 'base'
@@ -33,7 +33,7 @@ export const LanguagesSelectFormLoader = ({
       return {
         code,
         name: getLangName(code),
-        subscribers: ((_values$find = values.find(val => val.value === code)) === null || _values$find === void 0 ? void 0 : _values$find.count) || 0
+        subscribers: ((_values$find = values.find(val => canonicalizeLangCode(val.value) === code)) === null || _values$find === void 0 ? void 0 : _values$find.count) || 0
       };
     });
   }, [application, getLangName, systemLanguage]);

package/LanguagesSelector/utils.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Normalizes a language code to its canonical form (e.g. `zh-hant` -> `zh-Hant`).
+ * Canonicalization (rather than lowercasing) keeps codes in the same form that
+ * devices are tagged with on the backend, so subscriber counts match and
+ * targeting hits real devices. Falls back to the raw code on invalid input.
+ */
+export declare function canonicalizeLangCode(code: string): string;
 export declare function fetchLastSelection(): string[];
 export declare function saveLastSelection(languages: string[]): void;
 export declare function useGetLangName(displayLang: string): (l: string) => string;

package/LanguagesSelector/utils.js

@@ -1,5 +1,19 @@
 import { useState } from 'react';
+import { languages } from '@pushwoosh/kit-constants';
 import { LAST_SELECTION_KEY } from './constants';
+/**
+ * Normalizes a language code to its canonical form (e.g. `zh-hant` -> `zh-Hant`).
+ * Canonicalization (rather than lowercasing) keeps codes in the same form that
+ * devices are tagged with on the backend, so subscriber counts match and
+ * targeting hits real devices. Falls back to the raw code on invalid input.
+ */
+export function canonicalizeLangCode(code) {
+  try {
+    return Intl.getCanonicalLocales(code)[0] ?? code;
+  } catch {
+    return code;
+  }
+}
 export function fetchLastSelection() {
   var _localStorage$getItem;
   return ((_localStorage$getItem = localStorage.getItem(LAST_SELECTION_KEY)) === null || _localStorage$getItem === void 0 ? void 0 : _localStorage$getItem.split(',')) || [];
@@ -18,11 +32,17 @@ export function useGetLangName(displayLang) {
         return 'Default language';
       }
       try {
-        return idn.of(lang) || lang;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      } catch (_error) {
-        return lang;
+        const name = idn.of(lang);
+        // Browser ICU is often trimmed and returns the code itself for rare
+        // languages (ve/vo/za, ...). Treat that as "no name" and fall through.
+        if (name && name !== lang) {
+          return name;
+        }
+      } catch {
+        // ignore — fall back to the static dictionary below
       }
+      // Static ISO-639 dictionary is complete, so rare codes still get a name.
+      return languages[lang.toLowerCase()] ?? lang;
     };
   });
   return getLangName;

package/RichMessageEditorSmart/NewDynamicContentForm.d.ts

@@ -1,8 +1,10 @@
 import { type FC } from 'react';
 import { type DynamicContent } from '@pushwoosh/dumb-components/RichMessageEditor/slate/types';
+import { type SystemVariable } from '../DynamicContentPickerForm';
 type NewDynamicContentFormProps = {
     update?: () => void;
     onSubmit: (dc: DynamicContent) => void;
+    systemVariables?: SystemVariable[];
 };
 export declare const NewDynamicContentForm: FC<NewDynamicContentFormProps>;
 export {};

package/RichMessageEditorSmart/NewDynamicContentForm.js

@@ -2,11 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
-import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
 import { useLang } from './polyglot';
+import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
 export const NewDynamicContentForm = ({
   update,
-  onSubmit
+  onSubmit,
+  systemVariables
 }) => {
   const [dc, setDc] = useState();
   const lang = useLang();
@@ -14,6 +15,7 @@ export const NewDynamicContentForm = ({
     dc: dc,
     onChange: setDc,
     update: update,
+    systemVariables: systemVariables,
     children: _jsx(Horizontal, {
       "$justifyContent": "end",
       children: _jsx(Button, {

package/RichMessageEditorSmart/RichMessageEditorSmart.d.ts

@@ -1,5 +1,8 @@
 import { type FC } from 'react';
 import { type RichMessageEditorProps } from '@pushwoosh/dumb-components/RichMessageEditor/RichMessageEditor.types';
-type RichMessageEditorSmartProps = Omit<RichMessageEditorProps, 'renderDynamicContent'>;
+import { type SystemVariable } from '../DynamicContentPickerForm';
+type RichMessageEditorSmartProps = Omit<RichMessageEditorProps, 'renderDynamicContent'> & {
+    systemVariables?: SystemVariable[];
+};
 export declare const RichMessageEditorSmart: FC<RichMessageEditorSmartProps>;
 export {};

package/RichMessageEditorSmart/RichMessageEditorSmart.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RichMessageEditor } from '@pushwoosh/dumb-components';
-import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
 import { NewDynamicContentForm } from './NewDynamicContentForm';
-export const RichMessageEditorSmart = props => {
+import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
+export const RichMessageEditorSmart = ({
+  systemVariables,
+  ...props
+}) => {
   return _jsx(RichMessageEditor, {
     ...props,
     renderDynamicContent: ({
@@ -12,10 +15,12 @@ export const RichMessageEditorSmart = props => {
     }) => dc ? _jsx(SimpleDynamicContentPickerFormSmart, {
       dc: dc,
       onChange: onChange,
-      update: update
+      update: update,
+      systemVariables: systemVariables
     }) : _jsx(NewDynamicContentForm, {
       update: update,
-      onSubmit: onChange
+      onSubmit: onChange,
+      systemVariables: systemVariables
     })
   });
 };

package/package.json

@@ -48,5 +48,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.1.6"
+  "version": "1.1.8"
 }