@pushwoosh/smart-components-kit 1.1.7 → 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/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.7"
+  "version": "1.1.8"
 }