@revenuecat/purchases-ui-js 4.8.6 → 4.8.7

package/dist/components/footer/Footer.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import type { FooterProps } from "../../types/components/footer";
-  import { STICKY_OVERLAY_Z_INDEX } from "../../utils/constants";
 
   const { stack }: FooterProps = $props();
 </script>
 
-<div style="z-index: {STICKY_OVERLAY_Z_INDEX};">
+<div>
   <Stack {...stack} />
 </div>
 
 <style>
   div {
-    position: sticky;
-    bottom: 0;
     width: 100%;
 
     display: flex;

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

@@ -39,6 +39,11 @@
     DUELINGUE_PAYWALL,
   } from "./fixtures/express-purchase-button-paywall";
   import { CustomVariableValue } from "../../types/variables";
+  import {
+    paywallWithTransparentFooter,
+    paywallWithCenteredBodyAndFooter,
+    paywallWithHeaderAndFooter,
+  } from "./fixtures/transparent-footer-paywall";
 
   const { Story } = defineMeta({
     title: "Example/Paywall",
@@ -480,6 +485,28 @@
   }}
 />
 
+<Story
+  name="Sticky Footer - transparent (overlaps content)"
+  args={{
+    paywallData: paywallWithTransparentFooter,
+  }}
+/>
+
+<Story
+  name="Sticky Footer - centered body above footer"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  args={{
+    paywallData: paywallWithCenteredBodyAndFooter,
+  }}
+/>
+
+<Story
+  name="Sticky Footer - with header"
+  args={{
+    paywallData: paywallWithHeaderAndFooter,
+  }}
+/>
+
 <Story
   name="Header"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -352,6 +352,13 @@
   const pullContentUnderHeader = !!header && firstComponentIsFullWidthImage;
 
   let headerHeight = $state(0);
+  let footerHeight = $state(0);
+
+  const contentColumnStyle = $derived(
+    maxContentWidth
+      ? `max-width: ${maxContentWidth}; margin-inline: auto;`
+      : "",
+  );
 </script>
 
 <svelte:boundary onerror={onError}>
@@ -366,19 +373,16 @@
         <Header {...header} />
       </div>
     {/if}
-    <div
-      class="paywall-content"
-      style={[
-        maxContentWidth
-          ? `max-width: ${maxContentWidth}; margin-inline: auto;`
-          : "",
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
+    <div class="paywall-content" style={contentColumnStyle}>
       <Stack
         {...stack}
         class="paywall-content-scroll"
+        padding={sticky_footer
+          ? {
+              ...stack.padding,
+              bottom: (stack.padding?.bottom ?? 0) + footerHeight,
+            }
+          : stack.padding}
         style={{
           height: "auto",
           ...(pullContentUnderHeader
@@ -386,10 +390,19 @@
             : {}),
         }}
       />
-      {#if sticky_footer}
-        <Footer {...sticky_footer} />
-      {/if}
     </div>
+    {#if sticky_footer}
+      <!-- Overlaps the content so translucent footers show it; sticky rather than
+        absolute so it stays visible when an ancestor scrollport is shorter than
+        the paywall. -->
+      <div
+        class="footer-wrapper"
+        style="z-index: {STICKY_OVERLAY_Z_INDEX}; margin-top: -{footerHeight}px; {contentColumnStyle}"
+        bind:clientHeight={footerHeight}
+      >
+        <Footer {...sticky_footer} />
+      </div>
+    {/if}
   </div>
 
   {#if sheet}
@@ -422,6 +435,13 @@
     width: 100%;
   }
 
+  .footer-wrapper {
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    flex-shrink: 0;
+  }
+
   .paywall-content {
     z-index: 2;
     width: 100%;

package/dist/components/paywall/fixtures/transparent-footer-paywall.d.ts

@@ -0,0 +1,7 @@
+import type { PaywallData } from "../../../types/paywall";
+/** Translucent sticky footer over long scrollable content. */
+export declare const paywallWithTransparentFooter: PaywallData;
+/** Small body that must center in the space above the footer, not the whole screen. */
+export declare const paywallWithCenteredBodyAndFooter: PaywallData;
+/** Header and sticky footer together: the footer overlay must not affect the header. */
+export declare const paywallWithHeaderAndFooter: PaywallData;

package/dist/components/paywall/fixtures/transparent-footer-paywall.js

@@ -0,0 +1,59 @@
+import { paywallWithFooter, paywallWithHeader } from "../../../stories/fixtures";
+function footerStack(paywall) {
+    const footer = paywall.components_config.base.sticky_footer;
+    if (!footer) {
+        throw new Error("Fixture has no sticky footer");
+    }
+    return footer.stack;
+}
+function lastTextComponent(components) {
+    return components.findLast((component) => component.type === "text");
+}
+/** Duplicates the last text component so the content is tall enough to scroll. */
+function appendScrollableContent(paywall, count) {
+    const components = paywall.components_config.base.stack.components;
+    const lastText = lastTextComponent(components);
+    if (!lastText) {
+        return;
+    }
+    for (let index = 0; index < count; index++) {
+        const copy = structuredClone(lastText);
+        copy.id = `scroll-filler-${index}`;
+        components.push(copy);
+    }
+}
+function setFooterBackground(paywall, hex) {
+    footerStack(paywall).background_color = {
+        light: { type: "hex", value: hex },
+    };
+}
+/** Translucent sticky footer over long scrollable content. */
+export const paywallWithTransparentFooter = (() => {
+    const paywall = structuredClone(paywallWithFooter);
+    appendScrollableContent(paywall, 25);
+    setFooterBackground(paywall, "#057C5BAA");
+    return paywall;
+})();
+/** Small body that must center in the space above the footer, not the whole screen. */
+export const paywallWithCenteredBodyAndFooter = (() => {
+    const paywall = structuredClone(paywallWithFooter);
+    const stack = paywall.components_config.base.stack;
+    const lastText = lastTextComponent(stack.components);
+    stack.components = lastText ? [lastText] : [];
+    stack.dimension.distribution = "center";
+    setFooterBackground(paywall, "#057C5BAA");
+    return paywall;
+})();
+/** Header and sticky footer together: the footer overlay must not affect the header. */
+export const paywallWithHeaderAndFooter = (() => {
+    const paywall = structuredClone(paywallWithFooter);
+    appendScrollableContent(paywall, 15);
+    const headerDonor = structuredClone(paywallWithHeader);
+    paywall.components_config.base.header =
+        headerDonor.components_config.base.header;
+    paywall.components_localizations.en_US = {
+        ...paywall.components_localizations.en_US,
+        ...headerDonor.components_localizations.en_US,
+    };
+    return paywall;
+})();

package/dist/components/web-view/WebView.svelte

@@ -56,17 +56,23 @@
   let fitWidth = $state<number | undefined>(undefined);
   let fitHeight = $state<number | undefined>(undefined);
 
+  const fitAxisFallback = (axis: typeof props.size.width): number =>
+    axis.type === "fit" && typeof axis.default === "number"
+      ? axis.default
+      : FIT_FALLBACK_SIZE_PX;
+
   const style = $derived.by(() => {
     const { width, height } = props.size;
     const widthFit = width.type === "fit";
     const heightFit = height.type === "fit";
     // Pin a `fit` axis with an explicit size. `flex-shrink: 0` keeps flex parents
     // from collapsing the box; avoid mirroring the size in `min-*` or it beats `max-*`.
+    // Prefer author-declared `default` when present; else the hard 300px fallback.
     const fitWidthPx = widthFit
-      ? clampFitSize(fitWidth ?? FIT_FALLBACK_SIZE_PX)
+      ? clampFitSize(fitWidth ?? fitAxisFallback(width))
       : null;
     const fitHeightPx = heightFit
-      ? clampFitSize(fitHeight ?? FIT_FALLBACK_SIZE_PX)
+      ? clampFitSize(fitHeight ?? fitAxisFallback(height))
       : null;
     return css({
       width: fitWidthPx != null ? px(fitWidthPx) : mapSize(width),

package/dist/types.d.ts

@@ -48,11 +48,17 @@ type RelativeSize = {
     type: "relative";
     value: number;
 };
-type FitFillSize = {
-    type: "fit" | "fill";
+type FitSize = {
+    type: "fit";
     value?: null;
+    /** Placeholder px until the content reports its measured size. */
+    default?: number;
 };
-export type Size = FixedSize | RelativeSize | FitFillSize;
+type FillSize = {
+    type: "fill";
+    value?: null;
+};
+export type Size = FixedSize | RelativeSize | FitSize | FillSize;
 export type SizeType = {
     width: Size;
     height: Size;

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