@revenuecat/purchases-ui-js 3.11.4 → 3.12.0

package/dist/components/button/ButtonNode.svelte

@@ -127,7 +127,7 @@
       componentType: "package_selection_sheet",
       componentName: action.sheet?.name ?? props.name,
       componentValue: "open",
-      currentPackageIdentifier: $selectedPackageId,
+      currentPackageId: $selectedPackageId,
     });
 
   const onclick = () => {

package/dist/components/options/InputOption.svelte

@@ -10,7 +10,7 @@
   const props: InputOptionProps = $props();
   const { stack, option_id } = props;
 
-  const { onButtonAction } = getPaywallContext();
+  const { onButtonAction, onInputChanged } = getPaywallContext();
   const inputChoiceContext = getInputChoiceContext();
 
   // Derive selected state from context (similar to Package)
@@ -41,6 +41,15 @@
     // Update selection state
     inputChoiceContext?.selectOption(option_id);
 
+    // Notify host (e.g. workflows) so selections can be persisted when every option shares
+    // the same workflow `on_press` id (e.g. `btn_*`); `onActionTriggered` alone is ambiguous.
+    // The trailing actionId lets hosts skip this callback when their own action path
+    // already persists the selection (e.g. a legacy input_option_* action handler).
+    const fieldId = inputChoiceContext?.fieldId;
+    if (fieldId) {
+      onInputChanged?.(fieldId, option_id, actionId);
+    }
+
     // Trigger navigation
     onButtonAction({ type: "workflow" }, actionId);
   };

package/dist/components/options/InputOptionTestWrapper.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { setPaywallContext } from "../../stores/paywall";
+  import {
+    createInputChoiceContext,
+    setInputChoiceContext,
+  } from "../../stores/inputChoice";
+  import { readable, writable } from "svelte/store";
+  import InputOption from "./InputOption.svelte";
+  import type { InputOptionProps } from "../../types/components/options";
+
+  interface Props extends InputOptionProps {
+    fieldId?: string;
+    selectionMode?: "single" | "multiple";
+    onButtonAction?: (action: { type: string }, actionId?: string) => void;
+    onInputChanged?: (
+      fieldId: string,
+      value: string,
+      actionId?: string,
+    ) => void;
+  }
+
+  const {
+    fieldId,
+    selectionMode = "single",
+    onButtonAction = () => {},
+    onInputChanged,
+    ...optionProps
+  }: Props = $props();
+
+  if (fieldId !== undefined) {
+    setInputChoiceContext(createInputChoiceContext(fieldId, selectionMode));
+  }
+
+  setPaywallContext({
+    selectedPackageId: writable(undefined),
+    variablesPerPackage: readable(undefined),
+    baseVariables: readable(undefined),
+    infoPerPackage: readable(undefined),
+    onPurchase: () => {},
+    onButtonAction: onButtonAction as never,
+    onInputChanged,
+    uiConfig: {} as never,
+    hideBackButtons: false,
+  });
+</script>
+
+<InputOption {...optionProps} />

package/dist/components/options/InputOptionTestWrapper.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { InputOptionProps } from "../../types/components/options";
+interface Props extends InputOptionProps {
+    fieldId?: string;
+    selectionMode?: "single" | "multiple";
+    onButtonAction?: (action: {
+        type: string;
+    }, actionId?: string) => void;
+    onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+}
+declare const InputOptionTestWrapper: import("svelte").Component<Props, {}, "">;
+type InputOptionTestWrapper = ReturnType<typeof InputOptionTestWrapper>;
+export default InputOptionTestWrapper;

package/dist/components/package/Package.svelte

@@ -55,9 +55,9 @@
       componentType: "package",
       componentName: name,
       componentValue: package_id,
-      originPackageIdentifier: originPackageId,
-      destinationPackageIdentifier: package_id,
-      defaultPackageIdentifier: defaultPackageId,
+      originPackageId,
+      destinationPackageId: package_id,
+      defaultPackageId,
     });
   };
 

package/dist/components/paywall/Paywall.svelte

@@ -82,7 +82,11 @@
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (
+      fieldId: string,
+      value: string,
+      actionId?: string,
+    ) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**
@@ -165,7 +169,7 @@
 
   let sheet = $state<{
     props: SheetProps;
-    rootSelectedPackageIdentifier?: string;
+    rootSelectedPackageId?: string;
   }>();
 
   const onButtonAction = (action: Action, actionId?: string) => {
@@ -214,20 +218,19 @@
         if (action.sheet) {
           sheet = {
             props: action.sheet,
-            rootSelectedPackageIdentifier: $selectedPackageId,
+            rootSelectedPackageId: $selectedPackageId,
           };
         } else {
           if (sheet) {
-            const resultingPackageIdentifier =
-              sheet.rootSelectedPackageIdentifier;
+            const resultingPackageId = sheet.rootSelectedPackageId;
             emitComponentInteraction({
               componentType: "package_selection_sheet",
               componentName: sheet.props.name,
               componentValue: "close",
-              currentPackageIdentifier: $selectedPackageId,
-              resultingPackageIdentifier,
+              currentPackageId: $selectedPackageId,
+              resultingPackageId,
             });
-            selectedPackageId.set(resultingPackageIdentifier);
+            selectedPackageId.set(resultingPackageId);
           }
           sheet = undefined;
         }

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

@@ -39,7 +39,7 @@ interface Props {
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**

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

@@ -59,7 +59,7 @@
       componentName: props.name,
       componentValue: resolvedMethodType ?? props.action ?? "web_checkout",
       ...(componentURL ? { componentURL } : {}),
-      currentPackageIdentifier: packageId,
+      currentPackageId: packageId,
     };
   };
 

package/dist/components/stack/Stack.stories.svelte

@@ -5,6 +5,7 @@
   import { localizations } from "../../stories/fixtures";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import type { StackProps } from "../../types/components/stack";
+  import type { Component } from "../../types/component";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
@@ -58,6 +59,53 @@
     },
   ] as unknown as TextNodeProps[];
 
+  /** Z-layer: full-bleed image (layer 0), text label (layer 1). */
+  const zlayerImageUnderText: Component[] = [
+    {
+      type: "image",
+      id: "zlayer-bg",
+      name: "Background image",
+      size: { width: { type: "fill" }, height: { type: "fill" } },
+      fit_mode: "fill",
+      source: {
+        light: {
+          width: 600,
+          height: 400,
+          original:
+            "https://placehold.co/600x400/1e293b/94a3b8?text=Layer+0+%28back%29",
+          heic: "https://placehold.co/600x400",
+          heic_low_res: "https://placehold.co/600x400",
+          webp: "https://placehold.co/600x400",
+          webp_low_res: "https://placehold.co/600x400",
+        },
+        dark: null,
+      },
+      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+      padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+    },
+    {
+      type: "text",
+      id: "zlayer-top",
+      name: "Top label",
+      text_lid: "id1",
+      color: {
+        light: { type: "hex", value: "#f8fafc" },
+        dark: { type: "hex", value: "#f8fafc" },
+      },
+      font_name: null,
+      font_size: "heading_m",
+      font_weight: "semibold",
+      horizontal_alignment: "center",
+      background_color: {
+        light: { type: "hex", value: "#0f172acc" },
+        dark: { type: "hex", value: "#0f172acc" },
+      },
+      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+      padding: { top: 12, bottom: 12, leading: 16, trailing: 16 },
+      size: { width: { type: "fit" }, height: { type: "fit" } },
+    },
+  ];
+
   const { Story } = defineMeta({
     title: "Components/Stack",
     component: Stack,
@@ -140,6 +188,46 @@
   }}
 />
 
+<Story
+  name="Z layer — image under text"
+  args={{
+    components: zlayerImageUnderText,
+    size: {
+      width: { type: "fixed", value: 320 },
+      height: { type: "fixed", value: 220 },
+    },
+    dimension: {
+      type: "zlayer",
+      alignment: "center",
+    },
+    background: {
+      type: "color",
+      value: {
+        light: { type: "hex", value: "#0f172a" },
+      },
+    },
+    border: {
+      width: 1,
+      color: {
+        light: { type: "hex", value: "#334155" },
+        dark: { type: "hex", value: "#334155" },
+      },
+    },
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 12,
+        top_trailing: 12,
+        bottom_leading: 12,
+        bottom_trailing: 12,
+      },
+    },
+  }}
+  parameters={{
+    chromatic: { disable: true },
+  }}
+/>
+
 <Story
   name="Space Around"
   args={{

package/dist/components/stack/Stack.svelte

@@ -114,7 +114,10 @@
   {/if}
 
   {#if dimension.type === "zlayer"}
-    <div style="position: relative; width: 100%; height: 100%;">
+    <!-- isolate: layer z-index values only sort within this stack, not the host page -->
+    <div
+      style="position: relative; width: 100%; height: 100%; isolation: isolate;"
+    >
       {#each components as component, index}
         <div style={getLayerStyle(index)}>
           <Node nodeData={component} />

package/dist/components/workflows/Screen.svelte

@@ -23,7 +23,11 @@
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
     initialInputSelections?: InitialInputSelections;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (
+      fieldId: string,
+      value: string,
+      actionId?: string,
+    ) => void;
     onCompleteWorkflowNavigate?: (
       args: CompleteWorkflowNavigateArgs,
     ) => void | Promise<void>;

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

@@ -18,7 +18,7 @@ interface Props {
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
     initialInputSelections?: InitialInputSelections;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
     onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     walletButtonRender?: WalletButtonRender;
 }

package/dist/stores/paywall.d.ts

@@ -20,7 +20,7 @@ type PaywallContext = Readonly<{
     onPurchase: (actionId?: string) => void;
     emitComponentInteraction: (data: ComponentInteractionData) => void;
     onNavigateToUrl?: (url: string) => void;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
     walletButtonRender?: WalletButtonRender;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
     onButtonAction: (action: Action, actionId?: string) => void;

package/dist/types/paywall-component-interaction.d.ts

@@ -12,9 +12,9 @@ interface IndexedTransition {
     defaultIndex: number;
 }
 interface PackageTransition {
-    originPackageIdentifier?: string;
-    destinationPackageIdentifier: string;
-    defaultPackageIdentifier?: string;
+    originPackageId?: string;
+    destinationPackageId: string;
+    defaultPackageId?: string;
 }
 type ButtonInteractionValue = "workflow" | "navigate_to_url" | "navigate_back" | "restore_purchases" | "navigate_to_customer_center" | "screen_redirect" | "navigate_to_privacy_policy" | "navigate_to_terms" | "navigate_to_sheet" | "navigate_to_offer_code" | "navigate_to_web_paywall_link";
 export type TabInteractionData = ComponentInteractionBase<"tab"> & IndexedTransition;
@@ -27,22 +27,22 @@ export type TextInteractionData = ComponentInteractionBase<"text", "navigate_to_
     componentURL: string;
 };
 export type PackageInteractionData = ComponentInteractionBase<"package"> & PackageTransition & {
-    originProductIdentifier?: string;
-    destinationProductIdentifier?: string;
-    defaultProductIdentifier?: string;
+    originProductId?: string;
+    destinationProductId?: string;
+    defaultProductId?: string;
 };
 export type PurchaseButtonInteractionData = ComponentInteractionBase<"purchase_button", PurchaseButtonMethod["type"]> & {
     componentURL?: string;
-    currentPackageIdentifier: string;
-    currentProductIdentifier?: string;
-    resultingPackageIdentifier?: string;
-    resultingProductIdentifier?: string;
+    currentPackageId: string;
+    currentProductId?: string;
+    resultingPackageId?: string;
+    resultingProductId?: string;
 };
 export type PackageSelectionSheetInteractionData = ComponentInteractionBase<"package_selection_sheet"> & {
-    currentPackageIdentifier?: string;
-    resultingPackageIdentifier?: string;
-    currentProductIdentifier?: string;
-    resultingProductIdentifier?: string;
+    currentPackageId?: string;
+    resultingPackageId?: string;
+    currentProductId?: string;
+    resultingProductId?: string;
 };
 export type ComponentInteractionData = TabInteractionData | SwitchInteractionData | CarouselInteractionData | ButtonInteractionData | TextInteractionData | PackageInteractionData | PurchaseButtonInteractionData | PackageSelectionSheetInteractionData;
 export type ComponentInteractionType = ComponentInteractionData["componentType"];

package/package.json

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