@revenuecat/purchases-ui-js 0.0.10 → 0.0.12

package/dist/components/button/ButtonNode.stories.svelte

@@ -44,6 +44,11 @@
     },
   });
 
+  const purchaseState = {
+    locale: "en_US",
+    defaultLocale: "en_US",
+  };
+
   export const labelsData = {
     en_US: {
       id1: "Restore purchases",
@@ -53,7 +58,7 @@
     },
   };
 
-  const textProps = (id: number): TextProps => ({
+  const textProps = (id: number) => ({
     type: "text",
     name: "Button Text",
     components: [],
@@ -114,6 +119,7 @@
       ...baseStackProps,
       components: [textProps(1)],
     },
+    purchaseState: purchaseState,
     onAction,
   }}
 />
@@ -143,6 +149,7 @@
       },
       components: [textProps(2)],
     },
+    purchaseState: purchaseState,
   }}
 />
 
@@ -174,6 +181,7 @@
       },
       components: [textProps(3)],
     },
+    purchaseState: purchaseState,
   }}
 />
 
@@ -200,5 +208,6 @@
       },
       components: [textProps(4)],
     },
+    purchaseState: purchaseState,
   }}
 />

package/dist/components/footer/Footer.stories.svelte

@@ -3,12 +3,18 @@
   import Footer from "./Footer.svelte";
   import { colorModeStoryMeta } from "../../stories/meta-templates";
 
+  const purchaseState = {
+    locale: "en_US",
+    defaultLocale: "en_US",
+  };
+
   const { Story } = defineMeta({
     title: "Components/Footer",
     component: Footer,
     tags: ["autodocs"],
     argTypes: {
       colorMode: colorModeStoryMeta,
+
       stack: {
         control: { type: "object" },
         description: "Stack configuration for package content",
@@ -38,7 +44,9 @@
     is_selected_by_default: false,
     name: "Package - Monthly",
     package_id: "$rc_annual",
+    purchaseState: purchaseState,
     stack: {
+      purchaseState: purchaseState,
       background_color: {
         light: {
           type: "hex",

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

@@ -33,6 +33,10 @@
       QZ4ZmYsqjN: "$1.99",
     },
   };
+  const purchaseState = {
+    locale: "en_US",
+    defaultLocale: "en_US",
+  };
 </script>
 
 <!-- Default  -->
@@ -43,7 +47,9 @@
     is_selected_by_default: false,
     name: "Package - Monthly",
     package_id: "$rc_annual",
+    purchaseState,
     stack: {
+      purchaseState,
       background_color: {
         light: {
           type: "hex",

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

@@ -3,6 +3,7 @@
 
   import Paywall from "./Paywall.svelte";
   import { paywallData } from "../../stories/fixtures";
+  import { fn } from "@storybook/test";
 
   const { Story } = defineMeta({
     title: "Example/Paywall",
@@ -11,14 +12,28 @@
     argTypes: {},
     args: {},
   });
-
-  const onPurchaseClicked = (selectedPackageId: string) => {
-    alert(`Purchasing: ${selectedPackageId}`);
-  };
 </script>
 
 <!-- Default story -->
 <Story
   name="Primary"
-  args={{ data: paywallData, onPurchaseClicked: onPurchaseClicked }}
+  args={{
+    paywallData: paywallData,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Italian Missing Labels"
+  args={{
+    paywallData: paywallData,
+    selectedLocale: "it_IT",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
 />

package/dist/components/paywall/Paywall.svelte

@@ -1,36 +1,80 @@
 <script lang="ts">
   import type {
     Extra,
+    NavigateToAction,
     PaywallData,
     SupportedActions,
   } from "../../data/entities";
 
   import Node from "./Node.svelte";
   import type { PurchaseState } from "../../data/state";
+  import { findSelectedPackageId, getLabelById } from "../../utils";
 
   interface Props {
-    data: PaywallData;
-    onPurchaseClicked: (selectedPackageId: string) => void;
+    paywallData: PaywallData;
+    onPurchaseClicked?: (selectedPackageId: string) => void;
+    onBackClicked?: () => void;
+    onVisitCustomerCenterClicked?: () => void;
+    onRestorePurchasesClicked?: () => void;
+    onNavigateToUrlClicked?: (url: string) => void;
+    selectedLocale?: string;
   }
 
-  const findSelectedPackage = (data: PaywallData) => {
-    return undefined;
-  };
-  const { data, onPurchaseClicked }: Props = $props();
+  const {
+    paywallData,
+    onPurchaseClicked,
+    onRestorePurchasesClicked,
+    onNavigateToUrlClicked,
+    onBackClicked,
+    onVisitCustomerCenterClicked,
+    selectedLocale,
+  }: Props = $props();
 
   let purchaseState: PurchaseState = $state({
-    selectedPackageId: findSelectedPackage(data),
+    selectedPackageId: findSelectedPackageId(paywallData),
+    locale: selectedLocale || paywallData.default_locale,
+    defaultLocale: paywallData.default_locale,
   });
 
-  const onSelectPackageAction = (action: SupportedActions, data?: Extra) => {
+  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;
+    }
+
+    onNavigateToUrlClicked?.(localizedURL);
+  };
+
+  const onSelectPackageAction = (_: SupportedActions, data?: Extra) => {
     purchaseState.selectedPackageId = data?.packageId;
   };
 
-  const onPurchaseAction = (action: SupportedActions, data?: Extra) => {
+  const onPurchaseAction = (_: SupportedActions, _2?: Extra) => {
     if (purchaseState.selectedPackageId === undefined) {
       return;
     }
-    onPurchaseClicked(purchaseState.selectedPackageId);
+    onPurchaseClicked?.(purchaseState.selectedPackageId);
   };
 
   const onAction = (action: SupportedActions, data?: Extra) => {
@@ -38,12 +82,18 @@
       case "select_package":
         onSelectPackageAction(action, data);
         break;
+      case "navigate_to":
+        onNavigateToUrl(action, data);
+        break;
+      case "navigate_back":
+        onNavigateBackAction(action, data);
+        break;
+      case "restore_purchases":
+        onRestorePurchasesAction(action, data);
+        break;
       case "purchase":
         onPurchaseAction(action, data);
         break;
-      default:
-        alert(action.type);
-        break;
     }
   };
 </script>
@@ -51,8 +101,8 @@
 <div>
   <Node
     {onAction}
-    nodeData={data.components_config.base.stack}
-    labels={data.components_localizations}
+    nodeData={paywallData.components_config.base.stack}
+    labels={paywallData.components_localizations}
     {purchaseState}
   />
 </div>
@@ -64,16 +114,19 @@
   *::after {
     box-sizing: border-box;
   }
+
   /* 2. Remove default margin */
   * {
     margin: 0;
   }
+
   body {
     /* 3. Add accessible line-height */
     line-height: 1.5;
     /* 4. Improve text rendering */
     -webkit-font-smoothing: antialiased;
   }
+
   /* 5. Improve media defaults */
   img,
   picture,
@@ -83,6 +136,7 @@
     display: block;
     max-width: 100%;
   }
+
   /* 6. Inherit fonts for form controls */
   input,
   button,
@@ -90,6 +144,7 @@
   select {
     font: inherit;
   }
+
   /* 7. Avoid text overflows */
   p,
   h1,
@@ -100,10 +155,12 @@
   h6 {
     overflow-wrap: break-word;
   }
+
   /* 8. Improve line wrapping */
   p {
     text-wrap: pretty;
   }
+
   h1,
   h2,
   h3,
@@ -112,9 +169,10 @@
   h6 {
     text-wrap: balance;
   }
+
   /*
-    9. Create a root stacking context
-  */
+          9. Create a root stacking context
+        */
   #root,
   #__next {
     isolation: isolate;

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

@@ -1,6 +1,11 @@
 import type { PaywallData } from "../../data/entities";
 declare const Paywall: import("svelte").Component<{
-    data: PaywallData;
-    onPurchaseClicked: (selectedPackageId: string) => void;
+    paywallData: PaywallData;
+    onPurchaseClicked?: (selectedPackageId: string) => void;
+    onBackClicked?: () => void;
+    onVisitCustomerCenterClicked?: () => void;
+    onRestorePurchasesClicked?: () => void;
+    onNavigateToUrlClicked?: (url: string) => void;
+    selectedLocale?: string;
 }, {}, "">;
 export default Paywall;

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

@@ -27,6 +27,10 @@
       "6gpcQ4q6T8": "Continue",
     },
   };
+  const purchaseState = {
+    locale: "en_US",
+    defaultLocale: "en_US",
+  };
 </script>
 
 <!-- Default button -->
@@ -35,7 +39,9 @@
   args={{
     id: "mjaE9fOv5z",
     name: "Purchase_button",
+    purchaseState,
     stack: {
+      purchaseState,
       background_color: {
         light: {
           type: "hex",
@@ -45,6 +51,7 @@
       border: null,
       components: [
         {
+          purchaseState,
           background_color: null,
           color: {
             light: {

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

@@ -32,6 +32,11 @@
     },
   });
 
+  const purchaseState = {
+    locale: "en_US",
+    defaultLocale: "en_US",
+  };
+
   const components = [
     {
       type: "text",
@@ -48,6 +53,7 @@
         dark: { type: "alias", value: "transparent" },
         light: { type: "alias", value: "transparent" },
       },
+      purchaseState,
     },
     {
       type: "text",
@@ -64,6 +70,7 @@
         dark: { type: "alias", value: "transparent" },
         light: { type: "alias", value: "transparent" },
       },
+      purchaseState,
     },
     {
       type: "text",
@@ -80,6 +87,7 @@
         dark: { type: "alias", value: "transparent" },
         light: { type: "alias", value: "transparent" },
       },
+      purchaseState,
     },
   ];
 </script>
@@ -89,7 +97,7 @@
   name="Vertical Stack"
   args={{
     type: "stack",
-
+    purchaseState,
     size: { width: { type: "fill" }, height: { type: "fill" } },
     labels,
     dimension: {
@@ -111,6 +119,7 @@
   name="Horizontal Stack"
   args={{
     type: "stack",
+    purchaseState,
     dimension: {
       type: "horizontal",
       alignment: "center",
@@ -132,6 +141,7 @@
   name="Space Around"
   args={{
     type: "stack",
+    purchaseState,
     dimension: {
       type: "horizontal",
       alignment: "center",
@@ -153,6 +163,7 @@
   name="Background Colors"
   args={{
     type: "stack",
+    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -175,6 +186,7 @@
   name="Border Styles"
   args={{
     type: "stack",
+    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -210,6 +222,7 @@
   name="Rounded Corners"
   args={{
     type: "stack",
+    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -241,6 +254,7 @@
   name="Fixed Size"
   args={{
     type: "stack",
+    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -281,6 +295,7 @@
       distribution: "start",
     },
     components,
+    purchaseState,
     labels,
     border: {
       width: 2,

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

@@ -40,6 +40,10 @@
         width: { type: "fill" },
         height: { type: "fill" },
       },
+      purchaseState: {
+        locale: "en_US",
+        defaultLocale: "en_US",
+      },
     },
   });
 </script>

package/dist/components/text/Text.svelte

@@ -1,17 +1,30 @@
 <script lang="ts">
   import { getTextComponentStyles } from "./text-utils";
   import type { TextProps } from "../../data/entities";
-  import { stringifyStyles } from "../../utils";
+  import { getLabelById, stringifyStyles } from "../../utils";
 
-  const { id, labels, text_lid, ...restProps }: TextProps = $props();
+  const { id, labels, text_lid, purchaseState, ...restProps }: TextProps =
+    $props();
 
   const { tagToRender, textStyles } = $derived(
-    getTextComponentStyles({ id, labels, text_lid, ...restProps }),
+    getTextComponentStyles({
+      id,
+      labels,
+      text_lid,
+      purchaseState,
+      ...restProps,
+    }),
   );
   const stylesString = $derived(stringifyStyles(textStyles));
 
-  // TODO: drill down the selected locale.
-  const label = $derived(labels["en_US"][text_lid]);
+  const label = $derived(
+    getLabelById(
+      text_lid,
+      purchaseState.locale,
+      purchaseState.defaultLocale,
+      labels,
+    ),
+  );
 </script>
 
 <svelte:element this={tagToRender} {id} style={stylesString} class="text-block">

package/dist/data/entities.d.ts

@@ -1,4 +1,4 @@
-import type { BorderType, ColorMode, ColorType, CornerRadiusType, DimensionType, FitTypes, FontWeights, ShadowType, ShapeType, SizeType, Spacing, TextAlignment, FontSizeTags } from "../types";
+import type { BorderType, ColorMode, ColorType, CornerRadiusType, DimensionType, FitTypes, FontSizeTags, FontWeights, ShadowType, ShapeType, SizeType, Spacing, TextAlignment } from "../types";
 import type { PurchaseState } from "./state";
 export interface Extra {
     [key: string]: any;
@@ -34,12 +34,13 @@ export interface ComponentLocalizations extends Extra {
 export interface PaywallData extends Extra {
     components_config: ComponentConfig;
     components_localizations: ComponentLocalizations;
+    default_locale: string;
 }
 export interface ActionsProps {
     onAction?: (action: SupportedActions, data?: Extra) => void;
 }
 export interface PurchaseStateProps {
-    purchaseState?: PurchaseState;
+    purchaseState: PurchaseState;
 }
 interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseStateProps {
     labels: ComponentLocalizations;

package/dist/data/state.d.ts

@@ -1,3 +1,5 @@
 export interface PurchaseState {
     selectedPackageId?: string;
+    locale: string;
+    defaultLocale: string;
 }

package/dist/stories/fixtures.js

@@ -426,7 +426,7 @@ export const paywallData = {
                             {
                                 components: [],
                                 id: "lPNvA6W9st",
-                                is_selected_by_default: false,
+                                is_selected_by_default: true,
                                 name: "Package - Annual",
                                 package_id: "$rc_annual",
                                 stack: {
@@ -2222,6 +2222,12 @@ export const paywallData = {
             wxvc6e6xE3: "Switching phones? Restore a previously exported backup",
             zwOsIynvC9: "Annual",
         },
+        it_IT: {
+            "62QzV4Le26": "Genera un file a partire dalle tue abitudini",
+            dkKKOS047e: "Sblocca",
+            "BcX-6YwhoV": "Mensile",
+            Pu686q0Mya: "A vita",
+        },
     },
     config: {},
     created_at: "2024-11-07T04:36:37Z",

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import type { ImageMaskShapeType, TextProps } from "./data/entities.js";
-import { FontSizeTags, type BorderType, type ColorMode, type ColorType, type DimensionType, type ShadowType, type ShapeType, type SizeType, type Spacing } from "./types.js";
+import type { ComponentLocalizations, ImageMaskShapeType, PaywallData, TextProps } from "./data/entities.js";
+import { type BorderType, type ColorMode, type ColorType, type DimensionType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "./types.js";
 export type TextComponentTags = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 /**
  * Maps font size to appropriate HTML heading tag
@@ -91,3 +91,20 @@ export declare function getTextStyles(props: TextProps): {
  * @returns CSS string
  */
 export declare function stringifyStyles(styles: Record<string, string | number>): string;
+/**
+ * Given a ComponentLocalizations object and a locale returns the label with label_id in the chosen locale, if any. Falls
+ * back to the label with the same label_id in the fallbackLocale, if any. Finally returns undefined if no label can be
+ * found for the requested label_id.
+ * @param label_id - The id of the label to be returned
+ * @param locale - The preferred locale to return the label
+ * @param fallbackLocale - The locale to fall back to in case no label is found in the preferred one
+ * @param labels - A ComponentLocalizations instance
+ * @returns The label in the preferred or fallback locale, or undefined.
+ */
+export declare function getLabelById(label_id: string, locale: string, fallbackLocale: string, labels: ComponentLocalizations): string | undefined;
+/**
+ * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
+ * @param paywallData
+ * @returns the id of the first package marked as `is_selected_by_default` or undefined
+ */
+export declare function findSelectedPackageId(paywallData: PaywallData): string | undefined;

package/dist/utils.js

@@ -1,4 +1,4 @@
-import { FontSizes, FontWeights, StackAlignment, StackDirection, StackDistribution, FontSizeTags, } from "./types.js";
+import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, } from "./types.js";
 /**
  * Generates CSS spacing styles for margin or padding
  * @param spacing - The spacing object containing top, trailing, bottom, and leading values
@@ -225,3 +225,53 @@ export function stringifyStyles(styles) {
         .map(([key, value]) => `${key}: ${value};`)
         .join("; ");
 }
+/**
+ * Given a ComponentLocalizations object and a locale returns the label with label_id in the chosen locale, if any. Falls
+ * back to the label with the same label_id in the fallbackLocale, if any. Finally returns undefined if no label can be
+ * found for the requested label_id.
+ * @param label_id - The id of the label to be returned
+ * @param locale - The preferred locale to return the label
+ * @param fallbackLocale - The locale to fall back to in case no label is found in the preferred one
+ * @param labels - A ComponentLocalizations instance
+ * @returns The label in the preferred or fallback locale, or undefined.
+ */
+export function getLabelById(label_id, locale, fallbackLocale, labels) {
+    const fallback = (labels[fallbackLocale] || {})[label_id];
+    if (!(labels[locale] || {})[label_id]) {
+        return fallback;
+    }
+    return labels[locale][label_id];
+}
+/**
+ * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
+ * @param paywallData
+ * @returns the id of the first package marked as `is_selected_by_default` or undefined
+ */
+export function findSelectedPackageId(paywallData) {
+    const traverseNode = (node) => {
+        if (node.type === "package" &&
+            node.is_selected_by_default) {
+            return node;
+        }
+        if (node.components) {
+            for (let c of node.components) {
+                const pkg = traverseNode(c);
+                if (pkg) {
+                    return pkg;
+                }
+            }
+        }
+        if (node.stack !== undefined) {
+            const pkg = traverseNode(node.stack);
+            if (pkg) {
+                return pkg;
+            }
+        }
+        return undefined;
+    };
+    const p = traverseNode(paywallData.components_config.base.stack);
+    if (p === undefined) {
+        return undefined;
+    }
+    return p.package_id;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "0.0.10",
+  "version": "0.0.12",
   "author": {
     "name": "RevenueCat, Inc."
   },