@revenuecat/purchases-ui-js 3.9.0 → 3.9.2

package/dist/components/button/ButtonNode.svelte

@@ -50,7 +50,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

@@ -36,6 +36,7 @@
     type PackageInfoStore,
     setPackageInfoContext,
   } from "../../stores/packageInfo";
+  import type { WalletButtonRender } from "../../types/wallet";
 
   /**
    * Props are captured once at mount and are not reactive to subsequent changes.
@@ -63,19 +64,8 @@
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
-    walletButtonRender?: (
-      node: HTMLElement,
-      params: {
-        selectedPackageId: string;
-        onReady?: (walletButtonAvailable?: boolean) => void;
-      },
-    ) => {
-      destroy?: () => void;
-      update?: (updateParams: {
-        selectedPackageId: string;
-        onReady?: (walletButtonAvailable?: boolean) => void;
-      }) => void;
-    };
+    walletButtonRender?: WalletButtonRender;
+    onInputChanged?: (fieldId: string, value: string) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**
@@ -110,6 +100,7 @@
     onError,
     uiConfig,
     walletButtonRender,
+    onInputChanged,
     hideBackButtons = false,
     maxContentWidth,
     initialInputSelections = {},
@@ -194,6 +185,7 @@
     infoPerPackage: readable(infoPerPackage),
     onPurchase,
     onButtonAction,
+    onInputChanged,
     walletButtonRender,
     uiConfig,
     hideBackButtons,

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

@@ -3,6 +3,7 @@ import type { ColorMode } from "../../types";
 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";
 /**
  * Props are captured once at mount and are not reactive to subsequent changes.
  * The paywall should be remounted to reflect new prop values.
@@ -29,16 +30,8 @@ interface Props {
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
-    walletButtonRender?: (node: HTMLElement, params: {
-        selectedPackageId: string;
-        onReady?: (walletButtonAvailable?: boolean) => void;
-    }) => {
-        destroy?: () => void;
-        update?: (updateParams: {
-            selectedPackageId: string;
-            onReady?: (walletButtonAvailable?: boolean) => void;
-        }) => void;
-    };
+    walletButtonRender?: WalletButtonRender;
+    onInputChanged?: (fieldId: string, value: string) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**

package/dist/components/text/TextNode.svelte

@@ -35,18 +35,6 @@
     };
   });
 
-  const isVisible = $derived(
-    evaluateVisibilityConditions(
-      {
-        selectedPackageId: $selectedPackageId,
-        packageInfo: $packageInfo,
-        variables: $variables,
-      },
-      props.overrides,
-      props.visible,
-    ),
-  );
-
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
@@ -69,6 +57,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,10 +1,11 @@
 <script lang="ts">
-  import Paywall, {
-    type UIConfig,
-  } from "../paywall/Paywall.svelte";
+  import Paywall from "../paywall/Paywall.svelte";
   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;
@@ -20,7 +21,10 @@
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
     initialInputSelections?: InitialInputSelections;
+    onInputChanged?: (fieldId: string, value: string) => void;
+    walletButtonRender?: WalletButtonRender;
   }
+
   const {
     paywallComponents,
     selectedLocale = "en_US",
@@ -33,6 +37,8 @@
     maxContentWidth,
     variablesPerPackage,
     initialInputSelections = {},
+    onInputChanged,
+    walletButtonRender,
   }: Props = $props();
 </script>
 
@@ -56,6 +62,8 @@
         onActionTriggered?.(actionId);
       }}
       {onPurchaseClicked}
+      {onInputChanged}
+      {walletButtonRender}
       onError={(error) => {
         console.error("Paywall error:", error);
       }}

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

@@ -1,7 +1,8 @@
-import { type UIConfig } from "../paywall/Paywall.svelte";
 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;
@@ -14,6 +15,8 @@ interface Props {
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
     initialInputSelections?: InitialInputSelections;
+    onInputChanged?: (fieldId: string, value: string) => void;
+    walletButtonRender?: WalletButtonRender;
 }
 declare const Screen: import("svelte").Component<Props, {}, "">;
 type Screen = ReturnType<typeof Screen>;

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export * from "./types";
 export { type PaywallData } from "./types/paywall";
 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 * from "./ui/globals";
 export { default as Button } from "./ui/molecules/button.svelte";

package/dist/index.js

@@ -18,6 +18,7 @@ export * from "./types";
 export {} from "./types/paywall";
 export {} from "./stores/inputValidation";
 export {} from "./types/ui-config";
+export {} from "./types/wallet";
 export { CustomVariableValue, } from "./types/variables";
 export * from "./ui/globals";
 export { default as Button } from "./ui/molecules/button.svelte";

package/dist/stores/paywall.d.ts

@@ -1,6 +1,7 @@
 import type { Action } from "../types/components/button";
 import type { UIConfig } from "../types/ui-config";
 import type { PackageInfo, VariableDictionary } from "../types/variables";
+import type { WalletButtonRender } from "../types/wallet";
 import { type Readable, type Writable } from "svelte/store";
 type PaywallContext = Readonly<{
     selectedPackageId: Writable<string | undefined>;
@@ -15,16 +16,8 @@ type PaywallContext = Readonly<{
     baseVariables: Readable<VariableDictionary | undefined>;
     infoPerPackage: Readable<Record<string, PackageInfo> | undefined>;
     onPurchase: (actionId?: string) => void;
-    walletButtonRender?: (node: HTMLElement, params: {
-        selectedPackageId: string;
-        onReady?: (walletButtonAvailable?: boolean) => void;
-    }) => {
-        destroy?: () => void;
-        update?: (params: {
-            selectedPackageId: string;
-            onReady?: (walletButtonAvailable?: boolean) => void;
-        }) => void;
-    };
+    onInputChanged?: (fieldId: string, value: string) => void;
+    walletButtonRender?: WalletButtonRender;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
     onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;

package/dist/stories/paywall-decorator.d.ts

@@ -1,11 +1,3 @@
+import type { WalletButtonRender } from "../types/wallet";
 import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
-export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(walletButtonRender?: (node: HTMLElement, params: {
-    selectedPackageId: string;
-    onReady?: (walletButtonAvailable?: boolean) => void;
-}) => {
-    destroy?: () => void;
-    update?: (updateParams: {
-        selectedPackageId: string;
-        onReady?: (walletButtonAvailable?: boolean) => void;
-    }) => void;
-}, selectedPackageId?: string): DecoratorFunction<TRenderer, TArgs>;
+export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(walletButtonRender?: WalletButtonRender, selectedPackageId?: string): DecoratorFunction<TRenderer, TArgs>;

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/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/types/wallet.d.ts

@@ -0,0 +1,10 @@
+export type WalletButtonRender = (node: HTMLElement, params: {
+    selectedPackageId: string;
+    onReady?: (walletButtonAvailable?: boolean) => void;
+}) => {
+    destroy?: () => void;
+    update?: (updateParams: {
+        selectedPackageId: string;
+        onReady?: (walletButtonAvailable?: boolean) => void;
+    }) => void;
+};

package/dist/types/wallet.js

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