@revenuecat/purchases-ui-js 4.8.25 → 4.10.0

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

@@ -104,16 +104,39 @@
     }
   }
 
-  function readValidity(input: HTMLInputElement): boolean {
-    if (compiledPattern?.mode === "custom") {
+  // Constraints the component checks itself, in the order they are reported.
+  // The value of the custom validity message is the failing rule, so
+  // `failingRuleFromValidity` can map `customError` back to it.
+  function customFailingRule(
+    input: HTMLInputElement,
+  ): InputTextValidationRule | null {
+    // `maxlength` is deliberately not rendered: the browser would truncate
+    // typing at the limit with no feedback, which reads as a broken input.
+    // Checking here lets the value exceed the limit and show the error copy.
+    if (
+      type !== "number" &&
+      validation?.maxLength != null &&
+      input.value.length > validation.maxLength
+    ) {
+      return "maxLength";
+    }
+    if (
+      compiledPattern?.mode === "custom" &&
       // Mirrors the native `pattern` semantics: empty values are left to
       // `required`, everything else must match the whole value.
-      const mismatch =
-        input.value !== "" && !compiledPattern.regex.test(input.value);
-      input.setCustomValidity(mismatch ? "pattern" : "");
+      input.value !== "" &&
+      !compiledPattern.regex.test(input.value)
+    ) {
+      return "pattern";
     }
+    return null;
+  }
+
+  function readValidity(input: HTMLInputElement): boolean {
+    const customRule = customFailingRule(input);
+    input.setCustomValidity(customRule ?? "");
     const { validity } = input;
-    failedRule = failingRuleFromValidity(validity);
+    failedRule = failingRuleFromValidity(validity, customRule);
     return validity.valid;
   }
 
@@ -332,12 +355,13 @@
   // ignore length/pattern on `type="number"` and min/max on text-like types.
   // `step="any"` lifts the implicit `step=1` for the `decimal` keyboard, which
   // would otherwise flag decimals as `stepMismatch`; `numeric` keeps it so the
-  // integer keypad and non-integer values agree. Patterns the browser would
-  // reject are enforced in `readValidity` instead of being rendered.
+  // integer keypad and non-integer values agree. `maxLength` and patterns the
+  // browser would reject are enforced in `readValidity` instead of being
+  // rendered (see `customFailingRule`).
   const constraintAttributes = $derived.by(
     (): Pick<
       HTMLInputAttributes,
-      "min" | "max" | "step" | "minlength" | "maxlength" | "pattern"
+      "min" | "max" | "step" | "minlength" | "pattern"
     > =>
       type === "number"
         ? {
@@ -347,7 +371,6 @@
           }
         : {
             minlength: validation?.minLength ?? undefined,
-            maxlength: validation?.maxLength ?? undefined,
             pattern:
               compiledPattern?.mode === "native"
                 ? (validation?.pattern ?? undefined)

package/dist/components/input-text/validity-rule.d.ts

@@ -9,7 +9,8 @@ import type { InputTextValidationRule } from "../../types/components/input-text"
  * `stepMismatch` (a non-integer on the `numeric` keyboard) falls back to
  * `format` as well.
  *
- * `customError` is only ever set by the component for a `pattern` the browser
- * cannot compile itself, so it is reported as `pattern`.
+ * `customError` is only ever set by the component itself, for the constraints
+ * it checks instead of the browser (`maxLength`, and a `pattern` the browser
+ * cannot compile); `customRule` says which one failed.
  */
-export declare function failingRuleFromValidity(validity: ValidityState): InputTextValidationRule | null;
+export declare function failingRuleFromValidity(validity: ValidityState, customRule?: InputTextValidationRule | null): InputTextValidationRule | null;

package/dist/components/input-text/validity-rule.js

@@ -8,10 +8,11 @@
  * `stepMismatch` (a non-integer on the `numeric` keyboard) falls back to
  * `format` as well.
  *
- * `customError` is only ever set by the component for a `pattern` the browser
- * cannot compile itself, so it is reported as `pattern`.
+ * `customError` is only ever set by the component itself, for the constraints
+ * it checks instead of the browser (`maxLength`, and a `pattern` the browser
+ * cannot compile); `customRule` says which one failed.
  */
-export function failingRuleFromValidity(validity) {
+export function failingRuleFromValidity(validity, customRule = null) {
     if (validity.valid) {
         return null;
     }
@@ -30,7 +31,10 @@ export function failingRuleFromValidity(validity) {
     if (validity.tooLong) {
         return "maxLength";
     }
-    if (validity.patternMismatch || validity.customError) {
+    if (validity.customError && customRule) {
+        return customRule;
+    }
+    if (validity.patternMismatch) {
         return "pattern";
     }
     if (validity.typeMismatch || validity.badInput || validity.stepMismatch) {

package/dist/components/paywall/fixtures/variables.d.ts

@@ -22,6 +22,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -59,6 +64,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -96,6 +106,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -133,6 +148,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -170,6 +190,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -207,6 +232,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "$0.50";
         readonly "product.offer_price_per_month": "$1.99";
         readonly "product.offer_price_per_year": "$23.88";
+        readonly "product.offer_price_with_zero": "$1.99";
+        readonly "product.offer_price_with_zero_per_day": "$0.07";
+        readonly "product.offer_price_with_zero_per_week": "$0.50";
+        readonly "product.offer_price_with_zero_per_month": "$1.99";
+        readonly "product.offer_price_with_zero_per_year": "$23.88";
         readonly "product.offer_period": "week";
         readonly "product.offer_period_abbreviated": "wk";
         readonly "product.offer_period_in_days": "7";
@@ -244,6 +274,11 @@ export declare const VARIABLES: Readonly<{
         readonly "product.offer_price_per_week": "";
         readonly "product.offer_price_per_month": "";
         readonly "product.offer_price_per_year": "";
+        readonly "product.offer_price_with_zero": "";
+        readonly "product.offer_price_with_zero_per_day": "";
+        readonly "product.offer_price_with_zero_per_week": "";
+        readonly "product.offer_price_with_zero_per_month": "";
+        readonly "product.offer_price_with_zero_per_year": "";
         readonly "product.offer_period": "";
         readonly "product.offer_period_abbreviated": "";
         readonly "product.offer_period_in_days": "";

package/dist/components/paywall/fixtures/variables.js

@@ -23,6 +23,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -60,6 +65,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -97,6 +107,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -134,6 +149,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -171,6 +191,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -208,6 +233,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "$0.50",
         "product.offer_price_per_month": "$1.99",
         "product.offer_price_per_year": "$23.88",
+        "product.offer_price_with_zero": "$1.99",
+        "product.offer_price_with_zero_per_day": "$0.07",
+        "product.offer_price_with_zero_per_week": "$0.50",
+        "product.offer_price_with_zero_per_month": "$1.99",
+        "product.offer_price_with_zero_per_year": "$23.88",
         "product.offer_period": "week",
         "product.offer_period_abbreviated": "wk",
         "product.offer_period_in_days": "7",
@@ -245,6 +275,11 @@ export const VARIABLES = Object.freeze({
         "product.offer_price_per_week": "",
         "product.offer_price_per_month": "",
         "product.offer_price_per_year": "",
+        "product.offer_price_with_zero": "",
+        "product.offer_price_with_zero_per_day": "",
+        "product.offer_price_with_zero_per_week": "",
+        "product.offer_price_with_zero_per_month": "",
+        "product.offer_price_with_zero_per_year": "",
         "product.offer_period": "",
         "product.offer_period_abbreviated": "",
         "product.offer_period_in_days": "",

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

@@ -1,11 +1,24 @@
 import type { BaseComponent } from "../base";
 import type { Overrides } from "../overrides";
 import type { StackProps } from "./stack";
+export interface PlayStoreOfferConfig {
+    offer_id: string;
+}
+/**
+ * Paddle discount to apply to this package on web. `discount_id` is the
+ * Paddle discount id (`dsc_...`); hosts resolve it through Paddle.js before
+ * rendering and pass it to Paddle checkout when purchasing.
+ */
+export interface PaddleDiscountConfig {
+    discount_id: string;
+}
 export interface PackageProps extends BaseComponent {
     type: "package";
     package_id: string;
     is_selected_by_default: boolean;
     apple_promo_offer_product_code?: string | null;
+    play_store_offer?: PlayStoreOfferConfig | null;
+    paddle_discount?: PaddleDiscountConfig | null;
     stack: StackProps;
     overrides?: Overrides<PackageProps>;
 }

package/dist/types/variables.d.ts

@@ -84,7 +84,7 @@ type CustomVariableName = string & {};
  */
 export type InputVariableName = `input.${string}`;
 export declare function mergeCustomVariables(customVariables: CustomVariables, uiConfig: UIConfig | undefined): VariableDictionary;
-type BuiltinVariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name" | "success.redemption_url" | "success.redemption_url_redirect" | "success.package_identifier" | "success.product_identifier" | "success.product_title" | "success.product_description" | "success.price" | "success.currency_code" | "success.customer_email" | "success.is_subscription" | "success.is_trial";
+type BuiltinVariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_price_with_zero" | "product.offer_price_with_zero_per_day" | "product.offer_price_with_zero_per_week" | "product.offer_price_with_zero_per_month" | "product.offer_price_with_zero_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name" | "success.redemption_url" | "success.redemption_url_redirect" | "success.package_identifier" | "success.product_identifier" | "success.product_title" | "success.product_description" | "success.price" | "success.currency_code" | "success.customer_email" | "success.is_subscription" | "success.is_trial";
 export type VariableDictionary = Partial<Record<BuiltinVariableName | InputVariableName | CustomVariableName, string>>;
 export type VariablesDictionary = Record<PackageIdentifier, VariableDictionary>;
 export interface PackageInfo {

package/dist/types.d.ts

@@ -129,3 +129,4 @@ export type { WorkflowScreen } from "./types/workflow";
 export type { ColorScheme } from "./types/colors";
 export type { ComponentInteractionData, ComponentInteractionType, OnComponentInteraction, } from "./types/paywall-component-interaction";
 export type { InputTextValidation, InputTextValidationErrorLids, InputTextValidationFormat, InputTextValidationRule, ReservedAttribute, } from "./types/components/input-text";
+export type { PackageProps, PaddleDiscountConfig, PlayStoreOfferConfig, } from "./types/components/package";

package/package.json

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