@revenuecat/purchases-ui-js 0.0.12 → 0.0.13

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
@@ -79,7 +79,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
@@ -97,11 +97,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 +119,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";
@@ -180,9 +181,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 +223,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,13 @@
+export declare const VARIABLE_NAMES: string[];
+export type VariableDictionary = Record<string, string | number | undefined>;
+export type ReplaceVariablesProps = {
+    value?: string;
+    dictionary?: 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, 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 = "", 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.13",
   "author": {
     "name": "RevenueCat, Inc."
   },