@revenuecat/purchases-ui-js 0.0.13 → 0.0.15

package/dist/components/button/Button.svelte

@@ -23,7 +23,7 @@
   button {
     border: none;
     cursor: pointer;
-    background-color: transparent;
+    background: transparent;
     padding: 0;
     width: 100%;
     display: flex;

package/dist/components/button/ButtonNode.svelte

@@ -3,13 +3,19 @@
   import type { ButtonNodeProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
 
-  const { stack, action, labels, onAction, purchaseState }: ButtonNodeProps =
-    $props();
+  const {
+    stack,
+    action,
+    onAction,
+    labels,
+    purchaseState,
+    variableDictionary,
+  }: ButtonNodeProps = $props();
   const onClick = () => {
     onAction && onAction(action);
   };
 </script>
 
 <Button onclick={onClick}>
-  <Stack {...stack} {labels} {purchaseState} />
+  <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
 </Button>

package/dist/components/footer/Footer.svelte

@@ -2,10 +2,10 @@
   import type { FooterProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
 
-  const props: FooterProps = $props();
-  const { stack, labels, id } = $derived(props);
+  const { stack, id, labels, purchaseState, variableDictionary }: FooterProps =
+    $props();
 </script>
 
 <div class="footer" {id}>
-  <Stack {...stack} {labels} />
+  <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
 </div>

package/dist/components/image/Image.svelte

@@ -30,17 +30,19 @@
     border-radius: var(--corner-radius, unset);
     clip-path: var(--clip-path, unset);
     display: flex;
-    flex: var(--flex, 1 0 auto);
+    flex: var(--flex, 1 1 auto);
   }
+
   .image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
+
   .image-overlay {
     position: absolute;
     inset: 0;
-    background: var(--background, unset);
+    background: var(--background, none);
   }
 </style>

package/dist/components/image/image-utils.js

@@ -1,4 +1,4 @@
-import { getGradientStyle, getMaskStyle, getSizeStyle, } from "../../utils/style-utils";
+import { getActiveStateProps, getGradientStyle, getMaskStyle, getSizeStyle, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for image components by combining gradient and size styles
  * @param props - Image component properties including gradient, mask and size
@@ -7,10 +7,14 @@ import { getGradientStyle, getMaskStyle, getSizeStyle, } from "../../utils/style
 export const getImageComponentStyles = (props) => {
     const { gradient_colors, colorMode, mask_shape, size, max_height, // TODO: implement this. still waiting on spec
     override_source_lid, // TODO: Implement this once structure is defined
-     } = props;
-    const gradientStyles = getGradientStyle(colorMode, gradient_colors);
-    const sizeStyles = getSizeStyle(size);
-    const maskStyles = getMaskStyle(mask_shape);
+    overrides, componentState, } = props;
+    const activeStateProps = getActiveStateProps(overrides, componentState);
+    const gradientStyles = getGradientStyle(colorMode, activeStateProps?.gradient_colors || gradient_colors);
+    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
+    const maskStyles = getMaskStyle({
+        ...mask_shape,
+        ...activeStateProps,
+    });
     const imageStylesObject = {
         ...sizeStyles,
         ...maskStyles,

package/dist/components/package/Package.svelte

@@ -9,6 +9,7 @@
     id,
     onAction,
     purchaseState,
+    variableDictionary,
   }: PackageProps = $props();
 
   const onPackageClick = (evt: MouseEvent) => {
@@ -20,20 +21,39 @@
       });
   };
 
-  const isSelected = $derived(purchaseState?.selectedPackageId === package_id);
+  const packageVariables = $derived(
+    purchaseState.variablesPerPackage?.[package_id] || variableDictionary,
+  );
+
+  const componentState = $derived({
+    selected: purchaseState?.selectedPackageId === package_id,
+  });
 </script>
 
-<div class="package" class:selected={isSelected} {id} onclick={onPackageClick}>
-  <Stack {...stack} {labels} {onAction} {purchaseState} />
-</div>
+<button
+  class="package"
+  class:selected={componentState.selected}
+  {id}
+  onclick={onPackageClick}
+>
+  <Stack
+    {...stack}
+    {labels}
+    {onAction}
+    {purchaseState}
+    {componentState}
+    variableDictionary={packageVariables}
+  />
+</button>
 
 <style>
   .package {
     width: 100%;
     display: flex;
-    cursor: pointer;
-  }
-
-  .selected {
+    margin: 0;
+    padding: 0;
+    background: unset;
+    border: unset;
+    text-align: unset;
   }
 </style>

package/dist/components/paywall/Node.svelte

@@ -12,14 +12,22 @@
   import { prefersDarkMode } from "../../stores/theme";
   import ButtonNode from "../button/ButtonNode.svelte";
   import TextNode from "../text/TextNode.svelte";
+  import type { VariableDictionary } from "../../utils/variable-utils";
 
   interface Props extends ActionsProps, PurchaseStateProps {
     nodeData: PaywallComponent;
     labels: ComponentLocalizations;
     onAction?: (action: SupportedActions, data?: Extra) => void;
+    variableDictionary?: VariableDictionary;
   }
 
-  const { nodeData, labels, onAction, purchaseState }: Props = $props();
+  const {
+    nodeData,
+    labels,
+    onAction,
+    purchaseState,
+    variableDictionary,
+  }: Props = $props();
 
   const ComponentTypes = {
     text: TextNode,
@@ -39,8 +47,15 @@
   prefersDarkMode={$prefersDarkMode}
   {onAction}
   {purchaseState}
+  {variableDictionary}
 >
   {#each nodeData.components as childData}
-    <Self nodeData={childData} {labels} {onAction} {purchaseState} />
+    <Self
+      nodeData={childData}
+      {labels}
+      {onAction}
+      {purchaseState}
+      {variableDictionary}
+    />
   {/each}
 </MyComponent>

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

@@ -1,7 +1,9 @@
 import { type ActionsProps, type ComponentLocalizations, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
+import type { VariableDictionary } from "../../utils/variable-utils";
 declare const Node: import("svelte").Component<ActionsProps & PurchaseStateProps & {
     nodeData: PaywallComponent;
     labels: ComponentLocalizations;
     onAction?: (action: SupportedActions, data?: Extra) => void;
+    variableDictionary?: VariableDictionary;
 }, {}, "">;
 export default Node;

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

@@ -8,6 +8,10 @@
     fontsPaywallData,
     pastaPaywallData,
     paywallData,
+    gradientPaywallData,
+    variablesPastaPaywallData,
+    stateTemplate,
+    posterMakerTemplate,
   } from "../../stories/fixtures";
   import { fn } from "@storybook/test";
 
@@ -31,7 +35,7 @@
     onRestorePurchasesClicked: fn(),
   }}
 />
-<!-- Italian missing labels story -->
+
 <Story
   name="Italian Missing Labels"
   args={{
@@ -79,6 +83,34 @@
     onRestorePurchasesClicked: fn(),
   }}
 />
+<Story
+  name="Pasta paywall example(with variables)"
+  args={{
+    paywallData: variablesPastaPaywallData,
+    selectedLocale: "en_US",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+    variablesPerPackage: {
+      trial: {
+        product_name: "This was a variable: Product A",
+        price: "$19.99",
+        price_per_period: "$19.99/yr",
+      },
+      $rc_weekly: {
+        product_name: "This was a variable: Product B",
+        price: "$29.99",
+        price_per_period: "$29.99/yr",
+      },
+      $rc_daily: {
+        product_name: "This was a variable: Product C",
+        price: "$39.99",
+        price_per_period: "$39.99/yr",
+      },
+    },
+  }}
+/>
 
 <Story
   name="Calm paywall example"
@@ -91,3 +123,69 @@
     onRestorePurchasesClicked: fn(),
   }}
 />
+
+<Story
+  name="Healthy Cat (Gradient)"
+  args={{
+    paywallData: gradientPaywallData,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Dynamic state style overrides"
+  args={{
+    paywallData: stateTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Dynamic state style overrides with background image"
+  args={{
+    paywallData: {
+      ...stateTemplate,
+      components_config: {
+        ...stateTemplate.components_config,
+        base: {
+          ...stateTemplate.components_config.base,
+          background: {
+            type: "image",
+            value: {
+              light: {
+                heic: "https://assets.pawwalls.com/1005820_1732028636.heic",
+                heic_low_res:
+                  "https://assets.pawwalls.com/1005820_low_res_1732028636.heic",
+                original: "https://assets.pawwalls.com/1005820_1732028636.jpeg",
+                webp: "https://assets.pawwalls.com/1005820_1732028636.webp",
+                webp_low_res:
+                  "https://assets.pawwalls.com/1005820_low_res_1732028636.webp",
+              },
+            },
+          },
+        },
+      },
+    },
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Poster Maker"
+  args={{
+    paywallData: posterMakerTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>

package/dist/components/paywall/Paywall.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {
+    BaseNodeBackgroundImage,
     Extra,
     NavigateToAction,
     PaywallData,
@@ -9,6 +10,12 @@
   import Node from "./Node.svelte";
   import type { PurchaseState } from "../../data/state";
   import { findSelectedPackageId, getLabelById } from "../../utils/style-utils";
+  import { type VariableDictionary } from "../../utils/variable-utils";
+  import {
+    getBackgroundImageSource,
+    getBackgroundStyles,
+  } from "./paywall-utils";
+  import { prefersDarkMode } from "../../stores/theme";
 
   interface Props {
     paywallData: PaywallData;
@@ -18,6 +25,7 @@
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
     selectedLocale?: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
   }
 
   const {
@@ -28,14 +36,20 @@
     onBackClicked,
     onVisitCustomerCenterClicked,
     selectedLocale,
+    variablesPerPackage = {},
   }: Props = $props();
 
   let purchaseState: PurchaseState = $state({
     selectedPackageId: findSelectedPackageId(paywallData),
     locale: selectedLocale || paywallData.default_locale,
     defaultLocale: paywallData.default_locale,
+    variablesPerPackage,
   });
 
+  let variableDictionary = $state(
+    variablesPerPackage[purchaseState.selectedPackageId || ""],
+  );
+
   const onRestorePurchasesAction = (_: SupportedActions, _2?: Extra) => {
     onRestorePurchasesClicked?.();
   };
@@ -68,6 +82,9 @@
 
   const onSelectPackageAction = (_: SupportedActions, data?: Extra) => {
     purchaseState.selectedPackageId = data?.packageId;
+    if (data?.packageId) {
+      variableDictionary = variablesPerPackage[data.packageId];
+    }
   };
 
   const onPurchaseAction = (_: SupportedActions, _2?: Extra) => {
@@ -96,6 +113,17 @@
         break;
     }
   };
+  const colorMode = $derived($prefersDarkMode ? "dark" : "light");
+
+  const backgroundStyles = $derived(
+    getBackgroundStyles({
+      background: paywallData.components_config.base?.background,
+      colorMode,
+    }),
+  );
+  const backgroundImgSource = $derived(
+    getBackgroundImageSource(paywallData, $prefersDarkMode ? "dark" : "light"),
+  );
 </script>
 
 <div class="paywall">
@@ -104,7 +132,15 @@
     nodeData={paywallData.components_config.base.stack}
     labels={paywallData.components_localizations}
     {purchaseState}
+    {variableDictionary}
   />
+  {#if paywallData.components_config.base.background?.type === "color"}
+    <div class="paywall-background" style={backgroundStyles}></div>
+  {:else if paywallData.components_config.base.background?.type === "image"}
+    <div class="paywall-background image-container">
+      <img class="image" src={backgroundImgSource} alt="" />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -113,11 +149,32 @@
   *::before,
   *::after {
     box-sizing: border-box;
+    margin: 0;
   }
 
-  /* 2. Remove default margin */
-  * {
-    margin: 0;
+  .paywall {
+    position: relative;
+  }
+
+  .paywall-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--background, none);
+    z-index: -1;
+  }
+  .image-container {
+    overflow: hidden;
+    background: none;
+  }
+
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
   }
 
   body {

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

@@ -1,4 +1,5 @@
 import type { PaywallData } from "../../data/entities";
+import { type VariableDictionary } from "../../utils/variable-utils";
 declare const Paywall: import("svelte").Component<{
     paywallData: PaywallData;
     onPurchaseClicked?: (selectedPackageId: string) => void;
@@ -7,5 +8,6 @@ declare const Paywall: import("svelte").Component<{
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
     selectedLocale?: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
 }, {}, "">;
 export default Paywall;

package/dist/components/paywall/paywall-utils.d.ts

@@ -0,0 +1,7 @@
+import type { BaseNodeBackgroundType, PaywallData } from "../../data/entities";
+import type { ColorMode } from "../../types";
+export declare function getBackgroundStyles({ background, colorMode, }: {
+    background?: BaseNodeBackgroundType;
+    colorMode: ColorMode;
+}): string | undefined;
+export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string;

package/dist/components/paywall/paywall-utils.js

@@ -0,0 +1,21 @@
+import { getColor } from "../../utils/style-utils";
+export function getBackgroundStyles({ background, colorMode, }) {
+    if (!background)
+        return "";
+    if (background.type === "color") {
+        const style = getColor({
+            colorMap: background.value,
+            colorMode,
+            fallback: "transparent",
+        });
+        return `--background: ${style};`;
+    }
+}
+export function getBackgroundImageSource(paywallData, colorMode) {
+    if (paywallData.components_config.base?.background?.type !== "image")
+        return "";
+    const backgroundObject = paywallData.components_config.base
+        .background;
+    return (backgroundObject.value[colorMode]?.original ||
+        backgroundObject.value["light"]?.original);
+}

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

@@ -3,22 +3,27 @@
   import Stack from "../stack/Stack.svelte";
   import { Button } from "../../index";
 
-  const { stack, labels, onAction, purchaseState }: PurchaseButtonProps =
-    $props();
+  const {
+    stack,
+    labels,
+    onAction,
+    purchaseState,
+    variableDictionary,
+  }: PurchaseButtonProps = $props();
   const handleClick = () => {
     onAction && onAction({ type: "purchase" });
   };
 </script>
 
 <Button onclick={handleClick} class="purchase-button">
-  <Stack {...stack} {labels} {purchaseState} />
+  <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
 </Button>
 
 <style>
   .purchase-button {
     border: none;
     cursor: pointer;
-    background-color: transparent;
+    background: transparent;
     padding: 0;
     width: 100%;
     display: flex;

package/dist/components/stack/Stack.svelte

@@ -10,6 +10,7 @@
     labels,
     onAction,
     purchaseState,
+    variableDictionary,
     ...restProps
   }: StackProps = $props();
 
@@ -29,7 +30,13 @@
 
 <div {id} style={stackStyles} class="stack">
   {#each components as component}
-    <Node nodeData={component} {labels} {onAction} {purchaseState} />
+    <Node
+      nodeData={component}
+      {labels}
+      {onAction}
+      {purchaseState}
+      {variableDictionary}
+    />
   {/each}
 </div>
 
@@ -41,7 +48,7 @@
     width: var(--width, unset);
     height: var(--height, unset);
     gap: var(--spacing, 0);
-    background-color: var(--background-color, unset);
+    background: var(--background, none);
     border: var(--border, none);
     border-radius: var(--border-radius, 0);
     box-shadow: var(--shadow, none);

package/dist/components/stack/stack-utils.d.ts

@@ -15,7 +15,7 @@ type StackStyleVariables = {
     "--padding-inline-end": string;
     "--padding-block-end": string;
     "--padding-inline-start": string;
-    "--background-color": string;
+    "--background": string;
     "--text-color": string;
     "--border": string;
     "--border-radius": string;

package/dist/components/stack/stack-utils.js

@@ -1,11 +1,12 @@
-import { getComponentStyles, getDimensionStyle, getSizeStyle, } from "../../utils/style-utils";
+import { getActiveStateProps, getComponentStyles, getDimensionStyle, getSizeStyle, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for stack components by combining component, dimension and size styles
  * @param props - Stack component properties including background, spacing, size, border etc.
  * @returns CSS style variables object with all stack-specific styles
  */
 export const getStackComponentStyles = (props) => {
-    const { background_color, margin, padding, spacing, size, border, shape, colorMode, shadow, dimension, } = props;
+    const { background_color, margin, padding, spacing, size, border, shape, colorMode, shadow, dimension, componentState, overrides, } = props;
+    const activeStateProps = getActiveStateProps(overrides, componentState);
     const componentStyles = getComponentStyles({
         backgroundColor: background_color,
         margin,
@@ -14,9 +15,13 @@ export const getStackComponentStyles = (props) => {
         colorMode,
         shape,
         shadow,
+        ...activeStateProps,
     });
-    const dimensionStyles = getDimensionStyle(dimension);
-    const sizeStyles = getSizeStyle(size);
+    const dimensionStyles = getDimensionStyle({
+        ...dimension,
+        ...activeStateProps,
+    });
+    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
     return {
         ...sizeStyles,
         ...dimensionStyles,

package/dist/components/text/Text.svelte

@@ -32,12 +32,13 @@
     margin-block-end: var(--margin-block-end, unset);
     margin-inline-start: var(--margin-inline-start, unset);
     color: var(--text-color, #ffffff);
-    background-color: var(--background-color, #ffffff);
+    background: var(--background, none);
     font-size: var(--font-size, 1rem);
     font-weight: var(--font-weight, normal);
     text-align: var(--text-align, center);
-    height: var(--height, unset);
-    width: var(--width, unset);
     font-family: var(--font-family, sans-serif);
+    -webkit-background-clip: var(--background-clip, initial);
+    background-clip: var(--background-clip, initial);
+    -webkit-text-fill-color: var(--text-fill-color, initial);
   }
 </style>