@revenuecat/purchases-ui-js 3.5.2 → 3.5.3

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

@@ -0,0 +1,368 @@
+<script module lang="ts">
+  import ExpressPurchaseButton from "./ExpressPurchaseButton.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizations } from "../../stories/fixtures";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { paywallDecorator } from "../../stories/paywall-decorator";
+  import { variablesDecorator } from "../../stories/variables-decorator";
+  import type { ExpressPurchaseButtonProps } from "../../types/components/express-purchase-button-props";
+  import type { SkeletonLoaderProps } from "../../types/components/skeleton-loader-props";
+  import type { WalletButtonProps } from "../../types/components/wallet-button";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { mockDateDecorator } from "storybook-mock-date-decorator";
+  import type { PurchaseButtonProps } from "../../types/components/purchase-button";
+
+  const defaultLocale = "en_US";
+  const textLidWhenAvailable = "purchase_wallet_available_text";
+  const textLidWhenUnavailable = "purchase_wallet_unavailable_text";
+  const loc = {
+    en_US: {
+      ...localizations["en_US"],
+      [textLidWhenAvailable]: "Purchase with Wallet",
+      [textLidWhenUnavailable]: "Wallet Unavailable",
+    },
+  };
+
+  const createWalletButtonRender =
+    ({ available, delay }: { available: boolean; delay?: number }) =>
+    (
+      element: HTMLElement,
+      {
+        selectedPackageId,
+        onReady,
+      }: {
+        selectedPackageId: string;
+        onReady?: (isAvailable?: boolean) => void;
+      },
+    ) => {
+      const mockButton = document.createElement("button");
+      mockButton.innerHTML = `Wallet for ${selectedPackageId}`;
+      mockButton.style.width = "100%";
+      mockButton.style.padding = "12px 16px";
+      mockButton.style.borderRadius = "12px";
+      mockButton.style.border = "1px solid rgba(0,0,0,0.12)";
+      mockButton.style.background = available ? "#0b8f4d" : "#ccc";
+      mockButton.style.color = "#fff";
+
+      setTimeout(() => {
+        element.replaceChildren(mockButton);
+        onReady?.(available);
+      }, delay);
+
+      return {
+        destroy: () => {
+          element.replaceChildren();
+        },
+      };
+    };
+
+  const skeletonLoaderProps: SkeletonLoaderProps = {
+    type: "skeleton_loader",
+    id: "wallet-loader",
+    name: "Wallet Loader",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fit" },
+    },
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    border: null,
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 12,
+        top_trailing: 12,
+        bottom_leading: 12,
+        bottom_trailing: 12,
+      },
+    },
+    shadow: null,
+  };
+
+  const walletProps: WalletButtonProps = {
+    type: "wallet_button",
+    id: "wallet_button",
+    name: "Wallet Button",
+    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 },
+    border: null,
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 8,
+        top_trailing: 8,
+        bottom_leading: 8,
+        bottom_trailing: 8,
+      },
+    },
+    shadow: null,
+  };
+
+  const purchaseButtonWhenAvailableProps = {
+    type: "purchase_button",
+    id: "purchase-button",
+    name: "Purchase button",
+    stack: {
+      type: "stack",
+      id: "pbvAUBvilP",
+      name: "Stack",
+      background_color: {
+        light: {
+          type: "hex",
+          value: "#a229f3",
+        },
+      },
+      background: {
+        type: "color",
+        value: {
+          light: {
+            type: "hex",
+            value: "#a229f3",
+          },
+        },
+      },
+      components: [
+        {
+          background_color: null,
+          color: {
+            light: {
+              type: "hex",
+              value: "#ffffff",
+            },
+          },
+          font_name: null,
+          font_size: "heading_m",
+          font_weight: "extra_bold",
+          horizontal_alignment: "center",
+          id: "MI_dDBpD4z",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "Text",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fill",
+              value: null,
+            },
+          },
+          text_lid: textLidWhenAvailable,
+          type: "text",
+        },
+      ],
+      dimension: {
+        type: "vertical",
+        alignment: "center",
+        distribution: "center",
+      },
+      margin: {
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      padding: {
+        bottom: 16,
+        leading: 16,
+        top: 16,
+        trailing: 16,
+      },
+      border: null,
+      shadow: null,
+      shape: {
+        corners: {
+          bottom_leading: 8,
+          bottom_trailing: 8,
+          top_leading: 8,
+          top_trailing: 8,
+        },
+        type: "rectangle",
+      },
+      size: {
+        height: {
+          type: "fit",
+        },
+        width: {
+          type: "fill",
+        },
+      },
+      spacing: 8,
+    },
+  } satisfies PurchaseButtonProps;
+
+  const purchaseButtonWhenUnavailableProps = {
+    ...purchaseButtonWhenAvailableProps,
+  } satisfies PurchaseButtonProps;
+  purchaseButtonWhenUnavailableProps.stack.components[0].text_lid =
+    textLidWhenUnavailable;
+
+  const { Story } = defineMeta({
+    title: "Components/ExpressPurchaseButton",
+    component: ExpressPurchaseButton,
+    decorators: [
+      mockDateDecorator,
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: loc,
+      }),
+      variablesDecorator(undefined),
+    ],
+
+    args: {
+      type: "express_purchase_button",
+      id: "express_purchase_button",
+      name: "ExpressPurchaseButton",
+
+      wallet_available_stack: {
+        type: "stack",
+        id: "wallet-available-stack",
+        name: "Wallet Available Stack",
+        components: [walletProps, 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,
+      },
+      wallet_unavailable_stack: {
+        type: "stack",
+        id: "wallet-unavailable-stack",
+        name: "Wallet Unavailable Stack",
+        components: [purchaseButtonWhenUnavailableProps],
+        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,
+      },
+      wallet_unknown_stack: {
+        type: "stack",
+        id: "wallet-unknown-stack",
+        name: "Wallet Unknown Stack",
+        components: [skeletonLoaderProps],
+        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,
+      },
+    } satisfies ExpressPurchaseButtonProps,
+  });
+</script>
+
+<Story
+  name="Wallets Available"
+  decorators={[
+    paywallDecorator(
+      createWalletButtonRender({ available: true, delay: 1000 }),
+      "some-package-id",
+    ),
+  ]}
+  args={{}}
+/>
+
+<Story
+  name="Wallets Unavailable"
+  decorators={[
+    paywallDecorator(
+      createWalletButtonRender({ available: false, delay: 1000 }),
+      "some-package-id",
+    ),
+  ]}
+  args={{}}
+/>
+
+<Story
+  name="Wallets Unknown"
+  decorators={[
+    paywallDecorator(
+      createWalletButtonRender({ available: false, delay: 1000 }),
+      "some-package-id",
+    ),
+  ]}
+  args={{}}
+/>

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

@@ -0,0 +1,19 @@
+import ExpressPurchaseButton from "./ExpressPurchaseButton.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ExpressPurchaseButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ExpressPurchaseButton = InstanceType<typeof ExpressPurchaseButton>;
+export default ExpressPurchaseButton;

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import Stack from "../stack/Stack.svelte";
+  import { getPaywallContext, setPaywallContext } from "../../stores/paywall";
+  import type { ExpressPurchaseButtonProps } from "../../types/components/express-purchase-button-props";
+
+  const props: ExpressPurchaseButtonProps = $props();
+  const {
+    wallet_unknown_stack,
+    wallet_available_stack,
+    wallet_unavailable_stack,
+  } = props;
+
+  const { walletButtonRender, ...rest } = getPaywallContext();
+
+  let walletButtonAvailable = $state<boolean | undefined>(undefined);
+  let shouldShowWalletSkeleton = $state(!!walletButtonRender);
+
+  const onWalletButtonReady = (isAvailable?: boolean) => {
+    walletButtonAvailable = isAvailable;
+    shouldShowWalletSkeleton = false;
+  };
+
+  setPaywallContext({ walletButtonRender, ...rest, onWalletButtonReady });
+
+  const shouldShowUnavailableStack = $derived(
+    !walletButtonAvailable || !wallet_available_stack,
+  );
+  const shouldShowAvailableStack = $derived(
+    Boolean(
+      wallet_available_stack &&
+        walletButtonAvailable &&
+        !shouldShowWalletSkeleton,
+    ),
+  );
+</script>
+
+<Stack {...{ ...wallet_available_stack, visible: shouldShowAvailableStack }} />
+
+{#if shouldShowWalletSkeleton}
+  <Stack {...wallet_unknown_stack} />
+{:else if shouldShowUnavailableStack}
+  <Stack {...wallet_unavailable_stack} />
+{/if}

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

@@ -0,0 +1,4 @@
+import type { ExpressPurchaseButtonProps } from "../../types/components/express-purchase-button-props";
+declare const ExpressPurchaseButton: import("svelte").Component<ExpressPurchaseButtonProps, {}, "">;
+type ExpressPurchaseButton = ReturnType<typeof ExpressPurchaseButton>;
+export default ExpressPurchaseButton;

package/dist/components/options/InputOption.svelte

@@ -27,9 +27,12 @@
 
   const onclick = () => {
     const actionId = props.triggers?.on_press;
-    // Create a workflow action to pass up through the callback
-    onButtonAction({ type: "workflow" }, actionId);
+
+    // Update selection state
     inputChoiceContext?.selectOption(option_id);
+
+    // Trigger navigation
+    onButtonAction({ type: "workflow" }, actionId);
   };
 </script>
 

package/dist/components/paywall/Node.svelte

@@ -23,6 +23,9 @@
   import TabControlButton from "../tabs/TabControlButton.svelte";
   import TabControlToggle from "../tabs/TabControlToggle.svelte";
   import Tabs from "../tabs/Tabs.svelte";
+  import WalletButton from "../wallet-button/WalletButton.svelte";
+  import SkeletonLoader from "../skeleton-loader/SkeletonLoader.svelte";
+  import ExpressPurchaseButton from "../express-purchase-button/ExpressPurchaseButton.svelte";
 
   interface Props {
     nodeData: Component;
@@ -32,6 +35,7 @@
     button: ButtonNode,
     carousel: Carousel,
     countdown: Countdown,
+    express_purchase_button: ExpressPurchaseButton,
     footer: Footer,
     icon: Icon,
     image: Image,
@@ -41,6 +45,7 @@
     package: Package,
     purchase_button: PurchaseButton,
     redemption_button: RedemptionButton,
+    skeleton_loader: SkeletonLoader,
     stack: Stack,
     tab_control_button: TabControlButton,
     tab_control_toggle: TabControlToggle,
@@ -49,6 +54,7 @@
     text: TextNode,
     timeline: Timeline,
     video: Video,
+    wallet_button: WalletButton,
   } satisfies {
     [key in Component["type"]]: SvelteComponent<
       Extract<Component, { type: key }>

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

@@ -47,6 +47,10 @@
   });
 </script>
 
+<script>
+  import { DUELINGUE_PAYWALL } from "./fixtures/express-purchase-button-paywall";
+</script>
+
 <Story
   name="Stack paywall"
   args={{
@@ -354,7 +358,7 @@
 
       setTimeout(() => {
         element.append(newDiv);
-        onReady && onReady();
+        onReady && onReady(true);
       }, 3000);
       return {};
     },
@@ -378,7 +382,47 @@
 
       setTimeout(() => {
         element.append(newDiv);
-        onReady && onReady();
+        onReady && onReady(true);
+      }, 3000);
+      return {};
+    },
+  }}
+/>
+
+<Story
+  name="Duelinuge Paywall Wallet Button available"
+  args={{
+    paywallData: DUELINGUE_PAYWALL,
+    walletButtonRender: (
+      element: HTMLElement,
+      { selectedPackageId, onReady },
+    ) => {
+      const newDiv = document.createElement("div");
+      newDiv.innerText = "Hi! I was injected from the walletButtonRender";
+      newDiv.style.width = "100%";
+      newDiv.style.textAlign = "center";
+      newDiv.style.color = "black";
+      newDiv.style.border = "1px solid black";
+
+      setTimeout(() => {
+        element.append(newDiv);
+        onReady && onReady(true);
+      }, 3000);
+      return {};
+    },
+  }}
+/>
+
+<Story
+  name="Duelinuge Paywall Wallet Button Unavailable"
+  args={{
+    paywallData: DUELINGUE_PAYWALL,
+    walletButtonRender: (
+      element: HTMLElement,
+      { selectedPackageId, onReady },
+    ) => {
+      setTimeout(() => {
+        onReady && onReady(false);
       }, 3000);
       return {};
     },

package/dist/components/paywall/Paywall.svelte

@@ -52,13 +52,13 @@
       node: HTMLElement,
       params: {
         selectedPackageId: string;
-        onReady?: () => void;
+        onReady?: (walletButtonAvailable?: boolean) => void;
       },
     ) => {
       destroy?: () => void;
       update?: (updateParams: {
         selectedPackageId: string;
-        onReady?: () => void;
+        onReady?: (walletButtonAvailable?: boolean) => void;
       }) => void;
     };
     maxContentWidth?: string;

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

@@ -26,12 +26,12 @@ interface Props {
     hideBackButtons?: boolean;
     walletButtonRender?: (node: HTMLElement, params: {
         selectedPackageId: string;
-        onReady?: () => void;
+        onReady?: (walletButtonAvailable?: boolean) => void;
     }) => {
         destroy?: () => void;
         update?: (updateParams: {
             selectedPackageId: string;
-            onReady?: () => void;
+            onReady?: (walletButtonAvailable?: boolean) => void;
         }) => void;
     };
     maxContentWidth?: string;