@revenuecat/purchases-ui-js 4.4.0 → 4.5.1

package/dist/components/input-text/InputText.svelte

@@ -41,6 +41,7 @@
     keyboard_type,
     capitalize,
     field_id,
+    reserved_attribute,
     required,
     size,
     padding,
@@ -74,7 +75,15 @@
     }
 
     const value = input.value.trim();
-    onInputChanged?.(field_id, value);
+    if (reserved_attribute) {
+      if (!onReservedAttributeChanged) {
+        console.error("onReservedAttributeChanged is not set");
+      } else {
+        onReservedAttributeChanged(reserved_attribute, value);
+      }
+    } else {
+      onInputChanged?.(field_id, value);
+    }
   }
 
   const oninput: FormEventHandler<HTMLInputElement> = (event) => {
@@ -90,7 +99,12 @@
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
-  const { uiConfig, onInputChanged, selectedPackageId } = getPaywallContext();
+  const {
+    uiConfig,
+    onInputChanged,
+    onReservedAttributeChanged,
+    selectedPackageId,
+  } = getPaywallContext();
   const packageInfo = getOptionalPackageInfoContext();
 
   const wrapperStyle = $derived(

package/dist/components/paywall/Paywall.svelte

@@ -49,6 +49,7 @@
     setPackageInfoContext,
   } from "../../stores/packageInfo";
   import type { WalletButtonRender } from "../../types/wallet";
+  import type { ReservedAttribute } from "../../types/components/input-text";
 
   /**
    * Props are captured once at mount and are not reactive to subsequent changes.
@@ -90,6 +91,10 @@
       value: string,
       actionId?: string,
     ) => void;
+    onReservedAttributeChanged?: (
+      reservedAttribute: ReservedAttribute,
+      value: string,
+    ) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**
@@ -133,6 +138,7 @@
     uiConfig,
     walletButtonRender,
     onInputChanged,
+    onReservedAttributeChanged,
     hideBackButtons = false,
     maxContentWidth,
     initialInputSelections = {},
@@ -297,6 +303,7 @@
     onNavigateToUrl: onNavigateToUrlClicked,
     onButtonAction,
     onInputChanged,
+    onReservedAttributeChanged,
     walletButtonRender,
     uiConfig,
     hideBackButtons,

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

@@ -7,6 +7,7 @@ import type { PaywallData } from "../../types/paywall";
 import type { UIConfig } from "../../types/ui-config";
 import { type CustomVariables, type PackageInfo, type VariableDictionary } from "../../types/variables";
 import type { WalletButtonRender } from "../../types/wallet";
+import type { ReservedAttribute } from "../../types/components/input-text";
 /**
  * Props are captured once at mount and are not reactive to subsequent changes.
  * The paywall should be remounted to reflect new prop values.
@@ -41,6 +42,7 @@ interface Props {
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**

package/dist/components/video/Video.svelte

@@ -311,7 +311,9 @@
                     playbackMutedOverride = true;
                   });
                   applyVideoPlaybackFlags();
-                  void el.play().catch(() => {});
+                  // Do not call el.play() here. A non-user-initiated play() call after a
+                  // failed unmute corrupts the media element state machine on certain WebKit
+                  // versions, leaving native controls unresponsive. Let the user tap to resume.
                 });
               });
             };
@@ -321,14 +323,20 @@
               playingUnmuteListener = null;
               tryRestoreAudioAfterMutedAutoplay();
             };
-            playingUnmuteListener = onPlayingAfterMutedBootstrap;
-            el.addEventListener("playing", onPlayingAfterMutedBootstrap, {
-              once: true,
-            });
 
+            // Call muted play before registering the `playing` listener. The listener is
+            // registered only inside p2.then() — after muted play is confirmed started.
+            // Registering before p2 resolves risks the listener surviving indefinitely if
+            // p2's promise hangs (a known WebKit bug on certain devices), causing it to
+            // fire on user-initiated play and sabotage playback via the unmute restore flow.
             const p2 = el.play();
             if (p2 !== undefined) {
               p2.then(() => {
+                if (cancelled || mute_audio || unmuteAfterMutedStartHandled) return;
+                playingUnmuteListener = onPlayingAfterMutedBootstrap;
+                el.addEventListener("playing", onPlayingAfterMutedBootstrap, {
+                  once: true,
+                });
                 // `playing` may have fired before our listener ran; retry unmute once playback exists.
                 queueMicrotask(() => {
                   if (
@@ -345,8 +353,13 @@
                   }
                   tryRestoreAudioAfterMutedAutoplay();
                 });
-              }).catch(() => {
-                clearPlayingUnmuteListener();
+              });
+            } else {
+              // p2 undefined: older iOS that doesn't return a promise from play().
+              // Register the listener directly — it's the only available signal.
+              playingUnmuteListener = onPlayingAfterMutedBootstrap;
+              el.addEventListener("playing", onPlayingAfterMutedBootstrap, {
+                once: true,
               });
             }
           }

package/dist/components/workflows/Screen.svelte

@@ -8,6 +8,7 @@
   import type { VariableDictionary } from "../../types/variables";
   import type { WalletButtonRender } from "../../types/wallet";
   import type { UIConfig } from "../../types/ui-config";
+  import type { ReservedAttribute } from "../../types/components/input-text";
   interface Props {
     paywallComponents: WorkflowScreen | null | undefined;
     selectedLocale?: string;
@@ -29,6 +30,10 @@
       value: string,
       actionId?: string,
     ) => void;
+    onReservedAttributeChanged?: (
+      reservedAttribute: ReservedAttribute,
+      value: string,
+    ) => void;
     onCompleteWorkflowNavigate?: (
       args: CompleteWorkflowNavigateArgs,
     ) => void | Promise<void>;
@@ -49,6 +54,7 @@
     variablesPerPackage,
     initialInputSelections = {},
     onInputChanged,
+    onReservedAttributeChanged,
     onCompleteWorkflowNavigate,
     walletButtonRender,
     safeAreaFallbackColor,
@@ -78,6 +84,7 @@
       {onComponentInteraction}
       {onPurchaseClicked}
       {onInputChanged}
+      {onReservedAttributeChanged}
       {walletButtonRender}
       {safeAreaFallbackColor}
       onError={(error) => {

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

@@ -6,6 +6,7 @@ import type { WorkflowScreen } from "../../types/workflow";
 import type { VariableDictionary } from "../../types/variables";
 import type { WalletButtonRender } from "../../types/wallet";
 import type { UIConfig } from "../../types/ui-config";
+import type { ReservedAttribute } from "../../types/components/input-text";
 interface Props {
     paywallComponents: WorkflowScreen | null | undefined;
     selectedLocale?: string;
@@ -20,6 +21,7 @@ interface Props {
     variablesPerPackage?: Record<string, VariableDictionary>;
     initialInputSelections?: InitialInputSelections;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     walletButtonRender?: WalletButtonRender;
     safeAreaFallbackColor?: ColorScheme | null;

package/dist/stores/paywall.d.ts

@@ -1,4 +1,5 @@
 import type { Action } from "../types/components/button";
+import type { ReservedAttribute } from "../types/components/input-text";
 import type { ComponentInteractionData } from "../types/paywall-component-interaction";
 import type { UIConfig } from "../types/ui-config";
 import type { PackageInfo, VariableDictionary } from "../types/variables";
@@ -21,6 +22,7 @@ type PaywallContext = Readonly<{
     emitComponentInteraction: (data: ComponentInteractionData) => void;
     onNavigateToUrl?: (url: string) => void;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     walletButtonRender?: WalletButtonRender;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
     onButtonAction: (action: Action, actionId?: string) => void;

package/dist/types/components/input-text.d.ts

@@ -4,6 +4,7 @@ import type { ColorGradientScheme } from "../colors";
 import type { Overrides } from "../overrides";
 export type InputTextCapitalizeType = "none" | "sentences" | "words" | "characters";
 export type InputTextKeyboardType = "decimal" | "email" | "numeric" | "tel" | "text" | "url";
+export type ReservedAttribute = "$email" | "$displayName" | "$phoneNumber";
 export interface InputTextProps extends BaseComponent {
     type: "input_text";
     visible?: boolean | null;
@@ -11,6 +12,7 @@ export interface InputTextProps extends BaseComponent {
     keyboard_type: InputTextKeyboardType;
     capitalize: InputTextCapitalizeType;
     field_id: string;
+    reserved_attribute?: ReservedAttribute | null;
     required: boolean;
     size: SizeType;
     padding: Spacing;

package/dist/types.d.ts

@@ -122,3 +122,4 @@ export declare enum StackDistribution {
 export type { WorkflowScreen } from "./types/workflow";
 export type { ColorScheme } from "./types/colors";
 export type { ComponentInteractionData, ComponentInteractionType, OnComponentInteraction, } from "./types/paywall-component-interaction";
+export type { ReservedAttribute } from "./types/components/input-text";

package/package.json

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