@windrun-huaiin/third-ui 7.6.1 → 10.1.0

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

@@ -1,159 +1,246 @@
 "use client";
-import { __awaiter } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.mjs';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { __awaiter } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useClerk } from '@clerk/nextjs';
-import { useState, useCallback, useMemo, useEffect } from 'react';
-import { useFingerprintContextSafe } from '../../clerk/fingerprint/fingerprint-provider.mjs';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useRouter } from 'next/navigation';
-import { createPortal } from 'react-dom';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { MoneyPriceButton } from './money-price-button.mjs';
-import { getActiveProviderConfig, getProductPricing } from './money-price-config-util.mjs';
+import { getActiveProviderConfigUtil, getProductPricing } from './money-price-config-util.mjs';
 import { UserState } from './money-price-types.mjs';
+import { redirectToCustomerPortal } from './customer-portal.mjs';
 
-function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath }) {
-    const fingerprintContext = useFingerprintContextSafe();
-    const { redirectToSignIn, user } = useClerk();
+const PLAN_KEYS = ['F1', 'P2', 'U3'];
+function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, }) {
+    var _a, _b, _c, _d;
+    const { redirectToSignIn, redirectToSignUp, user: clerkUser, openSignUp } = useClerk();
     const router = useRouter();
-    const [billingType, setBillingType] = useState(() => {
+    const providerConfig = useMemo(() => getActiveProviderConfigUtil(config), [config]);
+    const billingOptions = useMemo(() => {
+        const options = data.billingSwitch.options;
+        // 如果配置了 enabledBillingTypes，只显示配置的类型
+        if (enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length) {
+            return options.filter(option => enabledBillingTypes.includes(option.key));
+        }
+        // 否则显示所有配置的选项
+        return options;
+    }, [data.billingSwitch.options, enabledBillingTypes]);
+    const billingOptionMap = useMemo(() => {
+        return billingOptions.reduce((acc, option) => {
+            acc[option.key] = option;
+            return acc;
+        }, {});
+    }, [billingOptions]);
+    const defaultBilling = useMemo(() => {
         var _a;
-        // 懒初始化：只在组件首次渲染时计算一次
-        // 如果用户有活跃订阅，通过 priceId 精确匹配计费周期
-        if (((_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _a === void 0 ? void 0 : _a.status) === 'active' && fingerprintContext.xSubscription.priceId) {
-            const userPriceId = fingerprintContext.xSubscription.priceId;
-            const providerConfig = getActiveProviderConfig(config);
-            // 检查所有年付计划的 priceId
-            const yearlyPriceIds = [
-                providerConfig.products.free.plans.yearly.priceId,
-                providerConfig.products.pro.plans.yearly.priceId,
-                providerConfig.products.ultra.plans.yearly.priceId
-            ];
-            // 如果匹配到年付计划，返回 yearly，否则返回 monthly
-            if (yearlyPriceIds.includes(userPriceId)) {
-                return 'yearly';
+        const defaultKey = data.billingSwitch.defaultKey;
+        // 如果默认值在可用选项中，使用默认值
+        if (billingOptions.some(opt => opt.key === defaultKey)) {
+            return defaultKey;
+        }
+        // 否则使用第一个可用选项
+        return ((_a = billingOptions[0]) === null || _a === void 0 ? void 0 : _a.key) || 'monthly';
+    }, [data.billingSwitch.defaultKey, billingOptions]);
+    const resolvedInitialBilling = useMemo(() => {
+        if (initialBillingType &&
+            billingOptions.some(option => option.key === initialBillingType)) {
+            return initialBillingType;
+        }
+        return defaultBilling;
+    }, [initialBillingType, billingOptions, defaultBilling]);
+    const priceIdsByCycle = useMemo(() => {
+        const priceIds = {};
+        // 为每个可用的计费类型创建价格ID数组
+        billingOptions.forEach(option => {
+            priceIds[option.key] = [];
+            if (option.key === 'onetime') {
+                // 处理积分包产品
+                const creditPacks = providerConfig.creditPackProducts || {};
+                Object.values(creditPacks).forEach((pack) => {
+                    priceIds[option.key].push(pack.priceId);
+                });
             }
             else {
-                return 'monthly';
+                // 处理订阅产品
+                const products = providerConfig.subscriptionProducts || providerConfig.products || {};
+                PLAN_KEYS.forEach(planKey => {
+                    const product = products[planKey];
+                    if (product && product.plans && product.plans[option.key]) {
+                        priceIds[option.key].push(product.plans[option.key].priceId);
+                    }
+                });
             }
+        });
+        return priceIds;
+    }, [providerConfig, billingOptions]);
+    const serverAuthenticated = !!(initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.isClerkAuthenticated) && !!((_a = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.xUser) === null || _a === void 0 ? void 0 : _a.clerkUserId);
+    const clientAuthenticated = !!(clerkUser === null || clerkUser === void 0 ? void 0 : clerkUser.id);
+    const isAuthenticated = serverAuthenticated || clientAuthenticated;
+    const subscriptionSnapshot = (initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.isClerkAuthenticated) ? initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.xSubscription : null;
+    const detectedBillingType = useMemo(() => {
+        if (disableAutoDetectBilling) {
+            return null;
+        }
+        if (!subscriptionSnapshot || subscriptionSnapshot.status !== 'active') {
+            return null;
         }
-        // 否则使用默认值
-        return data.billingSwitch.defaultKey;
-    });
+        const priceId = subscriptionSnapshot.priceId;
+        if (!priceId) {
+            return null;
+        }
+        for (const [cycle, priceIds] of Object.entries(priceIdsByCycle)) {
+            if (priceIds.includes(priceId)) {
+                return cycle;
+            }
+        }
+        return null;
+    }, [
+        disableAutoDetectBilling,
+        subscriptionSnapshot === null || subscriptionSnapshot === void 0 ? void 0 : subscriptionSnapshot.status,
+        subscriptionSnapshot === null || subscriptionSnapshot === void 0 ? void 0 : subscriptionSnapshot.priceId,
+        priceIdsByCycle,
+    ]);
+    const initialBillingCandidate = useMemo(() => {
+        if (initialBillingType) {
+            return resolvedInitialBilling;
+        }
+        if (detectedBillingType) {
+            return detectedBillingType;
+        }
+        return resolvedInitialBilling;
+    }, [initialBillingType, resolvedInitialBilling, detectedBillingType]);
+    const [billingType, setBillingType] = useState(initialBillingCandidate);
+    const navigationLockRef = useRef(false);
+    useEffect(() => {
+        setBillingType(prev => (prev === initialBillingCandidate ? prev : initialBillingCandidate));
+    }, [initialBillingCandidate]);
     const [isProcessing, setIsProcessing] = useState(false);
-    const [tooltip, setTooltip] = useState({ show: false, content: '', x: 0, y: 0 });
-    // 确定用户状态
+    const [isTouchDevice, setIsTouchDevice] = useState(false);
+    useEffect(() => {
+        setIsTouchDevice('ontouchstart' in window || navigator.maxTouchPoints > 0);
+    }, []);
     const getUserState = useCallback(() => {
-        if (!fingerprintContext)
-            return UserState.Anonymous;
-        const { xUser, xSubscription } = fingerprintContext;
-        if (!(xUser === null || xUser === void 0 ? void 0 : xUser.clerkUserId))
-            return UserState.Anonymous;
-        if (!(xSubscription === null || xSubscription === void 0 ? void 0 : xSubscription.status) || xSubscription.status !== 'active')
+        var _a, _b;
+        if (!subscriptionSnapshot || subscriptionSnapshot.status !== 'active') {
             return UserState.FreeUser;
-        // 通过 priceId 精确匹配订阅计划
-        const userPriceId = xSubscription.priceId;
+        }
+        const userPriceId = subscriptionSnapshot.priceId;
         if (!userPriceId)
             return UserState.FreeUser;
-        const providerConfig = getActiveProviderConfig(config);
-        // 检查是否为 Pro 计划 (月付或年付)
-        const proMonthly = providerConfig.products.pro.plans.monthly.priceId;
-        const proYearly = providerConfig.products.pro.plans.yearly.priceId;
-        if (userPriceId === proMonthly || userPriceId === proYearly) {
+        const products = providerConfig.subscriptionProducts || providerConfig.products || {};
+        const proPlans = ((_a = products.P2) === null || _a === void 0 ? void 0 : _a.plans) || {};
+        const proIds = Object.values(proPlans).map((plan) => plan.priceId);
+        if (proIds.includes(userPriceId)) {
             return UserState.ProUser;
         }
-        // 检查是否为 Ultra 计划 (月付或年付)
-        const ultraMonthly = providerConfig.products.ultra.plans.monthly.priceId;
-        const ultraYearly = providerConfig.products.ultra.plans.yearly.priceId;
-        if (userPriceId === ultraMonthly || userPriceId === ultraYearly) {
+        const ultraPlans = ((_b = products.U3) === null || _b === void 0 ? void 0 : _b.plans) || {};
+        const ultraIds = Object.values(ultraPlans).map((plan) => plan.priceId);
+        if (ultraIds.includes(userPriceId)) {
             return UserState.UltraUser;
         }
         return UserState.FreeUser;
-    }, [fingerprintContext, config]);
-    // 优化 userContext 使用 useMemo
+    }, [subscriptionSnapshot, providerConfig]);
     const userContext = useMemo(() => {
-        var _a, _b, _c;
-        // 使用 Clerk 的 user 对象判断登录状态
-        const isAuth = !!(user === null || user === void 0 ? void 0 : user.id);
-        const userState = getUserState();
         return {
-            isAuthenticated: isAuth,
-            subscriptionStatus: isAuth ? userState : UserState.Anonymous,
-            subscriptionType: ((_b = (_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _a === void 0 ? void 0 : _a.priceId) === null || _b === void 0 ? void 0 : _b.includes('yearly')) ? 'yearly' : 'monthly',
-            subscriptionEndDate: (_c = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _c === void 0 ? void 0 : _c.subPeriodEnd
+            isAuthenticated,
+            subscriptionStatus: isAuthenticated ? getUserState() : UserState.Anonymous,
+            subscriptionType: isAuthenticated ? detectedBillingType !== null && detectedBillingType !== void 0 ? detectedBillingType : undefined : undefined,
+            subscriptionEndDate: isAuthenticated ? subscriptionSnapshot === null || subscriptionSnapshot === void 0 ? void 0 : subscriptionSnapshot.subPeriodEnd : undefined
         };
-    }, [user, fingerprintContext, getUserState]);
-    // 处理登录
-    const handleLogin = useCallback(() => {
-        if (signInPath) {
-            router.push(signInPath);
+    }, [
+        isAuthenticated,
+        getUserState,
+        detectedBillingType,
+        subscriptionSnapshot === null || subscriptionSnapshot === void 0 ? void 0 : subscriptionSnapshot.subPeriodEnd
+    ]);
+    const fingerprintId = (_b = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.fingerprintId) !== null && _b !== void 0 ? _b : null;
+    const initUserId = (_d = (_c = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.xUser) === null || _c === void 0 ? void 0 : _c.userId) !== null && _d !== void 0 ? _d : null;
+    const handleAuth = useCallback(() => {
+        if (!enableClerkModal) {
+            redirectToSignUp();
+            return;
         }
-        else {
-            redirectToSignIn();
+        if (!fingerprintId) {
+            console.warn('Not found fingerprintId! NEED CHECK!');
         }
-    }, [signInPath, redirectToSignIn, router]);
-    // 处理升级
-    const handleUpgrade = useCallback((plan, billingType) => __awaiter(this, void 0, void 0, function* () {
+        const unsafeMetadata = {
+            user_id: initUserId,
+            fingerprint_id: fingerprintId,
+        };
+        openSignUp({ unsafeMetadata });
+    }, [enableClerkModal, redirectToSignUp, openSignUp, initUserId, fingerprintId]);
+    const handleAction = useCallback((plan, billing) => __awaiter(this, void 0, void 0, function* () {
         var _a;
-        if (!upgradeApiEndpoint) {
-            router.push('/');
+        const isSubscriptionFlow = billing !== 'onetime';
+        if (isSubscriptionFlow && !enableSubscriptionUpgrade) {
             return;
         }
+        navigationLockRef.current = false;
         setIsProcessing(true);
+        const markNavigating = () => {
+            navigationLockRef.current = true;
+        };
         try {
-            const pricing = getProductPricing(plan, billingType, config.activeProvider, config);
-            const response = yield fetch(upgradeApiEndpoint, {
+            const hasActiveSubscription = userContext.isAuthenticated &&
+                (userContext.subscriptionStatus === UserState.ProUser ||
+                    userContext.subscriptionStatus === UserState.UltraUser);
+            const shouldUsePortal = isSubscriptionFlow && hasActiveSubscription;
+            if (shouldUsePortal) {
+                const handled = yield redirectToCustomerPortal({
+                    customerPortalApiEndpoint,
+                    redirectToSignIn,
+                    returnUrl: window.location.href,
+                });
+                if (handled) {
+                    markNavigating();
+                    return;
+                }
+            }
+            if (!checkoutApiEndpoint) {
+                markNavigating();
+                router.push('/');
+                return;
+            }
+            const pricing = getProductPricing(plan, billing, config.activeProvider, config);
+            const response = yield fetch(checkoutApiEndpoint, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
                     priceId: pricing.priceId,
-                    plan: plan,
-                    billingType: billingType,
+                    plan,
+                    billingType: billing,
                     provider: config.activeProvider
                 })
             });
-            // 检查是否是重定向或非JSON响应
             if (response.redirected || response.status === 302 || response.status === 301) {
-                // 如果是重定向，直接跳转到重定向URL（通常是登录页面）
+                markNavigating();
                 window.location.href = response.url;
                 return;
             }
-            // 检查Content-Type是否为JSON
             const contentType = response.headers.get('content-type');
             if (!contentType || !contentType.includes('application/json')) {
-                // 如果不是JSON响应，可能是HTML登录页面，提示用户重新登录
                 console.error('Received non-JSON response, user may need to login');
-                if (signInPath) {
-                    window.location.href = signInPath;
-                }
-                else {
-                    redirectToSignIn();
-                }
+                markNavigating();
+                redirectToSignIn();
                 return;
             }
             const result = yield response.json();
-            // 处理HTTP错误状态码
             if (!response.ok) {
                 const errorMessage = result.error || `Request failed with status ${response.status}`;
                 console.error('Upgrade request failed:', errorMessage);
-                // 根据状态码决定处理方式
                 if (response.status === 401 || response.status === 403) {
-                    // 鉴权失败，重定向到登录页
-                    if (signInPath) {
-                        window.location.href = signInPath;
-                    }
-                    else {
-                        redirectToSignIn();
-                    }
+                    markNavigating();
+                    redirectToSignIn();
                 }
                 else {
-                    // 其他错误（如500等），显示错误提示
                     alert(`Operation failed: ${errorMessage}`);
                 }
                 return;
             }
             if (result.success && ((_a = result.data) === null || _a === void 0 ? void 0 : _a.sessionUrl)) {
+                markNavigating();
                 window.location.href = result.data.sessionUrl;
             }
             else {
@@ -164,210 +251,86 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
             console.error('Error during upgrade:', error);
         }
         finally {
-            setIsProcessing(false);
-        }
-    }), [upgradeApiEndpoint, config, router]);
-    // 更新价格显示
-    const updatePriceDisplay = useCallback((newBillingType) => {
-        const providerConfig = getActiveProviderConfig(config);
-        data.plans.forEach((plan) => {
-            const productConfig = providerConfig.products[plan.key];
-            const pricing = productConfig.plans[newBillingType];
-            const priceValueElement = document.querySelector(`[data-price-value="${plan.key}"]`);
-            if (priceValueElement) {
-                if (pricing.amount === 0) {
-                    priceValueElement.textContent = 'Free';
-                }
-                else {
-                    priceValueElement.textContent = `${data.currency}${pricing.amount}`;
-                }
+            if (!navigationLockRef.current) {
+                setIsProcessing(false);
             }
-            const priceUnitElement = document.querySelector(`[data-price-unit="${plan.key}"]`);
-            if (priceUnitElement) {
-                const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
-                priceUnitElement.textContent = (billingOption === null || billingOption === void 0 ? void 0 : billingOption.unit) || '/month';
-            }
-            const priceOriginalElement = document.querySelector(`[data-price-original="${plan.key}"]`);
-            const priceDiscountElement = document.querySelector(`[data-price-discount="${plan.key}"]`);
-            if (pricing.originalAmount && pricing.discountPercent) {
-                if (priceOriginalElement) {
-                    priceOriginalElement.style.display = 'inline';
-                    priceOriginalElement.textContent = `${data.currency}${pricing.originalAmount}`;
-                }
-                if (priceDiscountElement) {
-                    priceDiscountElement.style.display = 'inline';
-                    const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
-                    if (billingOption === null || billingOption === void 0 ? void 0 : billingOption.discountText) {
-                        priceDiscountElement.textContent = billingOption.discountText.replace('{percent}', String(pricing.discountPercent));
-                    }
-                }
-            }
-            else {
-                if (priceOriginalElement)
-                    priceOriginalElement.style.display = 'none';
-                if (priceDiscountElement)
-                    priceDiscountElement.style.display = 'none';
-            }
-        });
-    }, [config, data]);
-    // 更新折扣信息
-    const updateDiscountInfo = useCallback((newBillingType) => {
-        const discountInfoElement = document.querySelector('[data-discount-info]');
-        if (discountInfoElement) {
-            const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
-            let hasDiscount = false;
-            let discountPercent = 0;
-            const providerConfig = getActiveProviderConfig(config);
-            ['pro', 'ultra'].forEach(planKey => {
-                const pricing = providerConfig.products[planKey].plans[newBillingType];
-                if (pricing.discountPercent) {
-                    hasDiscount = true;
-                    discountPercent = pricing.discountPercent;
-                }
-            });
-            discountInfoElement.innerHTML = '';
-            if (hasDiscount && (billingOption === null || billingOption === void 0 ? void 0 : billingOption.discountText)) {
-                const discountBadge = document.createElement('span');
-                discountBadge.className = 'px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap';
-                discountBadge.textContent = billingOption.discountText.replace('{percent}', String(discountPercent));
-                discountInfoElement.appendChild(discountBadge);
-            }
-        }
-    }, [config, data]);
-    // 更新按钮样式
-    const updateButtonStyles = useCallback((newBillingType) => {
-        const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
-        const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
-        if (monthlyButton) {
-            monthlyButton.className = newBillingType === 'monthly'
-                ? cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm')
-                : cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
         }
-        if (yearlyButton) {
-            yearlyButton.className = newBillingType === 'yearly'
-                ? cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm')
-                : cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full');
+    }), [
+        customerPortalApiEndpoint,
+        checkoutApiEndpoint,
+        config,
+        router,
+        redirectToSignIn,
+        userContext,
+        enableSubscriptionUpgrade
+    ]);
+    // 根据当前计费类型动态选择要显示的 plans
+    const currentPlans = useMemo(() => {
+        if (billingType === 'onetime') {
+            return data.creditsPlans || [];
         }
-    }, []);
-    // State for button portals
-    const [buttonPortals, setButtonPortals] = useState([]);
-    // 处理月付/年付切换和 tooltip 功能
-    useEffect(() => {
-        const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
-        const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
-        const handleMonthlyClick = () => {
-            setBillingType('monthly');
-            updatePriceDisplay('monthly');
-            updateButtonStyles('monthly');
-            updateDiscountInfo('monthly');
-        };
-        const handleYearlyClick = () => {
-            setBillingType('yearly');
-            updatePriceDisplay('yearly');
-            updateButtonStyles('yearly');
-            updateDiscountInfo('yearly');
-        };
-        if (monthlyButton) {
-            monthlyButton.addEventListener('click', handleMonthlyClick);
-        }
-        if (yearlyButton) {
-            yearlyButton.addEventListener('click', handleYearlyClick);
+        return data.subscriptionPlans || [];
+    }, [billingType, data.subscriptionPlans, data.creditsPlans]);
+    const maxFeaturesCount = useMemo(() => {
+        const featureCounts = currentPlans.map(plan => { var _a; return ((_a = plan.features) === null || _a === void 0 ? void 0 : _a.length) || 0; });
+        return Math.max(config.display.minFeaturesCount || 0, ...featureCounts);
+    }, [currentPlans, config.display.minFeaturesCount]);
+    const getFeatureRows = useCallback((plan) => {
+        const features = plan.features || [];
+        const filled = [...features];
+        while (filled.length < maxFeaturesCount)
+            filled.push(null);
+        return filled;
+    }, [maxFeaturesCount]);
+    const getPricingForPlan = useCallback((planKey) => {
+        return getProductPricing(planKey, billingType, config.activeProvider, config);
+    }, [billingType, config]);
+    const selectedBillingOption = billingOptionMap[billingType];
+    const discountBadgeText = useMemo(() => {
+        if (!(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText))
+            return null;
+        // 对于 onetime 模式，直接显示 discountText，不依赖 discountPercent
+        if (billingType === 'onetime') {
+            return selectedBillingOption.discountText;
         }
-        const tooltipHandlers = [];
-        data.plans.forEach((plan) => {
-            var _a;
-            (_a = plan.features) === null || _a === void 0 ? void 0 : _a.forEach((feature, i) => {
-                if (feature === null || feature === void 0 ? void 0 : feature.tooltip) {
-                    const tooltipTrigger = document.querySelector(`[data-tooltip-trigger="${plan.key}-${i}"]`);
-                    if (tooltipTrigger) {
-                        const handlers = {
-                            mouseenter: (e) => {
-                                setTooltip({
-                                    show: true,
-                                    content: feature.tooltip,
-                                    x: e.clientX,
-                                    y: e.clientY
-                                });
-                            },
-                            mousemove: (e) => {
-                                setTooltip(prev => (Object.assign(Object.assign({}, prev), { x: e.clientX, y: e.clientY })));
-                            },
-                            mouseleave: () => {
-                                setTooltip(prev => (Object.assign(Object.assign({}, prev), { show: false })));
-                            }
-                        };
-                        tooltipTrigger.addEventListener('mouseenter', handlers.mouseenter);
-                        tooltipTrigger.addEventListener('mousemove', handlers.mousemove);
-                        tooltipTrigger.addEventListener('mouseleave', handlers.mouseleave);
-                        tooltipHandlers.push({ element: tooltipTrigger, handlers });
-                    }
-                }
-            });
-        });
-        return () => {
-            if (monthlyButton) {
-                monthlyButton.removeEventListener('click', handleMonthlyClick);
-            }
-            if (yearlyButton) {
-                yearlyButton.removeEventListener('click', handleYearlyClick);
-            }
-            tooltipHandlers.forEach(({ element, handlers }) => {
-                element.removeEventListener('mouseenter', handlers.mouseenter);
-                element.removeEventListener('mousemove', handlers.mousemove);
-                element.removeEventListener('mouseleave', handlers.mouseleave);
-            });
-        };
-    }, [data, updatePriceDisplay, updateButtonStyles, updateDiscountInfo, userContext, handleLogin, handleUpgrade, isProcessing]);
-    // 单独的 effect 用于初始更新，只在组件挂载时执行一次
-    useEffect(() => {
-        // 直接在这里重新计算，避免闭包问题
-        const initialBillingType = (() => {
-            var _a;
-            if (((_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _a === void 0 ? void 0 : _a.status) === 'active' && fingerprintContext.xSubscription.priceId) {
-                const userPriceId = fingerprintContext.xSubscription.priceId;
-                const providerConfig = getActiveProviderConfig(config);
-                const yearlyPriceIds = [
-                    providerConfig.products.free.plans.yearly.priceId,
-                    providerConfig.products.pro.plans.yearly.priceId,
-                    providerConfig.products.ultra.plans.yearly.priceId
-                ];
-                return yearlyPriceIds.includes(userPriceId) ? 'yearly' : 'monthly';
-            }
-            return data.billingSwitch.defaultKey;
-        })();
-        updatePriceDisplay(initialBillingType);
-        updateDiscountInfo(initialBillingType);
-        updateButtonStyles(initialBillingType);
-    }, []); // 空依赖数组，只执行一次
-    // Create button portals after component mounts
-    useEffect(() => {
-        const portals = [];
-        data.plans.forEach((plan) => {
-            const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`);
-            if (placeholder) {
-                console.log('Creating portal for', `[data-button-placeholder="${plan.key}"]`);
-                portals.push(createPortal(jsx(MoneyPriceButton, { planKey: plan.key, userContext: userContext, billingType: billingType, onLogin: handleLogin, onUpgrade: handleUpgrade, texts: data.buttonTexts, isProcessing: isProcessing }, plan.key), placeholder));
+        // 对于订阅模式，查找 discountPercent 并替换
+        let discountPercent = null;
+        const products = providerConfig.subscriptionProducts || providerConfig.products || {};
+        PLAN_KEYS.forEach(planKey => {
+            var _a, _b;
+            const product = products[planKey];
+            if ((_b = (_a = product === null || product === void 0 ? void 0 : product.plans) === null || _a === void 0 ? void 0 : _a[billingType]) === null || _b === void 0 ? void 0 : _b.discountPercent) {
+                discountPercent = product.plans[billingType].discountPercent;
             }
         });
-        setButtonPortals(portals);
-    }, [data.plans, userContext, billingType, handleLogin, handleUpgrade, data.buttonTexts, isProcessing]);
-    // Tooltip 组件
-    const Tooltip = ({ show, content, x, y }) => {
-        if (!show)
+        if (!discountPercent)
             return null;
-        const style = {
-            position: 'fixed',
-            left: Math.max(8, x),
-            top: Math.max(8, y),
-            zIndex: 9999,
-            maxWidth: 200,
-            transform: 'translateY(-50%)',
-            pointerEvents: 'none',
-            whiteSpace: 'pre-line',
-        };
-        return (jsx("div", { style: style, className: "bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm", children: content }));
-    };
-    return (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({}, tooltip)), buttonPortals] }));
+        return selectedBillingOption.discountText.replace('{percent}', String(discountPercent));
+    }, [selectedBillingOption, providerConfig, billingType]);
+    // 配置移动端BillingTypeButton悬浮样式
+    return (jsxs(Fragment, { children: [jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
+                        const isActive = option.key === billingType;
+                        const buttonClasses = isActive
+                            ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+                            : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
+                        const showBadge = option.key === billingType && !!discountBadgeText;
+                        return (jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsx("button", { className: cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setBillingType(option.key), children: option.name })] }, option.key));
+                    }) }) }), jsx("div", { className: "w-full", children: jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
+                        const planKey = plan.key;
+                        if (!PLAN_KEYS.includes(planKey)) {
+                            console.warn(`Unknown plan key "${plan.key}" detected in pricing plans`);
+                            return null;
+                        }
+                        const pricing = getPricingForPlan(planKey);
+                        const showBillingSubtitle = plan.showBillingSubTitle !== false;
+                        const hasDiscount = !!pricing.discountPercent && !!pricing.originalAmount;
+                        // 移动端宽度样式
+                        return (jsxs("div", { "data-price-plan": planKey, className: cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none w-[85vw] max-w-[360px]', 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0', 'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }, children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("span", { className: "text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": planKey, children: [jsxs("div", { className: "flex items-end gap-2", children: [jsx("span", { className: "text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": planKey, children: pricing.amount === 0 ? 'Free' : `${data.currency}${pricing.amount}` }), pricing.amount > 0 && (jsx("span", { className: "text-base md:text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": planKey, children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.unit) || '/month' }))] }), jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-2 min-h-[28px] mt-1", children: [hasDiscount && (jsxs(Fragment, { children: [jsxs("span", { className: "text-sm md:text-base text-gray-400 line-through", "data-price-original": planKey, children: [data.currency, pricing.originalAmount] }), (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText) && (jsx("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": planKey, children: selectedBillingOption.discountText.replace('{percent}', String(pricing.discountPercent)) }))] })), jsx("div", { className: cn('flex items-center gap-2 text-[11px] md:text-xs', !showBillingSubtitle && 'opacity-0 select-none'), "data-price-subtitle": planKey, children: showBillingSubtitle && billingType === 'onetime' ? (
+                                                    // OneTime 模式下的特殊处理：普通文本 + 带样式的产品副标题
+                                                    jsxs(Fragment, { children: [(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) && (jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: selectedBillingOption.subTitle })), plan.subtitle && (jsxs("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", children: ["+", plan.subtitle] }))] })) : (
+                                                    // 其他模式下保持原逻辑
+                                                    showBillingSubtitle && (jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) || '' }))) })] })] }), jsx("ul", { className: "flex-1 mb-6 mt-4 text-xs md:text-sm leading-5", children: getFeatureRows(plan).map((feature, i) => (jsxs("li", { className: "flex items-start gap-2 mb-2 min-h-[24px] md:min-h-[28px]", "data-feature-item": `${planKey}-${i}`, children: [feature ? (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? jsx("span", { children: feature.icon }) : jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsx("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag })), feature ? (jsxs("div", { className: "flex-1 text-gray-800 dark:text-gray-200", children: [jsx("span", { children: feature.description }), feature.tooltip && (jsx("span", { className: "block text-[11px] text-gray-500 dark:text-gray-400 mt-1", children: feature.tooltip }))] })) : (jsx("span", { children: "\u00A0" }))] }, i))) }), jsx("div", { className: "flex-1" }), jsx(MoneyPriceButton, { planKey: planKey, userContext: userContext, billingType: billingType, onAuth: handleAuth, onAction: handleAction, texts: data.buttonTexts, isProcessing: isProcessing, isInitLoading: false, enableSubscriptionUpgrade: enableSubscriptionUpgrade })] }, plan.key));
+                    }) }) })] }));
 }
 
 export { MoneyPriceInteractive };