@revenuecat/purchases-ui-js 2.0.0 → 2.0.2

package/dist/utils/style-utils.js

@@ -41,7 +41,7 @@ export function getColor({ colorMap, colorMode = DEFAULT_COLOR_MODE, fallback =
         return fallback;
     const color = colorMap[colorMode] || colorMap[DEFAULT_COLOR_MODE];
     let colorPoints = "";
-    switch (color.type) {
+    switch (color?.type) {
         case "hex":
         case "alias":
             return color.value ?? fallback;
@@ -257,8 +257,8 @@ export function getDimensionStyle(dimension) {
  * @param colorMode - The currently selected ColorMode (dark/light)
  * @returns CSS style object with text formatting properties
  */
-export function getTextStyles(props, colorMode = DEFAULT_COLOR_MODE) {
-    const { font_size, horizontal_alignment, font_weight, font_name, color } = props;
+export function getTextStyles(props) {
+    const { font_size, horizontal_alignment, font_weight, font_name } = props;
     const styles = {
         "--text-align": "initial",
         "--font-weight": "initial",
@@ -274,14 +274,6 @@ export function getTextStyles(props, colorMode = DEFAULT_COLOR_MODE) {
         "--font-size": FontSizes[font_size] || FontSizes.body_m,
         "--font-family": font_name || "sans-serif",
     });
-    if (color &&
-        (color[colorMode]?.type === "linear" || color[colorMode]?.type === "radial")) {
-        Object.assign(styles, {
-            "--background-clip": "text",
-            "--text-fill-color": "transparent",
-            "--background": getColor({ colorMap: color, colorMode }),
-        });
-    }
     return styles;
 }
 /**
@@ -301,31 +293,32 @@ export function stringifyStyles(styles) {
  */
 export function findSelectedPackageId(paywallData) {
     const traverseNode = (node) => {
-        if (node.type === "package" &&
-            node.is_selected_by_default) {
+        if (node.type === "package" && node.is_selected_by_default) {
             return node;
         }
-        if (node.components && Array.isArray(node.components)) {
-            for (const c of node.components) {
-                const pkg = traverseNode(c);
-                if (pkg) {
+        if ("components" in node && Array.isArray(node.components)) {
+            for (const component of node.components) {
+                const pkg = traverseNode(component);
+                if (pkg !== undefined) {
                     return pkg;
                 }
             }
         }
-        if (node.stack !== undefined) {
+        if ("stack" in node) {
             const pkg = traverseNode(node.stack);
-            if (pkg) {
+            if (pkg !== undefined) {
                 return pkg;
             }
         }
         return undefined;
     };
-    const p = traverseNode(paywallData.components_config.base.stack);
-    if (p === undefined) {
-        return undefined;
+    for (const component of paywallData.components_config.base.stack.components) {
+        const pkg = traverseNode(component);
+        if (pkg !== undefined) {
+            return pkg?.package_id;
+        }
     }
-    return p.package_id;
+    return undefined;
 }
 export const getActiveStateProps = (overrides, componentState) => {
     if (!componentState)
@@ -400,12 +393,13 @@ export const getMaskStyle = (maskShape) => {
     }
     return maskStyles;
 };
-export function getLinearGradientAngle(props) {
-    if (props.color_overlay?.[props.purchaseState.colorMode]?.type !== "linear") {
+export function getLinearGradientAngle(colorMode, props) {
+    const { color_overlay: colorOverlay } = props;
+    if (colorOverlay?.[colorMode]?.type !== "linear") {
         return { x1: "0%", y1: "0%", x2: "0%", y2: "0%" };
     }
-    const { color_overlay: colorOverlay } = props;
-    const angle = colorOverlay?.[DEFAULT_COLOR_MODE]?.degrees || 0;
+    const defaultColor = colorOverlay?.[DEFAULT_COLOR_MODE];
+    const angle = defaultColor?.type === "linear" ? defaultColor.degrees : 0;
     const x1 = "50%";
     const y1 = "0%";
     const x2 = `${Math.round(50 + Math.sin(((angle + 90) * Math.PI) / 90) * 50)}%`;

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

@@ -1,4 +1,3 @@
-import type { ComponentLocalizations } from "../data/entities";
 export declare const VARIABLE_NAMES: string[];
 export type VariableDictionary = {
     product_name: string | number | undefined;
@@ -21,40 +20,4 @@ export type VariableDictionary = {
     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;
-/**
- * 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;
+export declare function replaceVariables(input?: string, variables?: VariableDictionary): string | undefined;

package/dist/utils/variable-utils.js

@@ -18,54 +18,12 @@ export const VARIABLE_NAMES = [
     "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;
+export function replaceVariables(input = "", variables) {
+    if (variables === undefined) {
+        return input;
+    }
     return VARIABLE_NAMES.reduce((result, variableName) => {
-        const currentVariableReplaced = result.replaceAll(`{{ ${variableName} }}`, dictionary[variableName]?.toString() || "N/A");
+        const currentVariableReplaced = result.replaceAll(`{{ ${variableName} }}`, variables[variableName]?.toString() || "N/A");
         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;
+    }, input);
 }

package/dist/web-components/index.css

@@ -1 +1 @@
-.rcb-processing.svelte-2j2b59{width:var(--width, 12px);aspect-ratio:1;border-radius:50%;animation:svelte-2j2b59-l5 1.5s infinite linear}@keyframes svelte-2j2b59-l5{0%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}25%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff;background:#fff2}50%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff}75%{box-shadow:var(--shadow-offset) 0 #fff,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}to{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}}.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-mobile)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-mobile)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-mobile)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-mobile)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-mobile)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-mobile)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-mobile)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-mobile)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-mobile)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-mobile)}@container layout-query-container (width >= 768px){.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-desktop)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-desktop)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-desktop)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-desktop)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-desktop)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-desktop)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-desktop)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-desktop)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-desktop)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-desktop)}}button.svelte-td7xvm{border:none;border-radius:var(--rc-shape-input-button-border-radius);cursor:pointer;height:var(--rc-spacing-inputHeight-mobile);color:var(--rc-color-grey-text-dark);background-color:var(--rc-color-grey-ui-dark);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease-in-out;-webkit-user-select:none;user-select:none}@container layout-query-container (width >= 768px){button.svelte-td7xvm{height:var(--rc-spacing-inputHeight-desktop)}}button.svelte-td7xvm:focus-visible{outline:2px solid var(--rc-color-focus)}button.intent-primary.svelte-td7xvm{background-color:var(--rc-color-primary);color:var(--rc-color-primary-text)}button.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark);outline:none}button.intent-primary.svelte-td7xvm:not(:disabled):hover{background-color:var(--rc-color-primary-hover)}button.intent-primary.svelte-td7xvm:not(:disabled):active,button.svelte-td7xvm:active{background-color:var(--rc-color-primary-pressed);outline:none}button.intent-primary.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark)}
+.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-mobile)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-mobile)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-mobile)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-mobile)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-mobile)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-mobile)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-mobile)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-mobile)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-mobile)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-mobile)}@container layout-query-container (width >= 768px){.rcb-typography-heading-2xl.svelte-byrjto{font:var(--rc-text-heading2xl-desktop)}.rcb-typography-heading-xl.svelte-byrjto{font:var(--rc-text-headingXl-desktop)}.rcb-typography-heading-lg.svelte-byrjto{font:var(--rc-text-headingLg-desktop)}.rcb-typography-heading-md.svelte-byrjto{font:var(--rc-text-headingMd-desktop)}.rcb-typography-body-base.svelte-byrjto{font:var(--rc-text-bodyBase-desktop)}.rcb-typography-body-small.svelte-byrjto{font:var(--rc-text-bodySmall-desktop)}.rcb-typography-label-button.svelte-byrjto{font:var(--rc-text-labelButton-desktop)}.rcb-typography-label-default.svelte-byrjto{font:var(--rc-text-labelDefault-desktop)}.rcb-typography-caption-default.svelte-byrjto{font:var(--rc-text-captionDefault-desktop)}.rcb-typography-caption-link.svelte-byrjto{font:var(--rc-text-captionLink-desktop)}}.rcb-processing.svelte-2j2b59{width:var(--width, 12px);aspect-ratio:1;border-radius:50%;animation:svelte-2j2b59-l5 1.5s infinite linear}@keyframes svelte-2j2b59-l5{0%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}25%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff;background:#fff2}50%{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff}75%{box-shadow:var(--shadow-offset) 0 #fff,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}to{box-shadow:var(--shadow-offset) 0 #fff2,calc(-1 * var(--shadow-offset)) 0 #fff2;background:#fff2}}button.svelte-td7xvm{border:none;border-radius:var(--rc-shape-input-button-border-radius);cursor:pointer;height:var(--rc-spacing-inputHeight-mobile);color:var(--rc-color-grey-text-dark);background-color:var(--rc-color-grey-ui-dark);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease-in-out;-webkit-user-select:none;user-select:none}@container layout-query-container (width >= 768px){button.svelte-td7xvm{height:var(--rc-spacing-inputHeight-desktop)}}button.svelte-td7xvm:focus-visible{outline:2px solid var(--rc-color-focus)}button.intent-primary.svelte-td7xvm{background-color:var(--rc-color-primary);color:var(--rc-color-primary-text)}button.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark);outline:none}button.intent-primary.svelte-td7xvm:not(:disabled):hover{background-color:var(--rc-color-primary-hover)}button.intent-primary.svelte-td7xvm:not(:disabled):active,button.svelte-td7xvm:active{background-color:var(--rc-color-primary-pressed);outline:none}button.intent-primary.svelte-td7xvm:disabled{color:var(--rc-color-grey-text-light);background-color:var(--rc-color-grey-ui-dark)}