@windrun-huaiin/third-ui 31.3.6 → 31.4.0

package/dist/main/money-price/money-price.mjs

@@ -5,13 +5,13 @@ import { MoneyPriceInteractive } from './money-price-interactive.mjs';
 import { buildMoneyPriceData } from './money-price-data.mjs';
 
 function MoneyPrice(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, enableSubscriptionUpgrade = true, initUserContext, initialBillingType, }) {
+    return __awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade = true, initUserContext, initialBillingType, }) {
         const data = yield buildMoneyPriceData({
             locale,
             currency: config.display.currency,
             enabledBillingTypes,
         });
-        return (jsxs("section", { id: "money-pricing", className: cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto", children: data.subtitle }), jsx(MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initUserContext: initUserContext, initialBillingType: initialBillingType })] }));
+        return (jsxs("section", { id: "money-pricing", className: cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto", children: data.subtitle }), jsx(MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initUserContext: initUserContext, initialBillingType: initialBillingType })] }));
     });
 }
 

package/dist/main/money-price/pricing-modal.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import type { InitUserContext, MoneyPriceConfig, MoneyPriceData } from './money-price-types';
+export interface OpenPricingModalOptions {
+    billingType?: string;
+}
+export interface PricingModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    data: MoneyPriceData;
+    config: MoneyPriceConfig;
+    billingType?: string;
+    checkoutApiEndpoint?: string;
+    customerPortalApiEndpoint?: string;
+    enableClerkModal?: boolean;
+    enabledBillingTypes?: string[];
+    mobileBillingSwitchBehavior?: 'sticky' | 'static';
+    enableSubscriptionUpgrade?: boolean;
+    initUserContext?: InitUserContext;
+    isInitLoading?: boolean;
+}
+export interface PricingModalProviderProps extends Omit<PricingModalProps, 'open' | 'onOpenChange' | 'billingType'> {
+    children: ReactNode;
+    pricingContextEndpoint?: string;
+}
+interface PricingModalContextValue {
+    openPricingModal: (options?: OpenPricingModalOptions) => void;
+    closePricingModal: () => void;
+    isPricingModalOpen: boolean;
+}
+export declare function PricingModal({ open, onOpenChange, data, config, billingType, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade, initUserContext, isInitLoading, }: PricingModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function PricingModalProvider({ children, pricingContextEndpoint, initUserContext: initUserContextProp, isInitLoading: isInitLoadingProp, ...modalProps }: PricingModalProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function usePricingModal(): PricingModalContextValue;
+export {};

package/dist/main/money-price/pricing-modal.js

@@ -0,0 +1,109 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var ui = require('@windrun-huaiin/base-ui/ui');
+var utils = require('@windrun-huaiin/lib/utils');
+var React = require('react');
+var dialogStyles = require('../alert-dialog/dialog-styles.js');
+var moneyPriceInteractive = require('./money-price-interactive.js');
+
+const emptyInitUserContext = {
+    fingerprintId: null,
+    xUser: null,
+    xCredit: null,
+    xSubscription: null,
+    isClerkAuthenticated: false,
+};
+const PricingModalContext = React.createContext(null);
+function normalizeEnabledBillingTypes(data, enabledBillingTypes) {
+    const availableKeys = data.billingSwitch.options.map((option) => option.key);
+    const configuredKeys = (enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length) ? enabledBillingTypes : availableKeys;
+    return Array.from(new Set(configuredKeys
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => availableKeys.includes(billingType))));
+}
+function resolveBillingType({ data, enabledBillingTypes, requestedBillingType, }) {
+    var _a, _b;
+    const enabledKeys = normalizeEnabledBillingTypes(data, enabledBillingTypes);
+    if (requestedBillingType && enabledKeys.includes(requestedBillingType)) {
+        return requestedBillingType;
+    }
+    if (enabledKeys.includes(data.billingSwitch.defaultKey)) {
+        return data.billingSwitch.defaultKey;
+    }
+    return (_a = enabledKeys[0]) !== null && _a !== void 0 ? _a : (_b = data.billingSwitch.options[0]) === null || _b === void 0 ? void 0 : _b.key;
+}
+function PricingModal({ open, onOpenChange, data, config, billingType, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade = true, initUserContext, isInitLoading = false, }) {
+    const resolvedBillingType = React.useMemo(() => resolveBillingType({
+        data,
+        enabledBillingTypes,
+        requestedBillingType: billingType,
+    }), [billingType, data, enabledBillingTypes]);
+    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: open ? (jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn('mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10', lib.themeMainBgColor), overlayClassName: dialogStyles.dialogThemedOverlayClass, children: [jsxRuntime.jsxs(ui.AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsxRuntime.jsx("span", { className: "text-2xl font-semibold leading-tight", children: data.title }), data.subtitle ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: data.subtitle })) : null] }) }), jsxRuntime.jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: () => onOpenChange(false), children: jsxRuntime.jsx(icons.XIcon, { className: "h-6 w-6" }) })] }), jsxRuntime.jsx("div", { className: "max-h-[60vh] overflow-y-auto px-4 pt-2 pb-6 sm:max-h-[80vh]", children: jsxRuntime.jsx("div", { className: "mx-auto w-full", children: jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initialBillingType: resolvedBillingType, disableAutoDetectBilling: resolvedBillingType === 'onetime', initUserContext: initUserContext, isInitLoading: isInitLoading }, resolvedBillingType !== null && resolvedBillingType !== void 0 ? resolvedBillingType : 'default') }) })] })) : null }));
+}
+function PricingModalProvider(_a) {
+    var { children, pricingContextEndpoint, initUserContext: initUserContextProp, isInitLoading: isInitLoadingProp = false } = _a, modalProps = tslib.__rest(_a, ["children", "pricingContextEndpoint", "initUserContext", "isInitLoading"]);
+    const [open, setOpen] = React.useState(false);
+    const [requestedBillingType, setRequestedBillingType] = React.useState();
+    const [loadedInitUserContext, setLoadedInitUserContext] = React.useState(initUserContextProp !== null && initUserContextProp !== void 0 ? initUserContextProp : emptyInitUserContext);
+    const [isContextLoading, setIsContextLoading] = React.useState(false);
+    const loadedContextRef = React.useRef(!!initUserContextProp);
+    React.useEffect(() => {
+        if (initUserContextProp) {
+            loadedContextRef.current = true;
+            setLoadedInitUserContext(initUserContextProp);
+        }
+    }, [initUserContextProp]);
+    const loadPricingContext = React.useCallback(() => tslib.__awaiter(this, void 0, void 0, function* () {
+        if (!pricingContextEndpoint || loadedContextRef.current) {
+            return;
+        }
+        setIsContextLoading(true);
+        try {
+            const response = yield fetch(pricingContextEndpoint, {
+                credentials: 'same-origin',
+            });
+            if (!response.ok) {
+                return;
+            }
+            const nextContext = (yield response.json());
+            loadedContextRef.current = true;
+            setLoadedInitUserContext(nextContext);
+        }
+        catch (error) {
+            console.warn('[PricingModalProvider] Failed to load pricing context', error);
+        }
+        finally {
+            setIsContextLoading(false);
+        }
+    }), [pricingContextEndpoint]);
+    const openPricingModal = React.useCallback((options) => {
+        setRequestedBillingType(options === null || options === void 0 ? void 0 : options.billingType);
+        setOpen(true);
+        void loadPricingContext();
+    }, [loadPricingContext]);
+    const closePricingModal = React.useCallback(() => {
+        setOpen(false);
+    }, []);
+    const contextValue = React.useMemo(() => ({
+        openPricingModal,
+        closePricingModal,
+        isPricingModalOpen: open,
+    }), [closePricingModal, open, openPricingModal]);
+    return (jsxRuntime.jsxs(PricingModalContext.Provider, { value: contextValue, children: [children, jsxRuntime.jsx(PricingModal, Object.assign({}, modalProps, { open: open, onOpenChange: setOpen, billingType: requestedBillingType, initUserContext: initUserContextProp !== null && initUserContextProp !== void 0 ? initUserContextProp : loadedInitUserContext, isInitLoading: isInitLoadingProp || isContextLoading }))] }));
+}
+function usePricingModal() {
+    const context = React.useContext(PricingModalContext);
+    if (!context) {
+        throw new Error('usePricingModal must be used within PricingModalProvider.');
+    }
+    return context;
+}
+
+exports.PricingModal = PricingModal;
+exports.PricingModalProvider = PricingModalProvider;
+exports.usePricingModal = usePricingModal;

package/dist/main/money-price/pricing-modal.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { __rest, __awaiter } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { XIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle } from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { dialogThemedOverlayClass } from '../alert-dialog/dialog-styles.mjs';
+import { MoneyPriceInteractive } from './money-price-interactive.mjs';
+
+const emptyInitUserContext = {
+    fingerprintId: null,
+    xUser: null,
+    xCredit: null,
+    xSubscription: null,
+    isClerkAuthenticated: false,
+};
+const PricingModalContext = createContext(null);
+function normalizeEnabledBillingTypes(data, enabledBillingTypes) {
+    const availableKeys = data.billingSwitch.options.map((option) => option.key);
+    const configuredKeys = (enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length) ? enabledBillingTypes : availableKeys;
+    return Array.from(new Set(configuredKeys
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => availableKeys.includes(billingType))));
+}
+function resolveBillingType({ data, enabledBillingTypes, requestedBillingType, }) {
+    var _a, _b;
+    const enabledKeys = normalizeEnabledBillingTypes(data, enabledBillingTypes);
+    if (requestedBillingType && enabledKeys.includes(requestedBillingType)) {
+        return requestedBillingType;
+    }
+    if (enabledKeys.includes(data.billingSwitch.defaultKey)) {
+        return data.billingSwitch.defaultKey;
+    }
+    return (_a = enabledKeys[0]) !== null && _a !== void 0 ? _a : (_b = data.billingSwitch.options[0]) === null || _b === void 0 ? void 0 : _b.key;
+}
+function PricingModal({ open, onOpenChange, data, config, billingType, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade = true, initUserContext, isInitLoading = false, }) {
+    const resolvedBillingType = useMemo(() => resolveBillingType({
+        data,
+        enabledBillingTypes,
+        requestedBillingType: billingType,
+    }), [billingType, data, enabledBillingTypes]);
+    return (jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: open ? (jsxs(AlertDialogContent, { className: cn('mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10', themeMainBgColor), overlayClassName: dialogThemedOverlayClass, children: [jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsx("span", { className: "text-2xl font-semibold leading-tight", children: data.title }), data.subtitle ? (jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: data.subtitle })) : null] }) }), jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: () => onOpenChange(false), children: jsx(XIcon, { className: "h-6 w-6" }) })] }), jsx("div", { className: "max-h-[60vh] overflow-y-auto px-4 pt-2 pb-6 sm:max-h-[80vh]", children: jsx("div", { className: "mx-auto w-full", children: jsx(MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initialBillingType: resolvedBillingType, disableAutoDetectBilling: resolvedBillingType === 'onetime', initUserContext: initUserContext, isInitLoading: isInitLoading }, resolvedBillingType !== null && resolvedBillingType !== void 0 ? resolvedBillingType : 'default') }) })] })) : null }));
+}
+function PricingModalProvider(_a) {
+    var { children, pricingContextEndpoint, initUserContext: initUserContextProp, isInitLoading: isInitLoadingProp = false } = _a, modalProps = __rest(_a, ["children", "pricingContextEndpoint", "initUserContext", "isInitLoading"]);
+    const [open, setOpen] = useState(false);
+    const [requestedBillingType, setRequestedBillingType] = useState();
+    const [loadedInitUserContext, setLoadedInitUserContext] = useState(initUserContextProp !== null && initUserContextProp !== void 0 ? initUserContextProp : emptyInitUserContext);
+    const [isContextLoading, setIsContextLoading] = useState(false);
+    const loadedContextRef = useRef(!!initUserContextProp);
+    useEffect(() => {
+        if (initUserContextProp) {
+            loadedContextRef.current = true;
+            setLoadedInitUserContext(initUserContextProp);
+        }
+    }, [initUserContextProp]);
+    const loadPricingContext = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (!pricingContextEndpoint || loadedContextRef.current) {
+            return;
+        }
+        setIsContextLoading(true);
+        try {
+            const response = yield fetch(pricingContextEndpoint, {
+                credentials: 'same-origin',
+            });
+            if (!response.ok) {
+                return;
+            }
+            const nextContext = (yield response.json());
+            loadedContextRef.current = true;
+            setLoadedInitUserContext(nextContext);
+        }
+        catch (error) {
+            console.warn('[PricingModalProvider] Failed to load pricing context', error);
+        }
+        finally {
+            setIsContextLoading(false);
+        }
+    }), [pricingContextEndpoint]);
+    const openPricingModal = useCallback((options) => {
+        setRequestedBillingType(options === null || options === void 0 ? void 0 : options.billingType);
+        setOpen(true);
+        void loadPricingContext();
+    }, [loadPricingContext]);
+    const closePricingModal = useCallback(() => {
+        setOpen(false);
+    }, []);
+    const contextValue = useMemo(() => ({
+        openPricingModal,
+        closePricingModal,
+        isPricingModalOpen: open,
+    }), [closePricingModal, open, openPricingModal]);
+    return (jsxs(PricingModalContext.Provider, { value: contextValue, children: [children, jsx(PricingModal, Object.assign({}, modalProps, { open: open, onOpenChange: setOpen, billingType: requestedBillingType, initUserContext: initUserContextProp !== null && initUserContextProp !== void 0 ? initUserContextProp : loadedInitUserContext, isInitLoading: isInitLoadingProp || isContextLoading }))] }));
+}
+function usePricingModal() {
+    const context = useContext(PricingModalContext);
+    if (!context) {
+        throw new Error('usePricingModal must be used within PricingModalProvider.');
+    }
+    return context;
+}
+
+export { PricingModal, PricingModalProvider, usePricingModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "31.3.6",
+  "version": "31.4.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -244,8 +244,8 @@
     "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/contracts": "^31.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/main/credit/credit-nav-button.tsx

@@ -1,13 +1,8 @@
 'use client';
 
 import { cn } from '@windrun-huaiin/lib/utils';
-import { GemIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
-import { themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
+import { GemIcon } from '@windrun-huaiin/base-ui/icons';
 import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
@@ -21,16 +16,16 @@ import {
   useRef,
   useState,
 } from 'react';
-import { MoneyPriceInteractive } from '../money-price/money-price-interactive';
 import { getActiveProviderConfigUtil } from '../money-price/money-price-config-util';
 import type { MoneyPriceData, SubscriptionProductConfig } from '../money-price/money-price-types';
-import { dialogThemedOverlayClass } from '../alert-dialog/dialog-styles';
-import type { CreditPricingContext, PricingModalMode } from './types';
+import { PricingModal } from '../money-price/pricing-modal';
+import type { CreditPricingContext, MobileBillingSwitchBehavior, PricingModalMode } from './types';
 
 interface CreditNavButtonProps {
   locale: string;
   totalBalance: number;
   totalLabel: string;
+  mobileBillingSwitchBehavior?: MobileBillingSwitchBehavior;
   children: React.ReactNode;
 }
 
@@ -38,6 +33,7 @@ export function CreditNavButton({
   locale,
   totalBalance,
   totalLabel,
+  mobileBillingSwitchBehavior,
   children,
 }: CreditNavButtonProps) {
   const [open, setOpen] = useState(false);
@@ -243,7 +239,7 @@ export function CreditNavButton({
         </DropdownMenuContent>
       </DropdownMenu>
       {pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (
-        <AlertDialog
+        <PricingModal
           open={pricingModal.open}
           onOpenChange={(open) =>
             setPricingModal((prev) => ({
@@ -251,52 +247,15 @@ export function CreditNavButton({
               open,
             }))
           }
-        >
-          <AlertDialogContent
-            className={cn(
-              'mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10',
-              themeMainBgColor,
-            )}
-            overlayClassName={dialogThemedOverlayClass}
-          >
-            <AlertDialogHeader className="flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800">
-              <AlertDialogTitle asChild>
-                <div className="flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white">
-                  <span className="text-2xl font-semibold leading-tight">
-                    {pricingModal.modalMoneyPriceData.title}
-                  </span>
-                  {pricingModal.modalMoneyPriceData.subtitle ? (
-                    <span className="text-sm font-medium text-slate-500 dark:text-slate-300">
-                      {pricingModal.modalMoneyPriceData.subtitle}
-                    </span>
-                  ) : null}
-                </div>
-              </AlertDialogTitle>
-              <button
-                type="button"
-                className="rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80"
-                onClick={closePricingModal}
-              >
-                <XIcon className="h-6 w-6" />
-              </button>
-            </AlertDialogHeader>
-            <div className="max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6">
-              <div className="mx-auto w-full">
-                <MoneyPriceInteractive
-                  key={pricingModal.mode}
-                  data={pricingModal.modalMoneyPriceData}
-                  config={pricingModal.pricingContext.moneyPriceConfig}
-                  checkoutApiEndpoint={pricingModal.pricingContext.checkoutApiEndpoint}
-                  customerPortalApiEndpoint={pricingModal.pricingContext.customerPortalApiEndpoint}
-                  enableSubscriptionUpgrade={pricingModal.pricingContext.enableSubscriptionUpgrade}
-                  initialBillingType={modalInitialBillingType}
-                  disableAutoDetectBilling={isOnetimeModal}
-                  initUserContext={pricingModal.pricingContext.initUserContext}
-                />
-              </div>
-            </div>
-          </AlertDialogContent>
-        </AlertDialog>
+          data={pricingModal.modalMoneyPriceData}
+          config={pricingModal.pricingContext.moneyPriceConfig}
+          checkoutApiEndpoint={pricingModal.pricingContext.checkoutApiEndpoint}
+          customerPortalApiEndpoint={pricingModal.pricingContext.customerPortalApiEndpoint}
+          mobileBillingSwitchBehavior={mobileBillingSwitchBehavior}
+          enableSubscriptionUpgrade={pricingModal.pricingContext.enableSubscriptionUpgrade}
+          billingType={modalInitialBillingType}
+          initUserContext={pricingModal.pricingContext.initUserContext}
+        />
       ) : null}
     </CreditNavPopoverContext.Provider>
   );

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

@@ -4,7 +4,7 @@ import { useAuth } from '@clerk/nextjs';
 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';
+import type { CreditOverviewData, MobileBillingSwitchBehavior } from './types';
 
 export const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = 'windrun-huaiin:credit-overview:refresh';
 
@@ -17,6 +17,16 @@ 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[];
+  /**
+   * Mobile behavior for the pricing modal billing switch.
+   * Default: 'sticky'.
+   */
+  mobileBillingSwitchBehavior?: MobileBillingSwitchBehavior;
   /**
    * Browser event names that should trigger credit overview reload.
    * Business apps can dispatch these events after credit balance changes.
@@ -32,9 +42,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 +101,8 @@ export function dispatchCreditOverviewRefresh(
 export function CreditOverviewNavClient({
   locale,
   endpoint,
+  enabledBillingTypes,
+  mobileBillingSwitchBehavior,
   refreshEvents,
   refreshDebounceMs = 300,
 }: CreditOverviewNavClientProps) {
@@ -78,6 +115,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 +137,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 +168,7 @@ export function CreditOverviewNavClient({
         abortControllerRef.current = null;
       }
     }
-  }, [endpoint, locale]);
+  }, [endpoint, locale, normalizedEnabledBillingTypes]);
 
   useEffect(() => {
     if (!isLoaded) {
@@ -180,6 +226,7 @@ export function CreditOverviewNavClient({
       locale={locale}
       totalBalance={payload.data.totalBalance}
       totalLabel={payload.totalLabel}
+      mobileBillingSwitchBehavior={mobileBillingSwitchBehavior}
     >
       <CreditOverviewClient
         locale={locale}

package/src/main/credit/index.ts

@@ -16,5 +16,6 @@ export type {
   CreditOverviewData,
   CreditBucket,
   CreditBucketStatus,
+  MobileBillingSwitchBehavior,
   SubscriptionInfo,
 } from './types';

package/src/main/credit/types.ts

@@ -5,6 +5,7 @@ import type {
 } from '../money-price/money-price-types';
 
 export type PricingModalMode = 'subscription' | 'onetime';
+export type MobileBillingSwitchBehavior = 'sticky' | 'static';
 
 export type CreditActionConfig =
   | CreditModalAction

package/src/main/money-price/index.ts

@@ -2,6 +2,11 @@
 
 export { MoneyPriceInteractive } from './money-price-interactive';
 export { MoneyPriceButton } from './money-price-button';
+export {
+  PricingModal,
+  PricingModalProvider,
+  usePricingModal,
+} from './pricing-modal';
 export type {
   MoneyPriceConfig,
   MoneyPriceData,
@@ -17,4 +22,9 @@ export type {
   CreditPackProductConfig,
   UserContext,
 } from './money-price-types';
+export type {
+  OpenPricingModalOptions,
+  PricingModalProps,
+  PricingModalProviderProps,
+} from './pricing-modal';
 export { UserState } from './money-price-types';