@windrun-huaiin/third-ui 31.3.6 → 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

@@ -9,6 +9,11 @@ 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.
@@ -24,4 +29,4 @@ export interface CreditOverviewNavClientProps {
     refreshDebounceMs?: number;
 }
 export declare function dispatchCreditOverviewRefresh(eventName?: string): void;
-export declare function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebounceMs, }: CreditOverviewNavClientProps): import("react/jsx-runtime").JSX.Element | null;
+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

@@ -9,9 +9,23 @@ var creditNavButton = require('./credit-nav-button.js');
 var creditOverviewClient = require('./credit-overview-client.js');
 
 const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = 'windrun-huaiin:credit-overview:refresh';
-function buildCreditOverviewUrl(endpoint, locale) {
+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 normalizeRefreshEvents(refreshEvents) {
@@ -29,13 +43,15 @@ function dispatchCreditOverviewRefresh(eventName = DEFAULT_CREDIT_OVERVIEW_REFRE
     }
     window.dispatchEvent(new CustomEvent(eventName));
 }
-function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebounceMs = 300, }) {
+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 () => {
@@ -50,7 +66,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
         const controller = new AbortController();
         abortControllerRef.current = controller;
         try {
-            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale), {
+            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale, normalizedEnabledBillingTypes), {
                 cache: 'no-store',
                 credentials: 'same-origin',
                 signal: controller.signal,
@@ -77,7 +93,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
                 abortControllerRef.current = null;
             }
         }
-    }), [endpoint, locale]);
+    }), [endpoint, locale, normalizedEnabledBillingTypes]);
     React.useEffect(() => {
         var _a;
         if (!isLoaded) {

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

@@ -7,9 +7,23 @@ import { CreditNavButton } from './credit-nav-button.mjs';
 import { CreditOverviewClient } from './credit-overview-client.mjs';
 
 const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = 'windrun-huaiin:credit-overview:refresh';
-function buildCreditOverviewUrl(endpoint, locale) {
+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 normalizeRefreshEvents(refreshEvents) {
@@ -27,13 +41,15 @@ function dispatchCreditOverviewRefresh(eventName = DEFAULT_CREDIT_OVERVIEW_REFRE
     }
     window.dispatchEvent(new CustomEvent(eventName));
 }
-function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebounceMs = 300, }) {
+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 () => {
@@ -48,7 +64,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
         const controller = new AbortController();
         abortControllerRef.current = controller;
         try {
-            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale), {
+            const response = yield fetch(buildCreditOverviewUrl(endpoint, locale, normalizedEnabledBillingTypes), {
                 cache: 'no-store',
                 credentials: 'same-origin',
                 signal: controller.signal,
@@ -75,7 +91,7 @@ function CreditOverviewNavClient({ locale, endpoint, refreshEvents, refreshDebou
                 abortControllerRef.current = null;
             }
         }
-    }), [endpoint, locale]);
+    }), [endpoint, locale, normalizedEnabledBillingTypes]);
     useEffect(() => {
         var _a;
         if (!isLoaded) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "31.3.6",
+  "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

@@ -17,6 +17,11 @@ 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.
@@ -32,9 +37,34 @@ export interface CreditOverviewNavClientProps {
   refreshDebounceMs?: number;
 }
 
-function buildCreditOverviewUrl(endpoint: string, locale: string) {
+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,
+  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();
 }
 
@@ -66,6 +96,7 @@ export function dispatchCreditOverviewRefresh(
 export function CreditOverviewNavClient({
   locale,
   endpoint,
+  enabledBillingTypes,
   refreshEvents,
   refreshDebounceMs = 300,
 }: CreditOverviewNavClientProps) {
@@ -78,6 +109,11 @@ export function CreditOverviewNavClient({
     () => refreshEventsKey.split('\n').filter(Boolean),
     [refreshEventsKey],
   );
+  const enabledBillingTypesKey = buildEnabledBillingTypesKey(enabledBillingTypes);
+  const normalizedEnabledBillingTypes = useMemo(
+    () => enabledBillingTypesKey.split('\n').filter(Boolean),
+    [enabledBillingTypesKey],
+  );
 
   useEffect(() => {
     isMountedRef.current = true;
@@ -95,7 +131,11 @@ export function CreditOverviewNavClient({
     abortControllerRef.current = controller;
 
     try {
-      const response = await fetch(buildCreditOverviewUrl(endpoint, locale), {
+      const response = await fetch(buildCreditOverviewUrl(
+        endpoint,
+        locale,
+        normalizedEnabledBillingTypes,
+      ), {
         cache: 'no-store',
         credentials: 'same-origin',
         signal: controller.signal,
@@ -122,7 +162,7 @@ export function CreditOverviewNavClient({
         abortControllerRef.current = null;
       }
     }
-  }, [endpoint, locale]);
+  }, [endpoint, locale, normalizedEnabledBillingTypes]);
 
   useEffect(() => {
     if (!isLoaded) {