@revenuecat/purchases-ui-js 2.0.0 → 2.0.1

package/dist/components/image/Image.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
   import { getImageComponentStyles } from "./image-utils";
   import type { ImageProps } from "../../data/entities";
+  import { getColorModeContext } from "../../stores/color-mode";
   import { DEFAULT_COLOR_MODE } from "../../utils/constants";
 
   const { id, source, purchaseState, ...restProps }: ImageProps = $props();
 
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
   let imageAspectRatio = $state(0);
   let imageElement: HTMLImageElement | null;
 
@@ -14,10 +18,10 @@
       imageAspectRatio = imageElement.naturalHeight / imageElement.naturalWidth;
     }
   }
+
   const { imageStyles, maskPath, linearGradientAngle } = $derived(
-    getImageComponentStyles({
+    getImageComponentStyles(colorMode, {
       id,
-      colorMode: purchaseState.colorMode,
       source,
       purchaseState,
       ...restProps,
@@ -26,13 +30,17 @@
   );
 
   const imageSource = $derived.by(() => {
-    const colorMode = purchaseState.colorMode;
     if (source[colorMode]?.original) {
       return source[colorMode].original;
     } else {
       return source[DEFAULT_COLOR_MODE]?.original as string;
     }
   });
+
+  const colorOverlay = $derived(restProps.color_overlay);
+  const colorInfo = $derived(
+    colorOverlay?.[colorMode] ?? colorOverlay?.[DEFAULT_COLOR_MODE],
+  );
 </script>
 
 <img
@@ -64,7 +72,7 @@
       {/if}
     </clipPath>
 
-    {#if restProps.color_overlay?.[purchaseState.colorMode]?.type === "linear"}
+    {#if colorInfo?.type === "linear"}
       <linearGradient
         id={`gradient-${id}`}
         x1={linearGradientAngle.x1}
@@ -72,14 +80,14 @@
         x2={linearGradientAngle.x2}
         y2={linearGradientAngle.y2}
       >
-        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.points || [] as stop}
+        {#each colorInfo?.points || [] as stop}
           <stop
             offset={`${stop.percent}%`}
             style={`stop-color: ${stop.color}`}
           />
         {/each}
       </linearGradient>
-    {:else if restProps.color_overlay?.[purchaseState.colorMode]?.type === "radial"}
+    {:else if colorInfo?.type === "radial"}
       <radialGradient
         id={`gradient-${id}`}
         cx="50%"
@@ -88,22 +96,16 @@
         fx="50%"
         fy="50%"
       >
-        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.points || [] as stop}
+        {#each colorInfo?.points || [] as stop}
           <stop
             offset={`${stop.percent}%`}
             style={`stop-color: ${stop.color}`}
           />
         {/each}
       </radialGradient>
-    {:else if restProps.color_overlay?.[purchaseState.colorMode]?.type === "hex"}
+    {:else if colorInfo?.type === "hex"}
       <linearGradient id={`gradient-${id}`}>
-        <stop
-          offset="0%"
-          style={`stop-color: ${
-            restProps.color_overlay[purchaseState.colorMode]?.value ||
-            restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.value
-          }`}
-        />
+        <stop offset="0%" style={`stop-color: ${colorInfo?.value}`} />
       </linearGradient>
     {/if}
   </defs>

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

@@ -1,10 +1,11 @@
 import type { ImageProps } from "../../data/entities";
+import type { ColorMode } from "../../types";
 /**
  * Generates comprehensive styles for image components by combining gradient and size styles
  * @param props - Image component properties including gradient, mask and size
  * @returns Object containing image style variables and gradient style variables
  */
-export declare const getImageComponentStyles: (props: ImageProps & {
+export declare const getImageComponentStyles: (colorMode: ColorMode, props: ImageProps & {
     imageAspectRatio: number;
 }) => {
     imageStyles: string;

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

@@ -4,7 +4,7 @@ import { getActiveStateProps, getLinearGradientAngle, getMaskPath, getMaskStyle,
  * @param props - Image component properties including gradient, mask and size
  * @returns Object containing image style variables and gradient style variables
  */
-export const getImageComponentStyles = (props) => {
+export const getImageComponentStyles = (colorMode, props) => {
     const { size, overrides, componentState, zStackChildStyles } = props;
     const imageStyles = {
         "--height": "unset",
@@ -24,7 +24,7 @@ export const getImageComponentStyles = (props) => {
     Object.assign(imageStyles, getMaskStyle(props.mask_shape));
     const prefixedImageStyles = prefixObject(imageStyles, "image");
     const maskPath = getMaskPath(props);
-    const linearGradientAngle = getLinearGradientAngle(props);
+    const linearGradientAngle = getLinearGradientAngle(colorMode, props);
     return {
         imageStyles: stringifyStyles(prefixedImageStyles),
         maskPath,

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

@@ -1,18 +1,30 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import Package from "./Package.svelte";
-  import type { Extra, SupportedActions } from "../../data/entities";
   import type { PurchaseState } from "../../data/state";
-  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  const onAction = (action: SupportedActions, data?: Extra) => {
-    alert(`${action.type} ${JSON.stringify(data)}`);
-  };
+  const defaultLocale = "en_US";
+  const priceLid = "QZ4ZmYsqjN";
+  const nameLid = "BcX-6YwhoV";
+  const purchaseState: PurchaseState = {};
 
   const { Story } = defineMeta({
     title: "Components/Package",
     component: Package,
     tags: ["autodocs"],
+    decorators: [
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            [nameLid]: "Monthly",
+            [priceLid]: "$1.99",
+          },
+        },
+      }),
+    ],
+    args: { purchaseState },
     argTypes: {
       stack: {
         control: { type: "object" },
@@ -26,18 +38,6 @@
       },
     },
   });
-
-  export const labelsData = {
-    en_US: {
-      "BcX-6YwhoV": "Monthly",
-      QZ4ZmYsqjN: "$1.99",
-    },
-  };
-  const purchaseState: PurchaseState = {
-    colorMode: DEFAULT_COLOR_MODE,
-    locale: "en_US",
-    defaultLocale: "en_US",
-  };
 </script>
 
 <!-- Default  -->
@@ -47,8 +47,7 @@
     id: "6rQSD5e2Kz",
     is_selected_by_default: false,
     name: "Package - Monthly",
-    package_id: "$rc_annual",
-    purchaseState,
+    package_id: "$rc_monthly",
     stack: {
       purchaseState,
       background_color: {
@@ -57,7 +56,15 @@
           value: "#09090b",
         },
       },
-      labels: labelsData,
+      background: {
+        type: "color",
+        value: {
+          light: {
+            type: "hex",
+            value: "#09090b",
+          },
+        },
+      },
       border: {
         color: {
           light: {
@@ -76,7 +83,6 @@
               value: "#ffffff",
             },
           },
-          labels: labelsData,
           components: [],
           font_name: null,
           font_size: "heading_s",
@@ -106,7 +112,7 @@
               value: null,
             },
           },
-          text_lid: "BcX-6YwhoV",
+          text_lid: nameLid,
           type: "text",
         },
         {
@@ -116,7 +122,6 @@
               value: "#292631",
             },
           },
-          labels: labelsData,
           border: null,
           components: [
             {
@@ -156,7 +161,7 @@
                   value: null,
                 },
               },
-              text_lid: "QZ4ZmYsqjN",
+              text_lid: priceLid,
               type: "text",
             },
           ],
@@ -241,9 +246,8 @@
       },
       spacing: 8,
       type: "stack",
+      shadow: null,
     },
-    onAction,
-    labels: labelsData,
     type: "package",
   }}
 />

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

@@ -1,10 +1,4 @@
 import Package from "./Package.svelte";
-export declare const labelsData: {
-    en_US: {
-        "BcX-6YwhoV": string;
-        QZ4ZmYsqjN: string;
-    };
-};
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/package/Package.svelte

@@ -1,33 +1,36 @@
 <script lang="ts">
-  import type { PackageProps, SelectPackageAction } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
+  import { getPaywallContext } from "../../stores/paywall";
+  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,
     labels,
     id,
-    onAction,
     purchaseState,
-    variableDictionary,
     zStackChildStyles,
   }: PackageProps = $props();
-  const onPackageClick = (evt: MouseEvent) => {
-    evt.preventDefault();
-    evt.stopPropagation();
-    onAction &&
-      onAction({ type: "select_package" } as SelectPackageAction, {
-        packageId: package_id,
-      });
-  };
 
-  const packageVariables = $derived(
-    purchaseState.variablesPerPackage?.[package_id] || variableDictionary,
+  const { selectedPackageId } = getPaywallContext();
+
+  const onPackageClick = () => ($selectedPackageId = package_id);
+
+  const fallbackVariables = getVariablesContext();
+  const variables = derived(
+    fallbackVariables,
+    (fallback) => purchaseState.variablesPerPackage?.[package_id] ?? fallback,
   );
+  setVariablesContext(variables);
 
   const componentState = $derived({
-    selected: purchaseState?.selectedPackageId === package_id,
+    selected: $selectedPackageId === package_id,
   });
 
   const styles = $derived(
@@ -42,14 +45,7 @@
   onclick={onPackageClick}
   style={styles}
 >
-  <Stack
-    {...stack}
-    {labels}
-    {onAction}
-    {purchaseState}
-    {componentState}
-    variableDictionary={packageVariables}
-  />
+  <Stack {...stack} {labels} {purchaseState} {componentState} />
 </button>
 
 <style>

package/dist/components/package/Package.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { PackageProps } from "../../data/entities";
+import type { PackageProps } from "../../types/components/package";
 declare const Package: import("svelte").Component<PackageProps, {}, "">;
 type Package = ReturnType<typeof Package>;
 export default Package;

package/dist/components/paywall/Node.svelte

@@ -1,18 +1,4 @@
 <script lang="ts">
-  import Self from "./Node.svelte";
-  import {
-    type ActionsProps,
-    type ComponentLocalizations,
-    type ComponentState,
-    type Extra,
-    type PaywallComponent,
-    type PurchaseStateProps,
-    type SupportedActions,
-  } from "../../data/entities";
-  import { prefersDarkMode } from "../../stores/theme";
-  import type { VariableDictionary } from "../../utils/variable-utils";
-  import type { ZStackChildStyles } from "../stack/stack-utils";
-  import TextNode from "../text/TextNode.svelte";
   import {
     Footer,
     Image,
@@ -22,7 +8,15 @@
     Timeline,
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
+  import type { ZStackChildStyles } from "../stack/stack-utils";
+  import TextNode from "../text/TextNode.svelte";
+  import {
+    type ComponentState,
+    type PaywallComponent,
+    type PurchaseStateProps,
+  } from "../../data/entities";
   import type { Component } from "svelte";
+  import Self from "./Node.svelte";
 
   type SupportedComponents =
     | TextNode
@@ -34,11 +28,8 @@
     | Footer
     | Timeline;
 
-  interface Props extends ActionsProps, PurchaseStateProps {
+  interface Props extends PurchaseStateProps {
     nodeData: PaywallComponent;
-    labels: ComponentLocalizations;
-    onAction?: (action: SupportedActions, data?: Extra) => void;
-    variableDictionary?: VariableDictionary;
     zStackChildStyles?: ZStackChildStyles;
     componentState?: ComponentState;
   }
@@ -88,37 +79,19 @@
     throw new Error(`Invalid component type: ${nodeData.type}`);
   };
 
-  const {
-    nodeData,
-    labels,
-    onAction,
-    purchaseState,
-    variableDictionary,
-    zStackChildStyles,
-    ...restProps
-  }: Props = $props();
+  const { nodeData, purchaseState, zStackChildStyles, ...restProps }: Props =
+    $props();
 
   const [ComponentToRender, dataToUse] = $derived(getComponentClass(nodeData));
 </script>
 
 <ComponentToRender
   {...(dataToUse as any) || {}}
-  {labels}
-  prefersDarkMode={$prefersDarkMode}
-  {onAction}
   {purchaseState}
-  {variableDictionary}
   {zStackChildStyles}
   {...restProps}
 >
   {#each nodeData.components as PaywallComponent[] as childData}
-    <Self
-      nodeData={childData}
-      {labels}
-      {onAction}
-      {purchaseState}
-      {variableDictionary}
-      {...restProps}
-    />
+    <Self nodeData={childData} {purchaseState} {...restProps} />
   {/each}
 </ComponentToRender>

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

@@ -1,16 +1,12 @@
-import { type ActionsProps, type ComponentLocalizations, type ComponentState, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
-import type { VariableDictionary } from "../../utils/variable-utils";
-import type { ZStackChildStyles } from "../stack/stack-utils";
-import TextNode from "../text/TextNode.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, type PaywallComponent, type PurchaseStateProps } from "../../data/entities";
 import type { Component } from "svelte";
 type SupportedComponents = TextNode | Stack | Image | ButtonNode | PurchaseButton | Package | Footer | Timeline;
-interface Props extends ActionsProps, PurchaseStateProps {
+interface Props extends PurchaseStateProps {
     nodeData: PaywallComponent;
-    labels: ComponentLocalizations;
-    onAction?: (action: SupportedActions, data?: Extra) => void;
-    variableDictionary?: VariableDictionary;
     zStackChildStyles?: ZStackChildStyles;
     componentState?: ComponentState;
 }

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

@@ -5,20 +5,19 @@
   import {
     alignmentPaywallData,
     calmPaywallData,
+    colorModeOverrideTemplate,
+    e2eTestTemplate,
+    errorPaywallData,
+    fallbackPaywallData,
     fontsPaywallData,
+    gradientPaywallData,
     pastaPaywallData,
     paywallData,
-    gradientPaywallData,
-    variablesPastaPaywallData,
+    paywallWithFooter,
     posterMakerTemplate,
-    e2eTestTemplate,
+    variablesPastaPaywallData,
     zStackTemplate,
-    colorModeOverrideTemplate,
-    errorPaywallData,
-    paywallWithFooter,
-    fallbackPaywallData,
   } from "../../stories/fixtures";
-  import { fn } from "@storybook/test";
   import type { VariableDictionary } from "../../utils/variable-utils";
 
   const { Story } = defineMeta({
@@ -26,7 +25,14 @@
     component: Paywall,
     tags: ["autodocs"],
     argTypes: {},
-    args: {},
+    args: {
+      onPurchaseClicked: (selectedPackageId: string) =>
+        alert(`Purchase package ${selectedPackageId}`),
+      onBackClicked: () => alert("Go back"),
+      onVisitCustomerCenterClicked: () => alert("Visit customer center"),
+      onRestorePurchasesClicked: () => alert("Restore purchases"),
+      onNavigateToUrlClicked: (url: string) => alert(`Navigate to ${url}`),
+    },
   });
 </script>
 
@@ -35,10 +41,6 @@
   name="Primary"
   args={{
     paywallData: paywallData,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -47,10 +49,6 @@
   args={{
     paywallData: paywallData,
     selectedLocale: "it_IT",
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -59,10 +57,6 @@
   args={{
     paywallData: alignmentPaywallData,
     selectedLocale: "en_US",
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -71,10 +65,6 @@
   args={{
     paywallData: fontsPaywallData,
     selectedLocale: "en_US",
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -83,10 +73,6 @@
   args={{
     paywallData: pastaPaywallData,
     selectedLocale: "en_US",
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 <Story
@@ -94,10 +80,6 @@
   args={{
     paywallData: variablesPastaPaywallData,
     selectedLocale: "en_US",
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
     variablesPerPackage: {
       trial: {
         product_name: "This was a variable: Product A",
@@ -123,10 +105,6 @@
   args={{
     paywallData: calmPaywallData,
     selectedLocale: "en_US",
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -134,10 +112,6 @@
   name="Healthy Cat (Gradient)"
   args={{
     paywallData: gradientPaywallData,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -145,10 +119,6 @@
   name="Dynamic state style overrides"
   args={{
     paywallData: e2eTestTemplate,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -163,25 +133,26 @@
           ...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",
-                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",
               },
+              dark: null,
             },
           },
         },
       },
     },
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -189,10 +160,6 @@
   name="Poster Maker"
   args={{
     paywallData: posterMakerTemplate,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -200,10 +167,6 @@
   name="E2E Test with variables"
   args={{
     paywallData: e2eTestTemplate,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
     variablesPerPackage: {
       $rc_annual: {
         product_name: "Yearly sub",
@@ -273,10 +236,6 @@
   name="Z Stack"
   args={{
     paywallData: zStackTemplate,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />
 
@@ -284,10 +243,6 @@
   name="Color Mode Override"
   args={{
     paywallData: colorModeOverrideTemplate,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
     preferredColorMode: "dark",
   }}
 />
@@ -296,10 +251,6 @@
   name="Invalid component type"
   args={{
     paywallData: errorPaywallData,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
     preferredColorMode: "dark",
     onError: (error: unknown) => alert(`Error - ${error}`),
   }}
@@ -309,10 +260,6 @@
   name="Fallback Paywall"
   args={{
     paywallData: fallbackPaywallData,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
     preferredColorMode: "dark",
     onError: (error: unknown) => console.error(`Error - ${error}`),
   }}
@@ -322,9 +269,5 @@
   name="Sticky Footer"
   args={{
     paywallData: paywallWithFooter,
-    onPurchaseClicked: fn(),
-    onBackClicked: fn(),
-    onNavigateToUrlClicked: fn(),
-    onRestorePurchasesClicked: fn(),
   }}
 />