@pushwoosh/smart-components-kit 1.0.37 → 1.0.39

package/DynamicContentPicker/DynamicContentPicker.d.ts

@@ -5,7 +5,9 @@ type State = Record<string, VariedDynamicContent>;
 type DynamicContentPickerProps = {
     applicationCode: string;
     text: string;
+    icon?: ReactNode;
     title?: string;
+    hintText?: string;
     initState?: State;
     error?: ReactNode;
     renderDynamicContent?: (props: RenderDynamicContentProps) => ReactNode;

package/DynamicContentPicker/DynamicContentPicker.js

@@ -1,7 +1,7 @@
 import { arrow, autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
-import React, { useMemo, useReducer, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
-import { Horizontal } from '@pushwoosh/kit-helpers';
+import { elementAddListener, Horizontal, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { WarningRoundIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { Arrow, FieldPlace, TextPlace } from './styled';
@@ -24,7 +24,9 @@ const reducer = (state, action) => {
 export const DynamicContentPicker = ({
   applicationCode,
   text,
+  icon,
   title,
+  hintText,
   initState,
   error,
   renderDynamicContent
@@ -50,24 +52,44 @@ export const DynamicContentPicker = ({
   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 line.split(/(\{\{[^}]+\}\}|\{[^}]+\})/g).filter(match => match !== '').map(match => {
+        if (!match.includes('{')) {
           return match;
         }
+        const varname = match.replace(/^\{\{?/, '').replace(/\}?\}$/, '').split('|')[0].trim();
         return {
-          varname: match
+          varname
         };
       });
     });
   }, [text]);
+  const onClose = () => {
+    setActiveVar(undefined);
+  };
+  const clickAwayHandler = usePersistentFunction(() => {
+    onClose();
+  });
+  useEffect(() => {
+    if (!activeVar) {
+      return;
+    }
+    return elementAddListener(document, ['mousedown', 'touchstart', 'focusin'], event => {
+      if (refs.floating.current instanceof HTMLElement && !refs.floating.current.contains(event.target)) {
+        clickAwayHandler();
+      }
+    });
+  }, [clickAwayHandler, activeVar, refs.reference, refs.floating]);
   return React.createElement(React.Fragment, null, React.createElement(FieldPlace, {
     ref: refs.setReference
   }, React.createElement(Horizontal, {
     "$padding": "8px 16px",
     "$justifyContent": "space-between"
-  }, React.createElement(Text, {
+  }, React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$gap": 8
+  }, icon && icon, React.createElement(Text, {
     "$variant": "h4"
-  }, title), error && React.createElement(Horizontal, {
+  }, title)), error && React.createElement(Horizontal, {
     "$alignItems": "center",
     "$gap": 8
   }, React.createElement(WarningRoundIcon, {
@@ -77,7 +99,10 @@ export const DynamicContentPicker = ({
   }), React.createElement(Text, {
     "$variant": "footnote",
     "$color": Color.WARNING
-  }, error))), React.createElement(Horizontal, {
+  }, error)), !error && hintText && React.createElement(Text, {
+    "$variant": "footnote",
+    "$color": Color.LOCKED
+  }, hintText)), 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 */,
@@ -95,7 +120,7 @@ export const DynamicContentPicker = ({
       key: activeVar,
       value: newDC
     }),
-    onClose: () => setActiveVar(undefined),
+    onClose,
     update
   }) : React.createElement(VariedDynamicContentPickerFormSmart, {
     key: activeVar,

package/DynamicContentPickerForm/index.d.ts

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

package/OpenActions/components/OpenActionsSummary/OpenActionsSummary.js

@@ -29,7 +29,7 @@ export const OpenActionsSummary = ({
     code: applicationCode
   }), [applicationCode]);
   const hasCustomPlatformsDeeplink = Object.keys(platformsDeeplinkUrls).length > 0;
-  const safariUrl = !hasCustomPlatformsDeeplink && getSafariUrl(((_applicationData$valu = applicationData.value) === null || _applicationData$valu === void 0 ? void 0 : _applicationData$valu.application) || null, safariUrlArgs ?? '');
+  const safariUrl = getSafariUrl(((_applicationData$valu = applicationData.value) === null || _applicationData$valu === void 0 ? void 0 : _applicationData$valu.application) || null, safariUrlArgs ?? '');
   const renderInfoBlock = (device, action, url = null) => 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",

package/OpenActions/usePresetOpenActions.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useToast } from '@pushwoosh/dumb-components';
 import { useSPAContext } from '../context';
-import { formatDeeplink } from './helpers';
+import { formatDeeplink, isWebLink } from './helpers';
 const WEB_PLATFORM_KEY = 0;
 export const usePresetOpenActions = pushPreset => {
   const [openActions, setOpenActions] = useState(undefined);
@@ -31,7 +31,7 @@ export const usePresetOpenActions = pushPreset => {
       return;
     }
     const safariUrlArgs = ((_pushPreset$localized = pushPreset.localizedProperties.default) === null || _pushPreset$localized === void 0 || (_pushPreset$localized = _pushPreset$localized.safari) === null || _pushPreset$localized === void 0 || (_pushPreset$localized = _pushPreset$localized.urlArguments) === null || _pushPreset$localized === void 0 ? void 0 : _pushPreset$localized[0]) ?? null;
-    const webPageUrl = pushPreset.url;
+    const webPageUrl = isWebLink(pushPreset.url) ? pushPreset.url : null;
     const {
       platformsDeeplinkUrls,
       showRichmedia

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -51,5 +51,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "1.0.37"
+  "version": "1.0.39"
 }