@pushwoosh/smart-components-kit 1.0.16 → 1.0.18

package/DynamicContentPicker/DynamicContentPicker.d.ts

@@ -1,9 +1,8 @@
-import { type FC, type PropsWithChildren } from 'react';
-import { type DynamicContent } from '@pushwoosh/dumb-components/RichMessageEditor/slate/types';
-type DynamicContentFormProps = {
-    dc?: DynamicContent;
-    onChange: (dc: DynamicContent) => void;
-    update?: () => void;
+import { type FC } from 'react';
+type DynamicContentPickerProps = {
+    applicationCode: string;
+    text: string;
+    title?: string;
 };
-export declare const DynamicContentPicker: FC<PropsWithChildren<DynamicContentFormProps>>;
+export declare const DynamicContentPicker: FC<DynamicContentPickerProps>;
 export {};

package/DynamicContentPicker/DynamicContentPicker.js

@@ -1,88 +1,94 @@
-import React, { useEffect } from 'react';
-import { FieldBox, NativeInput, Select, Spinner } from '@pushwoosh/dumb-components';
-import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
-import { useDynamicContentTags } from './hooks';
-import { TagPickerDiv } from './styled';
-const defaultDynamicContent = {
-  tagName: '',
-  modifier: 'regular',
-  defaultValue: ''
+import { arrow, autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
+import React, { useMemo, useReducer, useRef, useState } from 'react';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { Arrow, FieldPlace, TextPlace } from './styled';
+import { VariedDynamicContentPickerFormSmart } from '../DynamicContentPickerForm/VariedDynamicContentPickerFormSmart';
+import ArrowIcon from './assets/arrow.svg';
+import { placementToDirection } from './helpers';
+import { Line } from './Line';
+const initialState = {};
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'set':
+      return {
+        ...state,
+        [action.key]: action.value
+      };
+    default:
+      return state;
+  }
 };
 export const DynamicContentPicker = ({
-  dc = defaultDynamicContent,
-  onChange,
-  update,
-  children
+  applicationCode,
+  text,
+  title
 }) => {
-  const asyncResult = useDynamicContentTags();
-  useEffect(() => {
-    if (!asyncResult.loading) {
-      update === null || update === void 0 || update();
-    }
-  }, [asyncResult.loading, update]);
-  if (asyncResult.loading) {
-    return React.createElement(TagPickerDiv, null, React.createElement(Horizontal, {
-      "$placeItems": "center",
-      "$padding": 36
-    }, React.createElement(Spinner, {
-      size: "medium"
-    })));
-  }
-  const tags = asyncResult.value || [];
-  const currentTag = tags.find(tag => tag.name === dc.tagName) || {
-    name: '',
-    modifiers: ['regular']
-  };
-  return React.createElement(TagPickerDiv, null, React.createElement(FieldBox, {
-    title: "Tag"
-  }, React.createElement(Vertical, {
-    "$gap": 8
-  }, React.createElement(Select, {
-    width: "auto",
-    menuPlacement: "auto",
-    value: {
-      value: dc.tagName,
-      label: dc.tagName
-    },
-    onChange: option => {
-      onChange({
-        tagName: option.value,
-        modifier: currentTag.modifiers[0],
-        defaultValue: ''
+  var _middlewareData$arrow, _middlewareData$arrow2;
+  const arrowRef = useRef(null);
+  const [activeVar, setActiveVar] = useState();
+  const {
+    refs,
+    floatingStyles,
+    update,
+    middlewareData,
+    placement
+  } = useFloating({
+    strategy: 'fixed',
+    middleware: [offset(8), autoPlacement({
+      allowedPlacements: ['left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']
+    }), arrow({
+      element: arrowRef
+    })]
+  });
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const parsedLines = useMemo(() => {
+    const lines = text.split('\n');
+    return lines.map(line => {
+      return line.split(/\{\{(\d+)}}/g).map((match, index) => {
+        if (index % 2 === 0) {
+          return match;
+        }
+        return {
+          varname: match
+        };
       });
-    },
-    options: tags.map(tag => ({
-      value: tag.name,
-      label: tag.name
-    }))
-  }), React.createElement(Select, {
-    width: "auto",
-    menuPlacement: "auto",
-    value: {
-      value: dc.modifier,
-      label: dc.modifier
-    },
-    onChange: option => {
-      onChange({
-        ...dc,
-        modifier: option.value
-      });
-    },
-    options: currentTag.modifiers.map(modifier => ({
-      value: modifier,
-      label: modifier
-    })),
-    isDisabled: !currentTag.name
-  }))), React.createElement(FieldBox, {
-    title: "Default Tag Value"
-  }, React.createElement(NativeInput, {
-    value: dc.defaultValue,
-    onChange: e => {
-      onChange({
-        ...dc,
-        defaultValue: e.target.value
-      });
-    },
-    disabled: !currentTag.name
-  })), children);
+    });
+  }, [text]);
+  return React.createElement(React.Fragment, null, React.createElement(FieldPlace, {
+    ref: refs.setReference
+  }, React.createElement(Horizontal, {
+    "$padding": "8px 16px"
+  }, React.createElement(Text, {
+    "$variant": "h4"
+  }, title)), React.createElement(Horizontal, {
+    "$padding": "12px 16px"
+  }, React.createElement(TextPlace, null, parsedLines.map((line, index) => React.createElement(Line, {
+    key: index /* eslint-disable-line react/no-array-index-key */,
+    activeVar: activeVar,
+    line: line,
+    state: state,
+    onClickVar: setActiveVar
+  }))))), !!activeVar && React.createElement("div", {
+    ref: refs.setFloating,
+    style: floatingStyles
+  }, React.createElement(VariedDynamicContentPickerFormSmart, {
+    key: activeVar,
+    applicationCode: applicationCode,
+    initialDc: state[activeVar],
+    onChange: newDc => dispatch({
+      type: 'set',
+      key: activeVar,
+      value: newDc
+    }),
+    onClose: () => setActiveVar(undefined),
+    update: update
+  }), React.createElement(Arrow, {
+    "$direction": placementToDirection(placement),
+    ref: arrowRef,
+    style: {
+      left: (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x,
+      top: (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y
+    }
+  }, React.createElement(ArrowIcon, null))));
 };

package/DynamicContentPicker/Line.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import type { VariedDynamicContent } from '../DynamicContentPickerForm/types';
+export declare const Line: FC<{
+    activeVar?: string;
+    line: (string | {
+        varname: string;
+    })[];
+    state: Record<string, VariedDynamicContent>;
+    onClickVar: (key: string) => void;
+}>;

package/DynamicContentPicker/Line.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Chip } from '@pushwoosh/dumb-components';
+import { WarningRoundIcon } from '@pushwoosh/kit-icons';
+import { dc2text } from './helpers';
+export const Line = ({
+  activeVar,
+  line,
+  state,
+  onClickVar
+}) => {
+  return React.createElement("p", null, line.map((item, index) => {
+    if (typeof item === 'string') {
+      // eslint-disable-next-line react/no-array-index-key
+      return React.createElement("span", {
+        key: index
+      }, item);
+    }
+    return React.createElement(Chip, {
+      key: index /* eslint-disable-line react/no-array-index-key */,
+      as: "span",
+      "$variant": state[item.varname] ? 'primary' : 'warning',
+      "$selected": activeVar === item.varname,
+      onClick: () => {
+        onClickVar(item.varname);
+      }
+    }, state[item.varname] ? dc2text(state[item.varname]) : React.createElement(WarningRoundIcon, {
+      size: "small",
+      view: "lined",
+      as: "span",
+      onClick: () => onClickVar(item.varname)
+    }));
+  }));
+};

package/DynamicContentPicker/assets/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" fill="none"><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/></mask><path fill="#F7F9FA" fill-rule="evenodd" d="M0 2a2 2 0 0 1 4 0v1.26a2 2 0 0 0 .598 1.426L8.55 8.574a2 2 0 0 1 0 2.852l-3.953 3.888A2 2 0 0 0 4 16.74V18a2 2 0 1 1-4 0z" clip-rule="evenodd"/><path fill="#DCE1E5" d="m4.598 15.314.7.713zM3 3.26V2h2v1.26zm4.85 6.027L3.896 5.4 5.3 3.973 9.252 7.86zm-3.954 5.314 3.954-3.888 1.402 1.426L5.3 16.027zM3 18v-1.26h2V18zM1 2v16h-2V2zm1 19a3 3 0 0 1-3-3h2a1 1 0 0 0 1 1zm3-3a3 3 0 0 1-3 3v-2a1 1 0 0 0 1-1zm.299-1.973A1 1 0 0 0 5 16.74H3a3 3 0 0 1 .896-2.138L5.3 16.026zm3.953-8.166a3 3 0 0 1 0 4.278L7.85 10.713a1 1 0 0 0 0-1.426zM5 3.26a1 1 0 0 0 .299.713L3.896 5.399A3 3 0 0 1 3 3.259zM2 1a1 1 0 0 0-1 1h-2a3 3 0 0 1 3-3zm0-2a3 3 0 0 1 3 3H3a1 1 0 0 0-1-1z" mask="url(#a)"/><path stroke="#F7F9FA" stroke-width="3" d="M1.5 0v20"/></svg>

package/DynamicContentPicker/helpers.d.ts

@@ -0,0 +1,5 @@
+import type { Placement } from '@floating-ui/react-dom';
+import type { ArrowDirection } from './types';
+import type { VariedDynamicContent } from '../DynamicContentPickerForm/types';
+export declare function placementToDirection(placement: Placement): ArrowDirection;
+export declare function dc2text(dc: VariedDynamicContent): string;

package/DynamicContentPicker/helpers.js

@@ -0,0 +1,24 @@
+export function placementToDirection(placement) {
+  if (placement.startsWith('left')) {
+    return 'right';
+  }
+  if (placement.startsWith('right')) {
+    return 'left';
+  }
+  if (placement.startsWith('top')) {
+    return 'bottom';
+  }
+  return 'top';
+}
+export function dc2text(dc) {
+  if (dc.kind === 'tag') {
+    return dc.dc.tagName;
+  }
+  if (dc.kind === 'event') {
+    return dc.dc.attribute;
+  }
+  if (dc.kind === 'customText') {
+    return dc.dc.text;
+  }
+  return '🤷';
+}

package/DynamicContentPicker/index.d.ts

@@ -1,2 +1 @@
 export { DynamicContentPicker } from './DynamicContentPicker';
-export * from './hooks';

package/DynamicContentPicker/index.js

@@ -1,2 +1 @@
-export { DynamicContentPicker } from './DynamicContentPicker';
-export * from './hooks';
+export { DynamicContentPicker } from './DynamicContentPicker';

package/DynamicContentPicker/styled.d.ts

@@ -1,5 +1,5 @@
-import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
-export declare const TagPickerDiv: import("styled-components").StyledComponent<"div", any, {
+import { type ArrowDirection } from './types';
+export declare const FieldPlace: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $bgColor?: string | undefined;
@@ -54,10 +54,65 @@ export declare const TagPickerDiv: import("styled-components").StyledComponent<"
     $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
 } & {
     $gridAutoFlow: string;
+}, "$gridAutoFlow">;
+export declare const TextPlace: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Arrow: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $placeItems: string;
 } & {
-    $gap: number;
-    $padding: number;
-    $borderRadius: ShapeRadius;
-    $bgColor: Color;
-    $boxShadow: Shadow;
-}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$boxShadow" | "$gap" | "$padding">;
+    $direction: ArrowDirection;
+}, "$gridAutoFlow" | "$placeItems">;

package/DynamicContentPicker/styled.js

@@ -1,14 +1,27 @@
 import styled from 'styled-components';
-import { NativeSelect } from '@pushwoosh/dumb-components';
-import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
-import { Vertical } from '@pushwoosh/kit-helpers';
-export const TagPickerDiv = styled(Vertical).attrs({
-  $gap: 16,
-  $padding: 16,
-  $borderRadius: ShapeRadius.CONTROL,
-  $bgColor: Color.FROZEN,
-  $boxShadow: Shadow.REGULAR
-}).withConfig({
-  displayName: "TagPickerDiv",
+import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+export const FieldPlace = styled(Vertical).withConfig({
+  displayName: "FieldPlace",
   componentId: "sc-1blii2o-0"
-})(["width:240px;", "{width:100%;}"], NativeSelect);
+})(["border:1px solid ", ";border-radius:", ";& > div:first-child{background-color:", ";}"], Color.DIVIDER, ShapeRadius.SECTION, Color.SOFT_LIGHT);
+export const TextPlace = styled.div.withConfig({
+  displayName: "TextPlace",
+  componentId: "sc-1blii2o-1"
+})(["font-weight:", ";font-size:", ";line-height:140%;& > p{margin:4px 0;vertical-align:center;svg{vertical-align:middle;}&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR);
+const transforms = {
+  left: 'scaleX(-1)',
+  right: 'scaleX(1)',
+  top: 'rotate(-90deg)',
+  bottom: 'rotate(90deg)'
+};
+export const Arrow = styled(Horizontal).attrs({
+  $placeItems: 'center'
+}).withConfig({
+  displayName: "Arrow",
+  componentId: "sc-1blii2o-2"
+})(["position:absolute;width:20px;height:20px;transform:", " translateX(11px);", ":0;"], ({
+  $direction
+}) => transforms[$direction], ({
+  $direction
+}) => $direction);

package/DynamicContentPicker/types.d.ts

@@ -0,0 +1 @@
+export type ArrowDirection = 'top' | 'bottom' | 'left' | 'right';

package/DynamicContentPickerForm/DynamicContentCustomPickerForm.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import { type CustomTextDynamicContent } from './types';
+type DynamicContentCustomPickerFormProps = {
+    dc: CustomTextDynamicContent['dc'];
+    onChange: (dc: CustomTextDynamicContent['dc']) => void;
+};
+export declare const DynamicContentCustomPickerForm: FC<DynamicContentCustomPickerFormProps>;
+export {};

package/DynamicContentPickerForm/DynamicContentCustomPickerForm.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NativeTextarea } from '@pushwoosh/dumb-components';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const DynamicContentCustomPickerForm = ({
+  dc,
+  onChange
+}) => {
+  return React.createElement(Vertical, {
+    "$gap": 16
+  }, React.createElement(NativeTextarea, {
+    value: dc.text,
+    onChange: e => {
+      onChange({
+        text: e.target.value
+      });
+    },
+    placeholder: "Enter custom text",
+    style: {
+      minHeight: 200
+    }
+  }));
+};

package/DynamicContentPickerForm/DynamicContentEventPickerForm.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import { type Event } from '@pushwoosh/rpc-v2-http-api-data/events';
+import { type EventDynamicContent } from './types';
+type DynamicContentEventPickerFormProps = {
+    dc: EventDynamicContent['dc'];
+    events: Event[];
+    onChange: (dc: EventDynamicContent['dc']) => void;
+};
+export declare const DynamicContentEventPickerForm: FC<DynamicContentEventPickerFormProps>;
+export {};

package/DynamicContentPickerForm/DynamicContentEventPickerForm.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FieldBox, NativeInput, Select } from '@pushwoosh/dumb-components';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const DynamicContentEventPickerForm = ({
+  dc,
+  events,
+  onChange
+}) => {
+  const currentEvent = events.find(tag => tag.name === dc.eventName) || {
+    name: '',
+    attributes: []
+  };
+  return React.createElement(Vertical, {
+    "$gap": 16
+  }, React.createElement(Select, {
+    value: {
+      value: dc.eventName,
+      label: dc.eventName
+    },
+    onChange: option => {
+      onChange({
+        eventName: option.value,
+        attribute: '',
+        defaultValue: ''
+      });
+    },
+    options: events.map(event => ({
+      value: event.name,
+      label: event.name
+    })),
+    placeholder: "Select an event"
+  }), React.createElement(FieldBox, {
+    title: "Attribute"
+  }, React.createElement(Select, {
+    value: {
+      value: dc.attribute,
+      label: dc.attribute
+    },
+    onChange: option => {
+      onChange({
+        ...dc,
+        attribute: option.value
+      });
+    },
+    options: currentEvent.attributes.map(attr => ({
+      value: attr.name,
+      label: attr.name
+    })),
+    isDisabled: !currentEvent.name
+  })), React.createElement(FieldBox, {
+    title: "Fallback text",
+    isOptional: true
+  }, React.createElement(NativeInput, {
+    value: dc.defaultValue,
+    onChange: e => {
+      onChange({
+        ...dc,
+        defaultValue: e.target.value
+      });
+    },
+    disabled: !currentEvent.name
+  })));
+};

package/DynamicContentPickerForm/DynamicContentTagPickerForm.d.ts

@@ -0,0 +1,10 @@
+import { type FC, type PropsWithChildren } from 'react';
+import { type DynamicContent } from '@pushwoosh/dumb-components/RichMessageEditor/slate/types';
+import { type FullTagData } from './types';
+type DynamicContentTagPickerFormProps = {
+    dc: DynamicContent;
+    tags: FullTagData[];
+    onChange: (dc: DynamicContent) => void;
+};
+export declare const DynamicContentTagPickerForm: FC<PropsWithChildren<DynamicContentTagPickerFormProps>>;
+export {};

package/DynamicContentPickerForm/DynamicContentTagPickerForm.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FieldBox, NativeInput, Select } from '@pushwoosh/dumb-components';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const DynamicContentTagPickerForm = ({
+  dc,
+  tags,
+  onChange
+}) => {
+  const currentTag = tags.find(tag => tag.name === dc.tagName) || {
+    name: '',
+    modifiers: ['regular']
+  };
+  return React.createElement(Vertical, {
+    "$gap": 16
+  }, React.createElement(Select, {
+    value: {
+      value: dc.tagName,
+      label: dc.tagName
+    },
+    onChange: option => {
+      onChange({
+        tagName: option.value,
+        modifier: currentTag.modifiers[0],
+        defaultValue: ''
+      });
+    },
+    options: tags.map(tag => ({
+      value: tag.name,
+      label: tag.name
+    })),
+    placeholder: "Select a tag"
+  }), React.createElement(FieldBox, {
+    title: "Modifier"
+  }, React.createElement(Select, {
+    value: {
+      value: dc.modifier,
+      label: dc.modifier
+    },
+    onChange: option => {
+      onChange({
+        ...dc,
+        modifier: option.value
+      });
+    },
+    options: currentTag.modifiers.map(modifier => ({
+      value: modifier,
+      label: modifier
+    })),
+    isDisabled: !currentTag.name
+  })), React.createElement(FieldBox, {
+    title: "Fallback text",
+    isOptional: true
+  }, React.createElement(NativeInput, {
+    value: dc.defaultValue,
+    onChange: e => {
+      onChange({
+        ...dc,
+        defaultValue: e.target.value
+      });
+    },
+    disabled: !currentTag.name
+  })));
+};

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.d.ts

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

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.js

@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react';
+import { FieldBox, NativeInput, Select, Spinner } from '@pushwoosh/dumb-components';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { useDynamicContentTags } from './hooks';
+import { TagPickerDiv } from './styled';
+const defaultDynamicContent = {
+  tagName: '',
+  modifier: 'regular',
+  defaultValue: ''
+};
+export const SimpleDynamicContentPickerFormSmart = ({
+  dc = defaultDynamicContent,
+  onChange,
+  update,
+  children
+}) => {
+  const asyncResult = useDynamicContentTags();
+  useEffect(() => {
+    if (!asyncResult.loading) {
+      update === null || update === void 0 || update();
+    }
+  }, [asyncResult.loading, update]);
+  if (asyncResult.loading) {
+    return React.createElement(TagPickerDiv, null, React.createElement(Horizontal, {
+      "$placeItems": "center",
+      "$padding": 36
+    }, React.createElement(Spinner, {
+      size: "medium"
+    })));
+  }
+  const tags = asyncResult.value || [];
+  const currentTag = tags.find(tag => tag.name === dc.tagName) || {
+    name: '',
+    modifiers: ['regular']
+  };
+  return React.createElement(TagPickerDiv, null, React.createElement(FieldBox, {
+    title: "Tag"
+  }, React.createElement(Vertical, {
+    "$gap": 8
+  }, React.createElement(Select, {
+    width: "auto",
+    menuPlacement: "auto",
+    value: {
+      value: dc.tagName,
+      label: dc.tagName
+    },
+    onChange: option => {
+      onChange({
+        tagName: option.value,
+        modifier: currentTag.modifiers[0],
+        defaultValue: ''
+      });
+    },
+    options: tags.map(tag => ({
+      value: tag.name,
+      label: tag.name
+    }))
+  }), React.createElement(Select, {
+    width: "auto",
+    menuPlacement: "auto",
+    value: {
+      value: dc.modifier,
+      label: dc.modifier
+    },
+    onChange: option => {
+      onChange({
+        ...dc,
+        modifier: option.value
+      });
+    },
+    options: currentTag.modifiers.map(modifier => ({
+      value: modifier,
+      label: modifier
+    })),
+    isDisabled: !currentTag.name
+  }))), React.createElement(FieldBox, {
+    title: "Default Tag Value"
+  }, React.createElement(NativeInput, {
+    value: dc.defaultValue,
+    onChange: e => {
+      onChange({
+        ...dc,
+        defaultValue: e.target.value
+      });
+    },
+    disabled: !currentTag.name
+  })), children);
+};

package/DynamicContentPickerForm/VariedDynamicContentPickerFormSmart.d.ts

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+import { type VariedDynamicContent } from './types';
+type VariedDynamicContentFormSmartProps = {
+    applicationCode: string;
+    initialDc?: VariedDynamicContent;
+    onChange: (dc: VariedDynamicContent) => void;
+    onClose: () => void;
+    update: () => void;
+};
+export declare const VariedDynamicContentPickerFormSmart: FC<VariedDynamicContentFormSmartProps>;
+export {};

package/DynamicContentPickerForm/VariedDynamicContentPickerFormSmart.js

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import { Button, FieldBox, Select, Spinner } from '@pushwoosh/dumb-components';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { DynamicContentCustomPickerForm } from './DynamicContentCustomPickerForm';
+import { DynamicContentEventPickerForm } from './DynamicContentEventPickerForm';
+import { DynamicContentTagPickerForm } from './DynamicContentTagPickerForm';
+import { useVariedDynamicContentTags } from './hooks';
+import { TagPickerDiv } from './styled';
+import { createDefaultDynamicContent } from './utils';
+const defaultVariedDynamicContent = {
+  kind: 'tag',
+  dc: {
+    tagName: '',
+    modifier: 'regular',
+    defaultValue: ''
+  }
+};
+const kindsOptions = [{
+  value: 'tag',
+  label: 'Tag'
+}, {
+  value: 'event',
+  label: 'Event'
+}, {
+  value: 'customText',
+  label: 'Custom Text'
+}];
+export const VariedDynamicContentPickerFormSmart = ({
+  applicationCode,
+  initialDc = defaultVariedDynamicContent,
+  onChange,
+  onClose,
+  update
+}) => {
+  var _kindsOptions$find;
+  const [vdc, setVdc] = useState(initialDc);
+  const asyncResult = useVariedDynamicContentTags(applicationCode);
+  useEffect(() => {
+    update();
+  }, [asyncResult.loading, update]);
+  if (asyncResult.loading) {
+    return React.createElement(TagPickerDiv, null, React.createElement(Horizontal, {
+      "$placeItems": "center",
+      "$padding": 36
+    }, React.createElement(Spinner, {
+      size: "medium"
+    })));
+  }
+  const isValidDc = vdc.kind === 'tag' && vdc.dc.tagName !== '' && vdc.dc.modifier !== '' || vdc.kind === 'event' && vdc.dc.eventName !== '' && vdc.dc.attribute !== '' || vdc.kind === 'customText' && vdc.dc.text !== '';
+  return React.createElement(TagPickerDiv, null, React.createElement(Vertical, {
+    "$gap": 8
+  }, React.createElement(FieldBox, {
+    title: "Variable Type"
+  }, React.createElement(Vertical, {
+    "$gap": 8
+  }, React.createElement(Select, {
+    width: "auto",
+    menuPlacement: "auto",
+    value: {
+      value: vdc.kind,
+      label: (_kindsOptions$find = kindsOptions.find(o => o.value === vdc.kind)) === null || _kindsOptions$find === void 0 ? void 0 : _kindsOptions$find.label
+    },
+    onChange: option => {
+      const newDc = createDefaultDynamicContent(option.value);
+      setVdc(newDc);
+      update();
+    },
+    options: kindsOptions
+  }))), vdc.kind === 'tag' && React.createElement(DynamicContentTagPickerForm, {
+    dc: vdc.dc,
+    tags: asyncResult.value[0],
+    onChange: newDc => {
+      setVdc({
+        ...vdc,
+        dc: newDc
+      });
+    }
+  }), vdc.kind === 'event' && React.createElement(DynamicContentEventPickerForm, {
+    dc: vdc.dc,
+    events: asyncResult.value[1],
+    onChange: newDc => {
+      setVdc({
+        ...vdc,
+        dc: newDc
+      });
+    }
+  }), vdc.kind === 'customText' && React.createElement(DynamicContentCustomPickerForm, {
+    dc: vdc.dc,
+    onChange: newDc => {
+      setVdc({
+        ...vdc,
+        dc: newDc
+      });
+    }
+  })), React.createElement(Horizontal, {
+    "$justifyContent": "end",
+    "$gap": 8
+  }, React.createElement(Button, {
+    color: "secondary",
+    size: "compact",
+    onClick: onClose
+  }, "Cancel"), React.createElement(Button, {
+    color: "primary",
+    size: "compact",
+    onClick: () => {
+      onChange(vdc);
+      onClose();
+    },
+    isDisabled: !isValidDc
+  }, "Apply")));
+};

package/DynamicContentPickerForm/hooks.d.ts

@@ -0,0 +1,39 @@
+import { type Event } from '@pushwoosh/rpc-v2-http-api-data/events';
+import { type SPAContextType } from '../context';
+import { type FullTagData } from './types';
+export declare function fetchDynamicContentTags(context: SPAContextType): Promise<FullTagData[]>;
+export declare function useDynamicContentTags(): {
+    loading: boolean;
+    error?: undefined;
+    value?: undefined;
+} | {
+    loading: false;
+    error: Error;
+    value?: undefined;
+} | {
+    loading: true;
+    error?: Error | undefined;
+    value?: FullTagData[] | undefined;
+} | {
+    loading: false;
+    error?: undefined;
+    value: FullTagData[];
+};
+export declare function fetchDynamicContentEvents(context: SPAContextType, application: string): Promise<Event[]>;
+export declare function useVariedDynamicContentTags(application: string): {
+    loading: boolean;
+    error?: undefined;
+    value?: undefined;
+} | {
+    loading: false;
+    error: Error;
+    value?: undefined;
+} | {
+    loading: true;
+    error?: Error | undefined;
+    value?: [FullTagData[], Event[]] | undefined;
+} | {
+    loading: false;
+    error?: undefined;
+    value: [FullTagData[], Event[]];
+};

package/{DynamicContentPicker → DynamicContentPickerForm}/hooks.js

@@ -24,4 +24,22 @@ export function useDynamicContentTags() {
   return useAsync(async () => {
     return fetchDynamicContentTags(context);
   }, [context]);
+}
+export async function fetchDynamicContentEvents(context, application) {
+  return collectPaginatedData(1000, async (perPage, page) => {
+    const res = await context.rpcGateway.events.List({
+      application,
+      orderBy: 'NAME',
+      orderDirection: 'ASC',
+      page,
+      perPage
+    });
+    return res.events;
+  });
+}
+export function useVariedDynamicContentTags(application) {
+  const context = useSPAContext();
+  return useAsync(() => {
+    return Promise.all([fetchDynamicContentTags(context), fetchDynamicContentEvents(context, application)]);
+  }, [context, application]);
 }

package/DynamicContentPickerForm/index.d.ts

@@ -0,0 +1,2 @@
+export { SimpleDynamicContentPickerFormSmart } from './SimpleDynamicContentPickerFormSmart';
+export * from './hooks';

package/DynamicContentPickerForm/index.js

@@ -0,0 +1,2 @@
+export { SimpleDynamicContentPickerFormSmart } from './SimpleDynamicContentPickerFormSmart';
+export * from './hooks';

package/DynamicContentPickerForm/styled.d.ts

@@ -0,0 +1,64 @@
+import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+export declare const TagPickerDiv: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $gap: number;
+    $padding: number;
+    $borderRadius: ShapeRadius;
+    $border: string;
+    $bgColor: Color;
+    $boxShadow: Shadow;
+}, "$gridAutoFlow" | "$bgColor" | "$border" | "$borderRadius" | "$boxShadow" | "$gap" | "$padding">;

package/DynamicContentPickerForm/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const TagPickerDiv = styled(Vertical).attrs({
+  $gap: 16,
+  $padding: 16,
+  $borderRadius: ShapeRadius.CONTROL,
+  $border: `1px solid ${Color.FORM}`,
+  $bgColor: Color.FROZEN,
+  $boxShadow: Shadow.REGULAR
+}).withConfig({
+  displayName: "TagPickerDiv",
+  componentId: "sc-17kpm8h-0"
+})(["width:240px;"]);

package/DynamicContentPickerForm/types.d.ts

@@ -0,0 +1,27 @@
+import type { Tag } from '@pushwoosh/rpc-v2-http-api-data/tags';
+export type FullTagData = Tag & {
+    modifiers: string[];
+};
+export type TagDynamicContent = {
+    kind: 'tag';
+    dc: {
+        tagName: string;
+        modifier: string;
+        defaultValue: string;
+    };
+};
+export type EventDynamicContent = {
+    kind: 'event';
+    dc: {
+        eventName: string;
+        attribute: string;
+        defaultValue: string;
+    };
+};
+export type CustomTextDynamicContent = {
+    kind: 'customText';
+    dc: {
+        text: string;
+    };
+};
+export type VariedDynamicContent = TagDynamicContent | EventDynamicContent | CustomTextDynamicContent;

package/DynamicContentPickerForm/types.js

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

package/DynamicContentPickerForm/utils.d.ts

@@ -0,0 +1,2 @@
+import { type VariedDynamicContent } from './types';
+export declare function createDefaultDynamicContent(kind: 'tag' | 'event' | 'customText'): VariedDynamicContent;

package/DynamicContentPickerForm/utils.js

@@ -0,0 +1,29 @@
+export function createDefaultDynamicContent(kind) {
+  switch (kind) {
+    case 'tag':
+      return {
+        kind,
+        dc: {
+          tagName: '',
+          modifier: 'regular',
+          defaultValue: ''
+        }
+      };
+    case 'event':
+      return {
+        kind,
+        dc: {
+          eventName: '',
+          attribute: '',
+          defaultValue: ''
+        }
+      };
+    case 'customText':
+      return {
+        kind,
+        dc: {
+          text: ''
+        }
+      };
+  }
+}

package/RichMessageEditorSmart/NewDynamicContentForm.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { Button } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
-import { DynamicContentPicker } from '../DynamicContentPicker';
+import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
 export const NewDynamicContentForm = ({
   update,
   onSubmit
 }) => {
   const [dc, setDc] = useState();
-  return React.createElement(DynamicContentPicker, {
+  return React.createElement(SimpleDynamicContentPickerFormSmart, {
     dc: dc,
     onChange: setDc,
     update: update

package/RichMessageEditorSmart/RichMessageEditorSmart.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RichMessageEditor } from '@pushwoosh/dumb-components';
-import { DynamicContentPicker } from '../DynamicContentPicker';
+import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
 import { NewDynamicContentForm } from './NewDynamicContentForm';
 export const RichMessageEditorSmart = props => {
   return React.createElement(RichMessageEditor, {
@@ -9,7 +9,7 @@ export const RichMessageEditorSmart = props => {
       dc,
       onChange,
       update
-    }) => dc ? React.createElement(DynamicContentPicker, {
+    }) => dc ? React.createElement(SimpleDynamicContentPickerFormSmart, {
       dc: dc,
       onChange: onChange,
       update: update

package/_devel/lib/dynamic-content-picker.js

@@ -2,10 +2,10 @@
 import React, { useState } from 'react';
 import { Button } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
-import { DynamicContentPicker } from '../../DynamicContentPicker';
+import { SimpleDynamicContentPickerFormSmart } from '../../DynamicContentPickerForm';
 export function DynamicContentPickerExample() {
   const [dc, setDc] = useState();
-  return React.createElement("div", null, React.createElement(DynamicContentPicker, {
+  return React.createElement("div", null, React.createElement(SimpleDynamicContentPickerFormSmart, {
     dc: dc,
     onChange: setDc
   }, React.createElement(Horizontal, {

package/context/types.d.ts

@@ -11,5 +11,6 @@ export type SPAContextType = {
     readonly grpcBridge: GrpcBridge;
     readonly sessionStore: SessionStore;
     readonly rpcGateway: API;
+    readonly language: string;
     readonly __smartComponentsCache: Record<string, any>;
 };

package/index.d.ts

@@ -1,6 +1,6 @@
 export * from './EmailTemplatePreview';
 export * from './context';
-export * from './DynamicContentPicker';
+export * from './DynamicContentPickerForm';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';

package/index.js

@@ -1,6 +1,6 @@
 export * from './EmailTemplatePreview';
 export * from './context';
-export * from './DynamicContentPicker';
+export * from './DynamicContentPickerForm';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';

package/package.json

@@ -17,7 +17,8 @@
   "pre-commit": "check",
   "dependencies": {
     "@emoji-mart/react": "^1.1.1",
-    "@pushwoosh/dumb-components": "^1.0.64",
+    "@floating-ui/react-dom": "^2.1.2",
+    "@pushwoosh/dumb-components": "^1.0.74",
     "@pushwoosh/kit-constants": "^1.6.9",
     "@pushwoosh/kit-helpers": "^4.8.1",
     "@pushwoosh/kit-icons": "^2.1.2",
@@ -41,7 +42,7 @@
   "peerDependencies": {
     "@pushwoosh/grpc-bridge": "^1.5.36",
     "@pushwoosh/http-client": "^2.5.0",
-    "@pushwoosh/rpc-v2-http-api-data": "^0.1.466",
+    "@pushwoosh/rpc-v2-http-api-data": "^0.1.501",
     "@pushwoosh/session-store": "^2.5.0",
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
@@ -49,5 +50,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "1.0.16"
+  "version": "1.0.18"
 }

package/DynamicContentPicker/DynamicContentPicker.types.d.ts

@@ -1,4 +0,0 @@
-import { type Tag } from '@pushwoosh/rpc-v2-http-api-data/tags';
-export type FullTagData = Tag & {
-    modifiers: string[];
-};

package/DynamicContentPicker/hooks.d.ts

@@ -1,20 +0,0 @@
-import { type SPAContextType } from '../context';
-import { type FullTagData } from './DynamicContentPicker.types';
-export declare function fetchDynamicContentTags(context: SPAContextType): Promise<FullTagData[]>;
-export declare function useDynamicContentTags(): {
-    loading: boolean;
-    error?: undefined;
-    value?: undefined;
-} | {
-    loading: false;
-    error: Error;
-    value?: undefined;
-} | {
-    loading: true;
-    error?: Error | undefined;
-    value?: FullTagData[] | undefined;
-} | {
-    loading: false;
-    error?: undefined;
-    value: FullTagData[];
-};