@revenuecat/purchases-ui-js 0.0.12 → 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.stories.svelte

@@ -2,7 +2,7 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import ButtonNode from "./ButtonNode.svelte";
   import { colorModeStoryMeta } from "../../stories/meta-templates";
-  import type { SupportedActions, TextProps } from "../../data/entities";
+  import type { SupportedActions, TextNodeProps } from "../../data/entities";
 
   const onAction = (action: SupportedActions) => {
     alert(action.type);

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getImageComponentStyles } from "./image-utils";
-  import { stringifyStyles } from "../../utils";
+  import { stringifyStyles } from "../../utils/style-utils";
   import type { ImageProps } from "../../data/entities";
 
   const { id, colorMode, source, ...restProps }: ImageProps = $props();
@@ -30,16 +30,19 @@
     border-radius: var(--corner-radius, unset);
     clip-path: var(--clip-path, unset);
     display: flex;
-    flex: 1 0 auto;
+    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/image/image-utils.js

@@ -1,4 +1,4 @@
-import { getGradientStyle, getMaskStyle, getSizeStyle } from "../../utils";
+import { 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

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

@@ -1,13 +1,5 @@
 <script lang="ts">
-  import {
-    Stack,
-    Text,
-    Button,
-    Image,
-    PurchaseButton,
-    Package,
-    Footer,
-  } from "../..";
+  import { Stack, Image, PurchaseButton, Package, Footer } from "../..";
   import Self from "./Node.svelte";
   import {
     type ActionsProps,
@@ -19,19 +11,26 @@
   } from "../../data/entities";
   import { prefersDarkMode } from "../../stores/theme";
   import ButtonNode from "../button/ButtonNode.svelte";
-  import type { PurchaseState } from "../../data/state";
+  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;
-    purchaseState?: PurchaseState;
+    variableDictionary?: VariableDictionary;
   }
 
-  const { nodeData, labels, onAction, purchaseState }: Props = $props();
+  const {
+    nodeData,
+    labels,
+    onAction,
+    purchaseState,
+    variableDictionary,
+  }: Props = $props();
 
   const ComponentTypes = {
-    text: Text,
+    text: TextNode,
     stack: Stack,
     image: Image,
     button: ButtonNode,
@@ -48,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,9 +1,9 @@
 import { type ActionsProps, type ComponentLocalizations, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
-import type { PurchaseState } from "../../data/state";
+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;
-    purchaseState?: PurchaseState;
+    variableDictionary?: VariableDictionary;
 }, {}, "">;
 export default Node;

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

@@ -2,7 +2,15 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   import Paywall from "./Paywall.svelte";
-  import { paywallData } from "../../stories/fixtures";
+  import {
+    alignmentPaywallData,
+    calmPaywallData,
+    fontsPaywallData,
+    pastaPaywallData,
+    paywallData,
+    gradientPaywallData,
+    variablesPastaPaywallData,
+  } from "../../stories/fixtures";
   import { fn } from "@storybook/test";
 
   const { Story } = defineMeta({
@@ -37,3 +45,90 @@
     onRestorePurchasesClicked: fn(),
   }}
 />
+
+<Story
+  name="Alignment paywall example"
+  args={{
+    paywallData: alignmentPaywallData,
+    selectedLocale: "en_US",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Fonts paywall example"
+  args={{
+    paywallData: fontsPaywallData,
+    selectedLocale: "en_US",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Pasta paywall example"
+  args={{
+    paywallData: pastaPaywallData,
+    selectedLocale: "en_US",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    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"
+  args={{
+    paywallData: calmPaywallData,
+    selectedLocale: "en_US",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Healthy Cat (Gradient)"
+  args={{
+    paywallData: gradientPaywallData,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>

package/dist/components/paywall/Paywall.svelte

@@ -8,7 +8,8 @@
 
   import Node from "./Node.svelte";
   import type { PurchaseState } from "../../data/state";
-  import { findSelectedPackageId, getLabelById } from "../../utils";
+  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) => {
@@ -98,12 +109,13 @@
   };
 </script>
 
-<div>
+<div class="paywall">
   <Node
     {onAction}
     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

@@ -2,7 +2,7 @@
   import type { StackProps } from "../../data/entities";
   import Node from "../paywall/Node.svelte";
   import { getStackComponentStyles } from "./stack-utils";
-  import { stringifyStyles } from "../../utils";
+  import { stringifyStyles } from "../../utils/style-utils";
 
   const {
     id,
@@ -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);
@@ -56,6 +63,5 @@
     margin-block-end: var(--margin-block-end, 0);
     margin-inline-start: var(--margin-inline-start, 0);
     flex: var(--flex, 0 1 auto);
-    align-self: center;
   }
 </style>

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

@@ -1,5 +1,6 @@
 import type { StackProps } from "../../data/entities";
 type StackStyleVariables = {
+    "--flex": string;
     "--height": string;
     "--width": string;
     "--spacing": string;
@@ -14,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,4 +1,4 @@
-import { getComponentStyles, getDimensionStyle, getSizeStyle, } from "../../utils";
+import { 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.

package/dist/components/text/Text.svelte

@@ -1,38 +1,28 @@
 <script lang="ts">
-  import { getTextComponentStyles } from "./text-utils";
-  import type { TextProps } from "../../data/entities";
-  import { getLabelById, stringifyStyles } from "../../utils";
+  import type { Snippet } from "svelte";
 
-  const { id, labels, text_lid, purchaseState, ...restProps }: TextProps =
-    $props();
-
-  const { tagToRender, textStyles } = $derived(
-    getTextComponentStyles({
-      id,
-      labels,
-      text_lid,
-      purchaseState,
-      ...restProps,
-    }),
-  );
-  const stylesString = $derived(stringifyStyles(textStyles));
+  interface TextProps {
+    component?: string;
+    styleVariables?: string;
+    id?: string;
+    children?: Snippet;
+  }
 
-  const label = $derived(
-    getLabelById(
-      text_lid,
-      purchaseState.locale,
-      purchaseState.defaultLocale,
-      labels,
-    ),
-  );
+  const {
+    children,
+    styleVariables = "",
+    component = "p",
+    id,
+  }: TextProps = $props();
 </script>
 
-<svelte:element this={tagToRender} {id} style={stylesString} class="text-block">
-  {label}
+<svelte:element this={component} {id} style={styleVariables} class="text-block">
+  {@render children?.()}
 </svelte:element>
 
 <style>
   .text-block {
+    display: block;
     padding-block-start: var(--padding-block-start, unset);
     padding-inline-end: var(--padding-inline-end, unset);
     padding-block-end: var(--padding-block-end, unset);
@@ -42,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/Text.svelte.d.ts

@@ -1,3 +1,8 @@
-import type { TextProps } from "../../data/entities";
-declare const Text: import("svelte").Component<TextProps, {}, "">;
+import type { Snippet } from "svelte";
+declare const Text: import("svelte").Component<{
+    component?: string;
+    styleVariables?: string;
+    id?: string;
+    children?: Snippet;
+}, {}, "">;
 export default Text;

package/dist/components/text/{Text.stories.svelte → TextNode.stories.svelte}

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Text from "./Text.svelte";
+  import TextNode from "./TextNode.svelte";
   import {
     colorModeStoryMeta,
     fontSizeStoryMeta,
@@ -12,12 +12,12 @@
   } from "../../stories/meta-templates";
 
   /*
-   * Documentatino for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
+   * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
    */
 
   const { Story } = defineMeta({
     title: "Components/Text",
-    component: Text,
+    component: TextNode,
     tags: ["autodocs"],
     argTypes: {
       name: getTextControlStoryMeta("Content of the text to render"),
@@ -32,6 +32,11 @@
       horizontal_alignment: horizontalAlignmentStoryMeta,
       padding: getSpacingStoryMeta("Padding values in pixels"),
       margin: getSpacingStoryMeta("Margin values in pixels"),
+      variableDictionary: {
+        description: "Dictionary containing the values for the variables",
+        control: { type: "object" },
+        defaultValue: {},
+      },
     },
     args: {
       labels: { en_US: { lb123: "Test text" } },
@@ -46,6 +51,12 @@
       },
     },
   });
+
+  const mockVariableDictionary = {
+    product_name: "CatGPT",
+    price: "$39.99",
+    price_per_period: "$39.99/yr",
+  };
 </script>
 
 <!-- Default story -->
@@ -103,3 +114,44 @@
     name: "hello world!",
   }}
 />
+
+<!-- Text with variable dictionary story -->
+<Story
+  name="With variable dictionary"
+  args={{
+    font_weight: "regular",
+    text_style: "normal",
+    horizontal_alignment: "start",
+    padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
+    margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
+    name: "hello world!",
+    variableDictionary: mockVariableDictionary,
+    labels: {
+      en_US: {
+        lb123:
+          "This is a text that contains variables: {{ product_name }} for {{ price }} per {{ price_per_period }}",
+      },
+    },
+    text_lid: "lb123",
+  }}
+/>
+<!-- Text with missing variable in dictionary story -->
+<Story
+  name="With missing variable in dictionary"
+  args={{
+    font_weight: "regular",
+    text_style: "normal",
+    horizontal_alignment: "start",
+    padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
+    margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
+    name: "hello world!",
+    variableDictionary: mockVariableDictionary,
+    labels: {
+      en_US: {
+        lb123:
+          "This is a text with variables: {{ product_name }} for {{ price }} per {{ price_per_period }} and a missing variable: {{ sub_period_abbreviated }}",
+      },
+    },
+    text_lid: "lb123",
+  }}
+/>