@revenuecat/purchases-ui-js 2.1.1 → 2.2.1

package/dist/components/options/InputMultipleChoice.stories.svelte

@@ -0,0 +1,207 @@
+<script module lang="ts">
+  import InputMultipleChoice from "./InputMultipleChoice.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import type { InputMultipleChoiceProps } from "../../types/components/options";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
+
+  const { Story } = defineMeta({
+    title: "Components/Options/InputMultipleChoice",
+    component: InputMultipleChoice,
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            checkbox1: "Email notifications",
+            checkbox2: "SMS notifications",
+            checkbox3: "Push notifications",
+          },
+        },
+      }),
+    ],
+    args: {
+      type: "input_multiple_choice",
+      id: "multiple-choice-1",
+      name: "Multiple Choice Input",
+      field_id: "user_preferences",
+      stack: {
+        type: "stack",
+        id: "stack-1",
+        name: "Choice Stack",
+        components: [
+          {
+            type: "text",
+            id: "text-1",
+            name: "Choice Label",
+            text_lid: "checkbox1",
+            color: {
+              light: { type: "hex", value: "#000000" },
+              dark: { type: "hex", value: "#FFFFFF" },
+            },
+            font_size: "body_m",
+            font_weight: "regular",
+            horizontal_alignment: "leading",
+            size: {
+              width: { type: "fit" },
+              height: { type: "fit" },
+            },
+            margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+            padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+            background_color: null,
+          },
+        ],
+        dimension: {
+          type: "vertical",
+          alignment: "leading",
+          distribution: "start",
+        },
+        size: {
+          width: { type: "fill" },
+          height: { type: "fit" },
+        },
+        spacing: 8,
+        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+        padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+        background_color: {
+          light: { type: "hex", value: "#F5F5F5" },
+          dark: { type: "hex", value: "#2A2A2A" },
+        },
+        background: null,
+        border: {
+          width: 1,
+          color: {
+            light: { type: "hex", value: "#E0E0E0" },
+            dark: { type: "hex", value: "#404040" },
+          },
+        },
+        shape: {
+          type: "rectangle",
+          corners: {
+            top_leading: 8,
+            top_trailing: 8,
+            bottom_leading: 8,
+            bottom_trailing: 8,
+          },
+        },
+        shadow: null,
+        badge: null,
+      },
+    } satisfies InputMultipleChoiceProps,
+  });
+</script>
+
+<Story name="Default" />
+
+<Story
+  name="With Multiple Checkboxes"
+  args={{
+    stack: {
+      type: "stack",
+      id: "stack-2",
+      name: "Multi Checkbox Stack",
+      components: [
+        {
+          type: "text",
+          id: "text-1",
+          name: "Checkbox 1",
+          text_lid: "checkbox1",
+          color: {
+            light: { type: "hex", value: "#000000" },
+          },
+          font_size: "body_m",
+          font_weight: "regular",
+          horizontal_alignment: "leading",
+          size: {
+            width: { type: "fill" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+          background_color: null,
+        },
+        {
+          type: "text",
+          id: "text-2",
+          name: "Checkbox 2",
+          text_lid: "checkbox2",
+          color: {
+            light: { type: "hex", value: "#000000" },
+          },
+          font_size: "body_m",
+          font_weight: "regular",
+          horizontal_alignment: "leading",
+          size: {
+            width: { type: "fill" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+          background_color: null,
+        },
+        {
+          type: "text",
+          id: "text-3",
+          name: "Checkbox 3",
+          text_lid: "checkbox3",
+          color: {
+            light: { type: "hex", value: "#000000" },
+          },
+          font_size: "body_m",
+          font_weight: "regular",
+          horizontal_alignment: "leading",
+          size: {
+            width: { type: "fill" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+          background_color: null,
+        },
+      ],
+      dimension: {
+        type: "vertical",
+        alignment: "leading",
+        distribution: "start",
+      },
+      size: {
+        width: { type: "fill" },
+        height: { type: "fit" },
+      },
+      spacing: 8,
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+      background_color: {
+        light: { type: "hex", value: "#FFFFFF" },
+      },
+      background: null,
+      border: {
+        width: 1,
+        color: {
+          light: { type: "hex", value: "#DDDDDD" },
+        },
+      },
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 12,
+          top_trailing: 12,
+          bottom_leading: 12,
+          bottom_trailing: 12,
+        },
+      },
+      shadow: {
+        x: 0,
+        y: 2,
+        radius: 4,
+        color: {
+          light: { type: "hex", value: "#00000020" },
+        },
+      },
+      badge: null,
+    },
+  }}
+/>

package/dist/components/options/InputMultipleChoice.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import InputMultipleChoice from "./InputMultipleChoice.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputMultipleChoice: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputMultipleChoice = InstanceType<typeof InputMultipleChoice>;
+export default InputMultipleChoice;

package/dist/components/options/InputMultipleChoice.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Node from "../paywall/Node.svelte";
+  import type { InputMultipleChoiceProps } from "../../types/components/options";
+
+  const props: InputMultipleChoiceProps = $props();
+  const { stack } = props;
+</script>
+
+<Node nodeData={stack} />

package/dist/components/options/InputMultipleChoice.svelte.d.ts

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

package/dist/components/options/InputOption.stories.svelte

@@ -0,0 +1,251 @@
+<script module lang="ts">
+  import InputOption from "./InputOption.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import type { InputOptionProps } from "../../types/components/options";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
+
+  const { Story } = defineMeta({
+    title: "Components/Options/InputOption",
+    component: InputOption,
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            option_text: "Premium Plan",
+            option_description: "Unlock all features",
+          },
+        },
+      }),
+    ],
+    args: {
+      type: "input_option",
+      id: "option-1",
+      name: "Input Option",
+      option_id: "option_premium",
+      stack: {
+        type: "stack",
+        id: "stack-1",
+        name: "Option Stack",
+        components: [
+          {
+            type: "text",
+            id: "text-1",
+            name: "Option Text",
+            text_lid: "option_text",
+            color: {
+              light: { type: "hex", value: "#000000" },
+              dark: { type: "hex", value: "#FFFFFF" },
+            },
+            font_size: "body_l",
+            font_weight: "semibold",
+            horizontal_alignment: "leading",
+            size: {
+              width: { type: "fit" },
+              height: { type: "fit" },
+            },
+            margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+            padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+            background_color: null,
+          },
+        ],
+        dimension: {
+          type: "vertical",
+          alignment: "leading",
+          distribution: "start",
+        },
+        size: {
+          width: { type: "fill" },
+          height: { type: "fit" },
+        },
+        spacing: 4,
+        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+        padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+        background_color: {
+          light: { type: "hex", value: "#F9F9F9" },
+          dark: { type: "hex", value: "#2A2A2A" },
+        },
+        background: null,
+        border: {
+          width: 2,
+          color: {
+            light: { type: "hex", value: "#4A90E2" },
+            dark: { type: "hex", value: "#4A90E2" },
+          },
+        },
+        shape: {
+          type: "rectangle",
+          corners: {
+            top_leading: 8,
+            top_trailing: 8,
+            bottom_leading: 8,
+            bottom_trailing: 8,
+          },
+        },
+        shadow: null,
+        badge: null,
+      },
+    } satisfies InputOptionProps,
+  });
+</script>
+
+<Story name="Default" />
+
+<Story
+  name="With Description"
+  args={{
+    stack: {
+      type: "stack",
+      id: "stack-2",
+      name: "Option Stack with Description",
+      components: [
+        {
+          type: "text",
+          id: "text-1",
+          name: "Option Title",
+          text_lid: "option_text",
+          color: {
+            light: { type: "hex", value: "#000000" },
+          },
+          font_size: "body_l",
+          font_weight: "bold",
+          horizontal_alignment: "leading",
+          size: {
+            width: { type: "fill" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          background_color: null,
+        },
+        {
+          type: "text",
+          id: "text-2",
+          name: "Option Description",
+          text_lid: "option_description",
+          color: {
+            light: { type: "hex", value: "#666666" },
+          },
+          font_size: "body_s",
+          font_weight: "regular",
+          horizontal_alignment: "leading",
+          size: {
+            width: { type: "fill" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          background_color: null,
+        },
+      ],
+      dimension: {
+        type: "vertical",
+        alignment: "leading",
+        distribution: "start",
+      },
+      size: {
+        width: { type: "fill" },
+        height: { type: "fit" },
+      },
+      spacing: 8,
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+      background_color: {
+        light: { type: "hex", value: "#FFFFFF" },
+      },
+      background: null,
+      border: {
+        width: 2,
+        color: {
+          light: { type: "hex", value: "#4A90E2" },
+        },
+      },
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 12,
+          top_trailing: 12,
+          bottom_leading: 12,
+          bottom_trailing: 12,
+        },
+      },
+      shadow: {
+        x: 0,
+        y: 4,
+        radius: 8,
+        color: {
+          light: { type: "hex", value: "#00000015" },
+        },
+      },
+      badge: null,
+    },
+  }}
+/>
+
+<Story
+  name="Pill Shape"
+  args={{
+    stack: {
+      type: "stack",
+      id: "stack-3",
+      name: "Pill Option",
+      components: [
+        {
+          type: "text",
+          id: "text-1",
+          name: "Option Text",
+          text_lid: "option_text",
+          color: {
+            light: { type: "hex", value: "#FFFFFF" },
+          },
+          font_size: "body_m",
+          font_weight: "semibold",
+          horizontal_alignment: "center",
+          size: {
+            width: { type: "fit" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          background_color: null,
+        },
+      ],
+      dimension: {
+        type: "horizontal",
+        alignment: "center",
+        distribution: "center",
+      },
+      size: {
+        width: { type: "fit" },
+        height: { type: "fit" },
+      },
+      spacing: 0,
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 12, trailing: 24, bottom: 12, leading: 24 },
+      background_color: null,
+      background: {
+        type: "color",
+        value: {
+          light: { type: "hex", value: "#4A90E2" },
+        },
+      },
+      border: null,
+      shape: {
+        type: "pill",
+      },
+      shadow: {
+        x: 0,
+        y: 2,
+        radius: 4,
+        color: {
+          light: { type: "hex", value: "#00000030" },
+        },
+      },
+      badge: null,
+    },
+  }}
+/>

package/dist/components/options/InputOption.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import InputOption from "./InputOption.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputOption: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputOption = InstanceType<typeof InputOption>;
+export default InputOption;

package/dist/components/options/InputOption.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Stack from "../stack/Stack.svelte";
+  import { getPaywallContext } from "../../stores/paywall";
+  import type { InputOptionProps } from "../../types/components/options";
+
+  const props: InputOptionProps = $props();
+  const { stack } = props;
+
+  const { onButtonAction } = getPaywallContext();
+
+  const onclick = () => {
+    const actionId = props.triggers?.on_press;
+    // Create a workflow action to pass up through the callback
+    onButtonAction({ type: "workflow" }, actionId);
+  };
+</script>
+
+<Stack {...stack} {onclick} />

package/dist/components/options/InputOption.svelte.d.ts

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

package/dist/components/options/InputSingleChoice.stories.svelte

@@ -0,0 +1,207 @@
+<script module lang="ts">
+  import InputSingleChoice from "./InputSingleChoice.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import type { InputSingleChoiceProps } from "../../types/components/options";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
+
+  const { Story } = defineMeta({
+    title: "Components/Options/InputSingleChoice",
+    component: InputSingleChoice,
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            option1: "Option 1",
+            option2: "Option 2",
+            option3: "Option 3",
+          },
+        },
+      }),
+    ],
+    args: {
+      type: "input_single_choice",
+      id: "single-choice-1",
+      name: "Single Choice Input",
+      field_id: "user_preference",
+      stack: {
+        type: "stack",
+        id: "stack-1",
+        name: "Choice Stack",
+        components: [
+          {
+            type: "text",
+            id: "text-1",
+            name: "Choice Label",
+            text_lid: "option1",
+            color: {
+              light: { type: "hex", value: "#000000" },
+              dark: { type: "hex", value: "#FFFFFF" },
+            },
+            font_size: "body_m",
+            font_weight: "regular",
+            horizontal_alignment: "leading",
+            size: {
+              width: { type: "fit" },
+              height: { type: "fit" },
+            },
+            margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+            padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+            background_color: null,
+          },
+        ],
+        dimension: {
+          type: "vertical",
+          alignment: "leading",
+          distribution: "start",
+        },
+        size: {
+          width: { type: "fill" },
+          height: { type: "fit" },
+        },
+        spacing: 8,
+        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+        padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+        background_color: {
+          light: { type: "hex", value: "#F5F5F5" },
+          dark: { type: "hex", value: "#2A2A2A" },
+        },
+        background: null,
+        border: {
+          width: 1,
+          color: {
+            light: { type: "hex", value: "#E0E0E0" },
+            dark: { type: "hex", value: "#404040" },
+          },
+        },
+        shape: {
+          type: "rectangle",
+          corners: {
+            top_leading: 8,
+            top_trailing: 8,
+            bottom_leading: 8,
+            bottom_trailing: 8,
+          },
+        },
+        shadow: null,
+        badge: null,
+      },
+    } satisfies InputSingleChoiceProps,
+  });
+</script>
+
+<Story name="Default" />
+
+<Story
+  name="With Multiple Options"
+  args={{
+    stack: {
+      type: "stack",
+      id: "stack-2",
+      name: "Multi Choice Stack",
+      components: [
+        {
+          type: "text",
+          id: "text-1",
+          name: "Option 1",
+          text_lid: "option1",
+          color: {
+            light: { type: "hex", value: "#000000" },
+          },
+          font_size: "body_m",
+          font_weight: "medium",
+          horizontal_alignment: "leading",
+          size: {
+            width: { type: "fill" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+          background_color: null,
+        },
+        {
+          type: "text",
+          id: "text-2",
+          name: "Option 2",
+          text_lid: "option2",
+          color: {
+            light: { type: "hex", value: "#000000" },
+          },
+          font_size: "body_m",
+          font_weight: "medium",
+          horizontal_alignment: "leading",
+          size: {
+            width: { type: "fill" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+          background_color: null,
+        },
+        {
+          type: "text",
+          id: "text-3",
+          name: "Option 3",
+          text_lid: "option3",
+          color: {
+            light: { type: "hex", value: "#000000" },
+          },
+          font_size: "body_m",
+          font_weight: "medium",
+          horizontal_alignment: "leading",
+          size: {
+            width: { type: "fill" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 12, trailing: 16, bottom: 12, leading: 16 },
+          background_color: null,
+        },
+      ],
+      dimension: {
+        type: "vertical",
+        alignment: "leading",
+        distribution: "start",
+      },
+      size: {
+        width: { type: "fill" },
+        height: { type: "fit" },
+      },
+      spacing: 0,
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      background_color: {
+        light: { type: "hex", value: "#FFFFFF" },
+      },
+      background: null,
+      border: {
+        width: 1,
+        color: {
+          light: { type: "hex", value: "#DDDDDD" },
+        },
+      },
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 12,
+          top_trailing: 12,
+          bottom_leading: 12,
+          bottom_trailing: 12,
+        },
+      },
+      shadow: {
+        x: 0,
+        y: 2,
+        radius: 4,
+        color: {
+          light: { type: "hex", value: "#00000020" },
+        },
+      },
+      badge: null,
+    },
+  }}
+/>

package/dist/components/options/InputSingleChoice.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import InputSingleChoice from "./InputSingleChoice.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputSingleChoice: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputSingleChoice = InstanceType<typeof InputSingleChoice>;
+export default InputSingleChoice;

package/dist/components/options/InputSingleChoice.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Node from "../paywall/Node.svelte";
+  import type { InputSingleChoiceProps } from "../../types/components/options";
+
+  const props: InputSingleChoiceProps = $props();
+  const { stack } = props;
+</script>
+
+<Node nodeData={stack} />

package/dist/components/options/InputSingleChoice.svelte.d.ts

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

package/dist/components/paywall/Node.svelte

@@ -9,6 +9,9 @@
     Video,
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
+  import InputMultipleChoice from "../options/InputMultipleChoice.svelte";
+  import InputOption from "../options/InputOption.svelte";
+  import InputSingleChoice from "../options/InputSingleChoice.svelte";
   import TextNode from "../text/TextNode.svelte";
   import type { Component } from "../../types/component";
   import type { Component as SvelteComponent } from "svelte";
@@ -29,6 +32,9 @@
     footer: Footer,
     icon: Icon,
     image: Image,
+    input_multiple_choice: InputMultipleChoice,
+    input_option: InputOption,
+    input_single_choice: InputSingleChoice,
     package: Package,
     purchase_button: PurchaseButton,
     stack: Stack,

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

@@ -322,3 +322,18 @@
     paywallData: listTemplate,
   }}
 />
+
+<Story
+  name="Wallet Button"
+  args={{
+    paywallData: pastaPaywallData,
+    walletButtonRender: (element: HTMLElement, selectedPackageId) => {
+      const newDiv = document.createElement("div");
+      newDiv.innerText = "Hi! I was injected from the walletButtonRender";
+      newDiv.style.width = "100%";
+      newDiv.style.textAlign = "center";
+      element.append(newDiv);
+      return {};
+    },
+  }}
+/>

package/dist/components/paywall/Paywall.svelte

@@ -40,6 +40,13 @@
     onNavigateToUrlClicked?: (url: string) => void;
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
+    walletButtonRender?: (
+      node: HTMLElement,
+      selectedPackageId: string,
+    ) => {
+      destroy?: () => void;
+      update?: (selectedPackageId: string) => void;
+    };
   }
 
   const {
@@ -56,6 +63,7 @@
     onActionTriggered,
     onError,
     uiConfig,
+    walletButtonRender,
   }: Props = $props();
 
   const getColorMode = setColorModeContext(() => preferredColorMode);
@@ -127,6 +135,7 @@
     infoPerPackage: readable(infoPerPackage),
     onPurchase,
     onButtonAction,
+    walletButtonRender,
     uiConfig,
   });
 

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

@@ -16,6 +16,10 @@ interface Props {
     onNavigateToUrlClicked?: (url: string) => void;
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
+    walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+        destroy?: () => void;
+        update?: (selectedPackageId: string) => void;
+    };
 }
 declare const Paywall: import("svelte").Component<Props, {}, "">;
 type Paywall = ReturnType<typeof Paywall>;

package/dist/components/purchase-button/PurchaseButton.svelte

@@ -4,8 +4,17 @@
   import type { PurchaseButtonProps } from "../../types/components/purchase-button";
 
   const { stack }: PurchaseButtonProps = $props();
-
-  const { onPurchase } = getPaywallContext();
+  const { onPurchase, walletButtonRender, selectedPackageId } =
+    getPaywallContext();
 </script>
 
+{#if walletButtonRender}
+  {#if $selectedPackageId}
+    <div
+      style="width: 100%; margin-bottom:20px"
+      use:walletButtonRender={$selectedPackageId}
+    ></div>
+  {/if}
+{/if}
+
 <Stack {...stack} onclick={onPurchase} />

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
 export { default as Image } from "./components/image/Image.svelte";
+export { default as InputMultipleChoice } from "./components/options/InputMultipleChoice.svelte";
+export { default as InputOption } from "./components/options/InputOption.svelte";
+export { default as InputSingleChoice } from "./components/options/InputSingleChoice.svelte";
 export { default as Package } from "./components/package/Package.svelte";
 export { default as Paywall } from "./components/paywall/Paywall.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";

package/dist/index.js

@@ -2,6 +2,9 @@
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
 export { default as Image } from "./components/image/Image.svelte";
+export { default as InputMultipleChoice } from "./components/options/InputMultipleChoice.svelte";
+export { default as InputOption } from "./components/options/InputOption.svelte";
+export { default as InputSingleChoice } from "./components/options/InputSingleChoice.svelte";
 export { default as Package } from "./components/package/Package.svelte";
 export { default as Paywall } from "./components/paywall/Paywall.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";

package/dist/stores/paywall.d.ts

@@ -7,6 +7,10 @@ type PaywallContext = Readonly<{
     variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
     infoPerPackage: Readable<Record<string, PackageInfo> | undefined>;
     onPurchase: () => void;
+    walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+        destroy?: () => void;
+        update?: (selectedPackageId: string) => void;
+    };
     onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;
 }>;

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

@@ -1,2 +1,5 @@
 import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
-export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(): DecoratorFunction<TRenderer, TArgs>;
+export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+    destroy?: () => void;
+    update?: (selectedPackageId: string) => void;
+}): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/paywall-decorator.js

@@ -1,6 +1,6 @@
 import { setPaywallContext } from "../stores/paywall";
 import { readable, writable } from "svelte/store";
-export function paywallDecorator() {
+export function paywallDecorator(walletButtonRender) {
     return (Story) => {
         const selectedPackageId = writable(undefined);
         selectedPackageId.subscribe((packageId) => {
@@ -19,6 +19,7 @@ export function paywallDecorator() {
             infoPerPackage: readable(undefined),
             onPurchase: () => window.alert("Purchase clicked"),
             onButtonAction: (action, actionId) => window.alert(`Button clicked: ${JSON.stringify({ action, actionId }, undefined, 2)}`),
+            walletButtonRender,
             uiConfig: emptyUiConfig,
         });
         return Story();

package/dist/types/component.d.ts

@@ -3,6 +3,7 @@ import type { CarouselProps } from "./components/carousel";
 import type { FooterProps } from "./components/footer";
 import type { IconProps } from "./components/icon";
 import type { ImageProps } from "./components/image";
+import type { InputMultipleChoiceProps, InputOptionProps, InputSingleChoiceProps } from "./components/options";
 import type { PackageProps } from "./components/package";
 import type { PurchaseButtonProps } from "./components/purchase-button";
 import type { StackProps } from "./components/stack";
@@ -10,4 +11,4 @@ import type { TabControlButtonProps, TabControlProps, TabControlToggleProps, Tab
 import type { TextNodeProps } from "./components/text";
 import type { TimelineProps } from "./components/timeline";
 import type { VideoProps } from "./components/video";
-export type Component = ButtonProps | CarouselProps | FooterProps | IconProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | VideoProps;
+export type Component = ButtonProps | CarouselProps | FooterProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | VideoProps;

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

@@ -0,0 +1,17 @@
+import type { BaseComponent } from "../base";
+import type { StackProps } from "./stack";
+export interface InputSingleChoiceProps extends BaseComponent {
+    type: "input_single_choice";
+    field_id: string;
+    stack: StackProps;
+}
+export interface InputMultipleChoiceProps extends BaseComponent {
+    type: "input_multiple_choice";
+    field_id: string;
+    stack: StackProps;
+}
+export interface InputOptionProps extends BaseComponent {
+    type: "input_option";
+    option_id: string;
+    stack: StackProps;
+}

package/dist/types/components/options.js

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

package/package.json

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