@windrun-huaiin/third-ui 7.3.2 → 7.3.3

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

@@ -0,0 +1,219 @@
+/**
+ * Money Price Configuration
+ * 价格组件配置文件
+ */
+// 示例配置
+const moneyPriceConfig = {
+    paymentProviders: {
+        stripe: {
+            provider: 'stripe',
+            enabled: true,
+            products: {
+                free: {
+                    key: 'free',
+                    name: 'free', // Just a key, actual display name comes from translation
+                    plans: {
+                        monthly: {
+                            priceId: 'free',
+                            amount: 0,
+                            currency: 'usd',
+                            credits: 0
+                        },
+                        yearly: {
+                            priceId: 'free',
+                            amount: 0,
+                            currency: 'usd',
+                            credits: 0
+                        }
+                    }
+                },
+                pro: {
+                    key: 'pro',
+                    name: 'pro', // Just a key, actual display name comes from translation
+                    plans: {
+                        monthly: {
+                            priceId: process.env.NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PRICE_ID || 'price_pro_monthly',
+                            amount: Number(process.env.NEXT_PUBLIC_STRIPE_PRO_MONTHLY_AMOUNT) || 10,
+                            currency: process.env.NEXT_PUBLIC_STRIPE_PRO_MONTHLY_CURRENCY || 'usd',
+                            credits: Number(process.env.NEXT_PUBLIC_STRIPE_PRO_MONTHLY_CREDITS) || 100
+                        },
+                        yearly: {
+                            priceId: process.env.NEXT_PUBLIC_STRIPE_PRO_YEARLY_PRICE_ID || 'price_pro_yearly',
+                            amount: Number(process.env.NEXT_PUBLIC_STRIPE_PRO_YEARLY_AMOUNT) || 96,
+                            originalAmount: 120,
+                            discountPercent: 20,
+                            currency: process.env.NEXT_PUBLIC_STRIPE_PRO_YEARLY_CURRENCY || 'usd',
+                            credits: Number(process.env.NEXT_PUBLIC_STRIPE_PRO_YEARLY_CREDITS) || 1200
+                        }
+                    }
+                },
+                ultra: {
+                    key: 'ultra',
+                    name: 'ultra', // Just a key, actual display name comes from translation
+                    plans: {
+                        monthly: {
+                            priceId: process.env.NEXT_PUBLIC_STRIPE_ULTRA_MONTHLY_PRICE_ID || 'price_ultra_monthly',
+                            amount: Number(process.env.NEXT_PUBLIC_STRIPE_ULTRA_MONTHLY_AMOUNT) || 20,
+                            currency: process.env.NEXT_PUBLIC_STRIPE_ULTRA_MONTHLY_CURRENCY || 'usd',
+                            credits: Number(process.env.NEXT_PUBLIC_STRIPE_ULTRA_MONTHLY_CREDITS) || 250
+                        },
+                        yearly: {
+                            priceId: process.env.NEXT_PUBLIC_STRIPE_ULTRA_YEARLY_PRICE_ID || 'price_ultra_yearly',
+                            amount: Number(process.env.NEXT_PUBLIC_STRIPE_ULTRA_YEARLY_AMOUNT) || 192,
+                            originalAmount: 240,
+                            discountPercent: 20,
+                            currency: process.env.NEXT_PUBLIC_STRIPE_ULTRA_YEARLY_CURRENCY || 'usd',
+                            credits: Number(process.env.NEXT_PUBLIC_STRIPE_ULTRA_YEARLY_CREDITS) || 3000
+                        }
+                    }
+                }
+            }
+        },
+        alipay: {
+            provider: 'alipay',
+            enabled: false,
+            products: {
+                free: {
+                    key: 'free',
+                    name: 'free',
+                    plans: {
+                        monthly: {
+                            priceId: 'free',
+                            amount: 0,
+                            currency: 'cny',
+                            credits: 0
+                        },
+                        yearly: {
+                            priceId: 'free',
+                            amount: 0,
+                            currency: 'cny',
+                            credits: 0
+                        }
+                    }
+                },
+                pro: {
+                    key: 'pro',
+                    name: 'pro',
+                    plans: {
+                        monthly: {
+                            priceId: 'alipay_pro_monthly',
+                            amount: 70,
+                            currency: 'cny',
+                            credits: 100
+                        },
+                        yearly: {
+                            priceId: 'alipay_pro_yearly',
+                            amount: 672,
+                            originalAmount: 840,
+                            discountPercent: 20,
+                            currency: 'cny',
+                            credits: 1200
+                        }
+                    }
+                },
+                ultra: {
+                    key: 'ultra',
+                    name: 'ultra',
+                    plans: {
+                        monthly: {
+                            priceId: 'alipay_ultra_monthly',
+                            amount: 140,
+                            currency: 'cny',
+                            credits: 250
+                        },
+                        yearly: {
+                            priceId: 'alipay_ultra_yearly',
+                            amount: 1344,
+                            originalAmount: 1680,
+                            discountPercent: 20,
+                            currency: 'cny',
+                            credits: 3000
+                        }
+                    }
+                }
+            }
+        },
+        wechat: {
+            provider: 'wechat',
+            enabled: false,
+            products: {
+                free: {
+                    key: 'free',
+                    name: 'free',
+                    plans: {
+                        monthly: {
+                            priceId: 'free',
+                            amount: 0,
+                            currency: 'cny',
+                            credits: 0
+                        },
+                        yearly: {
+                            priceId: 'free',
+                            amount: 0,
+                            currency: 'cny',
+                            credits: 0
+                        }
+                    }
+                },
+                pro: {
+                    key: 'pro',
+                    name: 'pro',
+                    plans: {
+                        monthly: {
+                            priceId: 'wechat_pro_monthly',
+                            amount: 70,
+                            currency: 'cny',
+                            credits: 100
+                        },
+                        yearly: {
+                            priceId: 'wechat_pro_yearly',
+                            amount: 672,
+                            originalAmount: 840,
+                            discountPercent: 20,
+                            currency: 'cny',
+                            credits: 1200
+                        }
+                    }
+                },
+                ultra: {
+                    key: 'ultra',
+                    name: 'ultra',
+                    plans: {
+                        monthly: {
+                            priceId: 'wechat_ultra_monthly',
+                            amount: 140,
+                            currency: 'cny',
+                            credits: 250
+                        },
+                        yearly: {
+                            priceId: 'wechat_ultra_yearly',
+                            amount: 1344,
+                            originalAmount: 1680,
+                            discountPercent: 20,
+                            currency: 'cny',
+                            credits: 3000
+                        }
+                    }
+                }
+            }
+        }
+    },
+    activeProvider: process.env.NEXT_PUBLIC_ACTIVE_PAYMENT_PROVIDER || 'stripe',
+    display: {
+        currency: '$',
+        locale: 'en',
+        minFeaturesCount: 4
+    }
+};
+// 辅助函数：获取当前激活的支付供应商配置
+function getActiveProviderConfig(config) {
+    const provider = config.activeProvider;
+    return config.paymentProviders[provider];
+}
+// 辅助函数：获取特定产品的价格信息
+function getProductPricing(productKey, billingType, provider, config) {
+    const providerConfig = config.paymentProviders[provider];
+    return providerConfig.products[productKey].plans[billingType];
+}
+
+export { getActiveProviderConfig, getProductPricing, moneyPriceConfig };

package/dist/main/money-price/money-price-interactive.d.ts

@@ -0,0 +1,2 @@
+import { type MoneyPriceInteractiveProps } from './money-price-types';
+export declare function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath }: MoneyPriceInteractiveProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,293 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../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.js');
+var jsxRuntime = require('react/jsx-runtime');
+var nextjs = require('@clerk/nextjs');
+var React = require('react');
+var fingerprintProvider = require('../../clerk/fingerprint/fingerprint-provider.js');
+var utils = require('@windrun-huaiin/lib/utils');
+var navigation = require('next/navigation');
+var client = require('react-dom/client');
+var moneyPriceButton = require('./money-price-button.js');
+var moneyPriceConfig = require('./money-price-config.js');
+var moneyPriceTypes = require('./money-price-types.js');
+
+function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath }) {
+    var _a, _b, _c, _d;
+    const fingerprintContext = fingerprintProvider.useFingerprintContextSafe();
+    const { redirectToSignIn } = nextjs.useClerk();
+    const router = navigation.useRouter();
+    const [billingType, setBillingType] = React.useState(data.billingSwitch.defaultKey);
+    const [isProcessing, setIsProcessing] = React.useState(false);
+    const [tooltip, setTooltip] = React.useState({ show: false, content: '', x: 0, y: 0 });
+    // 确定用户状态
+    const getUserState = () => {
+        var _a, _b;
+        if (!fingerprintContext)
+            return moneyPriceTypes.UserState.Anonymous;
+        const { xUser, xSubscription } = fingerprintContext;
+        if (!(xUser === null || xUser === void 0 ? void 0 : xUser.clerkUserId))
+            return moneyPriceTypes.UserState.Anonymous;
+        if (!(xSubscription === null || xSubscription === void 0 ? void 0 : xSubscription.status) || xSubscription.status === 'free')
+            return moneyPriceTypes.UserState.FreeUser;
+        if ((_a = xSubscription.priceName) === null || _a === void 0 ? void 0 : _a.includes('Pro'))
+            return moneyPriceTypes.UserState.ProUser;
+        if ((_b = xSubscription.priceName) === null || _b === void 0 ? void 0 : _b.includes('Ultra'))
+            return moneyPriceTypes.UserState.UltraUser;
+        return moneyPriceTypes.UserState.FreeUser;
+    };
+    const userContext = {
+        isAuthenticated: !!((_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xUser) === null || _a === void 0 ? void 0 : _a.clerkUserId),
+        subscriptionStatus: getUserState(),
+        subscriptionType: ((_c = (_b = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _b === void 0 ? void 0 : _b.priceId) === null || _c === void 0 ? void 0 : _c.includes('yearly')) ? 'yearly' : 'monthly',
+        subscriptionEndDate: (_d = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _d === void 0 ? void 0 : _d.subPeriodEnd
+    };
+    // 处理登录
+    const handleLogin = () => {
+        if (signInPath) {
+            router.push(signInPath);
+        }
+        else {
+            redirectToSignIn();
+        }
+    };
+    // 处理升级
+    const handleUpgrade = (plan, billingType) => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        // 如果没有配置 API 端点，跳转到首页
+        if (!upgradeApiEndpoint) {
+            router.push('/');
+            return;
+        }
+        setIsProcessing(true);
+        try {
+            // 获取价格配置
+            const pricing = moneyPriceConfig.getProductPricing(plan, billingType, config.activeProvider, config);
+            // 调用 API 创建支付会话
+            const response = yield fetch(upgradeApiEndpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    priceId: pricing.priceId,
+                    plan: plan,
+                    billingType: billingType,
+                    provider: config.activeProvider
+                })
+            });
+            const result = yield response.json();
+            if (result.success && result.checkoutUrl) {
+                // 跳转到支付页面
+                window.location.href = result.checkoutUrl;
+            }
+            else {
+                console.error('Failed to create checkout session:', result.error);
+            }
+        }
+        catch (error) {
+            console.error('Error during upgrade:', error);
+        }
+        finally {
+            setIsProcessing(false);
+        }
+    });
+    // 更新价格显示
+    const updatePriceDisplay = (newBillingType) => {
+        const providerConfig = moneyPriceConfig.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}`;
+                }
+            }
+            // 更新单位
+            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';
+            }
+            // 更新副标题
+            const priceSubtitleElement = document.querySelector(`[data-price-subtitle="${plan.key}"]`);
+            if (priceSubtitleElement && plan.showBillingSubTitle !== false) {
+                const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
+                priceSubtitleElement.textContent = (billingOption === null || billingOption === void 0 ? void 0 : billingOption.subTitle) || '';
+            }
+        });
+    };
+    // 更新按钮样式
+    const updateButtonStyles = (newBillingType) => {
+        const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
+        const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
+        const activeClasses = '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';
+        const inactiveClasses = 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
+        if (monthlyButton && yearlyButton) {
+            if (newBillingType === 'monthly') {
+                monthlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
+                yearlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', inactiveClasses);
+            }
+            else {
+                monthlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', inactiveClasses);
+                yearlyButton.className = utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', activeClasses);
+            }
+        }
+    };
+    // 更新折扣信息
+    const updateDiscountInfo = (newBillingType) => {
+        const discountInfoElement = document.querySelector('[data-discount-info]');
+        if (!discountInfoElement)
+            return;
+        const billingOption = data.billingSwitch.options.find(opt => opt.key === newBillingType);
+        const providerConfig = moneyPriceConfig.getActiveProviderConfig(config);
+        // 检查是否有折扣
+        let hasDiscount = false;
+        let discountPercent = 0;
+        ['pro', 'ultra'].forEach(planKey => {
+            const product = providerConfig.products[planKey];
+            const pricing = product.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);
+        }
+    };
+    // 动态替换按钮
+    React.useEffect(() => {
+        data.plans.forEach((plan) => {
+            const placeholder = document.querySelector(`[data-button-placeholder="${plan.key}"]`);
+            if (placeholder) {
+                const root = client.createRoot(placeholder);
+                root.render(jsxRuntime.jsx(moneyPriceButton.MoneyPriceButton, { planKey: plan.key, userContext: userContext, billingType: billingType, onLogin: handleLogin, onUpgrade: handleUpgrade, texts: data.buttonTexts, isProcessing: isProcessing }));
+            }
+        });
+    }, [userContext, billingType, isProcessing]);
+    // 处理月付/年付切换和 tooltip 功能
+    React.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);
+        }
+        // 添加 tooltip 功能
+        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 });
+                    }
+                }
+            });
+        });
+        // 初始化价格显示
+        updatePriceDisplay(billingType);
+        updateDiscountInfo(billingType);
+        // 清理
+        return () => {
+            if (monthlyButton) {
+                monthlyButton.removeEventListener('click', handleMonthlyClick);
+            }
+            if (yearlyButton) {
+                yearlyButton.removeEventListener('click', handleYearlyClick);
+            }
+            // 清理 tooltip 事件监听器
+            tooltipHandlers.forEach(({ element, handlers }) => {
+                element.removeEventListener('mouseenter', handlers.mouseenter);
+                element.removeEventListener('mousemove', handlers.mousemove);
+                element.removeEventListener('mouseleave', handlers.mouseleave);
+            });
+        };
+    }, [data]);
+    // Tooltip 组件
+    const Tooltip = ({ show, content, x, y }) => {
+        if (!show)
+            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 (jsxRuntime.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 jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip));
+}
+
+exports.MoneyPriceInteractive = MoneyPriceInteractive;