@revenuecat/purchases-ui-js 0.0.13 → 0.0.14

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

@@ -32,15 +32,17 @@
     display: flex;
     flex: var(--flex, 1 0 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/package/Package.svelte

@@ -9,6 +9,7 @@
     id,
     onAction,
     purchaseState,
+    variableDictionary,
   }: PackageProps = $props();
 
   const onPackageClick = (evt: MouseEvent) => {
@@ -20,20 +21,35 @@
       });
   };
 
+  const packageVariables = $derived(
+    purchaseState.variablesPerPackage?.[package_id] || variableDictionary,
+  );
   const isSelected = $derived(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={isSelected}
+  {id}
+  onclick={onPackageClick}
+>
+  <Stack
+    {...stack}
+    {labels}
+    {onAction}
+    {purchaseState}
+    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,8 @@
     fontsPaywallData,
     pastaPaywallData,
     paywallData,
+    gradientPaywallData,
+    variablesPastaPaywallData,
   } from "../../stories/fixtures";
   import { fn } from "@storybook/test";
 
@@ -31,7 +33,7 @@
     onRestorePurchasesClicked: fn(),
   }}
 />
-<!-- Italian missing labels story -->
+
 <Story
   name="Italian Missing Labels"
   args={{
@@ -79,6 +81,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 +121,14 @@
     onRestorePurchasesClicked: fn(),
   }}
 />
+
+<Story
+  name="Healthy Cat (Gradient)"
+  args={{
+    paywallData: gradientPaywallData,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>

package/dist/components/paywall/Paywall.svelte

@@ -9,6 +9,7 @@
   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";
 
   interface Props {
     paywallData: PaywallData;
@@ -18,6 +19,7 @@
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
     selectedLocale?: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
   }
 
   const {
@@ -28,14 +30,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 +76,9 @@
 
   const onSelectPackageAction = (_: SupportedActions, data?: Extra) => {
     purchaseState.selectedPackageId = data?.packageId;
+    if (data?.packageId) {
+      variableDictionary = variablesPerPackage[data.packageId];
+    }
   };
 
   const onPurchaseAction = (_: SupportedActions, _2?: Extra) => {
@@ -104,6 +115,7 @@
     nodeData={paywallData.components_config.base.stack}
     labels={paywallData.components_localizations}
     {purchaseState}
+    {variableDictionary}
   />
 </div>
 

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/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/text/Text.svelte

@@ -32,7 +32,7 @@
     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);

package/dist/components/text/TextNode.svelte

@@ -36,7 +36,7 @@
   const parsedLabel = $derived(
     replaceVariables({
       value: label,
-      dictionary: variableDictionary,
+      variableDictionary,
     }),
   );
 </script>

package/dist/data/entities.d.ts

@@ -48,6 +48,7 @@ interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseS
     id: string;
     colorMode: ColorMode;
     name: string;
+    variableDictionary?: VariableDictionary;
 }
 interface Action {
     type: "restore_purchases" | "navigate_to" | "navigate_back" | "purchase" | "select_package";

package/dist/data/state.d.ts

@@ -1,5 +1,7 @@
+import type { VariableDictionary } from "../utils/variable-utils";
 export interface PurchaseState {
     selectedPackageId?: string;
     locale: string;
     defaultLocale: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
 }

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
 export { default as Package } from "./components/package/Package.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export { type VariableDictionary } from "./utils/variable-utils";

package/dist/index.js

@@ -9,3 +9,4 @@ export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
 export { default as Package } from "./components/package/Package.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export {} from "./utils/variable-utils";

package/dist/stories/fixtures.d.ts

@@ -3,6 +3,8 @@ export declare const paywallData: PaywallData;
 export declare const alignmentPaywallData: PaywallData;
 export declare const fontsPaywallData: PaywallData;
 export declare const pastaPaywallData: PaywallData;
+export declare const variablesPastaPaywallData: PaywallData;
+export declare const gradientPaywallData: PaywallData;
 export declare const calmPaywallData: PaywallData;
 export declare const labelsData: {
     en_US: {