@revenuecat/purchases-ui-js 3.9.1 → 3.9.3

package/dist/components/button/ButtonNode.svelte

@@ -23,8 +23,11 @@
   // Reactive store for input satisfaction (defaults to true if no validation context)
   const inputSatisfied = validationContext?.isSatisfied ?? readable(true);
 
-  // Button is disabled when it's a workflow (continue) action and inputs aren't satisfied
-  const isDisabled = $derived(action.type === "workflow" && !$inputSatisfied);
+  // Button is disabled when it's a workflow (continue) or complete_workflow action and inputs aren't satisfied
+  const isDisabled = $derived(
+    (action.type === "workflow" || action.type === "complete_workflow") &&
+      !$inputSatisfied,
+  );
 
   const onclick = () => {
     if (isDisabled) return;
@@ -36,6 +39,8 @@
     switch (action.type) {
       case "workflow":
         return true;
+      case "complete_workflow":
+        return true;
       case "restore_purchases":
         return false;
       case "navigate_back":
@@ -50,7 +55,7 @@
   const style = $derived(
     isDisabled
       ? { opacity: "0.4", "pointer-events": "none", cursor: "not-allowed" }
-      : {},
+      : undefined,
   );
 </script>
 

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

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getHoverStateContext } from "../../stores/hover";
+  import { getLocalizationContext } from "../../stores/localization";
+  import { getPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import { getVariablesContext } from "../../stores/variables";
+  import { FontWeights, TextAlignments } from "../../types";
+  import type { InputTextProps } from "../../types/components/input-text";
+  import { mapBackground } from "../../utils/background-utils";
+  import {
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapShadow,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
+  import {
+    getScopedFontFamily,
+    isFontRCFMManaged,
+  } from "../../utils/font-utils";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+    getHoverStateProps,
+  } from "../../utils/style-utils";
+  import { replaceVariables } from "../../utils/variable-utils";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { mapTextColor } from "../text/text-utils";
+
+  const props: InputTextProps = $props();
+
+  console.log("Hello");
+
+  const selectedState = getSelectedStateContext();
+  const hoverState = getHoverStateContext();
+  const {
+    placeholder_lid,
+    keyboard_type,
+    capitalize,
+    field_id,
+    required,
+    size,
+    padding,
+    margin,
+    border,
+    shape,
+    shadow,
+    font_name,
+    font_weight_int,
+    font_size,
+    horizontal_alignment,
+    color,
+    placeholder_font_name,
+    placeholder_font_weight_int,
+    placeholder_font_size,
+    placeholder_horizontal_alignment,
+    placeholder_color,
+    background_color,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getHoverStateProps($hoverState, props.overrides),
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+  const { uiConfig, onInputChanged } = getPaywallContext();
+
+  const inputStyle = $derived.by(() => {
+    const font = uiConfig.app.fonts[font_name ?? ""];
+    const fontFamily = font?.web?.family;
+    const placeholderFont = uiConfig.app.fonts[placeholder_font_name ?? ""];
+    const placeholderFontFamily = placeholderFont?.web?.family;
+    const placeholderColor = mapTextColor(colorMode, placeholder_color);
+
+    return css({
+      display: props.visible === false ? "none" : "flex",
+      position: "relative",
+      width: mapSize(size.width),
+      height: mapSize(size.height),
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      ...mapBackground(colorMode, background_color, null),
+      border: mapBorder(colorMode, border),
+      "border-radius": mapBorderRadius(shape),
+      "box-shadow": mapShadow(colorMode, shadow),
+
+      ...mapTextColor(colorMode, color),
+      "text-align":
+        TextAlignments[horizontal_alignment] || TextAlignments.leading,
+      "font-weight": font_weight_int ?? FontWeights.regular,
+      "font-size": `${font_size}px`,
+      "font-family": isFontRCFMManaged(font_name ?? "")
+        ? getScopedFontFamily(fontFamily ?? "")
+        : "sans-serif",
+
+      "--placeholder-color": placeholderColor.color,
+      "--placeholder-background": placeholderColor.background,
+      "--placeholder-background-clip": placeholderColor["background-clip"],
+      "--placeholder-webkit-background-clip":
+        placeholderColor["-webkit-background-clip"],
+      "--placeholder-text-align":
+        TextAlignments[placeholder_horizontal_alignment] ||
+        TextAlignments.leading,
+      "--placeholder-font-weight":
+        placeholder_font_weight_int ?? FontWeights.regular,
+      "--placeholder-font-size": `${placeholder_font_size}px`,
+      "--placeholder-font-family": isFontRCFMManaged(
+        placeholder_font_name ?? "",
+      )
+        ? getScopedFontFamily(placeholderFontFamily ?? "")
+        : "sans-serif",
+    });
+  });
+
+  const variables = getVariablesContext();
+  const { getLocalizedString } = getLocalizationContext();
+  const placeholder = $derived(
+    replaceVariables(getLocalizedString(placeholder_lid), $variables),
+  );
+
+  const type = $derived.by((): HTMLInputAttributes["type"] => {
+    switch (props.keyboard_type) {
+      case "decimal":
+      case "numeric":
+        return "number";
+      case "email":
+        return "email";
+      case "tel":
+        return "tel";
+      case "text":
+        return "text";
+    }
+  });
+</script>
+
+<input
+  {type}
+  {placeholder}
+  {required}
+  inputmode={keyboard_type}
+  autocapitalize={capitalize}
+  style={inputStyle}
+  oninput={(event) => onInputChanged?.(field_id, event.currentTarget.value)}
+/>
+
+<style>
+  input::placeholder {
+    color: var(--placeholder-color);
+    background: var(--placeholder-background);
+    background-clip: var(--placeholder-background-clip);
+    -webkit-background-clip: var(--placeholder-webkit-background-clip);
+
+    text-align: var(--placeholder-text-align);
+    font-weight: var(--placeholder-font-weight);
+    font-size: var(--placeholder-font-size);
+    font-family: var(--placeholder-font-family);
+  }
+</style>

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

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

package/dist/components/paywall/Node.svelte

@@ -10,6 +10,7 @@
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
   import Countdown from "../countdown/Countdown.svelte";
+  import InputText from "../input-text/InputText.svelte";
   import InputMultipleChoice from "../options/InputMultipleChoice.svelte";
   import InputOption from "../options/InputOption.svelte";
   import InputSingleChoice from "../options/InputSingleChoice.svelte";
@@ -42,6 +43,7 @@
     input_multiple_choice: InputMultipleChoice,
     input_option: InputOption,
     input_single_choice: InputSingleChoice,
+    input_text: InputText,
     package: Package,
     purchase_button: PurchaseButton,
     redemption_button: RedemptionButton,

package/dist/components/paywall/Paywall.svelte

@@ -14,7 +14,10 @@
     type VariablesStore,
   } from "../../stores/variables";
   import type { ColorMode } from "../../types";
-  import type { Action } from "../../types/components/button";
+  import type {
+    Action,
+    CompleteWorkflowNavigateArgs,
+  } from "../../types/components/button";
   import type { SheetProps } from "../../types/components/sheet";
   import type { PaywallData } from "../../types/paywall";
   import type { UIConfig } from "../../types/ui-config";
@@ -61,10 +64,18 @@
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
+    /**
+     * Called when a complete_workflow button is pressed. The URL is localized;
+     * the host merges `url_query_params` (e.g. `app_user_id`) if needed.
+     */
+    onCompleteWorkflowNavigate?: (
+      args: CompleteWorkflowNavigateArgs,
+    ) => void | Promise<void>;
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
+    onInputChanged?: (fieldId: string, value: string) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**
@@ -95,10 +106,12 @@
     onVisitCustomerCenterClicked,
     onRestorePurchasesClicked,
     onNavigateToUrlClicked,
+    onCompleteWorkflowNavigate,
     onActionTriggered,
     onError,
     uiConfig,
     walletButtonRender,
+    onInputChanged,
     hideBackButtons = false,
     maxContentWidth,
     initialInputSelections = {},
@@ -138,6 +151,18 @@
           onActionTriggered?.(actionId);
         }
         return;
+      case "complete_workflow": {
+        const baseUrl = getLocalizedString(action.url.url_lid);
+        if (!baseUrl) {
+          return;
+        }
+        void onCompleteWorkflowNavigate?.({
+          url: baseUrl,
+          method: action.url.method,
+          url_query_params: action.url_query_params,
+        });
+        return;
+      }
       case "navigate_back":
         onBackClicked?.();
         return;
@@ -183,6 +208,7 @@
     infoPerPackage: readable(infoPerPackage),
     onPurchase,
     onButtonAction,
+    onInputChanged,
     walletButtonRender,
     uiConfig,
     hideBackButtons,

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

@@ -1,5 +1,6 @@
 import { type InitialInputSelections } from "../../stores/inputValidation";
 import type { ColorMode } from "../../types";
+import type { CompleteWorkflowNavigateArgs } from "../../types/components/button";
 import type { PaywallData } from "../../types/paywall";
 import type { UIConfig } from "../../types/ui-config";
 import { type CustomVariables, type PackageInfo, type VariableDictionary } from "../../types/variables";
@@ -27,10 +28,16 @@ interface Props {
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
+    /**
+     * Called when a complete_workflow button is pressed. The URL is localized;
+     * the host merges `url_query_params` (e.g. `app_user_id`) if needed.
+     */
+    onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
+    onInputChanged?: (fieldId: string, value: string) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**

package/dist/components/text/TextNode.svelte

@@ -14,6 +14,7 @@
   import {
     getActiveStateProps,
     getIntroOfferStateProps,
+    getPromoOfferStateProps,
     evaluateVisibilityConditions,
   } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
@@ -32,21 +33,13 @@
         !!$packageInfo?.hasIntroOffer || !!$packageInfo?.hasTrial,
         props.overrides,
       ),
+      ...getPromoOfferStateProps(
+        !!$packageInfo?.hasPromoOffer,
+        props.overrides,
+      ),
     };
   });
 
-  const isVisible = $derived(
-    evaluateVisibilityConditions(
-      {
-        selectedPackageId: $selectedPackageId,
-        packageInfo: $packageInfo,
-        variables: $variables,
-      },
-      props.overrides,
-      props.visible,
-    ),
-  );
-
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
@@ -69,6 +62,18 @@
     replaceVariables(getLocalizedString(actualProps.text_lid), $variables),
   );
 
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
+
   const markdownParsed = $derived(getHtmlFromMarkdown(label));
 </script>
 

package/dist/components/workflows/Screen.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import Paywall from "../paywall/Paywall.svelte";
+  import type { CompleteWorkflowNavigateArgs } from "../../types/components/button";
   import type { InitialInputSelections } from "../../stores/inputValidation";
   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";
-
   interface Props {
     paywallComponents: WorkflowScreen | null | undefined;
     selectedLocale?: string;
@@ -21,9 +21,12 @@
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
     initialInputSelections?: InitialInputSelections;
+    onInputChanged?: (fieldId: string, value: string) => void;
+    onCompleteWorkflowNavigate?: (
+      args: CompleteWorkflowNavigateArgs,
+    ) => void | Promise<void>;
     walletButtonRender?: WalletButtonRender;
   }
-
   const {
     paywallComponents,
     selectedLocale = "en_US",
@@ -36,6 +39,8 @@
     maxContentWidth,
     variablesPerPackage,
     initialInputSelections = {},
+    onInputChanged,
+    onCompleteWorkflowNavigate,
     walletButtonRender,
   }: Props = $props();
 </script>
@@ -53,6 +58,7 @@
       onNavigateToUrlClicked={(url: string) => {
         window.open(url, "_blank");
       }}
+      {onCompleteWorkflowNavigate}
       onVisitCustomerCenterClicked={() => {}}
       {onBackClicked}
       onRestorePurchasesClicked={() => {}}
@@ -60,6 +66,7 @@
         onActionTriggered?.(actionId);
       }}
       {onPurchaseClicked}
+      {onInputChanged}
       {walletButtonRender}
       onError={(error) => {
         console.error("Paywall error:", error);

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

@@ -1,3 +1,4 @@
+import type { CompleteWorkflowNavigateArgs } from "../../types/components/button";
 import type { InitialInputSelections } from "../../stores/inputValidation";
 import type { WorkflowScreen } from "../../types/workflow";
 import type { VariableDictionary } from "../../types/variables";
@@ -15,6 +16,8 @@ interface Props {
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
     initialInputSelections?: InitialInputSelections;
+    onInputChanged?: (fieldId: string, value: string) => void;
+    onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     walletButtonRender?: WalletButtonRender;
 }
 declare const Screen: import("svelte").Component<Props, {}, "">;

package/dist/index.d.ts

@@ -19,5 +19,6 @@ export { type InitialInputSelections } from "./stores/inputValidation";
 export { type UIConfig } from "./types/ui-config";
 export { type WalletButtonRender } from "./types/wallet";
 export { type CustomVariables, CustomVariableValue, type VariableDictionary, type PackageInfo, } from "./types/variables";
+export type { CompleteWorkflowNavigateArgs, CompleteWorkflowUrlQueryParams, } from "./types/components/button";
 export * from "./ui/globals";
 export { default as Button } from "./ui/molecules/button.svelte";

package/dist/stores/paywall.d.ts

@@ -16,6 +16,7 @@ type PaywallContext = Readonly<{
     baseVariables: Readable<VariableDictionary | undefined>;
     infoPerPackage: Readable<Record<string, PackageInfo> | undefined>;
     onPurchase: (actionId?: string) => void;
+    onInputChanged?: (fieldId: string, value: string) => void;
     walletButtonRender?: WalletButtonRender;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
     onButtonAction: (action: Action, actionId?: string) => void;

package/dist/types/component.d.ts

@@ -4,6 +4,7 @@ import type { CountdownProps } from "./components/countdown";
 import type { FooterProps } from "./components/footer";
 import type { IconProps } from "./components/icon";
 import type { ImageProps } from "./components/image";
+import type { InputTextProps } from "./components/input-text";
 import type { InputMultipleChoiceProps, InputOptionProps, InputSingleChoiceProps } from "./components/options";
 import type { PackageProps } from "./components/package";
 import type { PurchaseButtonProps } from "./components/purchase-button";
@@ -16,4 +17,4 @@ import type { VideoProps } from "./components/video";
 import type { WalletButtonProps } from "./components/wallet-button";
 import type { SkeletonLoaderProps } from "./components/skeleton-loader-props";
 import type { ExpressPurchaseButtonProps } from "./components/express-purchase-button-props";
-export type Component = ButtonProps | CarouselProps | CountdownProps | ExpressPurchaseButtonProps | FooterProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | PackageProps | PurchaseButtonProps | RedemptionButtonProps | SkeletonLoaderProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | WalletButtonProps | VideoProps;
+export type Component = ButtonProps | CarouselProps | CountdownProps | ExpressPurchaseButtonProps | FooterProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | InputTextProps | PackageProps | PurchaseButtonProps | RedemptionButtonProps | SkeletonLoaderProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | WalletButtonProps | VideoProps;

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

@@ -34,7 +34,26 @@ interface NavigateToUrlAction {
         method: "deep_link" | "external_browser" | "in_app_browser";
     };
 }
-export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction;
+/** Optional query params for complete_workflow URLs (host merges values). */
+export type CompleteWorkflowUrlQueryParams = {
+    app_user_id?: boolean;
+};
+/** Args passed to `onCompleteWorkflowNavigate` (host builds final URL if needed). */
+export type CompleteWorkflowNavigateArgs = {
+    url: string;
+    method: "deep_link" | "external_browser" | "in_app_browser";
+    url_query_params?: CompleteWorkflowUrlQueryParams;
+};
+/** End the workflow and open a URL (optional query params, e.g. app user ID). */
+interface CompleteWorkflowAction {
+    type: "complete_workflow";
+    url: {
+        url_lid: string;
+        method: "deep_link" | "external_browser" | "in_app_browser";
+    };
+    url_query_params?: CompleteWorkflowUrlQueryParams;
+}
+export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction | CompleteWorkflowAction;
 export interface ButtonProps extends BaseComponent {
     type: "button";
     action: Action;

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

@@ -0,0 +1,33 @@
+import type { BorderType, ShapeType, ShadowType, SizeType, Spacing, TextAlignments } from "..";
+import type { BaseComponent } from "../base";
+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 interface InputTextProps extends BaseComponent {
+    type: "input_text";
+    visible?: boolean | null;
+    placeholder_lid: string;
+    keyboard_type: InputTextKeyboardType;
+    capitalize: InputTextCapitalizeType;
+    field_id: string;
+    required: boolean;
+    size: SizeType;
+    padding: Spacing;
+    margin: Spacing;
+    border?: BorderType | null;
+    shape?: ShapeType | null;
+    shadow?: ShadowType | null;
+    font_name?: string | null;
+    font_weight_int?: number | null;
+    font_size: number;
+    horizontal_alignment: keyof typeof TextAlignments;
+    color: ColorGradientScheme;
+    placeholder_font_name?: string | null;
+    placeholder_font_weight_int?: number | null;
+    placeholder_font_size: number;
+    placeholder_horizontal_alignment: keyof typeof TextAlignments;
+    placeholder_color: ColorGradientScheme;
+    background_color?: ColorGradientScheme | null;
+    overrides?: Overrides<InputTextProps>;
+}

package/dist/types/components/input-text.js

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

package/dist/utils/style-utils.d.ts

@@ -11,6 +11,7 @@ export declare function findSelectedPackageId({ stack, sticky_footer, }: RootPay
 export declare const getActiveStateProps: <T extends Component>(selectedState: boolean, overrides?: Overrides<T>) => Partial<T>;
 export declare const getHoverStateProps: <T extends Component>(hoverState: boolean, overrides?: Overrides<T>) => Partial<T>;
 export declare const getIntroOfferStateProps: <T extends Component>(hasIntroOffer: boolean, overrides?: Overrides<T>) => Partial<T>;
+export declare const getPromoOfferStateProps: <T extends Component>(hasPromoOffer: boolean, overrides?: Overrides<T>) => Partial<T>;
 export type VisibilityContext = {
     selectedPackageId: string | undefined;
     packageInfo: PackageInfo | undefined;

package/dist/utils/style-utils.js

@@ -58,6 +58,13 @@ export const getIntroOfferStateProps = (hasIntroOffer, overrides) => {
     const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "intro_offer"));
     return override?.properties ?? {};
 };
+export const getPromoOfferStateProps = (hasPromoOffer, overrides) => {
+    if (!hasPromoOffer) {
+        return {};
+    }
+    const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "promo_offer"));
+    return override?.properties ?? {};
+};
 const CONDITION_ORDER = [
     RuleKey.IntroOfferCondition,
     RuleKey.PromoOfferCondition,