@revenuecat/purchases-ui-js 2.2.0 → 2.2.1

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

@@ -322,3 +322,18 @@
     paywallData: listTemplate,
   }}
 />
+
+<Story
+  name="Wallet Button"
+  args={{
+    paywallData: pastaPaywallData,
+    walletButtonRender: (element: HTMLElement, selectedPackageId) => {
+      const newDiv = document.createElement("div");
+      newDiv.innerText = "Hi! I was injected from the walletButtonRender";
+      newDiv.style.width = "100%";
+      newDiv.style.textAlign = "center";
+      element.append(newDiv);
+      return {};
+    },
+  }}
+/>

package/dist/components/paywall/Paywall.svelte

@@ -40,6 +40,13 @@
     onNavigateToUrlClicked?: (url: string) => void;
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
+    walletButtonRender?: (
+      node: HTMLElement,
+      selectedPackageId: string,
+    ) => {
+      destroy?: () => void;
+      update?: (selectedPackageId: string) => void;
+    };
   }
 
   const {
@@ -56,6 +63,7 @@
     onActionTriggered,
     onError,
     uiConfig,
+    walletButtonRender,
   }: Props = $props();
 
   const getColorMode = setColorModeContext(() => preferredColorMode);
@@ -127,6 +135,7 @@
     infoPerPackage: readable(infoPerPackage),
     onPurchase,
     onButtonAction,
+    walletButtonRender,
     uiConfig,
   });
 

package/dist/components/paywall/Paywall.svelte.d.ts

@@ -16,6 +16,10 @@ interface Props {
     onNavigateToUrlClicked?: (url: string) => void;
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
+    walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+        destroy?: () => void;
+        update?: (selectedPackageId: string) => void;
+    };
 }
 declare const Paywall: import("svelte").Component<Props, {}, "">;
 type Paywall = ReturnType<typeof Paywall>;

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

@@ -4,8 +4,17 @@
   import type { PurchaseButtonProps } from "../../types/components/purchase-button";
 
   const { stack }: PurchaseButtonProps = $props();
-
-  const { onPurchase } = getPaywallContext();
+  const { onPurchase, walletButtonRender, selectedPackageId } =
+    getPaywallContext();
 </script>
 
+{#if walletButtonRender}
+  {#if $selectedPackageId}
+    <div
+      style="width: 100%; margin-bottom:20px"
+      use:walletButtonRender={$selectedPackageId}
+    ></div>
+  {/if}
+{/if}
+
 <Stack {...stack} onclick={onPurchase} />

package/dist/stores/paywall.d.ts

@@ -7,6 +7,10 @@ type PaywallContext = Readonly<{
     variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
     infoPerPackage: Readable<Record<string, PackageInfo> | undefined>;
     onPurchase: () => void;
+    walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+        destroy?: () => void;
+        update?: (selectedPackageId: string) => void;
+    };
     onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;
 }>;

package/dist/stories/paywall-decorator.d.ts

@@ -1,2 +1,5 @@
 import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
-export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(): DecoratorFunction<TRenderer, TArgs>;
+export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+    destroy?: () => void;
+    update?: (selectedPackageId: string) => void;
+}): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/paywall-decorator.js

@@ -1,6 +1,6 @@
 import { setPaywallContext } from "../stores/paywall";
 import { readable, writable } from "svelte/store";
-export function paywallDecorator() {
+export function paywallDecorator(walletButtonRender) {
     return (Story) => {
         const selectedPackageId = writable(undefined);
         selectedPackageId.subscribe((packageId) => {
@@ -19,6 +19,7 @@ export function paywallDecorator() {
             infoPerPackage: readable(undefined),
             onPurchase: () => window.alert("Purchase clicked"),
             onButtonAction: (action, actionId) => window.alert(`Button clicked: ${JSON.stringify({ action, actionId }, undefined, 2)}`),
+            walletButtonRender,
             uiConfig: emptyUiConfig,
         });
         return Story();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "2.2.0",
+  "version": "2.2.1",
   "author": {
     "name": "RevenueCat, Inc."
   },