@revenuecat/purchases-ui-js 4.12.5 → 4.13.0

package/dist/components/image/Image.svelte

@@ -14,8 +14,8 @@
     mapSpacing,
   } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
+  import { resolveLocalizedSource } from "../../utils/source-utils";
   import ClipPath from "./ClipPath.svelte";
-  import { resolveImageSource } from "./image-utils";
   import { viewBoxSize } from "./view-box-size";
   import Overlay from "./Overlay.svelte";
 
@@ -45,7 +45,12 @@
   });
 
   const source = $derived(
-    resolveImageSource(props, conditionContext, getLocalizedImage),
+    resolveLocalizedSource(
+      props,
+      "override_source_lid",
+      conditionContext,
+      getLocalizedImage,
+    ),
   );
 
   const getColorMode = getColorModeContext();

package/dist/components/loader-animation/LoaderAnimation.stories.svelte

@@ -108,9 +108,7 @@
   decorators={[staticLoaderDecorator(0.5)]}
   template={linearClampTemplate}
   play={async ({ canvasElement }) => {
-    const loader = canvasElement.querySelector(
-      ".rc-loader-animation--linear",
-    );
+    const loader = canvasElement.querySelector(".rc-loader-animation--linear");
     await expect(loader?.getBoundingClientRect().height).toBe(48);
   }}
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -224,8 +224,12 @@
     }),
   );
 
-  const { default_locale, components_config, components_localizations } =
-    paywallData;
+  const {
+    default_locale,
+    components_config,
+    components_localizations,
+    components_video_localizations,
+  } = paywallData;
   const { base } = components_config;
   const defaultPackageId = findSelectedPackageId(base);
 
@@ -250,6 +254,7 @@
     defaultLocale: default_locale,
     selectedLocale,
     localizations: components_localizations!,
+    videoLocalizations: components_video_localizations,
   }));
 
   const selectedPackageId = writable<string | undefined>(defaultPackageId);

package/dist/components/stack/Stack.stories.svelte

@@ -353,14 +353,6 @@
   }}
 />
 
-<style>
-  .fill-clamp-layouts {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 24px;
-  }
-</style>
-
 <Story
   name="Z Layer"
   args={{
@@ -3095,3 +3087,11 @@
     },
   }}
 />
+
+<style>
+  .fill-clamp-layouts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+  }
+</style>

package/dist/components/video/Video.stories.svelte

@@ -1,12 +1,32 @@
 <script module lang="ts">
   import Video from "./Video.svelte";
   import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import type { VideoInfo } from "../../types/media";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
+  const localizedVideo: VideoInfo = {
+    dark: null,
+    light: {
+      width: 1920,
+      height: 1080,
+      url: "https://videos.pexels.com/video-files/10288594/10288594-hd_1920_1080_25fps.mp4",
+      url_low_res:
+        "https://videos.pexels.com/video-files/10288594/10288594-hd_1920_1080_25fps.mp4",
+    },
+  };
+
   const { Story } = defineMeta({
     title: "Components/Video",
     component: Video,
-    decorators: [componentDecorator()],
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale: "en_US",
+        localizations: {},
+        videoLocalizations: { en_US: { localized_video: localizedVideo } },
+      }),
+    ],
     parameters: {
       chromatic: { disableSnapshot: true },
     },
@@ -139,6 +159,14 @@
   }}
 />
 
+<Story
+  name="Localized Source"
+  args={{
+    source: null,
+    override_video_lid: "localized_video",
+  }}
+/>
+
 <Story
   name="Overlay Radial Gradient"
   args={{

package/dist/components/video/Video.svelte

@@ -2,6 +2,7 @@
   import { untrack } from "svelte";
   import { getColorModeContext } from "../../stores/color-mode";
   import { useConditionContext } from "../../stores/condition-context.svelte";
+  import { getLocalizationContext } from "../../stores/localization";
   import type { VideoProps } from "../../types/components/video";
   import type { VideoFiles, ImageFiles } from "../../types/media";
   import {
@@ -16,6 +17,7 @@
     mapSpacing,
   } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
+  import { resolveLocalizedSource } from "../../utils/source-utils";
   import {
     applyInlineVideoPlaybackFlags,
     subscribeDecorativeVideoAutoplayAttempts,
@@ -27,9 +29,12 @@
   const props: VideoProps = $props();
 
   const buildConditionContext = useConditionContext();
+  const { getLocalizedVideo } = getLocalizationContext();
+
+  const conditionContext = $derived(buildConditionContext());
+
   const {
     id,
-    source,
     fallback_source,
     size,
     mask_shape,
@@ -47,10 +52,19 @@
   } = $derived.by(() => {
     return {
       ...props,
-      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
+      ...resolveOverrideProperties(conditionContext, props.overrides),
     };
   });
 
+  const source = $derived(
+    resolveLocalizedSource(
+      props,
+      "override_video_lid",
+      conditionContext,
+      getLocalizedVideo,
+    ),
+  );
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
   const video: VideoFiles | null = $derived(

package/dist/stores/localization.d.ts

@@ -1,15 +1,18 @@
-import type { Localizations } from "../types/localization";
-import type { ImageInfo } from "../types/media";
+import type { Localizations, VideoLocalizations } from "../types/localization";
+import type { ImageInfo, VideoInfo } from "../types/media";
 type GetLocalizedString = (id?: string) => string | undefined;
 export type GetLocalizedImage = (id?: string) => ImageInfo | undefined;
+export type GetLocalizedVideo = (id?: string) => VideoInfo | undefined;
 interface LocalizationContext {
     getLocalizedString: GetLocalizedString;
     getLocalizedImage: GetLocalizedImage;
+    getLocalizedVideo: GetLocalizedVideo;
 }
 export interface LocalizationContextProps {
     defaultLocale: string;
     selectedLocale?: string;
     localizations: Localizations;
+    videoLocalizations?: VideoLocalizations;
 }
 export declare function setLocalizationContext(props: () => LocalizationContextProps): LocalizationContext;
 export declare function getLocalizationContext(): LocalizationContext;

package/dist/stores/localization.js

@@ -1,30 +1,32 @@
 import { getContext, setContext } from "svelte";
 const key = Symbol("localization");
 export function setLocalizationContext(props) {
-    const getLocalizedValue = (id) => {
+    const lookup = (table, id) => {
         if (!id) {
             return undefined;
         }
-        const { selectedLocale, defaultLocale, localizations } = props();
+        const { selectedLocale, defaultLocale } = props();
         const locale = selectedLocale ?? defaultLocale;
-        const selected = localizations[locale]?.[id];
-        const fallback = localizations[defaultLocale]?.[id];
+        const selected = table[locale]?.[id];
+        const fallback = table[defaultLocale]?.[id];
         return selected ?? fallback;
     };
     const getLocalizedString = (id) => {
         if (!id) {
             return "";
         }
-        const value = getLocalizedValue(id);
+        const value = lookup(props().localizations, id);
         return typeof value === "string" ? value : undefined;
     };
     const getLocalizedImage = (id) => {
-        const value = getLocalizedValue(id);
+        const value = lookup(props().localizations, id);
         return typeof value === "object" ? value : undefined;
     };
+    const getLocalizedVideo = (id) => lookup(props().videoLocalizations ?? {}, id);
     const context = {
         getLocalizedString,
         getLocalizedImage,
+        getLocalizedVideo,
     };
     setContext(key, context);
     return context;

package/dist/types/components/video.d.ts

@@ -18,7 +18,7 @@ export interface VideoProps extends BaseComponent {
     visible?: boolean | null;
     source: VideoInfo | null;
     fallback_source?: ImageInfo | null;
-    override_source_lid?: string | null;
+    override_video_lid?: string | null;
     size: SizeType;
     mask_shape?: RectangleShape | CircleShape | ConcaveShape | ConvexShape | null;
     fit_mode: FitMode;

package/dist/types/localization.d.ts

@@ -1,5 +1,6 @@
-import type { ImageInfo } from "./media";
+import type { ImageInfo, VideoInfo } from "./media";
 export type LocalizationValue = string | ImageInfo;
 type Localization = Partial<Record<string, LocalizationValue>>;
 export type Localizations = Partial<Record<string, Localization>>;
+export type VideoLocalizations = Partial<Record<string, Partial<Record<string, VideoInfo>>>>;
 export {};

package/dist/types/paywall.d.ts

@@ -3,7 +3,7 @@ import type { ColorScheme } from "./colors";
 import type { FooterProps } from "./components/footer";
 import type { HeaderProps } from "./components/header";
 import type { StackProps } from "./components/stack";
-import type { Localizations } from "./localization";
+import type { Localizations, VideoLocalizations } from "./localization";
 import type { StateDeclaration } from "./state";
 export interface RootPaywall {
     background?: Background;
@@ -29,6 +29,7 @@ export interface PaywallData {
     default_locale: string;
     components_config: ComponentConfig;
     components_localizations: Localizations;
+    components_video_localizations?: VideoLocalizations;
     /** Declared paywall-state keys (key → {type, default}). Absent on paywalls without state. */
     state_declarations?: Record<string, StateDeclaration>;
 }

package/dist/utils/source-utils.d.ts

@@ -0,0 +1,16 @@
+import type { Overrides } from "../types/overrides";
+import { type ConditionContext } from "./style-utils";
+type LocalizedSourceFields<Source, LidKey extends string> = {
+    source?: Source;
+} & Partial<Record<LidKey, string | null>>;
+type LocalizedSourceProps<Source, LidKey extends string> = LocalizedSourceFields<Source, LidKey> & {
+    source: Source;
+    overrides?: Overrides<LocalizedSourceFields<Source, LidKey>>;
+};
+/**
+ * Resolves the media source to render for a component, preferring a matching
+ * override but defaulting to the component's source. At each level, a
+ * localized source referenced by `lidKey` wins over the inline `source`.
+ */
+export declare function resolveLocalizedSource<Source, LidKey extends string>(props: LocalizedSourceProps<Source, LidKey>, lidKey: LidKey, context: ConditionContext, getLocalizedSource: (id?: string) => NonNullable<Source> | undefined): Source;
+export {};

package/dist/utils/source-utils.js

@@ -0,0 +1,19 @@
+import { filterMatchingOverrides, } from "./style-utils";
+/**
+ * Resolves the media source to render for a component, preferring a matching
+ * override but defaulting to the component's source. At each level, a
+ * localized source referenced by `lidKey` wins over the inline `source`.
+ */
+export function resolveLocalizedSource(props, lidKey, context, getLocalizedSource) {
+    const resolve = (source, lid) => (lid ? (getLocalizedSource(lid) ?? source) : source);
+    let resolvedOverrideSource;
+    for (const override of filterMatchingOverrides(context, props.overrides)) {
+        const source = resolve(override.properties.source, override.properties[lidKey]);
+        if (source) {
+            resolvedOverrideSource = source;
+        }
+    }
+    return (resolvedOverrideSource ??
+        resolve(props.source, props[lidKey]) ??
+        props.source);
+}

package/dist/utils/style-utils.d.ts

@@ -35,7 +35,7 @@ export type ConditionContext = {
  * Returns the overrides (in array order) whose conditions all match (AND) the
  * given context, without merging their properties.
  */
-export declare const filterMatchingOverrides: <T extends Component>(context: ConditionContext, overrides?: Overrides<T>) => Overrides<T>;
+export declare const filterMatchingOverrides: <T>(context: ConditionContext, overrides?: Overrides<T>) => Overrides<T>;
 /**
  * Merges the properties of every override whose conditions all match (AND),
  * applying them in override-array order (later overrides overwrite earlier ones).

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.12.5",
+  "version": "4.13.0",
   "author": {
     "name": "RevenueCat, Inc."
   },

package/dist/components/image/image-utils.d.ts

@@ -1,9 +0,0 @@
-import type { ImageProps } from "../../types/components/image";
-import type { ImageInfo } from "../../types/media";
-import { type ConditionContext } from "../../utils/style-utils";
-import type { GetLocalizedImage } from "../../stores/localization";
-/**
- * Resolves the ImageInfo to render for an image component, preferring
- * a matching override but defaulting to the image source.
- */
-export declare function resolveImageSource(props: ImageProps, context: ConditionContext, getLocalizedImage: GetLocalizedImage): ImageInfo;

package/dist/components/image/image-utils.js

@@ -1,20 +0,0 @@
-import { filterMatchingOverrides, } from "../../utils/style-utils";
-/**
- * Resolves the ImageInfo to render for an image component, preferring
- * a matching override but defaulting to the image source.
- */
-export function resolveImageSource(props, context, getLocalizedImage) {
-    const resolveLocalizedSource = (source, overrideSourceLid) => overrideSourceLid
-        ? (getLocalizedImage(overrideSourceLid) ?? source)
-        : source;
-    let resolvedOverrideImage;
-    for (const override of filterMatchingOverrides(context, props.overrides)) {
-        const image = resolveLocalizedSource(override.properties.source, override.properties.override_source_lid);
-        if (image) {
-            resolvedOverrideImage = image;
-        }
-    }
-    return (resolvedOverrideImage ??
-        resolveLocalizedSource(props.source, props.override_source_lid) ??
-        props.source);
-}