@revenuecat/purchases-ui-js 2.0.2 → 2.0.3

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";
@@ -17,13 +17,16 @@
   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 { 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;
@@ -44,6 +47,7 @@
     onRestorePurchasesClicked,
     onNavigateToUrlClicked,
     onError,
+    uiConfig,
   }: Props = $props();
 
   const getColorMode = setColorModeContext(() => preferredColorMode);
@@ -101,6 +105,7 @@
     variablesPerPackage: readable(variablesPerPackage),
     onPurchase,
     onButtonAction,
+    uiConfig,
   });
 
   const variables: VariablesStore = derived(
@@ -119,6 +124,10 @@
   const backgroundImgSource = $derived(
     getBackgroundImageSource(paywallData, colorMode),
   );
+
+  onMount(() => {
+    registerFonts(uiConfig);
+  });
 </script>
 
 <svelte:boundary onerror={onError}>
@@ -128,8 +137,7 @@
     {#if paywallData.components_config.base.sticky_footer}
       <Footer
         {...paywallData.components_config.base.sticky_footer}
-        stack={paywallData.components_config.base.sticky_footer
-          .stack as StackProps}
+        stack={paywallData.components_config.base.sticky_footer.stack}
       />
     {/if}
     {#if paywallData.components_config.base.background?.type === "color"}
@@ -145,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;