@revenuecat/purchases-ui-js 4.12.0 → 4.12.2

package/dist/components/package/Package.svelte

@@ -15,6 +15,11 @@
     setPackageInfoContext,
   } from "../../stores/packageInfo";
   import type { PackageInfo, VariableDictionary } from "../../types/variables";
+  import {
+    getRelativeDiscountScopeContext,
+    getSelectedPackageScopeContext,
+  } from "../../stores/relativeDiscount";
+  import { withScopedRelativeDiscount } from "../../utils/relative-discount";
 
   const { stack, package_id, is_selected_by_default, name }: PackageProps =
     $props();
@@ -78,16 +83,29 @@
 
   // Use $derived to make variables reactive to package_id changes
   const fallbackVariables = getVariablesContext();
+  const relativeDiscountScope = getRelativeDiscountScopeContext();
   const computedVariables = $derived.by(() => {
     const packageVariables = $variablesPerPackage?.[package_id];
     if (packageVariables === undefined) {
       return $fallbackVariables;
     }
 
-    return {
-      ...$baseVariables,
-      ...packageVariables,
+    return withScopedRelativeDiscount(
+      { ...$baseVariables, ...packageVariables },
+      $infoPerPackage?.[package_id],
+      $relativeDiscountScope,
+    );
+  });
+  const selectedPackageScope = getSelectedPackageScopeContext();
+  $effect(() => {
+    if (!isSelected || !selectedPackageScope) return;
+    const entry = {
+      packageId: package_id,
+      mostExpensivePricePerMonth: $relativeDiscountScope,
     };
+    selectedPackageScope.set(entry);
+    return () =>
+      selectedPackageScope.update((e) => (e === entry ? undefined : e));
   });
   const variablesStore = writable<VariableDictionary | undefined>(
     computedVariables,

package/dist/components/paywall/Paywall.stories.svelte

@@ -23,6 +23,7 @@
     zStackTemplate,
   } from "../../stories/fixtures";
   import { waitForAnimations } from "storybook/internal/preview-api";
+  import { expect, userEvent, within } from "storybook/test";
   import { viewportDecorator } from "../../stories/viewport-decorator";
   import { BACKGROUND_PAYWALL } from "./fixtures/background-paywall";
   import { FIXED_HEIGHT_STACK_PAYWALL } from "./fixtures/fixed-height-stack-paywall";
@@ -36,6 +37,12 @@
   import { VARIABLES } from "./fixtures/variables";
   import { CUSTOM_VARIABLES_PAYWALL } from "./fixtures/custom-variables-paywall";
   import { TAB_STATE_PAYWALL } from "../tabs/fixtures/tab-state-paywall";
+  import {
+    RELATIVE_DISCOUNT_NESTED_TABS_PAYWALL,
+    RELATIVE_DISCOUNT_TABS_INFO_PER_PACKAGE,
+    RELATIVE_DISCOUNT_TABS_PAYWALL,
+    RELATIVE_DISCOUNT_TABS_VARIABLES_PER_PACKAGE,
+  } from "../tabs/fixtures/relative-discount-tabs-paywall";
   import { COUNTDOWN_PAYWALL } from "../countdown/fixtures/countdown-paywall";
   import { mockDateDecorator } from "storybook-mock-date-decorator";
   import {
@@ -714,6 +721,70 @@
   }}
 />
 
+<Story
+  name="Relative Discount Scoped To Tab"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByText("Save 17%")).toBeInTheDocument();
+    await expect(
+      canvas.getByText("Subscribe and save 17%"),
+    ).toBeInTheDocument();
+  }}
+  args={{
+    paywallData: RELATIVE_DISCOUNT_TABS_PAYWALL,
+    variablesPerPackage: RELATIVE_DISCOUNT_TABS_VARIABLES_PER_PACKAGE,
+    infoPerPackage: RELATIVE_DISCOUNT_TABS_INFO_PER_PACKAGE,
+  }}
+/>
+
+<Story
+  name="Relative Discount Scoped To Tab - Switched Tab"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByText("Radio Plus"));
+    await expect(await canvas.findByText("Save 25%")).toBeInTheDocument();
+    await expect(
+      canvas.getByText("Subscribe and save 25%"),
+    ).toBeInTheDocument();
+  }}
+  args={{
+    paywallData: RELATIVE_DISCOUNT_TABS_PAYWALL,
+    variablesPerPackage: RELATIVE_DISCOUNT_TABS_VARIABLES_PER_PACKAGE,
+    infoPerPackage: RELATIVE_DISCOUNT_TABS_INFO_PER_PACKAGE,
+  }}
+/>
+
+<Story
+  name="Relative Discount Scoped To Tab - Nested Tabs"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByText("Radio Plus yearly €89.99"));
+    await expect(
+      await canvas.findByText("Subscribe and save 25%"),
+    ).toBeInTheDocument();
+  }}
+  args={{
+    paywallData: RELATIVE_DISCOUNT_NESTED_TABS_PAYWALL,
+    variablesPerPackage: RELATIVE_DISCOUNT_TABS_VARIABLES_PER_PACKAGE,
+    infoPerPackage: RELATIVE_DISCOUNT_TABS_INFO_PER_PACKAGE,
+  }}
+/>
+
+<Story
+  name="Relative Discount Scoped To Tab - No Host Prices"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByText("Save 58%")).toBeInTheDocument();
+    await expect(
+      canvas.getByText("Subscribe and save 58%"),
+    ).toBeInTheDocument();
+  }}
+  args={{
+    paywallData: RELATIVE_DISCOUNT_TABS_PAYWALL,
+    variablesPerPackage: RELATIVE_DISCOUNT_TABS_VARIABLES_PER_PACKAGE,
+  }}
+/>
+
 <Story
   name="Duelinuge Paywall Trial Override"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -43,6 +43,11 @@
   import { STICKY_OVERLAY_Z_INDEX } from "../../utils/constants";
   import { applyDocumentBackground } from "../../utils/document-background";
   import { registerFonts } from "../../utils/font-utils";
+  import { withScopedRelativeDiscount } from "../../utils/relative-discount";
+  import {
+    setSelectedPackageScopeContext,
+    type SelectedPackageScopeStore,
+  } from "../../stores/relativeDiscount";
   import {
     collectPackageIdsInDisplayOrder,
     findSelectedPackageId,
@@ -424,14 +429,26 @@
   setInputValidationContext(inputValidationContext);
   setInitialInputSelectionsContext(initialInputSelections);
 
-  const variables: VariablesStore = derived(selectedPackageId, (packageId) => {
-    const packageVars = variablesPerPackage[packageId || ""];
-    return {
-      ...mergedCustomVars,
-      ...globalVariables,
-      ...packageVars,
-    };
-  });
+  const selectedPackageScope: SelectedPackageScopeStore = writable(undefined);
+  setSelectedPackageScopeContext(selectedPackageScope);
+
+  const variables: VariablesStore = derived(
+    [selectedPackageId, selectedPackageScope],
+    ([packageId, scope]) => {
+      const packageVars = variablesPerPackage[packageId || ""];
+      return withScopedRelativeDiscount(
+        {
+          ...mergedCustomVars,
+          ...globalVariables,
+          ...packageVars,
+        },
+        infoPerPackage[packageId || ""],
+        scope?.packageId === packageId
+          ? scope?.mostExpensivePricePerMonth
+          : undefined,
+      );
+    },
+  );
 
   setVariablesContext(variables);
 

package/dist/components/purchase-button/custom-web-checkout-url.d.ts

@@ -12,6 +12,7 @@ type CustomWebCheckoutContext = {
  * Mirrors the native SDKs: source, then app user ID, env and package when
  * configured. The source is the host's own, so it survives a same-tab hop.
  * Same-named params are replaced; an unparseable URL is returned unchanged.
+ * Script-capable URLs resolve to undefined, so the button purchases instead.
  */
-export declare const buildCustomWebCheckoutURL: (url: string, config: CustomURLConfig, { packageId, appUserId, isSandbox, rcSource }: CustomWebCheckoutContext) => string;
+export declare const buildCustomWebCheckoutURL: (url: string, config: CustomURLConfig, { packageId, appUserId, isSandbox, rcSource }: CustomWebCheckoutContext) => string | undefined;
 export {};

package/dist/components/purchase-button/custom-web-checkout-url.js

@@ -1,7 +1,9 @@
+const SCRIPT_PROTOCOLS = new Set(["javascript:", "data:", "vbscript:"]);
 /**
  * Mirrors the native SDKs: source, then app user ID, env and package when
  * configured. The source is the host's own, so it survives a same-tab hop.
  * Same-named params are replaced; an unparseable URL is returned unchanged.
+ * Script-capable URLs resolve to undefined, so the button purchases instead.
  */
 export const buildCustomWebCheckoutURL = (url, config, { packageId, appUserId, isSandbox, rcSource }) => {
     let parsed;
@@ -11,6 +13,9 @@ export const buildCustomWebCheckoutURL = (url, config, { packageId, appUserId, i
     catch {
         return url;
     }
+    if (SCRIPT_PROTOCOLS.has(parsed.protocol)) {
+        return undefined;
+    }
     const { searchParams } = parsed;
     if (rcSource !== undefined) {
         searchParams.set("rc_source", rcSource);

package/dist/components/tabs/Tabs.svelte

@@ -25,6 +25,11 @@
   import { derived, get, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
   import { setTabsContext, type SelectTab } from "./tabs-context";
+  import {
+    getRelativeDiscountScopeContext,
+    setRelativeDiscountScopeContext,
+  } from "../../stores/relativeDiscount";
+  import { mostExpensivePricePerMonth } from "../../utils/relative-discount";
 
   const props: TabsProps = $props();
   const { name, control, tabs, default_tab_id, state_updates } = props;
@@ -72,7 +77,7 @@
     }),
   );
 
-  const { emitComponentInteraction } = getPaywallContext();
+  const { emitComponentInteraction, infoPerPackage } = getPaywallContext();
   const defaultTabIndex = Math.max(
     0,
     tabs.findIndex((tab) => tab.id === default_tab_id),
@@ -137,6 +142,16 @@
     selectTab,
     isActive: derived(selectedTabIndex, (value) => value === 1),
   });
+
+  const parentScope = getRelativeDiscountScopeContext();
+  setRelativeDiscountScopeContext(
+    derived(
+      [tab, infoPerPackage, parentScope],
+      ([selectedTab, info, parent]) =>
+        (selectedTab && mostExpensivePricePerMonth(selectedTab, info)) ??
+        parent,
+    ),
+  );
 </script>
 
 {#if isVisible}

package/dist/components/tabs/fixtures/relative-discount-tabs-paywall.d.ts

@@ -0,0 +1,11 @@
+import type { TabsProps } from "../../../types/components/tabs";
+import type { PaywallData } from "../../../types/paywall";
+import type { PackageInfo, VariableDictionary } from "../../../types/variables";
+export declare const RELATIVE_DISCOUNT_TABS_TABS: TabsProps;
+/** Two tabs whose most expensive monthly prices differ, like a multi-brand bundle paywall. */
+export declare const RELATIVE_DISCOUNT_TABS_PAYWALL: PaywallData;
+/** A package directly in an outer tab, next to nested tabs whose packages count toward it. */
+export declare const RELATIVE_DISCOUNT_NESTED_TABS_PAYWALL: PaywallData;
+export declare const RELATIVE_DISCOUNT_TABS_INFO_PER_PACKAGE: Record<string, PackageInfo>;
+/** What the host computes against the whole offering (€9.99/month). */
+export declare const RELATIVE_DISCOUNT_TABS_VARIABLES_PER_PACKAGE: Record<string, VariableDictionary>;

package/dist/components/tabs/fixtures/relative-discount-tabs-paywall.js

@@ -0,0 +1,155 @@
+import { createPackageComponent, createStack, createTextComponent, } from "../../paywall/fixtures/helpers";
+const zeroSpacing = { bottom: 0, leading: 0, top: 0, trailing: 0 };
+function tabButton(tabId, tabIndex) {
+    return {
+        type: "tab_control_button",
+        id: `${tabId}-button`,
+        name: `${tabId} button`,
+        tab_id: tabId,
+        tab_index: tabIndex,
+        stack: createStack({
+            id: `${tabId}-button-stack`,
+            name: `${tabId} button stack`,
+            components: [
+                createTextComponent({ id: `${tabId}-button-text`, textLid: tabId }),
+            ],
+        }),
+    };
+}
+function packageWithBadge(packageId, isSelectedByDefault) {
+    return createPackageComponent({
+        id: `${packageId}-package`,
+        name: packageId,
+        package_id: packageId,
+        is_selected_by_default: isSelectedByDefault,
+        components: [
+            createTextComponent({ id: `${packageId}-name`, textLid: packageId }),
+            createTextComponent({ id: `${packageId}-save`, textLid: "save" }),
+        ],
+    });
+}
+function tab(id, components) {
+    return {
+        type: "tab",
+        id,
+        name: id,
+        stack: createStack({
+            id: `${id}-stack`,
+            name: `${id} stack`,
+            components: [
+                {
+                    type: "tab_control",
+                    id: `${id}-control`,
+                    name: `${id} control`,
+                },
+                ...components,
+            ],
+        }),
+    };
+}
+function tabsOf(id, tabList) {
+    return {
+        type: "tabs",
+        id,
+        name: id,
+        control: {
+            type: "buttons",
+            stack: createStack({
+                id: `${id}-buttons`,
+                name: `${id} buttons`,
+                components: tabList.map((t, index) => tabButton(t.id, index)),
+            }),
+        },
+        default_tab_id: tabList[0].id,
+        tabs: tabList,
+        size: { width: { type: "fill" }, height: { type: "fit" } },
+        padding: zeroSpacing,
+        margin: zeroSpacing,
+        background: null,
+        shape: null,
+        border: null,
+        shadow: null,
+    };
+}
+const purchaseButton = {
+    type: "purchase_button",
+    id: "purchase-button",
+    name: "Purchase button",
+    stack: createStack({
+        id: "purchase-button-stack",
+        name: "Purchase button stack",
+        components: [
+            createTextComponent({ id: "purchase-button-text", textLid: "purchase" }),
+        ],
+    }),
+};
+export const RELATIVE_DISCOUNT_TABS_TABS = tabsOf("plan-tabs", [
+    tab("radio_x", [
+        packageWithBadge("x_monthly", false),
+        packageWithBadge("x_annual", true),
+    ]),
+    tab("radio_plus", [
+        packageWithBadge("plus_monthly", false),
+        packageWithBadge("plus_annual", true),
+    ]),
+]);
+const localizations = {
+    radio_x: "Radio X Plus",
+    radio_plus: "Radio Plus",
+    bundle: "Bundle",
+    x_monthly: "Radio X monthly €4.99",
+    x_annual: "Radio X yearly €49.99",
+    plus_monthly: "Radio Plus monthly €9.99",
+    plus_annual: "Radio Plus yearly €89.99",
+    save: "Save {{ product.relative_discount }}",
+    purchase: "Subscribe and save {{ product.relative_discount }}",
+};
+function paywall(id, tabs) {
+    return {
+        id,
+        default_locale: "en_US",
+        components_localizations: { en_US: localizations },
+        components_config: {
+            base: {
+                stack: createStack({
+                    id: "root",
+                    name: "Root",
+                    components: [tabs, purchaseButton],
+                }),
+            },
+        },
+    };
+}
+/** Two tabs whose most expensive monthly prices differ, like a multi-brand bundle paywall. */
+export const RELATIVE_DISCOUNT_TABS_PAYWALL = paywall("relative-discount-tabs", RELATIVE_DISCOUNT_TABS_TABS);
+/** A package directly in an outer tab, next to nested tabs whose packages count toward it. */
+export const RELATIVE_DISCOUNT_NESTED_TABS_PAYWALL = paywall("relative-discount-nested-tabs", tabsOf("outer-tabs", [
+    tab("bundle", [
+        packageWithBadge("plus_annual", false),
+        tabsOf("inner-tabs", [
+            tab("radio_x", [
+                packageWithBadge("x_monthly", false),
+                packageWithBadge("x_annual", true),
+            ]),
+            tab("radio_plus", [packageWithBadge("plus_monthly", true)]),
+        ]),
+    ]),
+]));
+const monthly = (price) => Math.round(price * 1_000_000);
+const yearly = (price) => Math.round((price * 1_000_000) / 12);
+export const RELATIVE_DISCOUNT_TABS_INFO_PER_PACKAGE = {
+    x_monthly: { pricePerMonthMicros: monthly(4.99) },
+    x_annual: { pricePerMonthMicros: yearly(49.99) },
+    plus_monthly: { pricePerMonthMicros: monthly(9.99) },
+    plus_annual: { pricePerMonthMicros: yearly(89.99) },
+};
+const hostDiscount = (discount) => ({
+    "product.relative_discount": discount,
+});
+/** What the host computes against the whole offering (€9.99/month). */
+export const RELATIVE_DISCOUNT_TABS_VARIABLES_PER_PACKAGE = {
+    x_monthly: hostDiscount("50%"),
+    x_annual: hostDiscount("58%"),
+    plus_monthly: hostDiscount(""),
+    plus_annual: hostDiscount("25%"),
+};

package/dist/stores/relativeDiscount.d.ts

@@ -0,0 +1,12 @@
+import { type Readable, type Writable } from "svelte/store";
+/** Most expensive monthly price (micros) of the nearest enclosing tab with packages. */
+export type RelativeDiscountScopeStore = Readable<number | undefined>;
+export declare function setRelativeDiscountScopeContext(scope: RelativeDiscountScopeStore): void;
+export declare function getRelativeDiscountScopeContext(): RelativeDiscountScopeStore;
+/** Scope published by the mounted Package that is currently selected. */
+export type SelectedPackageScopeStore = Writable<{
+    packageId: string;
+    mostExpensivePricePerMonth: number | undefined;
+} | undefined>;
+export declare function setSelectedPackageScopeContext(store: SelectedPackageScopeStore): void;
+export declare function getSelectedPackageScopeContext(): SelectedPackageScopeStore | undefined;

package/dist/stores/relativeDiscount.js

@@ -0,0 +1,17 @@
+import { getContext, setContext } from "svelte";
+import { readable } from "svelte/store";
+const key = Symbol("relativeDiscountScope");
+const selectedPackageKey = Symbol("selectedPackageDiscountScope");
+export function setRelativeDiscountScopeContext(scope) {
+    setContext(key, scope);
+}
+const noScopeStore = readable(undefined);
+export function getRelativeDiscountScopeContext() {
+    return (getContext(key) ?? noScopeStore);
+}
+export function setSelectedPackageScopeContext(store) {
+    setContext(selectedPackageKey, store);
+}
+export function getSelectedPackageScopeContext() {
+    return getContext(selectedPackageKey);
+}

package/dist/types/variables.d.ts

@@ -92,5 +92,7 @@ export interface PackageInfo {
     hasTrial?: boolean;
     hasPromoOffer?: boolean;
     webCheckoutURL?: string;
+    /** Monthly-equivalent price in micros; subscriptions only. */
+    pricePerMonthMicros?: number;
 }
 export {};

package/dist/utils/relative-discount.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from "../types/component";
+import type { PackageInfo, VariableDictionary } from "../types/variables";
+/** Highest monthly price among the tab's packages, nested tabs included. */
+export declare function mostExpensivePricePerMonth(tab: Component, infoPerPackage: Record<string, PackageInfo> | undefined): number | undefined;
+/**
+ * Recomputes `product.relative_discount` against `mostExpensivePricePerMonth`.
+ * Returns the host's variables untouched when either price is unknown.
+ */
+export declare function withScopedRelativeDiscount(variables: VariableDictionary | undefined, packageInfo: PackageInfo | undefined, mostExpensivePricePerMonth: number | undefined): VariableDictionary | undefined;

package/dist/utils/relative-discount.js

@@ -0,0 +1,29 @@
+import { collectPackageIds } from "./style-utils";
+/** Highest monthly price among the tab's packages, nested tabs included. */
+export function mostExpensivePricePerMonth(tab, infoPerPackage) {
+    const prices = collectPackageIds(tab)
+        .map((id) => infoPerPackage?.[id]?.pricePerMonthMicros)
+        .filter((price) => price !== undefined);
+    return prices.length ? Math.max(...prices) : undefined;
+}
+/**
+ * Recomputes `product.relative_discount` against `mostExpensivePricePerMonth`.
+ * Returns the host's variables untouched when either price is unknown.
+ */
+export function withScopedRelativeDiscount(variables, packageInfo, mostExpensivePricePerMonth) {
+    const pricePerMonth = packageInfo?.pricePerMonthMicros;
+    if (variables === undefined ||
+        pricePerMonth === undefined ||
+        mostExpensivePricePerMonth === undefined) {
+        return variables;
+    }
+    // Same rounding and < 1% cutoff as purchases-js; free-only scopes have no discount.
+    const discount = mostExpensivePricePerMonth > 0
+        ? ((mostExpensivePricePerMonth - pricePerMonth) * 100) /
+            mostExpensivePricePerMonth
+        : 0;
+    return {
+        ...variables,
+        "product.relative_discount": discount < 1 ? "" : `${discount.toFixed(0)}%`,
+    };
+}

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

@@ -10,6 +10,8 @@ import type { PackageInfo, VariableDictionary } from "../types/variables.js";
  * @returns the id of the first package marked as `is_selected_by_default`, otherwise the first package id, or undefined
  */
 export declare function findSelectedPackageId({ stack, sticky_footer, }: RootPaywall): string | undefined;
+/** Package ids under `root` in depth-first order, duplicates included. */
+export declare function collectPackageIds(root: Component): string[];
 /**
  * Package ids in paywall display order (root stack, then sticky footer).
  * Duplicates keep the first occurrence. Unselected tabs still count.

package/dist/utils/style-utils.js

@@ -93,28 +93,32 @@ export function findSelectedPackageId({ stack, sticky_footer, }) {
     }
     return undefined;
 }
-/**
- * Package ids in paywall display order (root stack, then sticky footer).
- * Duplicates keep the first occurrence. Unselected tabs still count.
- */
-export function collectPackageIdsInDisplayOrder({ stack, sticky_footer, }) {
+/** Package ids under `root` in depth-first order, duplicates included. */
+export function collectPackageIds(root) {
     const ids = [];
-    const seen = new Set();
     const walk = (node) => {
-        if (node.type === "package" && !seen.has(node.package_id)) {
-            seen.add(node.package_id);
+        if (node.type === "package") {
             ids.push(node.package_id);
         }
         for (const child of getPaywallComponentChildNodes(node)) {
             walk(child);
         }
     };
-    walk(stack);
-    if (sticky_footer != null) {
-        walk(sticky_footer);
-    }
+    walk(root);
     return ids;
 }
+/**
+ * Package ids in paywall display order (root stack, then sticky footer).
+ * Duplicates keep the first occurrence. Unselected tabs still count.
+ */
+export function collectPackageIdsInDisplayOrder({ stack, sticky_footer, }) {
+    return [
+        ...new Set([
+            ...collectPackageIds(stack),
+            ...(sticky_footer != null ? collectPackageIds(sticky_footer) : []),
+        ]),
+    ];
+}
 /**
  * Returns the overrides (in array order) whose conditions all match (AND) the
  * given context, without merging their properties.

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.0",
+  "version": "4.12.2",
   "author": {
     "name": "RevenueCat, Inc."
   },