@windrun-huaiin/third-ui 7.6.1 → 10.0.0

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

@@ -1,3 +1,4 @@
+import type { XCredit, XSubscription, XUser } from '../../clerk/fingerprint/types';
 /**
  * Money Price Component Types
  * 价格组件类型定义
@@ -11,9 +12,16 @@ export declare enum UserState {
 export interface UserContext {
     isAuthenticated: boolean;
     subscriptionStatus: UserState;
-    subscriptionType?: 'monthly' | 'yearly';
+    subscriptionType?: string;
     subscriptionEndDate?: string;
 }
+export interface InitUserContext {
+    fingerprintId: string | null;
+    xUser: XUser | null;
+    xCredit: XCredit | null;
+    xSubscription: XSubscription | null;
+    isClerkAuthenticated?: boolean;
+}
 export type PaymentProvider = 'stripe' | 'apple' | 'paypal' | 'wechat' | 'alipay';
 export interface EnhancePricePlan {
     priceId: string;
@@ -23,21 +31,34 @@ export interface EnhancePricePlan {
     currency: string;
     credits?: number;
 }
-export interface ProductConfig {
+export interface SubscriptionProductConfig {
     key: string;
-    name: string;
-    plans: {
-        monthly: EnhancePricePlan;
-        yearly: EnhancePricePlan;
-    };
+    plans: Record<string, EnhancePricePlan>;
+}
+export interface CreditPackProductConfig {
+    key: string;
+    priceId: string;
+    amount: number;
+    currency: string;
+    credits: number;
 }
 export interface PaymentProviderConfig {
     provider: PaymentProvider;
     enabled: boolean;
-    products: {
-        free: ProductConfig;
-        pro: ProductConfig;
-        ultra: ProductConfig;
+    subscriptionProducts?: {
+        F1: SubscriptionProductConfig;
+        P2: SubscriptionProductConfig;
+        U3: SubscriptionProductConfig;
+    };
+    creditPackProducts?: {
+        F1: CreditPackProductConfig;
+        P2: CreditPackProductConfig;
+        U3: CreditPackProductConfig;
+    };
+    products?: {
+        F1: SubscriptionProductConfig;
+        P2: SubscriptionProductConfig;
+        U3: SubscriptionProductConfig;
     };
 }
 export interface MoneyPriceConfig {
@@ -55,23 +76,35 @@ export interface MoneyPriceProps {
     locale: string;
     config: MoneyPriceConfig;
     className?: string;
-    upgradeApiEndpoint?: string;
-    signInPath?: string;
+    checkoutApiEndpoint?: string;
+    customerPortalApiEndpoint?: string;
+    enableClerkModal?: boolean;
     sectionClassName?: string;
+    enabledBillingTypes?: string[];
+    enableSubscriptionUpgrade?: boolean;
+    initUserContext?: InitUserContext;
+    initialBillingType?: string;
 }
 export interface MoneyPriceInteractiveProps {
     data: MoneyPriceData;
     config: MoneyPriceConfig;
-    upgradeApiEndpoint?: string;
-    signInPath?: string;
+    checkoutApiEndpoint?: string;
+    customerPortalApiEndpoint?: string;
+    enableClerkModal?: boolean;
+    enabledBillingTypes?: string[];
+    enableSubscriptionUpgrade?: boolean;
+    initialBillingType?: string;
+    disableAutoDetectBilling?: boolean;
+    initUserContext?: InitUserContext;
 }
 export interface MoneyPriceButtonProps {
-    planKey: 'free' | 'pro' | 'ultra';
+    planKey: 'F1' | 'P2' | 'U3';
     userContext: UserContext;
-    billingType: 'monthly' | 'yearly';
-    onLogin: () => void;
-    onUpgrade: (plan: string, billingType: string) => void | Promise<void>;
+    billingType: string;
+    onAuth: () => void;
+    onAction: (plan: string, billingType: string) => void | Promise<void>;
     texts: {
+        buyCredits: string;
         getStarted: string;
         getPro: string;
         getUltra: string;
@@ -79,6 +112,8 @@ export interface MoneyPriceButtonProps {
         upgrade: string;
     };
     isProcessing?: boolean;
+    isInitLoading: boolean;
+    enableSubscriptionUpgrade?: boolean;
 }
 export interface MoneyPriceData {
     title: string;
@@ -93,9 +128,22 @@ export interface MoneyPriceData {
         }>;
         defaultKey: string;
     };
-    plans: Array<{
+    subscriptionPlans: Array<{
+        key: string;
+        title: string;
+        showBillingSubTitle?: boolean;
+        titleTags?: string[];
+        features?: Array<{
+            description: string;
+            icon?: string;
+            tag?: string;
+            tooltip?: string;
+        }>;
+    }>;
+    creditsPlans: Array<{
         key: string;
         title: string;
+        subtitle?: string;
         showBillingSubTitle?: boolean;
         titleTags?: string[];
         features?: Array<{
@@ -106,6 +154,7 @@ export interface MoneyPriceData {
         }>;
     }>;
     buttonTexts: {
+        buyCredits: string;
         getStarted: string;
         getPro: string;
         getUltra: string;

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

@@ -1,2 +1,2 @@
 import type { MoneyPriceProps } from './money-price-types';
-export declare function MoneyPrice({ locale, config, upgradeApiEndpoint, signInPath, sectionClassName }: MoneyPriceProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function MoneyPrice({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, sectionClassName, enabledBillingTypes, enableSubscriptionUpgrade, initUserContext, initialBillingType, }: MoneyPriceProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,72 +1,19 @@
 '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 tslib_es6 = require('../../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.js');
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
-var server = require('next-intl/server');
-var moneyPriceConfigUtil = require('./money-price-config-util.js');
 var moneyPriceInteractive = require('./money-price-interactive.js');
+var moneyPriceData = require('./money-price-data.js');
 
 function MoneyPrice(_a) {
-    return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, config, upgradeApiEndpoint, signInPath, sectionClassName }) {
-        var _b, _c;
-        const t = yield server.getTranslations({ locale, namespace: 'moneyPrice' });
-        const data = {
-            title: t('title'),
-            subtitle: t('subtitle'),
-            billingSwitch: t.raw('billingSwitch'),
-            plans: t.raw('plans'),
-            buttonTexts: t.raw('buttonTexts'),
-            currency: config.display.currency
-        };
-        const providerConfig = moneyPriceConfigUtil.getActiveProviderConfig(config);
-        const minPlanFeaturesCount = config.display.minFeaturesCount;
-        const defaultBilling = data.billingSwitch.defaultKey;
-        const defaultBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === defaultBilling) || data.billingSwitch.options[0];
-        const maxFeaturesCount = Math.max(...data.plans.map((plan) => { var _a; return ((_a = plan.features) === null || _a === void 0 ? void 0 : _a.length) || 0; }), minPlanFeaturesCount || 0);
-        const getFeatureRows = (plan) => {
-            const features = plan.features || [];
-            const filled = [...features];
-            while (filled.length < maxFeaturesCount)
-                filled.push(null);
-            return filled;
-        };
-        function renderPrice(plan, billingKey = data.billingSwitch.defaultKey) {
-            const productConfig = providerConfig.products[plan.key];
-            const pricing = productConfig.plans[billingKey];
-            const currentBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === billingKey) || defaultBillingDisplay;
-            const billingSubTitle = (currentBillingDisplay === null || currentBillingDisplay === void 0 ? void 0 : currentBillingDisplay.subTitle) || '';
-            if (pricing.amount === 0) {
-                return (jsxRuntime.jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [jsxRuntime.jsx("div", { className: "flex items-end gap-2", children: jsxRuntime.jsx("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: "Free" }) }), jsxRuntime.jsx("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: jsxRuntime.jsx("span", { className: utils.cn('text-xs text-gray-700 dark:text-gray-300 font-medium', plan.showBillingSubTitle === false && 'opacity-0 select-none'), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? '' : billingSubTitle }) })] }));
-            }
-            const hasDiscount = pricing.discountPercent && pricing.discountPercent > 0;
-            const unit = currentBillingDisplay.unit || '';
-            let discountText = '';
-            if (hasDiscount && currentBillingDisplay.discountText) {
-                discountText = currentBillingDisplay.discountText.replace('{percent}', String(pricing.discountPercent));
-            }
-            return (jsxRuntime.jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [jsxRuntime.jsxs("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: [data.currency, pricing.amount] }), jsxRuntime.jsx("span", { className: "text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": plan.key, children: unit })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: [hasDiscount && pricing.originalAmount && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { className: "text-base text-gray-400 line-through", "data-price-original": plan.key, children: [data.currency, pricing.originalAmount] }), discountText && (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": plan.key, children: discountText }))] })), jsxRuntime.jsx("span", { className: utils.cn('text-xs text-gray-700 dark:text-gray-300 font-medium', plan.showBillingSubTitle === false && 'opacity-0 select-none'), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? '' : billingSubTitle })] })] }));
-        }
-        return (jsxRuntime.jsxs("section", { id: "money-pricing", className: utils.cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-8 text-base md:text-lg mx-auto", children: data.subtitle }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [jsxRuntime.jsx("div", { className: "flex items-center relative mb-3", children: jsxRuntime.jsxs("div", { className: "flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1", "data-billing-switch": true, children: [jsxRuntime.jsx("button", { className: utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', data.billingSwitch.defaultKey === 'monthly'
-                                            ? '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'), "data-billing-button": "monthly", type: "button", children: ((_b = data.billingSwitch.options.find((opt) => opt.key === 'monthly')) === null || _b === void 0 ? void 0 : _b.name) || 'Monthly' }), jsxRuntime.jsx("button", { className: utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', data.billingSwitch.defaultKey === 'yearly'
-                                            ? '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'), "data-billing-button": "yearly", type: "button", children: ((_c = data.billingSwitch.options.find((opt) => opt.key === 'yearly')) === null || _c === void 0 ? void 0 : _c.name) || 'Yearly' })] }) }), jsxRuntime.jsx("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
-                                const opt = data.billingSwitch.options.find((opt) => opt.key === data.billingSwitch.defaultKey);
-                                let hasDiscount = false;
-                                let discountPercent = 0;
-                                ['pro', 'ultra'].forEach(planKey => {
-                                    const product = providerConfig.products[planKey];
-                                    const pricing = product.plans[data.billingSwitch.defaultKey];
-                                    if (pricing.discountPercent) {
-                                        hasDiscount = true;
-                                        discountPercent = pricing.discountPercent;
-                                    }
-                                });
-                                if (!(opt && hasDiscount && opt.discountText))
-                                    return null;
-                                return (jsxRuntime.jsx("span", { 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", children: opt.discountText.replace('{percent}', String(discountPercent)) }));
-                            })() })] }), jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 w-full", children: data.plans.map((plan, _idx) => (jsxRuntime.jsxs("div", { "data-price-plan": plan.key, className: utils.cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-8 h-full shadow-sm dark:shadow-none min-w-[350px]', 'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * 100 }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxRuntime.jsx("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsxRuntime.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)))] }), renderPrice(plan), jsxRuntime.jsx("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [feature ? (jsxRuntime.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 ? jsxRuntime.jsx("span", { children: feature.icon }) : jsxRuntime.jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsxRuntime.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 ? (jsxRuntime.jsxs("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [feature.description, feature.tooltip && (jsxRuntime.jsx("span", { className: "ml-1 align-middle inline-flex", "data-tooltip-trigger": `${plan.key}-${i}`, "data-tooltip-content": feature.tooltip, children: jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }))] })) : (jsxRuntime.jsx("span", { children: "\u00A0" }))] }, i))) }), jsxRuntime.jsx("div", { className: "flex-1" }), jsxRuntime.jsx("div", { "data-button-placeholder": plan.key, className: "w-full" })] }, plan.key))) }), jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, upgradeApiEndpoint: upgradeApiEndpoint, signInPath: signInPath })] }));
+    return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, enableSubscriptionUpgrade = true, initUserContext, initialBillingType, }) {
+        const data = yield moneyPriceData.buildMoneyPriceData({
+            locale,
+            currency: config.display.currency,
+            enabledBillingTypes,
+        });
+        return (jsxRuntime.jsxs("section", { id: "money-pricing", className: utils.cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto", children: data.subtitle }), jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initUserContext: initUserContext, initialBillingType: initialBillingType })] }));
     });
 }
 

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

@@ -1,70 +1,17 @@
-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 { jsxs, jsx, 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, jsx } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { getTranslations } from 'next-intl/server';
-import { getActiveProviderConfig } from './money-price-config-util.mjs';
 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, upgradeApiEndpoint, signInPath, sectionClassName }) {
-        var _b, _c;
-        const t = yield getTranslations({ locale, namespace: 'moneyPrice' });
-        const data = {
-            title: t('title'),
-            subtitle: t('subtitle'),
-            billingSwitch: t.raw('billingSwitch'),
-            plans: t.raw('plans'),
-            buttonTexts: t.raw('buttonTexts'),
-            currency: config.display.currency
-        };
-        const providerConfig = getActiveProviderConfig(config);
-        const minPlanFeaturesCount = config.display.minFeaturesCount;
-        const defaultBilling = data.billingSwitch.defaultKey;
-        const defaultBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === defaultBilling) || data.billingSwitch.options[0];
-        const maxFeaturesCount = Math.max(...data.plans.map((plan) => { var _a; return ((_a = plan.features) === null || _a === void 0 ? void 0 : _a.length) || 0; }), minPlanFeaturesCount || 0);
-        const getFeatureRows = (plan) => {
-            const features = plan.features || [];
-            const filled = [...features];
-            while (filled.length < maxFeaturesCount)
-                filled.push(null);
-            return filled;
-        };
-        function renderPrice(plan, billingKey = data.billingSwitch.defaultKey) {
-            const productConfig = providerConfig.products[plan.key];
-            const pricing = productConfig.plans[billingKey];
-            const currentBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === billingKey) || defaultBillingDisplay;
-            const billingSubTitle = (currentBillingDisplay === null || currentBillingDisplay === void 0 ? void 0 : currentBillingDisplay.subTitle) || '';
-            if (pricing.amount === 0) {
-                return (jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [jsx("div", { className: "flex items-end gap-2", children: jsx("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: "Free" }) }), jsx("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: jsx("span", { className: cn('text-xs text-gray-700 dark:text-gray-300 font-medium', plan.showBillingSubTitle === false && 'opacity-0 select-none'), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? '' : billingSubTitle }) })] }));
-            }
-            const hasDiscount = pricing.discountPercent && pricing.discountPercent > 0;
-            const unit = currentBillingDisplay.unit || '';
-            let discountText = '';
-            if (hasDiscount && currentBillingDisplay.discountText) {
-                discountText = currentBillingDisplay.discountText.replace('{percent}', String(pricing.discountPercent));
-            }
-            return (jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [jsxs("div", { className: "flex items-end gap-2", children: [jsxs("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: [data.currency, pricing.amount] }), jsx("span", { className: "text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": plan.key, children: unit })] }), jsxs("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: [hasDiscount && pricing.originalAmount && (jsxs(Fragment, { children: [jsxs("span", { className: "text-base text-gray-400 line-through", "data-price-original": plan.key, children: [data.currency, pricing.originalAmount] }), discountText && (jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": plan.key, children: discountText }))] })), jsx("span", { className: cn('text-xs text-gray-700 dark:text-gray-300 font-medium', plan.showBillingSubTitle === false && 'opacity-0 select-none'), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? '' : billingSubTitle })] })] }));
-        }
-        return (jsxs("section", { id: "money-pricing", className: cn("px-4 py-10 md:px-16 md:py-16 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-8 text-base md:text-lg mx-auto", children: data.subtitle }), jsxs("div", { className: "flex flex-col items-center", children: [jsx("div", { className: "flex items-center relative mb-3", children: jsxs("div", { className: "flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1", "data-billing-switch": true, children: [jsx("button", { className: cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', data.billingSwitch.defaultKey === 'monthly'
-                                            ? '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'), "data-billing-button": "monthly", type: "button", children: ((_b = data.billingSwitch.options.find((opt) => opt.key === 'monthly')) === null || _b === void 0 ? void 0 : _b.name) || 'Monthly' }), jsx("button", { className: cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', data.billingSwitch.defaultKey === 'yearly'
-                                            ? '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'), "data-billing-button": "yearly", type: "button", children: ((_c = data.billingSwitch.options.find((opt) => opt.key === 'yearly')) === null || _c === void 0 ? void 0 : _c.name) || 'Yearly' })] }) }), jsx("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
-                                const opt = data.billingSwitch.options.find((opt) => opt.key === data.billingSwitch.defaultKey);
-                                let hasDiscount = false;
-                                let discountPercent = 0;
-                                ['pro', 'ultra'].forEach(planKey => {
-                                    const product = providerConfig.products[planKey];
-                                    const pricing = product.plans[data.billingSwitch.defaultKey];
-                                    if (pricing.discountPercent) {
-                                        hasDiscount = true;
-                                        discountPercent = pricing.discountPercent;
-                                    }
-                                });
-                                if (!(opt && hasDiscount && opt.discountText))
-                                    return null;
-                                return (jsx("span", { 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", children: opt.discountText.replace('{percent}', String(discountPercent)) }));
-                            })() })] }), jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 w-full", children: data.plans.map((plan, _idx) => (jsxs("div", { "data-price-plan": plan.key, className: cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-8 h-full shadow-sm dark:shadow-none min-w-[350px]', 'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * 100 }, children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("span", { className: "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)))] }), renderPrice(plan), jsx("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => (jsxs("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${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("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [feature.description, feature.tooltip && (jsx("span", { className: "ml-1 align-middle inline-flex", "data-tooltip-trigger": `${plan.key}-${i}`, "data-tooltip-content": feature.tooltip, children: jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }))] })) : (jsx("span", { children: "\u00A0" }))] }, i))) }), jsx("div", { className: "flex-1" }), jsx("div", { "data-button-placeholder": plan.key, className: "w-full" })] }, plan.key))) }), jsx(MoneyPriceInteractive, { data: data, config: config, upgradeApiEndpoint: upgradeApiEndpoint, signInPath: signInPath })] }));
+    return __awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, 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 })] }));
     });
 }
 

package/dist/main/price-plan.js

@@ -1,6 +1,6 @@
 '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 tslib_es6 = require('../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.js');
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
 var server = require('next-intl/server');
@@ -12,10 +12,10 @@ require('@windrun-huaiin/base-ui/ui');
 require('./rich-text-expert.js');
 var pricePlanInteractive = require('./price-plan-interactive.js');
 require('@clerk/nextjs');
-require('../clerk/fingerprint/fingerprint-provider.js');
 require('next/navigation');
-require('react-dom');
 require('./money-price/money-price-types.js');
+require('next/link');
+require('./credit/credit-nav-button.js');
 
 function PricePlan(_a) {
     return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, currency = '$', pricePlanConfig, sectionClassName }) {
@@ -71,9 +71,9 @@ function PricePlan(_a) {
             return (jsxRuntime.jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [jsxRuntime.jsxs("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: [data.currency, showNaN ? 'NaN' : (hasDiscount ? formatPrice(saleValue) : formatPrice(originValue))] }), jsxRuntime.jsx("span", { className: "text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": plan.key, children: unit })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: [hasDiscount && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { className: "text-base text-gray-400 line-through", "data-price-original": plan.key, children: [data.currency, showNaN ? 'NaN' : formatPrice(originValue)] }), discountText && (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": plan.key, children: discountText }))] })), jsxRuntime.jsx("span", { className: utils.cn('text-xs text-gray-700 dark:text-gray-300 font-medium', plan.showBillingSubTitle === false && 'opacity-0 select-none'), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? '' : billingSubTitle })] })] }));
         }
         return (jsxRuntime.jsxs("section", { id: "pricing", className: utils.cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-8 text-base md:text-lg mx-auto", children: data.subtitle }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [jsxRuntime.jsx("div", { className: "flex items-center relative mb-3", children: jsxRuntime.jsxs("div", { className: "flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1", "data-billing-switch": true, children: [jsxRuntime.jsx("button", { className: utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', data.billingSwitch.defaultKey === 'monthly'
-                                            ? '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-white bg-linear-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'), "data-billing-button": "monthly", type: "button", children: ((_b = data.billingSwitch.options.find((opt) => opt.key === 'monthly')) === null || _b === void 0 ? void 0 : _b.name) || 'Monthly' }), jsxRuntime.jsx("button", { className: utils.cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', data.billingSwitch.defaultKey === 'yearly'
-                                            ? '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-white bg-linear-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'), "data-billing-button": "yearly", type: "button", children: ((_c = data.billingSwitch.options.find((opt) => opt.key === 'yearly')) === null || _c === void 0 ? void 0 : _c.name) || 'Yearly' })] }) }), jsxRuntime.jsx("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
                                 const opt = data.billingSwitch.options.find((opt) => opt.key === data.billingSwitch.defaultKey);
                                 const bOpt = billingOptions.find((opt) => opt.key === data.billingSwitch.defaultKey);
@@ -84,7 +84,7 @@ function PricePlan(_a) {
                         var _a, _b, _c;
                         return (jsxRuntime.jsxs("div", { "data-price-plan": plan.key, className: utils.cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-8 h-full shadow-sm dark:shadow-none', 'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * 100 }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxRuntime.jsx("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsxRuntime.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)))] }), renderPrice(plan), jsxRuntime.jsx("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [feature ? (jsxRuntime.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 ? jsxRuntime.jsx("span", { children: feature.icon }) : jsxRuntime.jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsxRuntime.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 ? (jsxRuntime.jsxs("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [feature.description, feature.tooltip && (jsxRuntime.jsx("span", { className: "ml-1 align-middle inline-flex", "data-tooltip-trigger": `${plan.key}-${i}`, "data-tooltip-content": feature.tooltip, children: jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }))] })) : (jsxRuntime.jsx("span", { children: "\u00A0" }))] }, i))) }), jsxRuntime.jsx("div", { className: "flex-1" }), jsxRuntime.jsx("button", { className: utils.cn('w-full py-2 mt-auto text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', ((_a = plan.button) === null || _a === void 0 ? void 0 : _a.disabled)
                                         ? 'bg-gray-400 cursor-not-allowed'
-                                        : '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 dark:hover:to-pink-700'), disabled: (_b = plan.button) === null || _b === void 0 ? void 0 : _b.disabled, type: "button", "data-plan-button": plan.key, children: ((_c = plan.button) === null || _c === void 0 ? void 0 : _c.text) || '--' })] }, plan.key));
+                                        : 'bg-linear-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 dark:hover:to-pink-700'), disabled: (_b = plan.button) === null || _b === void 0 ? void 0 : _b.disabled, type: "button", "data-plan-button": plan.key, children: ((_c = plan.button) === null || _c === void 0 ? void 0 : _c.text) || '--' })] }, plan.key));
                     }) }), jsxRuntime.jsx(pricePlanInteractive.PricePlanInteractive, { data: data })] }));
     });
 }

package/dist/main/price-plan.mjs

@@ -1,4 +1,4 @@
-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 { __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, jsx, Fragment } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { getTranslations } from 'next-intl/server';
@@ -10,10 +10,10 @@ import '@windrun-huaiin/base-ui/ui';
 import './rich-text-expert.mjs';
 import { PricePlanInteractive } from './price-plan-interactive.mjs';
 import '@clerk/nextjs';
-import '../clerk/fingerprint/fingerprint-provider.mjs';
 import 'next/navigation';
-import 'react-dom';
 import './money-price/money-price-types.mjs';
+import 'next/link';
+import './credit/credit-nav-button.mjs';
 
 function PricePlan(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, currency = '$', pricePlanConfig, sectionClassName }) {
@@ -69,9 +69,9 @@ function PricePlan(_a) {
             return (jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [jsxs("div", { className: "flex items-end gap-2", children: [jsxs("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: [data.currency, showNaN ? 'NaN' : (hasDiscount ? formatPrice(saleValue) : formatPrice(originValue))] }), jsx("span", { className: "text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": plan.key, children: unit })] }), jsxs("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: [hasDiscount && (jsxs(Fragment, { children: [jsxs("span", { className: "text-base text-gray-400 line-through", "data-price-original": plan.key, children: [data.currency, showNaN ? 'NaN' : formatPrice(originValue)] }), discountText && (jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": plan.key, children: discountText }))] })), jsx("span", { className: cn('text-xs text-gray-700 dark:text-gray-300 font-medium', plan.showBillingSubTitle === false && 'opacity-0 select-none'), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? '' : billingSubTitle })] })] }));
         }
         return (jsxs("section", { id: "pricing", className: cn("px-4 py-10 md:px-16 md:py-16 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-8 text-base md:text-lg mx-auto", children: data.subtitle }), jsxs("div", { className: "flex flex-col items-center", children: [jsx("div", { className: "flex items-center relative mb-3", children: jsxs("div", { className: "flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1", "data-billing-switch": true, children: [jsx("button", { className: cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', data.billingSwitch.defaultKey === 'monthly'
-                                            ? '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-white bg-linear-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'), "data-billing-button": "monthly", type: "button", children: ((_b = data.billingSwitch.options.find((opt) => opt.key === 'monthly')) === null || _b === void 0 ? void 0 : _b.name) || 'Monthly' }), jsx("button", { className: cn('min-w-[120px] px-6 py-2 font-medium transition text-lg relative', data.billingSwitch.defaultKey === 'yearly'
-                                            ? '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-white bg-linear-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'), "data-billing-button": "yearly", type: "button", children: ((_c = data.billingSwitch.options.find((opt) => opt.key === 'yearly')) === null || _c === void 0 ? void 0 : _c.name) || 'Yearly' })] }) }), jsx("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
                                 const opt = data.billingSwitch.options.find((opt) => opt.key === data.billingSwitch.defaultKey);
                                 const bOpt = billingOptions.find((opt) => opt.key === data.billingSwitch.defaultKey);
@@ -82,7 +82,7 @@ function PricePlan(_a) {
                         var _a, _b, _c;
                         return (jsxs("div", { "data-price-plan": plan.key, className: cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-8 h-full shadow-sm dark:shadow-none', 'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * 100 }, children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("span", { className: "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)))] }), renderPrice(plan), jsx("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => (jsxs("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${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("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [feature.description, feature.tooltip && (jsx("span", { className: "ml-1 align-middle inline-flex", "data-tooltip-trigger": `${plan.key}-${i}`, "data-tooltip-content": feature.tooltip, children: jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }))] })) : (jsx("span", { children: "\u00A0" }))] }, i))) }), jsx("div", { className: "flex-1" }), jsx("button", { className: cn('w-full py-2 mt-auto text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', ((_a = plan.button) === null || _a === void 0 ? void 0 : _a.disabled)
                                         ? 'bg-gray-400 cursor-not-allowed'
-                                        : '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 dark:hover:to-pink-700'), disabled: (_b = plan.button) === null || _b === void 0 ? void 0 : _b.disabled, type: "button", "data-plan-button": plan.key, children: ((_c = plan.button) === null || _c === void 0 ? void 0 : _c.text) || '--' })] }, plan.key));
+                                        : 'bg-linear-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 dark:hover:to-pink-700'), disabled: (_b = plan.button) === null || _b === void 0 ? void 0 : _b.disabled, type: "button", "data-plan-button": plan.key, children: ((_c = plan.button) === null || _c === void 0 ? void 0 : _c.text) || '--' })] }, plan.key));
                     }) }), jsx(PricePlanInteractive, { data: data })] }));
     });
 }

package/dist/main/section-layout.d.ts

@@ -0,0 +1 @@
+export declare const responsiveSection = "mx-auto max-w-6xl min-w-[calc(100vw-22rem)]  px-4 py-10 sm:px-6 md:px-8 lg:px-10 scroll-mt-20";

package/dist/main/section-layout.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const sectionSpacing = "px-4 py-10 sm:px-6 md:px-8 lg:px-10 scroll-mt-20";
+const wideWidth = "max-w-6xl min-w-[calc(100vw-22rem)] ";
+const responsiveSection = `mx-auto ${wideWidth} ${sectionSpacing}`;
+
+exports.responsiveSection = responsiveSection;

package/dist/main/section-layout.mjs

@@ -0,0 +1,5 @@
+const sectionSpacing = "px-4 py-10 sm:px-6 md:px-8 lg:px-10 scroll-mt-20";
+const wideWidth = "max-w-6xl min-w-[calc(100vw-22rem)] ";
+const responsiveSection = `mx-auto ${wideWidth} ${sectionSpacing}`;
+
+export { responsiveSection };

package/dist/main/seo-content.js

@@ -1,10 +1,11 @@
 '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 tslib_es6 = require('../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.js');
 var jsxRuntime = require('react/jsx-runtime');
 var server = require('next-intl/server');
 var utils = require('@windrun-huaiin/lib/utils');
 var richTextExpert = require('./rich-text-expert.js');
+var sectionLayout = require('./section-layout.js');
 
 function SeoContent(_a) {
     return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
@@ -23,7 +24,7 @@ function SeoContent(_a) {
             })),
             conclusion: richTextExpert.richText(t, 'conclusion')
         };
-        return (jsxRuntime.jsxs("section", { id: "seo", className: utils.cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [data.title, " ", jsxRuntime.jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), jsxRuntime.jsx("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }), jsxRuntime.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [jsxRuntime.jsxs("div", { className: "space-y-10", children: [jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }), data.sections.map((section) => (jsxRuntime.jsxs("div", { "data-seo-section": section.id, children: [jsxRuntime.jsx("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }), jsxRuntime.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })] }, section.id)))] }), jsxRuntime.jsx("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })] })] }));
+        return (jsxRuntime.jsxs("section", { id: "seo", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [data.title, " ", jsxRuntime.jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), jsxRuntime.jsx("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }), jsxRuntime.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [jsxRuntime.jsxs("div", { className: "space-y-10", children: [jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }), data.sections.map((section) => (jsxRuntime.jsxs("div", { "data-seo-section": section.id, children: [jsxRuntime.jsx("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }), jsxRuntime.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })] }, section.id)))] }), jsxRuntime.jsx("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })] })] }));
     });
 }
 

package/dist/main/seo-content.mjs

@@ -1,8 +1,9 @@
-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 { __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, jsx } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from './rich-text-expert.mjs';
+import { responsiveSection } from './section-layout.mjs';
 
 function SeoContent(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
@@ -21,7 +22,7 @@ function SeoContent(_a) {
             })),
             conclusion: richText(t, 'conclusion')
         };
-        return (jsxs("section", { id: "seo", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [data.title, " ", jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), jsx("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }), jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [jsxs("div", { className: "space-y-10", children: [jsx("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }), data.sections.map((section) => (jsxs("div", { "data-seo-section": section.id, children: [jsx("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }), jsx("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })] }, section.id)))] }), jsx("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })] })] }));
+        return (jsxs("section", { id: "seo", className: cn(responsiveSection, sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [data.title, " ", jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), jsx("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }), jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [jsxs("div", { className: "space-y-10", children: [jsx("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }), data.sections.map((section) => (jsxs("div", { "data-seo-section": section.id, children: [jsx("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }), jsx("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })] }, section.id)))] }), jsx("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })] })] }));
     });
 }
 

package/dist/main/server.d.ts

@@ -1,4 +1,4 @@
-export * from './gallery';
+export * from './gallery/gallery-server';
 export * from './usage';
 export * from './features';
 export * from './tips';
@@ -7,7 +7,10 @@ export * from './seo-content';
 export * from './cta';
 export * from './footer';
 export * from './price-plan';
+export { CreditOverview } from './credit/credit-overview';
+export type { CreditOverviewData, CreditBucket, CreditBucketStatus, SubscriptionInfo, } from './credit/types';
 export { MoneyPrice } from './money-price/money-price';
-export { getActiveProviderConfig, getProductPricing } from './money-price/money-price-config-util';
-export type { MoneyPriceConfig, MoneyPriceProps, MoneyPriceInteractiveProps, MoneyPriceButtonProps, MoneyPriceData, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, ProductConfig, UserContext } from './money-price/money-price-types';
+export { getActiveProviderConfigUtil, getCreditsFromPriceIdUtil, getPriceConfigUtil } from './money-price/money-price-config-util';
+export { buildMoneyPriceData } from './money-price/money-price-data';
+export type { MoneyPriceConfig, MoneyPriceProps, MoneyPriceInteractiveProps, MoneyPriceButtonProps, MoneyPriceData, InitUserContext, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext } from './money-price/money-price-types';
 export { UserState } from './money-price/money-price-types';

package/dist/main/server.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var gallery = require('./gallery.js');
+var galleryServer = require('./gallery/gallery-server.js');
 var usage = require('./usage.js');
 var features = require('./features.js');
 var tips = require('./tips.js');
@@ -9,13 +9,15 @@ var seoContent = require('./seo-content.js');
 var cta = require('./cta.js');
 var footer = require('./footer.js');
 var pricePlan = require('./price-plan.js');
+var creditOverview = require('./credit/credit-overview.js');
 var moneyPrice = require('./money-price/money-price.js');
 var moneyPriceConfigUtil = require('./money-price/money-price-config-util.js');
+var moneyPriceData = require('./money-price/money-price-data.js');
 var moneyPriceTypes = require('./money-price/money-price-types.js');
 
 
 
-exports.Gallery = gallery.Gallery;
+exports.Gallery = galleryServer.Gallery;
 exports.Usage = usage.Usage;
 exports.Features = features.Features;
 exports.Tips = tips.Tips;
@@ -24,9 +26,12 @@ exports.SeoContent = seoContent.SeoContent;
 exports.CTA = cta.CTA;
 exports.Footer = footer.Footer;
 exports.PricePlan = pricePlan.PricePlan;
+exports.CreditOverview = creditOverview.CreditOverview;
 exports.MoneyPrice = moneyPrice.MoneyPrice;
-exports.getActiveProviderConfig = moneyPriceConfigUtil.getActiveProviderConfig;
-exports.getProductPricing = moneyPriceConfigUtil.getProductPricing;
+exports.getActiveProviderConfigUtil = moneyPriceConfigUtil.getActiveProviderConfigUtil;
+exports.getCreditsFromPriceIdUtil = moneyPriceConfigUtil.getCreditsFromPriceIdUtil;
+exports.getPriceConfigUtil = moneyPriceConfigUtil.getPriceConfigUtil;
+exports.buildMoneyPriceData = moneyPriceData.buildMoneyPriceData;
 Object.defineProperty(exports, "UserState", {
 	enumerable: true,
 	get: function () { return moneyPriceTypes.UserState; }

package/dist/main/server.mjs

@@ -1,4 +1,4 @@
-export { Gallery } from './gallery.mjs';
+export { Gallery } from './gallery/gallery-server.mjs';
 export { Usage } from './usage.mjs';
 export { Features } from './features.mjs';
 export { Tips } from './tips.mjs';
@@ -7,6 +7,8 @@ export { SeoContent } from './seo-content.mjs';
 export { CTA } from './cta.mjs';
 export { Footer } from './footer.mjs';
 export { PricePlan } from './price-plan.mjs';
+export { CreditOverview } from './credit/credit-overview.mjs';
 export { MoneyPrice } from './money-price/money-price.mjs';
-export { getActiveProviderConfig, getProductPricing } from './money-price/money-price-config-util.mjs';
+export { getActiveProviderConfigUtil, getCreditsFromPriceIdUtil, getPriceConfigUtil } from './money-price/money-price-config-util.mjs';
+export { buildMoneyPriceData } from './money-price/money-price-data.mjs';
 export { UserState } from './money-price/money-price-types.mjs';