@revenuecat/purchases-ui-js 2.0.0 → 2.0.2

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(),
   }}
 />

package/dist/components/paywall/Paywall.svelte

@@ -1,160 +1,135 @@
 <script lang="ts">
-  import type {
-    Extra,
-    NavigateToAction,
-    PaywallData,
-    StackProps,
-    SupportedActions,
-  } from "../../data/entities";
+  import type { PaywallData, StackProps } from "../../data/entities";
 
+  import Footer from "../footer/Footer.svelte";
   import Node from "./Node.svelte";
-  import type { PurchaseState } from "../../data/state";
-  import { findSelectedPackageId } from "../../utils/style-utils";
-  import {
-    getLabelById,
-    type VariableDictionary,
-  } from "../../utils/variable-utils";
   import {
     getBackgroundImageSource,
     getBackgroundStyles,
   } from "./paywall-utils";
-  import { prefersDarkMode } from "../../stores/theme";
+  import { setColorModeContext } from "../../stores/color-mode";
+  import { setLocalizationContext } from "../../stores/localization";
+  import { setPaywallContext } from "../../stores/paywall";
+  import {
+    setVariablesContext,
+    type VariablesStore,
+  } from "../../stores/variables";
   import type { ColorMode } from "../../types";
-  import Footer from "../footer/Footer.svelte";
-  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
+  import type { Action } from "../../types/components/button";
+  import { findSelectedPackageId } from "../../utils/style-utils";
+  import { type VariableDictionary } from "../../utils/variable-utils";
+  import { derived, readable, writable } from "svelte/store";
 
   interface Props {
     paywallData: PaywallData;
+    selectedLocale?: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
+    preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string) => void;
     onBackClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
-    selectedLocale?: string;
-    variablesPerPackage?: Record<string, VariableDictionary>;
-    preferredColorMode?: ColorMode;
     onError?: (error: unknown) => void;
   }
 
   const {
     paywallData,
-    onPurchaseClicked,
-    onRestorePurchasesClicked,
-    onNavigateToUrlClicked,
-    onBackClicked,
-    onVisitCustomerCenterClicked,
     selectedLocale,
     variablesPerPackage = {},
     preferredColorMode,
+    onPurchaseClicked,
+    onBackClicked,
+    onVisitCustomerCenterClicked,
+    onRestorePurchasesClicked,
+    onNavigateToUrlClicked,
     onError,
   }: Props = $props();
 
-  let purchaseState: PurchaseState = $state({
-    selectedPackageId: findSelectedPackageId(paywallData),
-    locale: selectedLocale || paywallData.default_locale,
+  const getColorMode = setColorModeContext(() => preferredColorMode);
+  const colorMode = $derived(getColorMode());
+
+  const { getLocalizedString } = setLocalizationContext(() => ({
     defaultLocale: paywallData.default_locale,
-    variablesPerPackage,
-    colorMode:
-      preferredColorMode || ($prefersDarkMode ? "dark" : DEFAULT_COLOR_MODE),
-  });
+    selectedLocale,
+    localizations: paywallData.components_localizations!,
+  }));
 
-  let variableDictionary = $state(
-    variablesPerPackage[purchaseState.selectedPackageId || ""],
+  const selectedPackageId = writable<string | undefined>(
+    findSelectedPackageId(paywallData),
   );
 
-  const onRestorePurchasesAction = (_: SupportedActions, _2?: Extra) => {
-    onRestorePurchasesClicked?.();
-  };
-
-  const onNavigateBackAction = (_: SupportedActions, _2?: Extra) => {
-    onBackClicked?.();
-  };
-
-  const onNavigateToUrl = (action: NavigateToAction, _?: Extra) => {
-    if (action.destination === "customer_center") {
-      onVisitCustomerCenterClicked?.();
+  const onPurchase = () => {
+    const packageId = $selectedPackageId;
+    if (packageId !== undefined) {
+      onPurchaseClicked?.(packageId);
     }
-
-    if (!action.url) {
-      return;
-    }
-
-    const localizedURL = getLabelById(
-      action.url.url_lid,
-      purchaseState.locale,
-      purchaseState.defaultLocale,
-      paywallData.components_localizations,
-    );
-    if (!localizedURL) {
-      return;
-    }
-
-    onNavigateToUrlClicked?.(localizedURL);
   };
 
-  const onSelectPackageAction = (_: SupportedActions, data?: Extra) => {
-    purchaseState.selectedPackageId = data?.packageId as string | undefined;
-    if (data?.packageId) {
-      variableDictionary = variablesPerPackage[data.packageId as string];
-    }
-  };
-
-  const onPurchaseAction = (_: SupportedActions, _2?: Extra) => {
-    if (purchaseState.selectedPackageId === undefined) {
-      return;
-    }
-    onPurchaseClicked?.(purchaseState.selectedPackageId);
-  };
-  const onAction = (action: SupportedActions, data?: Extra) => {
+  const onButtonAction = (action: Action) => {
     switch (action.type) {
-      case "select_package":
-        onSelectPackageAction(action, data);
-        break;
-      case "navigate_to":
-        onNavigateToUrl(action, data);
-        break;
       case "navigate_back":
-        onNavigateBackAction(action, data);
-        break;
+        onBackClicked?.();
+        return;
       case "restore_purchases":
-        onRestorePurchasesAction(action, data);
-        break;
-      case "purchase":
-        onPurchaseAction(action, data);
-        break;
+        onRestorePurchasesClicked?.();
+        return;
+    }
+
+    switch (action.destination) {
+      case "customer_center":
+        onVisitCustomerCenterClicked?.();
+        return;
+      case "privacy_policy":
+      case "terms":
+      case "url":
+        const url = getLocalizedString(action.url.url_lid);
+        if (url) {
+          onNavigateToUrlClicked?.(url);
+        }
+        return;
+      case "offer_code":
+      case "sheet":
+      case "web_paywall_link":
+        // TODO: Implement later.
+        return;
     }
   };
 
+  setPaywallContext({
+    selectedPackageId,
+    variablesPerPackage: readable(variablesPerPackage),
+    onPurchase,
+    onButtonAction,
+  });
+
+  const variables: VariablesStore = derived(
+    selectedPackageId,
+    (packageId) => variablesPerPackage[packageId || ""],
+  );
+
+  setVariablesContext(variables);
+
   const backgroundStyles = $derived(
     getBackgroundStyles({
       background: paywallData.components_config.base?.background,
-      colorMode: purchaseState.colorMode,
+      colorMode,
     }),
   );
   const backgroundImgSource = $derived(
-    getBackgroundImageSource(paywallData, purchaseState.colorMode),
+    getBackgroundImageSource(paywallData, colorMode),
   );
 </script>
 
 <svelte:boundary onerror={onError}>
   <div class="rc-pw-paywall">
-    <Node
-      {onAction}
-      nodeData={paywallData.components_config.base.stack}
-      labels={paywallData.components_localizations}
-      {purchaseState}
-      {variableDictionary}
-    />
+    <Node nodeData={paywallData.components_config.base.stack} />
 
     {#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}
-        {onAction}
       />
     {/if}
     {#if paywallData.components_config.base.background?.type === "color"}

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

@@ -1,16 +1,16 @@
 import type { PaywallData } from "../../data/entities";
-import { type VariableDictionary } from "../../utils/variable-utils";
 import type { ColorMode } from "../../types";
+import { type VariableDictionary } from "../../utils/variable-utils";
 interface Props {
     paywallData: PaywallData;
+    selectedLocale?: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
+    preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string) => void;
     onBackClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
-    selectedLocale?: string;
-    variablesPerPackage?: Record<string, VariableDictionary>;
-    preferredColorMode?: ColorMode;
     onError?: (error: unknown) => void;
 }
 declare const Paywall: import("svelte").Component<Props, {}, "">;

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

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

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

@@ -15,10 +15,10 @@ export function getBackgroundStyles({ background, colorMode, }) {
     return stringifyStyles(prefixedStyles);
 }
 export function getBackgroundImageSource(paywallData, colorMode) {
-    if (paywallData.components_config.base?.background?.type !== "image")
+    const { background } = paywallData.components_config.base;
+    if (background?.type !== "image") {
         return "";
-    const backgroundObject = paywallData.components_config.base
-        .background;
-    return (backgroundObject.value[colorMode]?.original ||
-        backgroundObject.value[DEFAULT_COLOR_MODE]?.original);
+    }
+    const { value } = background;
+    return value[colorMode]?.original ?? value[DEFAULT_COLOR_MODE]?.original;
 }

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

@@ -1,19 +1,25 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import PurchaseButton from "./PurchaseButton.svelte";
-  import type { PurchaseState } from "../../data/state";
-  import type { DimensionType } from "../../types";
-  import type { SupportedActions } from "../../data/entities";
-  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  const onAction = (action: SupportedActions) => {
-    alert(action.type);
-  };
+  const defaultLocale = "en_US";
+  const text_lid = "6gpcQ4q6T8";
 
   const { Story } = defineMeta({
     title: "Components/PurchaseButton",
     component: PurchaseButton,
     tags: ["autodocs"],
+    decorators: [
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            [text_lid]: "Continue",
+          },
+        },
+      }),
+    ],
     argTypes: {
       stack: {
         control: { type: "object" },
@@ -27,17 +33,6 @@
       },
     },
   });
-
-  export const labelsData = {
-    en_US: {
-      "6gpcQ4q6T8": "Continue",
-    },
-  };
-  const purchaseState: PurchaseState = {
-    colorMode: DEFAULT_COLOR_MODE,
-    locale: "en_US",
-    defaultLocale: "en_US",
-  };
 </script>
 
 <!-- Default button -->
@@ -46,18 +41,24 @@
   args={{
     id: "mjaE9fOv5z",
     name: "Purchase_button",
-    purchaseState,
     stack: {
-      purchaseState,
       background_color: {
         light: {
           type: "hex",
           value: "#a229f3",
         },
       },
+      background: {
+        type: "color",
+        value: {
+          light: {
+            type: "hex",
+            value: "#a229f3",
+          },
+        },
+      },
       components: [
         {
-          purchaseState,
           background_color: null,
           color: {
             light: {
@@ -65,8 +66,6 @@
               value: "#ffffff",
             },
           },
-          labels: labelsData,
-          components: [],
           font_name: null,
           font_size: "heading_m",
           font_weight: "extra_bold",
@@ -95,15 +94,15 @@
               value: null,
             },
           },
-          text_lid: "6gpcQ4q6T8",
+          text_lid,
           type: "text",
         },
       ],
       dimension: {
-        alignment: "top",
-        distribution: "space_between",
         type: "vertical",
-      } as DimensionType,
+        alignment: "center",
+        distribution: "center",
+      },
       id: "pbvAUBvilP",
       margin: {
         bottom: 16,
@@ -118,6 +117,8 @@
         top: 16,
         trailing: 16,
       },
+      border: null,
+      shadow: null,
       shape: {
         corners: {
           bottom_leading: 8,
@@ -137,10 +138,7 @@
       },
       spacing: 8,
       type: "stack",
-      labels: labelsData,
     },
-    labels: labelsData,
     type: "purchase_button",
-    onAction,
   }}
 />

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

@@ -1,9 +1,4 @@
 import PurchaseButton from "./PurchaseButton.svelte";
-export declare const labelsData: {
-    en_US: {
-        "6gpcQ4q6T8": 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;