@revenuecat/purchases-ui-js 1.0.2 → 2.0.1

package/dist/components/paywall/Paywall.svelte

@@ -1,160 +1,133 @@
 <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 type { PurchaseState } from "../../data/state";
+  import { setColorModeContext } from "../../stores/color-mode";
+  import { setLocalizationContext } from "../../stores/localization";
+  import { setPaywallContext } from "../../stores/paywall";
+  import { setVariablesContext } 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, 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 onRestorePurchasesAction = (_: SupportedActions, _2?: Extra) => {
-    onRestorePurchasesClicked?.();
-  };
-
-  const onNavigateBackAction = (_: SupportedActions, _2?: Extra) => {
-    onBackClicked?.();
-  };
-
-  const onNavigateToUrl = (action: NavigateToAction, _?: Extra) => {
-    if (action.destination === "customer_center") {
-      onVisitCustomerCenterClicked?.();
-    }
-
-    if (!action.url) {
-      return;
-    }
-
-    const localizedURL = getLabelById(
-      action.url.url_lid,
-      purchaseState.locale,
-      purchaseState.defaultLocale,
-      paywallData.components_localizations,
-    );
-    if (!localizedURL) {
-      return;
-    }
+  let purchaseState = $state({
+    variablesPerPackage,
+  } satisfies PurchaseState);
 
-    onNavigateToUrlClicked?.(localizedURL);
-  };
+  const selectedPackageId = writable<string | undefined>(
+    findSelectedPackageId(paywallData),
+  );
 
-  const onSelectPackageAction = (_: SupportedActions, data?: Extra) => {
-    purchaseState.selectedPackageId = data?.packageId as string | undefined;
-    if (data?.packageId) {
-      variableDictionary = variablesPerPackage[data.packageId as string];
+  const onPurchase = () => {
+    const packageId = $selectedPackageId;
+    if (packageId !== undefined) {
+      onPurchaseClicked?.(packageId);
     }
   };
 
-  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, onPurchase, onButtonAction });
+
+  const variables = derived(
+    selectedPackageId,
+    (packageId) => variablesPerPackage[packageId || ""] as VariableDictionary,
+  );
+
+  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} {purchaseState} />
 
     {#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,29 @@
 <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 defaultLocale = "en_US";
+  const text_lid = "6gpcQ4q6T8";
 
-  const onAction = (action: SupportedActions) => {
-    alert(action.type);
-  };
+  const purchaseState: PurchaseState = {};
 
   const { Story } = defineMeta({
     title: "Components/PurchaseButton",
     component: PurchaseButton,
     tags: ["autodocs"],
+    decorators: [
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            [text_lid]: "Continue",
+          },
+        },
+      }),
+    ],
+    args: { purchaseState },
     argTypes: {
       stack: {
         control: { type: "object" },
@@ -27,17 +37,6 @@
       },
     },
   });
-
-  export const labelsData = {
-    en_US: {
-      "6gpcQ4q6T8": "Continue",
-    },
-  };
-  const purchaseState: PurchaseState = {
-    colorMode: DEFAULT_COLOR_MODE,
-    locale: "en_US",
-    defaultLocale: "en_US",
-  };
 </script>
 
 <!-- Default button -->
@@ -55,6 +54,15 @@
           value: "#a229f3",
         },
       },
+      background: {
+        type: "color",
+        value: {
+          light: {
+            type: "hex",
+            value: "#a229f3",
+          },
+        },
+      },
       components: [
         {
           purchaseState,
@@ -65,7 +73,6 @@
               value: "#ffffff",
             },
           },
-          labels: labelsData,
           components: [],
           font_name: null,
           font_size: "heading_m",
@@ -95,15 +102,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 +125,8 @@
         top: 16,
         trailing: 16,
       },
+      border: null,
+      shadow: null,
       shape: {
         corners: {
           bottom_leading: 8,
@@ -137,10 +146,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;

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

@@ -1,29 +1,25 @@
 <script lang="ts">
-  import type { PurchaseButtonProps } from "../../data/entities";
+  import { getPurchaseButtonStyles } from "./purchase-button-utils";
   import Stack from "../stack/Stack.svelte";
   import { ButtonDeprecated } from "../../index";
-  import { getPurchaseButtonStyles } from "./purchase-button-utils";
+  import { getPaywallContext } from "../../stores/paywall";
+  import type { PurchaseButtonProps } from "../../types/components/purchase-button";
 
   const {
     stack,
     labels,
-    onAction,
     purchaseState,
-    variableDictionary,
     zStackChildStyles,
     ...restProps
   }: PurchaseButtonProps = $props();
-  const handleClick = () => {
-    onAction && onAction({ type: "purchase" });
-  };
+
+  const { onPurchase } = getPaywallContext();
 
   const buttonStyles = $derived(
     getPurchaseButtonStyles({
       stack,
       labels,
-      onAction,
       purchaseState,
-      variableDictionary,
       zStackChildStyles,
       ...restProps,
     }),
@@ -31,11 +27,11 @@
 </script>
 
 <ButtonDeprecated
-  onclick={handleClick}
+  onclick={onPurchase}
   class="rc-pw-purchase-button"
   style={buttonStyles}
 >
-  <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
+  <Stack {...stack} {labels} {purchaseState} />
 </ButtonDeprecated>
 
 <style>

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

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

package/dist/components/purchase-button/purchase-button-utils.d.ts

@@ -1,2 +1,2 @@
-import type { PurchaseButtonProps } from "../../data/entities";
+import type { PurchaseButtonProps } from "../../types/components/purchase-button";
 export declare function getPurchaseButtonStyles({ stack, zStackChildStyles, }: PurchaseButtonProps): string;