@revenuecat/purchases-ui-js 4.2.0 → 4.3.0

package/dist/components/icon/Icon.svelte

@@ -56,6 +56,18 @@
     }),
   );
 
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
+
   const webpUrl = $derived(`${base_url}/${formats.webp}`);
   const icon = $derived(
     css({
@@ -75,18 +87,6 @@
       "-webkit-mask-repeat": "no-repeat",
     }),
   );
-
-  const isVisible = $derived(
-    evaluateVisibilityConditions(
-      {
-        selectedPackageId: $selectedPackageId,
-        packageInfo: $packageInfo,
-        variables: $variables ?? {},
-      },
-      props.overrides,
-      props.visible,
-    ),
-  );
 </script>
 
 {#if isVisible}

package/dist/components/timeline/Timeline.svelte

@@ -35,6 +35,18 @@
     };
   });
 
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
+
   const timelineStyles = $derived(
     css(
       getTimelineInlineStyles({
@@ -50,18 +62,6 @@
       }),
     ),
   );
-
-  const isVisible = $derived(
-    evaluateVisibilityConditions(
-      {
-        selectedPackageId: $selectedPackageId,
-        packageInfo: $packageInfo,
-        variables: $variables ?? {},
-      },
-      props.overrides,
-      props.visible,
-    ),
-  );
 </script>
 
 {#if isVisible && items.length}

package/dist/stories/fixtures.js

@@ -19129,6 +19129,7 @@ export const paywallWithFooter = {
     updated_at: "2024-12-10T19:23:17Z",
 };
 export const paywallWithHeader = {
+    id: "paywall_with_header",
     asset_base_url: "https://assets.pawwalls.com",
     components_config: {
         base: {
@@ -20697,6 +20698,7 @@ export const paywallWithHeader = {
     updated_at: "2026-04-14T09:50:13Z",
 };
 export const paywallWithTransparentHeaderAndTopImage = {
+    id: "paywall_with_transparent_header_and_top_image",
     asset_base_url: "https://assets.pawwalls.com",
     components_config: {
         base: {

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

@@ -1,4 +1,5 @@
 import type { BaseComponent } from "../base";
+import type { Overrides } from "../overrides";
 import type { StackProps } from "./stack";
 export interface PackageProps extends BaseComponent {
     type: "package";
@@ -6,4 +7,5 @@ export interface PackageProps extends BaseComponent {
     is_selected_by_default: boolean;
     apple_promo_offer_product_code?: string | null;
     stack: StackProps;
+    overrides?: Overrides<PackageProps>;
 }

package/dist/types/overrides.d.ts

@@ -47,7 +47,7 @@ type VariableCondition = {
     type: typeof RuleKey.VariableCondition;
     operator: EqualityOperator;
     variable: string;
-    value: CustomVariableValue;
+    value: CustomVariableValue | string | number | boolean;
 };
 type OverrideCondition = IntroOfferCondition | MultipleIntroOffersCondition | SelectedCondition | HoverCondition | FocusCondition | ErrorCondition | PromoOfferCondition | IntroductoryOfferCondition | PromotionalOfferCondition | SelectedPackageCondition | VariableCondition;
 /**

package/dist/utils/style-utils.js

@@ -177,8 +177,13 @@ const conditionMatches = (condition, context) => {
             return !condition.packages.includes(selected);
     }
     if (condition.type === "variable_condition") {
-        const currentValue = context.variables[condition.variable];
-        const conditionValue = String(condition.value.value);
+        const variableName = condition.variable.replace(/^\$?custom\./, "");
+        const currentValue = context.variables[variableName];
+        // API sends value as a plain scalar; type definition wraps it in CustomVariableValue
+        const rawValue = condition.value;
+        const conditionValue = String(typeof rawValue === "object" && rawValue !== null && "value" in rawValue
+            ? rawValue.value
+            : rawValue);
         if (condition.operator === "=")
             return currentValue === conditionValue;
         if (condition.operator === "!=")

package/package.json

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