@metrifox/react-sdk 0.0.20 → 2.0.0

package/dist/index.d.ts

@@ -1,20 +1,48 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentType } from 'react';
 
+/**
+ * Pricing Table theme. All properties are optional.
+ * The theme follows the same structure as CustomerPortalTheme:
+ * - Plan-related keys (planCards, planButton, etc.) are nested under `plans`
+ * - Additional top-level keys: `tabs`, `checkoutBar`
+ */
 interface PricingTableTheme {
-    card?: CardTheme;
-    button?: ButtonTheme;
-    featureList?: FeatureListTheme;
+    general?: {
+        fontFamily?: string;
+    };
+    plans?: PricingTablePlansTheme;
     tabs?: TabsTheme;
-    intervalToggle?: IntervalToggleTheme;
-    currentSubscriptionCard?: CurrentSubscriptionCard;
-    freeTrialTag?: FreeTrialTheme;
+    select?: SelectTheme;
     checkoutBar?: CheckoutBarTheme;
 }
-interface CardTheme {
+interface SelectTheme {
     background?: string;
     borderColor?: string;
-    descriptionColor?: string;
+    textColor?: string;
+    placeholderColor?: string;
+    /** Color of the dropdown arrow (caret) icon */
+    caretColor?: string;
+    dropdownBackground?: string;
+    dropdownBorderColor?: string;
+    optionTextColor?: string;
+    optionHoverBackground?: string;
+}
+interface PricingTablePlansTheme {
+    currentPlanCard?: CurrentSubscriptionCard;
+    planCards?: CardTheme;
+    planFeatures?: FeatureListTheme;
+    planButton?: PlanButtonTheme;
+    planToggle?: IntervalToggleTheme;
+    planTags?: PlanTagsTheme;
+}
+interface CardTheme {
+    background?: string;
+    border?: {
+        color?: string;
+        width?: string;
+        radius?: string;
+    };
     header?: CardHeaderTheme;
     description?: CardDescriptionTheme;
     price?: CardPriceTheme;
@@ -31,11 +59,10 @@ interface CardPriceTheme {
     amountColor?: string;
     primaryTextColor?: string;
     secondaryTextColor?: string;
-    textButtonColor?: string;
     background?: string;
     borderColor?: string;
 }
-interface ButtonTheme {
+interface PlanButtonTheme {
     background?: string;
     textColor?: string;
     secondaryBackground?: string;
@@ -61,10 +88,12 @@ interface IntervalToggleTheme {
 interface CurrentSubscriptionCard {
     header: CardHeaderTheme;
     gradientColor?: string;
+    description?: CardDescriptionTheme;
+    borderRadius?: string;
 }
-interface FreeTrialTheme {
-    background?: string;
-    textColor?: string;
+interface PlanTagsTheme {
+    freeTrialBackground?: string;
+    freeTrialText?: string;
 }
 interface CheckoutBarTheme {
     background?: string;
@@ -74,61 +103,247 @@ interface CheckoutBarTheme {
     buttonTextColor?: string;
 }
 
+/**
+ * Customer Portal theme. All properties are optional.
+ * This shape matches what is defined in defaultCustomerPortalTheme and what
+ * customerPortalThemeToCssVars maps to CSS variables. Only theme groups
+ * that exist in the default theme or are supported by the helper are included.
+ */
 type CustomerPortalTheme = {
+    general?: {
+        linkColor?: string;
+        fontFamily?: string;
+        borderRadius?: string;
+        backgroundColor?: string;
+        containerPadding?: string;
+    };
     tabs?: {
+        tabBackground?: string;
+        tabBorderColor?: string;
+        activeTabBackground?: string;
+        activeTabTextColor?: string;
+        inactiveTabTextColor?: string;
+    };
+    select?: {
         background?: string;
         borderColor?: string;
-        activeBackground?: string;
-        activeTextColor?: string;
-        inactiveTextColor?: string;
+        textColor?: string;
+        /** Color of the dropdown arrow (caret) icon */
+        caretColor?: string;
+        dropdownBackground?: string;
+        dropdownBorderColor?: string;
+        optionTextColor?: string;
+        optionHoverBackground?: string;
     };
-    section?: {
+    sections?: {
         background?: string;
-        titleTextColor?: string;
-        contentBackground?: string;
+        padding?: string;
+        borderColor?: string;
+        borderRadius?: string;
+        content?: {
+            background?: string;
+            padding?: string;
+            borderColor?: string;
+            borderRadius?: string;
+        };
+        summaryBalance?: {
+            background?: string;
+            padding?: string;
+            borderColor?: string;
+            borderRadius?: string;
+            label?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+            };
+            value?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+            };
+            unit?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+            };
+        };
+        header?: {
+            fontSize?: string;
+            fontWeight?: string;
+            color?: string;
+        };
+        label?: {
+            fontSize?: string;
+            fontWeight?: string;
+            color?: string;
+        };
+        value?: {
+            fontSize?: string;
+            fontWeight?: string;
+            color?: string;
+        };
         iconBackground?: string;
         iconColor?: string;
         emptyTextColor?: string;
+        usage?: {
+            barColor?: string;
+            trackColor?: string;
+        };
     };
-    card?: {
-        titleBackground?: string;
-        contentBackground?: string;
-        titleColor?: string;
-        details?: {
-            labelColor?: string;
-            valueColor?: string;
+    buttons?: {
+        primary?: {
+            backgroundColor?: string;
+            border?: {
+                color?: string;
+                width?: string;
+                radius?: string;
+            };
+            typography?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+            };
+        };
+        secondary?: {
+            backgroundColor?: string;
+            border?: {
+                color?: string;
+                width?: string;
+                radius?: string;
+            };
+            typography?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+            };
         };
     };
-    subscription?: {
-        items?: {
+    lineItems?: {
+        parentRow?: {
             background?: string;
             borderColor?: string;
-            textColor?: string;
+            borderRadius?: string;
+            typography?: {
+                label?: {
+                    fontSize?: string;
+                    fontWeight?: string;
+                    color?: string;
+                };
+                quantity?: {
+                    fontSize?: string;
+                    color?: string;
+                };
+            };
+            spacing?: {
+                paddingTop?: string;
+                paddingRight?: string;
+                paddingBottom?: string;
+                paddingLeft?: string;
+            };
+            expandIconColor?: string;
+            expandIconSize?: string;
+        };
+        childRow?: {
+            background?: string;
+            borderColor?: string;
+            borderRadius?: string;
+            typography?: {
+                label?: {
+                    fontSize?: string;
+                    fontWeight?: string;
+                    color?: string;
+                };
+                quantity?: {
+                    fontSize?: string;
+                    color?: string;
+                };
+            };
+            spacing?: {
+                paddingTop?: string;
+                paddingRight?: string;
+                paddingBottom?: string;
+                paddingLeft?: string;
+            };
         };
     };
-    table?: {
+    tables?: {
+        headerBackground?: string;
         headerTextColor?: string;
-        textColor?: string;
+        rowBackgroundOdd?: string;
+        rowBackgroundEven?: string;
+        rowTextColor?: string;
+        borderColor?: string;
+        cellPadding?: string;
+        expandIconColor?: string;
+        typography?: {
+            fontSize?: string;
+            fontWeight?: string;
+            headerFontSize?: string;
+            headerFontWeight?: string;
+        };
+        pagination?: {
+            background?: string;
+            activeBackground?: string;
+            textColor?: string;
+            activeTextColor?: string;
+            borderColor?: string;
+            borderRadius?: string;
+        };
     };
-    button?: {
+    modals?: {
+        overlayColor?: string;
         background?: string;
-        textColor?: string;
-    };
-    filter?: {
-        border?: string;
-        activeBackground?: string;
-        inactiveBackground?: string;
-        activeTextColor?: string;
-        inactiveTextColor?: string;
-        countBackground?: string;
-        countTextColor?: string;
+        borderColor?: string;
+        borderRadius?: string;
+        closeButtonColor?: string;
+        header?: {
+            fontSize?: string;
+            fontWeight?: string;
+            color?: string;
+        };
+        title?: {
+            fontSize?: string;
+            fontWeight?: string;
+            color?: string;
+        };
+        description?: {
+            fontSize?: string;
+            fontWeight?: string;
+            color?: string;
+        };
+        footer?: {
+            primary?: {
+                backgroundColor?: string;
+                textColor?: string;
+                borderColor?: string;
+                borderWidth?: string;
+                borderRadius?: string;
+            };
+            secondary?: {
+                backgroundColor?: string;
+                textColor?: string;
+                borderColor?: string;
+                borderWidth?: string;
+                borderRadius?: string;
+            };
+        };
     };
-    linkColor?: string;
-    plan?: {
-        card?: {
+    plans?: {
+        currentPlanCard?: {
+            header?: {
+                background?: string;
+                textColor?: string;
+            };
+            gradientColor?: string;
+            borderRadius?: string;
+        };
+        planCards?: {
             background?: string;
-            borderColor?: string;
-            descriptionColor?: string;
+            border?: {
+                color?: string;
+                width?: string;
+                radius?: string;
+            };
             header?: {
                 background?: string;
                 textColor?: string;
@@ -141,38 +356,61 @@ type CustomerPortalTheme = {
                 amountColor?: string;
                 primaryTextColor?: string;
                 secondaryTextColor?: string;
-                textButtonColor?: string;
                 background?: string;
                 borderColor?: string;
             };
         };
-        button?: {
-            background?: string;
+        planFeatures?: {
             textColor?: string;
-            secondaryBackground?: string;
-            secondaryTextColor?: string;
-            textButtonColor?: string;
+            iconColor?: string;
         };
-        featureList?: {
+        planButton?: {
+            background?: string;
             textColor?: string;
-            iconColor?: string;
         };
-        intervalToggle?: {
+        planToggle?: {
             background?: string;
             activeBackground?: string;
             activeText?: string;
             inactiveText?: string;
         };
-        currentSubscriptionCard?: {
-            header?: {
-                background?: string;
-                textColor?: string;
-            };
-            gradientColor?: string;
+        planTags?: {
+            freeTrialBackground?: string;
+            freeTrialText?: string;
         };
-        freeTrialTag?: {
+    };
+    /** Banner variants (e.g. info banner for scheduled change / undo cancellation). */
+    banners?: {
+        info?: {
             background?: string;
             textColor?: string;
+            borderRadius?: string;
+            buttonBorderColor?: string;
+            buttonTextColor?: string;
+        };
+    };
+    /** Used by e.g. subscription line-item actions. Not set in default theme; pass to override. */
+    popover?: {
+        trigger?: {
+            background?: string;
+            iconColor?: string;
+            borderColor?: string;
+            borderRadius?: string;
+        };
+        menu?: {
+            background?: string;
+            borderColor?: string;
+            borderRadius?: string;
+            /** Padding applied to each menu item (e.g. "0.25rem 1rem"). */
+            itemPadding?: string;
+            itemHoverBackground?: string;
+            itemDividerColor?: string;
+            typography?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+                dangerColor?: string;
+            };
         };
     };
 };
@@ -235,11 +473,17 @@ declare enum OneOffType {
     FLAT = "flat",
     PERCENTAGE = "percentage"
 }
+declare enum ScheduledChangeType {
+    UPGRADE = "upgrade",
+    DOWNGRADE = "downgrade",
+    ADDON_REMOVE = "addon_remove"
+}
 
 type SectionKey = "upcomingInvoice" | "subscription" | "creditBalance" | "entitlementUsage" | "paymentOverview" | "billingHistory" | "plan";
 interface CustomerPortalProps {
     customerKey: string;
     sectionsConfig?: SectionConfig[];
+    theme?: CustomerPortalTheme;
 }
 interface SectionConfig {
     key: SectionKey;
@@ -298,6 +542,7 @@ interface SubscriptionProps {
     subscription_items: ISubscriptionItems[];
     upcoming_invoice: IUpcomingInvoice | null;
     can_update_quantities: boolean;
+    scheduled_change?: ScheduledChangeType | null;
 }
 interface ISubscriptionItems {
     price_option_id: string;
@@ -380,6 +625,8 @@ interface Offering {
     base_entitlements_plan_name: string;
     version_id: string;
     is_invoiceable: boolean;
+    product_key?: string;
+    product_currency_code?: string;
 }
 interface PriceOption {
     metadata: Record<string, string>;
@@ -525,7 +772,7 @@ interface Feature {
     created_at: string;
 }
 
-declare const CustomerPortal: ({ customerKey, sectionsConfig }: CustomerPortalProps) => react_jsx_runtime.JSX.Element;
+declare const CustomerPortal: ({ customerKey, sectionsConfig, theme }: CustomerPortalProps) => react_jsx_runtime.JSX.Element;
 
 declare const PriceCard: ({ plan, interval, featureOrderMap, isPricePage, isCustomerPortal, statusTag, addPriceButton, buttonText, isCurrentPlan, planActions, cardAction, buttonAction, }: {
     plan: Offering;
@@ -542,12 +789,15 @@ declare const PriceCard: ({ plan, interval, featureOrderMap, isPricePage, isCust
     buttonAction?: () => void;
 }) => react_jsx_runtime.JSX.Element | null;
 
-declare const PricingTable: ({ checkoutUsername, productKey, plansOnly, singlePurchasesOnly, showTabHeader, }: {
+declare const PricingTable: ({ checkoutUsername, productKey, plansOnly, singlePurchasesOnly, showTabHeader, theme: themeOverride, currentPlanOfferingKey, }: {
     checkoutUsername: string;
     productKey: string;
     plansOnly?: boolean;
     singlePurchasesOnly?: boolean;
     showTabHeader?: boolean;
+    theme?: PricingTableTheme;
+    /** When set, the plan with this offering_key is rendered as the current plan (shows currentPlanCard theme + gradient). Use in demo/Storybook to preview gradient. */
+    currentPlanOfferingKey?: string;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const useCheckoutUrl: () => {