@revenuecat/purchases-ui-js 4.12.1 → 4.12.3

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/skeleton-loader/SkeletonLoader.svelte

@@ -57,7 +57,10 @@
       ...(margin
         ? {
             ...margin,
-            bottom: Math.max(margin.bottom, minDistanceBetweenPurchaseButtons),
+            bottom: Math.max(
+              margin.bottom ?? 0,
+              minDistanceBetweenPurchaseButtons,
+            ),
           }
         : {
             ...DEFAULT_SPACING,

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

@@ -5,6 +5,7 @@
   import { localizations } from "../../stories/fixtures";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import type { StackProps } from "../../types/components/stack";
+  import type { Spacing } from "../../types";
   import type { Component } from "../../types/component";
   import { STORY_BACKGROUND_VIDEO_FILL } from "../../stories/video-background-story-fixture";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
@@ -107,6 +108,62 @@
     },
   ];
 
+  function marginBox(
+    id: string,
+    labelLid: string,
+    margin: Spacing,
+  ): StackProps {
+    return {
+      type: "stack",
+      id,
+      name: id,
+      components: [
+        {
+          type: "text",
+          id: `${id}-label`,
+          name: "Label",
+          text_lid: labelLid,
+          color: { light: { type: "hex", value: "#ffffff" } },
+          font_name: null,
+          font_size: "body_m",
+          font_weight: "bold",
+          horizontal_alignment: "leading",
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+        },
+        {
+          type: "text",
+          id: `${id}-expected`,
+          name: "Expected",
+          text_lid: "margin_expected",
+          color: { light: { type: "hex", value: "#ffffff" } },
+          font_name: null,
+          font_size: "body_s",
+          font_weight: "regular",
+          horizontal_alignment: "leading",
+          size: { width: { type: "fit" }, height: { type: "fit" } },
+        },
+      ] as unknown as TextNodeProps[],
+      size: { width: { type: "fill" }, height: { type: "fit" } },
+      dimension: {
+        type: "vertical",
+        alignment: "leading",
+        distribution: "start",
+      },
+      spacing: 4,
+      margin,
+      padding: { top: 12, trailing: 12, bottom: 12, leading: 12 },
+      background_color: {
+        light: { type: "hex", value: "#47aab1" },
+        dark: { type: "hex", value: "#47aab1" },
+      },
+      background: null,
+      border: null,
+      shape: null,
+      shadow: null,
+      badge: null,
+    };
+  }
+
   const { Story } = defineMeta({
     title: "Components/Stack",
     component: Stack,
@@ -483,6 +540,44 @@
   }}
 />
 
+<Story
+  name="Nested stack — partial margin"
+  parameters={{
+    docs: {
+      description: {
+        story:
+          "The first inner stack only sets `margin.top`; the second sets all four sides explicitly. Missing sides render as 0, matching iOS and Android, so both boxes should look identical: 48px below whatever is above them and flush with both horizontal edges.",
+      },
+    },
+  }}
+  args={{
+    size: {
+      width: { type: "fixed", value: 300 },
+      height: { type: "fit" },
+    },
+    dimension: {
+      type: "vertical",
+      alignment: "leading",
+      distribution: "start",
+    },
+    spacing: 0,
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    background_color: {
+      light: { type: "hex", value: "#F0F0F0" },
+      dark: { type: "hex", value: "#F0F0F0" },
+    },
+    components: [
+      marginBox("partial", "partial_margin", { top: 48 }),
+      marginBox("explicit", "explicit_margin", {
+        top: 48,
+        trailing: 0,
+        bottom: 0,
+        leading: 0,
+      }),
+    ],
+  }}
+/>
+
 <Story
   name="Complex - pill"
   args={{

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/components/timeline/TimelineItem.svelte

@@ -3,7 +3,7 @@
   import { getColorModeContext } from "../../stores/color-mode";
   import { useConditionContext } from "../../stores/condition-context.svelte";
   import type { TimelineItemProps } from "../../types/components/timeline";
-  import { css, mapColor } from "../../utils/base-utils";
+  import { css, mapColor, mapSpacing } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import Icon from "../icon/Icon.svelte";
   import TextNode from "../text/TextNode.svelte";
@@ -56,8 +56,7 @@
       "z-index": "1",
       width: `${connector.width}px`,
       height: `100%`, // Extend beyond icon
-      "padding-top": `${connector.margin.top}px`,
-      "padding-bottom": `${connector.margin.bottom}px`,
+      padding: mapSpacing(connector.margin),
     });
   });
 

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/stories/fixtures.d.ts

@@ -18,6 +18,9 @@ export declare const localizations: {
         id2: string;
         id3: string;
         badge: string;
+        partial_margin: string;
+        explicit_margin: string;
+        margin_expected: string;
         countdown: string;
         ended: string;
         days: string;

package/dist/stories/fixtures.js

@@ -17317,6 +17317,9 @@ export const localizations = {
         id2: "Item 2",
         id3: "Item 3",
         badge: "Badge Text",
+        partial_margin: "margin: { top: 48 }",
+        explicit_margin: "margin: { top: 48, trailing: 0, bottom: 0, leading: 0 }",
+        margin_expected: "48px gap above, edge to edge horizontally",
         countdown: "{{ count_days_with_zero }} : {{ count_hours_with_zero }} : {{ count_minutes_with_zero }} : {{ count_seconds_with_zero }}",
         ended: "Time's up!",
         days: "{{ count_days_without_zero }} days",

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

@@ -20,8 +20,8 @@ export interface TimelineProps extends BaseComponent {
 export interface TimelineConnectorProps {
     width: number;
     margin: {
-        top: number;
-        bottom: number;
+        top?: number;
+        bottom?: number;
     };
     color: ColorGradientScheme | null;
 }

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/types.d.ts

@@ -87,10 +87,10 @@ export type BorderType = {
     width: number;
 };
 export type Spacing = {
-    top: number;
-    bottom: number;
-    leading: number;
-    trailing: number;
+    top?: number;
+    bottom?: number;
+    leading?: number;
+    trailing?: number;
 };
 export type CornerRadiusType = {
     bottom_leading: number;

package/dist/utils/base-utils.js

@@ -34,7 +34,7 @@ export function mapSize(size) {
     }
 }
 export function mapSpacing(spacing) {
-    const { top, bottom, leading, trailing } = spacing ?? DEFAULT_SPACING;
+    const { top = 0, bottom = 0, leading = 0, trailing = 0, } = spacing ?? DEFAULT_SPACING;
     return mapTuple(top, trailing, bottom, leading);
 }
 export function mapColorInfo(info) {

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