@revenuecat/purchases-ui-js 4.8.3 → 4.8.4

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/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.4",
   "author": {
     "name": "RevenueCat, Inc."
   },