@revenuecat/purchases-ui-js 2.0.2 → 2.0.4

package/dist/components/image/Overlay.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { ColorGradientInfo } from "../../types/colors";
+
+  interface OverlayProps {
+    id: string;
+    overlay: ColorGradientInfo | null | undefined;
+  }
+
+  const { id, overlay }: OverlayProps = $props();
+</script>
+
+{#if overlay?.type === "hex"}
+  <linearGradient {id} x1="0" y1="0" x2="100%" y2="100%">
+    <stop offset="0%" stop-color={overlay.value} />
+    <stop offset="100%" stop-color={overlay.value} />
+  </linearGradient>
+{/if}
+
+{#if overlay?.type === "linear"}
+  <linearGradient
+    {id}
+    gradientTransform={`rotate(${overlay.degrees - 90}, 0.5, 0.5)`}
+  >
+    {#each overlay.points as point}
+      <stop offset={`${point.percent}%`} stop-color={point.color} />
+    {/each}
+  </linearGradient>
+{/if}
+
+{#if overlay?.type === "radial"}
+  <radialGradient {id}>
+    {#each overlay.points as point}
+      <stop offset={`${point.percent}%`} stop-color={point.color} />
+    {/each}
+  </radialGradient>
+{/if}

package/dist/components/image/Overlay.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ColorGradientInfo } from "../../types/colors";
+interface OverlayProps {
+    id: string;
+    overlay: ColorGradientInfo | null | undefined;
+}
+declare const Overlay: import("svelte").Component<OverlayProps, {}, "">;
+type Overlay = ReturnType<typeof Overlay>;
+export default Overlay;

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

@@ -1,6 +1,8 @@
 <script module lang="ts">
   import Package from "./Package.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
   import { localizationDecorator } from "../../stories/localization-decorator";
+  import type { PackageProps } from "../../types/components/package";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";
@@ -10,8 +12,8 @@
   const { Story } = defineMeta({
     title: "Components/Package",
     component: Package,
-    tags: ["autodocs"],
     decorators: [
+      componentDecorator(),
       localizationDecorator({
         defaultLocale,
         localizations: {
@@ -22,30 +24,21 @@
         },
       }),
     ],
-    argTypes: {
-      stack: {
-        control: { type: "object" },
-        description: "Stack configuration for package content",
-        table: {
-          type: {
-            summary: "object",
-            detail: "StackProps",
-          },
-        },
-      },
-    },
   });
 </script>
 
-<!-- Default  -->
 <Story
   name="Default Package"
   args={{
-    id: "6rQSD5e2Kz",
-    is_selected_by_default: false,
+    type: "package",
+    id: "package",
     name: "Package - Monthly",
     package_id: "$rc_monthly",
+    is_selected_by_default: true,
     stack: {
+      type: "stack",
+      id: "stack",
+      name: "Stack",
       background_color: {
         light: {
           type: "hex",
@@ -208,14 +201,12 @@
         distribution: "space_between",
         type: "horizontal",
       },
-      id: "u0KZLUZTQT",
       margin: {
         bottom: 0,
         leading: 16,
         top: 16,
         trailing: 16,
       },
-      name: "Stack",
       padding: {
         bottom: 16,
         leading: 16,
@@ -241,9 +232,7 @@
         },
       },
       spacing: 8,
-      type: "stack",
       shadow: null,
     },
-    type: "package",
-  }}
+  } satisfies PackageProps}
 />

package/dist/components/package/Package.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import { getPaywallContext } from "../../stores/paywall";
+  import { setSelectedStateContext } from "../../stores/selected";
   import {
     getVariablesContext,
     setVariablesContext,
   } from "../../stores/variables";
   import type { PackageProps } from "../../types/components/package";
-  import { prefixObject, stringifyStyles } from "../../utils/style-utils";
   import { derived } from "svelte/store";
 
-  const { stack, package_id, id, zStackChildStyles }: PackageProps = $props();
+  const { stack, package_id }: PackageProps = $props();
 
   const { selectedPackageId, variablesPerPackage } = getPaywallContext();
 
-  const onPackageClick = () => ($selectedPackageId = package_id);
+  setSelectedStateContext(package_id);
+
+  const onPackageClick = () => {
+    $selectedPackageId = package_id;
+  };
 
   const fallbackVariables = getVariablesContext();
   const variables = derived(
@@ -21,37 +25,6 @@
     (fallback) => $variablesPerPackage?.[package_id] ?? fallback,
   );
   setVariablesContext(variables);
-
-  const componentState = $derived({
-    selected: $selectedPackageId === package_id,
-  });
-
-  const styles = $derived(
-    stringifyStyles(prefixObject(zStackChildStyles, "package")),
-  );
 </script>
 
-<button
-  class="rc-pw-package"
-  class:selected={componentState.selected}
-  {id}
-  onclick={onPackageClick}
-  style={styles}
->
-  <Stack {...stack} {componentState} />
-</button>
-
-<style>
-  .rc-pw-package {
-    width: 100%;
-    display: flex;
-    margin: 0;
-    padding: 0;
-    background: initial;
-    border: initial;
-    text-align: initial;
-    position: var(--package-position, relative);
-    inset: var(--package-inset, 0);
-    transform: var(--package-transform, initial);
-  }
-</style>
+<Stack {...stack} onclick={onPackageClick} />

package/dist/components/paywall/Node.svelte

@@ -8,37 +8,38 @@
     Timeline,
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
-  import type { ZStackChildStyles } from "../stack/stack-utils";
   import TextNode from "../text/TextNode.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";
+  import Carousel from "../carousel/Carousel.svelte";
+  import Icon from "../icon/Icon.svelte";
 
   type SupportedComponents =
-    | TextNode
-    | Stack
-    | Image
     | ButtonNode
-    | PurchaseButton
-    | Package
+    | Carousel
     | Footer
+    | Icon
+    | Image
+    | Package
+    | PurchaseButton
+    | Stack
+    | TextNode
     | Timeline;
 
   interface Props {
     nodeData: Component;
-    zStackChildStyles?: ZStackChildStyles;
-    componentState?: ComponentState;
   }
 
   const ComponentTypes = {
-    stack: Stack,
-    text: TextNode,
-    image: Image,
     button: ButtonNode,
-    purchase_button: PurchaseButton,
-    package: Package,
+    carousel: Carousel,
     footer: Footer,
+    icon: Icon,
+    image: Image,
+    package: Package,
+    purchase_button: PurchaseButton,
+    stack: Stack,
+    text: TextNode,
     timeline: Timeline,
   } satisfies {
     [key in Component["type"]]: SvelteComponent<
@@ -57,7 +58,7 @@
    */
   export const getComponentClass: (
     nodeData: Component,
-  ) => [SvelteComponent<SupportedComponents>, Component] = (
+  ) => [SvelteComponent<SupportedComponents>, Component] | undefined = (
     nodeData: Component,
   ) => {
     if (ComponentTypes[nodeData.type]) {
@@ -75,26 +76,18 @@
       ];
     }
 
-    // manually throwing error for this specific case until
+    // Manually throwing error for this specific case until
     // it's handled with fallback components
-    throw new Error(`Invalid component type: ${nodeData.type}`);
+    // throw new Error(`Invalid component type: ${nodeData.type}`);
   };
 
-  const { nodeData, zStackChildStyles, ...restProps }: Props = $props();
-
-  const [ComponentToRender, dataToUse] = $derived(getComponentClass(nodeData));
+  const { nodeData, ...restProps }: Props = $props();
 
-  const components = $derived(
-    ("components" in nodeData ? nodeData.components : undefined) ?? [],
+  const [ComponentToRender, dataToUse] = $derived(
+    getComponentClass(nodeData) ?? [],
   );
 </script>
 
-<ComponentToRender
-  {...(dataToUse as any) || {}}
-  {zStackChildStyles}
-  {...restProps}
->
-  {#each components as childData}
-    <Self nodeData={childData} {...restProps} />
-  {/each}
-</ComponentToRender>
+{#if ComponentToRender}
+  <ComponentToRender {...(dataToUse as any) || {}} {...restProps} />
+{/if}

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

@@ -1,15 +1,13 @@
 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 } from "../../data/entities";
 import type { Component } from "../../types/component";
-type SupportedComponents = TextNode | Stack | Image | ButtonNode | PurchaseButton | Package | Footer | Timeline;
+import Carousel from "../carousel/Carousel.svelte";
+import Icon from "../icon/Icon.svelte";
+type SupportedComponents = ButtonNode | Carousel | Footer | Icon | Image | Package | PurchaseButton | Stack | TextNode | Timeline;
 interface Props {
     nodeData: Component;
-    zStackChildStyles?: ZStackChildStyles;
-    componentState?: ComponentState;
 }
 declare const Node: import("svelte").Component<Props, {
     /**
@@ -20,7 +18,7 @@ declare const Node: import("svelte").Component<Props, {
        * @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: Component) => [SvelteComponent<SupportedComponents>, Component];
+       */ 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,6 +1,4 @@
 <script lang="ts">
-  import type { PaywallData, StackProps } from "../../data/entities";
-
   import Footer from "../footer/Footer.svelte";
   import Node from "./Node.svelte";
   import {
@@ -16,14 +14,19 @@
   } from "../../stores/variables";
   import type { ColorMode } from "../../types";
   import type { Action } from "../../types/components/button";
+  import type { PaywallData } from "../../types/paywall";
+  import type { UIConfig } from "../../types/ui-config";
+  import type { VariableDictionary } from "../../types/variables";
+  import { registerFonts } from "../../utils/font-utils";
   import { findSelectedPackageId } from "../../utils/style-utils";
-  import { type VariableDictionary } from "../../utils/variable-utils";
+  import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
 
   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,12 @@
-import type { PaywallData } from "../../data/entities";
 import type { ColorMode } from "../../types";
-import { type VariableDictionary } from "../../utils/variable-utils";
+import type { PaywallData } from "../../types/paywall";
+import type { UIConfig } from "../../types/ui-config";
+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 "../../../types/paywall";
+export declare const OVERRIDE_PAYWALL: PaywallData;