@revenuecat/purchases-ui-js 2.0.6 → 2.1.1

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/types/variables.d.ts

@@ -10,4 +10,8 @@ export declare enum PackageIdentifier {
 type VariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name";
 export type VariableDictionary = Record<VariableName, string>;
 export type VariablesDictionary = Record<PackageIdentifier, VariableDictionary>;
+export interface PackageInfo {
+    hasIntroOffer?: boolean;
+    hasTrial?: boolean;
+}
 export {};

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,4 @@ 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 {};
+export declare const getIntroOfferStateProps: <T extends Component>(hasIntroOffer: boolean, overrides?: Overrides<T>) => Partial<T>;

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
@@ -109,3 +43,11 @@ export const getActiveStateProps = (selectedState, overrides) => {
     const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "selected"));
     return override?.properties ?? {};
 };
+export const getIntroOfferStateProps = (hasIntroOffer, overrides) => {
+    if (!hasIntroOffer) {
+        return {};
+    }
+    const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "intro_offer" ||
+        condition.type === "introductory_offer"));
+    return override?.properties ?? {};
+};