@revenuecat/purchases-ui-js 2.0.6 → 2.1.1

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/package/Package.stories.svelte

@@ -2,7 +2,6 @@
   import Package from "./Package.svelte";
   import { componentDecorator } from "../../stories/component-decorator";
   import { localizationDecorator } from "../../stories/localization-decorator";
-  import type { PackageProps } from "../../types/components/package";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";

package/dist/components/package/Package.svelte

@@ -8,10 +8,15 @@
   } from "../../stores/variables";
   import type { PackageProps } from "../../types/components/package";
   import { derived } from "svelte/store";
+  import {
+    getPackageInfoContext,
+    setPackageInfoContext,
+  } from "../../stores/packageInfo";
 
   const { stack, package_id }: PackageProps = $props();
 
-  const { selectedPackageId, variablesPerPackage } = getPaywallContext();
+  const { selectedPackageId, variablesPerPackage, infoPerPackage } =
+    getPaywallContext();
 
   setSelectedStateContext(
     derived(selectedPackageId, (value) => value === package_id),
@@ -27,6 +32,13 @@
     (fallback) => $variablesPerPackage?.[package_id] ?? fallback,
   );
   setVariablesContext(variables);
+
+  const fallbackPackageInfo = getPackageInfoContext();
+  const packageInfo = derived(
+    fallbackPackageInfo,
+    (fallback) => $infoPerPackage?.[package_id] ?? fallback,
+  );
+  setPackageInfoContext(packageInfo);
 </script>
 
 <Stack {...stack} onclick={onPackageClick} />

package/dist/components/paywall/Paywall.svelte

@@ -12,7 +12,7 @@
   import type { SheetProps } from "../../types/components/sheet";
   import type { PaywallData } from "../../types/paywall";
   import type { UIConfig } from "../../types/ui-config";
-  import type { VariableDictionary } from "../../types/variables";
+  import type { PackageInfo, VariableDictionary } from "../../types/variables";
   import { mapBackground } from "../../utils/background-utils";
   import { css } from "../../utils/base-utils";
   import { registerFonts } from "../../utils/font-utils";
@@ -21,11 +21,16 @@
   import { derived, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
   import Sheet from "./Sheet.svelte";
+  import {
+    type PackageInfoStore,
+    setPackageInfoContext,
+  } from "../../stores/packageInfo";
 
   interface Props {
     paywallData: PaywallData;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    infoPerPackage?: Record<string, PackageInfo>;
     uiConfig: UIConfig;
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string) => void;
@@ -33,6 +38,7 @@
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
+    onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
   }
 
@@ -40,12 +46,14 @@
     paywallData,
     selectedLocale,
     variablesPerPackage = {},
+    infoPerPackage = {},
     preferredColorMode,
     onPurchaseClicked,
     onBackClicked,
     onVisitCustomerCenterClicked,
     onRestorePurchasesClicked,
     onNavigateToUrlClicked,
+    onActionTriggered,
     onError,
     uiConfig,
   }: Props = $props();
@@ -76,8 +84,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;
@@ -111,6 +124,7 @@
   setPaywallContext({
     selectedPackageId,
     variablesPerPackage: readable(variablesPerPackage),
+    infoPerPackage: readable(infoPerPackage),
     onPurchase,
     onButtonAction,
     uiConfig,
@@ -123,6 +137,13 @@
 
   setVariablesContext(variables);
 
+  const packageInfo: PackageInfoStore = derived(
+    selectedPackageId,
+    (packageId) => infoPerPackage[packageId || ""],
+  );
+
+  setPackageInfoContext(packageInfo);
+
   const style = $derived(
     css({
       ...mapBackground(colorMode, null, base.background),
@@ -185,10 +206,12 @@
       padding: 0;
       font-family: sans-serif;
     }
+
     body {
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
     }
+
     img,
     picture,
     video,
@@ -204,6 +227,7 @@
     select {
       font: inherit;
     }
+
     p,
     h1,
     h2,

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

@@ -1,11 +1,12 @@
 import type { ColorMode } from "../../types";
 import type { PaywallData } from "../../types/paywall";
 import type { UIConfig } from "../../types/ui-config";
-import type { VariableDictionary } from "../../types/variables";
+import type { PackageInfo, VariableDictionary } from "../../types/variables";
 interface Props {
     paywallData: PaywallData;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    infoPerPackage?: Record<string, PackageInfo>;
     uiConfig: UIConfig;
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string) => void;
@@ -13,6 +14,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

@@ -3,9 +3,10 @@
   import { localizationDecorator } from "../../stories/localization-decorator";
   import { variablesDecorator } from "../../stories/variables-decorator";
   import type { Localizations } from "../../types/localization";
-  import type { VariableDictionary } from "../../types/variables";
+  import type { PackageInfo, 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: {
@@ -49,6 +52,18 @@
     "product.price": "$39.99",
     "product.price_per_period": "$39.99/yr",
   } satisfies VariableDictionary;
+
+  const mockPackageInfoWithIntroOffer: PackageInfo = {
+    hasIntroOffer: true,
+  };
+
+  const mockPackageInfoWithTrial: PackageInfo = {
+    hasTrial: true,
+  };
+</script>
+
+<script>
+  import { packageInfoDecorator } from "../../stories/packageInfo-decorator";
 </script>
 
 <Story name="Default" args={{ name: "hello world!" }} />
@@ -88,6 +103,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={{
@@ -140,3 +258,35 @@
     } satisfies Localizations,
   }}
 />
+
+<Story
+  name="With overrides for Intro Offers"
+  args={{
+    font_weight: "regular",
+    horizontal_alignment: "leading",
+    padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
+    margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
+    name: "hello world!",
+    overrides: [
+      {
+        conditions: [{ type: "intro_offer" }],
+        properties: { text_lid: "override_text_lid" },
+      },
+    ],
+    text_lid,
+  }}
+  decorators={[
+    variablesDecorator(mockVariableDictionary),
+    packageInfoDecorator(mockPackageInfoWithIntroOffer),
+  ]}
+  parameters={{
+    localizations: {
+      [defaultLocale]: {
+        [text_lid]:
+          "This is a text with variables: {{ product.store_product_name }} for {{ product.price }} per {{ product.price_per_period }} and a missing variable: {{ sub_period_abbreviated }}",
+        override_text_lid:
+          "This text is shown only when an intro offer is defined for the current package.",
+      },
+    } satisfies Localizations,
+  }}
+/>

package/dist/components/text/TextNode.svelte

@@ -7,27 +7,38 @@
   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";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    getActiveStateProps,
+    getIntroOfferStateProps,
+  } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
+  import { getPackageInfoContext } from "../../stores/packageInfo";
 
   const props: TextNodeProps = $props();
 
   const selectedState = getSelectedStateContext();
+  const packageInfo = getPackageInfoContext();
   const actualProps = $derived.by(() => {
     return {
       ...props,
       ...getActiveStateProps($selectedState, props.overrides),
+      ...getIntroOfferStateProps(
+        !!$packageInfo?.hasIntroOffer,
+        props.overrides,
+      ),
     };
   });
 
   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 +60,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/index.d.ts

@@ -11,6 +11,6 @@ export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";
 export { type UIConfig } from "./types/ui-config";
-export { type VariableDictionary } from "./types/variables";
+export { type VariableDictionary, type PackageInfo, } from "./types/variables";
 export * from "./ui/globals";
 export { default as Button } from "./ui/molecules/button.svelte";

package/dist/stores/packageInfo.d.ts

@@ -0,0 +1,5 @@
+import type { PackageInfo } from "../types/variables";
+import { type Readable } from "svelte/store";
+export type PackageInfoStore = Readable<PackageInfo | undefined>;
+export declare function setPackageInfoContext(variables: PackageInfoStore): void;
+export declare function getPackageInfoContext(): PackageInfoStore;

package/dist/stores/packageInfo.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from "svelte";
+import {} from "svelte/store";
+const key = Symbol("packageInfo");
+export function setPackageInfoContext(variables) {
+    setContext(key, variables);
+}
+export function getPackageInfoContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("PackageInfo context not found");
+    }
+    return context;
+}

package/dist/stores/paywall.d.ts

@@ -1,12 +1,13 @@
 import type { Action } from "../types/components/button";
 import type { UIConfig } from "../types/ui-config";
-import type { VariableDictionary } from "../types/variables";
+import type { PackageInfo, VariableDictionary } from "../types/variables";
 import { type Readable, type Writable } from "svelte/store";
 type PaywallContext = Readonly<{
     selectedPackageId: Writable<string | undefined>;
     variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
+    infoPerPackage: Readable<Record<string, PackageInfo> | 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/packageInfo-decorator.d.ts

@@ -0,0 +1,3 @@
+import type { PackageInfo } from "../types/variables";
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function packageInfoDecorator<TRenderer extends Renderer, TArgs>(packageInfo?: PackageInfo): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/packageInfo-decorator.js

@@ -0,0 +1,9 @@
+import { readable } from "svelte/store";
+import { setPackageInfoContext } from "../stores/packageInfo";
+export function packageInfoDecorator(packageInfo) {
+    const store = readable(packageInfo);
+    return (Story) => {
+        setPackageInfoContext(store);
+        return Story();
+    };
+}

package/dist/stories/paywall-decorator.js

@@ -16,8 +16,9 @@ export function paywallDecorator() {
         setPaywallContext({
             selectedPackageId,
             variablesPerPackage: readable(undefined),
+            infoPerPackage: 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>;
 }