@revenuecat/purchases-ui-js 0.0.12 → 0.0.14

package/dist/types.d.ts

@@ -1,7 +1,13 @@
 export type ColorMode = "light" | "dark";
+export type ColorStop = {
+    color: string;
+    percent: number;
+};
 type Color = {
-    type: "hex" | "alias";
-    value: string;
+    type: "hex" | "alias" | "linear" | "radial";
+    value?: string;
+    degrees?: number;
+    points?: ColorStop[];
 };
 export type ColorType = {
     dark?: Color;

package/dist/{utils.d.ts → utils/style-utils.d.ts}

@@ -1,5 +1,5 @@
-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";
+import type { ComponentLocalizations, ImageMaskShapeType, PaywallData, TextNodeProps } 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
@@ -7,6 +7,16 @@ export type TextComponentTags = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  * @returns Corresponding HTML heading tag
  */
 export declare function getTextComponentTag(fontSize: keyof typeof FontSizeTags): TextComponentTags;
+/**
+ * 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?: ColorType;
+    colorMode?: ColorMode;
+    fallback?: string;
+}): string;
 /**
  * Generates comprehensive component styles including spacing, colors, borders and shadows
  * @param params - Component style configuration object
@@ -30,7 +40,7 @@ export declare function getComponentStyles({ backgroundColor, border, margin, pa
     "--padding-inline-end": string;
     "--padding-block-end": string;
     "--padding-inline-start": string;
-    "--background-color": string;
+    "--background": string;
     "--text-color": string;
     "--border": string;
     "--border-radius": string;
@@ -79,7 +89,7 @@ export declare function getDimensionStyle(dimension: DimensionType): {
  * @param props - Text component properties
  * @returns CSS style object with text formatting properties
  */
-export declare function getTextStyles(props: TextProps): {
+export declare function getTextStyles(props: TextNodeProps): {
     "--text-align": string;
     "--font-weight": number;
     "--font-size": string;

package/dist/{utils.js → utils/style-utils.js}

@@ -1,4 +1,4 @@
-import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, } 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
@@ -28,8 +28,28 @@ export function getTextComponentTag(fontSize) {
  * @param params - Object containing color map, mode and fallback color
  * @returns Color value as string
  */
-function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }) {
-    return colorMap?.[colorMode]?.value || fallback;
+export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }) {
+    const color = colorMap?.[colorMode];
+    if (!color) {
+        return fallback;
+    }
+    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})`;
+    }
+    return fallback;
 }
 /**
  * Generates CSS border style string
@@ -64,7 +84,7 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
         "--padding-inline-end": "0px",
         "--padding-block-end": "0px",
         "--padding-inline-start": "0px",
-        "--background-color": "transparent",
+        "--background": "transparent",
         "--text-color": "#000000",
         "--border": "none",
         "--border-radius": "0px",
@@ -77,7 +97,7 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
         Object.assign(stylesObject, getSpacingStyle(margin, "margin"));
     }
     if (backgroundColor) {
-        stylesObject["--background-color"] = getColor({
+        stylesObject["--background"] = getColor({
             colorMap: backgroundColor,
             colorMode,
             fallback: "transparent",
@@ -97,11 +117,11 @@ export function getComponentStyles({ backgroundColor, border, margin, padding, t
         stylesObject["--border-radius"] = getCornerRadiusStyle(shape.corners);
     }
     if (shape?.type === "pill") {
-        stylesObject["--border-radius"] = "9999px;";
+        stylesObject["--border-radius"] = "9999px";
     }
     if (shadow) {
         stylesObject["--shadow"] = `${shadow.x}px ${shadow.y}px ${shadow.radius}px 
-      ${getColor({ colorMap: shadow.color, colorMode, fallback: "#000000" })};`;
+      ${getColor({ colorMap: shadow.color, colorMode, fallback: "#000000" })}`;
     }
     return stylesObject;
 }
@@ -119,6 +139,7 @@ export function getSizeStyle(size) {
             return "fit-content";
         }
         if (size.type === "fill") {
+            // return "100%";
             const userAgent = navigator.userAgent;
             const isFirefox = userAgent.match(/firefox|fxios/i);
             return isFirefox ? "-moz-available" : "-webkit-fill-available";
@@ -142,7 +163,7 @@ export function getSizeStyle(size) {
  */
 export function getGradientStyle(colorMode, gradientColors) {
     if (!gradientColors)
-        return { "--background": "unset" };
+        return { "--background": "none" };
     return {
         "--background": `linear-gradient(${gradientColors.map((color) => color[colorMode]?.value).join(", ")})`,
     };
@@ -180,9 +201,9 @@ export const getMaskStyle = (maskShape) => {
  */
 export function getDimensionStyle(dimension) {
     const styles = {
-        "--direction": "row",
-        "--alignment": "unset",
-        "--distribution": "unset",
+        "--direction": "initial",
+        "--alignment": "initial",
+        "--distribution": "initial",
     };
     if (dimension.type === "zlayer") {
         // TODO: Review with Monetization team
@@ -222,7 +243,7 @@ export function getTextStyles(props) {
  */
 export function stringifyStyles(styles) {
     return Object.entries(styles)
-        .map(([key, value]) => `${key}: ${value};`)
+        .map(([key, value]) => `${key}: ${value}`)
         .join("; ");
 }
 /**

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

@@ -0,0 +1,33 @@
+export declare const VARIABLE_NAMES: string[];
+export type VariableDictionary = {
+    product_name: string | number | undefined;
+    price: string | number | undefined;
+    price_per_period: string | number | undefined;
+    price_per_period_full: string | number | undefined;
+    total_price_and_per_month: string | number | undefined;
+    total_price_and_per_month_full: string | number | undefined;
+    sub_price_per_month: string | number | undefined;
+    sub_price_per_week: string | number | undefined;
+    sub_duration: string | number | undefined;
+    sub_duration_in_months: string | number | undefined;
+    sub_period: string | number | undefined;
+    sub_period_length: string | number | undefined;
+    sub_period_abbreviated: string | number | undefined;
+    sub_offer_duration: string | number | undefined;
+    sub_offer_duration_2: string | number | undefined;
+    sub_offer_price: string | number | undefined;
+    sub_offer_price_2: string | number | undefined;
+    sub_relative_discount: string | number | undefined;
+    [key: string]: string | number | undefined;
+};
+export type ReplaceVariablesProps = {
+    value?: string;
+    variableDictionary?: VariableDictionary;
+};
+/**
+ * Returns a string with the variables replaced by values from the dictionary
+ * @param value A string like "Try {{ product_name }} for only {{ total_price_and_per_month }}"
+ * @param dictionary Dictionary containing the values for the variables
+ * @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;

package/dist/utils/variable-utils.js

@@ -0,0 +1,34 @@
+export const VARIABLE_NAMES = [
+    "product_name",
+    "price",
+    "price_per_period",
+    "price_per_period_full",
+    "total_price_and_per_month",
+    "total_price_and_per_month_full",
+    "sub_price_per_month",
+    "sub_price_per_week",
+    "sub_duration",
+    "sub_duration_in_months",
+    "sub_period",
+    "sub_period_length",
+    "sub_period_abbreviated",
+    "sub_offer_duration",
+    "sub_offer_duration_2",
+    "sub_offer_price",
+    "sub_offer_price_2",
+    "sub_relative_discount",
+];
+/**
+ * Returns a string with the variables replaced by values from the dictionary
+ * @param value A string like "Try {{ product_name }} for only {{ total_price_and_per_month }}"
+ * @param dictionary Dictionary containing the values for the variables
+ * @returns The string with values: "Try CatGPT Annual for only $59.99/yr ($4.99/mo)"
+ */
+export const replaceVariables = ({ value = "", variableDictionary: dictionary, }) => {
+    if (!dictionary)
+        return value;
+    return VARIABLE_NAMES.reduce((result, variableName) => {
+        const currentVariableReplaced = result.replaceAll(`{{ ${variableName} }}`, dictionary[variableName]?.toString() || "N/A");
+        return currentVariableReplaced;
+    }, value);
+};

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.12",
+  "version": "0.0.14",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -35,7 +35,8 @@
     "prepare": "husky",
     "chromatic": "chromatic",
     "format": "prettier --write .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
   },
   "files": [
     "dist",