@revenuecat/purchases-ui-js 0.0.17 → 0.0.19

package/dist/types.d.ts

@@ -104,10 +104,11 @@ type HorizontalAlignment = {
     alignment: "leading" | "center" | "trailing";
     distribution?: Distribution;
 };
-type ZAlignment = {
+export type AlignmentType = "top_leading" | "top" | "top_trailing" | "leading" | "center" | "trailing" | "bottom_leading" | "bottom" | "bottom_trailing";
+export type ZAlignment = {
     type: "zlayer";
-    alignment: "top_leading" | "top" | "top_trailing" | "leading" | "center" | "trailing" | "bottom_leading" | "bottom" | "bottom_trailing";
-    distribution: never;
+    alignment: AlignmentType;
+    distribution?: never;
 };
 type Distribution = "space_between" | "space_around" | "space_evenly" | "start" | "center" | "end";
 export type ShadowType = {

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

@@ -1,6 +1,18 @@
-import type { ComponentLocalizations, ComponentState, ImageMaskShapeType, PaywallData, TextNodeProps } from "../data/entities.js";
-import { type VariableDictionary } from "./variable-utils.js";
+import type { ComponentState, ImageMaskShapeType, PaywallData, TextNodeProps } from "../data/entities.js";
 import { type BorderType, type ColorMode, type ColorType, type CornerRadiusType, type DimensionType, FontSizeTags, type ShadowType, type ShapeType, type SizeType, type Spacing } from "../types.js";
+type MarginVariables = {
+    "--margin-block-start": string;
+    "--margin-inline-end": string;
+    "--margin-block-end": string;
+    "--margin-inline-start": string;
+};
+type PaddingVariables = {
+    "--padding-block-start": string;
+    "--padding-inline-end": string;
+    "--padding-block-end": string;
+    "--padding-inline-start": string;
+};
+type SpacingStyleVariables = MarginVariables | PaddingVariables;
 export type TextComponentTags = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 /**
  * Maps font size to appropriate HTML heading tag
@@ -25,50 +37,52 @@ export declare function getColor({ colorMap, colorMode, fallback, }: {
  * @returns CSS border style string
  */
 export declare function getBorderStyle(border?: BorderType, colorMode?: ColorMode): string;
+type CornerRadiusStyleVariables = {
+    "--border-start-start-radius": string;
+    "--border-start-end-radius": string;
+    "--border-end-start-radius": string;
+    "--border-end-end-radius": string;
+};
 /**
  * Generates CSS border radius style for corners
  * @param corners - Corner radius configuration
  * @returns CSS border radius string
  */
-export declare function getCornerRadiusStyle(corners: CornerRadiusType): string;
+export declare function getCornerRadiusStyle(corners: CornerRadiusType): CornerRadiusStyleVariables;
+type ComponentStyleVariables = {
+    "--background": string;
+    "--text-color": string;
+    "--border": string;
+    "--shadow": string;
+} & CornerRadiusStyleVariables & SpacingStyleVariables;
 /**
  * Generates comprehensive component styles including spacing, colors, borders and shadows
  * @param params - Component style configuration object
  * @returns CSS style object with component styles
  */
-export declare function getComponentStyles({ backgroundColor, border, margin, padding, textColor, colorMode, shape, shadow, }: {
+export declare function getComponentStyles({ background_color, border, margin, padding, color, colorMode, shape, shadow, }: {
     padding?: Spacing;
     margin?: Spacing;
-    backgroundColor?: ColorType;
-    textColor?: ColorType;
+    background_color?: ColorType;
+    color?: ColorType;
     border?: BorderType;
     colorMode?: ColorMode;
     shape?: ShapeType;
     shadow?: ShadowType;
-}): {
-    "--margin-block-start": string;
-    "--margin-inline-end": string;
-    "--margin-block-end": string;
-    "--margin-inline-start": string;
-    "--padding-block-start": string;
-    "--padding-inline-end": string;
-    "--padding-block-end": string;
-    "--padding-inline-start": string;
-    "--background": string;
-    "--text-color": string;
-    "--border": string;
-    "--border-radius": string;
-    "--shadow": string;
+}): ComponentStyleVariables;
+type SizeStyleVariables = {
+    "--width": string;
+    "--height": string;
+    "--flex": string;
 };
 /**
  * Generates size-related CSS styles for components
  * @param size - Size configuration object
  * @returns CSS style object with size properties
  */
-export declare function getSizeStyle(size: SizeType, isZStack?: boolean): {
-    "--width": string;
-    "--height": string;
-    "--flex": string;
+export declare function getSizeStyle(size: SizeType): SizeStyleVariables;
+type GradientStyleVariables = {
+    "--background": string;
 };
 /**
  * Generates gradient background styles
@@ -76,24 +90,26 @@ export declare function getSizeStyle(size: SizeType, isZStack?: boolean): {
  * @param gradientColors - Array of colors for gradient
  * @returns CSS style object with gradient background
  */
-export declare function getGradientStyle(colorMode: ColorMode, gradientColors?: ColorType[]): {
-    "--background": string;
+export declare function getGradientStyle(colorMode: ColorMode, gradientColors?: ColorType[]): GradientStyleVariables;
+type MaskStyleVariables = {
+    "--border-start-start-radius": string;
+    "--border-start-end-radius": string;
+    "--border-end-start-radius": string;
+    "--border-end-end-radius": string;
+    "--clip-path": string;
 };
 /**
  * Generates mask styles for images
  * @param maskShape - Shape configuration for image mask
  * @returns CSS style object with mask properties
  */
-export declare const getMaskStyle: (maskShape?: ImageMaskShapeType) => {
-    "--corner-radius": string;
-    "--clip-path": string;
+export declare const getMaskStyle: (maskShape?: ImageMaskShapeType) => MaskStyleVariables;
+type InsetStyleVariables = {
+    "--inset": string;
+    "--transform": string;
 };
-/**
- * Generates dimension-related styles for stack components
- * @param dimension - Dimension configuration object
- * @returns CSS style object with flex layout properties
- */
-export declare function getDimensionStyle(dimension: DimensionType): {
+export declare function getInsetStyles(dimension: DimensionType): InsetStyleVariables;
+type DimensionVariableType = {
     "--direction": string;
     "--alignment": string;
     "--distribution": string;
@@ -101,49 +117,42 @@ export declare function getDimensionStyle(dimension: DimensionType): {
     "--inset": string;
     "--transform": string;
 };
+/**
+ * Generates dimension-related styles for stack components
+ * @param dimension - Dimension configuration object
+ * @returns CSS style object with flex layout properties
+ */
+export declare function getDimensionStyle(dimension: DimensionType): DimensionVariableType;
+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, colorMode?: ColorMode): Record<string, unknown>;
+export declare function getTextStyles(props: TextNodeProps, colorMode?: ColorMode): TextStyleVariables;
 /**
  * Converts a style object to a CSS string
  * @param styles - Object containing CSS properties and values
  * @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;
-/**
- * Gets a label by ID and replaces any variables in it with values from the dictionary
- * @param text_lid - The ID of the text label to retrieve
- * @param purchaseState - Object containing locale and defaultLocale
- * @param labels - ComponentLocalizations containing the labels
- * @param variableDictionary - Dictionary of variables to replace in the label text
- * @returns The label with variables replaced, or undefined if label not found
- */
-export declare function getLabelAndReplaceVariables({ text_lid, locale, defaultLocale, labels, variableDictionary, }: {
-    text_lid?: string;
-    locale: string;
-    defaultLocale: string;
-    labels: ComponentLocalizations;
-    variableDictionary?: VariableDictionary;
-}): 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;
-export declare const getActiveStateProps: <T>(overrides?: Record<string, T>, componentState?: ComponentState) => T;
+export declare const getActiveStateProps: <T>(overrides?: {
+    states?: Record<string, T>;
+}, componentState?: ComponentState) => T;
+export declare function prefixObject(object?: Record<string, string | number>, prefix?: string): Record<string, string | number>;
+export {};

package/dist/utils/style-utils.js

@@ -1,4 +1,3 @@
-import { replaceVariables, } from "./variable-utils.js";
 import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, TextAlignments, } from "../types.js";
 /**
  * Generates CSS spacing styles for margin or padding
@@ -7,14 +6,21 @@ import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, S
  * @returns CSS style object with logical properties for spacing
  */
 function getSpacingStyle(spacing, spacingKey) {
+    const styles = {
+        [`--${spacingKey}-block-start`]: "0px",
+        [`--${spacingKey}-inline-end`]: "0px",
+        [`--${spacingKey}-block-end`]: "0px",
+        [`--${spacingKey}-inline-start`]: "0px",
+    };
     if (!spacing || !spacingKey)
-        return "";
-    return {
+        return styles;
+    Object.assign(styles, {
         [`--${spacingKey}-block-start`]: `${spacing.top ?? 0}px`,
         [`--${spacingKey}-inline-end`]: `${spacing.trailing ?? 0}px`,
         [`--${spacingKey}-block-end`]: `${spacing.bottom ?? 0}px`,
         [`--${spacingKey}-inline-start`]: `${spacing.leading ?? 0}px`,
-    };
+    });
+    return styles;
 }
 /**
  * Maps font size to appropriate HTML heading tag
@@ -70,14 +76,19 @@ export function getBorderStyle(border, colorMode = "light") {
  * @returns CSS border radius string
  */
 export function getCornerRadiusStyle(corners) {
-    return `${corners.top_leading}px ${corners.top_trailing}px ${corners.bottom_trailing}px ${corners.bottom_leading}px`;
+    return {
+        "--border-start-start-radius": `${corners.top_leading}px`,
+        "--border-start-end-radius": `${corners.top_trailing}px`,
+        "--border-end-start-radius": `${corners.bottom_leading}px`,
+        "--border-end-end-radius": `${corners.bottom_trailing}px`,
+    };
 }
 /**
  * Generates comprehensive component styles including spacing, colors, borders and shadows
  * @param params - Component style configuration object
  * @returns CSS style object with component styles
  */
-export function getComponentStyles({ backgroundColor, border, margin, padding, textColor, colorMode = "light", shape, shadow, }) {
+export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = "light", shape, shadow, }) {
     const stylesObject = {
         "--margin-block-start": "0px",
         "--margin-inline-end": "0px",
@@ -87,10 +98,13 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
         "--padding-inline-end": "0px",
         "--padding-block-end": "0px",
         "--padding-inline-start": "0px",
-        "--background": "transparent",
-        "--text-color": "#000000",
+        "--background": "initial",
+        "--text-color": "initial",
         "--border": "none",
-        "--border-radius": "0px",
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
         "--shadow": "none",
     };
     if (padding) {
@@ -99,16 +113,16 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
     if (margin) {
         Object.assign(stylesObject, getSpacingStyle(margin, "margin"));
     }
-    if (backgroundColor) {
+    if (background_color) {
         stylesObject["--background"] = getColor({
-            colorMap: backgroundColor,
+            colorMap: background_color,
             colorMode,
             fallback: "transparent",
         });
     }
-    if (textColor) {
+    if (color) {
         stylesObject["--text-color"] = getColor({
-            colorMap: textColor,
+            colorMap: color,
             colorMode,
             fallback: "#000000",
         });
@@ -117,10 +131,15 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
         stylesObject["--border"] = getBorderStyle(border, colorMode);
     }
     if (shape?.type === "rectangle" && shape.corners) {
-        stylesObject["--border-radius"] = getCornerRadiusStyle(shape.corners);
+        Object.assign(stylesObject, getCornerRadiusStyle(shape.corners));
     }
     if (shape?.type === "pill") {
-        stylesObject["--border-radius"] = "9999px";
+        Object.assign(stylesObject, getCornerRadiusStyle({
+            bottom_leading: 9999,
+            bottom_trailing: 9999,
+            top_leading: 9999,
+            top_trailing: 9999,
+        }));
     }
     if (shadow) {
         stylesObject["--shadow"] = `${shadow.x}px ${shadow.y}px ${shadow.radius}px 
@@ -128,34 +147,40 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
     }
     return stylesObject;
 }
+function getSizeValue(size) {
+    if (size.type === "fixed") {
+        return `${size.value}px`;
+    }
+    if (size.type === "fit") {
+        return "fit-content";
+    }
+    if (size.type === "fill") {
+        const userAgent = navigator.userAgent;
+        const isFirefox = userAgent.match(/firefox|fxios/i);
+        return isFirefox ? "-moz-available" : "-webkit-fill-available";
+    }
+    return "initial";
+}
 /**
  * Generates size-related CSS styles for components
  * @param size - Size configuration object
  * @returns CSS style object with size properties
  */
-export function getSizeStyle(size, isZStack = false) {
-    function getSizeValue(size) {
-        if (size.type === "fixed") {
-            return `${size.value}px`;
-        }
-        if (size.type === "fit" || isZStack) {
-            return "fit-content";
-        }
-        if (size.type === "fill") {
-            const userAgent = navigator.userAgent;
-            const isFirefox = userAgent.match(/firefox|fxios/i);
-            return isFirefox ? "-moz-available" : "-webkit-fill-available";
-        }
-        return "unset";
-    }
+export function getSizeStyle(size) {
+    const styles = {
+        "--width": "initial",
+        "--height": "initial",
+        "--flex": "initial",
+    };
     const width = getSizeValue(size.width);
     const height = getSizeValue(size.height);
     const isGrow = size.width.type === "fill" || size.height.type === "fill";
-    return {
+    Object.assign(styles, {
         "--width": width,
         "--height": height,
-        "--flex": isGrow ? "unset" : "0 1 auto",
-    };
+        "--flex": isGrow ? "initial" : "0 1 auto",
+    });
+    return styles;
 }
 /**
  * Generates gradient background styles
@@ -177,26 +202,40 @@ export function getGradientStyle(colorMode, gradientColors) {
  */
 export const getMaskStyle = (maskShape) => {
     const maskStyles = {
-        "--corner-radius": "0px",
+        "--border-end-start-radius": "0px",
+        "--border-end-end-radius": "0px",
+        "--border-start-start-radius": "0px",
+        "--border-start-end-radius": "0px",
         "--clip-path": "none",
     };
     if (maskShape?.type === "circle") {
-        maskStyles["--corner-radius"] = "50%";
+        Object.assign(maskStyles, {
+            "--border-end-start-radius": "50%",
+            "--border-end-end-radius": "50%",
+            "--border-start-start-radius": "50%",
+            "--border-start-end-radius": "50%",
+        });
     }
     if (maskShape?.type === "rectangle" && maskShape.corners) {
-        maskStyles["--corner-radius"] = getCornerRadiusStyle(maskShape.corners);
+        Object.assign(maskStyles, getCornerRadiusStyle(maskShape.corners));
     }
     // TODO: rework this implementation
     if (maskShape?.type === "convex") {
-        maskStyles["--corner-radius"] = "0 0 50% 50%;";
+        Object.assign(maskStyles, {
+            "--border-start-start-radius": "0%",
+            "--border-start-end-radius": "0%",
+            "--border-end-start-radius": "50%",
+            "--border-end-end-radius": "50%",
+        });
     }
     if (maskShape?.type === "concave") {
-        maskStyles["--clip-path"] =
-            "polygon(0 0, 100% 0, 100% 100%, 50% 110%, 0 100%);";
+        Object.assign(maskStyles, {
+            "--clip-path": "polygon(0 0, 100% 0, 100% 100%, 50% 110%, 0 100%);",
+        });
     }
     return maskStyles;
 };
-function getInsetStyles(dimension) {
+export function getInsetStyles(dimension) {
     const defaultStyles = {
         "--inset": "initial",
         "--transform": "initial",
@@ -206,7 +245,7 @@ function getInsetStyles(dimension) {
             defaultStyles["--inset"] = "0 auto auto 0";
             break;
         case "top":
-            defaultStyles["--inset"] = "0 50%";
+            defaultStyles["--inset"] = "auto auto auto 50%";
             defaultStyles["--transform"] = "translate(-50%, 0)";
             break;
         case "top_trailing":
@@ -217,7 +256,7 @@ function getInsetStyles(dimension) {
             defaultStyles["--transform"] = "translate(0, -50%)";
             break;
         case "center":
-            defaultStyles["--inset"] = "50% 50% 50% 50%";
+            defaultStyles["--inset"] = "50% auto auto 50%";
             defaultStyles["--transform"] = "translate(-50%, -50%)";
             break;
         case "trailing":
@@ -228,8 +267,8 @@ function getInsetStyles(dimension) {
             defaultStyles["--inset"] = "auto auto 0 0";
             break;
         case "bottom":
-            defaultStyles["--inset"] = "auto 50% 0 50%";
-            defaultStyles["--transform"] = "translate(-50%, 0)";
+            defaultStyles["--inset"] = "auto 50% 0 auto";
+            defaultStyles["--transform"] = "translate(50%, 0)";
             break;
         case "bottom_trailing":
             defaultStyles["--inset"] = "auto 0 0 auto";
@@ -248,19 +287,18 @@ export function getDimensionStyle(dimension) {
         "--alignment": "initial",
         "--distribution": "initial",
         "--position": "relative",
-        "--inset": "unset",
-        "--transform": "unset",
+        "--inset": "initial",
+        "--transform": "initial",
     };
-    if (dimension.type === "zlayer") {
-        styles["--position"] = "absolute";
-        const insetStyles = getInsetStyles(dimension);
-        Object.assign(styles, insetStyles);
-    }
-    else {
-        styles["--direction"] = StackDirection[dimension.type];
-        styles["--alignment"] = StackAlignment[dimension.alignment];
+    if (dimension.type !== "zlayer") {
+        Object.assign(styles, {
+            "--direction": StackDirection[dimension.type],
+            "--alignment": StackAlignment[dimension.alignment],
+        });
         if (dimension.distribution) {
-            styles["--distribution"] = StackDistribution[dimension.distribution];
+            Object.assign(styles, {
+                "--distribution": StackDistribution[dimension.distribution],
+            });
         }
     }
     return styles;
@@ -275,22 +313,26 @@ export function getTextStyles(props, colorMode = "light") {
     const { font_size, horizontal_alignment, font_weight, font_name, color } = props;
     const styles = {
         "--text-align": "initial",
-        "--font-weight": 400,
+        "--font-weight": "initial",
         "--font-size": "initial",
         "--font-family": "sans-serif",
-        "--background-clip": "initial",
-        "--text-fill-color": "initial",
+        "--background-clip": "none",
+        "--text-fill-color": "none",
+        "--background": "unset",
     };
-    styles["--text-align"] =
-        TextAlignments[horizontal_alignment] || TextAlignments.leading;
-    styles["--font-weight"] = FontWeights[font_weight] || FontWeights.regular;
-    styles["--font-size"] = FontSizes[font_size] || FontSizes.body_m;
-    styles["--font-family"] = font_name || "sans-serif";
+    Object.assign(styles, {
+        "--text-align": TextAlignments[horizontal_alignment] || TextAlignments.leading,
+        "--font-weight": FontWeights[font_weight] || FontWeights.regular,
+        "--font-size": FontSizes[font_size] || FontSizes.body_m,
+        "--font-family": font_name || "sans-serif",
+    });
     if (color &&
         (color[colorMode]?.type === "linear" || color[colorMode]?.type === "radial")) {
-        styles["--background-clip"] = "text";
-        styles["--text-fill-color"] = "transparent";
-        styles["--background"] = getColor({ colorMap: color, colorMode });
+        Object.assign(styles, {
+            "--background-clip": "text",
+            "--text-fill-color": "transparent",
+            "--background": getColor({ colorMap: color, colorMode }),
+        });
     }
     return styles;
 }
@@ -304,41 +346,6 @@ 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];
-}
-/**
- * Gets a label by ID and replaces any variables in it with values from the dictionary
- * @param text_lid - The ID of the text label to retrieve
- * @param purchaseState - Object containing locale and defaultLocale
- * @param labels - ComponentLocalizations containing the labels
- * @param variableDictionary - Dictionary of variables to replace in the label text
- * @returns The label with variables replaced, or undefined if label not found
- */
-export function getLabelAndReplaceVariables({ text_lid, locale, defaultLocale, labels, variableDictionary, }) {
-    if (!text_lid)
-        return "";
-    const label = getLabelById(text_lid, locale, defaultLocale, labels);
-    const parsedLabel = replaceVariables({
-        value: label,
-        variableDictionary,
-    });
-    return parsedLabel;
-}
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * @param paywallData
@@ -378,7 +385,7 @@ export const getActiveStateProps = (overrides, componentState) => {
     const activeStateKeys = getComponentActiveStateKeys(componentState);
     const activeStateProps = activeStateKeys.reduce((props, key) => {
         if (overrides) {
-            const styles = overrides[key] || {};
+            const styles = overrides?.states?.[key] || {};
             return { ...props, ...styles };
         }
         return props;
@@ -395,3 +402,14 @@ const getComponentActiveStateKeys = (componentState) => {
     }, []);
     return stateKeys;
 };
+export function prefixObject(object, prefix) {
+    if (!object)
+        return {};
+    if (!prefix)
+        return object;
+    return Object.entries(object).reduce((acc, [key, value]) => {
+        const replacedKey = key.replace(/^--/, `${prefix}-`);
+        acc[`--${replacedKey}`] = value;
+        return acc;
+    }, {});
+}

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

@@ -1,3 +1,4 @@
+import type { ComponentLocalizations } from "../data/entities";
 export declare const VARIABLE_NAMES: string[];
 export type VariableDictionary = {
     product_name: string | number | undefined;
@@ -31,3 +32,29 @@ export type ReplaceVariablesProps = {
  * @returns The string with values: "Try CatGPT Annual for only $59.99/yr ($4.99/mo)"
  */
 export declare const replaceVariables: ({ value, variableDictionary: dictionary, }: ReplaceVariablesProps) => string | undefined;
+/**
+ * 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 | null | undefined, locale: string, fallbackLocale: string, labels: ComponentLocalizations): string | undefined;
+/**
+ * Gets a label by ID and replaces any variables in it with values from the dictionary
+ * @param text_lid - The ID of the text label to retrieve
+ * @param purchaseState - Object containing locale and defaultLocale
+ * @param labels - ComponentLocalizations containing the labels
+ * @param variableDictionary - Dictionary of variables to replace in the label text
+ * @returns The label with variables replaced, or undefined if label not found
+ */
+export declare function getLabelAndReplaceVariables({ text_lid, locale, defaultLocale, labels, variableDictionary, }: {
+    text_lid?: string;
+    locale: string;
+    defaultLocale: string;
+    labels: ComponentLocalizations;
+    variableDictionary?: VariableDictionary;
+}): string | undefined;

package/dist/utils/variable-utils.js

@@ -32,3 +32,40 @@ export const replaceVariables = ({ value = "", variableDictionary: dictionary, }
         return currentVariableReplaced;
     }, value);
 };
+/**
+ * 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) {
+    if (!label_id)
+        return "";
+    const fallback = labels[fallbackLocale]?.[label_id];
+    if (!(labels[locale] || {})[label_id]) {
+        return fallback;
+    }
+    return labels[locale][label_id];
+}
+/**
+ * Gets a label by ID and replaces any variables in it with values from the dictionary
+ * @param text_lid - The ID of the text label to retrieve
+ * @param purchaseState - Object containing locale and defaultLocale
+ * @param labels - ComponentLocalizations containing the labels
+ * @param variableDictionary - Dictionary of variables to replace in the label text
+ * @returns The label with variables replaced, or undefined if label not found
+ */
+export function getLabelAndReplaceVariables({ text_lid, locale, defaultLocale, labels, variableDictionary, }) {
+    if (!text_lid)
+        return "";
+    const label = getLabelById(text_lid, locale, defaultLocale, labels);
+    const parsedLabel = replaceVariables({
+        value: label,
+        variableDictionary,
+    });
+    return parsedLabel;
+}