@revenuecat/purchases-ui-js 4.8.3 → 4.8.5

package/dist/components/express-purchase-button/ExpressPurchaseButton.stories.svelte

@@ -377,6 +377,50 @@
   args={{}}
 />
 
+<Story
+  name="Missing Wallet Button"
+  decorators={[
+    paywallDecorator(
+      createWalletButtonRender({ available: true, delay: 1000 }),
+      "some-package-id",
+    ),
+  ]}
+  args={{
+    wallet_available_stack: {
+      type: "stack",
+      id: "wallet-available-stack-without-wallet-button",
+      name: "Wallet Available Stack Without Wallet Button",
+      components: [purchaseButtonWhenAvailableProps],
+      size: {
+        width: { type: "fill" },
+        height: { type: "fit" },
+      },
+      dimension: {
+        type: "vertical",
+        alignment: "center",
+        distribution: "center",
+      },
+      spacing: 8,
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+      background_color: null,
+      background: null,
+      border: null,
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 8,
+          top_trailing: 8,
+          bottom_leading: 8,
+          bottom_trailing: 8,
+        },
+      },
+      shadow: null,
+      badge: null,
+    },
+  }}
+/>
+
 <Story
   name="Parent Stack Props"
   decorators={[

package/dist/components/express-purchase-button/ExpressPurchaseButton.svelte

@@ -3,6 +3,7 @@
   import { getPaywallContext, setPaywallContext } from "../../stores/paywall";
   import type { ExpressPurchaseButtonProps } from "../../types/components/express-purchase-button-props";
   import type { StackProps } from "../../types/components/stack";
+  import { hasComponentOfTypeInSubtree } from "./component-subtree-utils";
 
   const props: ExpressPurchaseButtonProps = $props();
   const {
@@ -15,8 +16,17 @@
 
   const { walletButtonRender, ...rest } = getPaywallContext();
 
-  let walletButtonAvailable = $state<boolean | undefined>(undefined);
-  let shouldShowWalletSkeleton = $state(!!walletButtonRender);
+  const availableStackHasWalletButton = hasComponentOfTypeInSubtree(
+    wallet_available_stack,
+    "wallet_button",
+  );
+
+  let walletButtonAvailable = $state<boolean | undefined>(
+    availableStackHasWalletButton ? undefined : false,
+  );
+  let shouldShowWalletSkeleton = $state(
+    !!walletButtonRender && availableStackHasWalletButton,
+  );
 
   const onWalletButtonReady = (isAvailable?: boolean) => {
     walletButtonAvailable = isAvailable;

package/dist/components/express-purchase-button/component-subtree-utils.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "../../types/component";
+import type { StackProps } from "../../types/components/stack";
+type ComponentType = Component["type"];
+export declare const hasComponentOfTypeInSubtree: (stack: StackProps, componentType: ComponentType) => boolean;
+export {};

package/dist/components/express-purchase-button/component-subtree-utils.js

@@ -0,0 +1,31 @@
+export const hasComponentOfTypeInSubtree = (stack, componentType) => {
+    return (stack.components.some((component) => componentHasTypeInSubtree(component, componentType)) ||
+        (stack.badge?.stack
+            ? hasComponentOfTypeInSubtree(stack.badge.stack, componentType)
+            : false));
+};
+const componentHasTypeInSubtree = (component, componentType) => {
+    if (component.type === componentType) {
+        return true;
+    }
+    if (component.fallback &&
+        componentHasTypeInSubtree(component.fallback, componentType)) {
+        return true;
+    }
+    switch (component.type) {
+        case "carousel":
+            return component.pages.some((page) => hasComponentOfTypeInSubtree(page, componentType));
+        case "package":
+        case "purchase_button":
+        case "tab":
+        case "tab_control_button":
+            return hasComponentOfTypeInSubtree(component.stack, componentType);
+        case "stack":
+            return hasComponentOfTypeInSubtree(component, componentType);
+        case "tabs":
+            return (hasComponentOfTypeInSubtree(component.control.stack, componentType) ||
+                component.tabs.some((tab) => hasComponentOfTypeInSubtree(tab.stack, componentType)));
+        default:
+            return false;
+    }
+};

package/dist/components/package/Package.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import { getPaywallContext } from "../../stores/paywall";
+  import { setPackageIdContext } from "../../stores/packageId";
   import { setSelectedStateContext } from "../../stores/selected";
   import {
     getVariablesContext,
@@ -18,6 +19,8 @@
   const { stack, package_id, is_selected_by_default, name }: PackageProps =
     $props();
 
+  setPackageIdContext(package_id);
+
   const {
     defaultPackageId,
     emitComponentInteraction,

package/dist/components/purchase-button/PurchaseButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import { getLocalizationContext } from "../../stores/localization";
+  import { getOptionalPackageIdContext } from "../../stores/packageId";
   import { getPaywallContext } from "../../stores/paywall";
   import type { PurchaseButtonProps } from "../../types/components/purchase-button";
   import type { PurchaseButtonInteractionData } from "../../types/paywall-component-interaction";
@@ -16,6 +17,9 @@
   } = getPaywallContext();
   const { getLocalizedString } = getLocalizationContext();
 
+  // Set when embedded in a package; standalone buttons fall back to the store.
+  const enclosingPackageId = getOptionalPackageIdContext();
+
   const appendQueryParam = (url: string, key: string, value: string) => {
     const hashIndex = url.indexOf("#");
     const hash = hashIndex === -1 ? "" : url.slice(hashIndex);
@@ -64,8 +68,10 @@
   };
 
   const onclick = () => {
-    const packageId = $selectedPackageId;
+    const packageId = enclosingPackageId ?? $selectedPackageId;
     if (packageId !== undefined) {
+      // Sync before purchasing so onPurchase reads this package, not a stale one.
+      $selectedPackageId = packageId;
       emitComponentInteraction(getPurchaseButtonInteractionData(packageId));
     }
 

package/dist/components/stack/Stack.svelte

@@ -187,7 +187,7 @@
         style="position: relative; width: 100%; height: 100%; isolation: isolate;"
       >
         {#each components as component, index}
-          <div style={getLayerStyle(index)}>
+          <div class="rc-zlayer-layer" style={getLayerStyle(index)}>
             <Node nodeData={component} />
           </div>
         {/each}
@@ -236,4 +236,18 @@
     position: relative;
     z-index: 3;
   }
+
+  /*
+   * Each overlay layer is a full-size (inset:0) box, so by default it swallows
+   * clicks anywhere over the stack — including where it has no content —
+   * blocking interactive elements on the layers beneath. Only its own content
+   * should be hit-testable.
+   */
+  .rc-zlayer-layer {
+    pointer-events: none;
+  }
+
+  .rc-zlayer-layer > :global(*) {
+    pointer-events: auto;
+  }
 </style>

package/dist/stores/packageId.d.ts

@@ -0,0 +1,2 @@
+export declare function setPackageIdContext(packageId: string): void;
+export declare function getOptionalPackageIdContext(): string | undefined;

package/dist/stores/packageId.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+const key = Symbol("packageId");
+export function setPackageIdContext(packageId) {
+    setContext(key, packageId);
+}
+export function getOptionalPackageIdContext() {
+    return getContext(key);
+}

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