@revenuecat/purchases-ui-js 0.0.15 → 0.0.17

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

@@ -12,8 +12,14 @@
     variablesPastaPaywallData,
     stateTemplate,
     posterMakerTemplate,
+    e2eTestTemplate,
+    zStackTemplate,
+    colorModeOverrideTemplate,
+    errorPaywallData,
+    paywallWithFooter,
   } from "../../stories/fixtures";
   import { fn } from "@storybook/test";
+  import type { VariableDictionary } from "../../utils/variable-utils";
 
   const { Story } = defineMeta({
     title: "Example/Paywall",
@@ -31,7 +37,7 @@
     paywallData: paywallData,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -43,7 +49,7 @@
     selectedLocale: "it_IT",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -55,7 +61,7 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -67,7 +73,7 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -79,7 +85,7 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -90,24 +96,24 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
     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: "$39.99/yr",
-      },
+        price_per_period: "$19.99/yr",
+      } as VariableDictionary,
     },
   }}
 />
@@ -119,7 +125,7 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -130,7 +136,7 @@
     paywallData: gradientPaywallData,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -141,7 +147,7 @@
     paywallData: stateTemplate,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -174,7 +180,7 @@
     },
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -185,7 +191,65 @@
     paywallData: posterMakerTemplate,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="E2E Test with variables"
+  args={{
+    paywallData: e2eTestTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Z Stack"
+  args={{
+    paywallData: zStackTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Color Mode Override"
+  args={{
+    paywallData: colorModeOverrideTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+    preferredColorMode: "dark",
+  }}
+/>
+
+<Story
+  name="Invalid component type"
+  args={{
+    paywallData: errorPaywallData,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+    preferredColorMode: "dark",
+    onError: (error: unknown) => alert(`Error - ${error}`),
+  }}
+/>
+
+<Story
+  name="Sticky Footer"
+  args={{
+    paywallData: paywallWithFooter,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />

package/dist/components/paywall/Paywall.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type {
-    BaseNodeBackgroundImage,
     Extra,
     NavigateToAction,
     PaywallData,
+    StackProps,
     SupportedActions,
   } from "../../data/entities";
 
@@ -16,6 +16,8 @@
     getBackgroundStyles,
   } from "./paywall-utils";
   import { prefersDarkMode } from "../../stores/theme";
+  import type { ColorMode } from "../../types";
+  import Footer from "../footer/Footer.svelte";
 
   interface Props {
     paywallData: PaywallData;
@@ -26,6 +28,8 @@
     onNavigateToUrlClicked?: (url: string) => void;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    preferredColorMode?: ColorMode;
+    onError?: (error: unknown) => void;
   }
 
   const {
@@ -37,6 +41,8 @@
     onVisitCustomerCenterClicked,
     selectedLocale,
     variablesPerPackage = {},
+    preferredColorMode,
+    onError,
   }: Props = $props();
 
   let purchaseState: PurchaseState = $state({
@@ -44,6 +50,7 @@
     locale: selectedLocale || paywallData.default_locale,
     defaultLocale: paywallData.default_locale,
     variablesPerPackage,
+    colorMode: preferredColorMode || ($prefersDarkMode ? "dark" : "light"),
   });
 
   let variableDictionary = $state(
@@ -81,9 +88,9 @@
   };
 
   const onSelectPackageAction = (_: SupportedActions, data?: Extra) => {
-    purchaseState.selectedPackageId = data?.packageId;
+    purchaseState.selectedPackageId = data?.packageId as string | undefined;
     if (data?.packageId) {
-      variableDictionary = variablesPerPackage[data.packageId];
+      variableDictionary = variablesPerPackage[data.packageId as string];
     }
   };
 
@@ -113,35 +120,47 @@
         break;
     }
   };
-  const colorMode = $derived($prefersDarkMode ? "dark" : "light");
 
   const backgroundStyles = $derived(
     getBackgroundStyles({
       background: paywallData.components_config.base?.background,
-      colorMode,
+      colorMode: purchaseState.colorMode,
     }),
   );
   const backgroundImgSource = $derived(
-    getBackgroundImageSource(paywallData, $prefersDarkMode ? "dark" : "light"),
+    getBackgroundImageSource(paywallData, purchaseState.colorMode),
   );
 </script>
 
-<div class="paywall">
-  <Node
-    {onAction}
-    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>
+<svelte:boundary onerror={onError}>
+  <div class="paywall">
+    <Node
+      {onAction}
+      nodeData={paywallData.components_config.base.stack}
+      labels={paywallData.components_localizations}
+      {purchaseState}
+      {variableDictionary}
+    />
+
+    {#if paywallData.components_config.base.sticky_footer}
+      <Footer
+        {...paywallData.components_config.base.sticky_footer}
+        stack={paywallData.components_config.base.sticky_footer
+          .stack as StackProps}
+        labels={paywallData.components_localizations}
+        {purchaseState}
+        {variableDictionary}
+      />
+    {/if}
+    {#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>
+</svelte:boundary>
 
 <style>
   /* 1. Use a more-intuitive box-sizing model */

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

@@ -1,5 +1,6 @@
 import type { PaywallData } from "../../data/entities";
 import { type VariableDictionary } from "../../utils/variable-utils";
+import type { ColorMode } from "../../types";
 declare const Paywall: import("svelte").Component<{
     paywallData: PaywallData;
     onPurchaseClicked?: (selectedPackageId: string) => void;
@@ -9,5 +10,8 @@ declare const Paywall: import("svelte").Component<{
     onNavigateToUrlClicked?: (url: string) => void;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    preferredColorMode?: ColorMode;
+    onError?: (error: unknown) => void;
 }, {}, "">;
+type Paywall = ReturnType<typeof Paywall>;
 export default Paywall;

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

@@ -1,14 +1,12 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import PurchaseButton from "./PurchaseButton.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
 
   const { Story } = defineMeta({
     title: "Components/PurchaseButton",
     component: PurchaseButton,
     tags: ["autodocs"],
     argTypes: {
-      colorMode: colorModeStoryMeta,
       stack: {
         control: { type: "object" },
         description: "Stack configuration for button content",

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

@@ -1,3 +1,4 @@
 import type { PurchaseButtonProps } from "../../data/entities";
 declare const PurchaseButton: import("svelte").Component<PurchaseButtonProps, {}, "">;
+type PurchaseButton = ReturnType<typeof PurchaseButton>;
 export default PurchaseButton;

package/dist/components/stack/Stack.stories.svelte

@@ -3,7 +3,6 @@
   import Stack from "./Stack.svelte";
   import {
     borderStoryMeta,
-    colorModeStoryMeta,
     getColorStoryMeta,
     getSpacingStoryMeta,
     shadowStoryMeta,
@@ -22,7 +21,6 @@
         control: { type: "number" },
         description: "Space between stack items in pixels",
       },
-      colorMode: colorModeStoryMeta,
       shadow: shadowStoryMeta,
       background_color: getColorStoryMeta("Background color object"),
       padding: getSpacingStoryMeta("Padding values in pixels"),

package/dist/components/stack/Stack.svelte

@@ -63,5 +63,8 @@
     margin-block-end: var(--margin-block-end, 0);
     margin-inline-start: var(--margin-inline-start, 0);
     flex: var(--flex, 0 1 auto);
+    position: var(--position, relative);
+    inset: var(--inset, initial);
+    transform: var(--transform, initial);
   }
 </style>

package/dist/components/stack/Stack.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { StackProps } from "../../data/entities";
 declare const Stack: import("svelte").Component<StackProps, {}, "">;
+type Stack = ReturnType<typeof Stack>;
 export default Stack;

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

@@ -5,14 +5,14 @@ import { getActiveStateProps, getComponentStyles, getDimensionStyle, getSizeStyl
  * @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, componentState, overrides, } = props;
+    const { background_color, margin, padding, spacing, size, border, shape, shadow, dimension, componentState, overrides, purchaseState, } = props;
     const activeStateProps = getActiveStateProps(overrides, componentState);
     const componentStyles = getComponentStyles({
         backgroundColor: background_color,
         margin,
         padding,
         border,
-        colorMode,
+        colorMode: purchaseState.colorMode,
         shape,
         shadow,
         ...activeStateProps,
@@ -21,7 +21,7 @@ export const getStackComponentStyles = (props) => {
         ...dimension,
         ...activeStateProps,
     });
-    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
+    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps }, dimension.type === "zlayer");
     return {
         ...sizeStyles,
         ...dimensionStyles,

package/dist/components/text/Text.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from "svelte";
-declare const Text: import("svelte").Component<{
+interface TextProps {
     component?: string;
     styleVariables?: string;
     id?: string;
     children?: Snippet;
-}, {}, "">;
+}
+declare const Text: import("svelte").Component<TextProps, {}, "">;
+type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/components/text/TextNode.stories.svelte

@@ -2,7 +2,6 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import TextNode from "./TextNode.svelte";
   import {
-    colorModeStoryMeta,
     fontSizeStoryMeta,
     fontWeightStoryMeta,
     getColorStoryMeta,
@@ -25,7 +24,6 @@
         "Font family to be used, uses GoogleFonts API",
       ),
       font_weight: fontWeightStoryMeta,
-      colorMode: colorModeStoryMeta,
       font_size: fontSizeStoryMeta,
       color: getColorStoryMeta("Text color object"),
       background_color: getColorStoryMeta("Background color object"),
@@ -53,6 +51,7 @@
       purchaseState: {
         locale: "en_US",
         defaultLocale: "en_US",
+        colorMode: "light",
       },
     },
   });

package/dist/components/text/TextNode.svelte

@@ -4,11 +4,10 @@
   import type { TextNodeProps } from "../../data/entities";
   import {
     getComponentStyles,
-    getLabelById,
+    getLabelAndReplaceVariables,
     getSizeStyle,
     stringifyStyles,
   } from "../../utils/style-utils";
-  import { replaceVariables } from "../../utils/variable-utils";
 
   const {
     id,
@@ -20,7 +19,6 @@
     size,
     ...restProps
   }: TextNodeProps = $props();
-
   const { tagToRender, textStyles } = $derived(
     getTextComponentStyles({
       id,
@@ -43,17 +41,12 @@
   );
   const styles = $derived(stringifyStyles(textStyles));
 
-  const label = $derived(
-    getLabelById(
+  const parsedLabel = $derived(
+    getLabelAndReplaceVariables({
       text_lid,
-      purchaseState.locale,
-      purchaseState.defaultLocale,
+      locale: purchaseState.locale,
+      defaultLocale: purchaseState.defaultLocale,
       labels,
-    ),
-  );
-  const parsedLabel = $derived(
-    replaceVariables({
-      value: label,
       variableDictionary,
     }),
   );

package/dist/components/text/TextNode.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { TextNodeProps } from "../../data/entities";
 declare const TextNode: import("svelte").Component<TextNodeProps, {}, "">;
+type TextNode = ReturnType<typeof TextNode>;
 export default TextNode;

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

@@ -1,5 +1,6 @@
 import { type TextComponentTags } from "../../utils/style-utils";
 import type { TextNodeProps } from "../../data/entities";
+import type { ColorType } from "../../types";
 type TextStyleVariables = {
     "--width": string;
     "--height": string;
@@ -10,13 +11,15 @@ type TextStyleVariables = {
     "--background-clip": string;
     "--text-fill-color": string;
 };
+export declare const defaultColor: ColorType;
+export declare const defaultBackgroundColor: ColorType;
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles
  * @param props - Text component properties including font, color, background, spacing etc.
  * @returns Object containing text style variables and the appropriate HTML tag to render
  */
 export declare const getTextComponentStyles: (props: TextNodeProps) => {
-    textStyles: TextStyleVariables;
-    tagToRender: TextComponentTags;
+    textStyles: Partial<TextStyleVariables>;
+    tagToRender: Partial<TextComponentTags>;
 };
 export {};

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

@@ -1,26 +1,26 @@
 import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils/style-utils";
+export const defaultColor = {
+    light: { type: "hex", value: "#000000" },
+};
+export const defaultBackgroundColor = {
+    light: { type: "hex", value: "#FFFFFF" },
+};
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles
  * @param props - Text component properties including font, color, background, spacing etc.
  * @returns Object containing text style variables and the appropriate HTML tag to render
  */
 export const getTextComponentStyles = (props) => {
-    const { font_size = "body_m", color = {
-        dark: { type: "hex", value: "#000000" },
-        light: { type: "hex", value: "#000000" },
-    }, background_color = {
-        dark: { type: "hex", value: "#FFFFFF" },
-        light: { type: "hex", value: "#FFFFFF" },
-    }, padding, margin, colorMode, size, } = props;
+    const { font_size = "body_m", color = defaultColor, background_color = defaultBackgroundColor, padding, margin, size, purchaseState, } = props;
     const activeStateProps = getActiveStateProps(props.overrides, props.componentState);
     const tagToRender = getTextComponentTag(font_size);
-    const textStyles = getTextStyles({ ...props, ...activeStateProps }, colorMode);
+    const textStyles = getTextStyles({ ...props, ...activeStateProps }, purchaseState.colorMode);
     const componentStyles = getComponentStyles({
         backgroundColor: background_color,
         textColor: color,
         margin,
         padding,
-        colorMode,
+        colorMode: purchaseState.colorMode,
         ...activeStateProps,
     });
     const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });