@revenuecat/purchases-ui-js 4.4.0 → 4.5.0

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/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.0",
   "author": {
     "name": "RevenueCat, Inc."
   },