@revenuecat/purchases-ui-js 4.8.20 → 4.8.21

package/dist/components/image/Image.stories.svelte

@@ -1,12 +1,16 @@
 <script module lang="ts">
   import Image from "./Image.svelte";
   import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const { Story } = defineMeta({
     title: "Components/Image",
     component: Image,
-    decorators: [componentDecorator()],
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({ defaultLocale: "en_US", localizations: {} }),
+    ],
     args: {
       type: "image",
       id: "image",

package/dist/components/image/Image.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
   import { useConditionContext } from "../../stores/condition-context.svelte";
+  import { getLocalizationContext } from "../../stores/localization";
   import type { ImageProps } from "../../types/components/image";
   import {
     css,
@@ -12,15 +13,19 @@
   } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import ClipPath from "./ClipPath.svelte";
+  import { resolveImageSource } from "./image-utils";
   import { viewBoxSize } from "./view-box-size";
   import Overlay from "./Overlay.svelte";
 
   const props: ImageProps = $props();
 
   const buildConditionContext = useConditionContext({ state: true });
+  const { getLocalizedImage } = getLocalizationContext();
+
+  const conditionContext = $derived(buildConditionContext());
+
   const {
     id,
-    source,
     size,
     mask_shape,
     fit_mode,
@@ -33,10 +38,14 @@
   } = $derived.by(() => {
     return {
       ...props,
-      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
+      ...resolveOverrideProperties(conditionContext, props.overrides),
     };
   });
 
+  const source = $derived(
+    resolveImageSource(props, conditionContext, getLocalizedImage),
+  );
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
   const image = $derived(mapColorMode(colorMode, source));

package/dist/components/image/ImageTestWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { readable, writable } from "svelte/store";
   import { setColorModeContext } from "../../stores/color-mode";
+  import { setLocalizationContext } from "../../stores/localization";
   import { setPaywallContext } from "../../stores/paywall";
   import Image from "./Image.svelte";
   import type { ImageProps } from "../../types/components/image";
@@ -8,6 +9,10 @@
   const props: ImageProps = $props();
 
   setColorModeContext();
+  setLocalizationContext(() => ({
+    defaultLocale: "en_US",
+    localizations: {},
+  }));
   setPaywallContext({
     selectedPackageId: writable(undefined),
     variablesPerPackage: readable(undefined),

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,20 @@
+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);
+}

package/dist/stores/localization.d.ts

@@ -1,7 +1,10 @@
 import type { Localizations } from "../types/localization";
+import type { ImageInfo } from "../types/media";
 type GetLocalizedString = (id?: string) => string | undefined;
+export type GetLocalizedImage = (id?: string) => ImageInfo | undefined;
 interface LocalizationContext {
     getLocalizedString: GetLocalizedString;
+    getLocalizedImage: GetLocalizedImage;
 }
 export interface LocalizationContextProps {
     defaultLocale: string;

package/dist/stores/localization.js

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

package/dist/types/localization.d.ts

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

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

@@ -29,6 +29,11 @@ export type ConditionContext = {
     focus?: boolean;
     error?: boolean;
 };
+/**
+ * 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>;
 /**
  * Merges the properties of every override whose conditions all match (AND),
  * applying them in override-array order (later overrides overwrite earlier ones).

package/dist/utils/style-utils.js

@@ -115,6 +115,15 @@ export function collectPackageIdsInDisplayOrder({ stack, sticky_footer, }) {
     }
     return ids;
 }
+/**
+ * Returns the overrides (in array order) whose conditions all match (AND) the
+ * given context, without merging their properties.
+ */
+export const filterMatchingOverrides = (context, overrides) => {
+    if (!overrides)
+        return [];
+    return overrides.filter((override) => override.conditions.every((c) => conditionMatches(c, context)));
+};
 /**
  * Merges the properties of every override whose conditions all match (AND),
  * applying them in override-array order (later overrides overwrite earlier ones).
@@ -128,20 +137,16 @@ export function collectPackageIdsInDisplayOrder({ stack, sticky_footer, }) {
  * (`actualProps.visible !== false`).
  */
 export const resolveOverrideProperties = (context, overrides) => {
-    if (!overrides)
-        return {};
     let merged = {};
-    for (const override of overrides) {
-        if (override.conditions.every((c) => conditionMatches(c, context))) {
-            const properties = { ...override.properties };
-            const canReveal = override.conditions.some((c) => c.type === RuleKey.StateCondition);
-            // visible: null carries no intent and must not clobber an earlier false.
-            if (properties.visible === null ||
-                (properties.visible === true && !canReveal)) {
-                delete properties.visible;
-            }
-            merged = { ...merged, ...properties };
+    for (const override of filterMatchingOverrides(context, overrides)) {
+        const properties = { ...override.properties };
+        const canReveal = override.conditions.some((c) => c.type === RuleKey.StateCondition);
+        // visible: null carries no intent and must not clobber an earlier false.
+        if (properties.visible === null ||
+            (properties.visible === true && !canReveal)) {
+            delete properties.visible;
         }
+        merged = { ...merged, ...properties };
     }
     return merged;
 };

package/package.json

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