@windrun-huaiin/third-ui 31.3.5 → 31.3.7

package/dist/main/credit/credit-overview-client.js

@@ -17,7 +17,7 @@ const formatNumber = (locale, value) => new Intl.NumberFormat(locale, {
     maximumFractionDigits: 0,
 }).format(value);
 function CreditOverviewClient({ data, locale, translations, className, expiringSoonThresholdDays = 7, customActionHandlers, }) {
-    var _a;
+    var _a, _b;
     const { redirectToSignIn } = nextjs.useClerk();
     const navPopover = creditNavButton.useCreditNavPopover();
     const isMobile = (_a = navPopover === null || navPopover === void 0 ? void 0 : navPopover.isMobile) !== null && _a !== void 0 ? _a : false;
@@ -59,6 +59,9 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
     const subscription = data.subscription;
     const pricingContext = data.pricingContext;
     const ctaBehaviors = data.ctaBehaviors;
+    const billingOptions = (_b = pricingContext === null || pricingContext === void 0 ? void 0 : pricingContext.moneyPriceData.billingSwitch.options) !== null && _b !== void 0 ? _b : [];
+    const subscriptionBillingEnabled = billingOptions.some((option) => option.key === 'monthly' || option.key === 'yearly');
+    const onetimeBillingEnabled = billingOptions.some((option) => option.key === 'onetime');
     const getModalMoneyPriceData = React.useCallback((mode) => {
         if (!pricingContext) {
             return null;
@@ -232,10 +235,10 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
         userToggledRef.current = true;
         setBucketExpanded(true);
     }, []);
-    return (jsxRuntime.jsxs("section", { className: utils.cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxRuntime.jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsxRuntime.jsx(icons.GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsxRuntime.jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsxRuntime.jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), jsxRuntime.jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsxRuntime.jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsxRuntime.jsx("div", { className: "pt-2 sm:pt-0", children: jsxRuntime.jsx(gradientButton.GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsxRuntime.jsx(icons.Settings2Icon, {}) : jsxRuntime.jsx(icons.BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] }), jsxRuntime.jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsxRuntime.jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxRuntime.jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsxRuntime.jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsxRuntime.jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsxRuntime.jsx(icons.ChevronUpIcon, { className: "h-4 w-4" })) : (jsxRuntime.jsx(icons.ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
+    return (jsxRuntime.jsxs("section", { className: utils.cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxRuntime.jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsxRuntime.jsx(icons.GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsxRuntime.jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsxRuntime.jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), subscriptionBillingEnabled ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsxRuntime.jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsxRuntime.jsx("div", { className: "pt-2 sm:pt-0", children: jsxRuntime.jsx(gradientButton.GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsxRuntime.jsx(icons.Settings2Icon, {}) : jsxRuntime.jsx(icons.BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] })) : null] }), jsxRuntime.jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsxRuntime.jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxRuntime.jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsxRuntime.jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsxRuntime.jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsxRuntime.jsx(icons.ChevronUpIcon, { className: "h-4 w-4" })) : (jsxRuntime.jsx(icons.ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
                             const balanceDisplay = formatNumber(locale, bucket.balance);
                             return (jsxRuntime.jsxs("li", { "data-credit-kind": bucket.kind, className: "rounded-2xl border border-slate-200/70 bg-white/85 px-3 py-3 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 sm:px-4", children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] items-center gap-3 text-xs sm:text-sm", children: [jsxRuntime.jsx("span", { className: "flex min-w-0 items-center gap-2", children: jsxRuntime.jsx("span", { className: "max-w-full truncate rounded-full bg-purple-50 px-2 py-1 text-xs text-purple-600 shadow-sm dark:bg-purple-500/20 dark:text-purple-100 sm:text-sm", children: bucket.computedLabel }) }), jsxRuntime.jsx("span", { className: "flex min-w-0 justify-end", children: jsxRuntime.jsx("span", { className: "text-right text-base font-semibold leading-tight text-gray-500 dark:text-slate-100 sm:text-lg", title: balanceDisplay, children: balanceDisplay }) })] }), jsxRuntime.jsx("div", { className: "mt-3 flex justify-end gap-2", children: jsxRuntime.jsxs("span", { className: "text-[11px] text-gray-500 dark:text-slate-100 sm:text-xs", children: [translations.expiredAtLabel, ": ", bucket.expiresAt] }) })] }, bucket.kind));
-                        }) })) : (jsxRuntime.jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsxRuntime.jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), jsxRuntime.jsx(gradientButton.GradientButton, { title: translations.onetimeBuy, icon: jsxRuntime.jsx(icons.ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })] })] }));
+                        }) })) : (jsxRuntime.jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsxRuntime.jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), onetimeBillingEnabled ? (jsxRuntime.jsx(gradientButton.GradientButton, { title: translations.onetimeBuy, icon: jsxRuntime.jsx(icons.ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })) : null] })] }));
 }
 function deriveStatus(expiresAt, thresholdDays = 7) {
     if (!expiresAt) {

package/dist/main/credit/credit-overview-client.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { __awaiter } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useClerk } from '@clerk/nextjs';
 import { GradientButton } from '../buttons/gradient-button.mjs';
 import { useState, useRef, useCallback, useMemo, useLayoutEffect } from 'react';
@@ -15,7 +15,7 @@ const formatNumber = (locale, value) => new Intl.NumberFormat(locale, {
     maximumFractionDigits: 0,
 }).format(value);
 function CreditOverviewClient({ data, locale, translations, className, expiringSoonThresholdDays = 7, customActionHandlers, }) {
-    var _a;
+    var _a, _b;
     const { redirectToSignIn } = useClerk();
     const navPopover = useCreditNavPopover();
     const isMobile = (_a = navPopover === null || navPopover === void 0 ? void 0 : navPopover.isMobile) !== null && _a !== void 0 ? _a : false;
@@ -57,6 +57,9 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
     const subscription = data.subscription;
     const pricingContext = data.pricingContext;
     const ctaBehaviors = data.ctaBehaviors;
+    const billingOptions = (_b = pricingContext === null || pricingContext === void 0 ? void 0 : pricingContext.moneyPriceData.billingSwitch.options) !== null && _b !== void 0 ? _b : [];
+    const subscriptionBillingEnabled = billingOptions.some((option) => option.key === 'monthly' || option.key === 'yearly');
+    const onetimeBillingEnabled = billingOptions.some((option) => option.key === 'onetime');
     const getModalMoneyPriceData = useCallback((mode) => {
         if (!pricingContext) {
             return null;
@@ -230,10 +233,10 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
         userToggledRef.current = true;
         setBucketExpanded(true);
     }, []);
-    return (jsxs("section", { className: cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsx(GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsx("div", { className: "pt-2 sm:pt-0", children: jsx(GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsx(Settings2Icon, {}) : jsx(BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] }), jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsx(ChevronUpIcon, { className: "h-4 w-4" })) : (jsx(ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
+    return (jsxs("section", { className: cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsx(GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), subscriptionBillingEnabled ? (jsxs(Fragment, { children: [jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsx("div", { className: "pt-2 sm:pt-0", children: jsx(GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsx(Settings2Icon, {}) : jsx(BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] })) : null] }), jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsx(ChevronUpIcon, { className: "h-4 w-4" })) : (jsx(ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
                             const balanceDisplay = formatNumber(locale, bucket.balance);
                             return (jsxs("li", { "data-credit-kind": bucket.kind, className: "rounded-2xl border border-slate-200/70 bg-white/85 px-3 py-3 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 sm:px-4", children: [jsxs("div", { className: "grid grid-cols-[1fr_auto] items-center gap-3 text-xs sm:text-sm", children: [jsx("span", { className: "flex min-w-0 items-center gap-2", children: jsx("span", { className: "max-w-full truncate rounded-full bg-purple-50 px-2 py-1 text-xs text-purple-600 shadow-sm dark:bg-purple-500/20 dark:text-purple-100 sm:text-sm", children: bucket.computedLabel }) }), jsx("span", { className: "flex min-w-0 justify-end", children: jsx("span", { className: "text-right text-base font-semibold leading-tight text-gray-500 dark:text-slate-100 sm:text-lg", title: balanceDisplay, children: balanceDisplay }) })] }), jsx("div", { className: "mt-3 flex justify-end gap-2", children: jsxs("span", { className: "text-[11px] text-gray-500 dark:text-slate-100 sm:text-xs", children: [translations.expiredAtLabel, ": ", bucket.expiresAt] }) })] }, bucket.kind));
-                        }) })) : (jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), jsx(GradientButton, { title: translations.onetimeBuy, icon: jsx(ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })] })] }));
+                        }) })) : (jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), onetimeBillingEnabled ? (jsx(GradientButton, { title: translations.onetimeBuy, icon: jsx(ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })) : null] })] }));
 }
 function deriveStatus(expiresAt, thresholdDays = 7) {
     if (!expiresAt) {

package/dist/main/credit/credit-overview-nav-client.d.ts

@@ -1,5 +1,6 @@
 import { type CreditOverviewTranslations } from './credit-overview-client';
 import type { CreditOverviewData } from './types';
+export declare const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = "windrun-huaiin:credit-overview:refresh";
 export interface CreditOverviewPayload {
     data: CreditOverviewData;
     totalLabel: string;
@@ -8,5 +9,24 @@ export interface CreditOverviewPayload {
 export interface CreditOverviewNavClientProps {
     locale: string;
     endpoint: string;
+    /**
+     * Billing types enabled by the business app.
+     * Defaults are handled by the API/payload builder when omitted.
+     */
+    enabledBillingTypes?: string[];
+    /**
+     * Browser event names that should trigger credit overview reload.
+     * Business apps can dispatch these events after credit balance changes.
+     *
+     * Default: ['windrun:credit-overview:refresh']
+     * Empty array means event listening is disabled.
+     */
+    refreshEvents?: string[];
+    /**
+     * Optional debounce for refresh event bursts.
+     * Default: 300ms.
+     */
+    refreshDebounceMs?: number;
 }
-export declare function CreditOverviewNavClient({ locale, endpoint, }: CreditOverviewNavClientProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function dispatchCreditOverviewRefresh(eventName?: string): void;
+export declare function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, refreshEvents, refreshDebounceMs, }: CreditOverviewNavClientProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/main/credit/credit-overview-nav-client.js

@@ -8,54 +8,130 @@ var React = require('react');
 var creditNavButton = require('./credit-nav-button.js');
 var creditOverviewClient = require('./credit-overview-client.js');
 
-function buildCreditOverviewUrl(endpoint, locale) {
+const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = 'windrun-huaiin:credit-overview:refresh';
+function normalizeEnabledBillingTypes(enabledBillingTypes) {
+    if (!(enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length)) {
+        return [];
+    }
+    return Array.from(new Set(enabledBillingTypes
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => billingType.length > 0)));
+}
+function buildEnabledBillingTypesKey(enabledBillingTypes) {
+    return normalizeEnabledBillingTypes(enabledBillingTypes).join('\n');
+}
+function buildCreditOverviewUrl(endpoint, locale, enabledBillingTypes) {
     const url = new URL(endpoint, window.location.origin);
     url.searchParams.set('locale', locale);
+    for (const billingType of enabledBillingTypes) {
+        url.searchParams.append('enabledBillingTypes', billingType);
+    }
     return url.toString();
 }
-function CreditOverviewNavClient({ locale, endpoint, }) {
+function normalizeRefreshEvents(refreshEvents) {
+    const events = refreshEvents !== null && refreshEvents !== void 0 ? refreshEvents : [DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT];
+    return Array.from(new Set(events
+        .map((eventName) => eventName.trim())
+        .filter((eventName) => eventName.length > 0)));
+}
+function buildRefreshEventsKey(refreshEvents) {
+    return normalizeRefreshEvents(refreshEvents).join('\n');
+}
+function dispatchCreditOverviewRefresh(eventName = DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    window.dispatchEvent(new CustomEvent(eventName));
+}
+function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, refreshEvents, refreshDebounceMs = 300, }) {
     const { isLoaded, isSignedIn, userId } = nextjs.useAuth();
     const [payload, setPayload] = React.useState(null);
+    const abortControllerRef = React.useRef(null);
+    const isMountedRef = React.useRef(false);
+    const refreshEventsKey = buildRefreshEventsKey(refreshEvents);
+    const normalizedRefreshEvents = React.useMemo(() => refreshEventsKey.split('\n').filter(Boolean), [refreshEventsKey]);
+    const enabledBillingTypesKey = buildEnabledBillingTypesKey(enabledBillingTypes);
+    const normalizedEnabledBillingTypes = React.useMemo(() => enabledBillingTypesKey.split('\n').filter(Boolean), [enabledBillingTypesKey]);
     React.useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            var _a;
+            isMountedRef.current = false;
+            (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+        };
+    }, []);
+    const loadCreditOverview = React.useCallback(() => tslib.__awaiter(this, void 0, void 0, function* () {
+        var _a;
+        (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+        try {
+            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale, normalizedEnabledBillingTypes), {
+                cache: 'no-store',
+                credentials: 'same-origin',
+                signal: controller.signal,
+            });
+            if (!response.ok) {
+                if (!controller.signal.aborted && isMountedRef.current) {
+                    setPayload(null);
+                }
+                return;
+            }
+            const nextPayload = (yield response.json());
+            if (!controller.signal.aborted && isMountedRef.current) {
+                setPayload(nextPayload);
+            }
+        }
+        catch (error) {
+            if (!controller.signal.aborted && isMountedRef.current) {
+                setPayload(null);
+                console.warn('[CreditOverviewNavClient] Failed to load credit overview', error);
+            }
+        }
+        finally {
+            if (abortControllerRef.current === controller) {
+                abortControllerRef.current = null;
+            }
+        }
+    }), [endpoint, locale, normalizedEnabledBillingTypes]);
+    React.useEffect(() => {
+        var _a;
         if (!isLoaded) {
             return;
         }
         if (!isSignedIn) {
+            (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+            abortControllerRef.current = null;
             setPayload(null);
             return;
         }
-        const controller = new AbortController();
-        function loadCreditOverview() {
-            return tslib.__awaiter(this, void 0, void 0, function* () {
-                try {
-                    const response = yield fetch(buildCreditOverviewUrl(endpoint, locale), {
-                        credentials: 'same-origin',
-                        signal: controller.signal,
-                    });
-                    if (!response.ok) {
-                        if (!controller.signal.aborted) {
-                            setPayload(null);
-                        }
-                        return;
-                    }
-                    const nextPayload = (yield response.json());
-                    if (!controller.signal.aborted) {
-                        setPayload(nextPayload);
-                    }
-                }
-                catch (error) {
-                    if (!controller.signal.aborted) {
-                        setPayload(null);
-                        console.warn('[CreditOverviewNavClient] Failed to load credit overview', error);
-                    }
-                }
-            });
+        void loadCreditOverview();
+    }, [isLoaded, isSignedIn, loadCreditOverview, userId]);
+    React.useEffect(() => {
+        if (!isLoaded || !isSignedIn || normalizedRefreshEvents.length === 0) {
+            return;
+        }
+        let debounceTimer = null;
+        const refresh = () => {
+            if (debounceTimer) {
+                window.clearTimeout(debounceTimer);
+            }
+            debounceTimer = window.setTimeout(() => {
+                void loadCreditOverview();
+            }, refreshDebounceMs);
+        };
+        for (const eventName of normalizedRefreshEvents) {
+            window.addEventListener(eventName, refresh);
         }
-        loadCreditOverview();
         return () => {
-            controller.abort();
+            if (debounceTimer) {
+                window.clearTimeout(debounceTimer);
+            }
+            for (const eventName of normalizedRefreshEvents) {
+                window.removeEventListener(eventName, refresh);
+            }
         };
-    }, [endpoint, isLoaded, isSignedIn, locale, userId]);
+    }, [isLoaded, isSignedIn, loadCreditOverview, normalizedRefreshEvents, refreshDebounceMs]);
     if (!payload) {
         return null;
     }
@@ -63,3 +139,5 @@ function CreditOverviewNavClient({ locale, endpoint, }) {
 }
 
 exports.CreditOverviewNavClient = CreditOverviewNavClient;
+exports.DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT;
+exports.dispatchCreditOverviewRefresh = dispatchCreditOverviewRefresh;

package/dist/main/credit/credit-overview-nav-client.mjs

@@ -2,62 +2,138 @@
 import { __awaiter } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { useAuth } from '@clerk/nextjs';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { CreditNavButton } from './credit-nav-button.mjs';
 import { CreditOverviewClient } from './credit-overview-client.mjs';
 
-function buildCreditOverviewUrl(endpoint, locale) {
+const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = 'windrun-huaiin:credit-overview:refresh';
+function normalizeEnabledBillingTypes(enabledBillingTypes) {
+    if (!(enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length)) {
+        return [];
+    }
+    return Array.from(new Set(enabledBillingTypes
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => billingType.length > 0)));
+}
+function buildEnabledBillingTypesKey(enabledBillingTypes) {
+    return normalizeEnabledBillingTypes(enabledBillingTypes).join('\n');
+}
+function buildCreditOverviewUrl(endpoint, locale, enabledBillingTypes) {
     const url = new URL(endpoint, window.location.origin);
     url.searchParams.set('locale', locale);
+    for (const billingType of enabledBillingTypes) {
+        url.searchParams.append('enabledBillingTypes', billingType);
+    }
     return url.toString();
 }
-function CreditOverviewNavClient({ locale, endpoint, }) {
+function normalizeRefreshEvents(refreshEvents) {
+    const events = refreshEvents !== null && refreshEvents !== void 0 ? refreshEvents : [DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT];
+    return Array.from(new Set(events
+        .map((eventName) => eventName.trim())
+        .filter((eventName) => eventName.length > 0)));
+}
+function buildRefreshEventsKey(refreshEvents) {
+    return normalizeRefreshEvents(refreshEvents).join('\n');
+}
+function dispatchCreditOverviewRefresh(eventName = DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    window.dispatchEvent(new CustomEvent(eventName));
+}
+function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, refreshEvents, refreshDebounceMs = 300, }) {
     const { isLoaded, isSignedIn, userId } = useAuth();
     const [payload, setPayload] = useState(null);
+    const abortControllerRef = useRef(null);
+    const isMountedRef = useRef(false);
+    const refreshEventsKey = buildRefreshEventsKey(refreshEvents);
+    const normalizedRefreshEvents = useMemo(() => refreshEventsKey.split('\n').filter(Boolean), [refreshEventsKey]);
+    const enabledBillingTypesKey = buildEnabledBillingTypesKey(enabledBillingTypes);
+    const normalizedEnabledBillingTypes = useMemo(() => enabledBillingTypesKey.split('\n').filter(Boolean), [enabledBillingTypesKey]);
     useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            var _a;
+            isMountedRef.current = false;
+            (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+        };
+    }, []);
+    const loadCreditOverview = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+        try {
+            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale, normalizedEnabledBillingTypes), {
+                cache: 'no-store',
+                credentials: 'same-origin',
+                signal: controller.signal,
+            });
+            if (!response.ok) {
+                if (!controller.signal.aborted && isMountedRef.current) {
+                    setPayload(null);
+                }
+                return;
+            }
+            const nextPayload = (yield response.json());
+            if (!controller.signal.aborted && isMountedRef.current) {
+                setPayload(nextPayload);
+            }
+        }
+        catch (error) {
+            if (!controller.signal.aborted && isMountedRef.current) {
+                setPayload(null);
+                console.warn('[CreditOverviewNavClient] Failed to load credit overview', error);
+            }
+        }
+        finally {
+            if (abortControllerRef.current === controller) {
+                abortControllerRef.current = null;
+            }
+        }
+    }), [endpoint, locale, normalizedEnabledBillingTypes]);
+    useEffect(() => {
+        var _a;
         if (!isLoaded) {
             return;
         }
         if (!isSignedIn) {
+            (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+            abortControllerRef.current = null;
             setPayload(null);
             return;
         }
-        const controller = new AbortController();
-        function loadCreditOverview() {
-            return __awaiter(this, void 0, void 0, function* () {
-                try {
-                    const response = yield fetch(buildCreditOverviewUrl(endpoint, locale), {
-                        credentials: 'same-origin',
-                        signal: controller.signal,
-                    });
-                    if (!response.ok) {
-                        if (!controller.signal.aborted) {
-                            setPayload(null);
-                        }
-                        return;
-                    }
-                    const nextPayload = (yield response.json());
-                    if (!controller.signal.aborted) {
-                        setPayload(nextPayload);
-                    }
-                }
-                catch (error) {
-                    if (!controller.signal.aborted) {
-                        setPayload(null);
-                        console.warn('[CreditOverviewNavClient] Failed to load credit overview', error);
-                    }
-                }
-            });
+        void loadCreditOverview();
+    }, [isLoaded, isSignedIn, loadCreditOverview, userId]);
+    useEffect(() => {
+        if (!isLoaded || !isSignedIn || normalizedRefreshEvents.length === 0) {
+            return;
+        }
+        let debounceTimer = null;
+        const refresh = () => {
+            if (debounceTimer) {
+                window.clearTimeout(debounceTimer);
+            }
+            debounceTimer = window.setTimeout(() => {
+                void loadCreditOverview();
+            }, refreshDebounceMs);
+        };
+        for (const eventName of normalizedRefreshEvents) {
+            window.addEventListener(eventName, refresh);
         }
-        loadCreditOverview();
         return () => {
-            controller.abort();
+            if (debounceTimer) {
+                window.clearTimeout(debounceTimer);
+            }
+            for (const eventName of normalizedRefreshEvents) {
+                window.removeEventListener(eventName, refresh);
+            }
         };
-    }, [endpoint, isLoaded, isSignedIn, locale, userId]);
+    }, [isLoaded, isSignedIn, loadCreditOverview, normalizedRefreshEvents, refreshDebounceMs]);
     if (!payload) {
         return null;
     }
     return (jsx(CreditNavButton, { locale: locale, totalBalance: payload.data.totalBalance, totalLabel: payload.totalLabel, children: jsx(CreditOverviewClient, { locale: locale, data: payload.data, translations: payload.translations }) }));
 }
 
-export { CreditOverviewNavClient };
+export { CreditOverviewNavClient, DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT, dispatchCreditOverviewRefresh };

package/dist/main/credit/index.d.ts

@@ -1,5 +1,5 @@
 export { CreditOverviewClient } from './credit-overview-client';
-export { CreditOverviewNavClient } from './credit-overview-nav-client';
+export { CreditOverviewNavClient, DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT, dispatchCreditOverviewRefresh, } from './credit-overview-nav-client';
 export { CreditNavButton } from './credit-nav-button';
 export type { CreditOverviewTranslations } from './credit-overview-client';
 export type { CreditOverviewNavClientProps, CreditOverviewPayload, } from './credit-overview-nav-client';

package/dist/main/credit/index.js

@@ -9,4 +9,6 @@ var creditNavButton = require('./credit-nav-button.js');
 
 exports.CreditOverviewClient = creditOverviewClient.CreditOverviewClient;
 exports.CreditOverviewNavClient = creditOverviewNavClient.CreditOverviewNavClient;
+exports.DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = creditOverviewNavClient.DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT;
+exports.dispatchCreditOverviewRefresh = creditOverviewNavClient.dispatchCreditOverviewRefresh;
 exports.CreditNavButton = creditNavButton.CreditNavButton;

package/dist/main/credit/index.mjs

@@ -1,4 +1,4 @@
 "use client";
 export { CreditOverviewClient } from './credit-overview-client.mjs';
-export { CreditOverviewNavClient } from './credit-overview-nav-client.mjs';
+export { CreditOverviewNavClient, DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT, dispatchCreditOverviewRefresh } from './credit-overview-nav-client.mjs';
 export { CreditNavButton } from './credit-nav-button.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "31.3.5",
+  "version": "31.3.7",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -243,9 +243,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^31.0.1",
     "@windrun-huaiin/contracts": "^31.0.0",
-    "@windrun-huaiin/lib": "^31.0.3"
+    "@windrun-huaiin/lib": "^31.0.3",
+    "@windrun-huaiin/base-ui": "^31.0.1"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/main/credit/credit-overview-client.tsx

@@ -128,6 +128,11 @@ export function CreditOverviewClient({
   const subscription = data.subscription;
   const pricingContext = data.pricingContext;
   const ctaBehaviors = data.ctaBehaviors;
+  const billingOptions = pricingContext?.moneyPriceData.billingSwitch.options ?? [];
+  const subscriptionBillingEnabled = billingOptions.some(
+    (option) => option.key === 'monthly' || option.key === 'yearly',
+  );
+  const onetimeBillingEnabled = billingOptions.some((option) => option.key === 'onetime');
   const getModalMoneyPriceData = useCallback(
     (mode: PricingModalMode) => {
       if (!pricingContext) {
@@ -383,24 +388,28 @@ export function CreditOverviewClient({
           <div className="flex justify-center text-3xl font-semibold leading-tight sm:text-4xl">
             {formatNumber(locale, data.totalBalance)}
           </div>
-          <div className="flex-1 flex-col gap-1">
-            <p className="text-xs text-gray-700 dark:text-slate-100 sm:text-sm">
-              {translations.subscriptionPeriodLabel}
-            </p>
-            <h4 className="text-xl font-semibold sm:text-2xl">
-              {subscription ? subscription.planName : translations.subscriptionInactive}
-            </h4>
-          </div>
-          <div className="pt-2 sm:pt-0">
-            <GradientButton
-              title={subscription ? translations.subscriptionManage : translations.subscribePay}
-              align="center"
-              icon={subscription ? <Settings2Icon /> : <BellIcon />}
-              openInNewTab={false}
-              className="w-full"
-              onClick={subscription ? handleManageAction : handleSubscribeAction}
-            />
-          </div>
+          {subscriptionBillingEnabled ? (
+            <>
+              <div className="flex-1 flex-col gap-1">
+                <p className="text-xs text-gray-700 dark:text-slate-100 sm:text-sm">
+                  {translations.subscriptionPeriodLabel}
+                </p>
+                <h4 className="text-xl font-semibold sm:text-2xl">
+                  {subscription ? subscription.planName : translations.subscriptionInactive}
+                </h4>
+              </div>
+              <div className="pt-2 sm:pt-0">
+                <GradientButton
+                  title={subscription ? translations.subscriptionManage : translations.subscribePay}
+                  align="center"
+                  icon={subscription ? <Settings2Icon /> : <BellIcon />}
+                  openInNewTab={false}
+                  className="w-full"
+                  onClick={subscription ? handleManageAction : handleSubscribeAction}
+                />
+              </div>
+            </>
+          ) : null}
         </div>
         <div className="absolute right-3 top-3 sm:right-6 sm:top-6">
           <HoverInfo
@@ -482,13 +491,15 @@ export function CreditOverviewClient({
             {translations.bucketsEmpty}
           </div>
         )}
-        <GradientButton
-          title={translations.onetimeBuy}
-          icon={<ShoppingCartIcon />}
-          align="center"
-          className="w-full text-sm sm:text-base"
-          onClick={handleOnetimeAction}
-        />
+        {onetimeBillingEnabled ? (
+          <GradientButton
+            title={translations.onetimeBuy}
+            icon={<ShoppingCartIcon />}
+            align="center"
+            className="w-full text-sm sm:text-base"
+            onClick={handleOnetimeAction}
+          />
+        ) : null}
       </section>
     </section>
   );

package/src/main/credit/credit-overview-nav-client.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import { useAuth } from '@clerk/nextjs';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CreditNavButton } from './credit-nav-button';
 import { CreditOverviewClient, type CreditOverviewTranslations } from './credit-overview-client';
 import type { CreditOverviewData } from './types';
 
+export const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = 'windrun-huaiin:credit-overview:refresh';
+
 export interface CreditOverviewPayload {
   data: CreditOverviewData;
   totalLabel: string;
@@ -15,20 +17,152 @@ export interface CreditOverviewPayload {
 export interface CreditOverviewNavClientProps {
   locale: string;
   endpoint: string;
+  /**
+   * Billing types enabled by the business app.
+   * Defaults are handled by the API/payload builder when omitted.
+   */
+  enabledBillingTypes?: string[];
+  /**
+   * Browser event names that should trigger credit overview reload.
+   * Business apps can dispatch these events after credit balance changes.
+   *
+   * Default: ['windrun:credit-overview:refresh']
+   * Empty array means event listening is disabled.
+   */
+  refreshEvents?: string[];
+  /**
+   * Optional debounce for refresh event bursts.
+   * Default: 300ms.
+   */
+  refreshDebounceMs?: number;
+}
+
+function normalizeEnabledBillingTypes(enabledBillingTypes: string[] | undefined) {
+  if (!enabledBillingTypes?.length) {
+    return [];
+  }
+
+  return Array.from(
+    new Set(
+      enabledBillingTypes
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => billingType.length > 0),
+    ),
+  );
+}
+
+function buildEnabledBillingTypesKey(enabledBillingTypes: string[] | undefined) {
+  return normalizeEnabledBillingTypes(enabledBillingTypes).join('\n');
 }
 
-function buildCreditOverviewUrl(endpoint: string, locale: string) {
+function buildCreditOverviewUrl(
+  endpoint: string,
+  locale: string,
+  enabledBillingTypes: string[],
+) {
   const url = new URL(endpoint, window.location.origin);
   url.searchParams.set('locale', locale);
+  for (const billingType of enabledBillingTypes) {
+    url.searchParams.append('enabledBillingTypes', billingType);
+  }
   return url.toString();
 }
 
+function normalizeRefreshEvents(refreshEvents: string[] | undefined) {
+  const events = refreshEvents ?? [DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT];
+  return Array.from(
+    new Set(
+      events
+        .map((eventName) => eventName.trim())
+        .filter((eventName) => eventName.length > 0),
+    ),
+  );
+}
+
+function buildRefreshEventsKey(refreshEvents: string[] | undefined) {
+  return normalizeRefreshEvents(refreshEvents).join('\n');
+}
+
+export function dispatchCreditOverviewRefresh(
+  eventName = DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT,
+) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.dispatchEvent(new CustomEvent(eventName));
+}
+
 export function CreditOverviewNavClient({
   locale,
   endpoint,
+  enabledBillingTypes,
+  refreshEvents,
+  refreshDebounceMs = 300,
 }: CreditOverviewNavClientProps) {
   const { isLoaded, isSignedIn, userId } = useAuth();
   const [payload, setPayload] = useState<CreditOverviewPayload | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const isMountedRef = useRef(false);
+  const refreshEventsKey = buildRefreshEventsKey(refreshEvents);
+  const normalizedRefreshEvents = useMemo(
+    () => refreshEventsKey.split('\n').filter(Boolean),
+    [refreshEventsKey],
+  );
+  const enabledBillingTypesKey = buildEnabledBillingTypesKey(enabledBillingTypes);
+  const normalizedEnabledBillingTypes = useMemo(
+    () => enabledBillingTypesKey.split('\n').filter(Boolean),
+    [enabledBillingTypesKey],
+  );
+
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    return () => {
+      isMountedRef.current = false;
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  const loadCreditOverview = useCallback(async () => {
+    abortControllerRef.current?.abort();
+
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+
+    try {
+      const response = await fetch(buildCreditOverviewUrl(
+        endpoint,
+        locale,
+        normalizedEnabledBillingTypes,
+      ), {
+        cache: 'no-store',
+        credentials: 'same-origin',
+        signal: controller.signal,
+      });
+
+      if (!response.ok) {
+        if (!controller.signal.aborted && isMountedRef.current) {
+          setPayload(null);
+        }
+        return;
+      }
+
+      const nextPayload = (await response.json()) as CreditOverviewPayload | null;
+      if (!controller.signal.aborted && isMountedRef.current) {
+        setPayload(nextPayload);
+      }
+    } catch (error) {
+      if (!controller.signal.aborted && isMountedRef.current) {
+        setPayload(null);
+        console.warn('[CreditOverviewNavClient] Failed to load credit overview', error);
+      }
+    } finally {
+      if (abortControllerRef.current === controller) {
+        abortControllerRef.current = null;
+      }
+    }
+  }, [endpoint, locale, normalizedEnabledBillingTypes]);
 
   useEffect(() => {
     if (!isLoaded) {
@@ -36,44 +170,46 @@ export function CreditOverviewNavClient({
     }
 
     if (!isSignedIn) {
+      abortControllerRef.current?.abort();
+      abortControllerRef.current = null;
       setPayload(null);
       return;
     }
 
-    const controller = new AbortController();
+    void loadCreditOverview();
+  }, [isLoaded, isSignedIn, loadCreditOverview, userId]);
 
-    async function loadCreditOverview() {
-      try {
-        const response = await fetch(buildCreditOverviewUrl(endpoint, locale), {
-          credentials: 'same-origin',
-          signal: controller.signal,
-        });
-
-        if (!response.ok) {
-          if (!controller.signal.aborted) {
-            setPayload(null);
-          }
-          return;
-        }
+  useEffect(() => {
+    if (!isLoaded || !isSignedIn || normalizedRefreshEvents.length === 0) {
+      return;
+    }
 
-        const nextPayload = (await response.json()) as CreditOverviewPayload | null;
-        if (!controller.signal.aborted) {
-          setPayload(nextPayload);
-        }
-      } catch (error) {
-        if (!controller.signal.aborted) {
-          setPayload(null);
-          console.warn('[CreditOverviewNavClient] Failed to load credit overview', error);
-        }
+    let debounceTimer: number | null = null;
+
+    const refresh = () => {
+      if (debounceTimer) {
+        window.clearTimeout(debounceTimer);
       }
-    }
 
-    loadCreditOverview();
+      debounceTimer = window.setTimeout(() => {
+        void loadCreditOverview();
+      }, refreshDebounceMs);
+    };
+
+    for (const eventName of normalizedRefreshEvents) {
+      window.addEventListener(eventName, refresh);
+    }
 
     return () => {
-      controller.abort();
+      if (debounceTimer) {
+        window.clearTimeout(debounceTimer);
+      }
+
+      for (const eventName of normalizedRefreshEvents) {
+        window.removeEventListener(eventName, refresh);
+      }
     };
-  }, [endpoint, isLoaded, isSignedIn, locale, userId]);
+  }, [isLoaded, isSignedIn, loadCreditOverview, normalizedRefreshEvents, refreshDebounceMs]);
 
   if (!payload) {
     return null;

package/src/main/credit/index.ts

@@ -1,7 +1,11 @@
 'use client';
 
 export { CreditOverviewClient } from './credit-overview-client';
-export { CreditOverviewNavClient } from './credit-overview-nav-client';
+export {
+  CreditOverviewNavClient,
+  DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT,
+  dispatchCreditOverviewRefresh,
+} from './credit-overview-nav-client';
 export { CreditNavButton } from './credit-nav-button';
 export type { CreditOverviewTranslations } from './credit-overview-client';
 export type {