@revenuecat/purchases-ui-js 2.0.6 → 2.1.0

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

@@ -75,6 +75,7 @@
             id2: "Navigate back",
             id3: "Navigate to",
             id4: "URL navigation",
+            id5: "Workflow Action",
           },
         },
       }),
@@ -166,3 +167,22 @@
     },
   }}
 />
+
+<Story
+  name="Workflow Action"
+  args={{
+    action: {
+      type: "workflow",
+    },
+    triggers: {
+      on_press: "workflow-action-id",
+    },
+    stack: {
+      ...stackProps(5),
+      background_color: {
+        dark: { type: "hex", value: "#9C27B0" },
+        light: { type: "hex", value: "#9C27B0" },
+      },
+    },
+  }}
+/>

package/dist/components/button/ButtonNode.svelte

@@ -17,10 +17,16 @@
 
   const { onButtonAction } = getPaywallContext();
 
-  const onclick = () => onButtonAction(props.action);
+  const onclick = () => {
+    const actionId = props.triggers?.on_press;
+    onButtonAction(props.action, actionId);
+  };
 
   const visible = $derived.by(() => {
     switch (action.type) {
+      case "workflow":
+        return true;
+      case "restore_purchases":
       case "navigate_back":
         return false;
       case "navigate_to":

package/dist/components/paywall/Paywall.svelte

@@ -33,6 +33,7 @@
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
+    onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
   }
 
@@ -46,6 +47,7 @@
     onVisitCustomerCenterClicked,
     onRestorePurchasesClicked,
     onNavigateToUrlClicked,
+    onActionTriggered,
     onError,
     uiConfig,
   }: Props = $props();
@@ -76,8 +78,13 @@
 
   let sheet = $state<SheetProps>();
 
-  const onButtonAction = (action: Action) => {
+  const onButtonAction = (action: Action, actionId?: string) => {
     switch (action.type) {
+      case "workflow":
+        if (actionId) {
+          onActionTriggered?.(actionId);
+        }
+        return;
       case "navigate_back":
         onBackClicked?.();
         return;

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

@@ -13,6 +13,7 @@ interface Props {
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
+    onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
 }
 declare const Paywall: import("svelte").Component<Props, {}, "">;

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

@@ -6,6 +6,7 @@
   import type { VariableDictionary } from "../../types/variables";
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { VARIABLES } from "../paywall/fixtures/variables";
+  import { DEFAULT_SPACING } from "../../utils/constants";
 
   /*
    * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
@@ -32,6 +33,8 @@
         width: { type: "fill" },
         height: { type: "fill" },
       },
+      padding: DEFAULT_SPACING,
+      margin: DEFAULT_SPACING,
     },
     parameters: {
       localizations: {
@@ -88,6 +91,109 @@
   }}
 />
 
+<Story
+  name="Linear gradeint"
+  decorators={[
+    localizationDecorator({
+      defaultLocale,
+      localizations: { [defaultLocale]: { [text_lid]: "Linear gradient" } },
+    }),
+  ]}
+  args={{
+    color: {
+      light: {
+        degrees: 90,
+        points: [
+          {
+            color: "#e81c0fFF",
+            percent: 0,
+          },
+          {
+            color: "#0029ffff",
+            percent: 100,
+          },
+        ],
+        type: "linear",
+      },
+    },
+    background_color: {
+      light: {
+        degrees: 90,
+        points: [
+          {
+            color: "#ffffffff",
+            percent: 0,
+          },
+          {
+            color: "#000000ff",
+            percent: 100,
+          },
+        ],
+        type: "linear",
+      },
+    },
+    font_size: 48,
+    font_weight: "regular",
+    font_weight_int: 400,
+    horizontal_alignment: "leading",
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+  }}
+/>
+
+<Story
+  name="Radial gradient"
+  decorators={[
+    localizationDecorator({
+      defaultLocale,
+      localizations: { [defaultLocale]: { [text_lid]: "Radial gradient" } },
+    }),
+  ]}
+  args={{
+    color: {
+      light: {
+        points: [
+          {
+            color: "#3bf60cff",
+            percent: 23,
+          },
+          {
+            color: "#e40fe8ff",
+            percent: 100,
+          },
+        ],
+        type: "radial",
+      },
+    },
+    background_color: {
+      light: {
+        degrees: 90,
+        points: [
+          {
+            color: "#ffffffff",
+            percent: 0,
+          },
+          {
+            color: "#000000ff",
+            percent: 100,
+          },
+        ],
+        type: "linear",
+      },
+    },
+    font_size: 48,
+    font_weight: "regular",
+    font_weight_int: 400,
+    horizontal_alignment: "leading",
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+  }}
+/>
+
 <Story
   name="With Spacing"
   args={{

package/dist/components/text/TextNode.svelte

@@ -7,6 +7,7 @@
   import Text from "./Text.svelte";
   import { getColorModeContext } from "../../stores/color-mode";
   import { getLocalizationContext } from "../../stores/localization";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
   import { getVariablesContext } from "../../stores/variables";
   import type { TextNodeProps } from "../../types/components/text";
@@ -26,8 +27,9 @@
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
-  const { tagToRender, textStyles } = $derived(
-    getTextComponentStyles(colorMode, actualProps),
+  const { uiConfig } = getPaywallContext();
+  let textStyles = $derived(
+    getTextComponentStyles(colorMode, actualProps, uiConfig.app.fonts),
   );
 
   const wrapperStyles = $derived(
@@ -49,7 +51,7 @@
 </script>
 
 <span style={wrapperStyles}>
-  <Text style={textStyles} component={tagToRender}>
+  <Text style={textStyles} component="span">
     {@html markdownParsed}
   </Text>
 </span>

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

@@ -1,15 +1,15 @@
-import type { ColorMode, SizeType } from "../../types";
+import { type ColorMode, type SizeType } from "../../types";
 import type { ColorGradientScheme, ColorScheme } from "../../types/colors";
 import type { TextNodeProps } from "../../types/components/text";
+import type { AppFontsConfig } from "../../types/ui-config";
+import { type CSS } from "../../utils/base-utils";
 export declare const defaultColor: ColorScheme;
+export declare function mapTextColor(colorMode: ColorMode, scheme: ColorGradientScheme): CSS;
 /**
  * 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 inline styles and the appropriate HTML tag to render
  */
-export declare const getTextComponentStyles: (colorMode: ColorMode, props: TextNodeProps) => {
-    textStyles: string;
-    tagToRender: string;
-};
+export declare const getTextComponentStyles: (colorMode: ColorMode, props: TextNodeProps, fonts: AppFontsConfig) => string;
 export declare function getTextWrapperInlineStyles(colorMode: ColorMode, _restProps: Partial<TextNodeProps>, size: SizeType, background_color?: ColorGradientScheme | null): string;
 export declare function getHtmlFromMarkdown(text?: string): string;

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

@@ -1,38 +1,53 @@
+import { FontSizes, FontWeights, TextAlignments, } from "../../types";
 import { mapBackground } from "../../utils/background-utils";
-import { css, mapColor, mapSize, mapSpacing } from "../../utils/base-utils";
+import { css, mapColorInfo, mapColorMode, mapSize, mapSpacing, } from "../../utils/base-utils";
 import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
-import { getTextStyles } from "../../utils/style-utils";
+import { getScopedFontFamily, isFontRCFMManaged } from "../../utils/font-utils";
 export const defaultColor = {
     light: { type: "hex", value: DEFAULT_TEXT_COLOR },
 };
+export function mapTextColor(colorMode, scheme) {
+    const info = mapColorMode(colorMode, scheme);
+    const color = mapColorInfo(info);
+    switch (info.type) {
+        case "alias":
+        case "hex":
+            return { color };
+        case "linear":
+        case "radial":
+            return {
+                color: "transparent",
+                background: color,
+                "-webkit-background-clip": "text",
+                "background-clip": "text",
+            };
+    }
+}
 /**
  * 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 inline styles and the appropriate HTML tag to render
  */
-export const getTextComponentStyles = (colorMode, props) => {
-    const { color = defaultColor, background_color, padding, margin, size, } = props;
-    const textStyles = getTextStyles(props);
-    const style = css({
+export const getTextComponentStyles = (colorMode, props, fonts) => {
+    const { font_name, font_size, font_weight, font_weight_int, horizontal_alignment, color = defaultColor, padding, margin, size, } = props;
+    const font = fonts[font_name ?? ""];
+    const fontFamily = font?.web?.family;
+    return css({
         display: "block",
         width: mapSize(size.width),
         height: mapSize(size.height),
         margin: mapSpacing(margin),
         padding: mapSpacing(padding),
-        ...mapBackground(colorMode, background_color, null),
-        color: mapColor(colorMode, color),
-        "text-align": textStyles["--text-align"] || "initial",
-        "font-weight": textStyles["--font-weight"] || "initial",
-        "font-size": textStyles["--font-size"] || "initial",
-        "font-family": textStyles["--font-family"] || "sans-serif",
-        "-webkit-background-clip": textStyles["--background-clip"] || "initial",
-        "background-clip": textStyles["--background-clip"] || "initial",
-        "-webkit-text-fill-color": textStyles["--text-fill-color"] || "initial",
+        ...mapTextColor(colorMode, color),
+        "text-align": TextAlignments[horizontal_alignment] || TextAlignments.leading,
+        "font-weight": font_weight_int ?? FontWeights[font_weight] ?? FontWeights.regular,
+        "font-size": Number.isInteger(Number(font_size))
+            ? `${font_size}px`
+            : FontSizes[font_size] || FontSizes.body_m,
+        "font-family": isFontRCFMManaged(font_name ?? "")
+            ? getScopedFontFamily(fontFamily ?? "")
+            : "sans-serif",
     });
-    return {
-        textStyles: style,
-        tagToRender: "span",
-    };
 };
 export function getTextWrapperInlineStyles(colorMode, _restProps, size, background_color) {
     return css({

package/dist/components/timeline/TimelineItem.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { getTimelineItemContentInlineStyles } from "./timeline-utils";
-  import type { TimelineItemProps } from "../../types/components/timeline";
   import { getColorModeContext } from "../../stores/color-mode";
-  import { getColor, getActiveStateProps } from "../../utils/style-utils";
   import { getSelectedStateContext } from "../../stores/selected";
+  import type { TimelineItemProps } from "../../types/components/timeline";
+  import { css, mapColor } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
   import Icon from "../icon/Icon.svelte";
-  import { css } from "../../utils/base-utils";
   import TextNode from "../text/TextNode.svelte";
 
   interface Props extends TimelineItemProps {
@@ -64,11 +64,7 @@
   const connectorBarStyles = $derived.by(() => {
     if (!connector) return "";
 
-    const background = getColor({
-      colorMap: connector.color,
-      colorMode,
-      fallback: "#000000",
-    });
+    const background = mapColor(colorMode, connector.color);
 
     return css({
       width: "100%",

package/dist/stores/paywall.d.ts

@@ -6,7 +6,7 @@ type PaywallContext = Readonly<{
     selectedPackageId: Writable<string | undefined>;
     variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
     onPurchase: () => void;
-    onButtonAction: (action: Action) => void;
+    onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;
 }>;
 export declare function setPaywallContext(context: PaywallContext): void;

package/dist/stories/paywall-decorator.js

@@ -17,7 +17,7 @@ export function paywallDecorator() {
             selectedPackageId,
             variablesPerPackage: readable(undefined),
             onPurchase: () => window.alert("Purchase clicked"),
-            onButtonAction: (action) => window.alert(`Button clicked: ${JSON.stringify(action, undefined, 2)}`),
+            onButtonAction: (action, actionId) => window.alert(`Button clicked: ${JSON.stringify({ action, actionId }, undefined, 2)}`),
             uiConfig: emptyUiConfig,
         });
         return Story();

package/dist/types/base.d.ts

@@ -4,4 +4,5 @@ export interface BaseComponent {
     id: string;
     name: string;
     fallback?: Component;
+    triggers?: Record<string, string>;
 }

package/dist/types/components/button.d.ts

@@ -2,6 +2,9 @@ import type { BaseComponent } from "../base";
 import type { Overrides } from "../overrides";
 import type { SheetProps } from "./sheet";
 import type { StackProps } from "./stack";
+interface WorkflowAction {
+    type: "workflow";
+}
 interface RestorePurchasesAction {
     type: "restore_purchases";
 }
@@ -31,12 +34,15 @@ interface NavigateToUrlAction {
         method: "deep_link" | "external_browser" | "in_app_browser";
     };
 }
-export type Action = RestorePurchasesAction | NavigateBackAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction;
+export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction;
 export interface ButtonProps extends BaseComponent {
     type: "button";
     action: Action;
     stack: StackProps;
     transition?: null;
+    triggers?: {
+        on_press?: string;
+    };
     overrides?: Overrides<ButtonProps>;
 }
 export {};

package/dist/types/components/text.d.ts

@@ -1,6 +1,6 @@
 import type { FontSizes, FontWeights, SizeType, Spacing, TextAlignments } from "..";
 import type { BaseComponent } from "../base";
-import type { ColorGradientScheme, ColorScheme } from "../colors";
+import type { ColorGradientScheme } from "../colors";
 import type { Overrides } from "../overrides";
 export interface TextNodeProps extends BaseComponent {
     text_lid: string;
@@ -9,7 +9,7 @@ export interface TextNodeProps extends BaseComponent {
     font_weight: keyof typeof FontWeights;
     font_weight_int?: number;
     horizontal_alignment: keyof typeof TextAlignments;
-    color: ColorScheme;
+    color: ColorGradientScheme;
     background_color?: ColorGradientScheme | null;
     type: "text";
     visible?: boolean | null;

package/dist/types/ui-config.d.ts

@@ -7,7 +7,7 @@ type AppFontFamilyConfig = {
     url: string;
     weight: number;
 };
-type AppFontsConfig = Record<string, {
+export type AppFontsConfig = Record<string, {
     ios?: AppFontFamilyConfig;
     android?: AppFontFamilyConfig;
     web?: AppFontFamilyConfig;

package/dist/utils/base-utils.d.ts

@@ -1,5 +1,5 @@
 import type { BorderType, CircleShape, ColorMode, ConcaveShape, ConvexShape, PillShape, RectangleShape, ShadowType, Size, Spacing } from "../types";
-import type { ColorGradientScheme, ColorScheme } from "../types/colors";
+import type { ColorGradientInfo, ColorGradientScheme, ColorScheme } from "../types/colors";
 import type { FitMode } from "../types/media";
 export type CSS = Record<string, string | number>;
 export declare function css(props: CSS): string;
@@ -10,6 +10,7 @@ export declare function mapColorMode<T>(colorMode: ColorMode, value: {
 }): T;
 export declare function mapSize(size: Size): string;
 export declare function mapSpacing(spacing?: Spacing | null): string;
+export declare function mapColorInfo(info: ColorGradientInfo): string;
 export declare function mapColor(colorMode: ColorMode, scheme: ColorScheme | ColorGradientScheme | null | undefined): string;
 export declare function mapOverlay(colorMode: ColorMode, colorOverlay: ColorGradientScheme | null | undefined): string;
 export declare function mapBorder(colorMode: ColorMode, border: BorderType | null | undefined): string;

package/dist/utils/base-utils.js

@@ -37,7 +37,7 @@ export function mapSpacing(spacing) {
     const { top, bottom, leading, trailing } = spacing ?? DEFAULT_SPACING;
     return mapTuple(top, trailing, bottom, leading);
 }
-function mapColorInfo(info) {
+export function mapColorInfo(info) {
     if (info.type === "alias" || info.type === "hex") {
         return info.value;
     }

package/dist/utils/style-utils.d.ts

@@ -1,35 +1,6 @@
-import type { ColorGradientScheme } from "../types/colors.js";
 import type { Component } from "../types/component.js";
-import type { TextNodeProps } from "../types/components/text";
 import type { Overrides } from "../types/overrides.js";
 import type { RootPaywall } from "../types/paywall.js";
-import { type ColorMode } from "../types.js";
-/**
- * Gets color value based on color mode with fallback
- * @param params - Object containing color map, mode and fallback color
- * @returns Color value as string
- */
-export declare function getColor({ colorMap, colorMode, fallback, }: {
-    colorMap?: ColorGradientScheme | null;
-    colorMode?: ColorMode;
-    fallback?: string;
-}): string;
-type TextStyleVariables = {
-    "--text-align": string;
-    "--font-weight": number | string;
-    "--font-size": string;
-    "--font-family": string;
-    "--background-clip": string;
-    "--text-fill-color": string;
-    "--background": string;
-};
-/**
- * Generates text-related styles
- * @param props - Text component properties
- * @param colorMode - The currently selected ColorMode (dark/light)
- * @returns CSS style object with text formatting properties
- */
-export declare function getTextStyles(props: TextNodeProps): TextStyleVariables;
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData
@@ -37,4 +8,3 @@ export declare function getTextStyles(props: TextNodeProps): TextStyleVariables;
  */
 export declare function findSelectedPackageId({ stack, sticky_footer, }: RootPaywall): string | undefined;
 export declare const getActiveStateProps: <T extends Component>(selectedState: boolean, overrides?: Overrides<T>) => Partial<T>;
-export {};

package/dist/utils/style-utils.js

@@ -1,69 +1,3 @@
-import { getPaywallContext } from "../stores/paywall.js";
-import { DEFAULT_COLOR_MODE } from "./constants.js";
-import { FontSizes, FontWeights, TextAlignments, } from "../types.js";
-import { getScopedFontFamily, isFontRCFMManaged } from "./font-utils.js";
-/**
- * Gets color value based on color mode with fallback
- * @param params - Object containing color map, mode and fallback color
- * @returns Color value as string
- */
-export function getColor({ colorMap, colorMode = DEFAULT_COLOR_MODE, fallback = "FFFFFF", }) {
-    if (!colorMap)
-        return fallback;
-    const color = colorMap[colorMode] || colorMap[DEFAULT_COLOR_MODE];
-    let colorPoints = "";
-    switch (color?.type) {
-        case "hex":
-        case "alias":
-            return color.value ?? fallback;
-        case "linear":
-            colorPoints = (color.points || [])
-                .map((point) => `${point.color} ${point.percent}%`)
-                .join(", ");
-            return `linear-gradient(${color.degrees}deg, ${colorPoints})`;
-        case "radial":
-            colorPoints = (color.points || [])
-                .map((point) => `${point.color} ${point.percent}%`)
-                .join(", ");
-            return `radial-gradient(${colorPoints})`;
-        default:
-            return fallback;
-    }
-}
-/**
- * Generates text-related styles
- * @param props - Text component properties
- * @param colorMode - The currently selected ColorMode (dark/light)
- * @returns CSS style object with text formatting properties
- */
-export function getTextStyles(props) {
-    const { font_size, horizontal_alignment, font_weight, font_name, font_weight_int, } = props;
-    const paywall = getPaywallContext();
-    const uiConfig = paywall.uiConfig;
-    const { fonts } = uiConfig.app;
-    const font = fonts[font_name ?? ""];
-    const fontFamily = font?.web?.family;
-    const styles = {
-        "--text-align": "initial",
-        "--font-weight": "initial",
-        "--font-size": "initial",
-        "--font-family": "sans-serif",
-        "--background-clip": "none",
-        "--text-fill-color": "none",
-        "--background": "unset",
-    };
-    Object.assign(styles, {
-        "--text-align": TextAlignments[horizontal_alignment] || TextAlignments.leading,
-        "--font-weight": font_weight_int ?? FontWeights[font_weight] ?? FontWeights.regular,
-        "--font-size": Number.isInteger(Number(font_size))
-            ? `${font_size}px`
-            : FontSizes[font_size] || FontSizes.body_m,
-        "--font-family": isFontRCFMManaged(font_name ?? "")
-            ? getScopedFontFamily(fontFamily ?? "")
-            : "sans-serif",
-    });
-    return styles;
-}
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData

package/package.json

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