@pushwoosh/dumb-components 1.1.167 → 1.1.168

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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