@revenuecat/purchases-ui-js 2.0.1 → 2.0.3

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

@@ -1,25 +1,23 @@
+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";
-type SupportedComponents = TextNode | Stack | Image | ButtonNode | PurchaseButton | Package | Footer | Timeline;
-interface Props extends PurchaseStateProps {
-    nodeData: PaywallComponent;
-    zStackChildStyles?: ZStackChildStyles;
-    componentState?: ComponentState;
+import type { Component } from "../../types/component";
+import Icon from "../icon/Icon.svelte";
+type SupportedComponents = ButtonNode | Footer | Icon | Image | Package | PurchaseButton | Stack | TextNode | Timeline;
+interface Props {
+    nodeData: Component;
 }
-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] | undefined;
 }, "">;
 type Node = ReturnType<typeof Node>;
 export default Node;

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

@@ -6,25 +6,26 @@
     alignmentPaywallData,
     calmPaywallData,
     colorModeOverrideTemplate,
-    e2eTestTemplate,
     errorPaywallData,
     fallbackPaywallData,
     fontsPaywallData,
     gradientPaywallData,
+    listTemplate,
     pastaPaywallData,
     paywallData,
     paywallWithFooter,
     posterMakerTemplate,
-    variablesPastaPaywallData,
+    timelineTemplate,
+    uiConfigData,
     zStackTemplate,
   } from "../../stories/fixtures";
-  import type { VariableDictionary } from "../../utils/variable-utils";
+  import { OVERRIDE_PAYWALL } from "./fixtures/override-paywall";
+  import { STACK_PAYWALL } from "./fixtures/stack-paywall";
+  import { VARIABLES } from "./fixtures/variables";
 
   const { Story } = defineMeta({
     title: "Example/Paywall",
     component: Paywall,
-    tags: ["autodocs"],
-    argTypes: {},
     args: {
       onPurchaseClicked: (selectedPackageId: string) =>
         alert(`Purchase package ${selectedPackageId}`),
@@ -32,11 +33,26 @@
       onVisitCustomerCenterClicked: () => alert("Visit customer center"),
       onRestorePurchasesClicked: () => alert("Restore purchases"),
       onNavigateToUrlClicked: (url: string) => alert(`Navigate to ${url}`),
+      uiConfig: uiConfigData,
+      variablesPerPackage: VARIABLES,
     },
   });
 </script>
 
-<!-- Default story -->
+<Story
+  name="Stack paywall"
+  args={{
+    paywallData: STACK_PAYWALL,
+  }}
+/>
+
+<Story
+  name="Override paywall"
+  args={{
+    paywallData: OVERRIDE_PAYWALL,
+  }}
+/>
+
 <Story
   name="Primary"
   args={{
@@ -75,30 +91,6 @@
     selectedLocale: "en_US",
   }}
 />
-<Story
-  name="Pasta paywall example(with variables)"
-  args={{
-    paywallData: variablesPastaPaywallData,
-    selectedLocale: "en_US",
-    variablesPerPackage: {
-      trial: {
-        product_name: "This was a variable: Product A",
-        price: "$19.99",
-        price_per_period: "$19.99/yr",
-      } as VariableDictionary,
-      $rc_weekly: {
-        product_name: "This was a variable: Product B",
-        price: "$29.99",
-        price_per_period: "$29.99/yr",
-      } as VariableDictionary,
-      $rc_daily: {
-        product_name: "This was a variable: Product C",
-        price: "$39.99",
-        price_per_period: "$19.99/yr",
-      } as VariableDictionary,
-    },
-  }}
-/>
 
 <Story
   name="Calm paywall example"
@@ -115,47 +107,6 @@
   }}
 />
 
-<Story
-  name="Dynamic state style overrides"
-  args={{
-    paywallData: e2eTestTemplate,
-  }}
-/>
-
-<Story
-  name="Dynamic state style overrides with background image"
-  args={{
-    paywallData: {
-      ...e2eTestTemplate,
-      components_config: {
-        ...e2eTestTemplate.components_config,
-        base: {
-          ...e2eTestTemplate.components_config.base,
-          background: {
-            type: "image",
-            fit_mode: "fit",
-            color_overlay: null,
-            value: {
-              light: {
-                width: 1792,
-                height: 1024,
-                original: "https://assets.pawwalls.com/1005820_1732028636.jpeg",
-                heic: "https://assets.pawwalls.com/1005820_1732028636.heic",
-                heic_low_res:
-                  "https://assets.pawwalls.com/1005820_low_res_1732028636.heic",
-                webp: "https://assets.pawwalls.com/1005820_1732028636.webp",
-                webp_low_res:
-                  "https://assets.pawwalls.com/1005820_low_res_1732028636.webp",
-              },
-              dark: null,
-            },
-          },
-        },
-      },
-    },
-  }}
-/>
-
 <Story
   name="Poster Maker"
   args={{
@@ -163,75 +114,6 @@
   }}
 />
 
-<Story
-  name="E2E Test with variables"
-  args={{
-    paywallData: e2eTestTemplate,
-    variablesPerPackage: {
-      $rc_annual: {
-        product_name: "Yearly sub",
-        price: "$19.99",
-        price_per_period: "$19.99/1yr",
-        price_per_period_full: "$19.99/1year",
-        total_price_and_per_month: "$19.99/1yr($1.67/mo)",
-        total_price_and_per_month_full: "$19.99/1year($1.67/month)",
-        sub_price_per_month: "$1.67",
-        sub_price_per_week: "$0.42",
-        sub_duration: "1 year",
-        sub_duration_in_months: "12 months",
-        sub_period: "yearly",
-        sub_period_length: "year",
-        sub_period_abbreviated: "yr",
-        sub_relative_discount: "33% off",
-        sub_offer_duration: "undefined",
-        sub_offer_duration_2: "undefined",
-        sub_offer_price: "undefined",
-        sub_offer_price_2: "undefined",
-      },
-      $rc_monthly: {
-        product_name: "Monthly sub",
-        price: "$30.00",
-        price_per_period: "$30.00/1mo",
-        price_per_period_full: "$30.00/1month",
-        total_price_and_per_month: "$30.00",
-        total_price_and_per_month_full: "$30.00",
-        sub_price_per_month: "$30.00",
-        sub_price_per_week: "$30.00",
-        sub_duration: "1 month",
-        sub_duration_in_months: "1 month",
-        sub_period: "monthly",
-        sub_period_length: "month",
-        sub_period_abbreviated: "mo",
-        sub_relative_discount: "",
-        sub_offer_duration: "undefined",
-        sub_offer_duration_2: "undefined",
-        sub_offer_price: "undefined",
-        sub_offer_price_2: "undefined",
-      },
-      $rc_weekly: {
-        product_name: "Weekly no trial",
-        price: "$1.25",
-        price_per_period: "$1.25/1wk",
-        price_per_period_full: "$1.25/1week",
-        total_price_and_per_month: "$1.25/1wk($5.00/mo)",
-        total_price_and_per_month_full: "$1.25/1week($5.00/month)",
-        sub_price_per_month: "$5.00",
-        sub_price_per_week: "$1.25",
-        sub_duration: "1 week",
-        sub_duration_in_months: "1 week",
-        sub_period: "weekly",
-        sub_period_length: "week",
-        sub_period_abbreviated: "wk",
-        sub_relative_discount: "96% off",
-        sub_offer_duration: "undefined",
-        sub_offer_duration_2: "undefined",
-        sub_offer_price: "undefined",
-        sub_offer_price_2: "undefined",
-      },
-    },
-  }}
-/>
-
 <Story
   name="Z Stack"
   args={{
@@ -271,3 +153,17 @@
     paywallData: paywallWithFooter,
   }}
 />
+
+<Story
+  name="Timeline"
+  args={{
+    paywallData: timelineTemplate,
+  }}
+/>
+
+<Story
+  name="List"
+  args={{
+    paywallData: listTemplate,
+  }}
+/>

package/dist/components/paywall/Paywall.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PaywallData, StackProps } from "../../data/entities";
+  import type { PaywallData, UIConfig } from "../../data/entities";
 
   import Footer from "../footer/Footer.svelte";
   import Node from "./Node.svelte";
@@ -7,21 +7,26 @@
     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 { registerFonts } from "../../utils/font-utils";
+  import { derived, readable, writable } from "svelte/store";
+  import { onMount } from "svelte";
+  import type { VariableDictionary } from "../../types/variables";
 
   interface Props {
     paywallData: PaywallData;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    uiConfig: UIConfig;
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string) => void;
     onBackClicked?: () => void;
@@ -42,20 +47,17 @@
     onRestorePurchasesClicked,
     onNavigateToUrlClicked,
     onError,
+    uiConfig,
   }: Props = $props();
 
   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 +100,17 @@
     }
   };
 
-  setPaywallContext({ selectedPackageId, onPurchase, onButtonAction });
+  setPaywallContext({
+    selectedPackageId,
+    variablesPerPackage: readable(variablesPerPackage),
+    onPurchase,
+    onButtonAction,
+    uiConfig,
+  });
 
-  const variables = derived(
+  const variables: VariablesStore = derived(
     selectedPackageId,
-    (packageId) => variablesPerPackage[packageId || ""] as VariableDictionary,
+    (packageId) => variablesPerPackage[packageId || ""],
   );
 
   setVariablesContext(variables);
@@ -116,18 +124,20 @@
   const backgroundImgSource = $derived(
     getBackgroundImageSource(paywallData, colorMode),
   );
+
+  onMount(() => {
+    registerFonts(uiConfig);
+  });
 </script>
 
 <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}
+        stack={paywallData.components_config.base.sticky_footer.stack}
       />
     {/if}
     {#if paywallData.components_config.base.background?.type === "color"}
@@ -143,8 +153,16 @@
 <style>
   .rc-pw-paywall {
     position: relative;
-    display: block;
-    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    height: 100%;
+    overflow: hidden;
+
+    & > :global(*:first-child) {
+      flex-grow: 1;
+      overflow-y: auto;
+    }
   }
 
   .rc-pw-paywall-background {

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

@@ -1,10 +1,11 @@
-import type { PaywallData } from "../../data/entities";
+import type { PaywallData, UIConfig } from "../../data/entities";
 import type { ColorMode } from "../../types";
-import { type VariableDictionary } from "../../utils/variable-utils";
+import type { VariableDictionary } from "../../types/variables";
 interface Props {
     paywallData: PaywallData;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    uiConfig: UIConfig;
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string) => void;
     onBackClicked?: () => void;

package/dist/components/paywall/fixtures/override-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../data/entities";
+export declare const OVERRIDE_PAYWALL: PaywallData;