npm - @pushwoosh/dumb-components - Versions diffs - 1.1.167 → 1.1.169 - Mend

@pushwoosh/dumb-components 1.1.167 → 1.1.169

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.

Files changed (8) hide show

package/EmailTemplatePreview/EmailTemplatePreview.js +3 -2
package/NativeRichMediaPreview/NativeRichMediaPreview.js +10 -1
package/NativeRichMediaPreview/index.d.ts +1 -1
package/NativeRichMediaPreview/resolveLocalization.d.ts +9 -0
package/NativeRichMediaPreview/resolveLocalization.js +45 -0
package/NativeRichMediaPreview/types.d.ts +10 -0
package/index.d.ts +1 -1
package/package.json +1 -1

package/EmailTemplatePreview/EmailTemplatePreview.js CHANGED Viewed

@@ -36,13 +36,14 @@ export function EmailTemplatePreview(props) {
   } = props;
   const [liquidInstance] = useState(createLiquidInstance);
   const src = useMemo(() => {
+    let withDynamicContent = template;
     try {
       const withLocalization = replaceLocalization(template, localization);
-      const withDynamicContent = replacePlaceholders(withLocalization, values);
+      withDynamicContent = replacePlaceholders(withLocalization, values);
       return liquidInstance.parseAndRenderSync(withDynamicContent, values);
     } catch (e) {
       console.error('Error in PreviewIframe', e);
-      return `<body style="font-size: 24px; color: darkred">${e.message}</body>`;
+      return withDynamicContent;
     }
   }, [template, localization, values, liquidInstance]);
   return _jsx(IframeStyled, {

package/NativeRichMediaPreview/NativeRichMediaPreview.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { NativeRichMediaDim } from './components/NativeRichMediaDim';
 import { NativeRichMediaMuteChip } from './components/NativeRichMediaMuteChip';
 import { EDGE_INSET, clampIndex } from './helpers';
 import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
+import { resolveLocalization } from './resolveLocalization';
 import { BackdropLayer, ContentFlow, PreviewHost, ScrollLayer, SpinnerLayer } from './styles';
 import { NativeRichMediaBannerView, NativeRichMediaCarouselView, NativeRichMediaFullscreenView, NativeRichMediaInvalidView, NativeRichMediaModalView, NativeRichMediaPipView, NativeRichMediaScratchcardView, NativeRichMediaSheetView, NativeRichMediaSpinwheelView, NativeRichMediaStoriesView, NativeRichMediaVideoView } from './views';
 import { GradientOverlay } from './views/shared/styles';
@@ -184,13 +185,21 @@ function renderConfig(config, activeIndex) {
 export function NativeRichMediaPreview(props) {
   const {
     content,
+    localization,
+    language,
     width,
     height,
     activeIndex = 0,
     isLoading = false,
     withBackground = true
   } = props;
-  const config = useMemo(() => parseNativeRichMediaConfig(content), [content]);
+  const config = useMemo(() => {
+    const parsed = parseNativeRichMediaConfig(content);
+    if (!parsed) {
+      return null;
+    }
+    return parseNativeRichMediaConfig(resolveLocalization(parsed, localization, language));
+  }, [content, localization, language]);
   const shouldDim = !isLoading && dimsScreen(config);
   return _jsxs(PreviewHost, {
     width: width,

package/NativeRichMediaPreview/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, } from './types';
+export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './types';
 export { NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
 export { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 export { NativeRichMediaPreview } from './NativeRichMediaPreview';

package/NativeRichMediaPreview/resolveLocalization.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { NativeRichMediaConfig, NativeRichMediaLocalization } from './types';
+/**
+ * Replaces every `{{key|type}}` (or `{{key|type|default}}`) placeholder in a
+ * parsed config with the text from `localization[language][key]`, falling back
+ * to the `default` bucket and then to the placeholder's default segment (or the
+ * key itself when it has none). Returns a new config; non-placeholder (already
+ * literal) values are copied through unchanged.
+ */
+export declare function resolveLocalization(config: NativeRichMediaConfig, localization: NativeRichMediaLocalization | undefined, language: string | undefined): NativeRichMediaConfig;

package/NativeRichMediaPreview/resolveLocalization.js ADDED Viewed

@@ -0,0 +1,45 @@
+const PLACEHOLDER_RE = /^\{\{([^|}]+)\|[^|}]*(?:\|([^}]*))?\}\}$/;
+function resolveValue(value, localization, language) {
+  var _localization$languag, _localization$default;
+  const match = PLACEHOLDER_RE.exec(value);
+  if (!match) {
+    return value;
+  }
+  const key = match[1];
+  const fallback = match[2] ?? key;
+  const languageValue = language ? localization === null || localization === void 0 || (_localization$languag = localization[language]) === null || _localization$languag === void 0 ? void 0 : _localization$languag[key] : undefined;
+  if (typeof languageValue === 'string') {
+    return languageValue;
+  }
+  const defaultValue = localization === null || localization === void 0 || (_localization$default = localization.default) === null || _localization$default === void 0 ? void 0 : _localization$default[key];
+  if (typeof defaultValue === 'string') {
+    return defaultValue;
+  }
+  return fallback;
+}
+function resolveNode(node, localization, language) {
+  if (typeof node === 'string') {
+    return resolveValue(node, localization, language);
+  }
+  if (Array.isArray(node)) {
+    return node.map(item => resolveNode(item, localization, language));
+  }
+  if (node !== null && typeof node === 'object') {
+    const result = {};
+    Object.entries(node).forEach(([key, value]) => {
+      result[key] = resolveNode(value, localization, language);
+    });
+    return result;
+  }
+  return node;
+}
+/**
+ * Replaces every `{{key|type}}` (or `{{key|type|default}}`) placeholder in a
+ * parsed config with the text from `localization[language][key]`, falling back
+ * to the `default` bucket and then to the placeholder's default segment (or the
+ * key itself when it has none). Returns a new config; non-placeholder (already
+ * literal) values are copied through unchanged.
+ */
+export function resolveLocalization(config, localization, language) {
+  return resolveNode(config, localization, language);
+}

package/NativeRichMediaPreview/types.d.ts CHANGED Viewed

@@ -283,10 +283,20 @@ export type NativeRichMediaConfig = {
 export type NativeRichMediaDisplayType = NativeRichMediaConfig['displayType'];
 /** All supported {@link NativeRichMediaDisplayType} values. */
 export declare const NATIVE_RICH_MEDIA_DISPLAY_TYPES: NativeRichMediaDisplayType[];
+/**
+ * Per-language text for `{{key|type|default}}` placeholders in the config:
+ * `{ [language]: { [key]: text } }`, plus a `default` bucket used as the
+ * fallback. Text lives here rather than inline in `content`.
+ */
+export type NativeRichMediaLocalization = Record<string, Record<string, string>>;
 /** Props of {@link NativeRichMediaPreview}. */
 export type NativeRichMediaPreviewProps = {
     /** Rich media config, as an object or a JSON string. */
     content: string | NativeRichMediaConfig;
+    /** Per-language text for placeholders in `content`; when given, placeholders are resolved for `language` (falling back to `default`). */
+    localization?: NativeRichMediaLocalization;
+    /** Language code to resolve placeholders for; falls back to the `default` bucket. */
+    language?: string;
     /** Preview box width; number is treated as px. */
     width: string | number;
     /** Preview box height; number is treated as px. */

package/index.d.ts CHANGED Viewed

@@ -44,7 +44,7 @@ export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
-export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, } from './NativeRichMediaPreview';
+export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps, type LocalCapping, type CappingInAppBase, } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly, type SendRateBase, type SendRateEditProps, type SendRateReadonlyProps, } from './SendRate';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.167",
+  "version": "1.1.169",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",