@revenuecat/purchases-ui-js 2.0.1 → 2.0.2

package/dist/components/button/ButtonNode.stories.svelte

@@ -1,15 +1,12 @@
 <script module lang="ts">
   import ButtonNode from "./ButtonNode.svelte";
   import type { StackProps, TextNodeProps } from "../../data/entities";
-  import type { PurchaseState } from "../../data/state";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";
 
-  const purchaseState: PurchaseState = {};
-
   const { Story } = defineMeta({
     title: "Components/Button",
     component: ButtonNode,
@@ -27,7 +24,6 @@
         },
       }),
     ],
-    args: { purchaseState },
     argTypes: {
       action: {
         control: { type: "object" },
@@ -63,7 +59,6 @@
     ({
       type: "text",
       name: "Button Text",
-      components: [],
       id: "button-text-1",
       text_lid: `id${id}`,
       font_weight: "medium",
@@ -113,7 +108,6 @@
     },
     border: null,
     shadow: null,
-    purchaseState,
   } satisfies Partial<StackProps>;
 </script>
 

package/dist/components/button/ButtonNode.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import { getButtonStyles } from "./button-utils";
   import Stack from "../stack/Stack.svelte";
-  import type { ButtonProps } from "../../types/components/button";
   import { ButtonDeprecated } from "../../index";
   import { getPaywallContext } from "../../stores/paywall";
+  import type { ButtonProps } from "../../types/components/button";
 
-  const { stack, action, labels, purchaseState, ...restProps }: ButtonProps =
-    $props();
+  const { stack, action, ...restProps }: ButtonProps = $props();
   const { onButtonAction } = getPaywallContext();
 
   const onclick = () => onButtonAction(action);
@@ -15,15 +14,13 @@
     getButtonStyles({
       stack,
       action,
-      labels,
-      purchaseState,
       ...restProps,
     }),
   );
 </script>
 
 <ButtonDeprecated {onclick} style={buttonStyles} class={"rc-pw-button"}>
-  <Stack {...stack} {labels} {purchaseState} />
+  <Stack {...stack} />
 </ButtonDeprecated>
 
 <style>

package/dist/components/footer/Footer.stories.svelte

@@ -1,17 +1,14 @@
 <script module lang="ts">
   import Footer from "./Footer.svelte";
-  import type { PurchaseState } from "../../data/state";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";
-  const purchaseState: PurchaseState = {};
 
   const { Story } = defineMeta({
     title: "Components/Footer",
     component: Footer,
     tags: ["autodocs"],
-    args: { purchaseState },
     decorators: [
       localizationDecorator({
         defaultLocale,
@@ -32,7 +29,6 @@
     id: "kHhCWlo9au",
     name: "",
     stack: {
-      purchaseState,
       background_color: {
         light: {
           type: "hex",

package/dist/components/footer/Footer.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { FooterProps } from "../../types/components/footer";
   import Stack from "../stack/Stack.svelte";
+  import type { FooterProps } from "../../types/components/footer";
 
-  const { stack, id, labels, purchaseState, onAction }: FooterProps = $props();
+  const { stack, id }: FooterProps = $props();
 </script>
 
 <div class="rc-pw-footer" {id}>
-  <Stack {...stack} {labels} {purchaseState} {onAction} />
+  <Stack {...stack} />
 </div>
 
 <style>

package/dist/components/image/Image.stories.svelte

@@ -1,19 +1,16 @@
 <script module lang="ts">
   import Image from "./Image.svelte";
-  import type { PurchaseState } from "../../data/state";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  const purchaseState: PurchaseState = {};
-
   const { Story } = defineMeta({
     title: "Components/Image",
     component: Image,
     tags: ["autodocs"],
     argTypes: {
       id: { control: "text", description: "Unique identifier for the image" },
-      gradient_colors: {
+      color_overlay: {
         control: "object",
-        description: "Gradient colors for the overlay",
+        description: "Image overlay",
       },
       size: {
         control: "object",
@@ -40,7 +37,6 @@
 <Story
   name="Rectangle"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -67,7 +63,6 @@
 <Story
   name="Rounded Rectangle"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -101,7 +96,6 @@
 <Story
   name="Circle"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -127,7 +121,6 @@
 <Story
   name="Concave"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -153,7 +146,6 @@
 <Story
   name="Convex"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -179,7 +171,6 @@
 <Story
   name="Overlay Radial Gradient"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -223,7 +214,6 @@
 <Story
   name="Overlay Linear Gradient"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -268,7 +258,6 @@
 <Story
   name="Overlay Solid"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {

package/dist/components/image/Image.svelte

@@ -4,7 +4,7 @@
   import { getColorModeContext } from "../../stores/color-mode";
   import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
-  const { id, source, purchaseState, ...restProps }: ImageProps = $props();
+  const { id, source, ...restProps }: ImageProps = $props();
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
@@ -23,7 +23,6 @@
     getImageComponentStyles(colorMode, {
       id,
       source,
-      purchaseState,
       ...restProps,
       imageAspectRatio,
     }),

package/dist/components/package/Package.stories.svelte

@@ -1,13 +1,11 @@
 <script module lang="ts">
   import Package from "./Package.svelte";
-  import type { PurchaseState } from "../../data/state";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";
   const priceLid = "QZ4ZmYsqjN";
   const nameLid = "BcX-6YwhoV";
-  const purchaseState: PurchaseState = {};
 
   const { Story } = defineMeta({
     title: "Components/Package",
@@ -24,7 +22,6 @@
         },
       }),
     ],
-    args: { purchaseState },
     argTypes: {
       stack: {
         control: { type: "object" },
@@ -49,7 +46,6 @@
     name: "Package - Monthly",
     package_id: "$rc_monthly",
     stack: {
-      purchaseState,
       background_color: {
         light: {
           type: "hex",
@@ -83,7 +79,6 @@
               value: "#ffffff",
             },
           },
-          components: [],
           font_name: null,
           font_size: "heading_s",
           font_weight: "bold",
@@ -122,6 +117,8 @@
               value: "#292631",
             },
           },
+          background: null,
+          shadow: null,
           border: null,
           components: [
             {
@@ -132,7 +129,6 @@
                   value: "#ffffff",
                 },
               },
-              components: [],
               font_name: null,
               font_size: "body_m",
               font_weight: "extra_bold",

package/dist/components/package/Package.svelte

@@ -9,23 +9,16 @@
   import { prefixObject, stringifyStyles } from "../../utils/style-utils";
   import { derived } from "svelte/store";
 
-  const {
-    stack,
-    package_id,
-    labels,
-    id,
-    purchaseState,
-    zStackChildStyles,
-  }: PackageProps = $props();
+  const { stack, package_id, id, zStackChildStyles }: PackageProps = $props();
 
-  const { selectedPackageId } = getPaywallContext();
+  const { selectedPackageId, variablesPerPackage } = getPaywallContext();
 
   const onPackageClick = () => ($selectedPackageId = package_id);
 
   const fallbackVariables = getVariablesContext();
   const variables = derived(
     fallbackVariables,
-    (fallback) => purchaseState.variablesPerPackage?.[package_id] ?? fallback,
+    (fallback) => $variablesPerPackage?.[package_id] ?? fallback,
   );
   setVariablesContext(variables);
 
@@ -45,7 +38,7 @@
   onclick={onPackageClick}
   style={styles}
 >
-  <Stack {...stack} {labels} {purchaseState} {componentState} />
+  <Stack {...stack} {componentState} />
 </button>
 
 <style>

package/dist/components/paywall/Node.svelte

@@ -10,12 +10,9 @@
   import ButtonNode from "../button/ButtonNode.svelte";
   import type { ZStackChildStyles } from "../stack/stack-utils";
   import TextNode from "../text/TextNode.svelte";
-  import {
-    type ComponentState,
-    type PaywallComponent,
-    type PurchaseStateProps,
-  } from "../../data/entities";
-  import type { Component } from "svelte";
+  import type { ComponentState } from "../../data/entities";
+  import type { Component } from "../../types/component";
+  import type { Component as SvelteComponent } from "svelte";
   import Self from "./Node.svelte";
 
   type SupportedComponents =
@@ -28,8 +25,8 @@
     | Footer
     | Timeline;
 
-  interface Props extends PurchaseStateProps {
-    nodeData: PaywallComponent;
+  interface Props {
+    nodeData: Component;
     zStackChildStyles?: ZStackChildStyles;
     componentState?: ComponentState;
   }
@@ -43,6 +40,10 @@
     package: Package,
     footer: Footer,
     timeline: Timeline,
+  } satisfies {
+    [key in Component["type"]]: SvelteComponent<
+      Extract<Component, { type: key }>
+    >;
   };
 
   /**
@@ -50,18 +51,18 @@
    * It first checks if the component type is supported and returns the corresponding component class.
    * If not supported, it checks if the fallback component type is supported and returns the corresponding component class,
    * finally it throws an error if the component type is not supported and the fallback component type is not supported.
-   * @param nodeData:PaywallComponent - the PaywallComponent object representing a Node in the paywall
-   * @returns [Component<SupportedComponents>, PaywallComponent] - a tuple containing the component class and the node data
+   * @param nodeData:Component - the Component object representing a Node in the paywall
+   * @returns [Component<SupportedComponents>, Component] - a tuple containing the component class and the node data
    * @throws Error - if the component type and the fallback component type are not supported
    */
   export const getComponentClass: (
-    nodeData: PaywallComponent,
-  ) => [Component<SupportedComponents>, PaywallComponent] = (
-    nodeData: PaywallComponent,
+    nodeData: Component,
+  ) => [SvelteComponent<SupportedComponents>, Component] = (
+    nodeData: Component,
   ) => {
     if (ComponentTypes[nodeData.type]) {
       return [
-        ComponentTypes[nodeData.type] as Component<SupportedComponents>,
+        ComponentTypes[nodeData.type] as SvelteComponent<SupportedComponents>,
         nodeData,
       ];
     }
@@ -69,7 +70,7 @@
     const { fallback } = nodeData;
     if (fallback && ComponentTypes[fallback?.type]) {
       return [
-        ComponentTypes[fallback.type] as Component<SupportedComponents>,
+        ComponentTypes[fallback.type] as SvelteComponent<SupportedComponents>,
         fallback,
       ];
     }
@@ -79,19 +80,21 @@
     throw new Error(`Invalid component type: ${nodeData.type}`);
   };
 
-  const { nodeData, purchaseState, zStackChildStyles, ...restProps }: Props =
-    $props();
+  const { nodeData, zStackChildStyles, ...restProps }: Props = $props();
 
   const [ComponentToRender, dataToUse] = $derived(getComponentClass(nodeData));
+
+  const components = $derived(
+    ("components" in nodeData ? nodeData.components : undefined) ?? [],
+  );
 </script>
 
 <ComponentToRender
   {...(dataToUse as any) || {}}
-  {purchaseState}
   {zStackChildStyles}
   {...restProps}
 >
-  {#each nodeData.components as PaywallComponent[] as childData}
-    <Self nodeData={childData} {purchaseState} {...restProps} />
+  {#each components as childData}
+    <Self nodeData={childData} {...restProps} />
   {/each}
 </ComponentToRender>

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

@@ -1,25 +1,26 @@
+import { SvelteComponent } from "svelte";
 import { Footer, Image, Package, PurchaseButton, Stack, Timeline } from "../..";
 import ButtonNode from "../button/ButtonNode.svelte";
 import type { ZStackChildStyles } from "../stack/stack-utils";
 import TextNode from "../text/TextNode.svelte";
-import { type ComponentState, type PaywallComponent, type PurchaseStateProps } from "../../data/entities";
-import type { Component } from "svelte";
+import type { ComponentState } from "../../data/entities";
+import type { Component } from "../../types/component";
 type SupportedComponents = TextNode | Stack | Image | ButtonNode | PurchaseButton | Package | Footer | Timeline;
-interface Props extends PurchaseStateProps {
-    nodeData: PaywallComponent;
+interface Props {
+    nodeData: Component;
     zStackChildStyles?: ZStackChildStyles;
     componentState?: ComponentState;
 }
-declare const Node: Component<Props, {
+declare const Node: import("svelte").Component<Props, {
     /**
        * This function returns the component class and the node data for a given paywall component.
        * It first checks if the component type is supported and returns the corresponding component class.
        * If not supported, it checks if the fallback component type is supported and returns the corresponding component class,
        * finally it throws an error if the component type is not supported and the fallback component type is not supported.
-       * @param nodeData:PaywallComponent - the PaywallComponent object representing a Node in the paywall
-       * @returns [Component<SupportedComponents>, PaywallComponent] - a tuple containing the component class and the node data
+       * @param nodeData:Component - the Component object representing a Node in the paywall
+       * @returns [Component<SupportedComponents>, Component] - a tuple containing the component class and the node data
        * @throws Error - if the component type and the fallback component type are not supported
-       */ getComponentClass: (nodeData: PaywallComponent) => [Component<SupportedComponents>, PaywallComponent];
+       */ getComponentClass: (nodeData: Component) => [SvelteComponent<SupportedComponents>, Component];
 }, "">;
 type Node = ReturnType<typeof Node>;
 export default Node;

package/dist/components/paywall/Paywall.svelte

@@ -7,16 +7,18 @@
     getBackgroundImageSource,
     getBackgroundStyles,
   } from "./paywall-utils";
-  import type { PurchaseState } from "../../data/state";
   import { setColorModeContext } from "../../stores/color-mode";
   import { setLocalizationContext } from "../../stores/localization";
   import { setPaywallContext } from "../../stores/paywall";
-  import { setVariablesContext } from "../../stores/variables";
+  import {
+    setVariablesContext,
+    type VariablesStore,
+  } from "../../stores/variables";
   import type { ColorMode } from "../../types";
   import type { Action } from "../../types/components/button";
   import { findSelectedPackageId } from "../../utils/style-utils";
   import { type VariableDictionary } from "../../utils/variable-utils";
-  import { derived, writable } from "svelte/store";
+  import { derived, readable, writable } from "svelte/store";
 
   interface Props {
     paywallData: PaywallData;
@@ -47,15 +49,11 @@
   const getColorMode = setColorModeContext(() => preferredColorMode);
   const colorMode = $derived(getColorMode());
 
-  const { getLocalizedString } = setLocalizationContext({
+  const { getLocalizedString } = setLocalizationContext(() => ({
     defaultLocale: paywallData.default_locale,
     selectedLocale,
     localizations: paywallData.components_localizations!,
-  });
-
-  let purchaseState = $state({
-    variablesPerPackage,
-  } satisfies PurchaseState);
+  }));
 
   const selectedPackageId = writable<string | undefined>(
     findSelectedPackageId(paywallData),
@@ -98,11 +96,16 @@
     }
   };
 
-  setPaywallContext({ selectedPackageId, onPurchase, onButtonAction });
+  setPaywallContext({
+    selectedPackageId,
+    variablesPerPackage: readable(variablesPerPackage),
+    onPurchase,
+    onButtonAction,
+  });
 
-  const variables = derived(
+  const variables: VariablesStore = derived(
     selectedPackageId,
-    (packageId) => variablesPerPackage[packageId || ""] as VariableDictionary,
+    (packageId) => variablesPerPackage[packageId || ""],
   );
 
   setVariablesContext(variables);
@@ -120,14 +123,13 @@
 
 <svelte:boundary onerror={onError}>
   <div class="rc-pw-paywall">
-    <Node nodeData={paywallData.components_config.base.stack} {purchaseState} />
+    <Node nodeData={paywallData.components_config.base.stack} />
 
     {#if paywallData.components_config.base.sticky_footer}
       <Footer
         {...paywallData.components_config.base.sticky_footer}
         stack={paywallData.components_config.base.sticky_footer
           .stack as StackProps}
-        {purchaseState}
       />
     {/if}
     {#if paywallData.components_config.base.background?.type === "color"}

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

@@ -1,14 +1,11 @@
 <script module lang="ts">
   import PurchaseButton from "./PurchaseButton.svelte";
-  import type { PurchaseState } from "../../data/state";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";
   const text_lid = "6gpcQ4q6T8";
 
-  const purchaseState: PurchaseState = {};
-
   const { Story } = defineMeta({
     title: "Components/PurchaseButton",
     component: PurchaseButton,
@@ -23,7 +20,6 @@
         },
       }),
     ],
-    args: { purchaseState },
     argTypes: {
       stack: {
         control: { type: "object" },
@@ -45,9 +41,7 @@
   args={{
     id: "mjaE9fOv5z",
     name: "Purchase_button",
-    purchaseState,
     stack: {
-      purchaseState,
       background_color: {
         light: {
           type: "hex",
@@ -65,7 +59,6 @@
       },
       components: [
         {
-          purchaseState,
           background_color: null,
           color: {
             light: {
@@ -73,7 +66,6 @@
               value: "#ffffff",
             },
           },
-          components: [],
           font_name: null,
           font_size: "heading_m",
           font_weight: "extra_bold",

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

@@ -5,21 +5,14 @@
   import { getPaywallContext } from "../../stores/paywall";
   import type { PurchaseButtonProps } from "../../types/components/purchase-button";
 
-  const {
-    stack,
-    labels,
-    purchaseState,
-    zStackChildStyles,
-    ...restProps
-  }: PurchaseButtonProps = $props();
+  const { stack, zStackChildStyles, ...restProps }: PurchaseButtonProps =
+    $props();
 
   const { onPurchase } = getPaywallContext();
 
   const buttonStyles = $derived(
     getPurchaseButtonStyles({
       stack,
-      labels,
-      purchaseState,
       zStackChildStyles,
       ...restProps,
     }),
@@ -31,7 +24,7 @@
   class="rc-pw-purchase-button"
   style={buttonStyles}
 >
-  <Stack {...stack} {labels} {purchaseState} />
+  <Stack {...stack} />
 </ButtonDeprecated>
 
 <style>