@revenuecat/purchases-ui-js 3.0.1 → 3.2.0

package/dist/components/paywall/Node.svelte

@@ -13,6 +13,7 @@
   import InputMultipleChoice from "../options/InputMultipleChoice.svelte";
   import InputOption from "../options/InputOption.svelte";
   import InputSingleChoice from "../options/InputSingleChoice.svelte";
+  import RedemptionButton from "../redemption-button/RedemptionButton.svelte";
   import TextNode from "../text/TextNode.svelte";
   import type { Component } from "../../types/component";
   import type { Component as SvelteComponent } from "svelte";
@@ -39,6 +40,7 @@
     input_single_choice: InputSingleChoice,
     package: Package,
     purchase_button: PurchaseButton,
+    redemption_button: RedemptionButton,
     stack: Stack,
     tab_control_button: TabControlButton,
     tab_control_toggle: TabControlToggle,

package/dist/components/paywall/Paywall.svelte

@@ -30,6 +30,13 @@
     paywallData: PaywallData;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    /**
+     * Global variables that are available independent of package selection.
+     * Useful for success screens, confirmation flows, and other contexts where variables
+     * aren't tied to a specific package. Package-specific variables from variablesPerPackage
+     * will override global variables when both are present.
+     */
+    globalVariables?: VariableDictionary;
     infoPerPackage?: Record<string, PackageInfo>;
     uiConfig: UIConfig;
     preferredColorMode?: ColorMode;
@@ -56,6 +63,7 @@
     paywallData,
     selectedLocale,
     variablesPerPackage = {},
+    globalVariables = {},
     infoPerPackage = {},
     preferredColorMode,
     onPurchaseClicked,
@@ -142,10 +150,13 @@
     uiConfig,
   });
 
-  const variables: VariablesStore = derived(
-    selectedPackageId,
-    (packageId) => variablesPerPackage[packageId || ""],
-  );
+  const variables: VariablesStore = derived(selectedPackageId, (packageId) => {
+    const packageVars = variablesPerPackage[packageId || ""];
+    return {
+      ...globalVariables,
+      ...packageVars,
+    };
+  });
 
   setVariablesContext(variables);
 

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

@@ -6,6 +6,13 @@ interface Props {
     paywallData: PaywallData;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    /**
+     * Global variables that are available independent of package selection.
+     * Useful for success screens, confirmation flows, and other contexts where variables
+     * aren't tied to a specific package. Package-specific variables from variablesPerPackage
+     * will override global variables when both are present.
+     */
+    globalVariables?: VariableDictionary;
     infoPerPackage?: Record<string, PackageInfo>;
     uiConfig: UIConfig;
     preferredColorMode?: ColorMode;

package/dist/components/redemption-button/RedemptionButton.stories.svelte

@@ -0,0 +1,90 @@
+<script module lang="ts">
+  import RedemptionButton from "./RedemptionButton.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { variablesDecorator } from "../../stories/variables-decorator";
+  import type { RedemptionButtonProps } from "../../types/components/redemption-button";
+  import type { StackProps } from "../../types/components/stack";
+  import type { TextNodeProps } from "../../types/components/text";
+  import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
+
+  const textProps: TextNodeProps = {
+    type: "text",
+    id: "redeem-text",
+    name: "Redeem text",
+    text_lid: "redeem_text",
+    font_size: "body_m",
+    font_weight: "medium",
+    horizontal_alignment: "center",
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    color: {
+      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
+      light: { type: "hex", value: "#ffffff" },
+    },
+    background_color: null,
+  };
+
+  const stackProps: StackProps = {
+    type: "stack",
+    id: "redemption-stack",
+    name: "Redemption Stack",
+    components: [textProps],
+    size: { width: { type: "fill" }, height: { type: "fit" } },
+    dimension: {
+      type: "horizontal",
+      alignment: "center",
+      distribution: "center",
+    },
+    spacing: 8,
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+    background_color: null,
+    background: {
+      type: "color",
+      value: {
+        dark: { type: "hex", value: "#000000" },
+        light: { type: "hex", value: "#000000" },
+      },
+    },
+    border: null,
+    shape: { type: "pill" },
+    shadow: null,
+    badge: null,
+  };
+
+  const { Story } = defineMeta({
+    title: "Components/RedemptionButton",
+    component: RedemptionButton,
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            redeem_text: "Redeem your trial",
+          },
+        },
+      }),
+      variablesDecorator({
+        "success.redemption_url": "myapp://redeem?token=abc123xyz",
+      }),
+    ],
+    args: {
+      type: "redemption_button",
+      id: "redemption-button",
+      name: "Redemption Button",
+      stack: stackProps,
+      transition: null,
+    } satisfies RedemptionButtonProps,
+  });
+</script>
+
+<Story name="Default" />

package/dist/components/redemption-button/RedemptionButton.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import RedemptionButton from "./RedemptionButton.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 RedemptionButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RedemptionButton = InstanceType<typeof RedemptionButton>;
+export default RedemptionButton;

package/dist/components/redemption-button/RedemptionButton.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import Stack from "../stack/Stack.svelte";
+  import { getVariablesContext } from "../../stores/variables";
+  import type { RedemptionButtonProps } from "../../types/components/redemption-button";
+  import QRCode from "qrcode";
+  import { onMount } from "svelte";
+
+  const props: RedemptionButtonProps = $props();
+
+  const variables = getVariablesContext();
+  const redemptionUrl = $derived($variables?.["success.redemption_url"]);
+
+  let isMobile = $state(true);
+  let qrCodeDataUrl = $state("");
+  let qrFailed = $state(false);
+
+  onMount(() => {
+    const mediaQuery = window.matchMedia("(max-width: 767px)");
+    isMobile = mediaQuery.matches;
+
+    const handler = (e: MediaQueryListEvent) => {
+      isMobile = e.matches;
+    };
+
+    mediaQuery.addEventListener("change", handler);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handler);
+    };
+  });
+
+  $effect(() => {
+    if (!isMobile && redemptionUrl) {
+      qrFailed = false;
+      QRCode.toDataURL(redemptionUrl, {
+        width: 512,
+        margin: 2,
+        errorCorrectionLevel: "M",
+        color: {
+          dark: "#000000",
+          light: "#ffffff",
+        },
+      })
+        .then((url) => {
+          qrCodeDataUrl = url;
+        })
+        .catch((err) => {
+          console.warn("Failed to generate QR code:", err);
+          qrFailed = true;
+        });
+    }
+  });
+</script>
+
+{#if (isMobile || qrFailed) && redemptionUrl}
+  <Stack
+    {...props.stack}
+    onclick={() => {
+      window.location.href = redemptionUrl;
+    }}
+  />
+{:else if qrCodeDataUrl}
+  <div class="qr-wrapper">
+    <img src={qrCodeDataUrl} alt="Redemption QR Code" class="qr-code" />
+  </div>
+{/if}
+
+<style>
+  .qr-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: center;
+    width: fit-content;
+    margin: 0 auto;
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 16px;
+  }
+
+  .qr-code {
+    display: block;
+    width: 128px;
+    height: 128px;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+  }
+</style>

package/dist/components/redemption-button/RedemptionButton.svelte.d.ts

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

package/dist/components/workflows/Screen.stories.svelte

@@ -0,0 +1,31 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Screen from "./Screen.svelte";
+  import { paywallData, uiConfigData } from "../../stories/fixtures";
+  import type { WorkflowScreen } from "../../types/workflow";
+
+  const defaultScreen: WorkflowScreen = {
+    ...paywallData,
+    asset_base_url: "https://assets.pawwalls.com",
+    config: {},
+    localized_strings: {},
+    localized_strings_by_tier: {},
+    name: "Demo Screen",
+    offering_id: "demo_offering",
+    revision: 1,
+    template_name: "stack",
+  };
+
+  const { Story } = defineMeta({
+    title: "Components/Screen",
+    component: Screen,
+    args: {
+      paywallComponents: defaultScreen,
+      selectedLocale: defaultScreen.default_locale,
+      uiConfig: uiConfigData,
+    },
+  });
+</script>
+
+<Story name="Default" />

package/dist/components/workflows/Screen.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Screen from "./Screen.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 Screen: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Screen = InstanceType<typeof Screen>;
+export default Screen;

package/dist/components/workflows/Screen.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import Paywall, {
+    type UIConfig,
+  } from "../paywall/Paywall.svelte";
+  import type { WorkflowScreen } from "../../types/workflow";
+  import type { VariableDictionary } from "../../types/variables";
+  import { VARIABLES } from "../paywall/fixtures/variables";
+  interface Props {
+    paywallComponents: WorkflowScreen | null | undefined;
+    selectedLocale?: string;
+    uiConfig: UIConfig;
+    globalVariables?: VariableDictionary;
+    onActionTriggered?: (actionId: string) => void;
+    onPurchaseClicked?: (
+      packageId: string,
+      actionId: string,
+    ) => void | Promise<void>;
+    containerId?: string;
+  }
+  const {
+    paywallComponents,
+    selectedLocale = "en_US",
+    uiConfig,
+    globalVariables = {},
+    onActionTriggered,
+    onPurchaseClicked,
+    containerId = "screen-container",
+  }: Props = $props();
+</script>
+
+<div id={containerId} class="paywall-container">
+  {#if paywallComponents}
+    <Paywall
+      paywallData={paywallComponents}
+      {selectedLocale}
+      {uiConfig}
+      variablesPerPackage={VARIABLES}
+      {globalVariables}
+      onNavigateToUrlClicked={() => {}}
+      onVisitCustomerCenterClicked={() => {}}
+      onBackClicked={() => {}}
+      onRestorePurchasesClicked={() => {}}
+      onActionTriggered={(actionId: string) => {
+        onActionTriggered?.(actionId);
+      }}
+      {onPurchaseClicked}
+      onError={(error) => {
+        console.error("Paywall error:", error);
+      }}
+    />
+  {:else}
+    <div>
+      <p>No paywall data provided</p>
+    </div>
+  {/if}
+</div>

package/dist/components/workflows/Screen.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type UIConfig } from "../paywall/Paywall.svelte";
+import type { WorkflowScreen } from "../../types/workflow";
+import type { VariableDictionary } from "../../types/variables";
+interface Props {
+    paywallComponents: WorkflowScreen | null | undefined;
+    selectedLocale?: string;
+    uiConfig: UIConfig;
+    globalVariables?: VariableDictionary;
+    onActionTriggered?: (actionId: string) => void;
+    onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
+    containerId?: string;
+}
+declare const Screen: import("svelte").Component<Props, {}, "">;
+type Screen = ReturnType<typeof Screen>;
+export default Screen;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { default as Screen } from "./components/workflows/Screen.svelte";
 export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";

package/dist/index.js

@@ -12,6 +12,7 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { default as Screen } from "./components/workflows/Screen.svelte";
 export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export {} from "./types/paywall";

package/dist/types/component.d.ts

@@ -7,9 +7,10 @@ import type { ImageProps } from "./components/image";
 import type { InputMultipleChoiceProps, InputOptionProps, InputSingleChoiceProps } from "./components/options";
 import type { PackageProps } from "./components/package";
 import type { PurchaseButtonProps } from "./components/purchase-button";
+import type { RedemptionButtonProps } from "./components/redemption-button";
 import type { StackProps } from "./components/stack";
 import type { TabControlButtonProps, TabControlProps, TabControlToggleProps, TabsProps } from "./components/tabs";
 import type { TextNodeProps } from "./components/text";
 import type { TimelineProps } from "./components/timeline";
 import type { VideoProps } from "./components/video";
-export type Component = ButtonProps | CarouselProps | CountdownProps | FooterProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | VideoProps;
+export type Component = ButtonProps | CarouselProps | CountdownProps | FooterProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | PackageProps | PurchaseButtonProps | RedemptionButtonProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | VideoProps;

package/dist/types/components/redemption-button.d.ts

@@ -0,0 +1,7 @@
+import type { BaseComponent } from "../base";
+import type { StackProps } from "./stack";
+export interface RedemptionButtonProps extends BaseComponent {
+    type: "redemption_button";
+    stack: StackProps;
+    transition?: null;
+}

package/dist/types/components/redemption-button.js

@@ -0,0 +1 @@
+export {};

package/dist/types/variables.d.ts

@@ -7,8 +7,8 @@ export declare enum PackageIdentifier {
     annual = "$rc_annual",
     lifetime = "$rc_lifetime"
 }
-type VariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name";
-export type VariableDictionary = Record<VariableName, string>;
+type VariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name" | "success.redemption_url" | "success.package_identifier" | "success.product_identifier" | "success.product_title" | "success.product_description" | "success.price" | "success.currency_code" | "success.customer_email" | "success.is_subscription" | "success.is_trial";
+export type VariableDictionary = Partial<Record<VariableName, string>>;
 export type VariablesDictionary = Record<PackageIdentifier, VariableDictionary>;
 export interface PackageInfo {
     hasIntroOffer?: boolean;

package/dist/types/workflow.d.ts

@@ -0,0 +1,15 @@
+import type { PaywallData } from "./paywall";
+/**
+ * Represents a screen/paywall configuration in a workflow.
+ * Extends core PaywallData with workflow-specific metadata.
+ */
+export interface WorkflowScreen extends PaywallData {
+    asset_base_url: string;
+    config: Record<string, unknown>;
+    localized_strings: Record<string, Record<string, string>>;
+    localized_strings_by_tier: Record<string, Record<string, string>>;
+    name: string;
+    offering_id: string | null;
+    revision: number;
+    template_name: string;
+}

package/dist/types/workflow.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -119,4 +119,4 @@ export declare enum StackDistribution {
     center = "center",
     end = "flex-end"
 }
-export {};
+export type { WorkflowScreen } from "./types/workflow";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "3.0.1",
+  "version": "3.2.0",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -83,6 +83,7 @@
     "@sveltejs/package": "2.5.4",
     "@sveltejs/vite-plugin-svelte": "6.2.1",
     "@types/node": "24.9.2",
+    "@types/qrcode": "^1.5.6",
     "@typescript-eslint/parser": "8.46.2",
     "chromatic": "13.3.2",
     "eslint": "9.38.0",
@@ -115,5 +116,8 @@
   "engines": {
     "node": "^22.18"
   },
-  "packageManager": "npm@11.5.2+sha512.aac1241cfc3f41dc38780d64295c6c6b917a41e24288b33519a7b11adfc5a54a5f881c642d7557215b6c70e01e55655ed7ba666300fd0238bc75fb17478afaf3"
+  "packageManager": "npm@11.5.2+sha512.aac1241cfc3f41dc38780d64295c6c6b917a41e24288b33519a7b11adfc5a54a5f881c642d7557215b6c70e01e55655ed7ba666300fd0238bc75fb17478afaf3",
+  "dependencies": {
+    "qrcode": "^1.5.4"
+  }
 }