@revenuecat/purchases-ui-js 4.8.21 → 4.8.23

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

@@ -1,9 +1,15 @@
 import type { InputTextProps, ReservedAttribute } from "../../types/components/input-text";
+import type { Localizations } from "../../types/localization";
+import type { ComponentInteractionData } from "../../types/paywall-component-interaction";
 interface Props extends InputTextProps {
     onInputChanged?: (fieldId: string, value: string) => void;
     onSensitiveInputChanged?: (fieldId: string, value: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     onSatisfactionChange?: (satisfied: boolean) => void;
+    onNavigateToUrl?: (url: string) => void;
+    onComponentInteraction?: (data: ComponentInteractionData) => void;
+    localizations?: Localizations;
+    selectedLocale?: string;
 }
 declare const InputTextTestWrapper: import("svelte").Component<Props, {}, "">;
 type InputTextTestWrapper = ReturnType<typeof InputTextTestWrapper>;

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

@@ -0,0 +1,16 @@
+/**
+ * How a `validation.pattern` is enforced on the rendered input.
+ *
+ * Browsers compile the `pattern` attribute as `^(?:pattern)$` with the `v`
+ * flag and silently ignore it when that fails, which would drop the constraint
+ * altogether. Patterns that are valid `v`-mode regexes are left to the browser
+ * (`patternMismatch`); anything else that still compiles as a plain JS regex is
+ * matched by the component and reported through `setCustomValidity`.
+ */
+export type CompiledPattern = {
+    mode: "native";
+} | {
+    mode: "custom";
+    regex: RegExp;
+};
+export declare function compilePattern(pattern: string | null | undefined): CompiledPattern | null;

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

@@ -0,0 +1,24 @@
+const FALLBACK_FLAGS = ["u", ""];
+export function compilePattern(pattern) {
+    if (!pattern) {
+        return null;
+    }
+    const source = `^(?:${pattern})$`;
+    try {
+        new RegExp(source, "v");
+        return { mode: "native" };
+    }
+    catch {
+        // Not a valid `v`-mode regex; try the more lenient dialects below.
+    }
+    for (const flags of FALLBACK_FLAGS) {
+        try {
+            return { mode: "custom", regex: new RegExp(source, flags) };
+        }
+        catch {
+            // Try the next dialect.
+        }
+    }
+    console.warn(`Ignoring invalid input_text validation pattern: ${pattern}`);
+    return null;
+}

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

@@ -0,0 +1,15 @@
+import type { InputTextValidationRule } from "../../types/components/input-text";
+/**
+ * Maps a native `ValidityState` to the first failing validation rule, so the
+ * per-rule error copy can be picked. Order matters: an empty required field is
+ * reported as `required` even if other constraints would also fail.
+ *
+ * `typeMismatch` lands in `format` even without `validation.format`, since a
+ * `keyboard_type: "email"` input is `type="email"` and fails the same way.
+ * `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`.
+ */
+export declare function failingRuleFromValidity(validity: ValidityState): InputTextValidationRule | null;

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

@@ -0,0 +1,40 @@
+/**
+ * Maps a native `ValidityState` to the first failing validation rule, so the
+ * per-rule error copy can be picked. Order matters: an empty required field is
+ * reported as `required` even if other constraints would also fail.
+ *
+ * `typeMismatch` lands in `format` even without `validation.format`, since a
+ * `keyboard_type: "email"` input is `type="email"` and fails the same way.
+ * `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`.
+ */
+export function failingRuleFromValidity(validity) {
+    if (validity.valid) {
+        return null;
+    }
+    if (validity.valueMissing) {
+        return "required";
+    }
+    if (validity.rangeUnderflow) {
+        return "minimum";
+    }
+    if (validity.rangeOverflow) {
+        return "maximum";
+    }
+    if (validity.tooShort) {
+        return "minLength";
+    }
+    if (validity.tooLong) {
+        return "maxLength";
+    }
+    if (validity.patternMismatch || validity.customError) {
+        return "pattern";
+    }
+    if (validity.typeMismatch || validity.badInput || validity.stepMismatch) {
+        return "format";
+    }
+    return null;
+}

package/dist/components/options/InputMultipleChoice.svelte

@@ -44,10 +44,13 @@
   if (validationContext) {
     const unsubscribe = inputChoiceContext.isSatisfied.subscribe(
       (satisfied) => {
-        validationContext.updateSatisfaction(satisfied);
+        validationContext.updateSatisfaction(props.id, satisfied);
       },
     );
-    onDestroy(unsubscribe);
+    onDestroy(() => {
+      unsubscribe();
+      validationContext.removeInput(props.id);
+    });
   }
 </script>
 

package/dist/components/options/InputSingleChoice.svelte

@@ -30,10 +30,13 @@
   if (validationContext) {
     const unsubscribe = inputChoiceContext.isSatisfied.subscribe(
       (satisfied) => {
-        validationContext.updateSatisfaction(satisfied);
+        validationContext.updateSatisfaction(props.id, satisfied);
       },
     );
-    onDestroy(unsubscribe);
+    onDestroy(() => {
+      unsubscribe();
+      validationContext.removeInput(props.id);
+    });
   }
 </script>
 

package/dist/components/paywall/Paywall.stories.svelte

@@ -27,9 +27,11 @@
   import { BACKGROUND_PAYWALL } from "./fixtures/background-paywall";
   import { FIXED_HEIGHT_STACK_PAYWALL } from "./fixtures/fixed-height-stack-paywall";
   import { FILL_HEIGHT_WEBVIEW_PAYWALL } from "./fixtures/fill-height-webview-paywall";
+  import { createHeroMediaPaywall } from "./fixtures/hero-media-paywall";
   import { OVERRIDE_PAYWALL } from "./fixtures/override-paywall";
   import { SHEET_PAYWALL } from "./fixtures/sheet-paywall";
   import { SHEET_PAYWALL_VIDEO_STACKING } from "./fixtures/sheet-video-stacking-paywall";
+  import { GRADIENT_SHEET_PAYWALL } from "./fixtures/gradient-sheet-paywall";
   import { STACK_PAYWALL } from "./fixtures/stack-paywall";
   import { VARIABLES } from "./fixtures/variables";
   import { CUSTOM_VARIABLES_PAYWALL } from "./fixtures/custom-variables-paywall";
@@ -167,6 +169,19 @@
   }}
 />
 
+<Story
+  name="Sheet — gradient background"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  play={async ({ canvasElement }) => {
+    const button = canvasElement.querySelector("button");
+    button?.click();
+    await waitForAnimations();
+  }}
+  args={{
+    paywallData: GRADIENT_SHEET_PAYWALL,
+  }}
+/>
+
 <Story
   name="Background - Color"
   decorators={[viewportDecorator(500, 500, 0)]}
@@ -551,6 +566,31 @@
     paywallData: paywallWithTransparentHeaderAndTopImage,
   }}
 />
+
+<Story
+  name="Hero media - nested image"
+  decorators={[viewportDecorator(375, 500, 0)]}
+  args={{
+    paywallData: createHeroMediaPaywall("image"),
+  }}
+/>
+
+<Story
+  name="Hero media - nested video"
+  decorators={[viewportDecorator(375, 500, 0)]}
+  args={{
+    paywallData: createHeroMediaPaywall("video"),
+  }}
+/>
+
+<Story
+  name="Hero media - nested web view"
+  decorators={[viewportDecorator(375, 500, 0)]}
+  args={{
+    paywallData: createHeroMediaPaywall("web_view"),
+  }}
+/>
+
 <Story
   name="Timeline"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -50,7 +50,10 @@
   import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
-  import { mapPaywallContentStackStyle } from "./paywall-utils";
+  import {
+    firstContentIsHeroMedia,
+    mapPaywallContentStackStyle,
+  } from "./paywall-utils";
   import Sheet from "./Sheet.svelte";
   import ViewportBackdrop from "./ViewportBackdrop.svelte";
   import {
@@ -425,11 +428,8 @@
 
   const { stack, sticky_footer, header } = base;
 
-  const firstComponent = stack.components[0];
-  const firstComponentIsFullWidthImage =
-    firstComponent?.type === "image" &&
-    firstComponent.size.width.type === "fill";
-  const pullContentUnderHeader = !!header && firstComponentIsFullWidthImage;
+  const pullContentUnderHeader =
+    !!header && firstContentIsHeroMedia(stack.components);
 
   let headerHeight = $state(0);
   let footerHeight = $state(0);
@@ -442,8 +442,9 @@
 </script>
 
 <svelte:boundary onerror={onError}>
+  <!-- Outside the root: filter/transform on `.blur` would clip the fixed backdrop to the paywall box. -->
+  <ViewportBackdrop model={viewportBackdropModel} blur={!!sheet} />
   <div class={paywallClass} style={paywallStyle}>
-    <ViewportBackdrop model={viewportBackdropModel} />
     {#if header}
       <div
         class="header-wrapper"
@@ -495,6 +496,12 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
+    box-sizing: border-box;
+    /* Definite containing block so fill-width children (`-webkit-fill-available`)
+       do not shrink-wrap the host overlay and walk a Chromium zoom feedback loop. */
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
     height: 100%;
 
     transition-property: filter, transform;

package/dist/components/paywall/Sheet.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
   import { useConditionContext } from "../../stores/condition-context.svelte";
-  import { getPaywallContext } from "../../stores/paywall";
+  import { getPaywallContext, setPaywallContext } from "../../stores/paywall";
   import BackgroundVideoSurface from "./BackgroundVideoSurface.svelte";
   import type { SheetProps } from "../../types/components/sheet";
   import {
@@ -56,21 +56,34 @@
     }),
   );
 
-  const { onButtonAction } = getPaywallContext();
+  const paywallContext = getPaywallContext();
+  const { onButtonAction } = paywallContext;
 
   let sheet: HTMLDivElement | undefined;
   let visible = $state(false);
 
+  const hideSheet = () => {
+    visible = false;
+  };
+
+  // navigate_back inside the sheet closes the sheet, not the paywall.
+  setPaywallContext({
+    ...paywallContext,
+    onButtonAction: (action, actionId) => {
+      if (action.type === "navigate_back") {
+        hideSheet();
+        return;
+      }
+      onButtonAction(action, actionId);
+    },
+  });
+
   onMount(() => {
     requestAnimationFrame(() => {
       visible = true;
     });
   });
 
-  const hideSheet = () => {
-    visible = false;
-  };
-
   const ontransitionend = () => {
     if (visible) {
       return;

package/dist/components/paywall/ViewportBackdrop.svelte

@@ -6,7 +6,10 @@
   // through to the safe-area canvas. A position:fixed element that explicitly
   // fills the viewport — including safe areas — is the only consistent paint
   // surface for gradients and images on iOS Safari.
-  const { model }: { model: PaywallRootBackgroundModel } = $props();
+  const {
+    model,
+    blur = false,
+  }: { model: PaywallRootBackgroundModel; blur?: boolean } = $props();
 
   const backdropStyle = $derived.by((): string => {
     if (
@@ -46,6 +49,7 @@
 {#if shouldRenderBackdrop}
   <div
     class="viewport-backdrop"
+    class:blurred={blur}
     style={backdropStyle !== "" ? backdropStyle : undefined}
   >
     {#if model.kind === "video"}
@@ -77,6 +81,14 @@
     pointer-events: none;
     overflow: hidden;
     isolation: isolate;
+    transition:
+      filter 0.1s ease-in-out,
+      transform 0.1s ease-in-out;
+  }
+
+  .viewport-backdrop.blurred {
+    filter: blur(10px) brightness(0.8);
+    transform: scale(1.045);
   }
 
   .viewport-backdrop-overlay {

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

@@ -1,6 +1,7 @@
 import type { PaywallRootBackgroundModel } from "../../utils/background-utils";
 type $$ComponentProps = {
     model: PaywallRootBackgroundModel;
+    blur?: boolean;
 };
 declare const ViewportBackdrop: import("svelte").Component<$$ComponentProps, {}, "">;
 type ViewportBackdrop = ReturnType<typeof ViewportBackdrop>;

package/dist/components/paywall/fixtures/gradient-sheet-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../types/paywall";
+export declare const GRADIENT_SHEET_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/gradient-sheet-paywall.js

@@ -0,0 +1,68 @@
+import { createStack, createTextComponent } from "./helpers";
+// Gradient background (painted by ViewportBackdrop) plus a button that opens a sheet.
+export const GRADIENT_SHEET_PAYWALL = {
+    id: "gradient-sheet-paywall",
+    default_locale: "en_US",
+    components_localizations: {
+        en_US: { open_sheet: "Open sheet", sheet_title: "Sheet" },
+    },
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: {
+                    light: {
+                        type: "linear",
+                        degrees: 45,
+                        points: [
+                            { percent: 0, color: "#010101ff" },
+                            { percent: 100, color: "#f79e00ff" },
+                        ],
+                    },
+                },
+            },
+            stack: createStack({
+                id: "root",
+                name: "Root",
+                components: [
+                    {
+                        type: "button",
+                        id: "open-sheet",
+                        name: "open-sheet",
+                        action: {
+                            type: "navigate_to",
+                            destination: "sheet",
+                            sheet: {
+                                type: "sheet",
+                                id: "sheet",
+                                name: "sheet",
+                                size: { width: { type: "fill" }, height: { type: "fit" } },
+                                background_blur: true,
+                                stack: createStack({
+                                    id: "sheet-stack",
+                                    name: "Sheet",
+                                    components: [
+                                        createTextComponent({
+                                            id: "sheet-title",
+                                            textLid: "sheet_title",
+                                        }),
+                                    ],
+                                }),
+                            },
+                        },
+                        stack: createStack({
+                            id: "open-sheet-stack",
+                            name: "open-sheet",
+                            components: [
+                                createTextComponent({
+                                    id: "open-sheet-text",
+                                    textLid: "open_sheet",
+                                }),
+                            ],
+                        }),
+                    },
+                ],
+            }),
+        },
+    },
+};

package/dist/components/paywall/fixtures/hero-media-paywall.d.ts

@@ -0,0 +1,3 @@
+import type { PaywallData } from "../../../types/paywall";
+export type HeroMediaType = "image" | "video" | "web_view";
+export declare const createHeroMediaPaywall: (type: HeroMediaType) => PaywallData;

package/dist/components/paywall/fixtures/hero-media-paywall.js

@@ -0,0 +1,182 @@
+import { createStack, createTextComponent } from "./helpers";
+const ZERO_SPACING = {
+    bottom: 0,
+    leading: 0,
+    top: 0,
+    trailing: 0,
+};
+const imageSource = (url) => ({
+    light: {
+        width: 640,
+        height: 360,
+        original: url,
+        heic: url,
+        heic_low_res: url,
+        webp: url,
+        webp_low_res: url,
+    },
+});
+const createImageHero = () => ({
+    type: "image",
+    id: "image-hero",
+    name: "Image hero",
+    source: imageSource("https://placehold.co/640x360/2563eb/ffffff.webp?text=Image+Hero"),
+    size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: 240 },
+    },
+    mask_shape: null,
+    fit_mode: "fill",
+    padding: { ...ZERO_SPACING },
+    margin: { ...ZERO_SPACING },
+    color_overlay: null,
+    border: null,
+    shadow: null,
+});
+const createVideoHero = () => ({
+    type: "video",
+    id: "video-hero",
+    name: "Video hero",
+    source: null,
+    fallback_source: imageSource("https://placehold.co/640x360/7c3aed/ffffff.webp?text=Video+Hero"),
+    size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: 240 },
+    },
+    mask_shape: null,
+    fit_mode: "fill",
+    padding: { ...ZERO_SPACING },
+    margin: { ...ZERO_SPACING },
+    color_overlay: null,
+    border: null,
+    shadow: null,
+    auto_play: false,
+    loop: false,
+    mute_audio: true,
+    show_controls: false,
+});
+const createWebViewHero = () => ({
+    type: "web_view",
+    id: "web-view-hero",
+    name: "Web view hero",
+    protocol_version: 1,
+    url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/2705.svg",
+    size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: 240 },
+    },
+});
+const createHero = (type) => {
+    switch (type) {
+        case "image":
+            return createImageHero();
+        case "video":
+            return createVideoHero();
+        case "web_view":
+            return createWebViewHero();
+    }
+};
+const createHeader = () => {
+    const stack = createStack({
+        id: "hero-header-stack",
+        name: "Hero header stack",
+        components: [
+            {
+                ...createTextComponent({
+                    id: "hero-header-label",
+                    textLid: "hero_header_label",
+                }),
+                color: {
+                    light: {
+                        type: "hex",
+                        value: "#ffffff",
+                    },
+                },
+                font_size: 18,
+                font_weight: "bold",
+            },
+        ],
+    });
+    stack.size.width = { type: "fill" };
+    stack.padding = {
+        bottom: 18,
+        leading: 20,
+        top: 18,
+        trailing: 20,
+    };
+    stack.background_color = {
+        light: {
+            type: "hex",
+            value: "#11182799",
+        },
+    };
+    return {
+        type: "header",
+        id: "hero-header",
+        name: "Hero header",
+        stack,
+    };
+};
+export const createHeroMediaPaywall = (type) => {
+    const heroContainer = createStack({
+        id: `${type}-hero-container`,
+        name: `${type} hero container`,
+        components: [createHero(type)],
+    });
+    heroContainer.size.width = { type: "fill" };
+    heroContainer.padding = { ...ZERO_SPACING };
+    heroContainer.spacing = 0;
+    const rootStack = createStack({
+        id: `${type}-hero-root`,
+        name: `${type} hero root`,
+        components: [
+            heroContainer,
+            {
+                ...createTextComponent({
+                    id: `${type}-body`,
+                    textLid: "body",
+                }),
+                font_size: 18,
+                horizontal_alignment: "center",
+                size: {
+                    width: { type: "fill" },
+                    height: { type: "fit" },
+                },
+            },
+        ],
+    });
+    rootStack.size.width = { type: "fill" };
+    rootStack.padding = {
+        bottom: 24,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+    };
+    rootStack.spacing = 24;
+    return {
+        id: `${type}_hero_paywall`,
+        default_locale: "en_US",
+        components_localizations: {
+            en_US: {
+                hero_header_label: "Header overlays the hero",
+                body: `Full-width ${type.replace("_", " ")} detected through a nested stack`,
+            },
+        },
+        components_config: {
+            base: {
+                background: {
+                    type: "color",
+                    value: {
+                        light: {
+                            type: "hex",
+                            value: "#ffffff",
+                        },
+                    },
+                },
+                header: createHeader(),
+                stack: rootStack,
+                sticky_footer: null,
+            },
+        },
+    };
+};

package/dist/components/paywall/fixtures/sheet-close-button-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../types/paywall";
+export declare const SHEET_CLOSE_BUTTON_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/sheet-close-button-paywall.js

@@ -0,0 +1,62 @@
+import { createStack, createTextComponent } from "./helpers";
+function button(id, textLid, action) {
+    return {
+        type: "button",
+        id,
+        name: id,
+        action,
+        stack: createStack({
+            id: `${id}-stack`,
+            name: id,
+            components: [createTextComponent({ id: `${id}-text`, textLid })],
+        }),
+    };
+}
+// Sheet whose close button uses navigate_back, as the builder configures it.
+export const SHEET_CLOSE_BUTTON_PAYWALL = {
+    id: "sheet-close-button-paywall",
+    default_locale: "en_US",
+    components_localizations: {
+        en_US: {
+            open_sheet: "Included devices",
+            sheet_title: "Devices",
+            close_sheet: "Close",
+            close_paywall: "Dismiss paywall",
+        },
+    },
+    components_config: {
+        base: {
+            stack: createStack({
+                id: "root",
+                name: "Root",
+                components: [
+                    button("close-paywall", "close_paywall", { type: "navigate_back" }),
+                    button("open-sheet", "open_sheet", {
+                        type: "navigate_to",
+                        destination: "sheet",
+                        sheet: {
+                            type: "sheet",
+                            id: "devices-sheet",
+                            name: "devices_sheet",
+                            size: { width: { type: "fill" }, height: { type: "fit" } },
+                            background_blur: true,
+                            stack: createStack({
+                                id: "sheet-stack",
+                                name: "Sheet",
+                                components: [
+                                    createTextComponent({
+                                        id: "sheet-title",
+                                        textLid: "sheet_title",
+                                    }),
+                                    button("close-sheet", "close_sheet", {
+                                        type: "navigate_back",
+                                    }),
+                                ],
+                            }),
+                        },
+                    }),
+                ],
+            }),
+        },
+    },
+};