@revenuecat/purchases-ui-js 2.0.0 → 2.0.1

package/dist/data/entities.d.ts

@@ -1,7 +1,11 @@
-import type { AlignmentType, BorderType, CircleShape, ColorType, CornerRadiusType, DimensionType, FitTypes, FontSizeTags, FontWeights, RectangleShape, ShadowType, ShapeType, SizeType, Spacing, TextAlignments } from "../types";
-import type { PurchaseState } from "./state";
-import type { VariableDictionary } from "../utils/variable-utils";
 import type { ZStackChildStyles } from "../components/stack/stack-utils";
+import type { PurchaseState } from "./state";
+import type { AlignmentType, BorderType, CircleShape, CornerRadiusType, FontSizeTags, FontWeights, RectangleShape, ShadowType, ShapeType, SizeType, Spacing, TextAlignments } from "../types";
+import type { Dimension } from "../types/alignment";
+import type { Background } from "../types/background";
+import type { ColorGradientScheme, ColorScheme } from "../types/colors";
+import type { Localizations } from "../types/localization";
+import type { ImageInfo, ImageObjectFit } from "../types/media";
 export interface Extra {
     [key: string]: unknown;
 }
@@ -16,17 +20,16 @@ export interface Stack extends PaywallComponent {
     spacing: number;
     components: PaywallComponent[];
 }
-type BaseNodeBackgroundColor = {
-    type: "color";
-    value: ColorType;
-};
-export type BaseNodeBackgroundImage = {
-    type: "image";
-    value: ImageSourceType;
-    color_overlay?: ColorType;
-    fit_mode?: FitTypes;
+export type RootPaywall = {
+    background?: Background;
+    stack: Stack;
+    sticky_footer?: null | {
+        stack: Stack;
+        id: string;
+        name: string;
+        type: "footer";
+    };
 };
-export type BaseNodeBackgroundType = BaseNodeBackgroundColor | BaseNodeBackgroundImage;
 export interface ComponentConfig {
     colors?: Record<string, string>;
     fonts?: {
@@ -37,30 +40,22 @@ export interface ComponentConfig {
         };
     };
     asset_base_url?: string;
-    base: {
-        default_font_name?: string;
-        background?: BaseNodeBackgroundType;
-        stack: Stack;
-        sticky_footer?: {
-            stack: Stack;
-            id: string;
-            name: string;
-            type: "footer";
-        } | null;
-    };
-}
-export interface ComponentLocalizations extends Extra {
-    [locale: string]: {
-        [label_id: string]: string;
-    };
-}
-export interface PaywallData extends Extra {
-    components_config: ComponentConfig;
-    components_localizations: ComponentLocalizations;
+    base: RootPaywall;
+}
+export interface PaywallData {
+    template_name: string;
+    offering_id: string;
+    created_at: string;
+    updated_at: string;
+    published_at?: string | null;
+    asset_base_url: string;
     default_locale: string;
-}
-export interface ActionsProps {
-    onAction?: (action: SupportedActions, data?: Extra) => void;
+    revision: number;
+    components_config: ComponentConfig;
+    components_localizations: Localizations;
+    published_revision?: number | null;
+    published_components_config?: ComponentConfig | null;
+    published_components_localizations?: Localizations | null;
 }
 export interface PurchaseStateProps {
     purchaseState: PurchaseState;
@@ -68,97 +63,56 @@ export interface PurchaseStateProps {
 export type ComponentState = {
     [state: string]: boolean;
 };
-interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseStateProps {
-    labels: ComponentLocalizations;
+export interface SharedComponentProps extends PaywallComponent, PurchaseStateProps {
     id: string;
     name: string;
-    variableDictionary?: VariableDictionary;
     componentState?: ComponentState;
     zStackChildStyles?: ZStackChildStyles;
 }
-interface Action {
-    type: "restore_purchases" | "navigate_to" | "navigate_back" | "purchase" | "select_package";
-}
-type OverrideProps<T> = {
+export type OverrideProps<T> = {
     states?: {
         [state: string]: T;
     };
 };
-export interface RestorePurchasesAction extends Action {
-    type: "restore_purchases";
-}
-export interface NavigateBackAction extends Action {
-    type: "navigate_back";
-}
-export interface NavigateToAction extends Action {
-    type: "navigate_to";
-    destination: "customer_center" | "privacy_policy" | "terms" | "url";
-    url?: {
-        url_lid: string;
-        method: "in_app_browser" | "external_browser" | "deep_link";
-    };
-}
-export interface PurchaseAction extends Action {
-    type: "purchase";
-}
-export interface SelectPackageAction extends Action {
-    type: "select_package";
-}
-export type SupportedActions = RestorePurchasesAction | NavigateBackAction | NavigateToAction | PurchaseAction | SelectPackageAction;
-export interface ButtonNodeProps extends SharedComponentProps {
-    type: "button";
-    action: SupportedActions;
-    stack: StackProps;
-}
-export interface PurchaseButtonProps extends SharedComponentProps {
-    type: "purchase_button";
-    stack: StackProps;
-}
-export interface FooterProps extends SharedComponentProps {
-    type: "footer";
-    stack: StackProps;
-}
-export interface PackageProps extends SharedComponentProps {
-    type: "package";
-    stack: StackProps;
-    package_id: string;
-    is_selected_by_default: boolean;
-}
 export interface StackProps extends SharedComponentProps {
-    background_color?: ColorType;
-    border?: BorderType;
+    type: "stack";
+    visible?: boolean | null;
     components: PaywallComponent[];
-    dimension: DimensionType;
+    size: SizeType;
+    dimension: Dimension;
+    spacing: number;
     margin: Spacing;
     padding: Spacing;
-    shadow?: ShadowType;
-    shape?: ShapeType;
-    size: SizeType;
-    spacing?: number;
-    type: "stack";
-    badge?: {
+    background_color: ColorGradientScheme | null;
+    background: Background | null;
+    border: BorderType | null;
+    shape: ShapeType | null;
+    shadow: ShadowType | null;
+    badge?: null | {
         stack: {
             components: PaywallComponent[];
             type: "stack";
         };
         style: "overlay" | "edge_to_edge" | "nested";
         alignment: Exclude<AlignmentType, "center">;
-        shape: ShapeType;
+        border?: BorderType | null;
+        shape: ShapeType | null;
+        shadow?: ShadowType | null;
         padding: Spacing;
         margin: Spacing;
         text_lid: string;
-        color: ColorType;
+        color: ColorScheme;
         font_name?: string;
         font_weight: keyof typeof FontWeights;
         font_size: keyof typeof FontSizeTags;
         horizontal_alignment: keyof typeof TextAlignments;
-        background_color: ColorType;
+        background_color: ColorGradientScheme;
     };
     overrides?: OverrideProps<StackProps>;
 }
 export interface TextNodeProps extends SharedComponentProps {
-    background_color?: ColorType;
-    color: ColorType;
+    background_color?: ColorGradientScheme;
+    color: ColorScheme;
     components: PaywallComponent[];
     font_name?: string;
     font_size: keyof typeof FontSizeTags;
@@ -169,32 +123,18 @@ export interface TextNodeProps extends SharedComponentProps {
     text_lid: string;
     type: "text";
     size: SizeType;
-    variableDictionary?: VariableDictionary;
     overrides?: OverrideProps<TextNodeProps>;
 }
-type ImageSourceDictionaryType = {
-    original: string;
-    heic: string;
-    heic_low_res: string;
-    webp: string;
-    webp_low_res: string;
-    width?: number;
-    height?: number;
-};
-type ImageSourceType = {
-    light: ImageSourceDictionaryType;
-    dark?: ImageSourceDictionaryType;
-};
 export interface ImageMaskShapeType {
     type: "circle" | "rectangle" | "concave" | "convex";
     corners?: CornerRadiusType;
 }
 export interface ImageProps extends SharedComponentProps {
     type: "image";
-    fit_mode: FitTypes;
+    fit_mode: ImageObjectFit;
     size: SizeType;
-    source: ImageSourceType;
-    color_overlay?: ColorType;
+    source: ImageInfo;
+    color_overlay?: ColorGradientScheme | null;
     mask_shape?: ImageMaskShapeType;
     max_height?: number;
     override_source_lid?: string;
@@ -203,7 +143,7 @@ export interface ImageProps extends SharedComponentProps {
 export type ItemProps = {
     title: {
         text_lid: string;
-        color: ColorType;
+        color: ColorScheme;
         font_name?: string;
         font_weight?: keyof typeof FontWeights;
         font_size?: keyof typeof FontSizeTags;
@@ -211,7 +151,7 @@ export type ItemProps = {
     };
     description?: {
         text_lid: string;
-        color: ColorType;
+        color: ColorScheme;
         font_name?: string;
         font_weight?: keyof typeof FontWeights;
         font_size?: keyof typeof FontSizeTags;
@@ -219,13 +159,13 @@ export type ItemProps = {
     };
     icon: {
         name: string;
-        color: ColorType;
+        color: ColorScheme;
         width_and_height: number;
         padding: number;
     };
     icon_background?: {
         shape: CircleShape | RectangleShape;
-        color: ColorType;
+        color: ColorScheme;
         border?: BorderType;
     };
     connector?: {
@@ -234,7 +174,7 @@ export type ItemProps = {
             top: number;
             bottom: number;
         };
-        color: ColorType;
+        color: ColorGradientScheme;
     };
 };
 export interface TimelineProps extends SharedComponentProps {
@@ -250,4 +190,3 @@ export interface TimelineItemProps extends ItemProps, SharedComponentProps {
     text_spacing: number;
     item_spacing: number;
 }
-export {};

package/dist/data/state.d.ts

@@ -1,9 +1,4 @@
-import type { ColorMode } from "../types";
 import type { VariableDictionary } from "../utils/variable-utils";
 export interface PurchaseState {
-    selectedPackageId?: string;
-    locale: string;
-    defaultLocale: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
-    colorMode: ColorMode;
 }

package/dist/stores/color-mode.d.ts

@@ -0,0 +1,6 @@
+import type { ColorMode } from "../types";
+export type ColorModeOverride = () => ColorMode | undefined;
+type GetColorMode = () => ColorMode;
+export declare function setColorModeContext(colorModeOverride?: ColorModeOverride): GetColorMode;
+export declare function getColorModeContext(): GetColorMode;
+export {};

package/dist/stores/color-mode.js

@@ -0,0 +1,15 @@
+import { DEFAULT_COLOR_MODE } from "../utils/constants";
+import { getContext, setContext } from "svelte";
+import { MediaQuery } from "svelte/reactivity";
+const key = Symbol("color-mode");
+export function setColorModeContext(colorModeOverride) {
+    const prefersDarkMode = new MediaQuery("prefers-color-scheme: dark", (colorModeOverride?.() ?? DEFAULT_COLOR_MODE) === "dark");
+    const context = () => colorModeOverride?.() ??
+        (prefersDarkMode.current ? "dark" : DEFAULT_COLOR_MODE);
+    setContext(key, context);
+    return context;
+}
+export function getColorModeContext() {
+    const context = getContext(key);
+    return context ?? (() => DEFAULT_COLOR_MODE);
+}

package/dist/stores/localization.d.ts

@@ -0,0 +1,13 @@
+import type { Localizations } from "../types/localization";
+type GetLocalizedString = (id?: string) => string | undefined;
+interface LocalizationContext {
+    getLocalizedString: GetLocalizedString;
+}
+export interface LocalizationContextProps {
+    defaultLocale: string;
+    selectedLocale?: string;
+    localizations: Localizations;
+}
+export declare function setLocalizationContext({ defaultLocale, selectedLocale, localizations, }: LocalizationContextProps): LocalizationContext;
+export declare function getLocalizationContext(): LocalizationContext;
+export {};

package/dist/stores/localization.js

@@ -0,0 +1,25 @@
+import { getContext, setContext } from "svelte";
+const key = Symbol("localization");
+export function setLocalizationContext({ defaultLocale, selectedLocale, localizations, }) {
+    const locale = selectedLocale ?? defaultLocale;
+    const getLocalizedString = (id) => {
+        if (!id) {
+            return "";
+        }
+        const selected = localizations[locale]?.[id];
+        const fallback = localizations[defaultLocale]?.[id];
+        return selected ?? fallback;
+    };
+    const context = {
+        getLocalizedString,
+    };
+    setContext(key, context);
+    return context;
+}
+export function getLocalizationContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("Localization context not found");
+    }
+    return context;
+}

package/dist/stores/paywall.d.ts

@@ -0,0 +1,10 @@
+import type { Action } from "../types/components/button";
+import { type Writable } from "svelte/store";
+interface PaywallContext {
+    selectedPackageId: Writable<string | undefined>;
+    onPurchase: () => void;
+    onButtonAction: (action: Action) => void;
+}
+export declare function setPaywallContext(context: PaywallContext): void;
+export declare function getPaywallContext(): PaywallContext;
+export {};

package/dist/stores/paywall.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from "svelte";
+import {} from "svelte/store";
+const key = Symbol("paywall");
+export function setPaywallContext(context) {
+    setContext(key, context);
+}
+export function getPaywallContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("Paywall context not found");
+    }
+    return context;
+}

package/dist/stores/variables.d.ts

@@ -0,0 +1,6 @@
+import { type VariableDictionary } from "../utils/variable-utils";
+import { type Readable } from "svelte/store";
+type VariablesStore = Readable<VariableDictionary | undefined>;
+export declare function setVariablesContext(variables: VariablesStore): void;
+export declare function getVariablesContext(): VariablesStore;
+export {};

package/dist/stores/variables.js

@@ -0,0 +1,14 @@
+import {} from "../utils/variable-utils";
+import { getContext, setContext } from "svelte";
+import {} from "svelte/store";
+const key = Symbol("variables");
+export function setVariablesContext(variables) {
+    setContext(key, variables);
+}
+export function getVariablesContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("Variables context not found");
+    }
+    return context;
+}

package/dist/stories/fixtures.js

@@ -2223,13 +2223,8 @@ export const paywallData = {
             zwOsIynvC9: "Annual",
         },
     },
-    config: {},
     created_at: "2024-11-07T04:36:37Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrngbfce748e08",
     published_at: null,
     published_revision: null,
@@ -3823,13 +3818,8 @@ export const alignmentPaywallData = {
     components_localizations: {
         en_US: {},
     },
-    config: {},
     created_at: "2024-11-08T02:34:09Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrng4be31354c4",
     published_at: null,
     published_revision: null,
@@ -4883,13 +4873,8 @@ export const fontsPaywallData = {
             uzD2rPJ68m: "**this is bold text**\\\n*this is italics*\\\n~this is strikethrough~\\\n`this is code`\\\n[this is a link](https://www.google.com)",
         },
     },
-    config: {},
     created_at: "2024-11-08T21:39:13Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrng0bfa13d98f",
     published_at: null,
     published_revision: null,
@@ -6932,13 +6917,8 @@ export const pastaPaywallData = {
             uYHuXwbuaS: "500g - 9 min",
         },
     },
-    config: {},
     created_at: "2024-11-12T15:45:09Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrng284f6b25f9",
     revision: 10,
     template_name: "components",
@@ -8979,13 +8959,8 @@ export const variablesPastaPaywallData = {
             uYHuXwbuaS: "500g - 9 min",
         },
     },
-    config: {},
     created_at: "2024-11-12T15:45:09Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrng284f6b25f9",
     revision: 10,
     template_name: "components",
@@ -8993,6 +8968,9 @@ export const variablesPastaPaywallData = {
 };
 export const gradientPaywallData = {
     asset_base_url: "https://assets.pawwalls.com",
+    offering_id: "ofrngbfce748e08",
+    created_at: "2024-11-08T22:38:41Z",
+    updated_at: "2024-11-08T22:38:41Z",
     components_config: {
         base: {
             stack: {
@@ -11195,10 +11173,6 @@ export const gradientPaywallData = {
     default_locale: "en_US",
     revision: 21,
     template_name: "components",
-    zero_decimal_place_countries: {
-        apple: ["TWN", "KAZ", "MEX", "PHL", "THA"],
-        google: ["TW", "KZ", "MX", "PH", "TH"],
-    },
 };
 export const calmPaywallData = {
     asset_base_url: "https://assets.pawwalls.com",
@@ -12263,13 +12237,8 @@ export const calmPaywallData = {
             wUmW3cccab: "100+ guided meditations on anxiety, stress, sleep and more",
         },
     },
-    config: {},
     created_at: "2024-11-08T21:36:50Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrngae6ecdad78",
     revision: 9,
     template_name: "components",
@@ -13645,13 +13614,8 @@ export const stateTemplate = {
             xwdoMifL43: "Habit",
         },
     },
-    config: {},
     created_at: "2024-11-08T21:36:50Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrngae6ecdad78",
     revision: 9,
     template_name: "state",
@@ -15254,13 +15218,8 @@ export const posterMakerTemplate = {
             vRN5_ma4Yq: "",
         },
     },
-    config: {},
     created_at: "2024-11-11T16:25:20Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrng4db5c5b61d",
     published_at: null,
     published_revision: null,
@@ -17833,13 +17792,8 @@ export const zStackTemplate = {
             zMxG0H664k: "Bottom trailing",
         },
     },
-    config: {},
     created_at: "2024-12-19T20:46:54Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrng2063b5def2",
     published_at: null,
     published_components_config: null,
@@ -17899,7 +17853,6 @@ export const colorModeOverrideTemplate = {
                             },
                         ],
                         type: "linear",
-                        value: "#ffffffff",
                     },
                 },
                 border: null,
@@ -18706,13 +18659,8 @@ export const colorModeOverrideTemplate = {
             qy4JKggbZ_: "Monthly",
         },
     },
-    config: {},
     created_at: "2024-12-06T17:20:24Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrngb4d6b67d35",
     published_at: null,
     published_revision: null,
@@ -18748,7 +18696,6 @@ export const paywallWithFooter = {
                             },
                         ],
                         type: "linear",
-                        value: "#ffffffff",
                     },
                 },
                 border: null,
@@ -19660,13 +19607,8 @@ export const paywallWithFooter = {
             qy4JKggbZ_: "Monthly",
         },
     },
-    config: {},
     created_at: "2024-12-03T17:07:27Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrngea57cd715b",
     published_at: "2024-12-03T17:34:02Z",
     published_revision: 4,
@@ -19735,7 +19677,7 @@ export const errorPaywallData = {
                             },
                         },
                         spacing: 0,
-                        // @ts-expect-error placing this intentionally to test the error boundary
+                        // Intentional: testing unkown components.
                         type: "stackkkk",
                     },
                 ],
@@ -19777,13 +19719,8 @@ export const errorPaywallData = {
     components_localizations: {
         en_US: {},
     },
-    config: {},
     created_at: "2024-11-07T04:36:37Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrngbfce748e08",
     published_at: null,
     published_revision: null,
@@ -22060,13 +21997,8 @@ export const fallbackPaywallData = {
             fallbackText123: "This is a fallback text",
         },
     },
-    config: {},
     created_at: "2024-11-07T04:36:37Z",
     default_locale: "en_US",
-    localized_strings: {
-        en_US: {},
-    },
-    localized_strings_by_tier: {},
     offering_id: "ofrngbfce748e08",
     published_at: null,
     published_revision: null,
@@ -22076,6 +22008,9 @@ export const fallbackPaywallData = {
 };
 export const e2eTestTemplate = {
     asset_base_url: "https://assets.pawwalls.com",
+    offering_id: "ofrngbfce748e08",
+    created_at: "2024-11-08T22:38:41Z",
+    updated_at: "2024-11-08T22:38:41Z",
     components_config: {
         base: {
             background: {
@@ -24328,10 +24263,6 @@ export const e2eTestTemplate = {
     default_locale: "en_US",
     revision: 4,
     template_name: "components",
-    zero_decimal_place_countries: {
-        apple: ["TWN", "KAZ", "MEX", "PHL", "THA"],
-        google: ["TW", "KZ", "MX", "PH", "TH"],
-    },
 };
 export const brandingAppearances = {
     None: null,

package/dist/stories/localization-decorator.d.ts

@@ -0,0 +1,3 @@
+import { type LocalizationContextProps } from "../stores/localization";
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function localizationDecorator<TRenderer extends Renderer, TArgs>(props: LocalizationContextProps): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/localization-decorator.js

@@ -0,0 +1,7 @@
+import { setLocalizationContext, } from "../stores/localization";
+export function localizationDecorator(props) {
+    return (Story) => {
+        setLocalizationContext(props);
+        return Story();
+    };
+}

package/dist/stories/paywall-decorator.d.ts

@@ -0,0 +1,2 @@
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(): DecoratorFunction<TRenderer, TArgs>;