@revenuecat/purchases-ui-js 4.14.2 → 4.16.0

package/dist/components/paywall/Sheet.svelte

@@ -16,9 +16,19 @@
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import Stack from "../stack/Stack.svelte";
+  import { sheetScrollBound } from "../stack/stack-scroll";
+  import { setPackageSheetContext } from "../../stores/rendered-packages";
+  import { setStackDimensionContext } from "../stack/stack-dimension-context";
+  import {
+    openDefaultSelection,
+    setDefaultSelectionContext,
+  } from "../../stores/default-selection";
 
   const props: SheetProps = $props();
-  const { stack } = props;
+  const { stack, id } = props;
+
+  setDefaultSelectionContext(openDefaultSelection());
+  setPackageSheetContext(id);
 
   const buildConditionContext = useConditionContext({ state: true });
   const { size, background, background_blur, position } = $derived.by(() => {
@@ -28,6 +38,20 @@
     };
   });
 
+  const scrollBound = $derived(
+    sheetScrollBound(
+      {
+        ...stack,
+        ...resolveOverrideProperties(buildConditionContext(), stack.overrides),
+      },
+      size.height.type,
+    ),
+  );
+  // While the sheet is a column, its stack sizes as a vertical stack's child.
+  setStackDimensionContext(() =>
+    scrollBound != null ? "vertical" : undefined,
+  );
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
@@ -54,6 +78,12 @@
         clipOverflow: true,
       }),
       ...mapBackground(colorMode, null, background),
+      // A column, so a scrolling stack shrinks to the sheet, margins included.
+      ...(scrollBound != null
+        ? { display: "flex", "flex-direction": "column" }
+        : {}),
+      ...(scrollBound === "screen" ? { "max-height": "100%" } : {}),
+      ...(scrollBound === "full-screen" ? { height: "100%" } : {}),
     }),
   );
 

package/dist/components/paywall/fixtures/stack-scroll-paywall.d.ts

@@ -0,0 +1,40 @@
+import type { PaywallData } from "../../../types/paywall";
+/** A Fit column that scrolls above a fixed box; the root doesn't scroll. */
+export declare const STACKED_FIT_SCROLL_PAYWALL: PaywallData;
+/** Two Fit columns side by side, each scrolling on its own. */
+export declare const SIDE_BY_SIDE_SCROLL_PAYWALL: PaywallData;
+/**
+ * A centered row with a set height: the short Fit column keeps the row's
+ * centering, and the tall one stops at the row and scrolls.
+ */
+export declare const CENTERED_ROW_SCROLL_PAYWALL: PaywallData;
+/** A row wider than the paywall that scrolls sideways. */
+export declare const HORIZONTAL_SCROLL_PAYWALL: PaywallData;
+/** Content taller than the paywall with the root's scrolling turned off. */
+export declare const ROOT_NO_SCROLL_PAYWALL: PaywallData;
+/**
+ * Stacked columns that go side by side once the paywall is 600 wide, with the
+ * root's scrolling off there, so each column scrolls on its own.
+ */
+export declare const WINDOW_RULE_COLUMNS_PAYWALL: PaywallData;
+/** Scrolling columns whose content is centered and end-aligned. */
+export declare const ALIGNED_SCROLL_PAYWALL: PaywallData;
+/**
+ * A bordered column with a badge, and a rounded one over a video, both
+ * scrolling: the border, badge and video stay put.
+ */
+export declare const DECORATED_SCROLL_PAYWALL: PaywallData;
+/**
+ * A Fit stack, holding a Fit column that scrolls (directly or as a package's
+ * stack), above a fixed box: the wrapper gives way so the box stays in view.
+ */
+export declare const fitAroundFitScrollPaywall: (inPackage: boolean) => PaywallData;
+/** A sheet whose Fit contents scroll: it stops at the screen and they scroll. */
+export declare const SCROLLING_FIT_SHEET_PAYWALL: PaywallData;
+/** A Fit sheet with Fill contents that scroll: it takes the screen's height. */
+export declare const SCROLLING_FILL_IN_FIT_SHEET_PAYWALL: PaywallData;
+/**
+ * A fixed-height sheet whose Fill contents, with large margins, scroll on
+ * their own, inside the margins.
+ */
+export declare const SCROLLING_FILL_SHEET_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/stack-scroll-paywall.js

@@ -0,0 +1,280 @@
+import { STORY_BACKGROUND_VIDEO_FILL } from "../../../stories/video-background-story-fixture";
+import { createTextComponent } from "./helpers";
+// Fixtures for stack scrolling (`overflow`), for the bounded-frame stories in
+// Paywall.stories.svelte.
+const VERTICAL = {
+    type: "vertical",
+    alignment: "center",
+    distribution: "start",
+};
+const FIT = { width: { type: "fit" }, height: { type: "fit" } };
+const ZERO = { bottom: 0, leading: 0, top: 0, trailing: 0 };
+const stack = (props) => ({
+    type: "stack",
+    name: props.id,
+    components: [],
+    dimension: VERTICAL,
+    size: FIT,
+    background: null,
+    background_color: null,
+    badge: null,
+    border: null,
+    margin: ZERO,
+    padding: ZERO,
+    shadow: null,
+    shape: null,
+    spacing: 8,
+    ...props,
+});
+const box = (id, width, height, hex) => stack({
+    id,
+    size: {
+        width: { type: "fixed", value: width },
+        height: { type: "fixed", value: height },
+    },
+    background_color: { light: { type: "hex", value: hex } },
+});
+const rows = (id, count, hex) => Array.from({ length: count }, (_, index) => box(`${id}-${index}`, 140, 100, hex));
+const paywall = (id, root) => ({
+    id,
+    default_locale: "en_US",
+    components_localizations: { en_US: {} },
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: { light: { type: "hex", value: "#ffffff" } },
+            },
+            stack: stack({
+                id: "root",
+                size: { width: { type: "fill" }, height: { type: "fill" } },
+                ...root,
+            }),
+        },
+    },
+});
+const fitScrollingColumn = (id, hex) => stack({ id, overflow: "scroll", components: rows(id, 14, hex) });
+/** A Fit column that scrolls above a fixed box; the root doesn't scroll. */
+export const STACKED_FIT_SCROLL_PAYWALL = paywall("stacked_fit_scroll", {
+    overflow: "default",
+    components: [
+        fitScrollingColumn("column", "#6366f1"),
+        box("offer", 200, 120, "#11d483"),
+    ],
+});
+/** Two Fit columns side by side, each scrolling on its own. */
+export const SIDE_BY_SIDE_SCROLL_PAYWALL = paywall("side_by_side_scroll", {
+    overflow: "default",
+    dimension: { type: "horizontal", alignment: "top", distribution: "start" },
+    components: [
+        fitScrollingColumn("column-a", "#6366f1"),
+        fitScrollingColumn("column-b", "#ff5f5f"),
+    ],
+});
+/**
+ * A centered row with a set height: the short Fit column keeps the row's
+ * centering, and the tall one stops at the row and scrolls.
+ */
+export const CENTERED_ROW_SCROLL_PAYWALL = paywall("centered_row_scroll", {
+    overflow: "default",
+    dimension: { type: "horizontal", alignment: "center", distribution: "start" },
+    components: [
+        stack({
+            id: "short",
+            overflow: "scroll",
+            components: rows("short", 2, "#11d483"),
+        }),
+        fitScrollingColumn("tall", "#6366f1"),
+    ],
+});
+/** A row wider than the paywall that scrolls sideways. */
+export const HORIZONTAL_SCROLL_PAYWALL = paywall("horizontal_scroll", {
+    components: [
+        stack({
+            id: "row",
+            overflow: "scroll",
+            dimension: {
+                type: "horizontal",
+                alignment: "center",
+                distribution: "start",
+            },
+            size: { width: { type: "fill" }, height: { type: "fit" } },
+            components: Array.from({ length: 6 }, (_, index) => box(`card-${index}`, 200, 120, "#6366f1")),
+        }),
+    ],
+});
+/** Content taller than the paywall with the root's scrolling turned off. */
+export const ROOT_NO_SCROLL_PAYWALL = paywall("root_no_scroll", {
+    overflow: "default",
+    components: rows("row", 14, "#ff5f5f"),
+});
+/**
+ * Stacked columns that go side by side once the paywall is 600 wide, with the
+ * root's scrolling off there, so each column scrolls on its own.
+ */
+export const WINDOW_RULE_COLUMNS_PAYWALL = paywall("window_rule_columns", {
+    components: [
+        fitScrollingColumn("column-a", "#6366f1"),
+        fitScrollingColumn("column-b", "#ff5f5f"),
+    ],
+    overrides: [
+        {
+            conditions: [
+                { type: "window_width_condition", operator: ">=", value: 600 },
+            ],
+            properties: {
+                overflow: "default",
+                dimension: {
+                    type: "horizontal",
+                    alignment: "top",
+                    distribution: "start",
+                },
+            },
+        },
+    ],
+});
+const scrollingColumn = (id, hex, props = {}) => stack({
+    id,
+    overflow: "scroll",
+    size: { width: { type: "fit" }, height: { type: "fixed", value: 300 } },
+    components: rows(id, 6, hex),
+    ...props,
+});
+/** Scrolling columns whose content is centered and end-aligned. */
+export const ALIGNED_SCROLL_PAYWALL = paywall("aligned_scroll", {
+    overflow: "default",
+    dimension: { type: "horizontal", alignment: "top", distribution: "start" },
+    components: [
+        scrollingColumn("centered", "#6366f1", {
+            dimension: { ...VERTICAL, distribution: "center" },
+        }),
+        scrollingColumn("end", "#ff5f5f", {
+            dimension: { ...VERTICAL, distribution: "end" },
+        }),
+    ],
+});
+const ROUNDED = {
+    type: "rectangle",
+    corners: {
+        top_leading: 24,
+        top_trailing: 24,
+        bottom_leading: 24,
+        bottom_trailing: 24,
+    },
+};
+/**
+ * A bordered column with a badge, and a rounded one over a video, both
+ * scrolling: the border, badge and video stay put.
+ */
+export const DECORATED_SCROLL_PAYWALL = paywall("decorated_scroll", {
+    overflow: "default",
+    dimension: { type: "horizontal", alignment: "top", distribution: "start" },
+    spacing: 24,
+    padding: { top: 24, bottom: 0, leading: 24, trailing: 0 },
+    components: [
+        scrollingColumn("bordered", "#6366f1", {
+            shape: ROUNDED,
+            border: {
+                color: { light: { type: "hex", value: "#11d483" } },
+                width: 10,
+            },
+            badge: {
+                style: "overlay",
+                alignment: "top_trailing",
+                stack: box("badge", 48, 24, "#ffb800"),
+            },
+        }),
+        scrollingColumn("video", "#ff5f5f", {
+            shape: ROUNDED,
+            background: STORY_BACKGROUND_VIDEO_FILL,
+        }),
+    ],
+});
+/**
+ * A Fit stack, holding a Fit column that scrolls (directly or as a package's
+ * stack), above a fixed box: the wrapper gives way so the box stays in view.
+ */
+export const fitAroundFitScrollPaywall = (inPackage) => {
+    const column = fitScrollingColumn("column", "#6366f1");
+    const scroller = inPackage
+        ? {
+            type: "package",
+            id: "package",
+            name: "package",
+            package_id: "$rc_monthly",
+            is_selected_by_default: true,
+            stack: column,
+        }
+        : column;
+    return paywall(`fit_around_fit_scroll_${inPackage ? "package" : "stack"}`, {
+        overflow: "default",
+        components: [
+            stack({ id: "wrapper", components: [scroller] }),
+            box("offer", 200, 120, "#11d483"),
+        ],
+    });
+};
+const sheetPaywall = (id, sheet) => ({
+    ...paywall(id, {
+        components: [
+            {
+                type: "button",
+                id: "open-sheet",
+                name: "open-sheet",
+                action: {
+                    type: "navigate_to",
+                    destination: "sheet",
+                    sheet: {
+                        type: "sheet",
+                        id: `${id}-sheet`,
+                        name: "sheet",
+                        size: { width: { type: "fill" }, height: { type: "fit" } },
+                        background_blur: false,
+                        ...sheet,
+                    },
+                },
+                stack: stack({
+                    id: "open-sheet-stack",
+                    components: [
+                        createTextComponent({
+                            id: "open-sheet-text",
+                            textLid: "open_sheet",
+                        }),
+                    ],
+                }),
+            },
+        ],
+    }),
+    components_localizations: { en_US: { open_sheet: "Open sheet" } },
+});
+/** A sheet whose Fit contents scroll: it stops at the screen and they scroll. */
+export const SCROLLING_FIT_SHEET_PAYWALL = sheetPaywall("scrolling_fit_sheet", {
+    stack: stack({
+        id: "sheet-stack",
+        overflow: "scroll",
+        components: rows("sheet-row", 14, "#6366f1"),
+    }),
+});
+/** A Fit sheet with Fill contents that scroll: it takes the screen's height. */
+export const SCROLLING_FILL_IN_FIT_SHEET_PAYWALL = sheetPaywall("scrolling_fill_in_fit_sheet", {
+    stack: stack({
+        id: "sheet-stack",
+        overflow: "scroll",
+        size: { width: { type: "fill" }, height: { type: "fill" } },
+        components: rows("sheet-row", 14, "#ff5f5f"),
+    }),
+});
+/**
+ * A fixed-height sheet whose Fill contents, with large margins, scroll on
+ * their own, inside the margins.
+ */
+export const SCROLLING_FILL_SHEET_PAYWALL = sheetPaywall("scrolling_fill_sheet", {
+    size: { width: { type: "fill" }, height: { type: "fixed", value: 400 } },
+    stack: stack({
+        id: "sheet-stack",
+        overflow: "scroll",
+        size: { width: { type: "fill" }, height: { type: "fill" } },
+        margin: { top: 40, bottom: 40, leading: 40, trailing: 40 },
+        components: rows("sheet-row", 14, "#ff5f5f"),
+    }),
+});

package/dist/components/paywall/fixtures/window-rule-packages-paywall.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from "../../../types/component";
+import type { PaywallData } from "../../../types/paywall";
+import type { PackageProps } from "../../../types/components/package";
+import type { OverrideCondition } from "../../../types/overrides";
+export declare const WIDE: OverrideCondition[];
+/** A package card whose border shows when it's selected. */
+export declare const plan: (packageId: string, label: string, props?: Partial<PackageProps>) => PackageProps;
+/** `components` above a purchase button, with the plan labels localized. */
+export declare const packagesPaywall: (components: Component[], localizations?: Record<string, string>) => PaywallData;
+/**
+ * The annual plan, selected by default, hides at 600 wide and up, where a
+ * monthly plan shows instead, so the selection moves to it.
+ */
+export declare const WINDOW_RULE_PACKAGES_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/window-rule-packages-paywall.js

@@ -0,0 +1,89 @@
+import { createPackageComponent, createStack, createTextComponent, } from "./helpers";
+export const WIDE = [
+    { type: "window_width_condition", operator: ">=", value: 600 },
+];
+/** A package card whose border shows when it's selected. */
+export const plan = (packageId, label, props = {}) => {
+    const pkg = createPackageComponent({
+        id: `${label}-${packageId}`,
+        name: label,
+        package_id: packageId,
+        is_selected_by_default: false,
+        components: [createTextComponent({ id: `${label}-text`, textLid: label })],
+    });
+    pkg.stack = {
+        ...pkg.stack,
+        size: { width: { type: "fill" }, height: { type: "fit" } },
+        padding: { top: 16, bottom: 16, leading: 16, trailing: 16 },
+        border: { color: { light: { type: "hex", value: "#dddddd" } }, width: 2 },
+        overrides: [
+            {
+                conditions: [{ type: "selected" }],
+                properties: {
+                    border: {
+                        color: { light: { type: "hex", value: "#6366f1" } },
+                        width: 2,
+                    },
+                },
+            },
+        ],
+    };
+    return { ...pkg, ...props };
+};
+const purchaseButton = {
+    type: "purchase_button",
+    id: "purchase",
+    name: "Purchase",
+    stack: createStack({
+        id: "purchase-stack",
+        name: "Purchase Stack",
+        components: [createTextComponent({ id: "purchase-text", textLid: "buy" })],
+    }),
+};
+/** `components` above a purchase button, with the plan labels localized. */
+export const packagesPaywall = (components, localizations = {}) => ({
+    id: "window_rule_packages",
+    default_locale: "en_US",
+    components_localizations: {
+        en_US: {
+            annual: "Annual (hidden at 600 wide and up)",
+            monthly: "Monthly (shown at 600 wide and up)",
+            weekly: "Weekly",
+            buy: "Purchase",
+            ...localizations,
+        },
+    },
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: { light: { type: "hex", value: "#ffffff" } },
+            },
+            stack: {
+                ...createStack({
+                    id: "root",
+                    name: "root",
+                    components: [...components, purchaseButton],
+                }),
+                size: { width: { type: "fill" }, height: { type: "fill" } },
+                padding: { top: 16, bottom: 16, leading: 16, trailing: 16 },
+                spacing: 12,
+            },
+        },
+    },
+});
+/**
+ * The annual plan, selected by default, hides at 600 wide and up, where a
+ * monthly plan shows instead, so the selection moves to it.
+ */
+export const WINDOW_RULE_PACKAGES_PAYWALL = packagesPaywall([
+    plan("$rc_annual", "annual", {
+        is_selected_by_default: true,
+        overrides: [{ conditions: WIDE, properties: { visible: false } }],
+    }),
+    plan("$rc_monthly", "monthly", {
+        visible: false,
+        overrides: [{ conditions: WIDE, properties: { visible: true } }],
+    }),
+    plan("$rc_weekly", "weekly"),
+]);

package/dist/components/paywall/fixtures/window-size-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../types/paywall";
+export declare const WINDOW_SIZE_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/window-size-paywall.js

@@ -0,0 +1,48 @@
+import { createStack, createTextComponent } from "./helpers";
+// One text per window size rule: each reads its matched copy while its rule
+// matches the paywall's box.
+const layoutText = createTextComponent({
+    id: "layout-text",
+    textLid: "narrow",
+});
+layoutText.overrides = [
+    {
+        conditions: [
+            { type: "window_width_condition", operator: ">=", value: 600 },
+        ],
+        properties: { text_lid: "wide" },
+    },
+];
+const orientationText = createTextComponent({
+    id: "orientation-text",
+    textLid: "portrait",
+});
+orientationText.overrides = [
+    {
+        conditions: [
+            { type: "window_aspect_ratio_condition", operator: ">", value: 1 },
+        ],
+        properties: { text_lid: "landscape" },
+    },
+];
+export const WINDOW_SIZE_PAYWALL = {
+    id: "window-size-paywall",
+    default_locale: "en_US",
+    components_localizations: {
+        en_US: {
+            narrow: "Width under 600px",
+            wide: "Width 600px or more",
+            portrait: "Portrait or square",
+            landscape: "Landscape",
+        },
+    },
+    components_config: {
+        base: {
+            stack: createStack({
+                id: "root-stack",
+                name: "Root Stack",
+                components: [layoutText, orientationText],
+            }),
+        },
+    },
+};

package/dist/components/stack/Stack.svelte

@@ -30,6 +30,15 @@
     mapStackSize,
   } from "./stack-utils";
   import { setStackDimensionContext } from "./stack-dimension-context";
+  import {
+    fitScrollerParentAxis,
+    fitScrollSizing,
+    rootScrollStyle,
+    setStackScrollContext,
+    setStackSetHeightContext,
+    stackHasSetHeight,
+    stackScrollAxis,
+  } from "./stack-scroll";
 
   interface MiscProps {
     onclick?: () => void;
@@ -37,10 +46,18 @@
     style?: CSS;
     class?: string;
     testId?: string;
+    /** The paywall's root stack, which the paywall scrolls vertically. */
+    rootStack?: boolean;
   }
 
   const props: StackProps & MiscProps = $props();
-  const { onclick, children, class: classProp, testId } = props;
+  const {
+    onclick,
+    children,
+    class: classProp,
+    testId,
+    rootStack = false,
+  } = props;
 
   const buildConditionContext = useConditionContext({
     state: true,
@@ -60,6 +77,7 @@
     shadow,
     badge,
     visible,
+    overflow,
   } = $derived.by(() => {
     return {
       ...props,
@@ -70,6 +88,25 @@
     () => dimension.type,
   );
 
+  const scrollAxis = $derived(
+    overflow === "scroll" ? stackScrollAxis(dimension.type, rootStack) : null,
+  );
+  // The root scrolls vertically unless its overflow is "default".
+  const rootScrolls = $derived(rootStack && overflow !== "default");
+  const getParentHasSetHeight = setStackSetHeightContext(() =>
+    stackHasSetHeight(size, rootStack),
+  );
+  const getParentScrollAxis = setStackScrollContext(
+    () => scrollAxis ?? (rootScrolls ? "y" : null),
+  );
+  // Like the SDKs' scroll view, an inner box scrolls the padded contents while
+  // the stack keeps its background, border and badge in place.
+  const scrollsInside = $derived(scrollAxis !== null && !rootStack);
+  const sizingAxis = $derived(
+    scrollAxis ??
+      fitScrollerParentAxis(size, components, buildConditionContext()),
+  );
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
@@ -82,15 +119,28 @@
   });
   const borderRadiusCss = $derived(mapBorderRadius(shape));
 
+  const layoutStyle = $derived({
+    ...mapDimension(dimension),
+    gap: px(spacing),
+    padding: mapSpacing(padding),
+  });
+  const scrollDirection = $derived(scrollAxis === "x" ? "row" : "column");
+
   const stackStyle = $derived(
     css({
       display: "flex",
       position: "relative",
       ...mapStackSize(size, getParentStackDimension?.()),
-      ...mapDimension(dimension),
-      gap: px(spacing),
+      ...fitScrollSizing(
+        sizingAxis,
+        size,
+        getParentStackDimension?.(),
+        getParentScrollAxis?.(),
+        getParentHasSetHeight?.(),
+      ),
+      ...(scrollsInside ? { "flex-direction": scrollDirection } : layoutStyle),
+      ...(rootStack ? rootScrollStyle(overflow, scrollAxis) : {}),
       margin: mapSpacing(margin),
-      padding: mapSpacing(padding),
       ...mapBackground(colorMode, background_color, background),
       ...mapBorder(colorMode, border),
       "border-radius": borderRadiusCss,
@@ -104,6 +154,24 @@
     }),
   );
 
+  // Above the stack's overlay, so it can be scrolled and clicked.
+  const scrollViewportStyle = $derived(
+    css({
+      position: "relative",
+      display: "flex",
+      "flex-direction": scrollDirection,
+      flex: "1 1 auto",
+      [scrollAxis === "x" ? "min-width" : "min-height"]: 0,
+      "overflow-x": scrollAxis === "x" ? "auto" : "hidden",
+      "overflow-y": scrollAxis === "y" ? "auto" : "hidden",
+    }),
+  );
+  // At least as big as the viewport and never smaller than its contents, so
+  // centered or end-aligned contents can always be scrolled to.
+  const scrollContentStyle = $derived(
+    css({ display: "flex", flex: "1 0 auto", ...layoutStyle }),
+  );
+
   const getLayerStyle = (index: number): string => {
     if (dimension.type !== "zlayer") {
       return "";
@@ -184,16 +252,26 @@
           </div>
         {/each}
       </div>
+      {@render children?.()}
+    {:else if scrollsInside}
+      <div class="rc-stack-scroll" style={scrollViewportStyle}>
+        <div style={scrollContentStyle}>
+          {@render contents()}
+        </div>
+      </div>
     {:else}
-      {#each components as component}
-        <Node nodeData={component} />
-      {/each}
+      {@render contents()}
     {/if}
-
-    {@render children?.()}
   </svelte:element>
 {/if}
 
+{#snippet contents()}
+  {#each components as component}
+    <Node nodeData={component} />
+  {/each}
+  {@render children?.()}
+{/snippet}
+
 <style>
   .stack {
     appearance: none;